심시티 2000 속으로 들어간 샌프란시스코
혹시 심시티 2000이나 롤러코스터 타이쿤 같은 게임의 그래픽 스타일 기억하시나요? 도시를 45도 위에서 비스듬히 내려다보는, 그 특유의 쿼터뷰 픽셀 그래픽이요. 이런 시점을 아이소메트릭(isometric) 뷰라고 부르는데요. 3D처럼 입체감이 있지만 실제로는 원근감 없이 그려서 어디를 봐도 같은 비율로 보이는 게 특징이에요. Isopolis라는 프로젝트가 바로 이 스타일로 샌프란시스코 도시 전체를 탐험할 수 있는 지도를 만들었어요. 접속하면 트랜스아메리카 피라미드부터 금문교까지, 실제 도시가 통째로 픽셀 아트 게임 화면처럼 펼쳐져요.
그냥 예쁜 그림 한 장이 아니에요. 구글 지도처럼 마우스로 끌어서 이동하고 확대·축소할 수 있는, 진짜로 동작하는 지도예요. 그런데 이 수만 채의 건물을 사람이 다 그렸을 리는 없겠죠? 여기서부터가 개발자 입장에서 재미있는 부분이에요.
OpenStreetMap 데이터가 픽셀 아트가 되기까지
비결은 OpenStreetMap(OSM)이에요. OSM이 뭐냐면, 전 세계 사용자들이 위키백과처럼 함께 만들어가는 오픈 지도 데이터베이스인데요. 도로뿐 아니라 건물 하나하나의 바닥 모양(footprint), 높이나 층수(height, building:levels 태그) 같은 정보까지 들어 있어요. Isopolis는 이 데이터를 가져와서 건물 바닥 모양을 높이만큼 수직으로 뽑아 올리는(extrude) 방식으로 3D 형태를 절차적으로 만들어요. 쉽게 말해 평면 도형에 층수를 곱해서 상자를 세우는 거죠.
그다음이 스타일링인데요. 이렇게 만든 밋밋한 3D 상자들에 커스텀 픽셀 아트 셰이더를 입혀요. 색상 수를 일부러 제한한 팔레트를 쓰고, 디더링(제한된 색으로 점을 교차 배치해 중간색처럼 보이게 하는 옛날 게임 기법)을 적용하고, 창문 무늬까지 그려 넣어서 손으로 찍은 도트 그래픽 같은 느낌을 내는 거예요. 다만 트랜스아메리카 피라미드, 금문교, 코이트 타워, 수트로 타워 같은 랜드마크는 자동 생성으로는 맛이 안 살아서 직접 손으로 그린 스프라이트를 얹었다고 해요. 자동화와 수작업을 적절히 섞은 거죠.
렌더링은 WebGL 기반의 자체 타일러로 처리하는데요. 매번 실시간으로 그리는 게 아니라 4단계 줌 레벨의 타일을 미리 구워(pre-bake) 두고, 일반 웹 지도(슬리피 맵)처럼 필요한 타일만 불러오는 구조예요. 그래서 이 정도 비주얼인데도 브라우저에서 부드럽게 움직여요.
비슷한 시도들과 비교해보면
지도 렌더링을 커스텀하는 프로젝트 자체는 이전에도 많았어요. Mapbox GL이나 오픈소스 대안인 MapLibre로 건물을 3D로 띄우는 건 흔하고, OSM Buildings처럼 건물 데이터 시각화에 특화된 라이브러리도 있고요. 하지만 대부분 '사실적인 3D'를 지향하는데, Isopolis는 반대로 게임 그래픽이라는 확실한 미학을 골라서 기술 데모가 아니라 작품처럼 만들었다는 게 차별점이에요. 제작자는 심시티 2000에서 영감을 받았다고 밝혔고, 낮과 밤 전환 기능이나 뉴욕 같은 다른 도시 버전도 계획 중이라고 해요.
서울 버전, 만들 수 있을까요?
이 프로젝트가 한국 개발자에게 특히 재미있는 이유는, 같은 방식이 서울에도 그대로 통하기 때문이에요. OSM에는 한국 건물 데이터도 있고, 부족한 부분은 국토교통부 건축물대장이나 브이월드 같은 공공데이터로 보강할 수 있거든요. 데이터 파이프라인(OSM 추출 → 압출 → 셰이더 스타일링 → 타일 프리베이크)만 이해하면, 남산타워와 63빌딩만 손으로 그려 얹은 '픽셀 서울'도 충분히 가능한 사이드 프로젝트예요. WebGL과 지리 데이터 처리를 한 번에 배울 수 있는 좋은 소재이기도 하고요.
한 줄 정리: 오픈 지도 데이터에 픽셀 아트 셰이더를 입혀 도시 전체를 게임 화면처럼 만든, 기술과 미학이 잘 만난 프로젝트예요. 여러분이라면 어느 도시, 어느 랜드마크부터 픽셀로 만들어보고 싶으세요?
🔗 출처: Hacker News