웹 구글 지도 마커 렌더링 최적화

이슈 발췌일: 2022.03.11, 14, 15 (조사 및 구현)

문제 상황

마커 5000 ~ 7000개 정도를 표출하는 구글 지도를 사용하는 페이지에서 아래와 같은 이슈가 발생하고 있었다.

• 화면 초기 렌더링이 5~6초 정도로 지연됨
• 지도 확대/축소 시 지연 시간 발생, 확대/축소를 짧은 시간 내에 여러 번 실행 시 페이지가 먹통이 되는 현상도 발생함

---

해결 방법 조사

1. 서버에서 직접 클러스터링 처리
   • 이동/확대/축소 시 현재 viewport에 포함되는 마커, 클러스터 정보를 서버로부터 받아서 표시한다.
   • 직방 사이트가 이와 같은 방식으로 마커를 표시하고 있었다.
   • 클러스터링 기준을 직접 설정하여 표출 할 수 있다는 장점이 있다. 
   • 맵 라이브러리가 제공하는 클러스터링 기능보다 빠른지는? 잘 모른다.
2. 클라이언트 단에서 보이는 부분만 마커를 표시하도록 처리
   • 이동/확대/축소 시 현재 viewport에 포함되는 좌표의 마커, 클러스터만 표시하도록 한다.
   • 클러스터링은 구글 맵 라이브러리가 알아서 처리해준다.
3. 최상단에서는 행정구역 별로 개수만 보여주고 행정구역 클릭 시 해당 행정구역을 줌인한 지도 영역 안에 있는 마커만 보여주도록 함 (기획자님께서 주신 의견)
   • 해당 방법은 1, 2번과 다르게 엔지니어링 측면에서만의 방법이 아닌 기획적인 솔루션도 함께 들어가 있다고 볼 수 있다. 시간이 충분했다면 해당 방법을 적용했어도 좋았을 것이라 생각이든다.

1번, 3번 방법은 당장 적용하기 어려운 해결방법이라고 판단하여 2번 방법을 적용해보기로 하였다.

---

구현 내용

• Zoom Level이 7(minZoomLevel)인 경우 모든 마커를 표시
• Zoom Level이 8 이상인 경우 현재 Viewport 영역 안에 있는 마커만 표시
  • 참고자료 - https://stackoverflow.com/questions/9094916/calculate-number-of-markers-in-visible-area-of-google-maps

•  

• 지도 확대/축소/이동 시 마커가 렌더링 되는 시간 동안 로딩 뷰를 보여줌
  • 마커가 모두 렌더링 되기 전에 사용자가 인터렉션을 하면 지도가 제대로 동작하지 않음. 따라서 로딩 뷰를 보여주고 사용자의 인터렉션을 막아야함.
    • 예시 - 직방 지도에서 확대 축소 이동 시 로딩 화면이 뜸

---

구현 중 발생한 이슈

• Event Listener 함수 안에서 변경된 React State 값을 사용할 수 없는 문제
  • 아마 등록되는 당시의 값을 계속 바라보고 있는 것 같다. 후에 State 값이 바뀌어도 함수에서 사용하는 값은 바뀌지 않는 듯?