suhotang
suhotang 개발 블로그
suhotang
전체 방문자
오늘
어제
  • 분류 전체보기 (9)
    • 이슈 로그 (5)
    • 프로젝트 (2)
    • React (0)
    • 과제 (2)

인기 글

태그

  • 디스크 분석
  • z-index
  • 어쩌다보니 비건
  • CSS
  • react
  • 구글맵
  • c programming
  • 이슈 해결
  • 지도최적화
  • 캐싱
  • 시스템 프로그래밍
  • 이슈 로그
  • 중복 호출 방지
  • 커널 오브젝트
  • 프로세스
  • 패키지 버전
  • 쓰레드
  • 회고록
  • 포렌식
  • 이슈로그
  • 렌더링
  • 프로젝트

최근 글

hELLO · Designed By 정상우.
suhotang
이슈 로그

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

이슈 로그

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

2022. 11. 2. 00:26

이슈 발췌일: 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 값이 바뀌어도 함수에서 사용하는 값은 바뀌지 않는 듯?
저작자표시 (새창열림)

'이슈 로그' 카테고리의 다른 글

package 버전 문제 (lock 파일의 중요성)  (0) 2022.12.28
[React] Input Focusing이 없어지는 현상  (1) 2022.11.08
[React] useMemo를 사용한 캐싱으로 중복 호출 방지하기  (0) 2022.10.24
z-index가 동작하지 않는 이유, 같은 위계에서 비교하기  (0) 2022.06.11
  • 문제 상황
  • 해결 방법 조사
  • 구현 내용
  • 구현 중 발생한 이슈
'이슈 로그' 카테고리의 다른 글
  • package 버전 문제 (lock 파일의 중요성)
  • [React] Input Focusing이 없어지는 현상
  • [React] useMemo를 사용한 캐싱으로 중복 호출 방지하기
  • z-index가 동작하지 않는 이유, 같은 위계에서 비교하기
suhotang
suhotang
개인 공부정리용 블로그

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.