공공데이터 · 지도 서비스2026.03
전국 가로수 현황 지도
전국(시·도) 가로수 데이터를 집계·정제해, 지도에서 밀도/분포를 비교·탐색할 수 있는 서비스로 구현했습니다.
공공데이터데이터정제지도시각화웹구현검색/필터
프로젝트 소개
서울시청 조경과에서 트리맵 데이터를 관리하면서 서울시 트리맵을 참고했습니다.
그러다 "이걸 전국 가로수 현황도 한 화면에서 비교하고 찾아볼 수 있게 만들면 좋겠다"는 생각이 들어서 프로젝트를 시작했습니다.
하지만 공공데이터는 용량이 크고 지역마다 형식이 제각각이라 그대로는 서비스에 쓰기 어려웠습니다.
그래서 전국 기준으로 집계한 데이터와 지역별로 확장한 데이터를 나눠서 만들고, 화면에서는 안정적으로 탐색할 수 있게 구성했습니다.
사용 기술
ReactTypeScriptViteLeaflet(react-leaflet)RechartsNode(데이터 스크립트)Cloudflare Pages/Workers
문제 해결
- - 100MB+ 원본 CSV를 그대로 배포하지 않고, 시·도 분할(`split-by-sido`)과 집계(`aggregate-city-tree`)로 `city-tree-summary.json`을 생성해 로딩/배포 용량을 줄였습니다.
- - 데이터가 불완전할 때 화면이 깨지지 않도록 전국 수준 여부를 판별하고(`isCompleteNationwideData`), 실패 시 목업/대체값으로 폴백하도록 구성했습니다.
- - 정적 호스팅 환경에서도 뉴스/서울 데이터가 동작하도록 Cloudflare Worker API를 붙이고, 미설정/실패 시에는 정적 `news.json`으로 재시도하는 이중 경로를 만들었습니다.
적용 결과
- - 전국(시·도) 통계 + 지역 마커를 한 UI에서 비교/탐색 가능한 형태로 제공했습니다.
- - 데이터 변환 파이프라인을 스크립트로 고정해, 업데이트 시 `build`만으로 산출물이 자동 갱신되도록 했습니다.
- - 정적 배포(Cloudflare Pages)에서도 API 유무에 따라 기능이 자연스럽게 degrade 되도록 설계해 운영 안정성을 높였습니다.
핵심 요약
- - 전국(시·도) 단위로 가로수 분포/밀도를 한 화면에서 비교
- - 원본(100MB+) CSV를 서비스용 요약 데이터로 변환해 로딩/탐색 성능 확보
- - 지역별 데이터 품질 차이를 흡수해 일관된 탐색 흐름으로 연결
구성 순서
지도(전국 비교)가로수 알아보기(지역/종 탐색)활용 데이터(정제·집계 방식)데이터 출처/주의사항
지도 구축 요약
전국 기준
산림청 도시숲 가로수 현황을 시·도별로 집계해 지도 색상(단위 면적당)과 전국 통계에 반영했습니다. 면적 기준은 KOSIS 지역별 면적을 사용했습니다.
서울
서울시 트리맵 데이터를 사용해 전국 집계의 서울 값을 대체했습니다.
지역 확장(부산/전북/경기)
지자체별 CSV(일부 Shapefile 포함)를 파싱하고 좌표 변환·지오코딩을 거쳐 마커로 표시했습니다. 집계는 지역 합계에 반영했습니다.
데이터 출처
모든 데이터는 공공데이터포털(data.go.kr)에서 제공하는 자료를 활용했습니다.