정의
Core Web Vitals(코어 웹 바이탈) 는 구글이 공식적으로 정의한 사용자 경험 측정 지표 세트입니다. 단순히 "페이지가 빠르다"라는 모호한 표현이 아니라, 실제 사용자가 페이지를 열었을 때 얼마나 빨리 보이는지(LCP), 버튼을 눌렀을 때 얼마나 즉각 반응하는지(INP), 스크롤 중 레이아웃이 얼마나 흔들리는지(CLS) 를 수치로 계량화한 것입니다.
2021년부터 구글 검색 랭킹 알고리즘(Page Experience)에 공식 반영되었고, 2024년 3월부로 FID가 INP(Interaction to Next Paint) 로 교체되면서 지금의 3대 지표 체계가 완성되었습니다. DTC 브랜드 입장에서는 광고비를 태워 유입시킨 트래픽이 실제로 전환되는지를 좌우하는 핵심 변수입니다. 아무리 크리에이티브가 좋아도 상세페이지가 3초 넘게 멈춰 있으면 이탈률은 급격히 치솟습니다.
비유로 이해하기
코어 웹 바이탈을 오프라인 편집숍 경험에 빗대보겠습니다.
- LCP(Largest Contentful Paint) = 손님이 매장에 들어섰을 때, 메인 진열대의 히어로 상품이 눈에 들어오기까지 걸리는 시간. 2.5초 안에 안 보이면 손님은 "여기 뭐 파는 곳이야?" 하고 나갑니다.
- INP(Interaction to Next Paint) = 손님이 상품을 집어 드는 순간 직원이 얼마나 빠르게 반응하는지. 200ms 넘게 멈칫하면 손님은 불편함을 느낍니다.
- CLS(Cumulative Layout Shift) = 계산대로 걸어가는 동안 바닥 타일이 갑자기 움직이거나 진열대가 튀어나오는 상황. 결제 버튼을 누르려는데 그 순간 배너가 로드되면서 버튼이 밀려나면, 손님은 엉뚱한 걸 클릭하게 됩니다.
이 세 가지가 동시에 좋아야 "쾌적한 매장"입니다. 하나라도 나쁘면 전체 경험이 무너집니다.
공식 및 측정 기준
1. LCP (Largest Contentful Paint)
뷰포트 내 가장 큰 콘텐츠 요소(보통 히어로 이미지, 대형 텍스트 블록)가 렌더링 완료된 시점.
LCP = TTFB + 리소스 로드 지연 + 리소스 로드 시간 + 요소 렌더링 지연
| 등급 | 기준 |
|---|---|
| 좋음 | ≤ 2.5초 |
| 개선 필요 | 2.5초 ~ 4.0초 |
| 나쁨 | > 4.0초 |
2. INP (Interaction to Next Paint)
사용자 인터랙션(클릭, 탭, 키 입력)부터 다음 프레임이 화면에 그려질 때까지의 시간. 페이지 전체 인터랙션 중 가장 느린 값(98퍼센타일) 을 기준으로 합니다.
| 등급 | 기준 |
|---|---|
| 좋음 | ≤ 200ms |
| 개선 필요 | 200ms ~ 500ms |
| 나쁨 | > 500ms |
3. CLS (Cumulative Layout Shift)
예기치 않은 레이아웃 이동의 누적 점수. 사용자 입력 없이 발생한 이동만 집계합니다.
CLS = 영향받은 영역 비율(Impact Fraction) × 이동 거리 비율(Distance Fraction)
| 등급 | 기준 |
|---|---|
| 좋음 | ≤ 0.1 |
| 개선 필요 | 0.1 ~ 0.25 |
| 나쁨 | > 0.25 |
3대 지표 비교표
| 지표 | 측정 대상 | 좋음 기준 | DTC 주요 악화 원인 | 개선 우선순위 |
|---|---|---|---|---|
| **LCP** | 로딩 속도 | ≤ 2.5s | 최적화 안 된 히어로 이미지, 느린 서버 응답(TTFB), 렌더 블로킹 CSS/JS | 상세페이지 · 랜딩 최상단 |
| **INP** | 반응성 | ≤ 200ms | 과도한 서드파티 스크립트(픽셀, 채팅위젯), 무거운 JS 이벤트 핸들러 | 옵션 선택 · 장바구니 담기 |
| **CLS** | 시각적 안정성 | ≤ 0.1 | 이미지/광고 크기 미지정, 늦게 로드되는 폰트, 상단 배너 삽입 | 결제 버튼 · CTA 영역 |
DTC 실무 적용 시나리오
시나리오 1: 모바일 상세페이지 LCP 4.2초 → 2.1초 개선
국내 DTC 브랜드 A사는 히어로 이미지 3.8MB를 WebP로 변환하고, fetchpriority="high" 를 적용했습니다. LCP가 4.2초 → 2.1초 로 단축되었고, 동일 광고 세트에서 모바일 전환율이 1.8% → 2.7%(+50%) 로 상승했습니다. 같은 트래픽에 대해 매출이 50% 늘어난 셈입니다.
시나리오 2: INP 420ms → 180ms 개선
결제 페이지에 12개의 서드파티 스크립트(리타게팅 픽셀, 리뷰 위젯, 채팅)가 로드되어 INP가 420ms까지 치솟았습니다. GTM으로 지연 로딩을 적용해 420ms → 180ms 로 개선, 장바구니 이탈률이 68% → 54% 로 감소했습니다.
시나리오 3: CLS 0.31 → 0.04 개선
상단 프로모션 배너가 이미지 로드 후 삽입되면서 결제 버튼이 밀려나는 문제. 배너 영역에 min-height 를 지정하고 이미지에 width/height 속성을 명시해 CLS 0.31 → 0.04 로 개선, 결제 완료율이 12%p 상승했습니다.
**핵심 포인트**: 코어 웹 바이탈은 SEO 지표가 아니라 **전환율 지표**입니다. 구글 랭킹 상승은 보너스이고, 진짜 목적은 **광고비 효율(ROAS) 개선**입니다.
자주 하는 오해
❌ 오해 1: "데스크톱 점수만 보면 된다"
국내 DTC 커머스 트래픽의 70~85%가 모바일입니다. PageSpeed Insights에서 반드시 모바일 탭을 기준으로 진단하세요. 데스크톱 90점, 모바일 35점인 케이스가 흔합니다.
❌ 오해 2: "Lighthouse 점수 100점 = 코어 웹 바이탈 통과"
Lighthouse는 실험실 데이터(Lab Data) 입니다. 실제 사용자 데이터(CrUX, 필드 데이터)와 다릅니다. 구글 랭킹은 필드 데이터 기준이므로, Search Console의 코어 웹 바이탈 보고서를 반드시 확인해야 합니다.
❌ 오해 3: "이미지만 압축하면 끝"
LCP 개선의 절반은 TTFB(서버 응답 속도) 입니다. CDN 미적용, 느린 호스팅, 캐시 미설정 상태에서 이미지만 줄여봐야 한계가 명확합니다. TTFB를 800ms 이하로 먼저 잡으세요.
❌ 오해 4: "CLS는 0으로 만들면 된다"
완벽한 0은 현실적으로 어렵고, 0.1 이하면 충분히 "좋음" 등급입니다. 사용자 입력에 의한 레이아웃 변화(예: 아코디언 열기)는 CLS에 포함되지 않으니, 불필요한 최적화에 리소스를 낭비하지 마세요.
❌ 오해 5: "한 번 개선하면 영구적이다"
신규 프로모션 배너, 리뷰 위젯, 새 픽셀 추가 시마다 지표는 다시 나빠집니다. 월 1회 모니터링을 루틴으로 잡으세요.
관련 용어
- TTFB (Time to First Byte): 서버가 첫 바이트를 응답하기까지의 시간. LCP의 선행 지표.
- FCP (First Contentful Paint): 첫 콘텐츠가 그려지는 시점. LCP보다 앞선 단계.
- TBT (Total Blocking Time): 메인 스레드가 차단된 총 시간. INP의 실험실 대리 지표.
- CrUX (Chrome User Experience Report): 실제 크롬 사용자로부터 수집된 필드 데이터. 구글 랭킹의 실제 기준.
- Page Experience: 코어 웹 바이탈 + 모바일 친화성 + HTTPS + 광고 안정성을 묶은 구글 랭킹 신호.
- RAIL 모델: Response, Animation, Idle, Load — 사용자 중심 성능 설계 프레임워크.
- Lazy Loading: 뷰포트 밖 리소스를 지연 로드해 초기 LCP를 개선하는 기법.
정리: 코어 웹 바이탈은 "구글 눈치"가 아니라 "고객 지갑" 을 향한 최적화입니다. LCP 2.5초, INP 200ms, CLS 0.1 — 이 세 숫자를 KPI로 삼아 상세페이지·장바구니·결제 퍼널을 점검하세요. 광고비를 2배로 늘리는 것보다, 이 세 지표를 통과시키는 것이 ROAS를 2배로 만드는 더 빠른 길입니다.