카카오 오픈채팅 Lite, 가상 스크롤과 Message Queue 도입으로 Lighthouse 점수 90점대 달성

카카오 오픈채팅 Lite는 높은 트래픽 환경에서 발생하는 렌더링 병목 현상을 해결하기 위해 프론트엔드 성능 최적화를 진행했다. 초기 Lighthouse 점수 70점대에서 시작해 90점대로 대폭 상승시켰다.

렌더링 구조 최적화

메시지가 수백, 수천 개 쌓이는 환경에서 DOM 노드 수를 줄이기 위해 **가상 스크롤(Virtual Scroll)**을 도입했다. 스크롤 시 빈번한 리렌더링을 억제하기 위해 React.memo를 함께 적용했으며, 메모리 사용량(a)을 줄이기 위해 비제어 컴포넌트 방식을 채택했다. 특히 iOS에서 인터랙션 블로킹이 심했던 문제를 해결하기 위해 button 태그를 span 태그로 교체하고 role="button"을 부여해 렌더링 시간을 1.5배 이상 단축했다.

이벤트 루프와 Message Queue 도입

서버에서 수신한 메시지를 즉시 렌더링하면 콜 스택이 점유되어 유저 인터랙션이 무시되는 현상이 발생했다. 이를 해결하기 위해 렌더 함수를 비동기 처리로 전환하고, 서버 수신 속도와 화면 렌더링 속도 차이를 해소하기 위해 Message Queue를 도입했다. 큐에 쌓인 메시지를 setInterval 주기에 따라 Batching 처리하여 한 번에 렌더링함으로써 콜 스택의 여유를 확보하고 불필요한 타이머 생성을 방지했다.

Zustand 상태 관리 개선

useBubbleAction 훅에서 전체 chatMap을 구독하던 방식에서 필요한 채팅방 데이터만 직접 가져오는 방식으로 변경해 리소스 소비를 크게 줄였다. 또한, 모든 말풍선 컴포넌트에서 호출되던 useModal 훅을 제거했다. useTranslation 대신 i18next의 t 함수를 직접 import하고, Zustand의 getState() 메서드를 활용해 상태 구독 없이 함수만 호출하도록 바닐라 유틸 함수로 전환했다. 이를 통해 말풍선 렌더링 시 불필요한 함수 생성과 훅 오버헤드를 제거했다.