구글 지도 플랫폼 최고로 활용하기: 성능 최적화 팁

데스크톱 브라우저든 모바일 웹이든, 사용자들은 이제 부드럽고 빠른 UI 성능을 자랑하는 앱에 익숙해져 있습니다. JavaScript 개발자들이 성능 최적화에 더욱 신경써야 한다는 뜻이죠. 지도나 위치 기반 서비스를 제공하는 앱도 예외가 아닙니다. 이번 포스팅에서는 성능 최적화를 위한 몇 가지 팁을 알려드리겠습니다.

 

커스텀 오버레이 사용하기

커스텀 오버레이를 사용하면 사용자가 지도를 확대/축소할 때, 지도와 함께 이동하는 커스텀 지리공간 데이터를 지도 상단에 렌더링할 수 있습니다. 많은 개발자들이 마커와 같은 데이터를 지도에 올리기 위해 이 방법을사용하고 있습니다. 이 작업은 OverlayView.draw()에서 수행됩니다:

이는 사용자 지정 맵을 구축하는 데 매우 유용합니다. 하지만 방법으로는 사용자가 맵을 확대할 때마다 베이스 맵을 다시 그리고, OverlayView.draw()를 호출하여 오버레이된 콘텐츠를 다시 그려야합니다. 지도를 다시 그리는 동시에 코드가 실행되어 전체 지도 환경에 오류가 발생할 수 있기 때문에, 커스텀 오버레이를 만들거나 업데이트 하는 로직이 계산하기 어렵거나 차단된 경우 고려해야할 사항입니다. 또한 draw()에 필요한 코드만 실행해야 합니다. 렌더링을 실제로 실행하는 데 필요하지 않는 모든 작업은 가능한 가벼운 호출을 유지하기 위해 사전에 수행해야합니다.

아래는 지도 렌더링과 동시에 렌더링을 오버랩하는 커스텀 오버레이의 예시입니다.

또 다른 팁: 지도가 정지해 있을 때만 내용을 추가하거나 제거하여 더 나은 사용자 환경을 만들 수 있습니다. 가장 좋은 방법은 dragdragend와 같은 이벤트를 활용하여 지도를 다시 그리는 동안 커스텀 오버레이를 변경하지 않도록 하는 것입니다. 지도에서 마커를 추가하거나 제거할 때도 마찬가지입니다.

다음은 사용자 상호 작용이 완료될 때까지 기다리는 경우의 예시입니다:

훨씬 나아졌네요! 지도의 성능이 향상되었을 뿐 아니라 사용자가 패닝을 중지할 때 마커만을 렌더링함으로써 사용자 환경을 향상시켰음을 알 수 있습니다.

 

마커 이용하기

빠른 실행을 유지하면서 지도에 데이터를 추가할 수 있는 또 다른 방법은 마커를 사용하는 것입니다. 마커는 지도의 위치를 식별하는 데 쓰입니다. 기본적으로 지도에 추가된 마커는 빨간색 핀이지만, 사용자 지정 이미지를 사용할 수도 있습니다. 마커의 활용법을 살펴보겠습니다.

아래 예시에서는 경계 상자 내에 1,000개의 지오코드를 생성했습니다.

다음으로, 마커를 생성하여 지도에 추가했습니다. svg로 마커를 커스터마이징 했습니다.

지도에 적용한 모습을 보세요.

이동 및 확대/축소할 때마다 느려지는 걸 볼 수 있습니다. 이제 위의 코드 스니펫에서 “아이콘” 속성에 있는 마커의 래스터 이미지(이 경우 png)로 전환하여 간단하게 변경해보겠습니다.

이제 느려지지 않네요! 대부분의 경우 svg는 웹에서 더 나은 성능을 발휘하지만, 많은 수의 마커가 한꺼번에 렌더링되는 경우에는 마커를 래스터 이미지로 최적화하는 것이 좋습니다.

 

그 외 유용한 팁

위에서 설명드린 것 외에도 JavaScript API의 사용을 최적화하기 위해 수행해야할 작업은 훨씬 더 많습니다. 예를 들어 많은 마커를 지도에 표시하기 위해서는 마커 클러스터링이 필수인 것 처럼요.

Maps JavaScript API 대한 더욱 자세한 내용은 문서 비디오 참고하세요.

 

SPH는 CARTO, Google Maps, SuperMap 등 다양한 케이스에 적용될 수 있는 다채로운 제품군을 보유하고 있으며 고객의 사례에 꼭 맞는 무료 세미나 및 개별 컨설팅을 제공하고 있습니다. 각 케이스에 맞춰 더욱 자세한 이야기를 나누고 싶으시다면 여기에서 문의 주시길 바라며, SPH에서 발행하는 GIS/로케이션 인텔리전스 관련 최신 소식을 받아보고 싶으신 분들은 페이스북 페이지 또는 뉴스레터를 구독해 주시길 바랍니다. 감사합니다.