성과
총장상
in-jeju Challenge
실시간
구역별 혼잡도 시각화
안전 우선
최단 경로가 아닌 경로 추천
Overview
군중 유동성 분석 결과가 보고서로만 남으면 현장에서 쓸 수 없습니다. 실제 사용자가 쓰는 형태로 만들기 위해, 분석 결과를 지도 기반 앱으로 구현했습니다.
Architecture
- AppReact Native지도 상태 / 데이터 상태 분리
- MapKakao Maps APIGeoJSON Polygon (위험 구역)Line (이동 경로)
- Data구역별 혼잡도 스코어밀집도 임계값
주요 기능
- Kakao Maps API + React Native로 축제 구역별 혼잡도를 지도에 실시간 시각화
- GeoJSON으로 위험 구역은 Polygon, 이동 경로는 Line으로 표현
- 거리 · 예상 소요시간 · 혼잡도를 함께 고려해 혼잡도가 낮은 경로를 우선 추천
- 실시간 혼잡도를 색상 단계로 표현해 사용자가 즉시 위험도를 판단
문제 해결
Problem
다수의 Polygon과 Line을 동시에 렌더링하자 지도 조작이 눈에 띄게 느려졌습니다.
Cause
데이터 변경이 없는 경우에도 지도 오버레이 컴포넌트가 매번 재렌더링되고 있었습니다.
Solution
React.memo · useCallback으로 불필요한 재렌더링을 차단하고, 데이터가 바뀌지 않으면 오버레이를 재생성하지 않도록 렌더링 조건을 분리했습니다.
Problem
실시간 혼잡도가 갱신될 때마다 사용자의 지도 조작(확대·이동)이 초기화됐습니다.
Cause
지도 상태(중심 좌표 · 확대 레벨)와 데이터 상태가 한 덩어리로 관리되고 있었습니다.
Solution
지도 상태와 데이터 상태를 분리해, 데이터가 갱신돼도 사용자의 조작 맥락이 유지되도록 설계했습니다.
결과
- 분석 결과를 실시간 밀집도 시각화 · 안전 중심 경로 안내까지 동작하는 모바일 서비스로 완성
- in-jeju Challenge 총장상 수상
주요 화면
클릭하면 원본 크기로 열립니다
경로 · 상세 화면
클릭하면 원본 크기로 열립니다