DevLog

엔지니어링 블로그를 한 곳에서 탐색하고, 최근 발행 흐름을 빠르게 파악할 수 있는 서비스 입니다.

Quick Links

  • Latest Feed
  • Engineering Directory

Support

  • 소개
  • 개인정보처리방침

Contribute

  • 원하는 블로그 추가 (준비 중)
  • Feedback

© 2026 DevLog Inc. All rights reserved.

본 사이트는 공개 RSS 피드를 통해 콘텐츠를 수집하며, 모든 콘텐츠의 저작권은 원저작자에게 있습니다.

Back to Feed
Read Original

Contents

Continue Reading

  • More from NAVER D2
#Frontend

네이버 통합검색 AIB 도입과 웹 성능 변화 분석

네이버 통합검색 AIB 도입과 웹 성능 변화 분석
01

Summary

네이버 검색이 AI를 만났을 때 성능 지표가 춤추는 이유: LCP의 배신

스트리밍 렌더링과 채팅 UI가 현대 웹 성능 측정 지표를 무력화하는 기술적 메커니즘 심층 분석

네이버 통합검색의 핵심으로 자리 잡은 AI 브리핑(AIB) 서비스가 성능 지표인 LCP에 미치는 영향을 데이터 중심으로 분석한 아티클입니다. 단순한 최적화를 넘어 브라우저 렌더링 엔진의 동작 방식과 스트리밍 UI가 어떻게 지표 왜곡을 일으키는지 파헤칩니다. 실무 관점에서 기존 Core Web Vitals의 한계를 극복하고 TTFT와 같은 대안 지표를 어떻게 적용할지에 대한 시니어 엔지니어의 통찰을 담고 있습니다.

  • 01AIB 노출량 증가에 따른 LCP p95 지표의 실시간 상관관계 데이터 공개
  • 02채팅 UI의 텍스트 애니메이션이 LCP renderTime을 프레임 단위로 밀어내는 구조적 원인 규명
  • 03Chromium 렌더링 파이프라인의 Paint Invalidation 특성과 스트리밍 UI 간의 상충 관계 분석
  • 04어절 단위 점진적 렌더링이 LCP 후보군 선택에 미치는 부정적 영향 확인
  • 05사용자 인지 시점을 정확히 반영하기 위한 Time to First Token(TTFT) 도입 전략 제시

+RECOMMENDATION

스트리밍 응답이나 대화형 UI를 구축 중인 프론트엔드 개발자라면 LCP 수치에 일희일비하기보다 TTFT와 같은 체감 지표를 우선 고려하세요. 브라우저가 언제 레이어를 다시 그리는지에 대한 이해가 성능 관리의 핵심입니다.

The Problem

네이버 통합검색에 AI 브리핑(AIB) 기능을 도입한 이후, LCP p95 지표가 목표치인 2.5초를 상회하는 3.1초 수준으로 악화되는 현상이 관찰되었습니다. 이는 단순히 서버 응답 속도의 문제가 아니라, 스트리밍 방식의 채팅 UI와 텍스트 애니메이션, 그리고 사후 DOM 재구성 로직이 Chromium의 렌더링 측정 방식과 충돌하며 발생한 구조적 지연으로 분석되었습니다.

The Solution

AIB 영역의 LCP 지연 원인을 파악하기 위해 서버와 클라이언트 구간을 분리 분석하였으며, 특히 하이라이트 인터랙션을 위한 DOM 재정렬과 Chromium의 레이어 페인트 무효화(Paint Invalidation) 특성을 규명했습니다. 이를 해결하기 위해 기존 LCP 지표의 한계를 인정하고, 채팅 UI의 체감 성능을 더 잘 반영하는 TTFT(Time to First Token) 지표의 도입과 성능 측정 체계의 다변화를 제안했습니다.

The Result

AIB 영역을 제외한 나머지 검색 영역의 LCP Good 비율은 96%로 안정적임을 확인하여 성능 저하의 원인을 특정 UI 패턴으로 국한했습니다. 결과적으로 지표의 왜곡을 인지하고 사용자 경험에 기반한 새로운 성능 지표(TTFT) 관리 체계를 수립함으로써, 기술적 성과와 실제 사용자 만족도 사이의 간극을 줄이는 전략적 기반을 마련했습니다.

Trade-off

DOM 재구성 로직을 최적화하더라도 Chromium 엔진이 스트리밍 레이어를 지속적으로 다시 그리는 물리적 특성상 LCP 지표의 완전한 정상화는 어렵습니다. 따라서 통합된 하나의 지표(LCP)로 관리하던 편의성을 일부 포기하고, UI 성격에 따라 개별 지표를 병행 관리해야 하는 운영상의 복잡도가 수반될 것으로 예상됩니다.

03

Key Concepts

Concept · 01

LCP (Largest Contentful Paint)

웹 페이지 로딩 중 뷰포트에서 가장 큰 시각적 요소가 렌더링되는 시점을 측정하는 사용자 중심 성능 지표입니다.

  • AIB 영역이 검색 결과의 약 10%를 차지하며 핵심 LCP 후보로 부상함
  • 스트리밍 텍스트의 누적 렌더링으로 인해 최종 측정 시점이 실제 시작 시점보다 크게 지연됨
Concept · 02

Paint Invalidation

브라우저 레이어의 내용이 변경될 때 해당 영역을 무효화하고 다시 페인트하도록 지시하는 Chromium 렌더링 엔진의 핵심 동작입니다.

  • 텍스트 한 글자가 추가될 때마다 전체 텍스트 레이어가 다시 페인트되며 LCP 시간을 갱신함
  • 스트리밍 UI 환경에서 LCP 지표가 비정상적으로 늦게 측정되는 결정적 기술 원인임
Concept · 03

TTFT (Time to First Token)

LLM이나 스트리밍 서버로부터 첫 번째 데이터 조각이 전달되어 사용자에게 노출되기까지의 시간을 의미합니다.

  • 답변이 모두 끝날 때 측정되는 LCP의 한계를 보완하여 채팅 UI의 즉각성을 평가하는 지표로 활용됨
  • 사용자의 대기 시간을 설명하는 데 있어 LCP보다 더 높은 연관성을 가짐
Continue reading · same source

NAVER D2More from NAVER D2

View all posts from NAVER D2
  • [AI 해커톤 후기] AI 시대의 해커톤과 인간의 역할: AI의 계획과 사람의 전략

    LLMFastAPIOCR
    19시간 전
  • FE News 26년 7월 소식을 전해드립니다.

    TypeScriptReactAIAgents
    5일 전
  • FE News 26년 7월 소식을 전해드립니다.

    TypeScriptReactAI Agent
    5일 전
  • [AI 해커톤 후기] 코드와 문서만 읽은 LLM은 어떻게 사람과 같은 팀을 1위로 골랐을까

    LLM as a JudgeCodexAutomated Grading
    1주 전
  • AI 에이전트 회사 차리기: 설립부터 어디서든 동기화까지

    AI AgentOrchestrationSynchronization
    1주 전

Source

NAVER D2
NAVER D2
Engineering Blog

Published · January 19, 2026

Topics

LCPWeb VitalsChromiumStreaming UIPerformance Optimization