요기요, Map Projection으로 겹쳐 보이던 지도 마커 문제 해결!

본문에서 Map Projection은 3차원 지구 좌표(위경도)를 2차원 지도 화면 좌표(x, y)로 변환하는 핵심 기술로 소개된다. 위경도 좌표계(Geographic Coordinate System)를 그대로 사용하면 왜곡이 발생하여 마커가 찌그러지거나 간격이 달라 보일 수 있다. Map Projection을 적용하면 원형으로 균등하게 마커를 펼칠 수 있으며, 지도 화면 좌표계에서 계산하므로 왜곡 문제를 해결한다.

서버에서 좌표를 계산해 내려주는 방식은 지도 이동 시 자동 재검색 환경에서 비용과 지연(Latency) 측면에서 불리하다. 클라이언트 사이드에서 Map Projection을 활용하면 실시간 계산이 가능하며, 펼치기 개수와 조건을 제한하여 성능을 안정적으로 관리할 수 있다. Projection, Zoom Level, 화면 좌표계 등 사용자의 현재 지도 상태에 따라 마커를 펼치는 방식은 사용자 경험(UX)을 향상시킨다.

마커 펼치기는 원형 배치를 기반으로 하며, 균등 분할 원리를 적용한다. 반경(Radius)과 각도(Angle)를 계산하여 각 마커의 위치를 결정하며, 마커 개수에 따라 각도 간격을 조절한다. 위경도 좌표계에 dx, dy를 그대로 더하면 왜곡이 발생하므로, Map Projection을 활용하여 지도 화면 좌표계(Screen Coordinate System)에서 계산한다. 균등 분할(Equal Division) 원리를 통해 시각적 가독성을 높인다.

Zoom Level이 낮을 때는 최소 개수만 펼쳐 화면 복잡도를 낮추고, 확대할수록 더 많은 가게를 펼쳐 상세 선택이 가능하도록 했다. Zoom Level 변경에 따라 펼침 반경을 스케일링하여 체감 거리가 급격히 달라지는 현상을 방지한다. Zoom Level 변화에 따른 반경 스케일링(Radius Scaling)은 마커가 무분별하게 펼쳐지는 현상을 줄여 탐색 가독성을 일정하게 유지하는 데 기여한다.

마커 펼침 면적이 커지는 것을 방지하기 위해 최대 8개까지만 펼치고, 4개당 1 depth, 최대 2 depth로 제한했다. 최대 8개 마커 제한은 화면 점유 면적을 줄여 주변 가게/도로 정보를 가리거나 다른 그룹과 겹치는 문제를 해결한다. 9개 이상 동일 위경도 가게는 1% 미만으로, 예외 케이스로 처리하여 99% 케이스에 집중했다. 2 depth 원형 배치를 통해 정사각형 모양으로 마커를 펼쳐 효율적인 배치를 구현했다.