공공데이터 · 지도/탐색2026.03
전국 보호수 현황지도
전국 보호수 현황을 시·도 단위 choropleth(4단계 구간)로 한눈에 비교할 수 있는 웹 서비스입니다.
공공데이터데이터정제지도시각화웹구현검색/필터
프로젝트 소개
메인 지도에서는 시·도 단위로 “어느 지역에 보호수가 더 많은지”를 색 구간(choropleth) + 툴팁으로 직관적으로 보여 줍니다.
또한 확대 시(가능 지역)에는 시군구/구 단위 클러스터로 요약을 제공하고, 더 확대하면 개별 보호수 마커를 선택해 수종/본수 등 정보를 확인할 수 있게 구성해 “요약 → 상세” 흐름을 자연스럽게 연결했습니다.
별도로 ‘보호수 알아보기’ 페이지에서 보호수의 의미·관리·FAQ·시민 행동 가이드와 시도별 관할 연락처를 안내해 “데이터”를 “이해”로 이어지게 했고, ‘활용 데이터’ 페이지에서 사용한 공공데이터 출처를 정리했습니다.
사용 기술
ReactViteTailwind CSSLeafletreact-leafletRechartsNode.js(스크립트)Turf.jsproj4shapefile
문제 해결
- - 원본 CSV를 그대로 쓰지 않고, 서비스가 바로 읽는 데이터를 `public/data/`에 고정해 정적 배포에 최적화했습니다(예: `public/data/protected-trees.csv` + 지역별 마커 JSON + 제주 시군구 GeoJSON).
- - CSV 인코딩 흔들림을 줄이기 위해 브라우저 로딩에서 UTF-8/EUC-KR/CP949 순 디코딩 + 한글 헤더 검증으로 안정적으로 파싱했습니다.
- - 일부 지역(서울/인천/경북 상세)은 지자체 데이터가 더 정확한 케이스가 있어, 로딩 시 마커/상세 집계를 함께 불러와 시도 총계·수종 분포·전국 합계까지 재계산해 지도/통계 수치가 어긋나지 않게 했습니다.
- - 마커 과밀 문제는 클러스터(카운트 원형) → 개별 마커 단계로 나누고, 동일 좌표 중첩은 미세 오프셋으로 클릭 가능성을 확보했습니다.
- - 제주는 Shapefile→GeoJSON 변환으로 만든 시군구 경계를 적용해, 줌 단계에 따라 시도 → 제주시/서귀포시로 자연스럽게 전환되도록 처리했습니다.
- - 뉴스는 정적 배포에서도 빈 화면이 되지 않도록 `/api/news`(로컬 서버·Pages Functions) → `public/data/news.json`(빌드 스냅샷) → 정적 폴백 순의 폴백 경로를 설계했습니다.
적용 결과
- - 전국(시·도) 보호수 choropleth와 상위 수종 통계를 기본으로 제공하고, 일부 지역은 마커 탐색까지 이어지도록 구성했습니다.
- - `public/data/` 산출물 중심 구조로, 원본 데이터 갱신 후 빌드만으로 서비스 반영이 가능해 운영/업데이트가 단순해졌습니다.
핵심 요약
- - 전국 보호수 현황을 시·도 단위 choropleth(4단계 구간)로 한눈에 비교
- - 가능 지역은 확대 시 클러스터 → 개별 마커로 이어지는 탐색 흐름 제공
- - 산림청 ‘보호수 전국 지정현황’과 지자체 공개 데이터를 정제·보정해 지도/통계/뉴스로 연결
- - 정적 배포 환경에서도 동작하도록 `public/data/` 산출물 + 폴백 경로로 안정성 확보
- - 탐색(지역 선택·확대/마커 선택) 중심의 UI로 “요약 → 상세” 흐름을 설계