그록 4.6으로 게임, 영상, 3D, 웹사이트 만들기: 재현 프롬프트 전문

그록 4.6으로 슈팅 게임, 클레이 콘티 실사 영상, 3D 우주선 사이트, 스크롤 시네마 사이트를 만들었습니다. 네 프로젝트 전부 공식은 하나입니다. 소재는 그록 이매진이나 힉스필드로 뽑고, 코드는 그록에게 짜게 합니다. 실제로 쓴 재현 프롬프트를 전문 그대로 공개합니다.

영상에서 만든 네 프로젝트, 공식은 하나입니다

며칠 전에 나온 그록 4.6(Grok 4.6)을 성공지식백과 유튜브 채널에서 검증하면서 프로젝트 네 개를 만들었습니다. 횡스크롤 슈팅 게임 하나, 클레이 3D 콘티를 실사 영상으로 바꾼 비교 세트 하나, 이미지 한 장에서 시작한 3D 우주선 사이트 하나, 무에타이 영상을 스크롤로 미는 시네마 사이트 하나입니다.

TIP

따라 하기 전에 이것부터 받아두세요

네 프로젝트의 이미지, 영상, 3D 변환, 실사화는 전부 힉스필드에서 만들었습니다. 지금 아래 링크로 들어가면 시댄스 2.5를 무제한으로 돌릴 수 있는 혜택이 열려 있습니다. 가이드를 따라 하려면 이 링크부터 받아두는 게 순서입니다.

힉스필드 시댄스 2.5 무제한 혜택 받기

넷은 결과물이 전부 다르게 생겼지만 만드는 공식은 하나였습니다. 소재(이미지·영상·3D)는 그록 이매진이나 힉스필드로 뽑고, 코드는 그록에게 짜게 합니다. 소재가 필요한 만큼만 승격을 거칩니다. 이미지를 3D 메시로 바꾸거나, 클레이 콘티를 실사로 바꾸거나, 영상을 프레임 시퀀스로 쪼개는 단계입니다.

이 글은 그 영상의 배포 자료입니다. 프로젝트마다 제작 파이프라인과 실제로 넣은 재현 프롬프트를 전문 그대로 담았습니다. 순서대로 따라 해도 되고, 필요한 프로젝트만 골라 봐도 됩니다.

이 가이드에 담긴 것

그록 빌드 설치와 모델 설정
공식 설치 명령 한 줄과 Grok 4.6, 추론 강도 선택
드래곤 라이더 슈팅 게임
그록 이매진 스프라이트에서 HTML 파일 하나짜리 Canvas 게임까지
클레이 콘티를 실사 영상으로
Three.js 콘티 툴을 만들고 시댄스 2.5에 카메라 무빙만 넘기는 법
이미지 한 장을 3D 사이트로
힉스필드 Hi3D로 GLB를 뽑아 Three.js 히어로에 올리는 과정
영상을 스크롤 사이트로
ffmpeg 프레임 추출과 스크롤 스크럽 엔진 요청 프롬프트

시작 전 준비: 그록 빌드와 힉스필드

그록 4.6은 터미널 코딩 에이전트인 그록 빌드(Grok Build) 안에서 썼습니다. 그록 빌드는 슈퍼그록과 X 프리미엄 플러스 구독자에게 얼리 베타로 열려 있습니다. X 계정이 연동되어 있으면 슈퍼그록이 같이 잡히는 경우가 있으니 구독 상태를 먼저 확인하면 됩니다. 소재 쪽은 힉스필드 계정이 필요합니다. 게임 스프라이트만 그록 이매진 담당이고, 우주선과 무에타이 소재, 실사화는 전부 힉스필드에서 만들었습니다.

그록 빌드 세팅

설치 (맥·리눅스)

터미널에 공식 설치 명령을 붙여넣습니다.

curl -fsSL https://x.ai/cli/install.sh | bash

설치 (윈도우 파워셸)

윈도우는 파워셸 명령을 씁니다. WSL을 쓰고 있다면 위의 리눅스 명령을 그대로 쓰면 됩니다.

