상품 소개 페이지 만들기

1. 오늘 할 일: 진짜 상품으로 페이지 만들기

기본 도형은 졸업입니다. 이번에는 진짜 3D 모델을 불러와, 마우스로 빙글빙글 돌려볼 수 있는 상품 소개 페이지를 만듭니다. 모델을 구하는 방법은 두 가지입니다.

만들어진 3D 모델 사용하기: 무료 모델 사이트에서 다운로드
AI로 만들기: 내 물건 사진을 3D 모델로 변환

그리고 이번 챕터부터 중요한 변화가 하나 있습니다. 모델 파일이 생기면서 프로젝트가 파일 여러 개로 커집니다. 드디어 보조 환경인 VS Code + Claude Code가 출동할 시점입니다.

2. 모델이란?

3D 모델은 물체의 형태 + 색·질감 + (때로는 움직임) 이 통째로 담긴 파일입니다. 지난 챕터의 정육면체가 "코드로 그 자리에서 만든 도형"이라면, 모델은 "누군가 공들여 만들어 파일로 내보낸 완성품"입니다. 노트북, 운동화, 캐릭터 같은 복잡한 물체는 모델 파일로 불러오는 게 정석입니다.

무료로 받을 수 있는 곳이 많습니다.

Poly Pizza: 귀여운 저폴리(로우폴리) 모델 위주, 전부 무료. 초보자 추천
Sketchfab: 방대한 모델 마켓. "Downloadable" 필터로 검색

라이선스 확인은 필수입니다.

무료 모델이라도 대부분 조건이 있습니다. CC0는 자유롭게 사용 가능, CC-BY는 만든 사람의 이름을 페이지에 표기해야 합니다. 다운로드 페이지의 라이선스 항목을 꼭 확인하세요. 출처 표기는 부끄러운 일이 아니라 지키면 멋있는 약속입니다.

3. 모델 종류: glTF vs GLB

모델 사이트에서 다운로드 버튼을 누르면 형식을 고르라고 합니다. 웹에서 쓰는 표준은 glTF이고, 두 가지 포장이 있습니다.

	glTF (.gltf)	GLB (.glb)
구성	설계도 + 형태 데이터 + 이미지가 여러 파일로 나뉜 형태	전부를 파일 하나에 담은 형태
비유	재료별로 담은 반찬 통들	한 통에 담은 도시락
장점	수정·편집이 쉬움	관리가 쉬움. 파일 하나만 옮기면 끝

우리는 GLB를 사용합니다. 파일이 하나라 폴더에 넣기도, AI에게 전달하기도 편하고, 빠트리는 파일이 없기 때문입니다. 다운로드할 때 선택지에 GLB가 있다면 GLB를 고르세요.

4. 상품 소개 페이지 제작

이제 만듭니다. 이번엔 Claude Desktop이 아니라 VS Code + Claude Code입니다. 이유는 두 가지입니다.

다운로드한 GLB 파일을 프로젝트 폴더에 넣어야 합니다. 파일을 다루는 작업은 내 컴퓨터 폴더에서 일하는 Claude Code의 영역입니다.
페이지가 커지면서 HTML 한 파일 방식 대신 프로젝트 방식(Vite) 으로 업그레이드합니다. 다음 챕터의 배포까지 이어지는 구조입니다.

4.1 따라하기

상품으로 쓸 GLB 모델을 다운로드해 둔다 (예: 노트북, 스니커즈, 카메라)
VS Code에서 새 폴더 my-product를 열고, 터미널에서 claude를 실행한다
이렇게 요청한다:

프롬프트 예시

Vite로 Three.js 상품 소개 페이지 프로젝트를 만들어줘.

- models 폴더를 만들어줘. 내가 그 안에 product.glb 파일을 넣을 거야
- 화면 왼쪽에 3D 뷰어: product.glb를 불러와 가운데 띄우고,
  마우스 드래그로 돌려볼 수 있게 해줘 (OrbitControls)
