이 요약은 AI가 원문을 분석해 생성했습니다. 정확한 내용은 원문 기준으로 확인하세요.
TL;DR
원래 2022년의 트윗 스크린샷과 짧은 프롬프트를 Claude Fable 5에 넣어 브라우저용 3D 게임 한 편을 자동 생성하는 실험을 수행했다. 에이전트는 GitHub 브랜치에 연속 커밋하며 Three.js 기반의 씬, 절차적 WebAudio, gpt-image-2로 만든 텍스처와 타이틀 아트를 정적 자산으로 커밋했고 Playwright로 데스크톱·모바일 검증을 자동 수행했다. 결과물은 기술적으로 완성된 프로토타입이지만 게임성 측면에서는 단조로워 상업적 완성도는 낮았다.
섹션별 상세
실험 목표는 2022년의 트윗 스크린샷 두 장과 짧은 프롬프트를 Claude Fable 5에 넘겨 브라우저용 3D 게임 한 편을 완성하는 것이었다. Fable은 GitHub 리포지토리 브랜치에 연속 커밋을 만들고 index.html로 시작해 점진적으로 기능과 자산을 추가하는 방식으로 작업을 진행했다. 이 방식은 변경사항을 즉시 GitHub Pages로 배포해 모바일과 데스크톱에서 바로 확인할 수 있게 했기 때문에 반복 피드백 루프 없이도 완전한 정적 빌드를 얻을 수 있었다.
근거
- Claude Fable 5가 원본 트윗의 스크린샷과 프롬프트만으로 브라우저용 3D 게임을 생성해 GitHub 브랜치에 7개의 커밋으로 푸시했다. — 본문에서 Fable이 claude/3d-raccoon-heist-game-50n293 브랜치에 7회 커밋하고 Playwright로 자동 검증한 로그와 notes.md 빌드 로그를 남겼다고 기술한다.
아키텍처는 Three.js 기반의 완전한 3D 렌더링과 절차적 오디오(WebAudio) 조합으로 이루어졌다. 에이전트는 Three.js를 번들해 리포지토리에 넣고 저폴리곤 캐릭터와 상호작용, 조명, 그림자, 아이템 획득 및 느려짐 같은 게임 로직을 자바스크립트로 작성했다. 오디오와 모든 사운드는 절차적으로 생성되어 별도의 오디오 파일이 없으며, 이로써 배포 시 외부 자원을 필요로 하지 않는 정적 게임으로 완성되었다.
이미지 자산은 OpenAI의 gpt-image-2를 호출해 생성하고 정적 파일로 커밋함으로써 런타임 API 의존도를 제거했다. Fable이 텍스처용 gen_textures.py와 타이틀 아트 생성 스크립트를 만들어 여러 장의 텍스처와 영웅 이미지들을 생성했고, metal.jpg 같은 텍스처는 리포지토리에 포함되어 게임에서 바로 사용되었다. 결과적으로 배포된 브랜치는 외부 이미지 호출 없이 로컬 정적 자산만으로 동작한다.
근거
- 모든 텍스처와 타이틀 스플래시는 gpt-image-2로 생성되어 정적 자산으로 리포지토리에 커밋되었고 따라서 배포된 게임은 런타임에 외부 API를 호출하지 않는다. — 본문의 'All seven ground/wall textures and the title-screen hero art were generated with gpt-image-2 and committed as static assets' 문장과 metal.jpg 이미지 파일 예시.
테스트는 Playwright 자동화로 데스크톱·portrait·landscape 폰 뷰포트를 대상으로 이루어졌고, 에이전트는 자체적으로 스크린샷과 간단한 회귀 검증을 반복했다. 테스트 시 발견된 문제로는 모바일에서 캔버스가 2× 스케일로 렌더되는 CSS 버그와 별점 요소가 풀스크린 CSS를 계승해 버튼 입력을 가로막는 문제가 있었고, Fable은 커밋으로 이들 문제를 수정하고 재검증을 수행했다. 자동화된 플레이스루는 에이전트가 구현한 게임 흐름(습득→도주→은행 저축→밤 진행)을 확인 가능하게 했다.
근거
- Playwright 자동화로 데스크톱과 모바일(세로·가로) 뷰포트에서 스크린샷과 동작 검증을 수행해 버그를 찾고 수정했다. — 본문의 Playwright 관련 코드 블록과 'verified with automated Playwright playthroughs on desktop, portrait-phone, and landscape-phone viewports' 진술.
완성된 게임 플레이는 짧은 아케이드형 목표와 점진적 난이도 상승을 갖지만 전반적 재미 측면은 제한적이다. 플레이어는 덤프스터에서 시작해 동전과 아이템을 모아 밤이 끝나기 전에 은행에 확보해야 하고, 레벨이 올라갈수록 가드와 수색견 등 장애물이 추가된다. 에이전트가 만든 게임은 기술적 완성도가 높고 모바일 지원과 시각적 통일성이 있으나 팀 기반 플레이나 반복 플레이를 촉발할 메커니즘이 부족해 상품성은 낮다.
용어 해설
- Claude Fable 5
- — Claude Fable 5는 Claude Code 환경에서 동작하는 모델 기반 에이전트 워크플로로, 코드 리포지토리에 직접 커밋하고 Playwright 같은 테스트를 실행하도록 구성할 수 있다. 이번 글에서 Fable은 GitHub 브랜치에 index.html과 자산을 연속 커밋하며 웹용 3D 게임을 완성했다. 에이전트에게 OpenAI 키를 제공해 이미지 생성 API를 호출하는 식으로 부족한 기능을 메우는 흐름을 사용했다.
- Claude Code
- — Claude Code는 코드 편집과 리포지토리 작업을 에이전트로 수행하게 해 주는 Claude의 개발 환경으로, 리포지토리 브랜치에 지속적으로 커밋하고 자동화된 테스트를 돌리는 형태로 사용된다. 글에서는 iPhone 앱과 웹에서 Claude Code 세션을 열어 작업 브랜치에 변경을 쌓았다. GitHub Pages와 결합해 푸시된 결과를 즉시 확인하는 워크플로가 핵심이다.
- gpt-image-2
- — gpt-image-2는 OpenAI의 이미지 생성 API 명칭으로, 텍스트 프롬프트에서 게임 타이틀 아트와 게임 텍스처를 생성하는 데 사용되었다. Fable은 이 모델을 호출해 일곱 개의 텍스처와 타이틀 스플래시를 정적 자산으로 커밋함으로써 런타임 API 호출을 제거했다. 결과물은 게임 배포 시 외부 호출 없이 작동하도록 저장되었다.
- Three.js
- — Three.js는 브라우저에서 WebGL을 쉽게 다루기 위한 자바스크립트 라이브러리로, 이 프로젝트는 외부 CDN 없이 리포지토리에 번들한 Three.js를 이용해 전체 3D 씬과 저폴리 모델을 렌더링했다. 에이전트는 Three.js 기반으로 플레이어, 개체, 조명, 그림자, 물리적 움직임과 애니메이션을 구성했다. 모바일과 데스크톱에서 각각 입력 방식을 따로 구현해 터치 조이스틱과 WASD 컨트롤을 제공했다.
- Playwright
- — Playwright는 브라우저 자동화 프레임워크로, Fable은 미리 설치된 Chromium에서 자동 스모크 테스트와 스크린샷을 실행해 데스크톱·세로·가로 폰 뷰포트에 대한 회귀를 검증했다. 테스트 스크립트는 이동·접근·추적·포착과 같은 게임 플레이 플로우를 자동으로 재현했고, 그 결과를 로그와 스크린샷으로 남겼다. 이로써 커밋마다 기능 회귀가 감지되면 수정이 이어졌다.
기술
- Claude Fable 5
- Claude Code
- gpt-image-2
- Three.js
- Playwright
- GitHub Pages
- WebAudio
활용 사례
- 단일 프롬프트와 이미지로 브라우저 게임 기초 프로토타입을 신속히 생성하는 실험적 워크플로.
- GitHub Pages에 브랜치 배포를 연결해 에이전트 작업을 실시간으로 미리보기하는 배포 패턴.
- Playwright를 이용한 자동 플레이스루로 에이전트가 만든 코드의 기본 동작과 회귀를 검증하는 테스트 자동화.
언급된 리소스
AI 분석 전체 내용 보기
AI 요약 · 북마크 · 개인 피드 설정 — 무료
출처 · 인용 안내
원문 발행 2026. 08. 06.수집 2026. 08. 06.출처 타입 RSS
인용 시 "요약 출처: AI Trends (aitrends.kr)"를 표기하고, 사실 확인은 원문 보기 기준으로 진행해 주세요. 자세한 기준은 운영 정책을 참고해 주세요.
