LCP 성능 개선 가이드: 고화질 영상 넣고도 98점 달성하기
강강박스의 새 홈페이지를 만들면서 한 가지 고집이 있었습니다. 메인 화면에 고화질 영상을 넣어 시각적 임팩트를 극대화하자는 것이었죠. 실제로 영상을 삽입하고 나니, 페이지는 눈이 시원해질 정도로 예뻤습니다.
하지만 개발자의 습관은 무섭습니다. 습관처럼 열어본 Lighthouse 성능 탭에서 **74점(Orange)**이라는 경고등이 켜졌을 때, 마음 한구석이 불편해지기 시작했습니다.
"괜찮아, 70점대면 나쁘지 않아."
스스로를 위로해봤지만, 20년 차 테크 리드님과 함께 일하면서 습관처럼 되뇌던 말이 떠올랐습니다.
돌아가는 코드가 아니라, 잘 돌아가는 코드를 만들어야 해.
결국 선택의 기로에 섰습니다.
- A. 디자인을 포기하고 영상을 뺀다 → 성능은 오르지만, 사이트의 첫인상이 밋밋해진다.
- B. 기술로 해결한다 → 디자인도 살리고, 성능도 잡는다.
저희 강강박스는 당연히 B를 선택했습니다. "검증된 기술만 제안한다"는 팀의 철학답게, 성능 최적화라는 기술적 해결책을 찾아 나섰습니다.
1. MP4의 문제점 – 무거운 짐을 지고 달리는 사이트
처음 영상을 삽입할 때는 가장 보편적인 포맷인 MP4를 사용했습니다. 호환성도 좋고, 대부분의 영상 편집 툴에서 기본 내보내기 형식으로 지원하니까요.
그러나 MP4는 웹 환경에서 치명적인 단점이 있습니다.
- 용량이 크다: 같은 화질 대비 WebM보다 약 30~50% 더 무겁습니다.
- 압축 효율이 낮다: H.264 코덱 기반으로, 최신 웹 환경에 최적화된 VP9 대비 압축률이 떨어집니다.
결국 MP4 영상은 Largest Contentful Paint(LCP)를 지연시키는 주범이 되었습니다. LCP는 사용자가 페이지에서 가장 큰 콘텐츠 요소를 인지하기까지의 시간을 측정하는 Core Web Vitals 지표인데, 무거운 영상 파일은 이 지표를 크게 악화시킵니다.
2. 해결책 ① – WebM 포맷으로 전환
WebM은 구글이 개발한 웹 최적화 영상 포맷입니다. VP9 코덱을 사용하여 MP4 대비 훨씬 작은 용량으로 동일한 화질을 제공합니다.
// Next.js에서 WebM 영상 적용 예시
<video
autoPlay
muted
loop
playsInline
className="hero-video"
>
<source src="/videos/hero-video.webm" type="video/webm" />
<source src="/videos/hero-video.mp4" type="video/mp4" /> {/* 폴백 */}
</video>
포맷을 WebM으로 변경한 것만으로도 영상 파일 용량이 약 40% 감소했습니다.
💡 Tip: WebM을 기본으로 제공하고, 구형 브라우저를 위한 MP4 폴백을 함께 제공하는 것이 베스트 프랙티스입니다.
3. 해결책 ② – Poster 이미지로 UX 사각지대 메우기
영상 최적화에서 흔히 놓치는 부분이 있습니다. 바로 영상이 로딩되기 전 찰나의 순간입니다.
아무리 영상이 가벼워져도, 네트워크 상황에 따라 0.5~1초의 공백이 생길 수 있습니다. 이 순간 사용자는 빈 화면이나 깨진 레이아웃을 보게 되는데, 이것은 사용자 경험(UX)에 치명적입니다.
이 문제를 해결하기 위해 Poster 이미지를 적용했습니다.
<video
autoPlay
muted
loop
playsInline
poster="/images/hero-poster.webp" {/* 영상 로딩 전 표시될 이미지 */}
className="hero-video"
>
<source src="/videos/hero-video.webm" type="video/webm" />
</video>
Poster 이미지는 영상의 첫 프레임 또는 대표 장면을 WebP 포맷으로 저장했습니다. WebP는 Next.js의 Image 컴포넌트에서도 기본으로 권장하는 포맷으로, JPEG 대비 25~35% 작은 용량을 자랑합니다.
Poster 이미지 적용의 효과:
- 영상 로딩 전에도 완성된 화면을 제공
- LCP 점수 개선 (영상 대신 가벼운 이미지가 먼저 로드됨)
- 사용자는 로딩 중이라는 느낌 없이 자연스럽게 영상 재생을 경험
24점의 도약
최적화 작업 후, 다시 Lighthouse를 실행했습니다.
Before: 74점 (Orange)
After: 98점 (Green)
디자인은 단 1픽셀도 손대지 않았습니다. 오직 **포맷 변경(MP4 → WebM)**과 Poster 이미지 적용이라는 기술적 최적화만으로 이 결과를 만들어냈습니다.
돌아가는 코드가 아닌, 잘 돌아가는 코드
강강박스는 단순히 요구사항을 구현하는 데 그치지 않습니다.
예쁘지만 느린 사이트는 결국 느린 사이트일 뿐입니다.
사용자는 아름다운 디자인에 감탄할 틈도 없이, 로딩 지연에 이탈합니다. 구글의 연구에 따르면 페이지 로드 시간이 1초에서 3초로 증가하면 이탈률이 32% 증가한다고 합니다.
저희는 디자인과 성능, 두 마리 토끼를 모두 잡는 것을 목표로 합니다. 그리고 이번 사례처럼, 그것이 불가능해 보일 때도 기술적 해결책을 찾아 끝까지 파고듭니다.
클라이언트에게 '이건 어쩔 수 없어요'라고 말하는 대신, '이렇게 해결했습니다'라고 말할 수 있는 팀.
그것이 강강박스가 추구하는 검증된 기술력이고, 저희가 클라이언트에게 드리고 싶은 신뢰입니다.
🔑 핵심 요약
- MP4 → WebM 전환으로 영상 용량 40% 감소
- WebP Poster 이미지로 로딩 공백 해결 및 LCP 개선
- Next.js 환경에서 Lighthouse 성능 점수 74점 → 98점 달성
- 디자인 퀄리티 유지 + 사용자 경험(UX) 개선의 두 마리 토끼
있어 보이기만 하는 코드가 아니라, 잘 돌아가는 코드를 만듭니다.