- 은은한 조명을 넣어줘
- 화면 오른쪽에는 상품 이름, 한 줄 카피, 설명, 구매 버튼 섹션을 만들어줘
- 모바일에서는 위아래로 배치되게 해줘
다 만들면 브라우저에서 확인하는 방법도 알려줘.

Claude Code가 안내하는 대로 모델 파일을 models 폴더에 넣고 이름을 product.glb로 바꾼다
안내받은 명령어(보통 npm run dev)를 실행하면 localhost 주소가 나온다. 브라우저에서 열어 확인!

왜 파일 더블클릭으로 안 열리나요?

브라우저는 보안상, 더블클릭으로 연 페이지가 컴퓨터 안의 다른 파일(GLB 모델)을 읽는 것을 막습니다. 그래서 작은 서버를 켜고 localhost 주소로 열어야 합니다. 이 서버 역할을 Vite가 해줍니다. 화면이 안 뜨거나 모델이 안 보이면, 에러 메시지를 그대로 Claude Code에게 보여주세요.

4.2 다듬기

> 모델이 너무 작아. 2배 크게 키워줘
> 가만히 둘 때는 모델이 천천히 자동 회전하게 해줘
> 배경을 상품 분위기에 맞는 색으로 바꿔줘
> 구매 버튼을 누르면 안내 문구가 뜨게 해줘

바이브 코딩 팁

작업 중간중간 Claude Code에게 "지금까지 작업한 내용 저장해줘"라고 하세요. Git이 시점을 기록해 둡니다. 말아먹으면 "아까 저장한 상태로 되돌려줘" 한마디면 됩니다. Part 1에서 약속한 GitHub의 "기록" 역할이 바로 이것입니다.

5. 내 상품을 3D 모델로?

만들어진 모델은 편하지만, 내가 소개하고 싶은 물건이 모델 사이트에 없을 수 있죠. 그럴 땐 AI로 직접 만듭니다. 사진이나 텍스트를 3D 모델로 변환해주는 AI 서비스(Meshy 등)가 있습니다.

직접 해봅시다: 피크닉을 3D 모델로 만들어보자

피크닉을 밝은 곳에서, 여러 각도로 사진 찍기 (배경이 깔끔할수록 결과가 좋습니다)
AI 3D 생성 서비스에 사진 업로드 → 생성 대기
결과물을 GLB 형식으로 다운로드
models 폴더의 product.glb를 새 파일로 교체하고 새로고침. 내 물건이 화면에서 돌아갑니다!

기대치 조절

AI가 만든 모델은 아직 완벽하지 않습니다. 디테일이 뭉개지거나 형태가 살짝 이상할 수 있어요. 하지만 "내 물건이 3D로 돌아간다"는 경험은 충분히 줍니다. AI 3D 생성 툴은 Part 3에서 게임 캐릭터를 만들 때 본격적으로 다룹니다.

6. 도전 과제

모델 아래에 그림자가 생기게 요청해 보세요. 바닥에 놓인 느낌이 확 살아납니다.
상품 설명 섹션에 가격과 특징 3가지를 추가해 진짜 판매 페이지처럼 만들어 보세요.
모델 사이트에서 다른 모델을 하나 더 받아, 색상 옵션처럼 전환되는 기능을 요청해 보세요.

7. 정리

모델을 구하는 두 가지 방법: (1) 만들어진 모델 다운로드 (라이선스 확인!) (2) AI로 생성
파일 형식은 GLB 하나로 통일. 파일 하나에 다 들어있는 도시락
파일이 생기는 순간 VS Code + Claude Code로. 프로젝트 방식(Vite)으로 작업하고 localhost로 확인
중간 저장("저장해줘")은 습관입니다

이제 내 컴퓨터에서만 보기 아깝죠? 다음 챕터에서 이 페이지를 인터넷에 공개합니다.