irm https://x.ai/cli/install.ps1 | iex

실행과 로그인

설치가 끝나면 grok을 입력합니다. 첫 실행에서 브라우저가 열리며 로그인이 진행됩니다.

grok

모델과 추론 강도 설정

슬래시를 눌러 model을 입력하면 쓸 모델을 고를 수 있습니다. 가장 최신인 Grok 4.6을 고르고, 결과물 품질이 중요하면 추론 강도를 엑스트라 하이로 올립니다.

/model

벤치마크 숫자도 짚고 갑니다. 그록 4.6은 AA 인텔리전스 지수 61점으로 가장 높은 점수와 거의 비슷한 수준까지 올라왔고, 실무 활용을 재는 GDPVal 계열 점수가 높게 나왔습니다. 가격은 입력 토큰 100만 개당 2달러, 출력 6달러입니다. 아래 프로젝트들이 이 가격대에서 나온 결과물입니다.

공통 공식: 소재 따로, 코드 따로

프로젝트를 시작하기 전에 역할 분담부터 정리합니다. 그록 4.6은 기획과 코드를 맡고, 눈에 보이는 소재는 생성 모델이 맡습니다. 소재를 코드에 얹기 전에 필요한 승격 단계가 프로젝트마다 하나씩 있습니다.

프로젝트	소재 담당	승격 단계	그록 4.6이 짠 것
드래곤 라이더 게임	그록 이매진 (스프라이트 원화)	배경 제거, 애니메이션 프레임 분리	HTML 한 파일짜리 Canvas 게임
클레이 콘티 실사화	시댄스 2.5 (실사화)	클레이 webm을 영상 레퍼런스로	Three.js 콘티 툴과 카메라 큐시트
ARK-01 우주선 사이트	힉스필드 (히어로 이미지·영상)	Hi3D로 이미지를 GLB 3D 변환	Three.js 히어로와 스크롤 필름 사이트
나콘 무에타이 사이트	힉스필드 (시네마틱 영상)	ffmpeg로 300프레임 추출	스크롤 스크럽 엔진과 오버레이

영상 소재를 맡은 시댄스 2.5(Seedance 2.5)는 힉스필드에서 쓸 수 있는 영상 생성 모델입니다. 한 번 생성으로 30초까지 만들고, 레퍼런스를 50개까지 받고, 지금은 1080p까지 열려 있습니다. 이 가이드에서 중요한 능력은 하나입니다. 3D 목업 영상을 레퍼런스로 주면 그 카메라 동선을 그대로 따라간다는 점입니다.

프로젝트 1: 드래곤 라이더 슈팅 게임

라이브러리 없이 HTML 파일 하나(341줄)로 돌아가는 횡스크롤 슈팅 게임입니다. 스프라이트는 전부 그록 이매진에서 뽑은 원화를 배경 제거하고 프레임으로 분리해서 썼고, 사운드는 파일 없이 WebAudio 비프음으로 해결했습니다.

제작 파이프라인

그록 이매진으로 에셋 원화 생성

플레이어 드래곤, 고블린 로케티어, 계곡 배경, 파이어볼과 미사일, 폭발 이펙트를 각각 단색 배경으로 생성합니다. 원본은 assets/raw/에 그대로 보존합니다.

배경 제거와 애니메이션 프레임 분리

원화에서 배경을 제거하고 날갯짓 6프레임, 고블린 걷기 4프레임으로 분리합니다. 변형 프레임은 '같은 캐릭터, 날개 위치만 다르게'로 다시 생성합니다.

그록에게 게임 코드 한 방 요청

에셋 파일명 목록을 주고 단일 HTML Canvas 게임을 요청합니다. 이동, 브레스, 미사일 회피, 콤보, HP, 난이도 상승, 화면 흔들림까지 스펙으로 명시합니다.

플레이 테스트와 수치 튜닝

스폰 주기, 중력과 가속, 무적시간 같은 밸런스 수치를 대화로 반복 조정합니다.

그록 이매진: 스프라이트 원화

