Google maps 최적화 작업

문제

지도 기반 탐방로 하이브이드앱 웹뷰 개발 과정 중 다음과 같은 문제들이 발생하였다. 

 

1. 지도 초기 렌더링이 너무 느림

• 초기 렌더링 속도는 사용자가 체감이 될 정도의 느린 속도임
• 실제 렌더링 시간 1700ms (1.7초)

2. 지도 이동 시 버벅거리는 현상이 자주 발생함 (지도 렉)

• 개발자도구의 performance를 보면 장기 작업 이슈가 발생
• 지도에서 홀링 후 이동할 때 버벅거림이 존재한다. (랜더링 이슈)

 

 

문제 분석

1. 지도 초기 렌더링이 너무 느림

2. 지도 이동 시 버벅거리는 현상이 자주 발생함 (지도 렉)

 

위 두 문제가 발생하였는다.

 

1. 우선 첫 번째 문제는 구글 자체에서 제공하는 polyline 등의 용량이 크고 받아오기까지 시간이 오래 걸리게 된다. 따라서 런타임에서 성능 개선하는 것의 한계를 느꼈다. 물론 찾아보면 방법이 있겠지만 빠른 시간 안에 눈에 보이는 UX를 개선해야 하는 나로서는 다른 방법이 필요했다. 

 

2. 두 번째 문제는 카카오 지도와 비교하는 과정에서 해결의 단서를 얻을 수 있었다. 카카오 지도 같은 경우는 지도를 홀딩해서 이동/축소/확대를 할 때 변화하는 부분은 보이지 않고, 마우스 홀딩을 멈춘 후 (ex_지도를 이동한 후) 새로운 영역의 지도와 지도요소들을 받아오는 형식이었다. 하지만 내가 사용한 google maps api의 경우는 viewport영역 밖의 요소는 실제로 존재하지만 인라인 스타일을 이용해 포지션을 조정하고 z-index로 화면에 보이는 현상을 감췄다.

 

요약하자면 실제로 마커가 100개 있으면, 지도상의 viewport영역에 보이지 않는 마커도 지도의 이동/확대/축소에 따라 인라인 스타일의 변경이 계산되고 있었다. 그러므로 이 부분에서 지도의 버벅거림 현상에 어느정도 관여했다고 생각했다.

→ 실제로 개발자도구 performance를 분석한 결과 장기 작업 이슈문제가 발생하고 있었다. 

 

 

---

 

첫번째 문제 해결과정

우선 눈에 보이는 UX를 개선하기 위해서 고민한 끝에 결정한 방법은 "작업 소요시간이 큰 지도 초기 렌더링 과정을 분배하자"였다.

기존 지도페이지에서 구글맵을 불러와서 큰 소요시간이 걸리고 좋지 않은 UX를 제공했다. 따라서 초기 렌더링을 Splash 단계에서 실행하고, 백그라운드에서 지도를 숨긴 후 지도에 들어갈 때마다 지도를 보여주는 형식으로 사용자 경험을 개선하는 방법을 선택했다. 

→ 이를 통해 지도 페이지에 접속 시 빠른 렌더링으로 사용자 경험을 개선할 수 있었고, 지도도 다른 페이지에 접속했을 시 백그라운드 기능들이 모두 동작하여야 하기 때문에 Splash단계에서 지도를 렌더링해도 성능상 문제가 없다고 생각했다.

 

하지만, 이것은 어디까지나 더 나은 UX를 제공하기 위한 임시방편일 뿐 실제로 성능이 개선된 점은 없다. 실제로 성능을 개선하기 위해서 또 다른 방법들을 찾아 추후 포스팅 하겠다. 

 

 

 

두 번째 문제 해결과정

앞서 말했듯, 지도 viewport영역에 없는 마커들의 스타일 계산과정에서 지도 홀딩 시 버벅거림 현상이 존재한다고 생각했다. 따라서 viewport영역에 존재하는 마커들만 지도 이동/확대/축소 후 지도 요소에 추가하고 viewport영역 밖에 있는 마커들은 지도 위의 요소에서 제거하는 형식으로 구현한다면 지도 버벅거림 현상을 해결할 수 있을 거라고 생각했다.

 

 

기존에는 마커를 생성하고 지도위에 띄우는 것에 그쳤는데, 함수를 통해 마커를 생성하고 그 후 markers라는 배열에 마커를 푸쉬한다. 

function createAndAddMarker(
  position: position,
  map: google.maps.Map,
  url: any
) {
  const marker = new google.maps.Marker({
    position,
    map,
    icon: url,
    size: 2,
  });

  return marker;
}

기존에는 마커를 생성하고 지도위에 띄우는 것에 그쳤는데, 함수를 통해 마커를 생성하고 그 후 markers라는 배열에 마커를 푸쉬한다.

 

 

“idle” 이벤트를 활용해서 지도의 이동/확대/축소를 감지한다.

viewport 영역에 속한 마커만 map에 보여주고 아니면 숨기게 처리한다.

google.maps.event.addListener(map.value, "idle", () => {
      const bounds = map.value.getBounds();

      markers.forEach(function (marker) {
        // 마커의 위치가 현재 viewport에 속하는지 확인
        if (bounds.contains(marker.getPosition())) {
          // 속한다면 마커를 보이게 처리
          marker.setMap(map.value);
        } else {
          marker.setMap(null);
        }
      });
    });

이렇게 코드를 수정하여 자도의 버벅거림 현상을 개선할 수 있게 되었다. 

 

 

---

정리

• 첫 번째 문제는 Spalsh단계에서 지도를 렌더링 하고 지도화면에 들어갔을 때 기존에 렌더링 한 지도를 보여줌으로써 사용자 경험을 개선할 수 있었다.
• 두 번째 문제는 viewport영역에 존재하는 마커만 지도의 요소로 추가하고 viewport영역에서 벗어난 마커는 지도 요소에서 제거함으로써 문제를 해결할 수 있었다. 

 

 

배운 점

• 성능 최적화를 제대로 한 경험은 처음이었는데, 생각보다 사소하게 생각했던 요소에서 성능에 큰 영향을 줄 수 있다는 사실을 알게 되었다.
• 구글이라는 대기업에서 제공하는 api라고 해서 항상 완벽한 것은 아니다. 내가 개발하는 서비스의 기획에 맞게 효율적으로 사용하고 개선하고자 하는 마인드가 중요한 거 같다.