같은 프롬프트, 다른 낙하 🪂 Claude Fable 5 vs Grok Build 원샷 대결

낙하산 게임 하나를 스펙 문서 수준으로 빡빡하게 적어서, Claude Code(Fable 5) 와 Grok Build 에 토씨 하나 안 바꾸고 던졌다. 라운드 1은 원샷 — 결과물이 나올 때까지 아무 개입도 하지 않았다. 폴더만 fable5-skydive / grok-skydive 로 갈라놓고 지켜봤다.

실험 조건부터 밝혀둔다. Claude Code는 Fable 5 모델(추론 강도 '높음'), Grok은 Grok Build beta(Grok 4.5) 로 작업했다.

두 결과물을 나란히 놓고 비교한 영상부터 보자. 두 게임 모두 직접(모바일 터치로) 플레이한 풀 런이다. 공교롭게도 둘 다 2회 피격, 하트 1개로 착지해서 결과 화면까지 같은 피해량 비교가 됐다 — 스펙 항목이던 모바일 터치 조작이 실제로 되는지도 이 영상이 겸사겸사 증명한다.

🎬 영상으로 먼저

인트로 — "점프"를 장면으로 번역했는가

중반 — 화면 속 드론 개수가 다르다. Fable 5는 드론을 2550m 아래부터 20–33% 확률로만 섞는데, Grok은 시작 고도부터 30–45% 확률로 뽑는다

엔딩 — 동일 피해 2회로 착지, 둘 다 ⭐☆☆. 같은 별점이어도 결이 다르다. Fable 5는 0m에서 바로 결과창을 띄우지 않고 캐릭터가 1.2초간 지면까지 내려앉는 착지 모션이 따로 있다 — 200m부터 보이던 빨간 착지 마커 위로 안착한 뒤에야 결과가 뜬다. Grok은 캐릭터가 공중 1/3 지점에 뜬 채로 즉시 "착지 성공!"이 나온다

▶️ 풀 영상 보기 (40초, mp4)

실험 설계

두 에이전트에 넣은 프롬프트는 완전히 동일하다. 요지만 추리면:

• 순수 HTML+CSS+JS 단일 index.html, Canvas API, 라이브러리 금지
• 비행기 통과 → 점프 → 낙하산 펼침 인트로
• 캐릭터는 상단 1/3 고정, 배경이 아래→위 스크롤로 하강 연출
• 장애물 3종: 새 떼(횡단) / 드론(추적) / 풍선(부유)
• 고도계 3000m→0m, 하강할수록 가속
• 3회 충돌 게임오버, 별(+점수)·방패(1회 무효) 아이템
• 착지 시 남은 내구도로 별점 1–3개, 최고점 localStorage
• 배경 3단계 전환(구름층→하늘→지상), 이동 시 낙하산 기울기
• 모바일 터치 드래그 + 데스크톱 방향키/마우스

비행기에서 낙하산으로 강하하며 장애물을 피하는 세로 스크롤 게임을 만들어줘.
## 기술 조건
- 순수 HTML + CSS + JavaScript 단일 프로젝트 (프레임워크 금지)
- Canvas API 사용, 외부 라이브러리 금지
- index.html 하나로 실행 가능해야 함
- 모바일 터치(좌우 드래그) + 데스크톱(방향키/마우스) 모두 지원
## 게임 규칙
- 시작: 비행기가 화면 상단을 지나가고 캐릭터가 점프 → 낙하산 펼침
- 캐릭터는 화면 상단 1/3 지점에 고정, 배경이 아래→위로 스크롤되며 하강 연출
- 플레이어는 좌우로만 이동 가능
- 장애물 종류 3가지 이상: 새 떼(좌우로 이동), 드론(플레이어 추적), 풍선(제자리 부유)
- 고도계 표시: 3000m에서 시작해 0m까지 하강
- 하강할수록 낙하 속도 증가 (난이도 상승)
- 장애물 충돌 시 낙하산 손상 → 3회 충돌하면 게임오버
- 아이템: 별을 먹으면 점수 보너스, 방패를 먹으면 1회 충돌 무효
- 0m 도달 시 착지 성공 → 남은 낙하산 내구도에 따라 별점(1~3개)
## UI 요구사항
- 고도계(m), 점수, 낙하산 내구도(하트 3개) 표시
- 최고 점수 localStorage 저장
- 착지 성공/게임오버 화면 + 다시하기 버튼
- 고도에 따라 배경 변화: 구름층(3000m~) → 하늘(2000m~) → 지상 풍경(500m~)
- 낙하산이 좌우 이동 시 기울어지는 연출
## 완료 기준
- 에러 없이 즉시 플레이 가능
- 60fps 유지
- README.md에 실행 방법 작성

