안심쉼터
기후 위기 대피소 탐색 서비스. 바텀시트 렌더링 성능을 Chrome Performance Trace로 정량 진단하고, RunTask −42.75%·Layout −70.28%를 달성했습니다.
주요 기여
바텀시트의 렌더링 jank를 감이 아닌 Chrome Performance Trace 수치로 진단해, RunTask −42.75%·Layout −70.28%를 달성했습니다.
대피소 목록 바텀시트를 열고 닫을 때 UI Jank가 발생했습니다. items.map(...)으로 전체를 한 번에 렌더링하는 구조에서 초기 DOM 마운트가 급증하고, 복잡한 cubic-bezier + 400ms 애니메이션이 프레임 드랍을 일으켰습니다.
감각이 아닌 Performance Trace 수치로 병목을 진단하고, 렌더링과 애니메이션 양쪽을 최적화하는 것.
Chrome DevTools Performance 탭으로 바텀시트 3회 연속 열기/닫기 시나리오를 6회 프로파일링. 렌더링은 IntersectionObserver 기반 가상화(초기 10개 + 스크롤 시 20개 단위 지연 로드)를 도입. 애니메이션은 transform-only(Composite 레이어 활용) + linear easing + 100ms duration으로 전환했습니다.
렌더링 병목이 코드 복잡도가 아니라 브라우저의 Layout-Paint-Composite 파이프라인에 있다는 것을 증명하고, 최적화 효과를 정량적으로 검증해야 했습니다.
transform-only 애니메이션으로 Layout 무효화를 회피하고 GPU 합성 레이어를 활용. IntersectionObserver로 보이지 않는 영역의 렌더링을 제거. 중앙값 기준 정량 측정으로 최적화 효과를 검증했습니다.
'보이지 않는 영역은 렌더링하지 않는다'는 가상화 원칙이 실제 사용자 경험에서 얼마나 큰 차이를 만드는지 체감했습니다. Performance Trace 수치로 검증하는 습관이 최적화의 방향을 논리적으로 잡아준다는 걸 배웠습니다.