How to Build INSANE 3D Websites With Claude Code! 🤯

🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

Claude Code로 인상적인 3D 웹사이트를 만들려면 스토리·영상·제품 3D 모델을 실제 웹사이트 구조 안에 통합하고, 사람이 결과를 검수해야 한다.

📌 핵심 요점

1. 제작 도구는 반복 작업의 기준을 담은 3D 웹사이트 스킬, 영상·이미지·3D 모델을 생성하는 Higgsfield, 브라우저에서 3D 객체를 보여주는 Three.js로 구성된다. Claude Code가 이 도구들을 연결해 제작을 수행한다.
2. 공통 제작 과정은 스토리 기획 → 장면 영상 생성 → 제품의 3D 모델 제작 → 웹사이트 구현 → 전체 검수의 다섯 단계다. 스토리는 문제를 먼저 보여주고 제품이나 서비스를 해결책으로 제시한다.
3. 헤드폰 Hertz, 우주 호텔 Atlas, 스킨케어 Aurelia, 아이스크림 Mochi Mochi 사례는 같은 제작 과정으로도 서로 다른 분위기와 인터랙션을 구현할 수 있음을 보여준다.
4. 발표자가 지적한 실패는 장식적인 코드 효과에 치우치는 것과 화면 전체를 영상으로만 채우는 것이다. 최종 버전에는 메뉴, 헤드라인, 버튼, 기능 설명, 제품 옵션, FAQ, 푸터를 넣었다.
5. 브랜드별 색상·서체·상징을 일관되게 적용하고 데스크톱과 모바일에서 깜박임·겹침·로딩 지연을 확인한다. 생성과 구현을 자동화해도 장면 선택과 품질 판단은 사람의 역할로 남는다.

🧩 배경과 문제 정의

영상은 비슷한 모습의 AI 웹사이트에서 벗어나, 제품이 3D로 움직이고 스크롤에 따라 이야기가 전개되는 사이트를 만드는 방법을 설명한다. 발표자는 직접 코드를 작성하지 않고 Claude Code와 자신의 Agent OS에 포함된 스킬을 사용했다고 말한다.

문제는 생성 도구의 사용 여부보다 결과물을 구성하는 방식에 있다. 장식적인 효과만 늘리면 메시지가 흐려지고, 영상만 연속으로 배치하면 웹사이트의 탐색·제품 설명 기능이 약해진다. 영상은 네 가지 브랜드 사례와 수정 과정을 통해 이야기, 제품 중심의 3D 표현, 실제 웹사이트 구조, 사람의 검수를 결합하는 방식을 제안한다. 중간과 끝에는 발표자의 교육 커뮤니티 홍보가 포함된다.

🕒 시간순 섹션별 상세정리

1. 제작 도구와 서비스업 적용 방식

• 발표자는 네 가지 3D 사이트와 공통된 다섯 단계를 예고한다. 스킬은 스토리 기획부터 영상·3D 모델 제작, 사이트 구현과 검수까지 반복 적용할 지침을 담는다. [01:05]
• Higgsfield는 Claude에 연결해 영상·이미지·3D 모델 생성을 요청하는 도구로, Three.js는 브라우저에서 3D 객체를 표시하고 마우스 반응 등을 구현하는 라이브러리로 묶인다. [01:45]
• 발표자는 모든 코드를 Claude Code가 작성했다고 보여준다. 실물 제품이 없는 서비스도 브랜드 상징이나 고객이 얻는 결과를 장면으로 보여주며, 문제를 먼저 제시하고 서비스를 답으로 연결할 수 있다고 드러낸다. [02:22]

2. 서로 다른 네 가지 브랜드 사이트

