카카오, 주문하기 FE 성능 개선기: 이미지 지연 로드와 Windowing으로 점수 20점에서 90점 달성

카카오 FE 플랫폼 팀은 내부 성능 측정 도구 Pharus를 활용해 배달 서비스 '주문하기'의 성능 점수를 90점 이상으로 끌어올리는 프로젝트를 진행했다. 초기 주문하기 홈의 성능 점수는 최악의 경우 20점에 불과했으며, 이는 첫 페이지 로딩 시 모든 매장 정보를 한 번에 불러와 DOM 크기가 과도하게 커지고 JSON 응답이 1MB에 육박했기 때문이다.

이미지 지연 로드 구현

기존의 loading=lazy 속성은 Safari나 구버전 Android WebView에서 정상 동작하지 않는 문제가 있었다. 이를 해결하기 위해 IntersectionObserver와 폴리필을 활용한 커스텀 지연 로딩 컴포넌트 LazyImage를 개발했다. ObserverManager 클래스를 React Context로 제공해 단일 인스턴스로 효율적으로 관리했으며, 이를 적용하자 성능 점수가 43점으로 상승하고 TBT(Total Blocking Time)는 6050ms에서 3080ms로 절반가량 감소했다.

Windowing 기법 적용

이미지 지연 로드만으로는 큰 DOM 크기를 줄이는 데 한계가 있었다. 메뉴가 많은 매장의 경우 DOM 요소가 6358개에 달했으며, 카테고리 클릭 시 즉시 이동해야 하는 UX 특성상 페이지네이션 적용이 어려웠다. 이에 따라 화면에 보이는 부분만 렌더링하고 나머지는 가상화하는 Windowing 기법을 직접 구현했다.

WindowedList와 Probe 컴포넌트를 통해 리스트를 청크 단위로 나누고 가시성을 감지했다. 리스트 요소 높이가 동적인 주문하기 홈의 특성을 반영해 개별 높이를 배열로 관리하는 방식으로 스크롤 떨림 문제를 해결했다. 이 결과 초기 렌더링 DOM 개수를 약 6000개에서 500개로 줄였고, TBT는 560ms까지 감소했으며 성능 점수는 85점까지 올랐다. 이후 패키지 최적화 등 기타 개선을 통해 최종적으로 목표 점수인 90점을 달성했다.