클로드 3D 라이브 아티팩트, 딥시크로 직접 만들어봤다
들어가며: 라이브 아티팩트의 환상과 현실
Claude Cowork에는 Live Artifacts라는 경이로운 기능이 존재합니다 Ref.1. 3D 씬을 요청하면 코드를 짜서 앱 내에서 곧바로 렌더링해주죠.
"조명 좀 따뜻하게"라고 입력하면 즉시 반영되며, 보고 있으면 감탄이 절로 나옵니다.
⚠️ 치명적인 장벽
문제는 월 20달러의 비용 부담과 더불어 3D 작업을 본격적으로 시작하는 순간 토큰이 순식간에 증발한다는 점입니다.
그래서 고민을 시작했습니다. 이거 결국 몇 개 부품의 조합 아닌가? 무료 모델로 똑같이 구현할 수 있지 않을까?
결론
결론부터 말하면, 80%는 구현 가능합니다. 그리고 나머지 20%가 왜 채워지지 않는지 그 한계점까지 명확히 파악하게 되었습니다.
라이브 아티팩트의 3가지 핵심 요소 분해
겉보기엔 마법 같지만 구조를 해부해보면 정확히 세 가지 덩어리로 이루어져 있습니다.
- 즉시 렌더링 — 코드가 변경되면 화면이 지연 없이 곧바로 갱신됨
- 한 화면 안에서 — 에디터 창과 결과물을 오갈 필요 없이 통합됨
- AI의 상태 인지 — 화면에 무엇이 잘못되었는지 모델 스스로 파악함
1번과 2번은 무료 오픈소스 도구들로 완벽하게 구현할 수 있습니다. 진짜 문제는 3번이며, 이것이 핵심입니다.
1단계: 핫리로드(Hot-Reload) 환경 세팅
Vite를 활용하면 코드를 저장하는 순간 브라우저가 알아서 새로고침 없이 화면을 갱신합니다.
npm create vite@latest kart -- --template vanilla
cd kart
npm install three cannon-es
npm run dev📌 버전 고정의 중요성
AI에게 코드를 전담시킬 경우 버전을 엄격히 고정해야 합니다. 아래와 같이 명시하세요.
npm install three@0.160.0 cannon-es@0.20.0 --save-exact--save-exact 옵션은 캐럿(^)을 제거해 불필요한 자동 업데이트로 인한 API 파괴 사고를 방지합니다.
2단계: 브라우저 패널 통합과 한계 돌파
데스크톱 에이전트 환경의 내장 브라우저 패널에 http://localhost:5173을 띄우면 왼쪽에 대화창, 오른쪽에 3D 씬이 배치되어 라이브 아티팩트와 유사한 레이아웃이 완성됩니다.
3단계: 화면을 볼 수 없는 모델을 위한 해결책 (JSON 덤프)
딥시크 같은 텍스트 전용 모델은 시각적 이미지를 인식하지 못합니다. 스크린샷을 넘겨줘도 소용없으므로, 게임의 내부 상태를 텍스트로 추출해야 합니다.
디버그 오버레이를 구축하여 전역 객체로 노출시킵니다:
const state = {
fps: 0,
car: { speed: 0, pos: [0,0,0] },
wheels: [],
errors: []
};
window.__DEBUG__ = state;이제 콘솔에서 간단히 상태를 복사해 AI에게 건네주면 진단 정확도가 극적으로 상승합니다.
비교 요약 및 인사이트
| 비교 항목 | Cowork 라이브 아티팩트 | 직접 구축한 세팅 |
|---|---|---|
| 즉시 렌더링 | O | O (Vite HMR) |
| 통합 화면 | O | O (내장 브라우저 패널) |
| AI 상태 인지 | O | O (JSON 덤프 파일 연동) |
| AI의 시각적 판단 | O | X (수치 기반 분석 대체) |
| 월 비용 | 20달러 이상 ~ | 사실상 0원 |
시각적 감각(색감, 분위기 등)이 중요한 작업에는 유료 구독이 유리하지만, 물리 파라미터나 로직 디버깅처럼 수치화된 영역은 본 세팅이 훨씬 더 정확합니다.