Moait
홈인기 피드모든 블로그모든 태그
홈인기 피드모든 블로그모든 태그

마커 펼치기로 포장 지도 UX 개선하기 : Map Projection

요기요 favicon요기요·Frontend·
Java
2026년 01월 15일1

AI 요약

이 글은 AI가 요약했어요. 정확한 내용은 꼭 원문을 확인해 주세요!

핵심 요약

요기요가 Map Projection 기반으로 동일 위치의 가게 마커를 원형으로 펼쳐 탐색 가독성을 개선했고, 지도 이동 시 자동 재검색 및 2-depth 원형 배치를 도입해 흐름을 유지했습니다.

구현 방법

  • 좌표 변환: 기준 위경도(baseLatLng)에서 지도 화면 좌표로 변환하고, dx, dy를 적용한 뒤 다시 위경도로 변환
  • 배치 방식: 최대 8개까지 펼치고, 2-depth로 겹친 원형을 활용해 정사각형 형태로 구성
  • 거리 계산: radius = distance × factor, angle = 2π × index / maxIndex, dx, dy 계산
  • 확대/축소 반경 스케일링: radiusPx = standardRadiusPx × 2^(현재ZoomLevel − 표준ZoomLevel)
  • 자동 재검색: 지도 이동 시 결과가 자동으로 갱신되도록 구현

주요 결과

  • 탐색 흐름이 자연스러워지고 마커 선택이 쉬워짐
  • CVR, GMV 등 핵심 지표가 긍정적으로 개선

연관 피드

%가 높을수록 이 글과 비슷할 가능성이 높아요!
『공간데이터 시각화 플랫폼』 개발의 시작부터 끝까지, 프론트엔드 개발자의 여정 섬네일
67%

『공간데이터 시각화 플랫폼』 개발의 시작부터 끝까지, 프론트엔드 개발자의 여정

현대자동차 favicon현대자동차·2025년 04월 27일
No Image
66%

제휴점 목록/지도 통합기: 26배 폭증한 비용부터 아키텍처 최적화까지

여기어때 favicon여기어때·2025년 12월 16일
Webview에서 핀치 줌(pinch zoom) 구현하기 섬네일
64%

Webview에서 핀치 줌(pinch zoom) 구현하기

카카오엔터테인먼트 favicon카카오엔터테인먼트·2023년 03월 10일