3D 화면이 출력되는 자기소개 페이지
1. 오늘 할 일: 프로필 카드에 3D 넣기
Part 1에서 만든 프로필 카드, 갖고 계시죠? 오늘 그 카드에 회전하는 3D 도형을 넣어 "3D 자기소개 페이지"로 업그레이드합니다. 작업은 Claude Desktop에서 합니다.
주의
Part 1의 index.html을 저장해두지 않았다면, 챕터 1-3으로 돌아가 프로필 카드를 먼저 만들어 오세요. 10분이면 충분합니다.
2. 1단계. 파일 첨부하고 요청하기
Claude Desktop에서 새 대화를 열고, 프로필 카드 index.html 파일을 첨부한 뒤 이렇게 요청합니다.
프롬프트 예시
첨부한 내 프로필 카드 페이지에 3D 화면을 추가해줘.
- 카드 상단에 3D 캔버스 영역을 만들고, 그 안에서 정육면체가 천천히 회전하게 해줘
- Three.js는 CDN + Import Map 방식으로 불러와줘
- HTML 파일 하나로 완성해줘 (별도 빌드 도구 사용 금지)
- 은은한 조명을 넣어서 도형에 입체감이 느껴지게 해줘
- 기존 카드 디자인은 유지해줘
잠시 후 미리보기에 회전하는 정육면체가 떠 있는 프로필 카드가 나타납니다. 여러분의 첫 Three.js 페이지입니다.
바이브 코딩 팁
프롬프트의 조건 중 "CDN + Import Map", "HTML 파일 하나", "조명" 세 가지는 이 파트 내내 반복됩니다. 챕터 1-2에서 배운 것처럼, 자주 쓰는 조건은 메모해 두고 복사해서 쓰세요. AI가 매번 다른 방식으로 만드는 것을 막는 안전장치입니다.
3. 2단계. 확인하기
- 도형이 부드럽게 회전하고 있나요?
- 도형에 입체감(밝은 면과 어두운 면) 이 보이나요? 모든 면이 같은 색으로 평평하게 보인다면 "조명이 적용된 재질로 바꿔줘"라고 요청하세요.
- 화면이 하얗거나 아무것도 안 뜬다면? 당황하지 말고 그대로 말하세요. "화면에 아무것도 안 보여. 원인을 찾아서 고쳐줘."
4. 3단계. 다듬기: 도형 가지고 놀기
정육면체가 심심하다면 바꿔봅시다. Three.js에는 기본 도형이 많습니다.
| 이렇게 요청하면 | 이런 도형이 나옵니다 |
|---|---|
| 구로 바꿔줘 | 매끈한 공 모양 (Sphere) |
| 도넛 모양으로 바꿔줘 | 가운데 뚫린 도넛 (Torus) |
| 매듭처럼 꼬인 도형으로 바꿔줘 | 리본이 꼬인 듯한 모양 (TorusKnot). 3D 느낌이 가장 화려합니다 |
| 낮은 폴리곤 느낌의 구로 바꿔줘 | 각진 면이 보이는 로우폴리 스타일 |
겉모습도 바꿔보세요.
> 도형을 금속 재질로 바꾸고 보라색으로 해줘
> 반투명한 유리 느낌으로 만들어줘
> 도형 테두리만 보이는 와이어프레임 스타일로 바꿔줘
마지막으로, 보는 사람이 만질 수 있게 만들면 완성도가 확 올라갑니다.
> 마우스로 드래그하면 도형을 이리저리 돌려볼 수 있게 해줘
바이브 코딩 팁
도형 이름(Torus, Sphere)을 몰라도 "도넛 모양", "꼬인 리본"처럼 생김새로 말하면 AI가 알아서 찾아줍니다. 다만 AI의 답변에 나오는 정식 명칭을 눈여겨보세요. 다음에 더 정확하게 요청할 수 있는 단어가 쌓입니다.
5. 4단계. 저장하고 브라우저에서 열기
완성됐다면 파일로 저장합니다.
- 다운로드 버튼으로 저장합니다. 기존
index.html을 덮어쓰거나,index-3d.html처럼 버전을 나눠 보관하세요. - 더블클릭해 크롬에서 엽니다. 인터넷이 연결되어 있어야 합니다(CDN이 Three.js를 인터넷에서 불러오기 때문입니다).
개념 사전: CDN이란? · Import Map이란? · 캔버스(canvas)란?
6. 도전 과제
- 도형을 2개 이상 띄우고 서로 다른 속도로 회전시켜 보세요.
- 배경에 작은 별(파티클) 이 흩뿌려진 우주 느낌을 요청해 보세요.
- 내 취향의 색·재질·도형 조합을 찾아 나만의 시그니처 카드를 완성해 보세요.
7. 정리
- 파일을 첨부하고 요청하면 기존 페이지에 기능을 얹을 수 있습니다.
- 3D 요청의 3종 안전장치: CDN + Import Map / HTML 파일 하나 / 조명
- 도형·재질·인터랙션은 생김새를 일상 언어로 설명해도 됩니다.
그런데 지금, 우리가 만든 이 화면 속에서 무슨 일이 일어나고 있는 걸까요? 다음 챕터에서 이 코드를 AI와 함께 해부하며 3D 화면의 구조를 이해합니다. 이해하고 나면 요청의 정확도가 완전히 달라집니다.