core web vitals : 웹 성능과 사용자 경험의 핵심 지표 이해하기
MIZZU
1. 글의 목적
웹사이트의 성능과 사용자 경험(UX)은 현대 웹 개발에서 가장 중요한 요소 중 하나다. Google은 이를 정량적으로 측정하기 위해 Core Web Vitals라는 핵심 지표를 도입했으며, 웹사이트의 로딩 속도, 상호작용성, 시각적 안정성을 평가하여 실제 검색 순위에도 반영하고 있다.
Google Search Console을 이용해보면 '코어 웹 바이탈'을 언급한다. 대충 준수하거나 개선하면 좋은 지표라고만 생각해왔는데, 그 항목들에는 무엇이 있는지 자세히 알고 싶어졌다. 따라서 이 글에서는 Core Web Vitals의 핵심 지표 3가지 LCP(Largest Contentful Paint), INP(Interaction to Next Paint), CLS(Cumulative Layout Shift)를 중심으로 알아보고, 각 지표를 개선하는 구체적인 방법까지 제시하려 한다.
2. Core Web Vitals의 3가지 핵심 지표
2-1. LCP(Largest Contentful Paint) : 가장 큰 콘텐츠의 로딩 시간
LCP는 사용자가 페이지를 처음 방문했을 때 표시 영역에 나타나는 가장 큰 이미지, 텍스트 블록 또는 동영상이 완전히 렌더링되는 시간을 측정한다. Google은 LCP가 2.5초 이내에 완료되도록 권고한다. 이는 페이지 로딩 성능을 평가하는 중요한 기준이다. 웹페이지 뷰포트 안에서 가장 큰 덩어리 콘텐츠 하나를 그리는 것은 단순히 이미지 한 장을 빨리 로딩시키는 것의 문제가 아니라 그 한 장을 로딩하기 위한 모든 과정의 성능 문제를 해결해야만 LCP가 좋아질 수 있다.
2-1-1. 개선 방법
서버 응답 시간(TTFB) 최적화: 서버 응답 속도를 높이기 위해 캐싱을 활용하거나 CDN(Content Delivery Network)을 사용한다.
렌더링 차단 리소스 제거: CSS 및 JavaScript를 비동기적으로 로드하거나 필요한 경우에만 로드하도록 설정한다.
이미지 최적화: 이미지 크기를 조정하고 WebP와 같은 최신 포맷을 사용하여 파일 크기를 줄인다.
트리쉐이킹(Tree Shaking): 사용되지 않는 JavaScript 코드를 제거하여 번들 크기를 줄이고 브라우저가 처리해야 할 리소스를 감소시킨다.
2-2. INP(Interaction to Next Paint) : 상호작용 반응성
INP는 페이지가 사용자 입력(클릭, 탭, 키 입력 등)에 얼마나 빠르게 반응하는지를 측정한다. 기존 FID(First Input Delay)를 대체하며, Google은 INP 목표값으로 200ms 이하를 권장하고 있으며, 이는 사용자 경험 향상을 위한 중요한 기준이다.
2-2-1. 개선 방법
이벤트 핸들러 최적화: 복잡한 이벤트 핸들러를 간소화하고, 불필요한 작업을 제거하여 실행 시간을 단축한다.
메인 스레드 부하 감소: 브라우저의 메인 스레드에서 장시간 실행되는 작업을 피하고, 긴 작업은 작은 청크로 나누어 처리한다.
JavaScript 실행 최적화: 비필수 스크립트를 비동기로 로드하고 사용되지 않는 코드를 제거하여 실행 속도를 높인다.
2-3. CLS(Cumulative Layout Shift) : 레이아웃 변경 누적 점수
CLS는 페이지 내 콘텐츠가 예상치 못하게 이동하는 빈도를 측정하며, 시각적 안정성을 평가하는 지표다. Google은 CLS 점수가 0.1 이하로 유지되도록 권장한다. 웹 페이지 내 콘텐츠에서 예상치 못한 전환이 발생하면 사용자는 현재 위치를 잃거나 잘못된 상호작용을 하게 되어 좋지 않은 사용자 경험을 제공할 수 있다. 해당 문제는 일반적으로 리소스가 비동기식으로 로드되거나 DOM 요소가 기존 콘텐츠보다 먼저 페이지에 동적으로 추가될 때 발생한다.
CLS 점수는 충격비율\이동비율* 로 계산하며, 좋은 사용자 경험 환경을 제공하기 위해서는 CLS 점수가 0.1 미만이 되도록 하는 것이 좋다.
예를 들어 아래와 같이 총 뷰포트를 75%(빨간점선) 차지하는 화면에서 표시할 UI가 화면의 25%(파란색 화살표)만큼 밀어냈다면 CLS 점수는 0.75×0.25 = 0.1875가 된다. 이렇게 되면 0.1를 초과했으니 개선이 필요하게 된다.
CLS를 개선하는 방법에는 여러가지가 있겠지만, 대표적으로 미디어(이미지, 비디오 등) 요소의 크기 및 비율을 미리 지정하거나, 스켈레톤 UI를 통한 사전 영역 확보, CSS 애니메이션 transform 속성 사용하기 등이 있다.
2-3-1. 개선 방법
이미지 및 동영상 크기 지정: 이미지와 동영상 요소에 고정된 크기와 비율을 설정해 브라우저가 로드 중 충분한 공간을 확보하도록 한다.
광고 및 서드 파티 콘텐츠 공간 예약: 광고 또는 위젯이 동적으로 추가될 경우 미리 공간을 확보하여 레이아웃 이동을 방지한다.
font-display 속성 활용: 웹 폰트를 로드할 때 기본 폰트로 대체 표시하도록 설정해 텍스트 이동 현상을 줄인다.
CSS transform 애니메이션 사용: 레이아웃 속성을 변경하지 않는 애니메이션으로 전환하여 안정성을 유지한다.
3. Core Web Vitals 측정 도구
Core Web Vitals를 측정하고 분석하기 위한 다양한 도구들이 있다. 각 도구는 LCP, INP, CLS 등의 핵심 지표를 모니터링하고 개선할 수 있도록 돕는다.
Google Lighthouse: Chrome 개발자 도구에 내장된 성능 분석 도구로 종합적인 개선 제안을 제공한다.
PageSpeed Insights: 실험실 데이터와 실제 사용자 데이터를 모두 제공하며 구체적인 개선 방안을 제시한다.
Chrome DevTools: Performance 탭을 통해 Core Web Vitals를 포함한 다양한 성능 지표를 실시간으로 확인할 수 있다.
Web Vitals Extension: Chrome 확장 프로그램으로 실시간으로 Core Web Vitals를 모니터링할 수 있다.
Search Console: Core Web Vitals 보고서를 통해 웹사이트 전체 성능을 추적하고 문제점을 파악할 수 있다.
이러한 도구들을 활용하여 웹사이트의 Core Web Vitals를 지속적으로 측정하고 모니터링함으로써, 사용자 경험을 개선하고 검색 엔진 최적화(SEO) 성능을 향상시킬 수 있다. 각 도구는 고유한 특징과 장점이 있으므로, 웹사이트의 특성과 분석 목적에 따라 적절한 도구를 선택하여 사용하는 것이 좋다.
4. 마무리하며
Core Web Vitals는 단순히 기술적인 과제를 넘어 사용자 중심의 웹 경험을 만들어가는 철학적 접근이다. LCP, INP, CLS 각각은 사용자가 웹사이트를 이용하면서 느끼는 핵심적인 경험들을 정량화한 것이다.
빠른 로딩(LCP), 즉각적인 반응(INP), 안정적인 레이아웃(CLS)은 디지털 시대 사용자들의 기대사항이다. 이러한 지표들을 개선하는 과정은 단순히 숫자를 높이는 것이 아니라, 우리의 웹사이트가 사용자의 시간과 주의를 존중한다는 메시지를 전달하는 것이다.
따라서 우리는 Core Web Vitals를 단순한 기술 지표가 아닌 더 나은 웹 생태계를 만들어가는 중요한 도구로 인식해야 한다. 이를 통해 더 포용적이고 효율적이며 사용자 친화적인 웹을 구축해 나갈 수 있을 것이다.
참고자료
Google PageSpeed Insights
Lighthouse 및 Chrome DevTools
Subscribe to my newsletter
Read articles from MIZZU directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by