How to Build $10,000 3D Interactive Websites With GPT-6 Astra + Seedance 2.5

🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

영상은 GPT-6 Astra와 Seedance 2.5를 활용해 참조 이미지에서 출발한 3D 인터랙티브 웹사이트를 만들고 반복 수정하는 과정을 보여주지만, 제목의 1만 달러 가치는 입증하지 않는다.

📌 핵심 요점

1. 디자인 참조를 먼저 모은다. 여러 웹사이트의 구도·타이포그래피·여백을 이미지 생성 도구로 조합해 산악 탐험 홈페이지의 기준 이미지를 만든다.
2. 기준 이미지를 실제 HTML로 구현한다. GPT-6 Astra에 이미지와 함께 화면 구성, 색상, 간격, 데스크톱 화면 채움과 모바일 대응 요구사항을 전달한다.
3. 외부 생성 도구를 연결한다. 영상에서는 후원 서비스의 MCP·플러그인을 통해 이미지와 영상 에셋을 생성하며, 스크롤 여정용 영상 모델로 Seedance 2.5를 지정한다.
4. 완성도는 반복 수정에서 높아진다. 겹치는 글자와 큰 버튼, 반복적인 산 지형을 고치고 경로선·낮밤 변화·움직이는 구름·정보 상자·음악을 추가한다.
5. 결과물은 포트폴리오용 시연이다. 제작자는 약 400~500크레딧과 GPT Astra 사용량 약 35%를 썼다고 설명하지만, 현금 비용이나 실제 판매 실적은 제시하지 않는다.

🧩 배경과 문제 정의

영상의 목표는 산과 구름을 배경으로 스크롤할수록 정상에 다가가는 몰입형 웹사이트를 만드는 것이다. 제작자는 전문 팀이 수주에 걸쳐 만들 법한 경험을 AI 도구로 더 빠르게 구현할 수 있다고 주장하며, 디자인 참조 수집부터 최종 시연까지 보여준다.

핵심 과제는 정적인 시안을 실제 웹페이지로 옮긴 뒤, 일관된 시각 품질을 유지하면서 이동 경로와 이야기 요소를 더하는 데 있다. 제작 과정에서는 글자 겹침, 큰 버튼, 반복적인 지형, 정적인 구름이 문제로 등장하며, 이를 추가 지시로 수정한다. 외부 시각 에셋 생성 서비스가 영상을 후원했고, 결과물은 포트폴리오 용도로 소개된다.

🕒 시간순 섹션별 상세정리

1. 참조 이미지에서 시작하는 산악 웹사이트

• 제작자는 한 장의 참조 이미지에서 출발한 웹사이트를 보여준다. 스크롤에 따라 카메라가 산과 구름 사이를 지나 정상으로 이동하는 경험을 보여준다. [00:16]
• GPT6로 웹사이트를 만들고 후원 서비스로 시각 자료를 제작했다고 설명하며, 참조 수집부터 영상·음악·인터랙티브 스토리텔링까지 다룰 것을 예고한다. [00:51]

2. 디자인 영감 수집과 조합 방향

• Pinterest 등에서 산악 웹사이트를 검색하고, 마음에 드는 화면을 저장해 디자인 참조로 모은다. 인터랙션 중심 사이트를 찾아 실제 동작도 살펴본다. [02:25]
• 전경의 산, 배경의 큰 글자, 구름과 작은 안내 문구 등 선호 요소를 추려 여러 이미지를 새 디자인의 참조로 조합한다. [02:48]

3. 이미지 생성으로 기준 시안 확정

• 참조 이미지를 업로드하고 구도·타이포그래피·분위기·깊이·여백을 분석해 독자적인 홈페이지 시안을 만들도록 요청한다. 직접 복제하지 말라는 조건도 포함한다. [03:43]
• 16:9 비율과 2K 해상도로 이미지를 생성하고, 다른 이미지 생성 경로도 시연한 뒤 실제 웹사이트로 옮길 기준 디자인을 선택한다. [05:17]

4. 시각 에셋 생성을 위한 MCP 연결

• 제작자는 영상과 애니메이션 제작을 위해 외부 서비스의 MCP를 연결한다고 보여준다. 계정 연결을 통해 필요한 에셋을 생성하는 흐름을 보여준다. [05:53]
• 서비스의 MCP 메뉴 또는 앱의 플러그인 디렉터리를 통해 계정을 연결하고 플러그인 활성화를 확인한다. [06:42]

5. 기준 이미지를 HTML로 구현

• 기준 이미지의 구성·글꼴·색상·간격·이미지 크롭을 맞춘 HTML 홈페이지를 요청한다. 데스크톱 화면 채움과 모바일 배치 요구사항도 명시한다. [07:33]
• GPT Astra의 중간 수준 작업 강도를 선택하고 결과를 확인한다. 제작자는 요소 검사를 통해 단순 이미지 삽입이 아닌 HTML 웹사이트라고 보여준다. [08:12]

6. 기본 화면을 다듬고 스크롤 여정 설계

• 참고 사이트의 산악 이동 경험을 살펴본 뒤, 자신의 페이지에서 제목과 겹치는 글자와 지나치게 큰 버튼을 스크린샷 피드백으로 수정한다. [09:44]
• 스크롤 즉시 시작되는 산악 여정과 진행 경로선을 요청한다. 영상 생성에는 Seedance 2.5, 1080p, 16:9 조건을 지정하고 시작 잔액 6,360크레딧을 기록한다. [11:06]

