--- id: wiki-2026-0508-first-input-delay-fid title: First Input Delay (FID) category: 10_Wiki/Topics status: needs_review canonical_id: self aliases: [P-Reinforce-AUTO-DD1BE6] duplicate_of: none source_trust_level: A confidence_score: 0.9 tags: [auto-reinforced] raw_sources: [] last_reinforced: 2026-04-20 github_commit: "[P-Reinforce] Continuous Worker - First Input Delay (FID)" inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08) tech_stack: language: unspecified framework: unspecified --- # [[First Input Delay (FID)|First Input Delay (FID)]] ## πŸ“Œ ν•œ 쀄 톡찰 (The Karpathy Summary) > First Input Delay(FID)λŠ” μ‚¬μš©μžκ°€ μ›ΉνŽ˜μ΄μ§€μ—μ„œ 첫 μƒν˜Έμž‘μš©μ„ μ‹œλ„ν•  λ•Œ, λΈŒλΌμš°μ €κ°€ ν•΄λ‹Ή 이벀트λ₯Ό μ²˜λ¦¬ν•˜κΈ° μ‹œμž‘ν•  λ•ŒκΉŒμ§€ κ±Έλ¦¬λŠ” μ§€μ—° μ‹œκ°„μ„ μΈ‘μ •ν•˜λŠ” μ§€ν‘œμ΄λ‹€ [1]. 이 μ§€ν‘œλŠ” 이벀트 ν•Έλ“€λŸ¬κ°€ μ‹œμž‘λ˜κΈ° μ „κΉŒμ§€μ˜ μ§€μ—° μ‹œκ°„λ§Œμ„ μΈ‘μ •ν•˜λ©°, μ΄ν›„μ˜ λ Œλ”λ§ μ§€μ—°μ΄λ‚˜ 후속 μƒν˜Έμž‘μš©μ€ κ³ λ €ν•˜μ§€ μ•ŠλŠ” ν•œκ³„κ°€ μžˆμ—ˆλ‹€ [2]. μ΄λŸ¬ν•œ 단점을 λ³΄μ™„ν•˜κΈ° μœ„ν•΄ 2024λ…„ ꡬ글(Google)은 μ½”μ–΄ μ›Ή λ°”μ΄νƒˆ([[Core Web Vitals|Core Web Vitals]])의 곡식 μƒν˜Έμž‘μš© μΈ‘μ • μ§€ν‘œλ₯Ό FIDμ—μ„œ [[Interaction to Next Paint (INP)|Interaction to Next Paint (INP)]]둜 μ „λ©΄ λŒ€μ²΄ν•˜μ˜€λ‹€ [3, 4]. ## πŸ“– κ΅¬μ‘°ν™”λœ 지식 (Synthesized Content) - **FID의 λ°œμƒ 원인:** μ‚¬μš©μžκ°€ μ›ΉνŽ˜μ΄μ§€κ°€ μ€€λΉ„λ˜μ—ˆλ‹€κ³  μƒκ°ν•˜μ—¬ 클릭 λ“±μ˜ 이벀트λ₯Ό λ°œμƒμ‹œμΌ°μ„ λ•Œ, λΈŒλΌμš°μ €κ°€ μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό λ‹€μš΄λ‘œλ“œν•˜κ±°λ‚˜ νŒŒμ‹± 및 μ‹€ν–‰ν•˜λŠλΌ λ°±κ·ΈλΌμš΄λ“œ μž‘μ—…μ΄ λ°”μœ μƒνƒœλΌλ©΄ μž…λ ₯ 지연이 λ°œμƒν•˜κ²Œ 되며 FIDλŠ” λ°”λ‘œ 이 μ‹œκ°„μ„ μΈ‘μ •ν•œλ‹€ [1]. - **μΈ‘μ • λ°©μ‹μ˜ ν•œκ³„:** FIDλŠ” νŽ˜μ΄μ§€ λ°©λ¬Έ 쀑 λ°œμƒν•˜λŠ” μ—¬λŸ¬ μƒν˜Έμž‘μš© μ€‘μ—μ„œ 였직 '첫 번째 μƒν˜Έμž‘μš©(first interaction)'의 μ§€μ—° μ‹œκ°„λ§Œμ„ μΈ‘μ •ν•œλ‹€ [2]. 이벀트 ν•Έλ“€λŸ¬κ°€ μ‹œμž‘λ˜κΈ° μ§μ „κΉŒμ§€μ˜ λŒ€κΈ° μ‹œκ°„λ§Œμ„ ν‰κ°€ν•˜κΈ° λ•Œλ¬Έμ—, μ‹€μ œ μ΄λ²€νŠΈκ°€ μ²˜λ¦¬λ˜λŠ” μ‹œκ°„([[Processing|Processing]] time)μ΄λ‚˜ 화면에 κ²°κ³Όλ₯Ό λ Œλ”λ§ν•˜λŠ” 데 κ±Έλ¦¬λŠ” ν”„λ ˆμ  ν…Œμ΄μ…˜ μ§€μ—°(presentation delay)을 λ¬΄μ‹œν•œλ‹€λŠ” λͺ…ν™•ν•œ ν•œκ³„κ°€ μ‘΄μž¬ν–ˆλ‹€ [2, 5]. - **타 μ§€ν‘œμ™€μ˜ μ—°κ΄€μ„±:** 크둬 λΌμ΄νŠΈν•˜μš°μŠ€([[Chrome|Chrome]] [[Lighthouse|Lighthouse]]) λ“±μ—μ„œ μΈ‘μ •ν•˜λŠ” [[Time to Interactive (TTI)|Time to Interactive (TTI)]] μ§€ν‘œλŠ” νŽ˜μ΄μ§€κ°€ μ™„μ „νžˆ μƒν˜Έμž‘μš© κ°€λŠ₯ν•΄μ§ˆ λ•ŒκΉŒμ§€μ˜ μ‹œκ°„μ„ λœ»ν•˜λŠ”λ°, 이 TTIλŠ” First Input Delay (FID)뿐만 μ•„λ‹ˆλΌ [[Largest Contentful Paint (LCP)|Largest Contentful Paint (LCP)]]와 같은 μš”μ†Œλ₯Ό ν¬ν•¨ν•˜μ—¬ μ‚°μΆœλœλ‹€ [6, 7]. - **INP(Interaction to Next Paint)둜의 μ§„ν™”:** 첫 μƒν˜Έμž‘μš©λ§Œμ„ μΈ‘μ •ν•˜λ˜ FID λ°©μ‹μœΌλ‘œλŠ” μ‚¬μš©μž κ²½ν—˜(UX)을 μ™„λ²½ν•˜κ²Œ λ°˜μ˜ν•˜κΈ° μ–΄λ €μ› λ‹€ [5]. 이에 ꡬ글은 2024년에 FIDλ₯Ό νκΈ°ν•˜κ³ , νŽ˜μ΄μ§€μ— λ¨Έλ¬΄λŠ” λ™μ•ˆ λ°œμƒν•˜λŠ” λͺ¨λ“  μƒν˜Έμž‘μš©(클릭, νƒ­, ν‚€λ³΄λ“œ μž…λ ₯ λ“±)의 전체 μ§€μ—° μ‹œκ°„μ„ μ’…ν•©μ μœΌλ‘œ ν‰κ°€ν•˜λŠ” INP μ§€ν‘œλ₯Ό μ½”μ–΄ μ›Ή λ°”μ΄νƒˆμ— μƒˆλ‘­κ²Œ λ„μž…ν•˜μ˜€λ‹€ [2, 3, 5]. ## ⚠️ λͺ¨μˆœ 및 μ—…λ°μ΄νŠΈ (Contradictions & Updates) - **κ³Όκ±° λ°μ΄ν„°μ™€μ˜ 좩돌:** μžλ™ν™” 엔진에 μ˜ν•΄ λ§€ν•‘λœ μ§€μ‹μœΌλ‘œ, μΆ”ν›„ μ •λ°€ 검증 ν•„μš”. - **μ •μ±… λ³€ν™”:** AI λΆ„μ•Όμ˜ μžλ™ μžμ‚°ν™” μˆ˜ν–‰. ## πŸ”— 지식 μ—°κ²° (Graph) - **Related Topics:** [[Interaction to Next Paint (INP)|Interaction to Next Paint (INP)]], [[Core Web Vitals|Core Web Vitals]], [[Time to Interactive (TTI)|Time to Interactive (TTI)]] - **Projects/Contexts:** Google Page Experience, Chrome User Experience Report ([[CrUX|CrUX]]) - **Contradictions/Notes:** ν•œλ•Œ ꡬ글 μ½”μ–΄ μ›Ή λ°”μ΄νƒˆμ˜ 핡심 λ°˜μ‘μ„± μ§€ν‘œλ‘œ μ‚¬μš©λ˜μ—ˆμœΌλ‚˜, 단일 μƒν˜Έμž‘μš©λ§Œ μΈ‘μ •ν•˜λŠ” 결함이 μΈμ •λ˜μ–΄ 2024년을 기점으둜 곡식 μ§€ν‘œμ˜ μ§€μœ„λ₯Ό μžƒκ³  INP둜 μ™„μ „νžˆ λŒ€μ²΄λ˜μ—ˆλ‹€ [3, 4]. --- *Last updated: 2026-04-19* --- ## πŸ€– LLM ν™œμš© 힌트 (How to Use This Knowledge) **μ–Έμ œ 이 지식을 μ“°λŠ”κ°€:** - *(TODO)* **μ–Έμ œ μ“°λ©΄ μ•ˆ λ˜λŠ”κ°€:** - *(TODO)* ## πŸ§ͺ 검증 μƒνƒœ (Validation) - **정보 μƒνƒœ:** needs_review - **좜처 신뒰도:** A - **κ²€ν†  이유:** *(P-Reinforce Phase 1 μžλ™ μ •κ·œν™”. λ³Έλ¬Έ 검증 ν•„μš”.)* ## 🧬 쀑볡 검사 (Duplicate Check) - **κΈ°μ‘΄ μœ μ‚¬ λ¬Έμ„œ:** *(TODO: μΈλ±μ„œ ν΄λŸ¬μŠ€ν„° 리포트 μ°Έμ‘°)* - **처리 방식:** UPDATE (μžλ™ μ •κ·œν™”) - **처리 이유:** Phase 1 μ •κ·œν™” β€” μ˜› ν…œν”Œλ¦Ώ/λˆ„λ½ ν•„λ“œ 보강. ## πŸ•“ λ³€κ²½ 이λ ₯ (Changelog) | λ‚ μ§œ | λ³€κ²½ λ‚΄μš© | 처리 방식 | 신뒰도 | |------|-----------|-----------|--------| | 2026-05-08 | P-Reinforce Phase 1 μ •κ·œν™” (frontmatter + 헀더 ν‘œμ€€ν™”) | UPDATE | A | ## πŸ’» μ½”λ“œ νŒ¨ν„΄ (Code Patterns) **νŒ¨ν„΄ 1:** *(TODO: 이 ν”„λ‘œμ νŠΈ μ»¨λ²€μ…˜ λ°˜μ˜ν•œ ꡬ쑰 μŠ€μΌˆλ ˆν†€)* ```text # TODO ``` ## πŸ€” μ˜μ‚¬κ²°μ • κΈ°μ€€ (Decision Criteria) **선택 Aλ₯Ό 써야 ν•  λ•Œ:** - *(TODO)* **선택 Bλ₯Ό 써야 ν•  λ•Œ:** - *(TODO)* **κΈ°λ³Έκ°’:** > *(TODO)* ## ❌ μ•ˆν‹°νŒ¨ν„΄ (Anti-Patterns) - **[μ•ˆν‹°νŒ¨ν„΄]:** *(TODO: 무엇을 ν•˜λ©΄ μ•ˆ λ˜λŠ”κ°€ + 이유 + λŒ€μ‹  무엇을)*