GPT6 Astra와 Blender로 인터랙티브 3D 웹사이트를 만드는 4단계 과정

01핵심 개요

• Codex와 GPT6 Astra를 활용해 Blender 3D 에셋을 만들고 Three.js 웹페이지에 넣는 과정을 소개한다.
• 사전 준비물은 Codex 또는 Claude Code, 무료 오픈소스 Blender, GitHub 저장소의 보조 스킬이다.
• 1단계에서는 이미지 생성으로 3D 히어로 섹션의 미학과 디자인 후보를 여러 개 빠르게 검토한다.
• 2단계에서 Codex가 스크립팅 중심으로 Blender 에셋을 생성했으며, 사례 작업에는 12분 40초가 걸렸다.
• 완성 후에는 모바일 정지 이미지, 오프스크린 렌더링 중지, 에셋 다운로드 크기 측정으로 최적화한다.

02핵심 주장 / 논점 구조

• 영상은 GPT6 Astra와 Codex를 이용하면 Blender 경험 없이도 인터랙티브 3D 웹 에셋을 제작할 수 있다고 설명한다.
• 제작 흐름은 사전 준비, 이미지 기반 디자인 선정, Blender 에셋 생성, 웹 통합과 최적화의 4단계다.
• 히어로 섹션의 3D 조형물은 사전 녹화 영상이 아니라 Three.js로 페이지에 불러온 실제 에셋이라고 소개한다.
• 에셋은 마우스 움직임에 반응하고, 스크롤에 따라 움직이며, 확장하거나 다시 축소할 수 있다.

03사전 준비와 GitHub 보조 스킬

• 컴퓨터에는 Codex 또는 Claude Code, Blender, 보조 스킬이 필요하다고 제시한다.
• Blender는 무료 오픈소스 도구이므로 쉽게 내려받을 수 있다고 설명한다.
• 제작자가 사용한 Blender Agent Studio 스킬은 GitHub에서 찾았으며 별 20개인 스킬이라고 말한다.
• Blender to web 스킬은 영상에서 안내한 GitHub 저장소에 포함되며, Claude Code나 Codex를 저장소에 연결해 설치한다.

04이미지 생성으로 3D 디자인 방향 정하기

• Blender에 바로 들어가기보다 Astra로 이미지를 생성해 원하는 미학을 먼저 정하는 방식을 권한다.
• 사례에서는 검정색과 네온 독성 노란색, 마우스·클릭 반응형 3D 에셋을 가진 히어로 섹션을 요청했다.
• Codex는 로봇 얼굴, 로봇 팔, 살아 있는 천, 조형물 형태 등 여러 디자인 후보를 이미지로 제시했다.
• GitHub 저장소의 샘플 프롬프트를 템플릿으로 삼아 3개에서 7개까지 히어로 섹션 변형안을 만들 수 있다.

05Codex의 Blender 에셋 생성과 반복 수정

• 선택한 디자인을 바탕으로 Codex에 Blender 내부의 3D 에셋 생성을 요청하는 것이 2단계다.
• 사례의 생성 작업은 12분 40초가 걸렸고, 대부분 스크립팅으로 수행됐다고 설명한다.
• Codex는 Blender 화면을 열어 결과를 확인하기 위한 컴퓨터 사용도 하지만, 사용자가 Blender를 직접 조작할 필요는 없다고 말한다.
• 첫 결과에 고정되지 않고, 사례의 노란색 맥동 조명처럼 원하는 변경을 요청하며 반복 수정할 수 있다.

06Three.js 웹페이지 통합과 스토리 구성

• Blender에서 만든 에셋을 Codex가 Three.js 구성물로 변환해 웹페이지에서 조작할 수 있게 했다고 설명한다.
• 가상 회사 Aperture의 웹사이트 사례에서 에셋은 히어로에만 머물지 않고 스크롤과 함께 이동한다.
• 페이지에서는 에셋이 흩어졌다가 다시 모이고 좌우 위치를 바꾸며 제품 이야기의 흐름에 활용된다.
• 웹페이지 자체도 코드 작성 전 이미지 목업을 만들고, 에셋을 페이지 전반에 드러내도록 구성하는 방식을 제안한다.

07모바일 최적화와 배포 방법

• 모바일에서는 복잡한 3D 에셋 대신 정지 이미지를 사용해 오래된 Android 기기 부담을 줄이는 방식을 제시한다.
• 최적화 프롬프트로 모바일과 서로 다른 하드웨어 수준에서의 동작을 점검할 수 있다고 설명한다.
• 점검 항목에는 에셋 다운로드 크기 측정과 화면 밖에 있을 때 렌더링을 멈추는 처리가 포함된다.
• Codex에서는 @sites로 만든 웹사이트를 지정해 내장 호스팅으로 공유할 수 있으나, 실제 프로덕션 용도는 아니라고 덧붙인다.

08용어 사전