핵심 요약
현대자동차가 공간데이터 시각화 플랫폼 개발에서 지도 라이브러리 PoC를 거쳐 React-Map-GL을 최종 선택하고 Deck.gl 연동으로 다층 시각화를 구현했습니다. Jotai 기반 전역 상태 관리와 atomWithStorage로 안정성을 확보했고, map/layers 구조로 레이어를 체계화했습니다. 대규모 마커 렌더링 최적화와 바운더리 적용으로 성능을 유지했고, GeoJSON 매핑으로 지역별 날씨 정보를 시각적으로 표현했습니다. 팝오버/모달 필터와 Figma 디자인 시스템으로 UX를 구체화했습니다.
구현 방법
- 지도 후보 비교 및 PoC: OpenLayers, 자체 SDK, 외부 지도, React-Map-GL 선택
- 상태 관리: Jotai, atomWithStorage
- 구조: map/layers, map/controls, map/overlays
- 최적화: 마커 클러스터링, 바운더리 기반 렌더링
- 데이터 시각화: GeoJSON 매핑과 날씨 레이어 색상 보간
- UX 디자인: 팝오버/모달 필터, 디자인 시스템 활용
주요 결과
- 대규모 데이터에서도 렌더링 속도와 안정성 향상
- Deck.gl 연동으로 확장성 강화
- 전역 상태 관리의 명확성 증가, 로컬 저장으로 재방문 시 상태 유지