• 가상의 프리미엄 헤드폰 브랜드 Hertz는 마우스를 따라 회전하는 헤드폰, 비가 멈추는 도쿄 거리 장면, 색상 선택과 소음 조절 슬라이더를 결합한다. 이어 Agent OS와 스킬, 설치 안내 및 코칭을 제공한다는 교육 커뮤니티 홍보가 나온다. [03:30]
• 가상의 우주 호텔 Atlas는 지구와 우주 정거장, 로켓 발사 장면을 객실 카드·예약 폼과 연결한다. 스킨케어 Aurelia는 바닷속 굴과 세럼 병, 분홍빛 액체와 느린 물방울 장면에 상품 크기 선택·장바구니 화면을 배치한다. [04:23]
• Mochi Mochi는 밝은 색상, 딸기 모치 영상, 맛별 카드와 3D 박스 구성을 사용한다. 맛을 선택하면 모치가 상자에 떨어지는 인터랙션을 보여주며, 네 사이트가 같은 스킬과 과정을 공유한다고 보여준다. [04:46]

3. 스토리·영상·제품 모델을 만드는 순서

• 첫 단계는 짧은 장면 다섯 개로 스토리보드를 만드는 것이다. 장면마다 짧은 문구와 카메라가 보여줄 내용을 정하고, Hertz는 시끄러운 도시에서 헤드폰을 통한 평온함으로 이동하는 흐름을 사용한다. [05:17]
• 두 번째 단계에서는 각 장면을 5초 길이의 풀 HD 영상으로 생성한다. 카메라와 조명, 움직임을 구체적으로 지시했으며, 네 사이트에서 만든 34개 장면을 모두 사람이 확인했다고 보여준다. [05:42]
• 세 번째 단계에서는 ChatGPT와 Codex 앱을 거쳐 흰 배경의 제품 이미지를 만든 뒤 Higgsfield에 전달해 회전 가능한 3D 모델로 변환한다. 헤드폰·세럼 병·모치·우주 정거장이 이 과정의 예다. [05:59]

4. 실패한 초기 버전과 최종 디자인 원칙

• 초기 버전은 영상보다 빛나는 선, 떠다니는 덩어리, 입자 효과에 치우쳤다. 발표자는 장면마다 하나의 생각을 전달하고, 무작위 도형 대신 실제 제품을 3D 객체로 쓰도록 네 사이트를 다시 만들었다고 보여준다. [06:43]
• 다음 버전은 전체 화면 영상이 연속돼 사이트보다 영상처럼 느껴졌다. 이를 수정해 메뉴·히어로·버튼·기능 설명·제품 옵션·FAQ·푸터를 넣고, 텍스트 내부 영상, 분할 화면, 호버 영상 카드, 가로 갤러리, 커졌다 작아지는 영상 프레임을 보여준다. [07:57]
• 사이트마다 고유한 색상·서체·상징을 정한다. Hertz는 짙은 그래파이트와 파란색, 굵은 서체, 이어컵 윤곽을 닮은 파란 고리를 사용하며 이 상징을 로고·스크롤바·버튼에 반복한다. [08:23]

5. 전체 검수와 사람이 맡는 판단

• 다섯 번째 단계는 데스크톱과 모바일에서 모든 섹션을 확인하는 것이다. 프레임별로 화면 튐, 깜박임, 겹침, 늦은 로딩을 찾아 완성 전에 수정하도록 스킬에 지시한다고 보여준다. [08:50]
• 발표자는 기존의 여러 전문 인력이 참여하는 제작 방식과 AI 도구를 연결한 방식을 비교하며 네 사이트를 며칠 만에 만들었다고 드러낸다. 동시에 모든 장면을 사람이 확인했고, 좋은 사이트와 초기 결과를 비교하는 판단이 개선의 근거였다고 강조한다. [09:45]
• 마지막 요약은 스킬이 기획·구현·검수를 지시하고, Higgsfield가 영상과 3D 모델을 만들며, Three.js가 브라우저의 3D 표현을 담당한다는 것이다. 핵심 원칙은 실제 웹사이트를 먼저 구성하고 그 안에 영상을 넣는 것이다. [10:09]

6. 교육 상품과 무료 커뮤니티 안내

