Map Projection으로 포장 지도 UX 개선하기

동일한 위경도에 여러 가게가 있으면 지도에서 마커가 겹쳐 보이고, 기존의 핀 리스트만으로는 탐색 흐름이 끊겼다. 그래서 지도 이동 시 자동 재검색으로 결과를 즉시 갱신하고, 겹친 마커는 지도 위에서 직접 펼쳐 보여주도록 개선했다.

마커 펼치기는 서버가 아니라 클라이언트에서 계산했다. 현재 화면의 Projection과 Zoom Level에 따라 결과가 달라지므로, 사용자가 보고 있는 지도 기준으로 실시간 계산하는 편이 정확하고 비용과 지연도 줄일 수 있었다.

배치는 원형 원리를 사용했다. 마커 N개에 대해 각도를 균등하게 나누고, 반경과 각도로 dx, dy를 만든 뒤 기준점에서 화면 좌표를 이동시켜 배치한 다음 다시 위경도로 변환했다.

• 기준 위경도 → 화면 좌표 변환
• 화면 좌표에서 dx, dy만큼 이동
• 이동한 좌표를 위경도로 재변환

이 방식의 핵심은 위경도에 직접 더하지 않고, 왜곡이 없는 지도 화면 좌표계에서 계산한다는 점이다. 그 결과 화면에서 원형으로 균등하게 펼쳐지는 마커를 만들 수 있었다.

다만 펼침 면적이 커지면 주변 정보와 겹칠 수 있어 운영 정책도 함께 넣었다. 최대 8개까지만 펼치고, 4개당 1 depth, 최대 2 depth로 제한해 면적을 줄였으며, 9개 이상 같은 위경도를 가진 경우는 예외 케이스로 두었다.

또한 Zoom Level이 낮을 때는 최소 개수만 펼쳐 복잡도를 낮추고, 확대할수록 더 많이 펼쳐 상세 선택이 가능하도록 했다. 반경은 2.0.pow(currentZoomLevel - standardZoomLevel)로 스케일링해 줌 변화에 따라 체감 거리가 급변하지 않게 맞췄다.

결과적으로 같은 위치의 가게들이 지도 위에서 분리되어 보이면서 탐색과 선택이 자연스러워졌고, 포장 화면의 핵심 지표인 CVR과 GMV도 긍정적으로 개선됐다.