Saltline: Fable 5.2가 원샷으로 만든 브라우저 FPS

3줄 요약

1. Anthropic 소속이자 Electron 공동 메인테이너인 Felix Rieseberg가 Fable 5.2 출시 당일인 2026년 11월 9일에 1인칭 슈팅 게임(FPS) Saltline을 claude.ai 아티팩트로 공개했다. 프롬프트 하나를 주고 사람의 중간 피드백 없이 Fable 5.2를 8시간 동안 실행해 얻은 결과물이다.
2. 1.42MB짜리 단일 index.html 파일에 three.js r180 라이브러리와 게임 코드가 함께 들어 있다. 외부에서 받는 이미지, 3D 모델, 오디오 파일은 없고, 모든 텍스처와 메시, 57종의 소리를 브라우저가 실행되는 시점에 절차적으로 합성한다.
3. 에이전트는 모듈별 독립 쇼케이스(?show=)와 카메라 촬영 인자, 30초 주기의 자동 벤치마크(?bench)를 코드로 먼저 만들었다. 이 장치를 활용해 8시간 동안 입력 토큰 총 4억 4500만 개를 소비하며 스스로 화면을 확인하고 수정했다.

무엇을 만들었나: 프롬프트 하나와 8시간의 실행

새벽 5시 42분, 비가 내리는 컨테이너 항만 제4선석(Saltline Terminal, Berth 4)이 1인칭 슈팅 게임 Saltline의 무대다. 플레이어는 항만 당국 강습 부대(Port Authority Breach Unit)의 단독 침투 요원이다. 폭주한 항만 보안망의 중계기(relay) 3개를 키보드의 E 키로 절단하고, 정박한 배까지 가서 탈출하는 것이 임무다. 가로 80m, 세로 60m 규모의 항만 레벨에는 스폰 지점 42곳과 엄폐 지점 55곳이 있고, 스폰 지점에서는 공중 드론과 사족 보행 로봇이 나타난다.

제작자인 Felix Rieseberg는 Fable 5.2가 출시된 2026년 11월 9일에 이 아티팩트를 공개하며 제작 조건과 토큰 사용량을 다음과 같이 밝혔다.¹

I wanted to test Fable 5.2’s quality with one-shot prompts without human feedback. Everything in this game is from scratch: models, sounds, textures. ~$550 at API pricing, ~2.7M output and 445M input tokens, heavily cached. Took 8 hours!

이어 올린 게시물에서는 프롬프트 엔지니어링의 시대가 끝나가고 있다는 코멘트와 함께 실제로 입력한 프롬프트 원문을 공개했다.²

You know, you should also build me a FPS. Insanely detailed quality pls, something that looks visually like it can keep up with AAA. Make it small in scope (like a tiny level) but otherwise impressive photorealistic graphics

지시는 세 문장뿐이었지만 실행에는 8시간이 걸렸다. 소비한 토큰은 출력 약 270만 개, 입력 약 4억 4500만 개이고, 입력은 캐시 비중이 컸다. API 정가 기준 비용은 약 550달러다. 아티팩트 원본을 그대로 보존한 Pages 복제본에서 같은 게임을 바로 실행해 볼 수 있다.

레벨 전체 조감 화면. 컨테이너 야적장, 중앙 창고, 크레인, 정박한 배(KITTIWAKE)와 바다가 보인다. 오른쪽 외곽에는 1인칭 시점을 위해 세워 둔 판재 세트의 끝부분이 드러난다.