• 발표자는 지금을 학습 기회로 제시하며 Agent OS, 30일 로드맵, 일일 튜토리얼, 주 4회 코칭, 프롬프트 라이브러리 등을 제공한다는 AI Profit Boardroom을 홍보한다. [10:52]
• 이어 무료 커뮤니티 AI Success Lab과 영상 노트를 안내한다. 노트에 스토리보드·장면·3D 제품·사이트 구현·최종 검수 단계가 담긴다고 설명하며 참여를 권유하고 마무리한다. [11:27]

🧾 결론

• 핵심은 3D 효과의 양보다 제품과 서비스의 가치를 전달하는 이야기다. 실제 제품을 3D 객체로 활용하고 장면마다 하나의 메시지를 전달한다.
• 영상은 웹사이트 안에서 역할을 가져야 한다. 시각적 연출과 함께 탐색, 제품 선택, 예약·구매를 위한 화면 구성이 필요하다.
• 스킬은 제작 기준과 수정 과정에서 얻은 교훈을 재사용하는 수단이다. 다만 결과의 품질은 실제 화면을 확인하고 수정하는 과정까지 포함해 판단해야 한다.

📈 투자·시사 포인트

• 발표자의 사례는 기획·영상·3D·개발 작업을 AI 도구로 연결하는 제작 방식의 가능성을 보여준다. 다만 네 사이트를 며칠 만에 만들었다는 설명만으로 일반적인 비용 절감률이나 수익성을 계산할 수는 없다.
• 제작 실행이 빨라질수록 브랜드 방향, 이야기 구성, 좋은 결과를 고르는 판단의 중요성이 커진다는 것이 영상의 시사점이다. 발표자도 초기 결과와 우수한 사이트를 비교하면서 기준을 개선했다고 설명한다.
• 실물 제품이 없는 서비스업도 브랜드 상징이나 고객이 얻는 결과를 장면으로 표현할 수 있다. 적용 대상은 상품 판매 페이지에 한정되지 않는다.
• 영상은 제작법 소개와 함께 발표자의 교육 커뮤니티를 홍보한다. 도구와 교육 상품의 도입 판단에서는 시연 결과와 실제 운영 성과를 구분해 볼 필요가 있다.

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

• 네 사이트를 며칠 만에 제작했다는 것은 발표자의 설명이다. 총 작업 시간, 생성 실패와 재시도 횟수, 구독료·생성 비용은 제시되지 않는다.
• 스킬을 사용하면 매번 올바르게 제작한다는 주장을 일반적인 품질 보장으로 받아들이기는 어렵다. 영상 자체에서도 초기 결과를 여러 차례 고치고 사람이 모든 장면을 확인했다고 설명한다.
• 예약 폼, 장바구니 버튼, 제품 옵션 등의 화면은 소개되지만 실제 결제·예약 처리나 운영 시스템 연결 여부는 확인되지 않는다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• 제작할 브랜드의 고객 문제와 해결 결과를 정리하고, 장면별 짧은 문구와 화면 설명을 담은 스토리보드를 작성한다.
• 영상 생성 전에 카메라 위치·움직임, 조명, 장면 안에서 움직이는 대상을 구체적으로 적는다.
• 제품은 깔끔한 이미지에서 3D 모델로 만드는 흐름을 검토하고, 서비스는 브랜드 상징이나 고객의 변화 장면으로 표현할 대상을 정한다.
• 메뉴·헤드라인·행동 버튼·제품 또는 서비스 설명·FAQ·푸터를 먼저 구성하고, 각 영상이 들어갈 위치와 역할을 정한다.

❓ 열린 질문

• 영상과 3D 모델의 생성·수정·검수를 모두 포함하면 사이트당 실제 시간과 비용은 얼마나 드는가?
• 시연된 예약·구매 화면은 실제 운영 기능과 어디까지 연결되어 있는가?
• 이러한 연출이 일반적인 제품 페이지보다 고객 이해도나 구매·예약 전환에 어떤 차이를 만드는가?