TMap은 Vector Map SDK, Raster Map SDK 두 가지 버전의 지도를 제공합니다.

지금은 Raster Map을 사용하고 있는데, 렌더링 속도가 느리다는 피드백이 있어 성능 측정을 해 봅니다.

Vector vs. Raster

Vector Map

서버에서 검색한 지도 데이터를 클라이언트로 전송하고 공간 데이터를 사용해 지도를 직접 그리는 방식

스크린샷 2023-12-13 14.56.59.png

스크린샷 2023-12-13 14.57.16.png

벡터 방식은 서버에서 지도 데이터를 벡터 형식으로 클라이언트에게 전송만 하면 된다.

서버 부하가 상대적으로 덜함.

Raster Map

서버에서 검색한 지도 데이터를 이미지로 변환하여 클라이언트에게 제공

스크린샷 2023-12-13 14.48.36.png

네트워크 탭을 살펴보았을 때 png 이미지 응답받는 것을 알 수 있음

래스터 방식은 서버에서 클라이언트에게 출력할 최종 지도 화면을 이미지로 만드는 모든 처리를 해야 하기 때문에 서버 부하가 상대적으로 더 함.

보여 줘야 하는 지도의 범위가 늘어날수록 서버 처리 시간이 길어짐.

참고: 모바일 지도 서비스에서 벡터와 래스터 기법의 비교 평가

지도 페이지 초기 렌더링

속도: Raster > Vector 1초 (2.4배) 빠름

유휴 상태: Raster > Vector 89배 많이 차지

Vector Map

스크린샷 2023-12-13 15.04.07.png

지도 초기 렌더링까지 걸리는 시간: 약 1.7s

Untitled

유휴상태: 1%

Raster Map

스크린샷 2023-12-13 15.02.22.png

지도 초기 렌더링까지 걸리는 시간: 약 0.7s

스크린샷 2023-12-13 15.05.08.png

유휴상태: 89%

전체 지도 확인

속도: Raster > Vector 1.7초 (1.8배) 빠름

유휴 상태: Raster > Vector 2.7배 차지

Vector Map

Untitled

3.8s 소요

화면 기록 2023-12-13 15.21.40.mov

줌 자체 속도는 비교적 느리나, 지도가 보이면서 줌 변경됨

유휴 상태 34%

Raster Map

Untitled

2.1s 소요

화면 기록 2023-12-13 15.23.20.mov

줌 자체 속도는 빠르나, 지도가 사용자 눈에 보이지 않음 → 줌 변경 → 지도 렌더링됨

유휴 상태가 작업의 95%를 차지

가까운 마커 클릭

Vector Map

Raster Map

스크린샷 2023-12-13 11.41.34.png

상호 작용~지도 렌더링까지 걸리는 시간에 유휴 상태가 차지하는 비율: 23%

스크린샷 2023-12-13 11.46.41.png

스크린샷 2023-12-13 11.46.22.png

상호 작용~지도 렌더링까지 걸리는 시간에 유휴 상태가 차지하는 비율: 84%

먼 마커 클릭

Vector Map

스크린샷 2023-12-13 11.51.05.png

상호 작용~지도 렌더링까지 걸리는 시간에 유휴 상태가 차지하는 비율: 48%

Raster Map

스크린샷 2023-12-13 11.49.02.png

스크린샷 2023-12-13 14.41.16.png

상호 작용~지도 렌더링까지 걸리는 시간에 유휴 상태가 차지하는 비율: 85%

Vector vs. Raster 요약