A fearsome armored dragon in full flight, side view facing right,
a small knight rider on its back, bronze-brown scales, detailed
fantasy game art, isolated on a plain light-gray background,
no shadow, full body visible, game sprite style.

(변형 프레임) Same exact dragon, same angle and style,
but wings raised at the top of the flap cycle.

그록: 게임 코드 생성

HTML 파일 하나로 횡스크롤 슈팅 게임을 만들어줘. 라이브러리 금지, Canvas 2D만.
- 논리 좌표 1280×720, 캔버스는 1920×1080으로 스케일 렌더
- 에셋: assets/dragon-a.png ~ dragon-f6.png (날갯짓 6프레임),
  goblin-w1~w4.png (걷기), imp-a/b.png (비행 몹), background-2k.png,
  ground.png, fireball.png, missile.png, explosion.png
- 조작: 방향키/WASD 이동, 스페이스 = 파이어볼 브레스(쿨다운)
- 적: 지상 고블린이 유도 로켓 발사, 공중엔 임프 · 시간이 갈수록 스폰 가속
- 시스템: HP 3, 피격 무적시간, 콤보 배율 점수, 게임오버 후 R로 재시작
- 연출: 배경 패럴랙스 스크롤, 피격 화면 흔들림, 떠다니는 불씨 파티클
- 사운드: 파일 없이 WebAudio 오실레이터 비프음으로 발사/폭발/피격 구분

TIP

애니메이션은 프레임을 새로 그리게 합니다

날갯짓 같은 동작은 한 장을 코드로 흔드는 것보다 '같은 캐릭터, 같은 앵글, 날개 위치만 다르게'로 변형 프레임을 여러 장 생성해서 순환시키는 쪽이 훨씬 자연스럽습니다. 원화를 assets/raw/에 남겨 두면 프레임을 다시 뽑을 때 기준이 됩니다.

프로젝트 2: 클레이 콘티를 실사 영상으로

AI 영상의 고질병은 카메라를 내 마음대로 못 움직인다는 점입니다. 그래서 순서를 뒤집었습니다. 회색 클레이 3D 씬을 Three.js로 만들어 카메라 무빙을 큐시트(JSON)로 연출하고, 그 화면을 webm으로 녹화해서 시댄스 2.5의 영상 레퍼런스로 넣습니다. 카메라와 동선만 가져오라고 역할을 지정하면 콘티의 무빙 그대로 실사가 나옵니다.

제작 파이프라인

그록에게 클레이 콘티 스튜디오 툴 요청

회색 마네킹과 링 세트를 Three.js로 만들고, 시간 구간별 카메라 pos/look/fov를 JSON 큐시트로 보간하는 미니 콘티 툴을 짜게 합니다.

큐시트 편집으로 10초 콘티 완성

예를 들어 0~5초 로우앵글 푸시인, 5~8초 우측 90도 아크, 8~10초 홀드에서 잽 연타. JSON만 고치면 카메라가 그대로 움직입니다.

webm 녹화 버튼으로 콘티 영상 저장

캔버스를 MediaRecorder로 720p webm 녹화합니다. 이 파일이 감독의 콘티가 됩니다.

시댄스 2.5에 영상 레퍼런스로 업로드

클레이 webm을 레퍼런스로 올리고 카메라 무빙과 인물 동선만 가져오라고 지정한 뒤 실사 프롬프트를 입력합니다.

나란히 놓고 검수

왼쪽 클레이, 오른쪽 실사를 동시에 재생하며 무빙이 일치하는지 확인하고, 테이크를 갈아 끼우며 베스트를 고릅니다.

그록: 콘티 툴 코드 생성

Three.js로 "클레이 콘티 스튜디오"를 만들어줘. HTML 하나 + js 모듈.
- 씬: 전부 회색 클레이 머티리얼(roughness 1). 복싱 링 + 관절 마네킹 2체
- 조명: 흰 키라이트 1개 + 낮은 앰비언트, 부드러운 그림자 (클레이 룩)
- 카메라 큐시트: JSON 배열 [{t0, t1, label, action, pos0, pos1, look0,
  look1, fov0, fov1, ease}] 를 시간 보간해서 카메라가 움직이게
