How to Build $10,000 3D Animated Websites With Claude Code + Seedance 2.5

🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

Claude Code와 Hixfield·Seedance 2.5를 결합하면 레퍼런스 수집부터 스크롤 기반 3D 애니메이션 구현까지 이어지는 고가형 웹사이트 제작 과정을 AI 중심으로 단순화할 수 있다.

📌 핵심 요점

1. Pinterest·Dribbble·awards.com 등에서 여러 디자인을 수집하되 그대로 복제하지 않고, 레퍼런스 이미지들을 조합해 독자적인 히어로 섹션을 생성한다.
2. 생성한 디자인 이미지를 단일 기준점으로 삼고 Claude Code가 HTML·CSS 웹사이트를 구현한 뒤, 헤드리스 브라우저 스냅샷과 리뷰 에이전트로 결과를 반복 비교한다.
3. Hixfield MCP를 Claude Code에 연결하면 이미지 생성과 애니메이션 제작을 같은 작업 환경에서 처리할 수 있지만, 본 작업 전에 간단한 이미지 생성 스모크 테스트가 필요하다.
4. 정적 페이지를 먼저 완성한 다음 Seedance 2.5로 제품 부품이 분해되는 영상을 만들고, 이를 스크롤 진행 방향과 연결해 정방향·역방향 애니메이션을 구현한다.
5. 초기 애니메이션은 480p로 반복 제작하고 방향이 확정된 뒤 1080p로 다시 생성하면 토큰 비용을 줄일 수 있으며, 모바일에서는 애니메이션 크기와 구성을 축소하는 편이 적합한다.

🧩 배경과 문제 정의

스크롤에 따라 사물과 화면 요소가 회전하거나 조립되는 웹사이트는 복잡해 보이지만, 영상은 디자인 레퍼런스 수집, 이미지 생성, Claude Code 기반 구현, Seedance 2.5 애니메이션 생성이라는 단계로 작업을 나누면 AI 도구로 제작할 수 있다고 설명한다. 목표는 기존 사이트를 그대로 복제하는 것이 아니라 여러 시각적 아이디어를 조합해 독자적인 정적 디자인을 만든 뒤, 이를 실제 HTML·CSS 페이지와 가역적인 스크롤 애니메이션으로 전환하는 것입니다.

🕒 시간순 섹션별 상세정리

1. 제작 목표와 디자인 레퍼런스 탐색

• 스크롤에 따라 요소가 움직이고 조립되는 복잡한 경험을 AI 도구로 처음부터 만들며, 이미지 디자인을 실제 웹사이트와 스크롤 제어 애니메이션으로 전환하겠다고 소개합니다. [00:30]
• Pinterest에서 건축 웹사이트 같은 검색어로 이미지를 저장하되 원본을 복제하지 않고 자신만의 버전을 만들어야 한다고 강조한다. [01:02]
• Dribbble, awards.com, collectui.com, mobin.com도 수상작과 인터랙션을 살펴볼 수 있는 영감의 출처로 제시합니다. [01:44]

2. 레퍼런스를 새로운 웹 디자인으로 합성

• Hixfield의 레퍼런스 이미지 기능과 Cream 5.0 Pro 또는 Nano Banana Pro를 이용해 여러 이미지의 시각적 특징을 새로운 히어로 섹션으로 조합합니다. [02:25]
• 웹 화면에 맞춰 16:9 비율을 선택하고, 비용을 고려해 해상도와 배치 크기를 정한 뒤 먼저 결과 하나를 생성해 방향을 확인합니다. [02:55]
• 생성된 이미지를 웹사이트로 변환할 대상으로 삼고, 부품이 분리될 시계와 회전·분해될 자동차를 애니메이션 사례로 선택합니다. [03:40]

3. 로컬 프로젝트와 MCP 연결 준비

• watch animation 프로젝트 안에 reference 폴더를 만들고 기준 이미지를 reference.png로 저장해 각 웹사이트의 작업 공간을 분리합니다. [04:09]
• Claude Code가 이미지와 애니메이션 생성 기능을 직접 호출하도록 Hixfield의 원격 MCP URL을 커스텀 커넥터로 등록하고 계정을 연결합니다. [05:37]
• 로컬 폴더를 열고 권한 모드와 모델을 선택한 다음 간단한 메시지로 Claude Code 세션이 정상 작동하는지 확인합니다. [06:38]

