Claude Fable 5를 사용하여 Raccoon Heist 게임을 원샷으로 만들기

2026년 8월 5일

2024년에 저는 GPT-3가 생성한 게임 컨셉의 스크린샷과 DALL-E를 사용하여 만든 몇몇 컨셉 "아트"를 트윗한 적이 있습니다. 오늘, 그 트윗의 4주년을 맞아 저는 Claude Fable 5(웹용 Claude Code에서 실행)가 해당 트윗의 내용만으로 게임 전체를 구축할 수 있는지 확인해 보기로 했습니다. 결과는 꽤 훌륭했습니다!

여기에서 게임을 플레이할 수 있습니다. 짧은 데모 영상은 다음과 같습니다:

제작 방법

이것은 2022년 8월 5일의 트윗입니다:

당시 저의 GPT-3 프롬프트는 다음과 같았습니다:

너구리 팀이 강도질을 하는 컴퓨터 게임의 상세한 제품 설명을 작성해줘.

이것은 GPT-3에게 텍스트의 나머지 부분을 완성하도록 요청하던 텍스트 완성 (text completion) 시절의 방식이었습니다. 모델은 다음과 같이 완성했습니다:

“Raccoon Heist”에서 당신과 당신의 도둑 너구리 팀은 일련의 대담한 강도질을 수행하는 임무를 맡게 됩니다. 은행을 터는 것부터 값을 매길 수 없는 예술품을 훔치는 것까지, 당신의 털북숭이 크루에게 너무 크거나 작은 일은 없습니다. 경찰을 피하고 전리품을 가지고 깔끔하게 도망치기 위해서는 당신의 지혜와 기술을 사용해야 합니다. 흥미진진한 게임 플레이와 매력적인 캐릭터들로 구성된 “Raccoon Heist”는 가벼운 모험을 원하는 누구에게나 완벽한 게임입니다.

DALL-E에 입력한 프롬프트는 짧았습니다:

너구리 팀이 강도질을 하는 비디오 게임의 스크린샷

오늘의 실험: 이 스크린샷들을 Fable 5에 던져 넣고 게임을 작성하라는 프롬프트를 준 뒤, 알아서 하게 내버려 두면 마지막에 작동하는 게임을 얻을 수 있을까?

GitHub Pages를 사용하도록 웹용 Claude Code 설정하기

웹용 Claude Code의 답답한 점 중 하나는, 작업이 진행되는 동안 그것이 무엇을 만들고 있는지 테스트하기 어렵다는 것입니다.

저는 그 제한 사항을 해결하기 위해 GitHub Pages를 사용해 왔으며, 매우 잘 작동한다는 것을 발견했습니다.

저의 프로세스는 다음과 같습니다:

