아스트라로 3D 웹사이트 만드는 법

영상 앞부분에서는 직접 만든 게임, 모션그래픽, 영상 편집 결과를 보여드렸습니다. 여기서는 채널 이미지를 첨부해 3D 웹사이트를 만들고, 레퍼런스를 붙여 개선한 과정을 순서대로 따라갑니다.

처음에는 책상과 책장, 화분이 있는 방이 나왔습니다. 원하는 움직임을 보여주는 레퍼런스를 붙이니 마우스를 따라 반응하도록 바뀌었고요. 다만 한 번의 요청으로 구도와 모바일 화면까지 원하는 대로 완성되지는 않았습니다.

STEP 1Codex에서 Astra를 고르세요

ChatGPT 앱에서 Codex 탭을 엽니다. 입력창 아래의 모델 버튼을 누르고, 영상과 같이 GPT-6 Astra → Extra High를 선택합니다.

86번 영상 · 02:37

이 이름과 메뉴 위치는 촬영 화면 기준입니다. 계정에서 보이는 모델과 사용 조건은 앱의 안내를 확인하세요. 모델과 생각하는 정도를 고르는 기준은 OpenAI 공식 안내에 있습니다.

Codex 탭부터 낯설다면 코덱스 시작 가이드의 STEP 1을 먼저 보셔도 됩니다.

STEP 2이미지를 첨부하고 첫 요청을 보내세요

영상에서는 딩코의 AI 심야 아지트 채널 화면을 첨부했습니다. 내 사이트라면 채널 화면, 브랜드 소개 이미지처럼 이름과 분위기가 드러나는 이미지를 넣어 보세요.

아래는 영상에서 말한 첫 요청입니다. 채널 이름은 본인 것으로 바꾸시면 됩니다.

3D 웹사이트를 멋있게 만들어줘. 나는 이런 딩코의 AI 심야 아지트라는 유튜브를 운영하고 있어서 이에 대한 모습을 보여주는 페이지였으면 좋겠어.

86번 영상 · 02:49

STEP 3첫 결과를 직접 열어보세요

Codex가 알려준 미리보기를 열어봅니다. 영상에서는 책상, 책장, 화분과 조명이 있는 3D 방이 나왔습니다. 화면을 움직이거나 불을 켜고 끄는 기능도 붙었습니다.

86번 영상 · 03:04

이때는 예쁘게 나왔는지와 함께 방문자가 무엇을 보게 할 페이지인지도 살펴보세요. 영상에서는 방을 잘 만들었지만 채널의 의도와 보여주고 싶은 내용을 더 담고 싶었습니다. 그래서 참고할 화면을 찾아 붙였습니다.

STEP 4참고 화면과 필요한 파일을 고르세요

Vibe UI를 열고 내 사이트에 가까운 화면을 둘러보세요. 영상에서는 패션, 뷰티, 기계, 다이닝 페이지를 살펴본 뒤 시선 — 장면에 맞는 렌즈를 고르는 페이지를 골랐습니다.

86번 영상 · 04:28

같은 레퍼런스를 골라도 가져오고 싶은 부분은 다를 수 있습니다. 내 사이트가 렌즈를 파는 곳이 아니라면, 렌즈와 판매 문구까지 그대로 쓰는 대신 어떤 배치와 움직임을 참고할지 함께 적어주세요.

화면에 이미지나 영상이 쓰였다면 이미지·영상 파일 페이지도 확인하세요. 프롬프트가 지목한 파일을 내려받아 Codex가 작업하는 폴더에 넣거나, 대화에 첨부합니다. 이미지는 글로 묘사한 것과 실제 파일이 다를 수 있으니 필요한 파일을 같이 주는 편이 좋습니다.

86번 영상 · 05:37

STEP 5프롬프트를 복사해 페이지 개선을 부탁하세요

고른 레퍼런스의 프롬프트 보기에서 한국어 → Codex → Codex용으로 복사를 누릅니다.

86번 영상 · 04:32

기존 페이지를 만든 같은 Codex 대화로 돌아갑니다. 영상처럼 아래 말을 적고, 그 아래에 Vibe UI에서 복사한 긴 프롬프트를 붙여서 보내세요.

아래 있는 프롬프트를 기반으로 전체 페이지를 개선해봤으면 좋겠어.

영상에서는 기존 페이지를 만든 뒤 레퍼런스를 붙였습니다. 처음부터 원하는 화면이 정해져 있다면 첫 요청에 사이트의 목적, 참고 화면, 이미지·영상 파일을 함께 주는 방법도 좋습니다. 본편에서도 뒤늦게 바꾸기보다 처음부터 의도를 설명하는 편이 낫겠다고 말씀드렸습니다.

STEP 6움직임과 화면 구도를 확인하세요

수정된 미리보기를 다시 열어 마우스를 움직여 보세요. 영상에서는 방이 마우스를 따라 반응하도록 바뀌었습니다.

86번 영상 · 04:41

한 번에 원하는 구도와 방식으로 바뀌지는 않았습니다. 내 화면에서도 소개 문구, 이동 버튼, 3D 방이 원하는 자리에 있는지 직접 눌러보세요. 휴대전화처럼 좁은 화면에서도 글씨와 버튼이 보이는지 살펴봅니다.

어색한 곳이 있다면 그 화면을 캡처해 다시 첨부하고, 무엇을 바꿀지 구체적으로 적어주세요. 아래는 가이드용 추가 예시입니다. 영상에서 입력한 말은 아닙니다.

첨부한 화면을 보고 페이지를 고쳐줘.
지금은 방이 너무 커서 채널 소개와 영상 보기 버튼이 잘 안 보여.
방의 크기를 줄이고 소개 문구와 버튼을 첫 화면에서 읽을 수 있게 해줘.
마우스를 따라 움직이는 효과는 유지하고, 휴대전화에서는 글씨와 버튼이 잘리지 않게 해줘.
바꾼 페이지를 직접 열어보고 확인한 화면도 보여줘.

따라 한 뒤 확인해 보세요

• 채널이나 서비스의 이미지를 첨부했다
• 만든 페이지를 직접 열어 소개 문구와 버튼을 눌러봤다
• 참고하고 싶은 배치나 움직임이 있는 레퍼런스를 골랐다
• 프롬프트에 필요한 이미지·영상 파일도 함께 전달했다
• 수정한 화면에서 마우스 움직임과 좁은 화면을 살펴봤다
• 원하는 것과 다른 부분을 캡처해 다시 요청했다

게임, 모션그래픽, 영상 편집 중 더 자세히 보고 싶은 주제는 영상 댓글로 남겨주세요. 이 글의 3D 웹사이트부터 만들어 본 뒤 궁금한 곳은 ai.agit 카톡 커뮤니티에서 질문하셔도 됩니다.

출처와 참고 링크

• OpenAI 공식 모델 선택 안내 — 모델과 생각하는 정도를 고르는 기준
• Vibe UI — 영상에서 사용한 웹사이트 레퍼런스
• 시선 레퍼런스 — 영상에서 선택한 마우스 반응 예시
• Vibe UI 이미지·영상 파일 — 필요한 원본 파일 찾기
• 코덱스로 업무 프로그램 만드는 법 — Codex 탭과 시작 방법