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

🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

이 영상은 GPT-6 Astra와 Seedance 2.5를 활용한 3D 쇼룸 웹사이트 제작을 소개하며, 참고 이미지에서 출발해 HTML 구현·영상 전환·제품 탐색을 단계적으로 결합하지만 제목의 1만 달러 가치는 입증하지 않는다.

📌 핵심 요점

1. 디자인 참고 자료를 먼저 모은다. Pinterest, Mobbin, Collect UI, Dribbble, Awwwards에서 찾은 이미지 네 장을 조합해 원하는 시각적 방향을 구체화한다.
2. 첫 결과물은 웹사이트가 아니라 히어로 영역 이미지다. Nano Banana Pro 또는 영상에서 소개하는 ChatGPT 이미지 생성 기능으로 구도와 제품 배치를 정한 뒤 구현의 기준으로 사용한다.
3. GPT-6 Astra에는 이미지와 유사한 HTML 홈페이지를 먼저 요청한다. 글꼴·색상·간격·제품 위치와 모바일 대응을 명시하고, 이후 헤드셋 기울기와 다른 요소의 호버 효과를 추가한다.
4. 몰입형 진입 장면은 외부 영상 생성 도구를 MCP로 연결해 만든다. 주황색 패널을 클릭하면 헤드셋이 분해되고 렌즈를 통과하는 영상이 재생된 뒤, 여섯 제품을 탐색하는 쇼룸으로 이어진다.
5. 완성도를 높이는 작업은 별도로 남는다. 제품별 시점 전환과 초기화, 모바일 화면 확인, 음향과 기본 음소거, 로딩 애니메이션, 글꼴·여백 조정, 제품 광고 연결까지 순차적으로 다듬는다.

🧩 배경과 문제 정의

발표자는 헤드셋을 중심으로 한 몰입형 제품 소개 사이트를 만든다. 방문자가 주황색 패널을 클릭하면 제품 분해 장면을 거쳐 쇼룸에 들어가고, 여러 제품과 시점을 선택하며 살펴보는 경험이 목표다. 출발점은 원하는 웹사이트의 모습을 담은 이미지 한 장이며, 그 이미지를 만들기 위해 여러 디자인 참고 자료를 먼저 수집한다.

제작 과정의 핵심 문제는 시각적 시안을 실제 웹페이지로 구현하고, 여기에 움직임·영상·제품 탐색 기능을 연결하는 것이다. 영상은 이를 단계별 프롬프트로 해결하는 과정을 보여준다. 제목에 제시된 가격과 도구 명칭은 소개 문구로 다루며, 실제 수익이나 도구의 공식 사양이 검증된 자료로 보지는 않는다.

🕒 시간순 섹션별 상세정리

1. 완성된 쇼룸 경험과 제작 목표

• 주황색 패널을 누르면 헤드셋이 분해되고 3D 쇼룸으로 이동하며, 제품 선택과 회전·세부 확인이 가능하다고 보여준다. [00:12]
• 이미지 한 장에서 사이트와 광고 제작이 시작됐다고 설명하고, 제작 과정과 프롬프트를 공개하겠다고 예고한다. [00:36]

2. 디자인 참고 자료 수집

• Pinterest에서 VR 헤드셋 웹사이트 디자인을 검색하고 마음에 드는 이미지를 저장한다. 여러 참고 이미지를 조합해 자체 디자인을 만드는 방식이다. [01:18]
• Mobbin, Collect UI, Dribbble, Awwwards를 추가로 소개하며, Awwwards에서는 수상 사이트와 카테고리별 사례를 살펴본다. [02:09]
• 저장한 네 개의 참고 이미지를 이미지 생성 모델에 제공해 새로운 웹 디자인을 만들겠다고 보여준다. [02:24]

3. 히어로 영역 이미지를 시각적 기준으로 만들기

• Higgsfield.ai에서 Seedream 5.0 Pro와 Nano Banana Pro를 선택지로 소개하고, 시연에는 Nano Banana Pro와 참고 이미지 네 장을 사용한다. [02:39]
• 전체 사이트 대신 VR·첨단 컴퓨팅 제품의 히어로 영역만 고품질 이미지로 요청하고, 화면 비율은 16:9로 설정한다. [03:12]
• ChatGPT에도 같은 참고 이미지와 요청을 제공해 시안을 비교한다. 최종적으로 고른 이미지를 웹사이트로 구현하고 3D 효과와 애니메이션을 추가할 계획이다. [04:13]

4. 생성 도구 연결과 HTML 홈페이지 구현

• 외부 이미지·영상 생성 도구를 MCP로 연결하는 방식을 설명하고, ChatGPT 설정의 추가 기능 메뉴에서 계정을 연결하는 과정을 보여준다. 이 구간의 서비스명은 자막에서 Hexford로 표기된다. [05:24]
• GPT-6 Astra의 중간 노력 수준을 선택하고, 참고 이미지의 구도·글꼴·색상·간격·제품 위치를 최대한 맞춘 HTML 홈페이지를 요청한다. [06:08]
• 초기 범위를 홈페이지로 제한하면서 화면 높이와 모바일 대응을 요구한다. 결과물의 텍스트와 HTML·CSS 소스를 보여주며 단순 이미지 삽입이 아니라고 보여준다. [07:06]

5. 헤드셋과 인터페이스에 움직임 추가

• 기존 디자인을 유지하면서 포인터 방향에 따라 헤드셋이 기울고 움직이는 효과를 요청한다. [07:38]
• 에이전트가 내장 브라우저에서 마우스를 움직여 결과를 확인하는 모습을 보여주고, 완성된 기울기 효과를 시연한다. [08:10]
• 헤드셋 동작을 유지한 채 로고·메뉴·제목 등 다른 요소에도 약한 호버 움직임을 추가한다. [08:50]

