← 목록으로

수천 개 지도 마커, UX 포기 없이 관리하는 법: 클러스터링을 넘어선 혁신

2026. 4. 17.

수천 개 지도 마커, UX 포기 없이 관리하는 법: 클러스터링을 넘어선 혁신

title: 수천 개 지도 마커, UX 포기 없이 관리하는 법: 클러스터링을 넘어선 혁신 published: true description: 수천 개의 지도 마커를 기존 클러스터링 방식 대신 '우선순위 랭킹' 기반으로 훨씬 더 효과적이고 사용자 친화적으로 관리하는 새로운 접근법을 소개합니다. tags: 웹개발, 자바스크립트, 지도, 성능, UX cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08t55ut0ocyw4gpfyekg.png

지긋지긋한 문제: 복잡하고 느려터진 지도

수많은 지도 마커로 가득 찬 지도를 상상해 보세요. 마치 아래 이미지처럼요.

수많은 마커가 있는 지도

보기만 해도 답답하고, 실제로 이런 지도는 엄청나게 느려지기 십상이죠. 지도가 버벅거리고 마커들이 겹쳐 보이면서 정보 식별도 어렵습니다. 이런 문제를 해결하는 가장 일반적인 방식은 무엇일까요? 대부분의 지도 서비스 제공자들은 "클러스터링" 기능을 제공합니다. 이 기능을 적용하면 보통 이런 결과물을 얻게 됩니다.

마커 클러스터가 있는 지도

클러스터링은 분명 대량의 마커를 다룰 때 발생하는 느려짐과 겹침 현상을 해결해 줍니다. 성능 문제만큼은 확실히 잡죠. 하지만 이 방식은 거대한 UX 문제를 동시에 야기합니다.

클러스터링은 당신의 데이터를 숨겨버립니다.

사용자들은 무작정 클러스터를 클릭하며, 과연 그 덩어리 안에 자신이 찾던 정보가 있을지 막연히 기대해야 합니다. 성능을 위해 지리적, 맥락적 정확성을 포기하는 셈이죠. 예전에 한 프로젝트에서 사용자 반응형 지도에 수천 개의 POI(관심 지점)를 표시해야 했을 때, 클러스터링을 도입했지만 "대체 여기가 뭐 하는 곳이냐"는 사용자들의 피드백에 당황했던 기억이 있습니다. 결국 눈 가리고 아웅 하는 격이라는 생각뿐이었죠.

더 나은 방법: 겹침 문제에 집중하다

저는 클러스터링의 한계를 극복하기 위한 라이브러리인 arenarium/maps를 개발해왔습니다. 이 라이브러리는 클러스터링의 근본적인 문제 대신, 마커 겹침이라는 핵심 문제에 집중합니다. 어떻게 해결하냐고요? 사용자가 지정한 우선순위(rank)를 기반으로 각 마커의 최적 상태를 계산합니다. 이 상태는 마커가 언제 나타날지(zoom to reveal), 그리고 특정 줌 레벨에서 마커가 어느 방향으로 향할지(angles to point) 등을 포함하죠. 결과적으로 각 마커는 명확성과 정보 밀도를 극대화할 수 있도록 최적의 위치에 배치됩니다.

다시 한번 유사한 문제 상황을 가져와서 더 나은 방법으로 해결해 봅시다.

arenarium/maps로 관리되지 않는 마커

같은 마커들을 arenarium/maps로 관리하면 이렇게 달라집니다.

arenarium/maps로 관리되는 마커

클러스터링을 피함으로써 우리는 공간적 무결성을 유지합니다. 만약 마커가 특정 건물이나 이벤트를 나타낸다면, 그 정확한 좌표 위에 그대로 머뭅니다. 병합되거나 강제로 스냅 되는 일은 없죠. 이는 더 세련되고 전문적이며, 궁극적으로 훨씬 더 유용한 지도 인터페이스를 제공합니다.

마커의 구조: 3단계 상태 전환

사용자가 지도를 움직이면, 마커는 줌 레벨과 우선순위에 따라 세 가지 상태로 전환됩니다.

  1. 핀 (The Pin): 가장 기본적인 배경 레이어입니다. 일반적으로 원형 요소로 구성되며, 색상이나 아이콘을 통해 마커에 대한 최소한의 정보를 제공합니다. 뷰를 복잡하게 만들지 않으면서도 히트맵과 같은 느낌을 줄 수 있습니다.
  2. 툴팁 (The Tooltip): 주요 정보 레이어입니다. 공간이 허락하는 한 우선순위에 따라 나타납니다. 항상 표시되는 기본 정보를 담고 있습니다.
  3. 팝업 (The Popup): 확장 정보 레이어입니다. 사용자가 툴팁을 클릭하면 나타납니다. 이미지처럼 툴팁에 담기엔 너무 큰 추가 정보를 포함합니다.

arenarium/maps로 관리되는 마커 gif

위 GIF는 좀 더 복잡한 마커들을 보여줍니다. 사용자가 지도를 움직이며 마커를 보고, 일부 마커를 클릭하여 추가 정보를 확인하는 과정을 담고 있습니다.

뛰어난 호환성: 어떤 지도든 OK!

이 도구는 어떤 지도 제공자를 사용하든 상관없이 플러그 앤 플레이 방식으로 쉽게 통합될 수 있도록 설계되었습니다. 아키텍처는 크게 두 가지 핵심 부분으로 나뉩니다.

  1. 코어 라이브러리 (@arenarium/maps): 상태 로직을 관리하고 최적화 계산 API와 연동하는 npm 패키지입니다.
  2. 통합 패키지 (Integration Packages): Google Maps, Mapbox, MapLibre와 같은 각 지도 제공자를 위한 추상화 레이어 역할을 하는 npm 패키지입니다.

지금 바로 확인해 보세요!

라이브 데모와 전체 문서는 arenarium.dev 웹사이트에서 만나보실 수 있습니다.

일반적인 지도 마커나 클러스터링 기능에 대해 가장 불만스러웠던 점은 무엇인가요? 댓글로 함께 이야기해 봅시다!

<small>이 글 상단에 사용된 이미지는 source에서 제공받았습니다.</small>

원문: https://dev.to/markosmilja/beyond-marker-clustering-1jmj 수집일: 2026-04-17 01:18:30