- 마네킹 액션 프리셋: idle / jab / straight / lowkick / guard
- UI: 우측 패널에 큐 리스트 + JSON 편집 textarea, 하단 재생/스크럽 바
- 녹화: 캔버스를 MediaRecorder로 10초 720p webm 저장하는 버튼
- 목적: 이 webm을 영상 생성 AI의 카메라 레퍼런스로 쓸 것

시댄스 2.5: 실사화 (클레이 webm을 영상 레퍼런스로 첨부)

[영상 레퍼런스: 클레이 콘티 webm. "카메라 무빙과 인물 동선만 가져와"]

어두운 복싱 체육관, 링 위의 무에타이 파이터. 시네마틱 실사,
땀에 젖은 피부, 역광 림라이트와 공중의 먼지, 필름 그레인.
레퍼런스 영상의 카메라 워크를 그대로 따라갈 것.
로우앵글 푸시인, 우측 아크, 홀드에서 잽 연타.

주의

역할 지정 한 줄이 없으면 클레이가 그대로 나옵니다

클레이 webm을 레퍼런스로 넣고 역할을 지정하지 않으면 모델이 회색 마네킹의 생김새까지 따라합니다. '카메라 무빙과 인물 동선만 가져와'라고 가져올 것을 문장으로 못 박아야 무빙은 콘티에서, 생김새는 프롬프트에서 가져옵니다.

프로젝트 3: 이미지 한 장을 3D 우주선 사이트로

출발점은 힉스필드에서 생성한 이미지 한 장입니다. 우주선 이미지를 힉스필드 Hi3D(이미지를 3D로)에 넣어 GLB 메시로 뽑고, Three.js 히어로 씬에서 실제 3D로 돌립니다. 스크롤을 내리면 같은 우주선으로 생성한 영상을 226장 프레임으로 쪼갠 스크롤 필름이 이어집니다.

제작 파이프라인

힉스필드로 히어로 이미지 생성

선체에 HUMANITY ARK-01 레터링이 박힌 도시형 세대우주선. 이 한 장이 3D, 영상, 사이트 전체의 아트 디렉션 기준이 됩니다.

Hi3D로 이미지를 GLB 3D 변환

이미지를 Hi3D에 넣어 GLB 메시를 생성하고, Draco 압축을 거쳐 public/models/ark.glb로 배치합니다. 모델링 툴 없이 3D 에셋이 나옵니다.

같은 이미지로 영상 생성 후 프레임 추출

히어로 이미지를 레퍼런스로 항행 영상과 드론 무빙 영상을 만들고, ffmpeg로 226장 webp 시퀀스를 추출합니다.

그록에게 Three.js 사이트 요청

히어로는 GLB 우주선과 지구, 별 파티클, 엔진 배기를 실시간 렌더하고, 아래로는 스크롤 연동 프레임 필름과 스펙 섹션이 이어지게 요청합니다.

힉스필드: 히어로 이미지 (이후 Hi3D와 영상 생성에 재사용)

A colossal generation ship in low Earth orbit, cylindrical hull with
a glowing city skyline built on its spine, "HUMANITY ARK-01" painted
on the hull, four massive engines firing golden plasma trails,
Earth with city lights below, crescent moon and the Milky Way behind,
ultra-detailed sci-fi concept art, cinematic lighting, 1:1

그록: 사이트 코드 생성

Vite + Three.js 원페이지 사이트를 만들어줘. 콘셉트: "인류 최후의
세대우주선 ARK-01" 프로모션 사이트, 다크 SF 톤.
- 히어로: public/models/ark.glb (Draco) 를 실시간 렌더.
  지구 구체 + 별 파티클 스페이스필드 + 엔진 배기 이펙트 + HDRI 라이팅,
  마우스에 살짝 반응하는 카메라
- 히어로 아래: public/frames/ 의 webp 시퀀스 226장을 캔버스에 그리는
  스크롤 연동 필름 섹션 (스크롤 위치 → 프레임 인덱스 매핑)