4. 브리핑·백업·스모크 테스트와 기준 이미지 분석

• 브리핑 프롬프트에서 시네마틱 웹사이트라는 목표, Hixfield 사용 방식, 변경 전 백업 규칙을 먼저 전달합니다. [07:48]
• MCP를 통한 간단한 이미지 생성 스모크 테스트를 수행해 Claude Code가 실제로 생성 도구에 접근할 수 있는지 검증합니다. [08:28]
• reference.png를 단일 기준점으로 지정하고, Claude가 이미지를 정밀 분석한 뒤 헤드리스 브라우저 스냅샷과 계속 비교하도록 지시합니다. [09:51]

5. 정적 웹사이트 구현과 다중 에이전트 검수

• 메인 go 프롬프트로 기준 이미지를 단순 HTML·CSS로 재구현하되 Python이나 npm 같은 추가 설치가 필요 없는 형태를 요구합니다. [10:20]
• Claude가 개발·이미지 생성·리뷰 역할의 보조 에이전트를 구성하고, 리뷰 에이전트가 기준 이미지와 구현 결과를 비교해 개발 에이전트에 피드백하도록 합니다. [11:03]
• 무한 반복을 막기 위해 리뷰 통과 또는 최대 5회라는 종료 조건을 두고, 이 단계에서는 애니메이션보다 정적 페이지 완성에 집중합니다. [12:09]

6. 결과 비교와 제한된 범위의 보정

• 자동차와 시계 페이지를 기준 이미지와 나란히 비교한 결과 전체 구성은 유사했지만 시계 배경의 불필요한 스트랩과 색조·텍스트 밝기 차이가 발견됩니다. [13:15]
• 거친 수정 요청을 다른 AI로 다듬어 위치와 형태를 구체적으로 묘사하고, 현재는 두 가지 문제만 수정하라고 범위를 제한합니다. [14:59]
• 배경 밝기, 붉은 금색 질감, 시계 기울기, 그래픽과 레이아웃을 후속 프롬프트로 조정해 애니메이션의 출발 화면을 확정합니다. [15:47]

7. Seedance 2.5 기반 스크롤 애니메이션 생성

• 히어로 섹션의 HTML 요소를 숨겨 정적 화면을 시작 프레임으로 사용하고, Seedance 2.5 이미지-투-비디오 모델로 시계가 분해되는 장면을 만들도록 요청합니다. [16:30]
• 스크롤을 내리면 각 부품이 떨어져 나가고 반대로 올리면 원래 상태로 복귀하는 스크롤 구동 애니메이션을 목표로 설정합니다. [17:04]

8. 잘못된 분해 방향을 중단하고 교정

• 첫 결과에서 부품이 원하는 축을 따르지 않자 실행을 중지하고 go clear 명령으로 기존 목표가 다시 시작되지 않게 한 뒤 방향을 수정합니다. [18:22]
• 모든 부품을 하나의 공통 축으로 움직이라는 수정도 의도와 달랐음을 인정하고, 각 부품이 자신의 장착 축을 따라 분리되도록 프롬프트를 다시 작성합니다. [19:08]
• 최종 반복 결과에서는 스크롤 시 텍스트가 사라지고 덮개와 기계 부품이 흘러나오며, 역스크롤하면 시작 방향으로 다시 결합됩니다. [19:31]

9. 세부 움직임과 해상도별 비용 최적화

• 작은 주변 요소에도 움직임을 추가해 확대했을 때 보이는 미세한 디테일까지 애니메이션의 완성도를 높입니다. [19:47]
• 여러 번 수정해야 하는 단계는 480p로 생성하고, 움직임이 확정된 뒤 1080p로 다시 제작해 Hixfield 토큰 비용을 절감합니다. [20:15]

10. 전체 페이지 확장과 자동차 사례 적용

• 시계 사이트에 기계 장치가 움직이는 추가 섹션, 360도 회전, 여러 시계 변형, 내부를 살펴보는 장면, CTA와 푸터를 이어 붙입니다. [20:49]
• 자동차 사이트에도 같은 원리를 적용해 스크롤에 따라 차가 회전하고 보닛·엔진·타이어가 분리되는 경험을 구현합니다. [21:13]
• 중요한 것은 특정 프롬프트의 복사가 아니라 움직일 부품과 방향을 정의하는 사고 과정을 이해해 다른 고객 업종으로 일반화하는 것이라고 보여준다. [21:38]

