2nd/10_Wiki/Topics/Frontend/Core Web Vitals.md

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, tags, raw_sources, last_reinforced, github_commit, inferred_by, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	tags	raw_sources	last_reinforced	github_commit	inferred_by	tech_stack
wiki-2026-0508-core-web-vitals	Core Web Vitals	10_Wiki/Topics	needs_review	self		none	A	0.92	uncategorized		2026-05-08	pending	Claude Opus 4.7 (auto-normalize 2026-05-08)	language framework unspecified unspecified

Core Web Vitals

📌 한 줄 통찰 (The Karpathy Summary)

Core Web Vitals(코어 웹 바이탈)은 웹사이트의 실제 성능과 사용자 경험을 평가하는 필수 지표로, 로딩 속도, 레이아웃의 안정성, 사용자 입력에 대한 반응 속도를 측정합니다 [1]. 핵심 지표로는 LCP(Largest Contentful Paint), CLS(Cumulative Layout Shift), INP(Interaction to Next Paint)가 있으며, 이는 구글의 검색 순위(Ranking signal)와 모바일 우선 인덱싱에 직접적인 영향을 미칩니다 [2, 3].

📖 구조화된 지식 (Synthesized Content)

• 핵심 지표와 목표치: Core Web Vitals는 크게 세 가지 주요 지표로 구성됩니다. LCP(Largest Contentful Paint)는 주요 콘텐츠의 로딩 속도를 의미하며 2.5초 미만을 유지해야 하고, CLS(Cumulative Layout Shift)는 레이아웃의 시각적 안정성을 나타내며 0.1 미만이어야 하며, INP(Interaction to Next Paint)는 사용자의 입력에 대한 반응성을 측정하여 200밀리초 미만을 목표로 최적화해야 합니다 [4].
• CSS 및 반응형 디자인과의 연관성: 잘못된 이미지 크기 지정, 너비(width) 및 높이(height) 속성 누락, 최적화되지 않은 폰트 등은 모바일 환경에서 Core Web Vitals 점수 하락의 가장 흔한 원인이 됩니다 [2, 3]. 잘 구축된 반응형 레이아웃은 불필요한 레이아웃 이동(Layout shift)을 줄이고 로딩 시간을 개선하며 사용자 상호작용을 민첩하게 만듭니다 [1].
• 성능 최적화 기법: CLS를 방지하기 위해 컨테이너에 aspect-ratio 속성을 적용하거나 명시적인 너비와 높이를 지정해야 합니다 [5, 6]. LCP 향상을 위해서는 LCP 요소(주로 히어로 이미지)에 fetchpriority="high"를 설정하고 폴드(fold) 아래의 이미지는 지연 로딩(lazy-load) 처리하며, WebP나 AVIF 같은 압축률이 높은 차세대 포맷을 사용하는 방법이 있습니다 [5-7].
• SEO 및 비즈니스 영향: 구글은 페이지 경험 신호의 일부로 Core Web Vitals를 활용하므로, 로딩이 느리고 레이아웃 이동이 잦은 비반응형 웹사이트는 검색 결과에서 성능이 저하될 수 있습니다 [3, 4]. 따라서 이 지표들을 지속적으로 모니터링하고 최적화하는 것은 2026년 현재 반응형 웹 디자인의 핵심 요구 사항입니다 [4, 8].

🔗 지식 연결 (Graph)

• Related Topics: Responsive Web Design, CSS Performance Optimization
• Projects/Contexts: Search Engine [[Optimization (SEO)]]
• Contradictions/Notes: 소스 전반에 걸쳐 CSS 및 반응형 디자인의 최적화가 Core Web Vitals 지표 개선으로 직결된다고 강조하고 있으며, 소스 간 상충되는 의견은 존재하지 않습니다.

---

Last updated: 2026-04-26

🤖 LLM 활용 힌트 (How to Use This Knowledge)

언제 이 지식을 쓰는가:

• (TODO)

언제 쓰면 안 되는가:

• (TODO)

🧪 검증 상태 (Validation)

• 정보 상태: needs_review
• 출처 신뢰도: A
• 검토 이유: (P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)

🧬 중복 검사 (Duplicate Check)

• 기존 유사 문서: (TODO: 인덱서 클러스터 리포트 참조)
• 처리 방식: UPDATE (자동 정규화)
• 처리 이유: Phase 1 정규화 — 옛 템플릿/누락 필드 보강.

⚠️ 모순 및 업데이트 (Contradictions & Updates)

• 과거 데이터와의 충돌: 없음
• 정책 변화: 없음

🕓 변경 이력 (Changelog)

날짜	변경 내용	처리 방식	신뢰도
2026-05-08	P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화)	UPDATE	A

💻 코드 패턴 (Code Patterns)

패턴 1: (TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)

# TODO

🤔 의사결정 기준 (Decision Criteria)

선택 A를 써야 할 때:

• (TODO)

선택 B를 써야 할 때:

• (TODO)

기본값:

(TODO)

❌ 안티패턴 (Anti-Patterns)

• [안티패턴]: (TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)