기술 시연용 풍경 하나만 보여 주는 데모와 달리, 침투부터 탈출과 결과 집계까지 한 판을 완주할 수 있는 구성을 갖췄다. 적 AI는 시야 거리와 시선(line of sight) 판정을 하고, 플레이어의 노출도가 누적되는 정도에 따라 경계, 수색, 교전 상태로 전환한다. 상용 슈팅 게임에서 쓰는 기법도 구현했다. 동시에 공격할 수 있는 적의 수를 공격권 토큰으로 제한해, 다수의 적이 한꺼번에 사격해 플레이어가 대응할 수 없게 되는 일을 막는 방식이다. 탈출에 성공하면 결과 화면에 소요 시간, 명중률, 파괴한 기계 수, 재시도 횟수와 종합 등급이 집계된다. 설정 메뉴에서는 그래픽 품질, 마우스 감도, Y축 반전, 음량, 시야각(FOV)을 조절할 수 있다. 입력 장치는 키보드와 마우스, 모바일 터치, 게임패드를 모두 지원한다. 브라우저에서 마우스 포인터 잠금(Pointer Lock)이 작동하지 않을 때를 대비한 드래그 시점 조작도 마련되어 있다.

창고(shed) 구역 내부. 천창으로 들어오는 빛 아래 선반과 계단, IBC 탱크가 배치되어 있고 중앙에 절단 목표물인 중계기(relay)가 서 있다.

한 파일 안의 구조: 1.42MB 단일 HTML과 모듈 구성

아티팩트 원본은 1,423,413바이트(약 1.42MB)짜리 index.html 파일 하나다.³ 파일 내부는 약 31KB의 CSS, 최소한의 HTML 뼈대(캔버스 하나와 UI 레이어), 약 1.36MB의 자바스크립트 코드 한 덩어리로 이루어져 있다. 자바스크립트는 esbuild 계열 도구로 압축해 번들링한 것이다.

번들된 스크립트의 절반가량인 약 686KB는 three.js r180 라이브러리(BufferGeometryUtils 애드온 포함)다. 외부 CDN에서 불러오지 않고 파일 내부에 통째로 포함했다. 나머지 약 674KB는 Fable 5.2가 작성한 게임 코드(압축 상태 기준)이고, 그중 약 109KB는 GLSL 셰이더 문자열이다.

부팅할 때는 main 모듈이 정해진 순서대로 하위 모듈을 초기화하고, 로딩 화면의 문구가 지금 실행 중인 생성 단계를 실시간으로 보여 준다. 단계는 렌더러 초기화(render), 재질 텍스처 굽기(mats), 컨테이너 배치(level), 배경 크레인(backdrop), 젖은 지면(ground), 특수효과와 소리 합성(fx, audio), 소총 점검(weapon), 적과 게임 루프 초기화(enemies, hud, game) 순서다.⁴ 렌더러와 레벨은 필수 모듈이고, 나머지 하위 모듈은 초기화 도중 오류가 나더라도 부팅을 중단하지 않는다. 이때 빈 대역 객체(stub)를 대신 넣고 다음 단계를 이어서 실행한다. 난수 생성기는 기본 시드가 4207로 고정되어 있어 실행할 때마다 같은 배치가 나온다.

애셋은 정말 런타임 생성인가

네트워크 요청과 파일 내부를 확인한 결과, 외부 네트워크로 나가는 요청은 구글 웹폰트(Big Shoulders Display, IBM Plex Mono, Barlow Condensed) 한 건뿐이다. 외부에서 받아오는 이미지, 3D 모델, 오디오 파일이 전혀 없고, 코드 안에 Base64 문자열로 인코딩해 넣은 바이너리 데이터도 한 건도 없다. 메뉴 화면에 적힌 "Every surface, machine and sound is generated in your browser. Nothing is downloaded."라는 문구 그대로, 모든 시청각 자산은 브라우저가 코드를 실행하는 순간 계산으로 만들어진다.

텍스처: GPU에서 셰이더로 굽는다

재질 쇼케이스(?show=mats) 화면. 절차적으로 생성한 재질들을 평면 판과 바닥, 구체에 입혀 테스트하고, 오른쪽에는 2D 캔버스로 그린 항만 표지판과 라벨 아틀라스를 세워 두었다.

