기술 공유 지도 성능 최적화

12월 2일 기술 공유 발표를 진행한 자료에, 내용을 추가하였습니다.

문제 상황

배달의 민족 앱의 포장 UI를 참고하여, 지도 위에 식당 이미지를 마커로 전부 띄웠습니다. 이 때, 모든 식당에 대해 마커를 생성하다보니 성능 저하가 심각했기에, 성능 최적화가 필요했습니다.

1차 개선 방안

다양한 성능 최적화 방법 중, Windowing 기법을 참고하였습니다.

Windowing 기법이란?

• 가상화 리스트
• 거대한 list data를 렌더링할 때, 사용자에게 실제로 보이지 않는 컴포넌트는 렌더링 하지 않고, 스크롤이 일어나면 브라우저 viewport 안에 보이는 컴포넌트만 렌더링하여 보여주는 방식
• infinite scoll 구현시 유용
• 구현을 위한 라이브러리 존재(react-window, react-virtualized)

Windowing 기법, 가상화 목록은 리스트를 대상으로 하기 때문에 해결해야하는 상황과는 차이가 있지만, 이 원리가 도움이 될 것이라고 판단하였습니다.
따라서 화면 상에 보이지 않는 영역에 있는 마커는 오버레이가 삭제되도록 하는 코드를 추가적으로 작성했습니다.

결과적으로 이전보다는 성능 개선이 되었으나, 마커 자체는 남아있어서 아직도 성능이 좋지 않았습니다.
-> 작업내용이 담긴 커밋

2차 개선 방안

배달의 민족 어플의 지도 화면의 경우, 화면 이동 시마다 로딩 스피너가 돈다는 점을 참고해 다음과 같은 방안을 생각해보았습니다.

• 현재: 식당 정보에 대한 마커 인스턴스를 전부 만든 후, 화면에 보이는지 여부에 따라 show/hide 처리
• 하지만, 마커 자체를 미리 생성해 놓는게 부담일 수 있다.
• 개선 방안: react-query를 이용해 식당 정보 캐싱 후, 지도 드래그 시 캐싱한 식당 데이터를 가져와 해당 영역에 대한 마커를 아예 새롭게 그리는 식으로 변경
  1. 식당 정보를 캐싱
  2. 현재 보이는 화면에 대해서만 마커 생성
  3. 보이지 않는 영역에 대해서는 마커를 아예 삭제
  4. 화면 이동 시, 캐싱한 데이터를 기반으로 마커 재생성 그러나, 마커 객체를 매번 다시 생성하고, 렌더링하는 것은 여전히 큰 소요였을 뿐만 아니라 줌 레벨이 낮아졌을 경우 화면에 생성되는 마커가 여전히 많을 것이기 때문에, 이 방법은 해결책이 아니라고 판단했습니다.

3차 개선 방안

• 지도 위에 렌더링되는 요소(마커)가 너무 많아 성능 저하가 심한데, 이러한 문제를 어떻게 해결하면 좋을지에 대해 멘토님께 조언을 구했습니다. 멘토님은 화면에 띄우는 요소 자체를 줄이면 간단히 해결된다는 답변을 주셨습니다.
• 따라서, 마커 개수를 줄이기 위한 마커 클러스터링을 진행했습니다.
• 클러스터링 결과 성능 지표가 확연히 개선된 것을 확인할 수 있었습니다.

4차 개선 방안

• 추가적으로 성능을 개선하기 위해, 마커 이미지에 대한 gzip 압축을 진행했습니다.
• 압축 결과, ~ 했습니다.