3D 화면 이해하기
AI가 개발을 해주더라도 화면이 어떻게 출력되는지, 어떤 용어를 사용하는지 알면 훨씬 명확한 프롬프팅이 가능합니다. 이 챕터의 목표는 코드 작성이 아니라 AI와의 공용어 만들기입니다.
1. 용어를 알면 요청이 달라집니다
같은 상황에서 두 사람이 이렇게 요청했다고 해봅시다.
- A: "도형이 좀... 멀리 보이게? 작게 말고 멀리. 아니 그게 아니고..."
- B: "카메라를 뒤로 빼줘."
B의 요청이 한 번에 통합니다. 코드를 쓸 줄 몰라도, 화면을 구성하는 요소들의 이름을 알면 AI와의 대화가 정확해집니다. 이번 챕터에서는 지난 챕터에 만든 자기소개 페이지의 코드를 AI와 함께 해부하며 이 이름들을 익힙니다.
2. 3D 화면은 촬영 스튜디오입니다
Three.js가 화면을 만드는 방식은 영상 촬영 스튜디오와 똑같습니다.
| 용어 | 스튜디오 비유 | 하는 일 |
|---|---|---|
| Scene (장면) | 스튜디오 무대 | 모든 것이 놓이는 공간. 무대에 올리지 않으면 화면에 없습니다 |
| Mesh (메시) | 배우 | 무대에 서는 3D 물체. 우리의 정육면체가 배우입니다 |
| Geometry (지오메트리) | 배우의 몸 | 물체의 형태. 정육면체인지, 구인지, 도넛인지 |
| Material (머티리얼) | 배우의 의상·분장 | 물체의 겉모습. 색, 금속인지, 유리인지 |
| Light (조명) | 스튜디오 조명 | 배우를 비춥니다. 조명이 없으면 대부분의 재질은 새까맣게 나옵니다 |
| Camera (카메라) | 촬영 카메라 | 무대를 어느 위치·각도에서 찍을지 정합니다 |
| Renderer (렌더러) | 송출 장비 | 카메라에 찍힌 장면을 실제 모니터 화면에 내보냅니다 |
그리고 하나 더. 도형이 "회전"할 수 있는 이유는 애니메이션 루프 덕분입니다. 렌더러는 1초에 약 60번, 도형을 아주 조금씩 돌려가며 다시 찍습니다. 빠르게 넘기는 플립북처럼, 연속 촬영이 곧 움직임이 됩니다.
배우(Mesh) = 몸(Geometry) + 의상(Material). 이 공식 하나만 기억해도 절반은 이해한 겁니다. "도넛 모양으로 바꿔줘"는 몸을 바꾸는 요청이고, "금속 재질로 바꿔줘"는 의상을 갈아입히는 요청입니다.
3. 내 코드에서 직접 찾아보기
이제 지난 챕터의 index.html을 열어 확인해 봅시다. 직접 읽는 게 아니라, AI에게 설명을 시킵니다. Claude Desktop에 파일을 첨부하고 요청하세요.
프롬프트 예시
첨부한 코드에서 아래 요소들이 각각 몇 번째 줄에 있는지 찾아서,
코드를 처음 보는 사람에게 설명하듯 알려줘.
1. 장면(Scene)을 만드는 부분
2. 도형의 형태(Geometry)와 재질(Material)을 정하는 부분
3. 조명(Light)을 설치하는 부분
4. 카메라(Camera) 위치를 정하는 부분
5. 화면을 반복해서 그리는 애니메이션 부분
AI의 설명을 읽으며 "아, 이 줄이 조명이구나" 하고 위치만 눈에 익히면 충분합니다.
4. 실험으로 확인하기
이름을 알았으니, 진짜인지 실험해 봅시다. 하나씩 요청하고 화면이 어떻게 변하는지 관찰하세요.
| 실험 요청 | 예상 결과 | 확인되는 것 |
|---|---|---|
| 카메라를 지금보다 3배 뒤로 빼줘 | 도형이 멀어져 작게 보임 | 카메라 = 보는 위치 |
| 조명을 모두 꺼줘 | 도형이 새까맣게 보이거나 사라짐 | 조명이 있어야 재질이 보임 |
| 지오메트리만 구로 바꿔줘. 재질은 그대로 | 모양만 바뀌고 색·질감은 유지 | 형태와 겉모습은 별개 |
| 재질만 거울 같은 금속으로 바꿔줘. 모양은 그대로 | 모양은 유지되고 질감만 변화 | 형태와 겉모습은 별개 |
| 애니메이션을 멈춰줘 | 도형이 정지 | 움직임 = 반복해서 다시 그리기 |
실험이 끝나면 "전부 원래대로 되돌려줘"라고 요청해 복구하세요.
바이브 코딩 팁
이 "하나만 바꾸고 관찰하기"는 앞으로도 계속 쓸 학습법입니다. AI가 만든 코드가 궁금할 때마다 부수고 → 관찰하고 → 되돌리세요. 망가뜨려도 되돌릴 수 있다는 것이 바이브 코딩의 특권입니다.
5. 이제 요청이 달라집니다
| 어제의 나 | 오늘의 나 |
|---|---|
| 도형을 좀 멀리서 보이게 해줘 | 카메라를 뒤로 빼고 살짝 위에서 내려다보는 각도로 해줘 |
| 더 반짝이게 해줘 | 재질을 금속으로 바꾸고, 흰색 포인트 조명을 하나 추가해줘 |
| 뭔가 어두워 | 전체를 은은하게 밝히는 조명(앰비언트)을 추가해줘 |
6. 정리
- 3D 화면 = 무대(Scene) 위 배우(Mesh)를 조명(Light) 아래에서 카메라(Camera)로 찍어 렌더러(Renderer)가 송출하는 것
- Mesh = Geometry(형태) + Material(겉모습)
- 움직임은 1초 60번의 연속 촬영(애니메이션 루프)
- 용어를 쓰면 AI 요청의 정확도가 올라갑니다. 단, 몰라도 생김새로 말하면 통합니다. 용어는 강제가 아니라 지름길입니다.
다음 챕터에서는 기본 도형을 졸업하고, 진짜 3D 모델을 불러와 상품 소개 페이지를 만듭니다. 파일이 등장하는 순간, 보조 환경 VS Code + Claude Code가 드디어 출동합니다.