규칙: 라운드 1은 원샷. 에러가 나도 안 고쳐주고, 이상해도 그대로 채점한다. 개입해서 고쳐가는 라운드 2는 다음 편에서.

📋 체크리스트 채점 (라운드 1 원샷 기준)

*이번 비교에서 제일 재밌는 발견. 둘 다 똑같은 계열의 버그를 만들었다. 하강 거리 점수를 매 프레임 정수로 버림/반올림하는 바람에 60fps에선 프레임당 증가분(0.1–0.7점)이 전부 0으로 버려진다 — Fable 5는 Math.round(fallSpeed*dt*0.1), Grok은 Math.floor(fallSpeed*dt*0.15). 실제로 Grok 버전을 무개입으로 돌리면 2012m까지 내려가는 동안 점수가 0이다. 별을 먹어야만 점수가 오른다. 두 모델이 같은 지점에서 같은 실수를 한다는 건, 이런 "프레임 단위 누적값" 처리가 LLM 코드 생성의 공통 약점이라는 뜻.

이 스펙의 승부처 3가지

체크리스트는 "됐다/안 됐다"지만, 진짜 차이는 아래 3곳에서 갈린다.

1. 드론 추적 AI — 알고리즘 설계력

스펙에는 "플레이어 추적"이라고만 적었다. 추적을 어떻게 구현하는지가 관전 포인트.

Fable 5는 즉시 방향을 꺾지 않고 lerp로 가속을 뭉개서 "따라오는데 관성이 있는" 움직임을 만들었고, 고도가 낮아질수록 추적 속도를 올려 난이도 곡선에 태웠다:

// fable5-skydive: 드론이 수평으로 플레이어를 쫓는다
const chase = 60 + (1 - game.altitude / ALT_START) * 70;
o.vx = lerp(o.vx, Math.sign(px - o.x) * chase, dt * 2.2);

Grok은 한 걸음 더 나갔다. 방향 벡터를 정규화해서 가속하는 스티어링 방식인데, 수직 추적까지 넣었다(수평의 35% 세기). 드론이 스크롤을 거슬러 위로 쫓아온다:

// grok-skydive: 정규화 방향 스티어링 + 감쇠
const d = Math.sqrt(dx * dx + dy * dy) || 1;
e.vx += (dx / d) * e.speed * dt;
e.vy += (dy / d) * e.speed * 0.35 * dt;
e.vx *= 0.98; e.vy *= 0.98;

알고리즘만 보면 Grok 쪽이 더 정석이다. 문제는 밸런스 — 가만히 있으면 15초 만에 드론에게 3연타를 맞고 게임오버된다. Fable 5의 드론은 수평만 쫓아서 "피하는 재미"가 있고, Grok의 드론은 유도미사일에 가깝다. 설계력은 Grok, 게임 감각은 Fable 5.

스폰 빈도도 다르다. Fable 5는 2550m까지 드론을 아예 안 내보내고 이후 20–33% 확률로 섞는 반면, Grok은 첫 화면부터 30–45% 확률로 드론을 뽑는다. 비교 영상 왼쪽 화면에 드론이 드물게 보이는 이유다.

2. 배경 3단계 전환 — 디테일 처리

"구름층→하늘→지상"을 색만 바꾸는지, 연출까지 넣는지.

