AI 채팅 UI의 점진적 렌더링이 LCP를 왜곡하는 구조적 원인 분석

요약

네이버 통합검색팀이 AIB(AI Briefing) 채팅 UI 도입 후 발생한 LCP 악화를 추적, 서버 응답이 아니라 클라이언트 렌더링 구조 — 어절 단위 스트리밍 + 하이라이트용 DOM 재구성 — 가 LCP 측정 시점을 뒤로 미는 구조적 원인임을 식별. 채팅 UI에는 LCP 대신 TTFT(Time to First Token)를 별도 지표로 도입 검토.

내용

AIB는 2025년 3월 정적 요약 형태로 시작 → 2025년 7월 채팅 UI 기반 텍스트 애니메이션 인터페이스로 확장. 현재 네이버 통합검색의 LCP 후보 영역 중 AIB 비중이 약 10%, 트래픽 비중도 상승 중.

목표 지표인 LCP p95 ≤ 2.5초 대비 현재 측정값은 약 3.1초. AIB 노출량(QC) 증가 추이와 LCP p95 악화 추이가 거의 같은 곡선을 그림. 분포로 보면 Good 구간(LCP < 2.5초) 비율이 줄고 tail로 무게가 이동.

같은 기간 구글 검색도 AI Overview 도입 후 유사한 악화를 보이지만 양상 차이가 있음 — 구글은 큰 텍스트 블록 단위 렌더링·블록 단위 애니메이션, 네이버 AIB는 어절 단위 점진 렌더링·적극적 노출 애니메이션. 렌더링 단위와 애니메이션 적용 방식이 LCP 측정에 미치는 영향이 다름.

해결 / 접근

서버 vs 클라이언트 분리 측정

• 도입 전후 서버 응답·초기 콘텐츠 전달 구간 차이 없음 → 네트워크·서버는 원인 아님
• 클라이언트에서 약 900ms 스켈레톤 UI + 텍스트 애니메이션 발생, 최종 렌더링 시점이 뒤로 밀림
• AIB 영역이 LCP인 경우 p75 4,573ms / p95 6,921ms, 지도 영역이 LCP인 경우 p75 1,270ms / p95 3,369ms — AIB가 지도보다 p75 기준 3.3초 이상 느림

구조적 원인 1 — 하이라이트용 DOM 재구성

• PC 환경에서 각주 마우스 오버 시 텍스트를 하이라이트하는 인터랙션을 구현하기 위해, 텍스트 애니메이션 종료 후 AIB 영역 DOM을 한 번 더 재구성
• 이 재구성 시점이 LCP renderTime으로 측정 → 사용자가 콘텐츠를 인지한 시점과 무관하게 LCP가 뒤로 밀림
• PC·모바일 공통 렌더링 로직을 공유해 모바일에서도 동일한 지연 발생

구조적 원인 2 — 어절 단위 LCP 후보 분산

• 텍스트가 어절 단위로 쪼개져 DOM에 들어가면 어절 각각이 LCP 후보가 됨
• 사용자가 인지하는 "하나의 큰 응답"이 LCP로 대표되지 못하고, 면적이 가장 큰 어절이나 다른 UI 요소가 선택되는 경우 발생
• 하이라이트 로직을 제거해도 렌더링 단위 자체에서 비롯되는 한계

구조적 원인 3 — Chromium paint invalidation

• LCP 후보가 속한 레이어에 paint invalidation이 발생하면 레이어 재페인트, 그 시점에 renderTime 갱신
• 채팅 UI처럼 텍스트 줄이 순차 추가되는 구조에서는 같은 레이어가 반복 재페인트, 초기에 그려진 큰 텍스트 블록도 "다시 그려진 요소"로 인식되어 renderTime이 프레임 단위로 뒤로 이동
• 채팅 UI 같은 스트리밍·점진적 렌더링 UI가 LCP 설계 가정과 맞지 않아 발생하는 구조적 한계

개선 방향

• AIB 영역에 TTFT(Time to First Token) 별도 핵심 지표 도입 검토
• UI 패턴별 측정 기준 분리 — LCP는 정적 콘텐츠에 유효, 채팅 UI에는 부적합
• LCP Good 구간(< 2.5초) 합격/불합격 기준에서 더 세분화된 분포 분석으로 전환

결과 / 참고

• AIB 제외 시 LCP Good 비율 약 96% — 통합검색 기본 성능은 안정적, 악화 요인은 AIB 채팅 UI 구조에 국한
• AIB 영역 LCP p75 4,573ms vs 지도 영역 p75 1,270ms (3.3초 차이)
• 구글 AI Overview는 텍스트 블록 단위 렌더링이라 네이버(어절 단위) 대비 영향 적음
• 참고 자료: Chromium BlinkNG / PrePaint 문서, Web Performance 2025: The Shift from Optimization to Prediction