재질(Material) 시스템에는 31종의 기본 재질 계열이 있고, 계열마다 전용 GLSL 프래그먼트 셰이더 함수(surf())를 갖고 있다. 아스팔트, 콘크리트, 벽돌, 에폭시, 페인트, 선체 철판, 아연도금, 녹슨 금속, 다이아몬드 강판, 골강판, 철망, 카본, 목재, 방수포, 골판지, 밧줄, 타이어, 유리, 물 등이다. 부팅 시점에 GPU는 화면 밖 렌더 타깃(Offscreen Render Target)에서 이 셰이더를 실행해 세 종류의 텍스처 맵을 동시에 그려 낸다. 세 종류는 표면의 고유 색상을 담은 알베도(Albedo) 맵, 거칠기(Roughness)와 금속성(Metalness)과 주변 차폐(Ambient Occlusion)를 채널별로 묶은 ORM 맵, 표면 요철을 나타낸 높이(Height) 맵이다. 이어 높이 맵을 셰이더로 다시 처리해 조명 반사 각도를 결정하는 노멀(Normal) 맵을 계산한다.

이렇게 구운 기본 텍스처(해상도 512~1024, 바닥 아스팔트는 최고 품질에서 2048)에 페인트 8색, 녹슨 강철, 아연도금 등 48종의 재질 변형을 조합한다. 중간 품질, 소프트웨어 렌더러에서 실측하면 24개 텍스처 세트(약 112MB 분량)가 부팅 중 약 9.4초 만에 생성된다. 글자 라벨은 "SALTLINE TERMINAL B4-0271", "MAX GROSS 30480 KG", "DANGER", 선박 이름 "KITTIWAKE" 같은 문구를 포함해 96개이고, 데칼은 22종이다. 이 둘은 HTML 2D 캔버스 API로 그려 하나의 텍스처 아틀라스로 묶은 뒤 컨테이너와 설비 표면에 붙인다. three.js의 표준 재질 셰이더도 onBeforeCompile 훅으로 개조했다. 추가한 것은 두 가지다. UV 좌표가 늘어나는 것을 막는 삼면 투영(Triplanar mapping)과, 빗물 웅덩이 부분의 표면 거칠기를 낮춰 반사를 선명하게 만드는 처리다.

재질 6종 근접 촬영 화면. 왼쪽부터 녹슨 강철, 줄무늬 강판, 골강판, 위험 표시선, 벽돌, 콘크리트 재질이 외부 이미지 파일 없이 GLSL 수식만으로 생성됐다.

모델: 기본 도형과 압출로 조립한다

3D 모델도 외부 모델링 파일 없이 코드로 정점과 기본 도형을 조합해 만든다. 플레이어가 들고 있는 소총 PAC-9 Longshore는 총열 덮개, 피카티니 레일, 조준경, 소염기, 탄창 등을 메시 10개, 삼각형 약 3만 700개로 조립했다. 1인칭 팔까지 합치면 메시 13개, 삼각형 약 5만 3천 개다. 모서리 정점마다 마모 흔적도 계산해 넣었다.

적 캐릭터는 두 종류다. 탐조등을 달고 날아다니는 쿼드콥터 드론 Gull과 네 발로 걸어 다니는 지상 로봇 Hound다. 자체 구현한 관절 뼈대(rig) 클래스로 몸통과 다리, 로터 부품을 계층 구조로 묶어 절차적 애니메이션을 구동한다. 항만 레벨 전체에는 컨테이너 47개와 소품 298개가 놓여 있고, 이들이 이루는 정적 삼각형은 약 79만 개(메시 125개)다. 배경과 적, 무기를 모두 합친 한 화면의 규모는 삼각형 약 186만~290만 개, 드로콜(Draw call) 230~500회, 셰이더 프로그램 106~115개, 텍스처 136~143장이다.

적 쇼케이스(?show=enemies) 화면. 탐조등 불빛을 쏘는 공중 드론 Gull과 지상 사족 로봇 Hound.