- 섹션: 함선 / 스펙 / 선상 도시 / 항해 계획 / 탑승 신청 CTA
- 로딩 화면: 히어로 에셋 62% + 필름 프레임 38% 가중 프로그레스 바
- 접근성: 섹션별 aria-label, reduced-motion 대응

INFO

한 장의 이미지가 전체 톤을 잡습니다

3D 변환도, 영상 생성도, 사이트 디자인도 전부 같은 히어로 이미지에서 출발했기 때문에 결과물의 톤이 흩어지지 않습니다. 소재를 여러 번 새로 뽑는 것보다 잘 나온 한 장을 계속 재사용하는 쪽이 일관성에 유리합니다.

프로젝트 4: 영상을 스크롤 사이트로

힉스필드로 만든 무에타이 시네마틱 영상을 300장의 webp 프레임으로 쪼개고, 스크롤 위치에 따라 캔버스에 프레임을 그리는 스크롤 스크럽 사이트로 만들었습니다. 스크롤이 곧 재생 헤드가 됩니다. 사용자가 영화의 타임라인을 손으로 미는 경험 위에 도장 소개 카피가 오버레이로 얹힙니다.

제작 파이프라인

힉스필드로 시네마틱 영상 생성

어두운 체육관에서 여성 파이터가 하이킥과 니킥을 연습하는 장면. 스모키한 역광 조명으로 톤을 통일한 10초짜리 시네마틱입니다.

ffmpeg로 프레임 시퀀스 추출

30fps로 300장을 뽑습니다. webp라 전체 용량이 가볍고, 앞 10장은 preload로 먼저 불러옵니다.

ffmpeg -i fight.mp4 -vf fps=30,scale=1280:-1 frames/frame_%04d.webp

그록에게 스크롤 스크럽 엔진 요청

스크롤 위치를 프레임 인덱스로 매핑하는 캔버스 렌더, 3겹 패럴랙스, 진행률 바, 마키 텍스트, reduced-motion 대응까지 포함한 엔진을 요청합니다.

도장 카피와 섹션 오버레이

히어로 카피와 자세, 수련, 도장, 체험 신청 섹션을 프레임 구간에 매핑해서 스크롤 타임라인 위에 배치합니다.

힉스필드: 소스 시네마틱 영상

Cinematic slow-motion video: a female Muay Thai fighter training
alone in a dark gym at night, throwing a high roundhouse kick,
heavy bag and boxing ring ropes behind her, warm smoky backlight,
dust in the air, sweat detail, film grain, moody amber tones,
camera slowly orbiting, 10 seconds.

그록: 스크롤 스크럽 사이트 생성

프레임 시퀀스 기반 스크롤 시네마 사이트를 만들어줘. 순수 JS.
- frames/frame_0001.webp ~ frame_0300.webp 를 스크롤 위치에 따라
  캔버스에 cover 방식으로 그리는 스크럽 엔진 (60fps, rAF)
- 콘셉트: 성수동 무에타이 도장 "나콘". 히어로 카피는
  "주먹, 팔꿈치, 무릎, 정강이" 한 단어씩 등장
- 프레임 구간별 오버레이 섹션: 자세(16) / 수련(41) / 도장(68) /
  체험 신청 CTA(82) — 네비 클릭 시 해당 프레임으로 스크롤 점프
- 연출: 3겹 패럴랙스 레이어, 좌우로 흐르는 마키 텍스트,
  우측 진행률 바, 로딩 화면(프레임 프리로드 %)
- 폰트: Hahmlet(제목) + Oswald(라벨) + IBM Plex Sans KR(본문)
- prefers-reduced-motion이면 애니메이션 전부 끄기

TIP

웹사이트에 영상을 넣을 때 카피라이팅도 그록에게 맡깁니다

사이트의 소개 문구까지 그록 4.6이 썼습니다. 처음에는 문장에서 AI 냄새가 났는데, 어색한 부분을 짚어주는 피드백을 몇 번 돌리니 자연스러운 문장으로 다듬어졌습니다. 코드와 카피를 같은 대화에서 고치면 흐름이 끊기지 않습니다.

