---
id: PERF-CWV-INP-001
category: "10_Wiki/💡 Topics/AI"
confidence_score: 1.0
tags: [[Core-Web-Vitals|[Core-Web-Vitals]], inp, performance, responsiveness, interaction, main-thread, [[Frontend|Frontend]]-[[Optimization|Optimization]]]
last_reinforced: 2026-04-26
---

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

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

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

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

## 🔗 지식 연결 (Graph)
- [[Core-Web-Vitals-Metrics|Core-Web-Vitals-Metrics]], [[JavaScript-Optimization-Patterns|JavaScript-Optimization-Patterns]], [[Google-Page-Experience-2025-Update|Google-Page-Experience-2025-Update]], [[Frontend-Performance-Optimization-Guide|Frontend-Performance-Optimization-Guide]]
- **Raw Source:** 00_Raw/INP (Interaction to Next Paint).md, 00_Raw/[[Interaction to Next Paint (INP)|Interaction to Next Paint (INP)]].md
