Google Maps Platform

고급 마커 발표: 고도의 맞춤설정과 더 빠른 성능이 지원되는 마커를 간편하게 만드세요

2022년 11월 23일

https://storage.googleapis.com/gweb-cloudblog-publish/images/Advanced_markers_1.max-2300x2300.png

Alicia Sullivan

Product Manager, Google Maps Platform

Google Cloud 사용해 보기

$300의 무료 크레딧과 20개 이상의 항상 무료인 제품으로 Google Cloud 사용을 시작해보세요.

무료 체험

* 본 아티클의 원문은 2022년 11월 23일 Google Cloud 블로그(영문)에 게재되었습니다.

많은 개발자에게 Google Maps Platform을 처음 사용하는 경험은 지도에 마커를 추가하는 것입니다. 이 경험은 실제 세계에 대한 Google 지식을 사용하여 세계 각지에 있는 사용자에게 도움이 되는 몰입형 지도 환경을 구축하는 첫 발걸음인 경우가 많습니다. 마커는 사용 사례, 업종은 물론 웹 버전인지 모바일 버전인지에 상관없이 거의 모든 지도 기반 환경에서 핵심 요소에 해당합니다.

개발자 커뮤니티에서 가장 많이 접수되는 요청 중 하나가 사용하기 쉬운 고급 마커 기능을 더 많이 제공해달라는 것입니다. 이 같은 요구에 부응하기 위해 오늘 Google은 Maps JavaScript API용 고급 마커의 미리보기 버전을 출시합니다. 이제 개발자들은 고도의 맞춤설정과 더 빠른 성능이 지원되는 마커를 만들어 더욱 풍부한 사용자 경험을 제공하고 브랜드를 선보이며 시간과 리소스를 절약할 수 있습니다.

주요 기능 및 사용 사례

Google 지도의 빨간색 핀 맞춤설정

기본 빨간색 핀을 쉽게 맞춤설정할 수 있는 기능은 개발자들이 가장 많이 요청한 기능 중 하나입니다. 고급 마커의 새로운 'PinView' 클래스를 사용하면 기본 빨간색 핀의 색상, 배경, 아이콘, 윤곽선 표시를 이미지 없이 코드로 직접 변경할 수 있습니다.

이 기능은 다양한 사용 사례를 지원합니다. 소매업체에서는 브랜드 색상이 반영되도록 매장 위치의 마커를 변경할 수 있습니다. 여행사의 경우 사용자가 주변 편의시설을 기준으로 원하는 호텔을 보다 쉽게 선택할 수 있도록 호텔 주변 장소의 색상과 아이콘을 변경할 수 있습니다. 물류 회사라면 변경사항이 발생할 때 실시간으로 택배 또는 차량 상태를 반영하도록 마커의 색상을 변경할 수 있습니다.

https://storage.googleapis.com/gweb-cloudblog-publish/images/deck-19-branding_4_1.max-900x900.max-700x700.png

회사에서 관심 장소의 색상과 아이콘을 변경하는 방법을 보여주는 예시

https://storage.googleapis.com/gweb-cloudblog-publish/original_images/deck-21-package-vehicle-status_Y5ShULx.gif

택배 또는 차량 상태가 반영되도록 마커 색상을 변경하는 물류 회사의 예시

https://storage.googleapis.com/gweb-cloudblog-publish/images/Screen_Shot_2022-10-05_at_10.25.13_AM.max-.max-2100x2100.png

Google 지도 빨간색 핀 맞춤설정 또는 SVG나 기타 이미지를 사용한 자체 커스텀 마커 제작

커스텀 마커 제작을 위한 직접적인 SVG 및 PNG 지원

마커 맞춤설정을 위한 또 다른 옵션은 아이콘이나 사진 등의 자체 이미지 애셋셋을 사용하는 것입니다. 이제 PNG와 SVG와 같이 HTML 'img' 태그로 지원되는 모든 이미지 형식을 사용할 수 있습니다. 또한 CSS를 사용하면 크기, 불투명도, 위치, 색상 등의 변경을 포함해 고급 마커에 동적으로 스타일을 지정하고 고급 마커를 애니메이션 처리할 수 있습니다. 덕분에 그 어느 때보다도 쉽게 동적 마커 환경을 Google 지도에 추가할 수 있습니다. 예를 들어 로고나 다른 브랜드 애셋을 사용해 지도에 브랜딩을 더욱 세밀하게 반영할 수 있습니다.

https://storage.googleapis.com/gweb-cloudblog-publish/original_images/deck-20-branding_1.gif

SVG 이미지로 만든 애니메이션 처리된 커스텀 마커의 예시

커스텀 마커로 상황별 대화형 환경 만들기

사용자 상호작용에 응답하며 CSS의 전체적인 유연성을 토대로 스타일을 지정할 수 있는 커스텀 HTML 요소를 사용하여 커스텀 고급 마커를 만들 수도 있습니다. 이 기능을 활용하면 복잡한 커스텀 오버레이를 사용하지 않고도 이전에는 구축하기 어려웠던 흥미롭고 멋진 대화형 마커 환경을 조성할 수 있습니다. 예를 들어 부동산 회사에서 부동산 주소, 면적, 침실 및 욕실 수와 같은 유용한 추가 정보를 요청하는 사용자 상호작용에 응답하여 부동산 가격을 표시할 수 있습니다.

https://storage.googleapis.com/gweb-cloudblog-publish/original_images/deck-22-real-estate_SSks4OL.gif

HTML 요소를 사용한 커스텀 마커로 부동산 가격을 표시하는 부동산 회사의 예시

데모에서 위의 사용 사례는 물론 그 밖의 사용 사례를 살펴보세요.

마커 성능 및 접근성 향상

고급 마커는 기존 마커보다 최대 66% 빠르게 로드되며 보다 신속한 화면 이동 및 확대/축소를 제공합니다.¹ 또한 이 기능은 대량의 마커에도 빠른 로드 시간을 지원합니다.

https://storage.googleapis.com/gweb-cloudblog-publish/original_images/deck-13-left-1000-Advanced-Markers-performance_1_IrsUb6q.gif

고급 마커를 사용해 마커 500개의 로드, 화면 이동, 확대/축소를 지원하는 지도

또한 여러 접근성 개선사항을 통해 스크린 리더 또는 키보드 탐색을 활용하는 사용자를 위한 제품을 만들 수 있도록 지원하고 있습니다. 이러한 개선사항 덕분에 사용자가 키보드만으로도 마커 간에 이동하고 드래그 앤 드롭할 수 있습니다. 마커 제목이 스크린 리더에서 자동으로 선택되며 마커가 접근성을 위한 기본적인 역할을 합니다.

https://storage.googleapis.com/gweb-cloudblog-publish/original_images/Untitled_uJFs27w_UpHmiug.gif

고급 마커로 스크린 리더 또는 키보드 탐색을 활용하는 제품 만들기

고급 마커 시작하기

최근에 미리보기 버전으로 출시된 데이터 기반 스타일 지정과 마찬가지로 고급 마커가 클라우드 기반 지도 스타일 지정의 최신 기능으로 추가되어 Maps JavaScript API용 Dynamic Maps에 포함되어 있습니다. 고급 마커를 시작하고 추가 기능에 대해 알아보려면 문서를 확인하고 이 동영상을 시청하세요.