아래 네 장은 같은 물체를 같은 구도에서 두 번 찍어 위아래로 붙였다. 위는 게임이 그리는 화면 그대로이고, 아래는 삼각형의 모서리를 선으로 드러낸 와이어프레임이다.⁵ 드론과 사족 로봇은 각각 메시 하나로 되어 있고, 이 메시를 뼈대에 묶어 관절마다 휘게 하는 스킨드 메시(Skinned mesh) 방식을 쓴다.

공중 드론 Gull. 동체와 덕트 팬 4개, 안테나, 탐조등 짐벌을 뼈 13개에 묶었다. 삼각형은 약 1만 3천 개다.

사족 로봇 Hound. 몸통과 네 다리, 안테나를 뼈 20개에 묶었다. 삼각형은 17,344개이고, 걷던 자세 그대로 멈춰 찍었다.

소총 PAC-9 Longshore. 1인칭 팔을 숨기고 총만 남겼다. 메시 10개, 삼각형 약 3만 700개다.

20피트 컨테이너. 옆면 골강판의 주름까지 형상으로 접어 만들었고, 삼각형은 약 5,700개다.

소리: 57종을 오디오 버퍼로 합성한다

오디오도 외부 음원 파일 없이 Web Audio API로 57종의 소리 버퍼를 부팅 시점에 합성한다. 연산량이 큰 오디오 합성이 프레임을 멈추지 않도록 작업을 6ms 단위로 분할해 백그라운드에서 순차적으로 생성한다.

믹싱 단계에서는 다이나믹 레인지 압축기(Compressor)와 소프트 클리핑을 걸고, 3차원 공간의 음원 방향과 거리는 머리 전달 함수(HRTF) 패닝으로 처리한다. 특히 실외와 창고 내부의 공간감을 살리려고 두 종류의 임펄스 응답(Impulse Response) 파형까지 직접 합성해 컨볼루션 잔향(Convolution Reverb)을 구현했다. 플레이어가 야적장에서 창고 안으로 걸어 들어가면 발소리와 총성의 잔향 특성과 빗소리의 먹먹함이 실시간으로 바뀐다.

화면을 만드는 렌더링 기법

기본 도형 위주로 조립한 기하 구조가 상용 게임 같은 화면으로 보이는 핵심 요인은 WebGL2로 직접 작성한 15단계 후처리 파이프라인과 전용 환경 셰이더다. 하늘(saltline-sky), 바다(saltline-sea), 갈매기 떼(saltline-gulls), 항만 앞마당(saltline-apron)은 각각 전용 셰이더로 그린다. 젖은 아스팔트 바닥에는 평면 반사(Planar reflection)를 적용했고, 창고 내부의 재질 16개에는 전용 조명 프로브(Light probe)를 할당했다.

부두(quay) 구역 화면. 크레인 구조물 사이로 들어오는 새벽 역광, 반해상도 광선 전진(Ray marching)으로 계산한 볼류메트릭 안개, 젖은 콘크리트 바닥의 평면 반사가 어우러져 있다.

매 프레임 렌더링된 화면은 깊이 복사(depthcopy, depthhalf)를 먼저 하고, 다음 4개 구간의 후처리 패스를 차례로 통과한다.

그래픽 품질은 test, low, medium, high, ultra의 5단계로 구분된다. 부팅 시점에 WebGL 렌더러의 GPU 모델명 문자열을 읽어 품질을 자동으로 고른다. 모바일 기기는 low, SwiftShader나 llvmpipe 같은 소프트웨어 렌더러와 구형 인텔 내장 그래픽(Arc 제외)은 medium, 일반 데스크톱 외장 GPU는 high로 설정한다.

사람 피드백 없이 8시간을 버틴 방법: 모듈 쇼케이스와 계측기

