여기서 플레이할 수 있습니다.
'GTA 6 같은 오픈 월드 게임을 오사카를 배경으로 브라우저에서 구동하고 싶다'라는 주제로, Claude Fable 5.2를 사용하여 게임을 만들어 보았습니다.
완성된 작품은 통천각(通天閣)・신세계(新世界) 지역부터 텐노지・아베노 하루카스 주변까지 자유롭게 돌아다니며 차를 운전하고 미션에 도전할 수 있는 3D 샌드박스 게임 'VELA BAY' 입니다.
먼저 직접 체험해 보세요.
※ GTA VI 및 Rockstar Games의 공식 작품이 아닙니다. GTA와 같은 오픈 월드 작품에서 영감을 얻은 독립적인 오리지널 게임입니다. 게임 내 차량, 인물, 건물 모델, 음성은 코드로부터 생성되었으며, 공식 에셋을 사용하지 않았습니다.
이번에 공들인 부분은 가상의 도시를 수작업으로 배치한 것이 아니라, 실제 오사카의 지도 데이터를 게임 월드에 변환했다는 점입니다.
배경은 신이마미야・신세계・텐노지・아베노 주변입니다. 약 1,557m × 1,386m 에어리어를 돌아다닐 수 있습니다.
| 항목 | 내용 |
|---|
| 도로 | OpenStreetMap에서 유래한 3,699개 구간 |
| ... | |
| 지면에는 항공사진을 붙이고 고도 데이터로부터 지형을 생성했습니다. 도로와 건물은 지도 데이터의 형태를 사용하여 배치했습니다. 우에마치 대지의 고저차도 있기 때문에 완전히 평면적인 지도는 아닙니다. | |
아베노 하루카스는 높이 300m의 유리 타워로, 통천각은 전용 모델로 구현했습니다.
단순히 보는 데모가 아니라 실제로 조작할 수 있는 게임입니다.
프리우스 스타일의 리프트백, 알파드 스타일의 미니밴을 구현했습니다. 택시나 순찰차도 거리를 달리고 있습니다. 주차된 차량뿐만 아니라 운행 중인 차량에도 탑승할 수 있습니다.
차량에는 데미지 시스템이 있어 충돌을 반복하면 연기가 나고 운행 불능 상태가 됩니다. 구급차와 소방차도 배치하여 일반 차량처럼 도시를 달립니다.
도시에는 보행자와 일반 차량이 존재합니다. 차량 AI는 실제 도로 그래프를 따라 주행하며, 보행자는 인도나 도로를 가로지르기도 합니다. 위험을 감지한 보행자가 도망치는 행동도 있습니다.
차량 강도나 폭행 등을 하면 체포도가 ★1~5로 상승합니다. 순찰차가 플레이어를 추적하고 포위하여 멈추면 체포됩니다. 경찰의 시야에서 계속 벗어나면 체포가 해제될 수 있습니다.
더 나아가, 체포도가 올라가면 순찰차에서 경찰관이 내려 걸어서 추격해 옵니다.
맨손, 권총(pistol), AK-47, 로켓 런처를 전환할 수 있습니다. 헬리콥터에도 탑승할 수 있어 지상뿐만 아니라 상공에서도 오사카 시티를 조망할 수 있습니다. 빌딩 옥상 착륙도 대응합니다.
미션은 다음 5가지 종류가 있습니다.
- 배달
- 체크포인트 레이스
- 도주
- 택시
- 나무 상자 회수
클리어하면 현상금을 얻을 수 있습니다. 도시에는 현금 가방이나 숨겨진 패키지도 배치했습니다.
주야(晝夜) 사이클과 맑음・흐림・비・안개 등 날씨 변화에도 대응합니다. 비 오는 날은 타이어가 미끄러지기 쉬워지고, 밤이 되면 가로등이나 창문 불빛, 차량 헤드라이트가 점등됩니다.
| 기술 | 용도 |
|---|
| TypeScript | 게임 로직 |
| ... | |
| 런타임의 주요 라이브러리는 Three.js입니다. 물리 엔진은 도입하지 않고, 게임에 필요한 범위로 한정하여 자체 충돌 판정을 구현했습니다. | |
tools/fetch_osaka.py
를 통해 OpenStreetMap과 국토지리원(国土地理院)의 타일을 가져와 게임 내에서 다루기 쉬운 로컬 좌표계로 변환합니다.
생성되는 데이터는 다음과 같습니다:
map.json
: 도로 그래프, 건물 윤곽 등 -dem.bin
: 고도 데이터 -ground.jpg
: 플레이 범위의 항공사진 -far.jpg
: 주변 에어리어의 항공사진
고도 데이터는 4m 간격 격자로 변환하고, 게임 내에서는 보간(interpolation)하여 지면 높이를 구합니다. 도로 및 건물 배치뿐만 아니라 차량이나 플레이어 발밑의 높이에도 활용됩니다.
위도・경도를 미터 단위 로컬 좌표로 변환하는 처리는 대략 다음 개념을 따릅니다.
x = (lon - LON0) * 111320 * cos(radians(LAT0))
z = -(lat - LAT0) * 110920
지도 중심 근처를 원점으로 설정함으로써, Three.js의 월드 내에서 다루기 쉬운 좌표가 됩니다. 지구 전체를 다루는 GIS가 아니라, 이번과 같은 한정된 에어리어 게임 맵에 국한하여 단순화했습니다.
건물의 윤곽은 단순한 사각형이 아닐 수 있습니다. 따라서 건물을 다각형으로 취급하고, 플레이어나 차량을 원으로 근사화하는 '원 vs 다각형' 충돌 판정(Collision Detection)을 구현했습니다.
나아가 공간 해시(Spatial Hash)를 사용하여 주변의 건물만 검색하도록 처리했습니다. 매번 맵 전체 건물을 일일이 검사할 필요가 없습니다.
구현 과정에서는 38m 사방의 셀에 건물 폴리곤을 등록하고, 플레이어나 차량의 원이 겹치는 셀만을 검색합니다. 개념적으로는 다음과 같은 처리 방식입니다.
const CELL = 38;
const minCellX = Math.floor((x - radius) / CELL);
const maxCellX = Math.floor((x + radius) / CELL);
...
건물의 윤곽을 다각형으로, 플레이어와 차량을 원으로 근사화함으로써 물리 엔진(Physics Engine)을 도입하지 않고도 필요한 충돌 처리를 실현했습니다.
차량 AI는 도로의 중심선이 아닌, 좌측 통행을 고려한 레인상의 경로를 추종합니다. 교차로에 도착하면 연결된 도로들 중에서 다음 진행 방향을 선택합니다.
경찰 차량 역시 동일한 차량 제어(Vehicle Control)를 사용하며, 평상시에는 도로를 따라 주행하고 추격 시에는 플레이어에게 접근하는 경로를 선택합니다.
개발 당시 Chromium 환경(Windows 11, AMD Radeon 내장 GPU)에서 측정한 결과, 시뮬레이션 부분은 프레임당 약 0.3ms였습니다. 이는 렌더링을 포함한 FPS가 아니라 개발 환경 내부의 처리 시간입니다. PC나 브라우저가 바뀌면 결과도 달라지기 때문에 일반적인 성능 수치로는 다루기 어렵습니다.
차량, 인물, 건물 벽면 텍스처 및 효과음은 외부 게임 에셋에 의존하지 않고 코드로부터 생성했습니다. 이 덕분에 지도 데이터 외의 소재를 대량으로 준비하지 않아도 게임으로서 성립할 때까지 제작할 수 있었습니다.
이번 개발 과정은 처음 지시받은 내용만으로 모든 기능을 한 번에 생성하고 끝내는 방식이 아니었습니다.
리포지토리의 docs/SPRINT_LOG.md에도 기록되어 있듯이, 도시 생성, 플레이어 조작, 차량, 교통 AI, 미션, 경찰, 전투, 헬리콥터, 실제 오사카 맵이라는 단위로 나누어 단계적으로 구현과 검증을 진행했습니다.
특히 신경 쓴 부분은 기능 추가 후 '실제로 작동하는지'를 확인하는 것이었습니다. 예를 들어, 차량 탑승이 가능한지, 벽에 끼이지 않는지, 경찰에게 체포되는지, 미션을 클리어할 수 있는지 등을 개별적으로 점검하고 문제가 있을 경우 수정한 후에 다음 단계로 넘어갔습니다.
Fable 5.2는 Anthropic에서 2026년 11월 9일에 발표된 모델이며, 공식 문서에서도 긴 공정을 거치는 에이전트형 작업이나 고도화된 코딩을 활용 사례로 제시하고 있습니다.
이번 프로젝트는 그러한 모델을 사용하여 지도 데이터 가공부터 게임 로직, 렌더링, 조작, 검증까지를 하나의 결과물로 통합한 사례입니다. 물론, 이것만으로 해당 모델의 성능을 일반화할 수는 없습니다.
Node.js와 npm을 준비했다면 다음 명령어로 실행할 수 있습니다.
git clone https://github.com/GitHub30/fable52-gta6.git
cd fable52-gta6
npm install
...
브라우저에서 http://localhost:5173을 엽니다.
프로덕션 빌드와 타입 체크는 다음과 같습니다.
npm run typecheck
npm run build
| 조작 | 키 |
|---|
| 이동・액셀・브레이크・핸들 | W A S D |
| 카메라 조작 | 마우스 (환경에 따라 드래그) |
| 달리기 | Shift |
| 점프/사지 브레이크 | Space |
| ... | 1 2 3 4 |
| 헬리콥터 상승・하강 | Space / Shift |
| 경적 (클랙슨) | H |
| 라디오 ON/OFF | R |
| 시간 진행/날씨 전환 | T / Y |
| 미션 중지 | M |
| 일시 정지 | Esc |
물론 GTA VI와 같은 규모나 품질은 아닙니다. 현재 시점에서는 다음과 같은 제한 사항이 있습니다.
건물 벽면은 종류별 생성 텍스처를 사용했기 때문에, 실제 건물의 외관이나 간판을 재현한 것은 아닙니다.
건물의 높이 데이터가 없는 경우, 면적 등으로부터 추정했습니다.
고가도로, 고가철도, 역 내부, 신호기 등은 미구현입니다 (교차로에서는 차량끼리 양보하는 간이 제어 방식입니다).
PLATEAU의 3D 도시 모델은 아직 가져오지 않았습니다.
실제 기기(실물)의 Google Chrome에서의 FPS나 조작감은 앞으로 더 확인이 필요합니다.
지도의 형태나 항공사진이 실제 같더라도, 건물의 세부까지 실물과 똑같지는 않습니다. 이곳은 향후 개선할 점입니다.
이번에 만든 것은 실제 오사카의 지도 데이터를 기반으로 한, 브라우저에서 즐길 수 있는 3D 오픈 월드 게임입니다.
AI에게 코드를 작성하게 하는 것뿐만 아니라, 지도 데이터를 게임용으로 변환하고 도로를 달리는 AI나 충돌 판정 등을 조합해 나감으로써, 거리를 걸어 다니고 차를 운전할 수 있는 수준까지 구현할 수 있었습니다.
오사카의 거리를 직접 돌아다닐 수 있으니, 꼭 한번 플레이해 보세요.
- Anthropic — Claude Fable 5.2 / Mythos 5.2 발표
- Claude Fable 5.2 공식 문서
- Claude Fable 5.2 프롬프트 가이드
- 개발 로그 (Sprint Log)
- 아키텍처 설계
- OpenStreetMap — 저작권 및 라이선스
- 국토지리원 — 지도 등의 이용과 출전 기재
도로 및 건물 데이터는 © OpenStreetMap contributors (ODbL)입니다. 항공사진 및 고도 데이터에는 국토지리원의 지리원 타일을 사용하고 가공하여 이용했습니다. 이용 시에는 각각의 이용 조건 및 출전 표기에 따라 주십시오.
