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

## 📌 Brief Summary
Interaction to Next Paint (INP)는 2024년 3월에 기존의 First Input Delay (FID)를 대체하여 도입된 구글의 핵심 웹 바이탈(Core Web Vitals) 지표입니다 [1]. 이 지표는 전체 페이지 세션 동안 발생하는 사용자의 상호작용에 애플리케이션이 얼마나 빠르게 응답하는지를 측정하며, 권장되는 기준값(threshold)은 200밀리초(ms) 이하입니다 [1]. INP를 최적화하기 위해서는 메인 스레드가 긴급한 사용자 입력을 지연 없이 즉각적으로 처리할 수 있는 상태를 유지하는 것이 가장 중요합니다 [2].

## 📖 Core Content
- **INP의 정의 및 중요성:** INP는 페이지 내에서 사용자의 클릭, 타이핑 등 상호작용이 일어났을 때 화면에 다음 페인트(Next Paint)가 그려지기까지의 실질적인 반응성을 평가합니다 [1, 3]. 메인 스레드가 자바스크립트 처리 등으로 차단되어 있으면 응답성이 떨어져 INP 점수가 악화됩니다 [4].
- **React 환경에서의 INP 최적화 기법:**
  - **동시성 기능(Concurrent Features) 활용:** React 19의 `useTransition` 및 `useDeferredValue` 훅을 사용하면, 무거운 연산이나 긴급하지 않은 UI 업데이트를 지연시킬 수 있습니다 [2, 5]. 이를 통해 메인 스레드를 긴급한 사용자 상호작용에 우선 할당하여 INP 점수를 향상시킬 수 있습니다 [2].
  - **메모이제이션(Memoization):** 불필요한 리렌더링을 방지하는 메모이제이션은 INP 최적화에 직접 기여합니다 [1]. 특히 **React Compiler**를 통해 자동 메모이제이션을 적용한 실제 운영 환경(예: Wakelet)에서는 INP가 15%에서 최대 47%까지 대폭 개선된 사례가 보고되었습니다 [3, 6, 7].
  - **React Server Components (RSC):** 서버 컴포넌트를 도입하면 클라이언트로 전송되는 자바스크립트 번들 크기를 40~60%까지 줄일 수 있습니다 [4]. 브라우저 메인 스레드가 상호작용 시 처리해야 할 자바스크립트 양이 줄어들기 때문에 INP가 직접적으로 낮아지는 효과가 있습니다 [4].
  - 기타 최적화: 디바운싱(Debouncing) 처리나 긴 목록에 대한 가상화(Virtualization) 기법 또한 렌더링 부하를 줄여 INP를 낮추는 데 긍정적으로 작용합니다 [1].
- **성능 측정 도구:** INP 지표는 Lighthouse와 같은 랩(Lab) 데이터 도구뿐만 아니라, `web-vitals` 자바스크립트 라이브러리, 그리고 DebugBear 등의 Real User Monitoring(RUM) 도구를 통해 실제 사용자의 환경에서 지속적으로 모니터링할 수 있습니다 [8-10].

## 🔗 Knowledge Connections
- **Related Topics:** [[Core Web Vitals]], [[First Input Delay (FID)]], [[Concurrent Rendering]], [[React Compiler]], [[React Server Components]]
- **Projects/Contexts:** [[Wakelet (React Compiler 도입으로 INP 47% 개선 사례)]], [[DebugBear (INP 데이터를 모니터링하는 RUM 솔루션)]]
- **Contradictions/Notes:** 소스에 관련 정보가 부족한 모순점은 없습니다. 모든 소스가 공통적으로 INP를 향상시키기 위해 자바스크립트 실행을 줄이고 메인 스레드의 부하를 관리해야 한다고 주장합니다.

---
*Last updated: 2026-04-25*