공공데이터 · 지도 서비스2026.03
전국 가로수 현황지도
전국 가로수 현황을 지도에서 한눈에 비교하고, ‘가로수 알아보기’로 기능·관리·FAQ까지 쉽게 이해할 수 있게 만든 서비스입니다.
공공데이터데이터정제지도시각화웹구현검색/필터
프로젝트 소개
메인 지도에서는 시·도 단위로 ‘어느 지역에 가로수가 더 많은지’를 보기 쉽게 보여 주고, 일부 지역은 확대하면 더 자세한 위치/구간 탐색까지 이어집니다.
또한 ‘가로수 알아보기’ 페이지에서 가로수가 하는 일(도시 온도 완화, 대기 정화 등)과 시민이 할 수 있는 일, 관할 기관 연락처·FAQ까지 함께 안내해 “데이터”를 “이해”로 연결했습니다.
사용 기술
React + TypeScriptViteLeaflet(지도)Recharts(통계)Node.js 스크립트(데이터 정제/집계)Cloudflare(Workers/Pages)
문제 해결
- - 원본 CSV를 그대로 배포하지 않고, 전국 비교용 요약 JSON을 생성해 `public/data/`로 고정했습니다(`aggregate-city-tree`).
- - 처리 단위를 줄이기 위해 시·도 단위 분할 스크립트를 두고(`split-by-sido`), 검증/인코딩 변환으로 데이터 흔들림을 줄였습니다.
- - 전국 비교는 ‘그루 수’가 아니라 면적 보정 밀도(그루/km²)를 기준으로 잡고, 지도 색/범례/통계가 같은 기준을 쓰게 맞췄습니다.
- - 부산·전북·경기 일부 지역은 줌 단계에 따라 클러스터 → 개별 마커로 전환되도록 구성해, ‘요약 → 상세’ 흐름이 끊기지 않게 했습니다.
- - 정적 배포에서도 빈 화면이 되지 않도록 뉴스/서울 집계는 API·Worker·스냅샷 등 폴백 경로를 두었습니다.
적용 결과
- - 전국(시·도) 밀도 choropleth와 통계를 기본으로 제공하고, 일부 지역은 마커 탐색까지 이어지도록 구성했습니다.
- - `public/data/` 산출물을 기준으로 정적 배포에서도 업데이트/운영이 단순하게 돌아가게 만들었습니다.
핵심 요약
- - 대용량 공공 CSV를 스크립트로 정제·집계해 정적 배포용 `public/data/` 산출물로 고정
- - 전국 지도는 면적 보정 밀도(그루/km²) 기준 choropleth(4단계 구간)로 ‘공정 비교’ 가능하게 구현
- - 부산·전북·경기 일부 지역은 줌에 따라 클러스터 → 개별 마커로 상세 탐색을 자연스럽게 연결
- - 뉴스/서울 집계는 API·Worker·빌드 스냅샷 등 폴백 경로를 둬 정적 배포에서도 기능이 깨지지 않게 설계