Fable 5는 고도 구간별 그라데이션 보간에 더해 구름층에서는 구름 밀도를 높이고, 500m부터는 언덕·나무·집이 화면 아래에서 차오르며 200m부터 착지 지점 마커가 나타난다.

Grok도 고도 구간별 그라데이션 보간 자체는 잘 했고, 800m부터 언덕 능선이 사인파로 굽이치는 디테일도 넣었다. 하단에 "구름층/상공/착륙 지대" 텍스트 라벨을 띄우는 아이디어는 Grok에만 있다.

그런데 결정적인 허점이 하나 있다 — 나무와 집이 공중에 떠다닌다. 지상 데코를 지면 밴드에 앵커하지 않고 화면 전체 높이에 랜덤 배치한 채 스크롤만 시켜서, 400m쯤 내려가면 하늘 한가운데 지붕 달린 집이 둥둥 떠 있는 초현실 풍경이 나온다.

각 요소(그라데이션·언덕·데코)는 다 만들었는데 합성 단계에서 공간 관계가 틀어진 전형적인 케이스.

3. 인트로 시퀀스 — 스펙에 없는 빈칸을 채우는 감각

프롬프트에는 "비행기가 지나가고 캐릭터가 점프 → 낙하산 펼침" 한 줄뿐. 점프 타이밍, 자유낙하 자세, 펼침 순간의 이펙트 같은 건 전부 에이전트의 재량이다.

Fable 5는 비행기가 화면을 가로지르는 중간에 캐릭터가 분리되고, 팔다리를 벌린 자유낙하 자세로 떨어지다가 화면 1/3 지점 도달 직전에 낙하산이 펴지며 파티클이 터진다.

Grok은 인트로를 만들긴 했지만 "점프"가 없다. 캐릭터가 비행기 바로 아래 매달린 채 함께 우측으로 이동하며 내려오고, 비행기에서 40px 떨어지자마자 낙하산이 펼쳐진다. 자유낙하 구간도, 펼침 순간의 이펙트도 없어서 "뛰어내렸다"기보다 "비행기가 낙하산을 내려놓고 갔다"에 가깝다. 4초가 지나면 인트로를 강제 스킵하는 안전장치를 넣은 건 견고하지만, 연출 자체에 대한 야심은 없었다.

스펙 한 줄을 장면으로 번역하는 상상력 — 여기서 두 에이전트의 차이가 가장 선명했다.

결론

• 스펙 준수: 둘 다 대부분 항목을 원샷에 통과했다. 에러 없이 돌아가고, 장애물 3종·고도계·아이템·별점·localStorage까지 전부 있다. "스펙에 적힌 것"만 보면 무승부에 가깝다.
• 스펙 밖 디테일: 세 승부처 모두에서 갈렸다. 드론 알고리즘은 Grok이 더 정석(수직 추적까지)이지만 밸런스가 무너져 유도미사일이 됐고, 배경은 Grok이 요소를 다 만들고도 공중에 띄워버렸으며, 인트로는 Fable 5만 "점프"를 장면으로 번역했다.
• 원샷 버그: 놀랍게도 둘 다 같은 자리에서 넘어졌다 — 프레임당 거리 점수를 정수로 버려서 점수가 안 오르는 버그. 여기에 Grok은 부유하는 지상 데코와 과격한 드론 밸런스가 추가.
• 한 줄 총평: 스펙에 적힌 기능은 이제 둘 다 만든다. 차이는 스펙 사이의 빈칸 — 연출의 상상력, 공간의 정합성, 난이도의 손맛 — 에서 났다.

직접 플레이해보고 싶다면 (원샷 결과물 그대로 올려뒀다):

• 🪂 Fable 5 버전 바로 플레이
• 🛸 Grok 버전 바로 플레이

다음 라운드는 개입 허용전 — 같은 결과물에 피드백을 3번씩 줬을 때 누가 더 빨리 수렴하는지 본다. 결과가 궁금하면 오픈챗에서 기다려주시길. ⚡