사람이 옆에서 화면을 봐 주지 않는 8시간을 버티기 위해, 에이전트는 코드 안에 자체 테스트 하네스를 설계했다. 게임의 핵심 시각 모듈 9개(render, mats, level, backdrop, ground, fx, weapon, enemies, props)는 모두 본게임용 생성 함수(create)와 함께 독립 전시 함수(showcase)를 내보낸다. URL 뒤에 ?show=모듈이름 인자를 붙여 열면, 무거운 전체 레벨을 부팅하지 않고 해당 모듈의 결과물만 빈 공간에 띄운다. 그 상태에서 정해진 카메라 각도로 촬영할 수 있다.

본게임을 조립하기도 전에, 자기 작업물을 여러 각도에서 촬영해 볼 스튜디오와 성능 계측기를 코드로 먼저 마련해 두었다. 8시간에 걸친 작업 동안 쇼케이스 URL과 전역 계측 훅을 호출해 화면과 상태 값을 거듭 확인하면서 모델과 셰이더를 손봤을 것이다. 공개된 입력 토큰 4억 4500만 개는 이 루프의 누적량으로 추정된다.⁶ 이 글에 실린 캡처 이미지는 에이전트가 남겨 둔 촬영 인자를 그대로 호출해 얻었다.

Fable 5.2 역량 평가: 인상적인 점과 한계

코드 분석과 실행 결과를 바탕으로 Fable 5.2가 보여준 성취와 한계를 정리하면 다음과 같다.

인상적인 점

1. 외부 애셋 없이 만든 시각적 밀도: 텍스처, 3D 메시, 효과음, 배경음악을 전부 수학 수식과 코드로 합성했는데도, 정지 화면만 놓고 보면 상용 게임의 한 장면처럼 보일 만큼 밀도가 높다.
2. 현대 실시간 그래픽스와 오디오 기법의 폭넓은 결합: 현대 게임 기술에서 표준으로 여겨지는 기법을 단일 웹 애플리케이션 하나에 일관되게 구현했다. SSAO, 반해상도 볼류메트릭 안개, 이전 프레임 재투영 모션 블러, 밉 체인 블룸, 자동 노출, 삼면 투영과 젖은 표면 처리, 합성 임펄스 응답 기반 컨볼루션 잔향, HRTF 입체 음향이 그 예다.
3. 완결된 게임 루프와 자가 검증 엔지니어링: 목표 달성과 탈출, 결과 등급, 세 종류의 입력 장치 지원까지 갖춰 끝까지 플레이할 수 있는 소규모 게임으로 완성했다. 모듈별 쇼케이스와 고정 시점 촬영 인자, 폴백 대역(stub)을 먼저 설계한 점도 숙련된 엔지니어링 팀의 작업 방식을 닮았다.
4. 약점을 감추는 미술 방향 선택: 절차적 생성은 복잡한 유기체보다 반복되는 직선 구조물에 강하다. 새벽 역광과 안개, 비에 젖은 컨테이너 항만은 상자가 반복되는 형태를 자연스럽게 보이게 하고 빛 번짐과 반사로 현장감을 살려 절차적 생성의 약점을 가린다.

한계

1. ‘원샷(One-shot)‘의 실제 의미: VGTimes 기사에서 독자 반응으로 인용된 John Rood의 지적처럼, 원샷은 사람이 프롬프트를 한 번만 입력했다는 뜻일 뿐 모델이 단 한 번의 응답으로 결과를 완성했다는 뜻과는 다르다. 출력 토큰 270만 개, 입력 토큰 4억 4500만 개, 8시간의 자율 루프, 약 550달러의 API 비용이 들어간 장기 에이전트 실행의 결과다.
2. 유기체와 인간 캐릭터의 회피: 게임에는 인간형 적이나 NPC가 없다. 상대하는 것은 드론과 사족 로봇뿐이다. 절차적 코드 생성에서 가장 까다로운 인체 모델링과 골격 애니메이션, 얼굴 표현은 설정 단계에서 아예 제외했다. 인체 부위는 1인칭 시점의 팔과 장갑이 유일하다. 무기 쇼케이스를 측면 시점(?show=weapon&wpose=side)으로 돌려 보면, 이 팔과 장갑은 정교한 소총과 달리 단순한 원통과 상자를 조합한 수준이다.

