카카오, Angular 기반 챗봇 관리자센터 성능 최적화 사례 공개

카카오 FE 플랫폼 조직이 Angular/RxJS/TypeScript 기반의 '챗봇 관리자센터' 성능 최적화 사례를 공개했다. 자체 개발한 Lighthouse 기반 도구 '파루스(Pharus)'를 활용해 주요 페이지의 성능 점수를 85점 이상으로 끌어올리는 것을 목표로 했다.

CLS 레이아웃 이동 최소화 데이터 로드 완료 시점의 화면 갱신과 공통 컴포넌트의 비동기 클래스 적용으로 인한 레이아웃 이동(CLS) 문제를 해결하기 위해 Angular ResolverFn을 적용해 데이터 로드 후 렌더링하도록 조정했다. 또한 Renderer2와 ngAfterViewInit 훅을 활용해 DOM 업데이트 타이밍을 제어하고, BrowserAnimationModule로 인한 DOM 업데이트 순서 문제를 해결했다.

TBT 메인 스레드 부하 감소 차트 라이브러리 렌더링 등으로 인한 메인 스레드 부하를 줄이기 위해 Angular 17의 Deferrable Views(@defer)를 활용해 뷰포트 내 컴포넌트만 우선 로드하도록 변경했다. 이를 통해 차트 렌더링 관련 메서드 호출 횟수가 대폭 감소하고 TBT 수치가 약 150ms 감소했다. 또한 getComputedStyle 호출 등 리플로우를 유발하는 코드를 CSS 클래스 방식으로 변경하고, PreloadAllModules 전략 대신 ngx-quicklink를 적용해 불필요한 모듈 로딩을 방지했다.

최적화 결과 약 2개월간의 프로젝트를 통해 평균 성능 점수가 81점에서 91점으로 상승했다. 모든 페이지가 80점 이상을 기록했으며, 특히 시나리오 페이지는 69점에서 93점으로 24점 상승하는 등 큰 폭의 개선이 이루어졌다.