--- id: P-REINFORCE-AI-045 category: "10_Wiki/πŸ’‘ Topics/Design & Web Performance" confidence_score: 0.98 tags: [web, performance, web vitals, user experience] last_reinforced: 2026-06-XX github_commit: "[P-Reinforce] Processed Core_Web_Vitals.md" --- # [[Core Web Vitals|Core Web Vitals]] (핡심 μ›Ή μ§€ν‘œ) ## πŸ“Œ ν•œ 쀄 톡찰 (The Karpathy Summary) > ꡬ글이 μ œμ‹œν•˜λŠ” μ‚¬μš©μž κ²½ν—˜ μ€‘μ‹¬μ˜ 핡심 μΈ‘μ • κΈ°μ€€λ“€λ‘œ, λ‹¨μˆœν•œ 기술 μŠ€νŽ™μ„ λ„˜μ–΄ μ‹€μ œ μ‚¬μš©μžκ°€ μ²΄κ°ν•˜λŠ” νŽ˜μ΄μ§€ λ‘œλ”© 속도와 μΈν„°λž™μ…˜ ν’ˆμ§ˆμ„ μ’…ν•©μ μœΌλ‘œ ν‰κ°€ν•œλ‹€. ## πŸ“– κ΅¬μ‘°ν™”λœ 지식 (Synthesized Content) - **κ°œλ…:** μ›Ήμ‚¬μ΄νŠΈμ˜ μ„±λŠ₯을 ν‰κ°€ν•˜λŠ” κ°€μž₯ μ€‘μš”ν•œ μ„Έ κ°€μ§€ μ§€ν‘œλ₯Ό ν†΅μΉ­ν•˜λ©°, μ‚¬μš©μž κ²½ν—˜(UX)κ³Ό μ§μ ‘μ μœΌλ‘œ μ—°κ²°λœλ‹€λŠ” 것이 핡심이닀. - **μ„ΈλΆ€ ꡬ성 μš”μ†Œ:** 1. **LCP (Largest Contentful Paint):** μ‚¬μš©μžκ°€ νŽ˜μ΄μ§€μ—μ„œ κ°€μž₯ 큰 μ½˜ν…μΈ κ°€ λ‘œλ“œλ˜λŠ” μ‹œμ μ˜ μ‹œκ°„ μΈ‘μ •. (인지적 λ§Œμ‘±λ„μ™€ 직결). 2. **FID (First Input Delay) / INP (Interaction to Next Paint):** μ‚¬μš©μžμ˜ 첫 번째 μž…λ ₯(클릭, ν„°μΉ˜ λ“±)을 μ‹œμŠ€ν…œμ΄ μΈμ§€ν•˜κ³  λ°˜μ‘ν•˜λŠ” 데 κ±Έλ¦¬λŠ” μ§€μ—° μ‹œκ°„ μΈ‘μ •. (λ°˜μ‘μ„± 평가). *μ΅œκ·Όμ—λŠ” FID λŒ€μ‹  INPκ°€ ν‘œμ€€ν™”λ˜λŠ” μΆ”μ„Έ.* 3. **CLS (Cumulative Layout Shift):** μ½˜ν…μΈ κ°€ λ‘œλ“œλ˜κ±°λ‚˜ 변경될 λ•Œ λ ˆμ΄μ•„μ›ƒμ΄ μ–Όλ§ˆλ‚˜ λΆˆμ•ˆμ •ν•˜κ²Œ ν”λ“€λ¦¬λŠ”μ§€λ₯Ό μΈ‘μ •. (μ‹œκ°μ  μ•ˆμ •μ„± 평가). - **기술적 μ€‘μš”μ„±:** 이 μ§€ν‘œλ“€μ€ λ‹¨μˆœνžˆ Lighthouse 점수 λͺ‡ 점을 λ„˜κΈ°λŠ” 것을 λ„˜μ–΄, μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ μ•„ν‚€ν…μ²˜(Code Splitting, Lazy Loading) 섀계와 직접 μ—°κ΄€λ˜μ–΄ μ΅œμ ν™”κ°€ μš”κ΅¬λœλ‹€. ## ⚠️ λͺ¨μˆœ 및 μ—…λ°μ΄νŠΈ (Contradictions & RL Update) - **κ³Όκ±° λ°μ΄ν„°μ™€μ˜ 좩돌:** κ³Όκ±°μ—λŠ” λ‹¨μˆœνžˆ λ‘œλ”© λ°” μ†λ„λ§Œ μ€‘μš”ν•˜κ²Œ μ—¬κ²ΌμœΌλ‚˜, μ΄μ œλŠ” LCP/FID/CLSλ₯Ό 톡해 'μ‚¬μš©μžκ°€ μ²΄κ°ν•˜λŠ” κ²½ν—˜'μ΄λΌλŠ” κ΄€μ μœΌλ‘œ νŒ¨λŸ¬λ‹€μž„μ΄ μ™„μ „νžˆ μ „ν™˜λ˜μ—ˆλ‹€. - **μ •μ±… λ³€ν™”:** 기술적 κ°œμ„ (예: WebGPU λ„μž…)λ§ŒνΌμ΄λ‚˜ μ‚¬μš©μžμ—κ²Œ 이 μ„±λŠ₯ ν–₯상을 μ–΄λ–»κ²Œ μΈμ§€μ‹œν‚€κ³  κ°€μΉ˜λ₯Ό 전달할 것인지(UX μΈ‘λ©΄)κ°€ μ€‘μš”ν•΄μ§€κ³  μžˆλ‹€. ## πŸ”— 지식 μ—°κ²° (Graph) - Parent: [[Web Performance Optimization|Web Performance Optimization]] - Related: [[Largest Contentful Paint (LCP)|Largest Contentful Paint (LCP)]] , [[Interaction to Next Paint (INP)|Interaction to Next Paint (INP)]] , [[Cumulative Layout Shift (CLS)|Cumulative Layout Shift (CLS)]] - Raw Source: 00_Raw/Core_Web_Vitals.md ---