--- id: PERF-CWV-INP-001 category: "10_Wiki/πŸ’‘ Topics/AI" 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