11. 로딩·모바일 대응과 마무리

• 약 3초의 로딩 애니메이션 동안 스크롤용 요소를 미리 불러오면 무거워 보이는 페이지의 초기 경험을 개선할 수 있다고 제안합니다. [22:00]
• 데스크톱 중심의 무거운 애니메이션은 모바일 뷰포트에 맞게 크기를 축소하고 프레임 안에 들어오도록 별도 조정해야 한다고 보여준다. [22:12]
• 후속 질문을 댓글로 받겠다고 안내하며 튜토리얼을 마칩니다. [22:26]

🧾 결론

• 핵심 경쟁력은 특정 프롬프트를 복사하는 데 있지 않고, 레퍼런스 분석·정적 구현·시각 비교·애니메이션 보정으로 이어지는 제작 원리를 이해하는 데 있다.
• 에이전트의 첫 결과를 완성품으로 간주하지 않고, 수정 범위와 종료 조건을 명확히 지정해 반복 횟수와 비용을 통제해야 한다.
• 시계와 자동차 사례처럼 분해 방향과 움직일 부품만 다시 정의하면 같은 제작 구조를 다른 제품형 웹사이트에도 적용할 수 있다.

📈 투자·시사 포인트

• 생성형 이미지·영상 모델과 코딩 에이전트의 결합은 고급 인터랙티브 웹 제작에 필요한 시간과 전문 기술의 진입장벽을 낮출 가능성이 있다.
• MCP처럼 생성 도구를 코딩 환경에 직접 연결하는 인터페이스가 디자인과 개발 사이의 전환 비용을 줄이는 핵심 인프라가 될 수 있다.
• 고해상도 결과보다 저해상도 반복 검증을 먼저 수행하는 방식은 생성형 미디어 서비스의 비용 효율성과 사용자 유지율에 중요한 운영 패턴입니다.
• 다만 제목의 10,000달러 가치 제안은 영상에서 실제 계약·매출·견적 자료로 검증되지 않았으므로 시장 가격의 근거로 직접 사용하기는 어렵습니다.

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

• 제목에 제시된 10,000달러는 실제 판매 사례, 고객 계약, 제작 원가 또는 시장 비교 자료로 뒷받침되지 않습니다.
• 자막에는 Hixfield·Hickfield·Hexfield 및 Seedance·Cedense·Cedance처럼 도구명이 서로 다르게 표기되므로 실제 서비스명, 모델 버전과 MCP URL을 공식 화면에서 확인해야 한다.
• 완성 사이트의 로딩 속도가 빠르다는 설명은 정량적인 성능 측정, 네트워크 조건, 파일 용량 또는 실제 배포 환경 테스트 없이 제시된다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• 원하는 업종의 레퍼런스 이미지를 여러 곳에서 수집하고 복제가 아닌 조합·재해석 원칙으로 하나의 기준 디자인을 생성한다.
• Claude Code 프로젝트에 reference 폴더와 기준 이미지를 배치한 뒤 Hixfield MCP 연결 및 이미지 생성 스모크 테스트를 실행한다.
• 정적 HTML·CSS 구현을 먼저 완료하고, 헤드리스 브라우저 스냅샷과 최대 리뷰 횟수를 포함한 검수 루프를 설정한다.
• 애니메이션은 480p에서 부품별 이동 축과 역방향 재생을 반복 검증한 뒤 최종본만 1080p로 생성한다.

❓ 열린 질문

• 10,000달러 수준의 가격을 정당화하려면 디자인 외에 전략, 콘텐츠, 반응형 개발, 성능 최적화와 유지보수 중 어떤 납품 범위가 추가되어야 할까요?
• 생성된 영상 프레임을 스크롤에 연결하는 실제 코드 구조와 브라우저별 성능 차이는 어떻게 관리해야 할까요?
• 이미지·영상 생성 비용과 Claude Code 사용량을 포함한 프로젝트당 총비용은 어느 정도이며, 반복 횟수에 따라 어떻게 달라질까요?