웹 성능은 단순히 "빠르게 보이도록 만드는 것"을 넘어서, 실제 사용자가 체감하는 품질을 어떻게 높일 것인가에 대한 문제입니다.
이번 프로젝트에서 저는 웹 성능 측정 및 분석을 담당하면서, Google이 제안하는 주요 지표인 Core Web Vitals와 Lighthouse를 중심으로 진단을 진행하고, 그 결과를 기반으로 성능 개선 작업을 수행했습니다.
이 글에서는 이 두 가지 도구가 어떤 역할을 하고, 어떻게 측정 결과를 활용했는지 구체적으로 공유하려고 합니다.
😊 목차
1. Core Web Vitals란 무엇인가
2. 각 지표 설명 + 실측 적용 사례
3. Lighthouse란 무엇이고, 왜 같이 써야 하는가
4. 프로젝트에 어떻게 적용했고 어떤 결과를 얻었는가
5. 결론 및 인사이트
✅ Core Web Vitals란?
Core Web Vitals는 Google이 발표한 웹 성능 핵심 지표 세트로, 실제 사용자 환경에서의 경험 품질(User Experience)을 수치로 측정하는 데 초점을 맞춥니다.
크게 세 가지 지표로 구성되며, 각각은 웹사이트에서 사용자가 체감할 수 있는 가장 핵심적인 영역을 다루고 있습니다.
📊 주요 지표 분석 및 실측 결과
1. LCP (Largest Contentful Paint)
정의: 페이지 로딩이 시작된 시점부터 뷰포트 내 가장 큰 콘텐츠(주로 이미지 또는 텍스트 블록)가 화면에 완전히 렌더링되기까지의 시간을 측정합니다.
사용자 입장에서는 페이지가 얼마나 빨리 "보이는지"를 체감하는 데 핵심적인 지표입니다.
🧪 적용 사례
우리는 홈페이지(메인 리스트 뷰)를 대상으로 측정했습니다. 해당 페이지는 썸네일과 카드가 다수 포함되어 있어 LCP에 민감한 구조였습니다.
- 측정 결과:
2040ms - Google 기준: 2500ms 이하면 "좋음"
→ 사용자가 큰 콘텐츠를 2초 내로 인지할 수 있어 성능이 우수한 것으로 평가되었습니다.
2. INP (Interaction to Next Paint)
정의: 사용자가 클릭, 탭, 키보드 입력 등의 상호작용을 했을 때, 그에 대한 시각적 반응(다음 렌더링)이 이뤄지기까지 걸린 시간을 측정합니다.
2024년부터 INP는 FID(First Input Delay)를 대체하는 공식 Core Web Vitals 반응성 지표로 채택되었습니다.
🧪 적용 사례
우리는 데이터 입력/수정이 빈번한 폼 페이지를 중심으로 INP를 측정했습니다. 해당 페이지에서는 실시간 검증, 오토세이브 등의 기능이 있어 반응성 측정이 매우 중요했습니다.
- 측정 결과:
96ms - Google 기준: 200ms 이하면 "좋음"
→ 유저가 상호작용했을 때 빠르게 피드백이 이뤄졌으며, 전체적인 UX가 빠르고 민첩한 것으로 나타났습니다.
3. CLS (Cumulative Layout Shift)
정의: 페이지 로딩 중 발생하는 레이아웃 이동(예: 버튼이 밀리거나 광고가 늦게 떠서 내용이 아래로 밀리는 현상)의 누적 비율을 측정합니다.
예상치 못한 움직임은 사용자에게 혼란을 주고, 의도하지 않은 행동(예: 잘못된 클릭)을 유발할 수 있어 중요한 UX 요소입니다.
🧪 적용 사례
우리는 무한 스크롤 + 필터링 기능이 적용된 홈페이지 리스트 뷰에서 CLS를 측정했습니다.
콘텐츠가 동적으로 변경되고 레이아웃이 재정렬되는 시점이 있었기에 시각적 안정성 확인이 필요했습니다.
- 측정 결과:
0.002 - Google 기준: 0.1 이하면 "좋음"
→ 레이아웃 변화가 거의 없어 매우 안정적인 사용자 환경이 유지되고 있음을 확인했습니다.
🛠 Lighthouse는 어떤 역할을 할까?
Lighthouse는 Chrome DevTools에 내장된 웹 진단 도구로, 단순한 성능 측정에 그치지 않고 문제가 되는 요소와 개선 가이드를 함께 제공하는 것이 가장 큰 장점입니다.
📋 Lighthouse 진단 항목
- Performance (성능): 페이지 속도, 요청 수, LCP, INP 등
- Accessibility (접근성): 시멘틱 마크업, 대비, 키보드 네비게이션 등
- Best Practices: HTTPS, 최신 JS 사용 여부, 보안 관련 사항
- SEO: 메타 태그, 링크 구조, 크롤링 친화성 등
- PWA: Progressive Web App 지원 여부
🔍 Lighthouse vs Core Web Vitals
| 항목 | Core Web Vitals | Lighthouse |
|---|---|---|
| 측정 방식 | 실 사용자 기반 | 시뮬레이션 기반 (Lab data) |
| 초점 | 체감 UX 품질 | 기술 진단 + 개선 가이드 |
| 결과 활용 | 정량적 분석 | 리팩토링 가이드라인 제공 |
📈 프로젝트에 어떻게 적용했는가?
- 초기 진단: Lighthouse로 전체 페이지에 대한 성능 진단을 수행 → 개선이 필요한 영역 파악
- 실제 사용자 기준 측정: Core Web Vitals를 통해 UX 품질 수치화 (LCP, INP, CLS 수치 확보)
- 기준 설정: Google의 권장 범위를 기준으로 "좋음/보통/나쁨" 구간 설정
- 리팩토링 우선순위 정렬: 응답 지연, DOM 크기, 이미지 최적화 등 항목 중심 개선
- 지표 추적: 리팩토링 후 반복 측정을 통해 개선 효과 확인
🎯 최종 진단 결과 (Lighthouse 평균)
| 항목 | 점수 |
|---|---|
| Performance | 96.25 |
| Accessibility | 78.25 |
| SEO | 75 |
| Best Practices | 99 |
✍️ 결론 및 인사이트
이번 프로젝트를 통해 단순한 "속도 측정"에서 벗어나, 실제 사용자가 겪는 체감 성능을 정량화하고, 그 수치를 기반으로 한 리팩토링이 UX 품질을 크게 향상시킨다는 점을 경험할 수 있었습니다.
- Core Web Vitals는 UX를 직접 반영한 핵심 지표로써, 페이지가 실제로 얼마나 빠르고 안정적인지에 대한 사용자 중심의 판단 기준을 제공합니다.
- Lighthouse는 기술적인 관점에서 개선 포인트를 제시해주어, 두 도구는 함께 사용할 때 시너지가 큽니다.
성능을 단지 개발자의 시선이 아닌, 사용자의 입장에서 바라보는 것이 웹 품질을 향상시키는 첫걸음임을 다시 한 번 느꼈습니다.
