배경 영상이 모바일에서 특히 문제가 되는 이유

모바일은 PC 대비 네트워크 환경이 불안정하고, 데이터 요금이 신경 쓰이는 사용자가 많습니다. 몇 MB짜리 영상을 자동 재생시키면 로딩 지연뿐 아니라 코어 웹 바이탈의 LCP(최대 콘텐츠풀 페인트) 지표를 크게 악화시켜 검색 순위에도 부정적 영향을 줄 수 있습니다.

모바일에서는 영상을 정지 이미지로 대체하는 전략

가장 확실한 최적화는 모바일에서는 영상을 아예 로드하지 않고 대표 프레임 이미지로 대체하는 것입니다.

<video autoplay muted loop playsinline poster="hero-fallback.jpg" class="hidden md:block">
  <source src="hero.mp4" type="video/mp4">
</video>
<img src="hero-fallback.jpg" class="block md:hidden" alt="메인 이미지">

CSS로 화면 크기별 표시 여부만 나누는 것으로는 브라우저가 영상을 이미 다운로드해버릴 수 있어, 자바스크립트로 화면 폭을 판단해 <source> 자체를 동적으로 삽입하는 방식이 더 확실합니다.

자바스크립트로 조건부 영상 로딩 구현

if (window.innerWidth >= 768) {
  const video = document.createElement('video');
  video.src = 'hero.mp4';
  video.autoplay = true;
  video.muted = true;
  video.loop = true;
  video.playsInline = true;
  document.querySelector('.hero').appendChild(video);
}

이 방식은 모바일 사용자의 브라우저가 영상 파일 요청 자체를 하지 않아, 데이터 소모를 원천적으로 막습니다.

영상을 꼭 써야 한다면 지켜야 할 기준

지연 로딩(Lazy Load)과 우선순위 조정

배경 영상이 화면 최상단(히어로 영역)에 있다면 오히려 지연 로딩을 적용하지 않는 것이 맞습니다. 대신 페이지의 다른 무거운 리소스(하단 이미지, 위젯 스크립트)를 지연 로딩으로 미뤄, 상대적으로 히어로 영역이 먼저 안정적으로 뜨도록 우선순위를 재배치하는 전략이 유효합니다.

데이터 세이버(절약 모드) 감지 대응

일부 브라우저는 사용자가 데이터 절약 모드를 켰는지 알려주는 신호를 제공합니다.

if (navigator.connection && navigator.connection.saveData) {
  // 데이터 절약 모드에서는 영상 대신 이미지만 표시
}

모든 브라우저가 지원하지는 않지만, 지원하는 환경에서는 사용자의 명시적 의사를 존중해 영상을 자동으로 건너뛰는 것이 좋은 경험을 만듭니다.

적용 후 성능 측정

1. 모바일 시뮬레이션(4G) 환경에서 라이트하우스 LCP 점수 측정
2. 실제 모바일 기기에서 첫 화면 렌더링까지 체감 시간 확인
3. 영상 대체 이미지로 전환 후 이탈률·체류시간 변화 비교

기획 단계에서 미리 정해야 할 것들

배경 영상 최적화는 개발 단계에서 뒤늦게 손대는 것보다, 기획·디자인 시안 확정 전에 모바일 대체 화면을 별도로 디자인해두는 것이 훨씬 효율적입니다. "PC 시안만 만들고 모바일은 알아서 축소"하는 방식으로 진행하면 영상 최적화 대응이 항상 사후 작업으로 밀려 품질이 떨어지기 쉽습니다.

실무 정리

배경 영상은 PC 전용 장식 요소로 분리하고, 모바일은 이미지로 전환하는 것이 실무적으로 가장 안전한 접근입니다. 이미지 자체의 용량 최적화는 WebP 변환 파이프라인과 함께 적용하면 효과가 커집니다. 반응형 성능 최적화가 필요하면 무료 견적요청으로 현재 메인 페이지 구성을 알려주세요.