OpenAI는 GPT-6 Astra를 2026년 9월 3일 제한공개로 냈는데요, 다음날 바로 Codex에 나왔습니다. API 모델 이름은 gpt-6-astra, 컨텍스트 윈도는 105만 토큰, reasoning effort는 low부터 max까지 5단계예요. 벤치마크 수치는 발표 자료에 넘치게 있었는데, 제가 궁금한 건 그 전 모델과 어떤 점이 다르고 실제 구축한 여러 사례였습니다.
X에 특히 이런 사례들이 빠르게 올라오는데요, 이번 글에서는 X에 올린 여러 사이트를 직접 방문하며 본 사례 중 재미난 사례와 원문 프롬프트를 확인할 수 있는 것만 추려서 정리해봤습니다.
재현 가능한 사례 (제작자들이 프롬프트 공유한 사례)
1. 고흐의 그림을 가상세계로 구현하다
The Bedroom에서 깨어나 문을 열면 Cafe Terrace at Night가 이어지고, 강을 따라가면 Starry Night Over the Rhone, 들판 쪽으로 나가면 Wheatfield with Crows와 Sunflowers가 나옵니다. 그림 여섯 점을 갤러리처럼 늘어놓은 게 아니라, 그림 사이에 없던 길과 거리를 새로 만들어 하나의 마을로 이었어요.
제작자(petergostev)는 이 마을 배치가 추가 반복 없이 한 번에 나왔다고 답글에서 밝혔는데요, 공개한 원문 프롬프트 앞부분은 입니다.
Create a maximum-ambition Three.js world in which Van Gogh's most famous paintings are connected into one continuous living town the viewer can walk through: wake inside The Bedroom, step out the door onto the Cafe Terrace at Night, walk down to the Starry Night Over the Rhone embankment, and out through the town gate into the Wheatfield with Crows and a blazing field of Sunflowers.라이브 사이트(van-goghs-town.surge.sh)에서 직접 걸어봤는데, 밀밭은 흔들리는 움직임과 구역마다 움직이는 속도와 구현이 모두 달랐습니다.
2. Gameboy형 포트폴리오
Angaisb_가 공개한 프롬프트는 짧습니다.
I want you to make a website portfolio (with placeholders fake info) that looks like a Gameboy (not using the name gameboy or nintendo because of copyright), it should look exactly like a Gameboy, even the screen, that should feel like a real gameboy.
이 사례를 보면 긴 프롬프트가 필수는 아니라는 걸 알 수 있습니다. 대신 예쁘게 만들어달라는 주문이 아니라 게임보이라는 은유적 대상을 정확히 지정했다는 게 인상적이네요. 헤더, 히어로, 카드로 짜인 보통의 포트폴리오가 아니라 화면 전체가 하나의 물건이 됐고, 기기의 물리 버튼이 그대로 포트폴리오 사이트를 탐색하는 버튼이 되었습니다.
3. 사이트에서 테슬라 자동차를 분해하다 (Tesla Model X Studio)
ashebytes가 만든 이 사이트는 화면 중앙에 차량을 3D로 띄우고, 슬라이더를 움직이면 334개 메시 조각이 단계적으로 분리되는데요, 차체·유리·도어·실내·배터리·서스펜션·휠을 왼쪽 인덱스에서 골라 따로 볼 수도 있어요. 라이브 사이트(model-x-studio.vercel.app)에서 직접 눌러봤고 GitHub 코드(ashemag/model-x-studio)도 열어봤습니다.
색은 흰 배경, 검은 텍스트, 테슬라 계열의 빨간색으로 절제했고, 줌·리셋·자동회전·전체화면·라벨·폭발 정도만 HUD에 남겼어요. 334개가 실제 정비 부품 번호가 아니라 작가가 만든 메시 조각이고, 배터리와 구동 장치는 설명용 형상이라고 하네요.
4. 분자 구조를 구현하다! (아밀라아제 분자 실험실)
HomeiMiyashita가 만든 이 페이지는 화면 중앙에서 파란 아밀라아제가 노란 포도당 사슬을 따라가다 특정 결합을 끊는데요, 재생·정지, 처음부터, 속도 슬라이더, 카메라 자동회전이 실제로 작동합니다. 라이브(amylase-molecular-lab.hmi.chatgpt.site)에서 직접 조작해봤어요.
제작자는 한 번 생성에 13분 35초가 걸렸다고 밝혔는데요, 공개된 원문 프롬프트(일본어)를 옮기면 이렇습니다.
Three.jsで、ブラウザ1枚の教材を作って。画面中央にデンプンの長い鎖（黄の球がα-1,4で繋がる）。青いアミラーゼが鎖の上を滑って、特定の結合で止まって切る。切れた断片がマルトース／短い糖として離れる。カメラはゆっくり周回。再生・一時停止、速度スライダー付き。ラベルは日本語。化学式は出しすぎない。背景は暗いラボ風。Three.js로 브라우저 한 장짜리 교재를 만들어줘. 화면 중앙에 전분의 긴 사슬(노란 구가 α-1,4로 연결된다). 파란 아밀라아제가 사슬 위를 미끄러지다가 특정 결합에서 멈춰 끊는다. 끊어진 조각은 말토스/짧은 당으로 떨어져 나간다. 카메라는 천천히 주위를 돈다. 재생·일시정지, 속도 슬라이더 포함. 라벨은 일본어로. 화학식은 너무 많이 노출하지 않는다. 배경은 어두운 실험실 분위기.이 프롬프트에는 멋지게 만들어달라는 말이 한 번도 안 나옵니다. 대신 과정, 색과 형태, 움직임의 순서, 사용자가 조절할 항목, 정보 밀도, 분위기가 문장마다 들어 있어요. 와우 포인트가 장식이 아니라 개념을 이해하는 순간에서 나온 사례입니다.
5. 숲 하나를 통째로 구현하다 (Verdant Forest)
LexnLin이 공개한 결과물은 3,808그루의 나무, 약 250만 개의 풀 덤불, 4만 개의 고사리가 들어간 비행형 숲인데요, 라이브 사이트(verdant-forest.lexn8.chatgpt.site)에서 클릭 후 WASD로 이동하고 Q/E로 오르내리고 R로 초기화하는 것까지 가능합니다.
공개된 프롬프트는 이렇습니다.
Perform the tasks laid out in the /unlazy skill and do the following task: Please build me an extremely detailed photorealistic 3D interactive forest environment from scratch. The emphasis should be on photorealism and density rather than on exploration or gamification. You have between 5 and 24 hours to implement this. You must keep going iteratively until you have used at least 5 hours. Please keep working continuously during this time without stopping early.사실성과 밀도라는 목표, 게임화 금지, 최소 5시간, 반복 지속이라는 종료 조건까지 같이 줬어요. 모델을 오래 돌리고 싶다면 시간만 늘릴 게 아니라 품질 목표와 중단 조건을 같이 적어야 한다는 걸 이 사례에서 알 수 있습니다.
구현 화면만 있는 사례
6. 행성 8개, 위성 20개 (ORBITAL 태양계 탐색기)
dzhohola는 8개 행성과 20개 위성을 Three.js와 WebGL로 만들었는데요, 단순화한 비행 계획 기능까지 넣었습니다.
제작자 답글에 따르면 Astra Medium이 앱과 카메라, 비행 로직을 짰고 Astra High는 데모 영상만 준비했다고 해요. 모든 과정에 같은 effort를 쓰지 않은 거죠. 영상과 설명만으로는 행성 표면 텍스처가 기존 자산인지 새로 생성한 건지까지는 확인할 수 없었습니다.
7. 자기 방을 자기소개 인터페이스로 바꿨어요 (Kalan의 3D 방 포트폴리오)
kalanyei는 실제 자기 방을 Blender로 렌더링·베이킹하고 Three.js TSL로 웹에 옮겼는데요, 초기 방 화면과 상호작용을 약 2시간 만에 만들었다고 합니다. 커피 수증기와 Matrix풍 애니메이션, 주름 셰이더는 원하는 효과를 말로 설명해 구현했다고 밝혔어요.
라이브(room.kalan.dev)에 직접 들어가 확인하실 수 있습니다. 포트폴리오를 자기 방으로 소개한 방식이 흥미로웠네요.
7개를 보고 나서 정리한 통합 프롬프트
위 사례를 보면서 반응이 컸던 사이트는 공통적으로 카드와 카피만 다듬은 랜딩페이지가 아니었습니다. 사이트를 하나의 물건, 세계, 실험, 제품으로 표현한 사례들이었어요. 그 공통점과 scroll-craft의 공개 규칙을 참고해서 새로 짠 프롬프트입니다. 대괄호 안을 프로젝트에 맞게 채우면 됩니다.
역할
당신은 아트 디렉터, 인터랙션 디자이너, 시니어 프런트엔드 엔지니어다.
예쁜 랜딩 페이지에서 멈추지 말고, 사용자가 한 문장으로 기억하고 직접 조작할 수 있는 웹 경험을 완성하라.
프로젝트
- 브랜드·제품: [실제 제품과 하는 일]
- 방문자: [구체적인 직무·상황]
- 방문자가 10초 안에 이해할 내용: [핵심 메시지]
- 핵심 행동: [구체적인 CTA]
- 사용할 실제 카피·수치·자산: [목록과 경로]
- 확인되지 않아 사용하면 안 되는 주장: [목록]
기억 문장
방문자가 친구에게 이 사이트를 설명할 문장을 먼저 완성하라.
"이 사이트는 [기술이나 스타일명이 아닌 경험]을 하는 곳이다."
이 문장을 만족하지 못하면 코드를 쓰지 말고 콘셉트를 다시 잡아라.
대표 인터랙션
이 사이트에만 있는 대표 인터랙션을 하나 설계하라.
- 콘텐츠의 의미를 드러내거나 상태를 크게 바꿔야 한다.
- 단순 커서 글로우, 색상 변화, 숫자 카운터는 인정하지 않는다.
- 마우스, 키보드, 터치에서 가능한 대체 조작을 제공한다.
금지
- 제품과 무관한 보라색·청록색 그라데이션
- 배지 + 중앙 H1 + CTA + 같은 크기 카드 3개 구성
- 출처 없는 수치, 가짜 후기, 가짜 고객 로고
기준
3D는 devicePixelRatio를 최대 2로 제한하고 LOD나 품질 선택기를 제공한다.
1440×1000, 768×1024, 390×844에서 각각 검사하고 prefers-reduced-motion 대체 화면을 만든다.
작업 순서
1. BRIEF.md에 기억 문장, 대표 인터랙션, 정점 장면을 먼저 적는다.
2. 가장 작은 완성 범위로 구현한다.
3. 로컬 서버에서 실제 브라우저로 핵심 흐름을 조작한다.
4. 화면 근거가 있는 결함만 국소 수정하고 다시 검사한다.이 프롬프트를 실무에서 쓸 때는 effort도 작업 종류에 맞게 나누는 게 좋습니다. ORBITAL 제작자처럼 구현에는 medium, 최종 시각 검수나 영상 제작에만 high 이상을 검토하면 비용과 시간이 함께 줄어들어요.
11개를 다 보고 나니 저는 이렇게 정리했습니다. Astra가 알아서 잘 만들어준 게 아니라, 하지 말아야 할 것과 대표 조작 하나를 사람이 얼마나 구체적으로 적어줬는지가 결과를 바꿨어요.
회사 홈페이지나 서비스 랜딩을 GPT-6 Astra나 클로드로 직접 만들어보고 싶으시면, 강의와 컨설팅 문의는 여기로 주세요.
