AI는 3D를 못 본다고요?
Claude Code는 3D 공간을 이해하지 못하지만, 스크린샷 피드백 루프를 만들면 사람 개입 없이 3D 모델을 반복 수정할 수 있습니다. 3D 웹앱 2개를 만든 개발자 Dave Snider가 공개한 워크플로우는 Playwright로 자동 캡처 → AI가 스크린샷 분석 →...
Claude Code로 3D 프로젝트를 만들 때 가장 큰 문제는 AI가 입체 공간을 이해하지 못한다는 점입니다. CSS나 색상은 꽤 잘 다루지만, "이 상자를 저 트레이 위에 올려놔" 같은 공간 배치 지시는 매번 실패합니다. 3D 웹앱 2개를 직접 만든 개발자 Dave Snider가 이 문제를 해결하는 실전 워크플로우를 자신의 블로그에 공개했고, 해커뉴스에서 주목을 받고 있습니다.
AI에게 '눈'을 달아주는 스크린샷 루프
핵심 아이디어는 간단합니다. AI가 3D를 직접 이해할 수 없다면, 스크린샷을 찍어서 보여주자는 것입니다.
Snider는 처음에 직접 스크린샷을 찍어서 Claude에게 "이거 봐, 틀렸어"라고 알려주는 방식으로 작업했습니다. 하지만 이 방식은 몇 시간씩 왕복 대화가 필요했습니다. 사람이 일일이 화면을 캡처해서 피드백하는 게 병목이었습니다.
해결책은 AI가 스스로 스크린샷을 찍고, 분석하고, 코드를 고치는 자동 루프를 만든 것입니다. Playwright(브라우저를 코드로 자동 조작하는 도구)로 3D 앱의 화면을 캡처하는 스크립트를 만들고, Claude Code의 CLAUDE.md 파일에 이 루프를 지시했습니다.
Counter Slayer — 보드게임 부품을 3D 프린팅할 수 있는 트레이를 설계하는 웹앱. AI가 이 화면의 스크린샷을 읽고 3D 모델을 수정합니다.
6단계 반복 루프 — CLAUDE.md에 넣으면 AI가 알아서 돌린다
Snider가 Counter Slayer 프로젝트의 CLAUDE.md에 넣은 워크플로우는 이렇습니다.
1. 3D 모델 코드 수정 (lid.ts, counterTray.ts, box.ts)
2. STL 파일 재생성:
npx tsx scripts/generate-geometry.ts3. 스크린샷 캡처:
npx tsx scripts/capture-view.ts --angle iso4. project.json에서 위치·레이아웃 데이터 확인
5. 여러 각도에서 확인, 문제 영역 확대
6. 맞으면 사용자에게 보고 / 틀리면 1번으로
핵심은 "사용자 확인 없이(without user intervention)" 반복한다는 것입니다. AI가 코드를 고치고 → 결과물을 렌더링하고 → 스크린샷으로 자기 작업을 검증하고 → 만족할 때까지 다시 고칩니다.
AI에게 카메라를 쥐여주는 법
3D 작업에서 한 각도만 보면 문제를 놓칩니다. Snider는 AI가 카메라를 자유롭게 움직이며 여러 각도에서 결과를 확인할 수 있도록 도구를 만들었습니다.
npx tsx scripts/capture-view.ts --angle iso
npx tsx scripts/capture-view.ts --angle top
npx tsx scripts/capture-view.ts --angle front
# 확대해서 보기
npx tsx scripts/capture-view.ts --angle left --zoom 3
# 원하는 위치에서 원하는 곳을 바라보기
npx tsx scripts/capture-view.ts --pos "100,80,150" --look-at "0,25,50"
# 특정 부품만 골라서 보기
npx tsx scripts/capture-view.ts --trayId nrme206 --angle bottom --zoom 2
등각(iso), 정면(front), 위(top), 좌(left), 우(right), 뒤(back) 등 10가지 프리셋 각도와 자유 카메라 위치를 지원합니다. AI가 "이 트레이 밑면을 확대해서 보자"고 판단하면 알아서 해당 명령을 실행합니다.
이 방법으로 만든 실제 앱 2개
Snider는 이 워크플로우로 두 개의 3D 웹앱을 완성했습니다.
Counter Slayer — 보드게임 말과 카드를 정리하는 3D 프린팅용 트레이를 설계하는 도구입니다. 육각형, 사각형, 원형 등 다양한 모양의 부품 칸을 배치하고, 뚜껑이 딱 맞게 닫히는 상자까지 자동 생성합니다. STL(3D 프린터 출력 파일) 형식으로 내보내기가 가능합니다.
Table Slayer — TRPG(탁상 위에서 하는 롤플레잉 게임) 세션에서 TV에 전투 맵을 띄워주는 도구입니다. 안개 효과, 날씨, 시간대 변경 같은 기능을 구글 슬라이드처럼 쉽게 조작할 수 있습니다.
Table Slayer — TRPG 전투 맵을 TV에 표시하는 웹앱. 이것도 Claude Code의 스크린샷 루프로 3D 작업을 했습니다.
"AI에게 기대하지 말고, 공유 언어를 만들어라"
Snider가 강조하는 핵심 철학은 이것입니다.
"AI가 내 요청을 이해해주길 기대하는 대신, 프로젝트를 논의할 공유 언어를 만드는 도구를 먼저 만듭니다. 스크린샷 루프가 바로 그 공유 언어입니다."
Claude Code는 STL 파일(3D 프린팅 파일)을 읽을 수 있다고 주장하지만, 실제로는 바이너리 내용을 지어냅니다. 파이썬 라이브러리를 설치해서 읽을 수도 있지만, 문제는 대부분 3D 모델을 만드는 코드에 있지 결과 파일에 있지 않습니다.
그래서 실제 앱을 렌더링하고 → 그 화면을 캡처해서 → AI에게 보여주는 방식이 가장 효과적입니다. 3D 공간에서 빨간 구(sphere)를 디버그 마커로 찍어서 위치 기준점을 잡는 것도 핵심 기법입니다.
3D가 아니어도 쓸 수 있는 패턴
이 스크린샷 루프 패턴은 3D 작업에만 국한되지 않습니다. AI가 결과를 '눈으로' 확인해야 하는 모든 작업에 적용할 수 있습니다.
적용 가능한 분야:
• 웹 디자인 — 반응형 레이아웃을 여러 해상도에서 캡처하고 AI가 CSS를 수정
• 차트/그래프 — 데이터 시각화 결과를 캡처하고 AI가 보기 좋게 조정
• 게임 개발 — UI 요소 배치나 캐릭터 애니메이션을 캡처해서 디버그
• PDF/문서 생성 — 출력 결과를 캡처하고 AI가 레이아웃을 교정
직접 적용하는 방법
이 워크플로우를 자신의 프로젝트에 적용하려면 3가지가 필요합니다.
1. 캡처 스크립트 — Playwright 같은 브라우저 자동화 도구로 현재 화면을 이미지로 저장하는 스크립트를 만듭니다.
2. CLAUDE.md에 루프 지시 — "코드 수정 → 캡처 → 분석 → 반복" 순서를 명시합니다. "사용자 확인 없이 반복하라"는 지시가 핵심입니다.
3. 디버그 마커 — AI가 위치를 파악할 수 있는 시각적 기준점(빨간 점, 격자선 등)을 추가합니다.
Counter Slayer의 전체 CLAUDE.md 파일은 GitHub에서 확인할 수 있습니다. 10가지 카메라 각도, 좌표계 설명, 디버그 파일 구조까지 상세하게 정리되어 있어 자신의 프로젝트에 참고하기 좋습니다.
AI와 바이브코딩에 대해 더 알고 싶다면 무료 학습 가이드를 확인해보시기 바랍니다.
관련 콘텐츠 — Easy클코로 AI 시작하기 | 무료 학습 가이드
출처