무기 쇼케이스 측면 시점(?show=weapon&wpose=side).

3. 후처리에 의존하는 기본 형상과 세트의 한계: 개별 사물의 기하 형상은 대부분 직육면체, 원통, 단순 압출(Extrusion)을 조합한 것이다. 화면이 그럴듯해 보이는 것은 상당 부분 조명과 젖은 표면 반사, 15단계 후처리 덕분이다. 조감도 오른쪽 외곽에서 보이듯 레벨 외곽은 1인칭 카메라의 시야만 가리는 판재 세트다. 레벨 규모도 몇 분이면 클리어할 수 있는 단일 구역에 그친다.
4. 무거운 초기 부팅과 런타임 부하: 부팅할 때마다 100MB 이상의 텍스처를 굽고 57종의 오디오를 합성하며, 한 화면에 200만 개 이상의 삼각형을 그린다. 그 때문에 소프트웨어 렌더러에서는 부팅에만 1분 이상이 걸리고, 일반 브라우저 사용자 사이에서도 화면이 멈추거나 프레임이 끊긴다는 보고가 나왔다.

가장 흥미로운 지점

내가 이 코드에서 가장 눈여겨본 것은 9개 모듈에 빠짐없이 들어 있는 ?show= 쇼케이스와 고정 카메라 인자(cam=, dt=)다. 화려한 15단계 후처리 셰이더보다 이 검증 장치를 더 높이 평가한다. 에이전트는 “AAA급 그래픽의 작은 FPS를 만들어 달라”는 세 문장짜리 주문만 받았다. 이 상태로 8시간 동안 작업을 이어 가려면, 무엇보다 자신이 짠 코드가 화면에 어떻게 그려지는지 눈으로 확인할 방법이 필요하다. 전체 게임을 매번 띄워 캐릭터를 걸어가게 해서는 사족 로봇의 다리 관절이 제대로 붙었는지, 총구의 소염기 모양이 어색하지 않은지, 녹슨 철판의 거칠기 값이 적당한지를 빠르게 검사할 수 없다.

Fable 5.2는 사물 하나와 재질 하나를 빈 평지 위에 개별 배치하고 지정한 각도에서 촬영하는 간이 스튜디오부터 만들었다. 그리고 4억 4500만 입력 토큰을 써 가며 그 스튜디오에서 촬영한 화면을 스스로 들여다보고 고치는 과정을 수백 번 되풀이했을 것이다. 코딩 역량이 일정 수준에 도달한 모델은 좋은 결과물을 내려고 스스로 전략을 골랐다. 복잡한 코드를 단번에 작성하는 대신, 자신이 만든 결과를 가장 잘 관찰할 수 있는 검증 환경부터 구축하는 전략이다. 이 점이 인상적이다.

출처

• Felix Rieseberg (@felixrieseberg), Saltline (claude.ai 공개 아티팩트, 2026-11-09)
  • 원본 아티팩트: https://claude.ai/artifact/BGY1SztrAYcJQHSsnHHGmp
  • Pages 복제본: https://pages.eiaserinnys.me/d/saltline-fable52
  • 관련 보도: VGTimes, “AI Built This Call of Duty-Style Shooter From Scratch in 8 Hours” (2026-11-09)
• 본문의 게임 화면 캡처 11장과 커버 이미지는 원본 아티팩트를 헤드리스 Chromium에서 실행해 직접 촬영했다. 치비 서소영 삽화 1장은 「느낌적인 느낌을 숫자로 옮기는 일」의 치비 서소영 라인아트를 참조해 gpt-image-2.6-flare로 따로 생성했다.