마커 펼치기로 포장 지도 UX 개선하기 : Map Projection
프론트엔드
마커 펼치기로 포장 지도 UX 개선하기 : Map Projection
두줄요약
포장 지도에서 겹친 마커로 탐색이 어려운 문제를 Map Projection 기반 펼치기로 개선했습니다.\n클라이언트 계산, 개수 제한, 줌 스케일링으로 가독성과 선택 흐름을 함께 높였습니다.
문제 상황
- 동일 위경도에 여러 가게가 겹쳐 보여 포장 지도에서 탐색 가독성 저하
- 핀 리스트 보완만으로는 지도 위 직관적 선택이 어려워 탐색 흐름 이탈 발생
해결 방법
- 지도 이동 시 자동 재검색으로 결과 갱신 흐름 단순화
- 클라이언트의 Map Projection 기반으로 화면 좌표에서 마커를 원형으로 분산 배치
- 최대 8개 펼침, 2 depth 원형 배치, Zoom Level에 따른 반경 스케일링 적용
성능/운영 포인트
- 서버 계산 대신 클라이언트 실시간 계산으로 현재 화면 기준 일관성 확보
- 펼침 개수와 조건을 제한해 화면 복잡도와 겹침 최소화
- 동일 위경도 예외 케이스를 정책으로 관리해 가독성 유지
