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

사이트는 지도 앱이라 본문 텍스트가 거의 없어요. 지도 페이지의 출처 표기와 GeekNews에 올린 제작자 소개글을 기준으로 옮겼어요.

무엇인가

HypeSeoul은 서울 전체를 한 장의 그림 지도로 만든 아이소메트릭 지도예요. 뉴욕을 그림 지도로 만든 isometric.nyc(Andy Coenen)에서 영감을 받았지만 원작 코드는 쓰지 않고 따로 만들었대요.

• 끌고 확대해 동네까지 내려가 볼 수 있어요.
• 보고 있는 화면을 동네 이름이 들어간 엽서 이미지로 저장할 수 있어요.
• 그림 위로 버스, 한강 유람선, 사람이 움직이고, 낮과 밤은 서울 시간을 따라요.
• 지도 데이터 출처는 OpenStreetMap, Overture, 국토교통부 건축물대장(CC BY), AWS Terrain, 서울시 공공데이터이고, 일부 '콘셉트 장소'는 가상이에요.

만든 방식

| 단계 | 내용 | |---|---| | 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 캐시로 제공 |

제작자는 건물 높이 데이터가 비어 있는 등 실패담도 이어서 적었어요.