GPT 6 Astra + Blender = INSANE 3D Websites

🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

영상은 GPT 6 Astra로 디자인을 구상하고 Blender에서 자산을 제작한 뒤 Three.js로 연결해, 사용자 조작에 반응하는 3D 웹사이트를 만드는 과정을 소개한다.

📌 핵심 요점

1. 메인 화면의 3D 조형물은 사전 녹화 영상이 아니라 마우스 이동, 스크롤, 크기 변경에 반응하는 실제 웹 요소로 소개된다.
2. 준비물은 Codex 또는 영상에서 대안으로 언급하는 Claude Code, Blender, 보조 스킬이다. 발표자는 Blender Agent Studio와 Blender to web을 추천하며 관련 자료를 GitHub 저장소에 제공한다고 설명한다.
3. 첫 단계는 이미지 시안 제작이다. 여러 형태와 색상을 비교해 원하는 방향을 정한 다음, 선택한 이미지를 Blender 제작의 참조로 사용한다.
4. Blender 제작과 웹사이트 구성 모두 반복 수정이 핵심이다. 발표자는 스크립트 중심으로 자산을 만들고, 발광 효과를 추가하며, Three.js 미리보기로 웹에서의 모습을 확인한다.
5. 마지막 단계는 기기별 최적화다. 모바일에는 정적 이미지를 사용하고, 자산 다운로드 크기를 측정하며, 화면 밖에서는 렌더링을 멈추는 방안을 제시한다.

🧩 배경과 문제 정의

발표자는 AI로 만든 웹사이트가 단조롭게 보이는 문제를 출발점으로 삼는다. 제안하는 방법은 생성한 3D 자산을 웹페이지에 넣고 마우스와 스크롤에 반응하게 만들어 시각적 개성과 제품 설명을 함께 강화하는 것이다.

발표자는 자신도 Blender를 직접 사용한 경험이 없었다고 말하며, Codex 안의 GPT 6 Astra와 보조 스킬로 제작을 진행했다고 설명한다. 이 영상의 초점은 Blender 조작법 자체보다 이미지로 방향을 정하고, 제작을 요청하고, 결과를 반복 검토하는 작업 흐름에 있다.

🕒 시간순 섹션별 상세정리

1. 인터랙티브 3D 시연과 준비물

• 발표자는 메인 화면의 조형물이 녹화 영상이 아니라 Three.js로 가져온 요소라고 보여준다. 마우스를 따라 움직이고 스크롤과 크기 변경에 반응하는 모습을 보여준다. [00:29]
• Codex 안에서 GPT 6 Astra를 사용해 진행하며, 다른 코딩 도구에서도 같은 작업이 가능하다고 주장한다. 준비물은 코딩 도구, Blender, 보조 스킬이다. [01:11]
• GitHub 저장소에 설치 안내와 명령을 제공한다고 설명하고 Blender Agent Studio, Blender to web을 추천한 뒤 디자인 단계로 넘어간다. [01:50]

2. 이미지 시안으로 디자인 방향 결정

• 바로 3D 제작을 시작하기보다 이미지를 먼저 생성해 미적 방향을 정하고, 선택한 이미지를 Blender의 참조로 쓰는 방법을 제안한다. [02:24]
• 검정과 네온 노랑을 중심으로 로봇 얼굴·팔·손 등 여러 후보를 탐색한 뒤 무한대 형태의 조형물을 선택한다. [03:06]
• 저장소의 프롬프트를 자신의 주제에 맞게 바꾸고 여러 메인 화면 시안을 비교하는 것이 빠른 디자인 탐색 방법이라고 보여준다. [03:50]

3. Blender 자산 제작과 반복 검토

• 선택한 디자인을 Blender의 3D 자산으로 만들도록 Codex에 요청한다. 사례에서는 12분 40초가 걸렸으며, 주로 스크립트로 작업하고 화면을 열어 결과를 확인했다고 보여준다. [04:32]
• 첫 결과에 없던 노란 발광 효과를 추가하는 등 반복 수정을 진행한다. 완성 전 Three.js 기반의 임시 메인 화면을 만들어 웹에서의 모습도 확인할 수 있다고 제안한다. [05:26]
• 다음 단계에 앞서 자신의 Chase AI Plus와 Claude Code·Codex 교육 과정을 홍보한다. [05:58]

4. 웹사이트 구성과 스크롤 연출

