2nd/00_Raw/INP (Interaction to Next Paint).md

# [[INP (Interaction to Next Paint)]]

## 📌 Brief Summary
INP(Interaction to Next Paint)는 사용자가 웹페이지와 처음 상호작용(클릭, 탭, 키보드 입력 등)한 시점부터 브라우저가 시각적인 반응(다음 프레임)을 화면에 표시할 때까지 걸리는 전체 상호작용 지연 시간을 측정하는 Core Web Vitals 지표입니다 [1, 2]. 2024~2025년을 기점으로 기존의 FID(First Input Delay)를 공식적으로 대체하였으며, 첫 입력 지연만 측정하던 FID와 달리 입력 지연(Input Delay), 처리 시간(Processing Time), 표시 지연(Presentation Delay)을 모두 포괄하여 측정하므로 실제 사용자 경험을 더 정확하게 반영합니다 [3-7]. 

## 📖 Core Content
**INP의 중요성 및 비즈니스 영향**
INP는 Google의 검색 순위 알고리즘(Page Experience)에 직접적인 영향을 미치는 핵심 성과 지표입니다 [4, 8, 9]. INP 기준을 충족하지 못해 사이트 상호작용이 지연될 경우 사용자 참여도가 23% 감소하며 검색 크롤링 우선순위와 검색 순위가 하락하게 됩니다 [8, 10]. FID가 INP로 교체됨에 따라, 2025년 웹 성능 최적화에서는 페이지 내의 모든 버튼, 스크롤, 탭 상호작용의 응답성을 개선하는 것이 필수적이 되었습니다 [11].

**평가 기준 (Thresholds)**
Google은 INP 성능을 평가하는 구체적인 임계값을 제공합니다.
*   **Good (우수):** 200ms 이하 (일부 기준에서는 150ms 미만을 요구하기도 함) [5, 6, 11, 12].
*   **Needs Improvement (개선 필요):** 200ms ~ 500ms 사이 [6, 13].
*   **Poor (불량):** 500ms 초과 [5, 6].

**INP 저하의 주요 원인**
INP 점수가 나빠지는 주된 이유는 브라우저의 메인 스레드(Main thread)를 차단하는 요소들 때문입니다.
*   **긴 JavaScript 작업:** 메인 스레드를 50ms 이상 차단하는 무거운 동기식 처리나 복잡한 계산 [7, 14].
*   **과도한 스크립트 실행:** 최적화되지 않은 타사(Third-party) 스크립트 실행이나 거대한 JavaScript 번들, 부족한 코드 분할(Code splitting) [7, 14, 15].
*   **무거운 애니메이션:** 레이아웃이나 페인트를 트리거하는 과도한 CSS 애니메이션 연산 [7, 14].

**INP 최적화 전략**
웹 애플리케이션의 INP를 향상시키려면 다음과 같은 기술적 최적화가 필요합니다.
*   **작업 청크 분할:** `setTimeout` 등을 사용하여 50ms 미만의 청크로 긴 작업을 쪼개어 브라우저가 다른 렌더링 작업을 수행할 수 있도록 제어권을 양보(Yield)해야 합니다 [1, 5, 16, 17].
*   **Web Workers 도입:** 무거운 CPU 연산을 메인 스레드에서 분리하여 백그라운드(Web Worker)에서 처리하게 합니다 [1, 18].
*   **스크립트 지연 및 최소화:** 렌더링에 필수적이지 않은 타사 스크립트 로딩을 지연(defer)시키고 코드 분할(Code splitting)과 지연 로딩(Lazy loading)을 적용합니다 [1, 19, 20].
*   **이벤트 핸들러 최적화:** Debounce 및 Throttle 기법을 적용하여 이벤트 실행 빈도를 제어합니다 [1, 21].
*   **비핵심 작업 후순위 처리:** `requestIdleCallback`을 사용하여 중요하지 않은 작업은 브라우저 유휴 시간에 처리합니다 [22, 23].
*   **애니메이션 최적화:** 애니메이션 실행 시 브라우저 레이아웃을 다시 계산하지 않도록 GPU 가속을 활용하는 `transform` 및 `opacity` 속성만 사용합니다 [24, 25].

**측정 및 모니터링 도구**
INP를 비롯한 Core Web Vitals를 테스트하고 모니터링하기 위해 Google PageSpeed Insights(빠른 진단), Lighthouse(긴 JS 작업 등 기술적 디버깅에 유용), Google Search Console(실제 사용자 데이터 기반의 사이트 전체 성능 확인) 등의 도구가 권장됩니다 [9, 26-28].

## 🔗 Knowledge Connections
- **Related Topics:** [[Core Web Vitals]], [[FID (First Input Delay)]], [[LCP (Largest Contentful Paint)]], [[CLS (Cumulative Layout Shift)]], [[JavaScript Optimization]]
- **Projects/Contexts:** [[Google Page Experience 2025 Update]], [[Technical SEO]], [[Web Performance Optimization]]
- **Contradictions/Notes:** 2025년 기준 '우수한(Good)' INP 임계값에 대하여 소스 간 약간의 수치 차이가 존재합니다. 소스 [12]는 150ms 미만을 최적 기준으로 제시한 반면, 소스 [11], [5], [6], [29]에서는 200ms 이하를 우수한 기준으로 명시하고 있습니다.

---
*Last updated: 2026-04-26*