7. 반복적인 지형과 경로 표시 개선

• 첫 스크롤 결과에는 진행 표시가 있지만 산의 모습이 반복적이고 흰색으로 덮인 표현이 아쉽다고 평가한다. 홈페이지의 산악 이미지 수준에 맞추도록 추가 수정을 요청한다. [12:15]
• 수정 후 빛나는 경로 표시, 낮에서 밤으로 바뀌는 분위기, 더 다채로운 구름을 확인한다. 이후에도 정적인 느낌이 남아 있다고 지적한다. [12:43]

8. 구름·정보·음악으로 몰입감 보강

• 이동 중 구름이 움직이게 하고, 지형마다 이야기를 전달하는 정보 상자를 넣으며, 홈페이지와 스크롤 경험에 음악을 더하겠다고 보여준다. [13:21]
• 최종 화면에는 로딩 애니메이션과 움직이는 구름이 추가된다. 음악은 화면의 제어 요소를 클릭해 재생하고 전체 여정에서 이어지도록 구성한다. [13:47]

9. 최종 여정과 자동 진행 시연

• 스크롤하면 구름 사이로 이동하며 비행 데이터, 고도 표시, 경로선과 위치별 정보가 나타난다. 정상에서는 시점을 기울여 주변을 내려다보는 장면으로 마무리한다. [14:36]
• Begin을 누르면 전체 경험이 자동 진행되도록 추가했다고 설명한 뒤 음악과 함께 시연한다. 설명 없이 이어지는 재생 구간은 경험 종료 안내로 끝난다. [16:24]

10. 사용량 공개와 마무리

• 최종 수정에 사용한 프롬프트를 제공하겠다고 안내한다. 제작자는 전체 제작·마무리에 약 400~500크레딧, GPT Astra 사용량 약 35%를 썼다고 추정하며 여러 차례 반복 작업을 했다고 보여준다. [16:46]
• 제작 과정과 웹사이트에 관한 질문을 댓글로 남기면 답하겠다는 안내로 영상을 마친다. [16:52]

🧾 결론

• 제작 흐름은 참조 수집 → 기준 이미지 생성 → HTML 구현 → 스크롤 연출 → 세부 수정으로 이어진다.
• 첫 생성 결과만으로 완성되지 않았다. 제작자가 문제를 찾아 구체적으로 피드백하는 과정이 최종 화면의 품질을 좌우했다.
• 영상이 보여주는 성과는 몰입형 웹사이트의 제작 사례다. 상용 납품 수준의 성능·호환성이나 1만 달러의 거래 가치는 별도 확인이 필요하다.

📈 투자·시사 포인트

• 제작 사업 관점에서는 디자인 시안, 코드, 영상 에셋을 연결하는 작업 방식에 주목할 만하다. 다만 영상에는 기존 제작 방식과 비교한 실측 시간이나 원가 자료가 없다.
• 견적을 산정할 때 최초 생성 비용뿐 아니라 반복 생성과 수정에 쓰는 사용량을 포함해야 한다. 제작자도 여러 차례의 반복 작업이 있었다고 설명한다.
• 사례에서 드러나는 작업의 중심은 도구 선택과 함께 디자인 판단, 연출 방향 지정, 결과 검수에 있다. 자동 생성 이후에도 이 역할이 계속 필요했다.
• 후원 도구를 사용한 단일 사례이므로, 특정 서비스의 경쟁력이나 투자 수익성을 판단하는 근거로 확대하기는 어렵다.

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

• 제목의 1만 달러는 실제 판매가·수주 금액·외부 평가로 뒷받침되지 않는다. 본문에서는 포트폴리오 웹사이트라고 설명한다.
• 제목은 3D 웹사이트를 표방하지만, 제공된 자막만으로는 실제 3D 장면 렌더링과 생성 영상·화면 효과가 각각 어떻게 구현됐는지 확정할 수 없다.
• 서비스 이름의 자막 표기가 Hixfield·Hexfield 등으로 흔들린다. 모델 이름, 플러그인 메뉴와 연결 절차도 영상의 설명이며, 현재 제공 여부는 이 자료만으로 검증되지 않는다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• 참조 화면에서 가져올 구도·타이포그래피·여백을 정리하고, 직접 복제하지 않도록 조합 방향을 명시한다.
• 기준 이미지를 확정한 뒤 HTML 구현 요청에 화면 크기, 모바일 배치, 글자 겹침 방지 조건을 포함한다.
• 사용할 영상 생성 모델과 MCP 연결 가능 여부를 확인하고, 생성 전후 크레딧과 반복 횟수를 기록한다.
• 기본 화면부터 검수한 다음 스크롤 경로, 지형 변화, 구름, 정보 상자, 음악을 단계적으로 추가한다.

❓ 열린 질문

• 최종 결과물에서 실시간 3D 렌더링, 생성 영상, HTML 요소는 각각 어떤 역할을 맡았는가?
• 같은 품질을 다른 주제의 웹사이트에서 재현하려면 몇 번의 생성과 얼마의 수정 시간이 필요한가?
• 이 포트폴리오를 실제 고객에게 납품하려면 어떤 추가 검증과 기능 구현이 필요한가?