Rendering Performance · 2024.10 ~ 2025.02
DMAP 지도 썸네일 최적화
“구글 지도 18개를 동시에 띄우면 어떤 일이 벌어질까?”
DMAP 프로필 페이지의 3×3 지도 썸네일 그리드를 구현하며 WebGL 크래시, Google Maps API 과금, 렌더링 성능 저하를 해결한 프로젝트입니다.
역할
프로필 기능 전담, 렌더링 최적화 및 지도 구조 개선 주도
팀
FE 2명, BE 2명
기여
기여도 90%
0건
렌더링 실패
$0
월 API 비용
18개
지도 썸네일
01 · Problem
문제
프로필 페이지에서 지도 썸네일을 많이 보여주려면 한 화면에 최대 18개의 Google Maps 인스턴스가 필요했습니다. 벡터 지도는 WebGL 컨텍스트를 사용했고, 브라우저 한계에 닿으면 지도 일부가 사라졌습니다.
02 · Role
역할
프로필 기능 전담, 렌더링 최적화 및 지도 구조 개선 주도 · FE 2명, BE 2명 · 기여도 90%
ReactJavaScriptGoogle Maps APIStatic Maps APIReact Portal
03 · Approach
해결 과정
- 1 WebGL 컨텍스트 해제, key 기반 리렌더링, 스켈레톤, 캡처, 인스턴스 재사용 등 6가지 방식을 실험하며 실패 원인을 좁혔습니다.
- 2 최종적으로 목록에서는 정적 지도 이미지를 사용하고, 상세 확인이 필요한 순간에만 전역 동적 지도 1개를 재사용했습니다.
- 3 Google Maps 과금 구조를 확인하고 알림을 설정해 기술 해결이 운영 비용 절감으로 이어지도록 마무리했습니다.
04 · Results
성과
지도 타입
벡터 WebGL 지도→ 정적 + 전역 동적 1개
메모리 사용량 감소
렌더링 성능
크래시 발생→ 렌더링 실패 0건
안정성 확보
API 비용
월 $70 과금→ $0
비용 100% 감소
로딩 속도
18개 동적 지도→ 이미지 + 지도 1개
사용자 경험 개선
05 · Takeaway
배운 점
렌더링 최적화는 빠르게 만드는 것만이 아니라 브라우저 자원, 외부 API 비용, 사용자 흐름을 함께 설계하는 일이라는 점을 배웠습니다.
다음 프로젝트