Claude Code 3D Websites: Full Tutorial!

🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

Claude Code로 3D 웹사이트를 만드는 핵심은 스킬로 제작 절차를 정리하고, 제품 중심의 스토리·AI 영상·3D 모델을 실제 웹사이트 기능과 결합한 뒤 화면별로 검수하는 것이다.

📌 핵심 요점

1. 네 가지 데모가 같은 제작 절차를 공유한다. 헤드폰 Hertz, 우주 호텔 Atlas, 스킨케어 Aurelia, 아이스크림 Maky Maky는 서로 다른 분위기와 인터랙션을 보여주지만 동일한 3D 웹사이트 스킬을 사용했다.
2. 스킬은 제작 기준을 반복 적용하는 지침이다. Claude Code가 스토리 기획, 영상 생성, 제품의 3D 모델화, 웹사이트 구현, 최종 검수를 순서대로 수행하도록 안내한다.
3. 도구마다 역할이 나뉜다. Claude Code는 기획과 구현을 맡고, Higgsfield는 영상과 3D 모델 생성에 쓰이며, Three.js는 웹페이지에서 3D 제품을 표시하고 마우스 등에 반응하게 한다.
4. 화려한 효과보다 제품을 설명하는 이야기가 우선이다. 발표자는 추상적인 도형·입자·장식이 많던 초기안을 버리고, 장면마다 하나의 메시지와 실제 제품을 배치해 개선했다고 설명한다.
5. 완성도는 웹사이트 구조와 검수에서 결정된다. 메뉴, 제품 옵션, 구매·예약 관련 화면, FAQ 등 기본 구조를 갖추고, 브랜드별 색상·글꼴·심벌을 일관되게 적용하며 데스크톱과 휴대전화에서 오류를 확인한다.

🧩 배경과 문제 정의

발표자는 Claude Code로 만든 네 가지 3D 웹사이트를 통해, 제품이 마우스를 따라 회전하고 스크롤에 맞춰 영상이 전개되는 브랜드 사이트의 제작 방식을 설명한다. 서로 다른 업종과 분위기의 사례를 동일한 스킬과 절차로 구현할 수 있다는 것이 출발점이다.

핵심 문제는 생성한 효과가 많아도 제품의 이야기가 드러나지 않거나, 영상만 연속 재생돼 웹사이트의 기본 기능이 사라질 수 있다는 점이다. 발표자는 실제 제품을 중심으로 장면을 구성하고, 영상과 3D 요소를 메뉴·상품·예약 등 일반적인 웹사이트 구조 안에 배치하는 방식으로 이를 개선했다고 설명한다.

🕒 시간순 섹션별 상세정리

1. 네 가지 데모로 보여주는 3D 웹사이트의 구성

• 도입부는 마우스 반응형 제품과 스크롤 영상을 보여준다. 가상 헤드폰 브랜드 Hertz에서는 회전하는 3D 헤드폰, 비 오는 도시의 이야기, 색상 변경과 도시 소음 조절 인터랙션을 보여준다. [01:41]
• 가상 우주 호텔 Atlas는 지구와 우주정거장, 발사 장면, 숙박 상품과 예약 폼을 결합한다. 스킨케어 Aurelia는 해저 장면과 세럼 병, 글자 속 액체 영상, 상품 크기 선택과 장바구니 버튼을 배치한다. [02:49]
• Maky Maky는 밝은 색상과 맛별 카드, 선택한 아이스크림이 3D 상자에 떨어지는 박스 구성 기능을 보여준다. 발표자는 네 사이트가 같은 스킬과 절차에서 나왔다고 보여준다. [03:18]

2. 스킬과 연결 도구의 역할

• 스킬은 작업 기준을 한 번 문서화해 여러 프로젝트에 반복 적용하는 지침으로 묶인다. 3D 웹사이트 스킬은 이야기 기획부터 영상·모델 생성, 구현과 검수까지 안내한다. [03:53]
• Higgsfield는 AI 영상과 3D 모델을 만드는 도구로 묶인다. 발표자는 Claude가 생성 요청, 완료 대기, 웹사이트 삽입까지 처리해 별도로 해당 웹사이트를 열지 않았다고 드러낸다. [04:14]
• Three.js는 일반 웹페이지에 3D 객체를 표시하는 도구이며, 마우스 움직임을 따라 헤드폰이 회전하는 효과에 사용된다. [04:25]

3. 스토리보드에서 영상과 3D 제품 제작까지

• 첫 단계는 다섯 개의 짧은 장면으로 스토리보드를 만드는 것이다. 각 장면에 문구와 화면 설명을 붙이며, Hertz는 시끄러운 도시에서 시작해 제품을 거쳐 평온한 결말로 계속된다. [05:02]
• 다음으로 각 장면을 풀 HD의 5초 영상으로 생성한다. 카메라·조명·움직임을 구체적으로 지시하며, 발표자는 네 사이트용으로 만든 34개 장면을 모두 직접 검토했다고 보여준다. [05:31]
• 제품은 ChatGPT와 Codex 앱을 활용해 흰 배경의 사진을 만든 뒤 Higgsfield에서 3D 모델로 변환한다. 이어 웹사이트 구현 단계로 넘어가며, 스킬과 프롬프트 및 설정 안내는 별도 교육 커뮤니티에서 제공한다고 홍보한다. [06:39]

4. 초기 실패를 고친 설계 원칙과 영상 배치법