• 가상 회사 Aperture의 사이트를 예로 들어 Blender 자산을 Three.js 구조로 변환했다고 보여준다. 조형물이 스크롤에 따라 분해되고 위치를 바꾸며 페이지의 제품 이야기에 참여한다. [06:49]
• 모바일에는 복잡한 3D 대신 정적 이미지를 쓰는 방안을 제시한다. 웹사이트 전체도 이미지로 먼저 구상해 메인 화면부터 하단까지 일관된 흐름을 만들도록 권한다. [07:48]
• 자산을 페이지 여러 구간에 활용하고, 저장소의 프롬프트를 적용해 사이트와 자산을 반복 수정하며 만족할 때까지 시안을 발전시킨다. [08:30]

5. 최적화, 공유, 제작 경험의 의미

• 마지막 단계에서는 모바일과 성능이 낮은 기기에서의 작동을 점검한다. 자산 다운로드 크기를 측정하고 화면 밖에서는 렌더링을 일시 중단하는 항목을 제시한다. [09:15]
• 발표자는 내장 호스팅과 자막에 나온 'at sites' 입력 방식으로 사이트를 공유할 수 있다고 보여준다. 다만 자신은 실제 운영 서비스용으로 쓰지 않겠다고 덧붙인다. [09:40]
• 네 단계의 작업 흐름을 되짚으며 Blender를 깊이 배우지 않고도 이런 웹 디자인을 시도할 수 있다는 점을 강조한다. 추가 실험에 대한 기대와 교육 서비스 안내로 마무리한다. [10:39]

🧾 결론

• 전체 흐름은 사전 준비 이후 디자인, 3D 자산 제작, 웹사이트 구성, 최적화의 네 단계로 정리된다.
• AI가 제작을 수행하더라도 사용자는 시안을 선택하고 결과물을 검토하며 수정 방향을 제시한다.
• 발표자가 강조하는 차별점은 하나의 3D 자산을 페이지 전반에 활용해 제품 설명과 상호작용을 연결하는 것이다.
• 영상의 내장 호스팅 소개는 결과물을 공유하는 용도이며, 발표자도 실제 운영 서비스에는 사용하지 않겠다고 구분한다.

📈 투자·시사 포인트

• 제작 업무 관점에서는 이미지 생성, 3D 제작, 웹 구현을 연결하는 작업 흐름이 전문 도구의 진입 장벽을 낮출 가능성을 보여준다.
• 웹사이트의 차별화 요소로 시각적 완성도뿐 아니라 스크롤에 따른 분해·재결합과 제품 이야기의 연결을 제시한다.
• 실제 활용 가치는 화려한 시연과 함께 모바일 대응, 다운로드 크기, 렌더링 제어까지 검토해야 판단할 수 있다.
• 영상에는 제작비, 전환율, 매출, 기업 실적 자료가 없어 특정 기업의 투자 수익이나 사업 효과를 추정할 근거는 없다.

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

• GPT 6 Astra의 기능, Codex의 이미지 생성·내장 호스팅, 다른 도구에서의 동일 작업 가능성은 발표자의 설명이다. 제공된 자막만으로 실제 이용 조건이나 호환성을 확인할 수 없다.
• GitHub 저장소와 보조 스킬이 소개되지만 제공된 자료에는 URL, 설치 명령, 버전 정보가 없다. 자막의 Cloud Code·Claude Code 등 표기도 실제 도구명과 대조필요가 있다.
• 12분 40초는 발표자가 제시한 한 번의 자산 제작 사례다. 전체 사이트 제작 시간, 반복 수정 시간, 실행 비용을 뜻하지 않는다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• 고정 댓글의 저장소를 찾아 설치 안내, 보조 스킬, 디자인·제작·최적화 프롬프트를 확인한다.
• 원하는 색상, 조형물, 상호작용을 정리하고 여러 이미지 시안을 생성해 제작 기준을 선택한다.
• 선택한 이미지를 참조해 Blender 자산을 만들고 형태와 발광 효과를 반복 검토한다.
• Three.js 미리보기에서 마우스 반응과 스크롤 연출을 확인하고 페이지 전체의 제품 설명과 연결한다.

❓ 열린 질문

• 복잡한 형태나 다른 스타일의 자산에서도 제시된 제작 시간과 품질을 재현할 수 있는가?
• 모바일을 정적 이미지로 전환했을 때 제품 설명과 시각적 일관성은 얼마나 유지되는가?
• 인터랙티브 3D가 방문자의 이해도나 전환율을 개선하는지는 어떤 비교 실험으로 확인할 수 있는가?