『공간데이터 시각화 플랫폼』 개발의 시작부터 끝까지, 프론트엔드 개발자의 여정

간단 소개

현대자동차의 공간데이터 시각화 플랫폼 개발 여정을 담은 글로, 프론트엔드 기술 스택 선정부터 아키텍처 설계, 성능 최적화 과정을 상세히 설명합니다.

AI Summary

공간데이터 시각화 플랫폼 개발 배경
- 현대자동차는 GPS 좌표 기반의 공간 데이터를 효율적으로 관리하고 분석하기 위해 공간데이터 시각화 플랫폼의 필요성을 느낌
- 기존 외부 솔루션의 한계로 내부 관리 및 유지보수가 가능한 자체 서비스 개발 결정
프론트엔드 기술 스택 및 지도 구현
- React, TypeScript, Styled-Components, Vite, Next.js, Jotai 등 표준화된 기술 스택 활용
- 지도 라이브러리로 React-Map-GL을 선정, WebGL 기반의 성능과 React 생태계와의 호환성, 커스터마이징 용이성이 주요 선택 이유
아키텍처 설계 및 최적화
- 복잡한 상태 관리를 위해 Jotai를 활용, atomWithStorage로 영구 상태 관리 구현
- 지도 레이어 구조화 전략을 통해 효율적인 데이터 관리
- 마커 클러스터링 유틸리티 개발로 대량의 마커 렌더링 성능 최적화
- GeoJSON 데이터와 날씨 데이터를 결합하여 지도 위에 시각화
- 팝오버 및 모달 필터 UI를 결합하여 사용자 친화적인 필터 옵션 제공