• 초기안은 발광 선, 떠다니는 도형, 입자와 장식 문구에 치우쳐 메시지가 약했다고 보여준다. 개선안은 장면마다 하나의 아이디어를 전달하고 실제 제품을 3D 요소로 사용한다. [07:32]
• 영상이 연속되는 화면만으로는 사이트가 충분하지 않다고 지적한다. 최종안에는 메뉴, 제목과 설명, 버튼, 기능 소개, 제품 옵션, FAQ, 푸터를 포함한다. [08:14]
• 영상 배치 방식으로 글자 내부 재생, 텍스트와 고정 영상을 나눈 분할 화면, 마우스를 올리면 재생되는 카드, 가로로 이동하는 갤러리, 스크롤에 따라 확대·축소되는 프레임을 제시한다. [09:11]

5. 브랜드 일관성, 화면 검수와 제작 방식 비교

• 사이트마다 고유한 색상·글꼴·심벌을 정한다. Hertz의 경우 짙은 그래파이트와 파란색, 굵은 글꼴, 이어컵을 연상시키는 파란 고리를 로고와 버튼 등에 반복한다. [09:43]
• 마지막 단계는 데스크톱과 휴대전화에서 모든 섹션을 확인하는 것이다. 화면이 튀거나 깜빡이고, 요소가 겹치거나 늦게 나타나는 문제를 찾아 수정한다고 보여준다. [10:13]
• 발표자는 여러 전문 인력과 촬영을 동원하는 기존 방식과 비교해, 브랜드 설명부터 생성·구현·검수까지 연결하는 흐름을 제시한다. 네 사이트의 제작 기간이 짧았다고 주장하지만 표현은 ‘며칠’과 ‘오전 중’으로 엇갈린다. [10:56]

6. 비개발자와 서비스업 적용, 홍보 및 마무리

• 발표자는 모든 코드를 Claude Code가 작성했으며 사용자는 원하는 결과를 말로 설명하고 반환된 결과를 보고 수정을 요청했다고 드러낸다. [11:09]
• 실물 제품이 없는 서비스업에는 3D 브랜드 심벌이나 고객이 얻는 결과를 보여주는 장면을 제안한다. 문제를 먼저 보여주고 서비스를 해결책으로 제시하는 이야기 구조는 동일하다. [11:35]
• 마지막에는 교육 커뮤니티의 로드맵·코칭·프롬프트 라이브러리를 다시 홍보한다. 이어 스킬은 기획·구현·검수, Higgsfield는 영상·3D 모델 생성, Three.js는 웹페이지의 3D 상호작용을 맡는다고 정리하며 끝낸다. [12:42]

🧾 결론

• 영상의 제작 방식은 ‘스토리보드 → 영상 제작 → 제품 3D 모델화 → 웹사이트 구현 → 검수’로 정리할 수 있다.
• 영상은 전체 화면 배경뿐 아니라 글자 내부, 분할 화면, 카드, 가로 갤러리, 확대·축소 프레임에도 배치할 수 있다.
• 서비스업도 제품 대신 브랜드 심벌이나 고객이 얻는 결과를 시각화해 같은 이야기 구조를 적용할 수 있다는 제안이 나온다.
• 발표자가 소개하는 스킬과 프롬프트의 제공처는 별도 교육 커뮤니티다. 이 영상은 제작 원리와 사례를 설명하지만 설치·연동·구현의 모든 세부 단계를 공개하지는 않는다.

📈 투자·시사 포인트

• 제작 업무의 중심 이동: 영상이 제시하는 방식에서는 직접 코딩하는 작업보다 브랜드 설명, 장면 기획, 결과물 선택과 수정 지시가 중요해진다.
• 제작 기간 단축 가능성: 발표자는 네 사이트를 짧은 기간에 제작했다고 주장한다. 다만 비교 견적, 실제 작업 시간, 생성 비용이 없어 비용 절감 규모를 계산할 수는 없다.
• 사업 성과 검증 필요: 시각적 완성도와 구매·예약 성과는 별도로 평가해야 한다. 영상에는 전환율이나 매출 개선을 입증하는 수치가 없다.
• 도구 연결의 운영 부담: 제시된 작업 흐름은 여러 도구의 연동에 의존하므로, 도입 시 생성 비용과 수정·검수 시간을 함께 확인필요가 있다.

⚠️ 불확실하거나 확인이 필요한 부분

• 네 사례는 데모이며, 특히 Hertz와 Atlas는 가상의 브랜드·호텔이라고 명시된다. 화면에 보이는 구매·예약 요소가 실제 결제나 예약 시스템까지 연결됐는지는 확인되지 않는다.
• ‘매번 제대로 만든다’, ‘이번 주에 시작할 수 있다’는 표현은 발표자의 주장이다. 재현 성공률, 필요한 숙련도, 오류 발생률은 제시되지 않는다.
• 스킬 원문, 구체적인 연동 설정, 모델 버전, 생성 횟수와 비용이 없어 영상만으로 동일한 결과를 재현할 수 있는지는 불확실하다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• 브랜드가 해결하는 문제와 제품·서비스가 제공하는 결과를 한 문장씩 적고, 다섯 장면의 스토리보드로 나눈다.
• 각 장면에 짧은 문구, 카메라 위치와 움직임, 조명, 화면 속 움직임을 정의한 뒤 생성 영상을 하나씩 검토한다.
• 제품 사진을 활용한 3D 모델 또는 서비스의 브랜드 심벌을 준비하고, 화면에서 필요한 상호작용을 정한다.
• 메뉴, 핵심 문구, 행동 버튼, 기능 설명, 제품 옵션, FAQ, 푸터를 먼저 점검한 뒤 영상을 배치한다.

❓ 열린 질문

• 같은 스킬을 다른 브랜드에 적용할 때 어느 정도의 수동 수정과 영상 재생성이 필요한가?
• 영상과 3D 모델을 많이 사용하는 구성이 모바일 로딩 속도와 사용성에 어떤 영향을 주는가?
• 데모의 제품 옵션·장바구니·예약 화면을 실제 운영 시스템과 연결하려면 어떤 추가 작업이 필요한가?