제휴점 목록/지도 통합기: 26배 폭증한 비용부터 아키텍처 최적화까지
프론트엔드
제휴점 목록/지도 통합기: 26배 폭증한 비용부터 아키텍처 최적화까지
두줄요약
목록과 지도를 하나의 화면으로 통합하며 비용 폭증과 구조 비대화 문제를 함께 다뤘습니다. Lazy Load, StateHolder, 거리 기반 클러스터링, 커스텀 바텀시트로 개선했습니다.
문제 상황
- 목록 화면과 지도 화면 분리로 탐색 흐름 단절
- 통합 과정에서 지도 SDK 호출량 급증에 따른 비용 폭등 우려
- 하나의 ViewModel 비대화와 마커 중첩, 바텀시트 상태 제약 발생
해결 방법
- 지도는 필요 시점에만 로드하는 Lazy Load 전략 적용
- StateHolder 패턴으로 지도, 목록, 네비게이션 상태 분리
- Haversine 기반 거리 클러스터링과 선필터링으로 중복 마커 개선
- AnchoredDraggable와 NestedScroll로 4상태 비모달 바텀시트 직접 구현
성능/운영 포인트
- MapView 글로벌 공유 대신 화면 단위 생성 원칙 유지
- 목록 뷰 전환 시 핀 API 호출 차단으로 서버 비용 절감
- 리컴포지션 범위 축소로 불필요한 UI 갱신 완화
- 삼각함수 연산 전 좌표 차이 필터로 메인 스레드 부담 감소