자주 막히는 부분

네 프로젝트를 만들면서 실제로 걸렸던 지점들입니다. 같은 길을 갈 때 먼저 확인하면 시간이 절약됩니다.

레퍼런스에는 항상 역할을 지정합니다. 클레이 콘티든 실사 이미지든, 파일만 올리면 모델은 그 파일에서 무엇을 가져와야 할지 모릅니다. 카메라만 가져올지, 얼굴만 가져올지, 분위기만 가져올지를 문장으로 못 박아야 합니다.

프레임 시퀀스 방식은 용량 계산을 먼저 합니다. 나콘 사이트는 300장, ARK-01은 226장을 씁니다. webp로 뽑고 해상도를 1280 폭으로 제한했기 때문에 감당이 됐습니다. png로 뽑거나 원본 해상도를 유지하면 로딩이 무너집니다.

그록 4.6의 3D 코딩은 반복으로 좋아집니다. 한 번에 완성된 결과가 나오는 경우도 있지만, 동물의 숲 스타일 게임을 통째로 구현한 사례들도 루프를 여러 번 돌리고 프롬프트를 다듬은 결과입니다. 첫 결과물이 어설퍼도 구체적인 피드백을 주면서 몇 바퀴 돌리면 달라집니다.

FAQ

그록 4.6은 어떻게 써야 하나요? 무료로도 되나요?

그록 빌드는 슈퍼그록과 X 프리미엄 플러스 구독자에게 얼리 베타로 열려 있습니다. X 계정과 연동되어 있으면 슈퍼그록이 함께 잡히는 경우가 있으니 구독 상태를 먼저 확인해 보시면 됩니다. API로 쓰면 입력 100만 토큰당 2달러, 출력 6달러입니다.

코딩을 전혀 몰라도 따라 할 수 있나요?

네 프로젝트 모두 코드를 직접 친 부분이 없습니다. 재현 프롬프트를 그록 빌드에 넣고, 결과를 보면서 어색한 부분을 말로 고쳐달라고 하면 됩니다. 다만 ffmpeg 프레임 추출처럼 터미널 명령 한 줄을 복사해 붙여넣는 단계는 있습니다.

시댄스 2.5는 왜 쓰나요? 다른 영상 모델과 뭐가 다른가요?

한 번 생성으로 30초까지 만들고 레퍼런스를 50개까지 받습니다. 이 가이드에서 결정적인 기능은 3D 목업 영상을 레퍼런스로 주면 그 카메라 동선을 그대로 따라간다는 점입니다. 카메라를 프롬프트 문장으로 설명하는 대신 클레이 콘티로 보여줄 수 있습니다.

클레이 콘티를 꼭 만들어야 하나요? 그냥 프롬프트로 뽑으면 안 되나요?

프롬프트만으로도 영상은 나옵니다. 다만 카메라 무빙이 복불복이 됩니다. 원하는 앵글과 동선이 명확할 때는 회색 클레이 콘티를 먼저 만들어 레퍼런스로 넘기는 쪽이 원하는 그림에 훨씬 가깝게 나옵니다.

프레임 스크롤 사이트는 일반 영상 태그와 뭐가 다른가요?

video 태그는 재생 버튼을 눌러야 하고 스크롤과 따로 놉니다. 프레임 시퀀스 방식은 스크롤 위치가 곧 재생 위치라서 사용자가 내리는 속도대로 장면이 흐릅니다. 애플 제품 페이지들이 쓰는 방식과 같은 원리입니다.

마지막 정리입니다. 소재는 그록 이매진이나 힉스필드로 만들고, 필요하면 승격(3D 변환, 실사화, 프레임화)하고, 코드는 그록 4.6에게 짜게 합니다. 이 공식 하나로 게임, 영상, 3D, 웹사이트가 전부 나왔습니다. 영상에서 쓴 소재 생성은 아래 링크에서 그대로 해볼 수 있습니다.

힉스필드 시작하기