2nd/10_Wiki/Topics/Interaction-to-Next-Paint-INP.md

---

id: PERF-CWV-INP-001 category: Unified confidence_score: 1.0 tags: Core-Web-Vitals, inp, performance, responsiveness, interaction, main-thread, Frontend-Optimization] last_reinforced: 2026-04-26

Interaction to Next Paint: INP (상호작용 다음 페인트까지의 지연 시간)

📌 한 줄 통찰 (The Karpathy Summary)

"단 한 번의 빠른 반응이 아니라, 사용자가 페이지를 떠날 때까지 수행하는 모든 상호작용의 지연을 감시하고, 0.2초 이내의 즉각적인 응답성을 일관되게 보장하라" — FID를 대체하여 웹사이트의 전체적인 반응성을 측정하는 2024년 이후 Core Web Vitals의 핵심 지표.

📖 구조화된 지식 (Synthesized Content)

• 추출된 패턴: "Continuous Responsiveness and Task Yielding" — 긴 작업을 작게 쪼개어 브라우저가 사용자 입력과 렌더링 업데이트 사이에 숨 쉴 틈(Yield)을 주는 패턴.
• INP의 핵심 메커니즘:
  • Input Delay: 사용자 입력 후 이벤트 핸들러가 실행되기 전까지의 대기 시간 (주로 메인 스레드 점유로 발생).
  • Processing Time: 이벤트 핸들러 자체의 실행 시간.
  • Presentation Delay: 이벤트 처리 후 실제 화면에 변경 사항이 그려지기까지의 시간.
• 주요 최적화 전략:
  • Breaking Up Long Tasks: 50ms 이상의 무거운 동기 작업을 scheduler.yield()나 setTimeout으로 분할.
  • Web Workers: 복잡한 연산을 메인 스레드 밖으로 오프로드.
  • Optimization of Third-party Scripts: 상호작용을 저해하는 광고/분석 스크립트의 실행 지연.
  • Event Debouncing/Throttling: 잦은 이벤트 발생을 제한하여 렌더링 부하 감소.
• 의의: 사용자의 입력에 즉각적으로 반응하는 웹사이트를 통해 심리적 마찰을 줄이고 비즈니스 전환율을 높임.

⚠️ 모순 및 업데이트 (Contradictions & RL Update)

• 과거 데이터와의 충돌: 과거 FID는 첫 번째 상호작용의 지연만 측정했으나, INP 정책은 '전체 세션 중 가장 긴 지연 시간'을 측정 정책으로 삼아 훨씬 엄격한 최적화를 요구함.
• 정책 변화: Antigravity 프로젝트는 모든 동적 리스트 렌더링 시 가상화(Virtualization) 적용을 의무화하며, 100ms 이상의 메인 스레드 차단 작업 발생 시 빌드 경고 정책을 시행함.

🔗 지식 연결 (Graph)

• Core-Web-Vitals-Metrics, JavaScript-Optimization-Patterns, Google-Page-Experience-2025-Update, Frontend-Performance-Optimization-Guide
• Raw Source: 00_Raw/INP (Interaction to Next Paint).md, 00_Raw/Interaction to Next Paint (INP).md