지도는 쉽다. 지도 UI는 아니다.

Source: Dev.to

지도 UI의 문제점

대부분의 지도 라이브러리는 렌더링은 해결하지만, 제품 UI는 거의 해결하지 못합니다.
대시보드, 도구, 내부 제품에 지도를 사용해 본 경험이 있다면, 고통의 원인은 지도 자체가 아니라 주변 요소라는 것을 알게 됩니다:

• 디자인 시스템과 맞지 않는 마커
• 억지로 만든 듯한 사이드 패널
• 매번 새로 구현해야 하는 필터, 오버레이, 레전드, 상태 등
• 지도와 UI 컴포넌트 간의 스타일 충돌

그 결과? 같은 지도 UI 패턴을 계속해서 다시 만들게 됩니다.

기존 지도 라이브러리가 부족한 이유

문제는 Leaflet, Mapbox, Google Maps 자체가 아니라 이들 라이브러리가 “지도 기본 요소”까지만 제공한다는 점입니다. 실제 제품에서는 의견이 반영된 UI 구성이 필요합니다.

EasyMaps 소개

이 과정을 여러 번 반복한 뒤, 같은 코드를 다시 쓰는 대신 작은, 조합 가능한 지도 UI 키트를 만들기 시작했습니다. shadcn/ui와 같은 정신으로, 하지만 지도 중심 제품에 초점을 맞춘 것입니다.

목표

• 예측 가능한 지도 UI
• 디자인 시스템 친화적인 컴포넌트
• 빠르게 조립 가능한
• 유지 보수가 덜 고통스러운

아직 초기 단계이지만, 경험상 제품을 조립하는 느낌이 더 강하고 CSS와 상태 관리에 싸우는 느낌은 줄어듭니다.

누가 도움이 될까

대시보드, 물류 도구, 부동산 앱 등 지도를 핵심으로 하는 제품을 만든 적이 있다면, 이 고통을 잘 알고 있을 것입니다.

시작하기

제가 EasyMaps라고 부르고 있습니다.

👉

다른 분들은 오늘날 지도 UI 복잡성을 어떻게 다루고 있는지 의견을 듣고 싶습니다.