👉 2024년 서울건물나이지도 바로 가기 : https://hanbyul-here.github.io/seoul-building-explorer-2024
서울 건물 나이 지도는 건물통합데이터를 기반하여 2024년 기준 서울 내 건물들이 언제 사용승인 허가를 받았는지를 보여줍니다. 원본 데이터는 브이월드에서 찾을 수 있습니다.
2024년 서울건물나이지도를 내며
오랫동안 집이라고 여겨왔던 곳이 사라졌다. 작년에 짧게 한국에 왔을 때 사라진 집 근처를 보러 갔다. 사라진 집터를 보면 마음이 미어지리라 생각했는데, 그렇지도 않았다. 옆 단지를 밀고 들어선 새 고층아파트 단지 상가에 가서 점심도 먹었다. 나에게 가장 중요했던 건물이 사라졌으니, 건물지도를 새로 만들어야겠다는 생각이 들었다. 정작 내가 사랑했던 건물은 서울에 있던 것이 아니라 그 지도에 있지도 않았지만.
7년 만에 지도를 업데이트한다. 서울은 너무 빠르게 변하는 도시지만, 그래도 한 세기도 지나지 않아 건물지도를 업데이트할 필요가 있었을까 하는 생각도 든다. 나는 집이 재개발에 얽혀있는 내내 무력감을 느꼈다. 거대한 프로세스 앞에서 아무것도 할 수 없는 사람이 느끼는 감정이었다. 건물지도를 만드는 동안은 그래도 무언가 하고 있다는 감각이 들어서 위로가 되었다. 그동안 사랑하는 건물을 잃어버린 사람들이, 혹은 새로 사랑하는 건물이 생긴 사람들에게 2024년 지도가 어떤 형태의 도움이 되기를 바란다.
추가된 기능
2017년도 지도 데이터와 비교
든 건물은 몰라도 난 건물은 안다고, 아무래도 대단지가 사라진 경우가 눈에 띈다.
건물 이름 표시
건물 이름 살펴보는 건 참 재밌다. 이름을 불러주기 전까지 한 채의 건물이었던 너는 알고보니 석탄회관. 스택의 변화에서 짚어보겠지만 2017년에는데이터를 가볍게 만들기 위해 건물 이름을 포함할 생각조차 안했는데, 이름을 볼 수 있으니 참 좋다. 기술발전 최고야.
이렇게 아무 것도 없어보이는 곳에 무슨 건물이 있나 했더니 화장실이었구나.
현재 위치 표시
지도를 보고 답사를 가는 분들이 종종 있는 것 같아 위치 표시 기능을 붙여보았다. 나도 걷다가 언제쯤 만들어졌을지 궁금한 건물이 보이면 금방 확인해볼 수 있어서 만족하는 기능이다.
그 외
기술 스택의 변화에서 다시 한 번 언급하겠지만 렌더링 엔진이 바뀌면서 내가 한 것 없이 추가된 기능들이 있다. 이를테면 오른쪽 클릭을 이용해서 카메라를 돌릴 수 있게 되었다. 새로운 각도로 볼 수 있는 서울 건물들 짜릿해 새로워.
기술 스택의 변화
2017년도 지도는 이제는 사라져버린 고용주 기술의 쇼케이스같은 작업이었다. 많은 기술이 오픈소스로 개발되서 회사가 사라진 후에도 유지하는 것이 그리 어렵지는 않았지만, 이왕 업데이트하는 김에 최신 기술의 장점을 취하고 싶어 스택도 바꾸었다.
렌더링: Tangram에서 MaplibreGL로
딱히 대안이 없어서 모두가 떠나간 폐허에 남아있는 느낌으로 탠그램을 써왔는데, Mapbox가 라이센스를 바꾸기 전 버전인 v1을 기반으로 한 MaplibreGL의 커뮤니티가 충분히 커졌다는 인상을 받아서 MaplibreGL로 렌더링 엔진을 바꾸었다. 거의 모든 속성이 스크립트로 편집이 가능했던 탠그램에 비해서, 정해진 스타일 룰을 엄격하게 따라야하는 Maplibre 스타일링에서 버벅댔지만 좀 더 쓰면 익숙해지겠지 하고있다. 지금까진 추가된 기능 외에는 MapboxGL의 다큐멘테이션 페이지를 거의 그대로 사용할 수 있을 정도로 크게 사용성에서 차이가 나지 않는데, MaplibreGL이 개발 방향에서 명확한 차이를 보이기 시작하면 어떨지 모르겠다.
타일링: Geojson tiles에서 PMTiles로
PMTiles은 Protomaps에서 개발한 웹시각화에 최적화된 타일식 단일파일 아카이브인데… 와! 파일은 하난데 정적 타일 서빙이 된다니 이것이 무슨 매지컬 매직? (HTTP range requests를 사용한다고 합니다.) Z/X/Y 폴더 디렉토리의 수천 수만개의 파일들을 관리하지 않아도 되서 간편하고, tippiecanoe를 이용한 타일 생성 속도도 훨씬 빠르다. Geojson tile을 사용했던 2017년 지도는 타일이 너무 무거워지지 않도록 타일셋을 크게 4그룹까지 나누어서 로딩했는데 (데이터가 점진적으로 로딩되면서 사용자가 아무 데이터도 없이 기다리는 시간이 줄기 때문에 로딩이 훨씬 빠르다고 느껴진다. - 처음 지도를 만들 때 참고했던 built:LA를 따라했다.) PMTiles을 사용하니 데이터를 나눌 필요를 느끼지 못했다.
베이스맵도 OSM 데이터를 서울부분만 클립한 후 PMTiles로 전환해 깃헙에 바로 커밋한 버전을 사용하고 있다. 서버에서 캐시하는 베이스맵 타일을 쓸 때 보다 로딩 속도가 느리지만, 프로젝트의 유지를 위해 이 방식을 사용하기로 했다.
PMtiles에서 더 알아보고싶다면 : https://www.youtube.com/watch?v=0pFvc_q_SV4
이렇게 재밌는 프로젝트를 오픈소스로 운영하는 Protomaps를 응원하고 싶다면: https://github.com/sponsors/protomaps?frequency=one-time
렌더링 엔진과 타일셋 모두 바꾸었으니 당연히 자잘한 시각적인 요소들이 바뀌었는데, 지금은 서울시 레이블이 서울시청 건물 안에 포근하게 안겨있는 점이 마음에 든다.
UI Framework: Leaflet Controls -> React + ReactMapGL
이 정도 규모의 애플리케이션에 사이즈와 복잡성만 높이는 선택이었을지도 모르겠지만… 웹을 기반한 지리정보 기술 중 React를 전제로 발전하고있는 기술들이 많고, 굳이 프론트 개발자가 아니어도 React를 다루는 사람들이 많아졌다는 생각이 들어서 (React가 아닌 프로젝트가 낯선 개발자가 더 많다는 인상을 받아서) 프로젝트에 사용해보았다.
서울건물나이지도 2024의 소스코드 링크: https://github.com/hanbyul-here/seoul-building-explorer-2024
사용사면서 버그나 문제를 발견했다면: https://github.com/hanbyul-here/seoul-building-explorer-2024/issues
원본 데이터 링크: https://www.vworld.kr/dtmk/dtmk_ntads_s003.do?dsId=30524&fileNo=2