Show GN: HypeSeoul – AI가 그린 서울 전체, 서울 시간대로 움직이는 지도

원문 발행 2026. 10. 27. 19:43원문 언어 한국어GeekNews 원문 보기

요약

서울 전체를 AI로 구현한 인터랙티브 아이소메트릭 지도를 소개합니다. three.js와 OSM 데이터를 활용해 3D 엔진을 구축하고, FLUX.2 LoRA 학습으로 그림 모델을 생성했습니다. 실시간 데이터 연동과 복잡한 기술적 최적화 과정을 상세히 다루고 있습니다.

안녕하세요. 서울 전체를 AI로 그린 아이소메트릭 지도 HypeSeoul을 만들었습니다.

뉴욕을 한 장의 그림 지도로 만든 isometric.nyc(Andy Coenen)를 보고, 서울도 이렇게 보고 싶어서 시작했습니다. 원작 코드는 쓰지 않고 따로 만들었습니다.

지도를 끌고 확대해서 동네까지 내려가 볼 수 있고, 보고 있는 화면을 동네 이름이 들어간 엽서 이미지로 저장할 수 있습니다. 그림 위로 버스·한강 유람선·사람이 움직이고, 낮과 밤은 서울 시간을 따릅니다.

만든 방식

3D 엔진: OSM·Overture 건물 약 58만 채에 국토부 건축물대장 층수를 붙여 three.js로 서울을 세웠습니다. 인스턴스 170만 개를 약 5천 개로 줄여 46fps에서 73fps가 됐습니다.
그림 모델: 엔진 렌더와 그림 33쌍으로 FLUX.2 klein 4B 이미지 편집 LoRA를 학습했습니다. 서울을 1024px 칸 6,394개(0.3m/px, 256px 겹침)로 잘라 A100 10대로 51분 만에 변환했고, GPU 비용은 약 $36였습니다.
정합: 그림과 엔진이 같은 카메라라 픽셀 위치가 맞습니다. 그래서 물 영역 자동 검사, 랜드마크 패치 정합, 앞 건물 가림, 클릭 영역을 엔진 데이터로 그대로 처리합니다.
야경: 밤 그림은 생성하지 않고 낮 그림과 건물 높이로 창문 불빛을 계산했습니다(9,704칸, 로컬 6분).
실시간 지하철: 서울시 실시간 열차 위치 API는 좌표 없이 '어느 역에 진입/출발'만 줘서, OSM 역 524개에 맞춰 선로 위 위치를 추정합니다. 하루 1,000회 호출 한도는 Vercel 함수 + CDN 10분 캐시로 방문자 수와 상관없이 하루 576회 안에 맞췄습니다.
타일: 768px WebP 피라미드(z0~8, 약 2GB)를 R2 + Cloudflare 캐시로 내보냅니다.

실패담

건물 높이: 58만 채 중 실제 높이가 있는 건 16%뿐이라 나머지를 면적으로 추정했더니, 시장·학교·빌라 묶음이 고층 덩어리가 됐고 모델은 그걸 성실하게 아파트로 그렸습니다. 국토부 GIS건물통합정보(건축물대장) 층수를 받아 20.4만 채에 공식 높이를 넣고, 벽 면적이 4% 넘게 바뀐 1,747칸을 다시 칠했습니다. IFC는 38m → 284m, 63빌딩은 37m → 250m로 돌아왔습니다.
한강: 모델이 한강 한가운데를 단풍 숲으로 칠했습니다(학습 쌍에 물만 있는 칸이 없었습니다). 엔진의 물 마스크로 자동 검사해서 잡았습니다.
다리: 한강 다리가 칸마다 폭과 위치가 달라 끊겨서, 긴 구조물은 한 장으로 다시 그렸습니다. 자세한 과정은 제작기에 적었습니다: https://hypeseoul.xyz/making-of/

일반 건물은 AI가 그린 것이라 실제와 다를 수 있습니다.

AI 자동 생성 콘텐츠