2nd/10_Wiki/Topics/Frontend_Mastery/Interaction to Next Paint (INP).md

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