6. 클릭으로 시작하는 몰입형 전환 영상

• 주황색 패널과 체험 버튼을 진입점으로 삼고, 호버가 아닌 클릭에서만 전환 영상이 시작되도록 요구한다. [09:34]
• Higgsfield MCP를 통해 영상을 생성하도록 요청한다. 연출은 흰 배경의 헤드셋이 부품별로 분해되고, 카메라가 내부를 통과해 제품 공간으로 들어가는 순서다. [10:17]
• 브라우저에서 패널을 클릭해 부품 분해와 렌즈 확대, 공간 진입 장면을 확인한다. [10:35]

7. 여섯 제품 쇼룸과 모바일 동작 확인

• 전환 이후 여섯 제품이 있는 쇼룸을 만들고, 제품을 클릭하면 해당 사양을 확인하도록 추가 요청한다. [11:08]
• 제품 선택, 앞면·뒷면·사선 보기, 다른 제품으로 이동, 초기화 기능을 차례로 시연한다. [11:49]
• 브라우저의 기기 화면 모드에서 모바일 레이아웃과 체험·제품 탐색 동작을 확인하며 모바일 대응을 강조한다. [12:25]

8. 음향과 화면 세부 요소 마감

• 호버 음향과 음소거 버튼을 추가한다. 초기 효과음은 별도 음향 생성 도구 없이 코드로 만들었다고 설명하며 개선 여지도 인정한다. [12:48]
• 로딩 애니메이션, 이미지 모서리, 제목과 푸터 글자 크기, 불필요한 문구, 버튼 화살표 간격을 수정 대상으로 정한다. [13:45]
• 작동하지 않던 영화 보기 버튼에는 제품 광고를 연결한다. 수정된 사이트는 로딩 화면을 거쳐 열리며 배경 음악은 기본 음소거 상태다. [14:02]

9. 최종 시연과 자료 공개 예고

• 최종 화면에서 기울기·호버 효과와 쇼룸 진입을 다시 보여준다. 전환이 매끄럽지 않은 부분은 화면 녹화 때문이라고 보여준다. [14:28]
• 제품별 시점 변경과 초기화·홈 복귀, 광고 재생을 시연하고, 광고 제작 지시도 MCP를 통해 외부 도구에 전달했다고 보여준다. [15:15]
• 완성 사이트를 온라인에 올리고 사용한 프롬프트를 무료로 제공하겠다고 예고한 뒤, 댓글 질문을 안내하며 마무리한다. [15:44]

🧾 결론

• 이 사례의 제작 순서는 참고 자료 수집 → 시각적 시안 생성 → HTML 구현 → 상호작용 추가 → 영상·쇼룸 연결 → 마감 수정이다.
• 발표자는 한 번에 모든 기능을 요구하지 않고 기존 결과를 유지하면서 다음 기능을 요청한다. 시각적 기준과 단계별 요구사항이 작업의 중심이다.
• 영상은 작동하는 결과물을 시연하지만, 실제 제작 시간 전체와 생성 비용, 배포 환경, 운영 품질을 검증할 자료는 제공하지 않는다.

📈 투자·시사 포인트

• 웹 제작 사업 관점에서는 디자인 시안, 인터랙션, 제품 소개 영상까지 묶어 제공하는 작업 구성이 드러난다. 다만 이것이 실제 1만 달러 수주나 매출로 이어졌다는 근거는 없다.
• 이미지·코드·영상 도구를 연결하면 한 작업 흐름에서 여러 자산을 제작할 가능성이 보인다. 경제성을 판단하려면 생성 비용과 수정 횟수, 검수 시간을 함께 확인해야 한다.
• 시연 후반의 모바일 확인과 세부 수정은 상업적 납품에서 검수 작업이 여전히 중요함을 보여준다. 초기 생성 속도만으로 총 제작 원가를 판단하기는 어렵다.

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

• 제목의 1만 달러는 거래 내역이나 견적으로 뒷받침되지 않는다. ‘기존에는 수개월, 이제는 몇 분’이라는 설명도 전체 작업 기록을 통한 비교가 아니다.
• 도구 명칭이 일관되지 않는다. 제목에는 Seedance 2.5가 등장하지만 해당 자막에는 Students 2.5로 표기되며, 서비스 이름도 Higgsfield·Hexford·Hicksford·Hexafold 등으로 바뀐다. 초반 후원사 언급에는 Hexnode가 나온다.
• 모델 기능과 연결 메뉴는 발표자의 설명에 근거한다. 제공 자료만으로 실제 사용 가능 여부, 계정 조건, 정확한 서비스 구성을 확인할 수 없다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• 원하는 웹 디자인 참고 이미지 네 장을 모으고, 구도·색상·제품 배치에서 가져올 요소를 정리한다.
• 히어로 영역만 담은 시안을 생성한 뒤 HTML 구현의 기준 이미지로 확정한다.
• 첫 구현 요청에 글꼴·간격·제품 위치·화면 높이·모바일 대응 조건을 명시한다.
• 기울기 효과, 클릭 전환 영상, 제품 쇼룸을 단계별로 추가하고 각 단계의 동작을 확인한다.

❓ 열린 질문

• 제목의 1만 달러는 목표 판매가, 예상 가치, 실제 계약 금액 중 무엇을 뜻하는가?
• 제품의 앞면·뒷면·사선 보기는 어떤 자산과 렌더링 방식으로 구현했는가?
• 재생성·수정·검수까지 포함한 총 제작 시간과 도구 사용료는 얼마인가?