도시를 읽는 방법

Why

“도시의 중심은 어디인가”를 판단할 때 기존 통계는 행정동 단위로 끊겨, 실제 밀집 권역의 모양을 보여 주지 못합니다. 건물 하나하나를 격자로 다시 집계하면 경계와 무관한 진짜 덩어리가 드러납니다. 그 가설을 직접 확인해 보려고 만들었습니다.

How — 분석 절차

1. 지역 지정검색 · 지도 클릭 역지오코딩 · 영역 직접 그리기 (3가지 방식)
2. 아파트 수집Overpass API로 building=apartments를 받아 영역 내부만 선별
3. 격자 밀도육각 격자로 분할하고 가우시안 커널로 밀도 평활화
4. 지역대비 밀도(LQ)격자 밀도 ÷ 지역 평균 밀도 — LQ 2.0은 평균의 2배
5. 군집화임계값 이상 격자를 Union-Find로 인접 결합
6. 선정규모(밀도×면적)가 가장 큰 군집이 CBD, 다음이 부도심

Features

• 실시간 재계산 — 임계값·격자 크기·평활화·가중치를 바꾸면 네트워크 재요청 없이 즉시 다시 그립니다.
• 건물 유형 구성 — CBD 중심 반경 1·2·3·5 km 안의 모든 건물을 주거/상업·업무/공공·교육/종교·문화/공업으로 분류해 도넛 차트로 제시합니다.
• 행정동 비교 — SGIS 주택총조사 아파트 수로 행정동별 밀도를 비교하는 차트·표·지도 레이어.
• 자체 SVG 차트 — 히스토그램·군집 막대·도넛을 차트 라이브러리 없이 직접 구현했습니다.
• 한국어 / 영어 · 라이트 / 다크 — 사전 기반 i18n, 지도 색상은 UI 테마가 아닌 지도 바탕색을 따르도록 분리.

Engineering

• 공용 Overpass 서버 대응 — overpass-api.de가 슬롯이 비어도 요청의 절반가량을 504로 거절하는 것을 실측 확인해, 응답이 안정적인 미러를 기본값으로 전환. 실패 시 엔드포인트 폴백 → 슬롯 대기 → 재시도 순으로 복구하고 최근 6건을 캐시합니다.
• 대용량 공간 연산 — 건물–격자 매칭과 커널 합산에 공간 해시를 써서 전수 비교를 제거했습니다. 격자가 7,000개를 넘으면 크기를 자동 확대하고, 2,500 km²를 넘는 영역은 사전 차단합니다.
• 좌표계 변환 — SGIS가 UTM-K로 내려주는 행정동 경계를 proj4js로 브라우저에서 WGS84로 변환합니다.
• 이용 정책 준수 — Nominatim 초당 1회 제한을 지키는 요청 큐, API 키는 서버 없이 브라우저 localStorage에만 저장.

Result — 서울 송파구 분석 예시

육각 격자 655개(한 변 141 m)로 재집계한 결과, 지역 평균의 2배를 넘는 격자 51개가 7개 군집으로 묶였고 그중 가장 큰 덩어리가 잠실본동 일대로 선정되었습니다.

CBD · 지역 평균 대비

×6.3

분석 면적

33.8km²

아파트 건물 (OSM)

2,514동

지역 평균 밀도

74.4동/km²

CBD 면적

1.66km²

CBD 아파트 비율

32.4%

SGIS 아파트 주택

134,651호

육각 격자

655개 · 141 m

영역의 4.9%에 불과한 CBD 군집이 아파트의 32.4%를 품고 있고, 가장 진한 격자는 지역 평균의 17.6배였습니다.

중심지 군집 — CBD · 부도심

• 잠실본동 일대32.4% · ×6.3
• 오륜동 일대2.7% · ×2.7
• 방이2동 일대2.4% · ×2.6

막대 = 지역 전체 아파트 중 군집이 차지하는 비율. 규모가 CBD의 5% 미만인 작은 군집 4개는 생략했습니다.

CBD 반경 3 km 건물 구성 — 8,993동

• 주거2,902동 32.3%
• 상업·업무916동 10.2%
• 공공·교육216동 2.4%
• 종교·문화70동 0.8%
• 공업11동 0.1%
• 미분류4,878동 54.2%

한국 OSM은 용도 없이 building=yes만 입력된 건물이 많아 미분류가 54.2%를 차지합니다. 용도가 확인된 45.8% 안에서는 주거가 압도적입니다.

행정동별 지역대비 밀도 (SGIS 2024)

• 잠실본동×4.6
• 거여2동×2.9
• 장지동×1.7
• 잠실4동×1.7
• 송파2동×1.6
• 가락2동×1.4

전체 27개 행정동 중 상위 6개. OSM 건물 기반 분석이 고른 CBD(잠실본동)가 독립 데이터인 SGIS 주택총조사에서도 1위로 나와, 두 출처가 서로를 검증합니다.

Highlights

• 절차적 배경 — 하늘 그라데이션, 별, 태양, 원경 산맥, 나무, 지표 블록을 코드로 생성합니다.
• 몹 애니메이션 — 문자열 맵으로 정의한 픽셀 스프라이트를 캔버스에 직접 렌더링해 걷는 동작을 만듭니다.
• 파티클 시스템 — 탭마다 폭발·경험치·마법부여·불꽃·하트·물약 효과가 달라집니다.
• 업적 토스트 · 로딩 스크린 — 게임 UI 문법을 그대로 웹 인터랙션으로 옮겼습니다.

Why

정보를 나열하는 대신 “걸어 다니며 보는 이력서”를 만들고 싶었습니다. 지금 보고 계신 이 항해형 사이트도 같은 생각의 연장선입니다.