• https://github.com/new 에서 프로젝트를 위한 새 저장소 (repository)를 생성합니다. 이는 공개(public) 또는 비공개(private) 모두 가능하며, 두 방식 모두 동일하게 잘 작동합니다.
• Claude iPhone 앱, 데스크톱 앱, 또는 브라우저(https://claude.ai/code)에서 Claude Code for web 세션을 시작합니다.
• Claude에게 무엇을 작업할지 말해주고, 가능한 한 빨리 index.html 페이지를 커밋(commit)하도록 독려합니다. 이렇게 하면 claude/3d-raccoon-heist-game-50n293와 같은 이름의 브랜치(branch)가 생성됩니다.
• 저장소의 Settings -> Pages 영역으로 이동하여 (저의 경우 github.com/simonw/raccoon-heist/settings/pages), “Deploy from a branch”를 선택하고, 브랜치 이름을 고른 뒤 Save를 누릅니다.

이것이 전부입니다! 각 푸시(push) 후 약 30초 이내에 최신 콘텐츠가 yourname.github.io/your-repo/에서 확인 가능해집니다.

비공개 저장소로 이 작업을 수행할 경우, 저장소 이름을 추측할 수 있는 사람이라면 누구나 게시된 콘텐츠를 볼 수 있습니다. 저 개인적으로는 이 부분을 크게 걱정하지 않습니다.

Fable 5 프롬프트 (prompt)

다음은 제가 Fable 5에게 준 프롬프트입니다 (제 휴대폰의 메모 앱에 작성되었습니다. 이 프로젝트 전체는 모바일에서 진행되었습니다). 저는 원본 트윗에 있던 두 장의 이미지와 함께 이 프롬프트를 전달했습니다.

이 3D 게임을 브라우저용으로 빌드해줘.

이 저장소는 정적 파일 (static files)을 서빙하도록 설정되어 있으니, 다른 모든 것을 로드하는 index.html이 반드시 있어야 해.

모바일 친화적(mobile-friendly)이어야 해 (터치 컨트롤, 작은 화면에서도 잘 작동할 것).

너는 OpenAI API 키와 그들의 이미지 생성 모델 API에 대한 접근 권한을 가지고 있어. 3D 모델에 사용할 텍스처(textures)를 만드는 데 그것을 사용해. 문서 링크: https://developers.openai.com/api/docs/guides/image-generation - gpt-image-2를 사용해.

독립적으로 작업해줘. 나에게 추가적인 디자인 결정을 내리라고 요청하지 마. 게임이 재미있고, 약간의 놀라움이 있으며, '너구리 강탈(raccoon heist)' 분위기가 잘 살아있고, 시각적으로 즐거워야 해.

내가 네 작업물을 미리 볼 수 있도록 가능한 한 자주 커밋(commit)하고 푸시(push)해줘. 타이틀 화면을 보여주는 index.html로 시작해서 거기서부터 구축해 나가면 돼.

작업하면서 변경 사항을 포함하여 notes.md 파일에 계속 기록하고, 모든 커밋의 일부로 이를 포함해줘.

나는 어떠한 기술적 선택도 하지 않았습니다. 이전 실험들을 바탕으로 아마도 Three.js를 사용할 것이라고 (정확하게) 가정했습니다.

Claude에게 OpenAI 키에 대한 접근 권한을 부여하는 것은 Claude의 능력 사이의 공백을 메우는 데 매우 효과적이었습니다. 이 경우에는 텍스처 (texture)로 사용할 이미지를 생성할 방법이 필요했습니다. Fable은 이미지 생성기 (image generator)를 위한 프롬프팅 (prompting)을 매우 잘 수행합니다!

내가 “독립적으로 작업해라—나에게 추가적인 디자인 결정을 요구하지 마라”라고 말한 이유는, 나의 추가적인 입력 없이도 완전하고 작동 가능한 게임을 만들어낼 수 있는지 확인하고 싶었기 때문입니다.

또한 “내가 네 작업물을 미리 볼 수 있도록 가능한 한 자주 커밋(commit)하고 푸시(push)해줘”라고 말했습니다. Claude iPhone 앱에서 Claude Code를 사용할 때는 GitHub 저장소 (repository)를 지정해주면 브랜치 (branch) 내에서 작동합니다. “가능한 한 자주 푸시하라”고 말하는 것은 커밋이 즉시 해당 브랜치에 반영되기 시작함을 의미합니다.

나는 notes.md를 요청하는 것을 일종의 재미 요소로 활용하는 것을 좋아합니다. 완성된 파일과, 개(dog)를 추가했을 때 작성된 기록은 다음과 같습니다:

새로운 에스컬레이션(escalation): 3일 밤부터 마당에 순찰하는 경비견이 나타납니다 — 빨간색 스파이크 목줄을 차고 꼬리를 흔드는 로우 폴리 (low-poly) 갈색 하운드입니다. 이 개는 무작위 지점 사이를 배회하며, 12 유닛(unit) 이내로 들어오면 당신의 냄새를 맡고 후각으로 추적합니다 (시야(line of sight)는 상관없습니다 — 머리 위의 👃 아이콘과 짖는 소리로 표현되는 순수하게 코를 이용한 추적입니다). 17 유닛 이상의 간격을 벌리면 추적을 포기합니다. 잡혔을 때의 메시지는 이제 상황별로 다릅니다: 경비원 / 헤드라이트 / 하운드. 자동화된 테스트를 통해 배회 → 추적 → 검거 과정을 검증했습니다.

트랜스크립트(transcript) 검토

Claude Code 공유 세션에 접속할 수 있으며, 저는 또한 claude-code-transcripts 도구를 사용하여 저만의 HTML 버전을 내보냈고, 여기에서 확인할 수 있습니다.

Fable은 index 페이지로 시작하여, Three.js 복사본을 벤더링(vendored)한 후, 자체적인 gen_textures.py 스크립트(여기 복사)를 작성했습니다.

그것은 텍스처를 생성하고, 제대로 보이는지 확인하기 위해 스팟 체크(spot-check)를 수행했습니다. 쓰레기통을 위해 생성된 metal.jpg 파일은 다음과 같지만, 게임 자체에는 정확하게 적용되지 않은 것 같습니다:

이제 너구리, 쓰레기통 은신처, 그리고 두 마리의 팀 너구리 모두 모바일에서 완벽하게 보입니다. 이 중요한 수정 사항을 커밋(Committing)합니다.

그것은 타이틀 화면을 생성하기로 결정했고, gen_title.py 스크립트를 사용하여 이를 수행했습니다. 그것이 사용한 gpt-image-2 프롬프트는 다음과 같습니다:

Video game key art, low-poly 3D render style, moody nighttime scene: a cute low-poly raccoon wearing a tiny black burglar mask sneaking on its hind legs carrying a glowing gold coin, next to a tipped-over metal trash can, suburban house with warm glowing windows in the background, deep blue night, full moon, fireflies, cinematic rim lighting, charming heist caper mood. No text, no words, no logos.

그리고 결과물 이미지(Claude는 이를 "아름답다"고 생각했습니다)입니다. 다만 데스크톱에서 보여줄 때는 너구리가 없는 상단 1/3 부분만 잘려서 나온다는 점을 언급해 둡니다!

그다음 제가 가장 좋아하는 변경 사항인 강아지를 추가했습니다:

export function makeDog() {
const g = new THREE.Group();
const BROWN = 0x8a6440, DARK = 0x5e4128;
...

그리고 또 다른 스크린샷을 포함하여 Playwright를 사용해 한 차례 테스트를 진행했습니다.

// 강아지 근처로 걷기
await page.evaluate(() => { const d = window.__rh.dog; window.__rh.teleport(d.x + 6, d.z); });
await page.waitForTimeout(2000);
...

그것은 몇 가지 수정을 더 거친 후, 완료되었다고 선언했습니다:

Raccoon Heist가 빌드, 테스트 및 푸시되었습니다 — claude/3d-raccoon-heist-game-50n293에 7개의 커밋이 완료되었으며, 데스크톱, 세로형 휴대폰, 가로형 휴대폰 뷰포트에서 자동화된 Playwright 플레이스루(playthroughs)를 통해 모두 검증되었습니다.

게임 내용: 당신은 가면을 쓴 너구리가 되어 동료들의 쓰레기통 은신처를 빠져나와 달빛이 비치는 막다른 골목으로 몰래 나갑니다. 동전, 보석, 반지, 도넛, 그리고 물고기를 획득하세요 (물고기는 등에 눈에 보이게 쌓이며 이동 속도를 늦춥니다). 그 후 집으로 뒤뚱뒤뚱 걸어가 동이 트기 전에 그것들을 은행에 맡기세요. 밤이 지날수록 목표치와 위험도(heat)가 높아집니다. 1일 차에는 손전등을 휘두르는 경비원이 한 명 있고, 2일 차에는 두 명이며, 3일 차에는 시야(line-of-sight)를 완전히 무시하고 냄새를 추적하는 사냥개가 추가됩니다. 경찰 순찰차가 헤드라이트로 거리를 훑고, 집주인들이 창밖을 무작위로 내다보며, 갈매기가 주기적으로 주인이 없는 전리품을 덮칩니다. 피자 조각은 6초간의 속도 광란(FRENZY) 상태를 유발하며, 희귀한 황금 TV는 그 무게를 집까지 운반할 수 있다면 120점의 가치가 있습니다. 승리 등급은 TRASH PANDA ⭐ → CAT BURGLAR ⭐⭐ → MASTER OF DISGUISE ⭐⭐⭐이며, 최고 기록은 localStorage에 저장됩니다.

구축 방식: Three.js를 번들링하여 포함하였고(CDN 미사용), 절차적(procedural) 로우 폴리(low-poly) 캐릭터와 절차적 WebAudio 사운드트랙(은밀한 워킹 베이스 재즈 및 모든 효과음 포함 — 오디오 파일 없음)을 사용했습니다. 7개의 모든 바닥/벽 텍스처와 타이틀 화면의 히어로 아트(hero art)는 gpt-image-2로 생성되어 정적 자산(static assets)으로 커밋되었으므로, 배포된 게임은 API 호출을 전혀 하지 않습니다. 모바일 버전은 동적 터치 조이스틱(터치하는 곳 어디든 나타남)과 대시(DASH) 버튼을 제공하며, 데스크톱은 WASD/방향키와 Space 키를 사용합니다.

테스트 과정에서 언급할 만한 두 가지 실제 버그가 발견되었습니다: 실제 휴대폰에서 캔버스(canvas)가 2배 크기로 렌더링되는 문제(cssText 할당이 Three.js의 인라인 크기 조절을 지워버렸으며, 데스크톱 DPR-1 테스트에서는 완전히 가려졌습니다)와, 승리 화면의 별점 div가 타이틀 화면의 전체 화면 .stars CSS를 상속받아

당신은 마당을 돌아다니며 도넛, 생선, 금화, 보석 같은 아이템들을 수집하는 라쿤을 조종하며, 손전등을 든 경비원들과 (나중 레벨에서는) 개를 피해야 합니다. 운반 용량은 제한되어 있으며, 용량이 가득 차면 쓰레기통에 물건을 내려놓아야 합니다. 피자 조각을 집으면 일시적인 속도 부스트 (speed boost)를 얻을 수 있습니다.

팀 메커니즘 (team mechanics)은 전혀 없습니다. 쓰레기통 옆에 정적인 라쿤 두 마리가 더 있지만, 이는 순전히 장식용입니다.

레벨이 진행됨에 따라 약간 더 어려워지며, 레벨 3에서 등장하는 개는 가장 흥미로운 새로운 메커니즘입니다. 하지만 클리어하기는 매우, 매우 쉽습니다. 또한 꽤 지루하기도 합니다. 각 밤은 고정된 지속 시간을 가지며, 모든 아이템을 수집하고 나면 새벽을 기다리는 동안 할 일이 아무것도 없게 됩니다.

구현 방식이 인상적이었습니다. 완전히 3D이며, 쓰레기통이 있고, 손전등의 조명 원뿔 (illumination cones) 효과가 재미있으며, 상당히 일관된 시각적 스타일을 가지고 있습니다. 모바일에서도 작동합니다. 음악은 (Claude에 따르면 "절차적 WebAudio 사운드트랙 (몰래 걷는 듯한 워킹 베이스 재즈와 모든 효과음 포함 — 오디오 파일 0개)") 단순하지만 적절한 느낌을 줍니다.

완성된 게임 프로젝트로서는 평범합니다. 하지만 단 하나의 프롬프트 (prompt)에서 시작된 결과물로서는 매우 인상적이라고 생각합니다.

저는 지금까지 꽤 많은 게임을 바이브 코딩 (vibe coding) 해보았습니다. 게임플레이 관점에서 보면 모두 깊은 실망감을 안겨주었습니다. 재미있는 게임을 설계하는 것은 여전히 인간만의 고유한 특성이라는 사실이 드러났으며, 이는 Claude나 제가 발휘할 수 있는 것보다 훨씬 더 많은 기술과 경험을 필요로 합니다.

그럼에도 불구하고, 에이전트 (agents)의 능력을 탐구하는 방법으로서 게임 개발 프로젝트를 만져보는 것을 강력히 추천합니다. 이는 새로운 것을 시도해 볼 수 있는 재미있고 위험 부담이 적은 방법입니다. 충분히 계속하다 보면, 정말 플레이할 가치가 있는 무언가를 만들어낼 수도 있을 것입니다!