메인 배경 동영상 때문에 홈페이지가 느릴 때, 용량 줄이기와 video 태그 설정
메인 화면에 배경 동영상을 넣은 뒤 홈페이지가 느려졌다면, 영상 파일 용량을 먼저 줄이고 <video> 태그에 poster, muted, playsinline을 제대로 넣는 것부터 확인해 보세요.
같은 영상이라도 인코딩과 태그 설정만 손봐도 첫 화면이 뜨는 속도가 눈에 띄게 달라집니다.
💡 왜 배경 영상 하나로 사이트 전체가 느려지나요?
촬영 원본이나 편집 프로그램에서 그대로 내보낸 영상은 수십 MB가 되는 경우가 많습니다. 방문자는 영상이 다 받아질 때까지 빈 화면이나 검은 박스를 보게 되고, 휴대폰 데이터로 접속하면 이 차이가 더 크게 느껴집니다. 배경 영상은 내용을 전달하는 콘텐츠가 아니라 분위기를 만드는 장식이라, 화질보다 가벼움이 우선입니다.
1. 파일 용량부터 줄이기
리뉴얼 작업에서 고객사가 보내 준 메인 영상이 4K, 1분 길이에 80MB를 넘었던 적이 있습니다. 배경용이라면 가로 1280~1920px, 10~20초 길이로 반복 재생해도 충분합니다. 소리는 어차피 꺼서 재생하므로 오디오 트랙도 빼 줍니다. 무료 도구인 ffmpeg를 쓰면 아래 한 줄로 정리할 수 있습니다.
# 가로 1280px, 오디오 제거, 웹 재생용으로 재인코딩
ffmpeg -i original.mp4 \
-vf "scale=1280:-2" \
-c:v libx264 -crf 28 -preset slow \
-an -movflags +faststart \
main-bg.mp4
-crf는 숫자가 클수록 용량이 작아지고 화질이 떨어집니다. 26~30 사이에서 화면에 직접 띄워 보며 고르시면 됩니다. -movflags +faststart는 재생에 필요한 정보를 파일 앞쪽으로 옮겨, 전체를 다 받기 전에 재생이 시작되도록 해 줍니다.
2. video 태그는 이렇게 씁니다
모바일 브라우저는 소리가 나는 영상의 자동 재생을 막습니다. 그래서 muted가 빠지면 휴대폰에서는 영상이 멈춘 채로 보이고, 아이폰에서는 playsinline이 없으면 전체 화면으로 열리려고 합니다. 영상이 준비되기 전에 보여 줄 poster 이미지도 꼭 지정해 두세요.
<video class="main-bg"
autoplay muted loop playsinline
poster="/img/main-bg-poster.webp">
<source src="/video/main-bg.mp4"
type="video/mp4">
</video>| 속성 | 역할 |
|---|---|
| autoplay + muted | 모바일에서도 자동 재생되도록 소리 없이 시작 |
| playsinline | 아이폰에서 전체 화면으로 바뀌지 않고 제자리 재생 |
| loop | 짧은 영상을 끊김 없이 반복 |
| poster | 영상이 뜨기 전 첫 화면을 이미지로 채움 |
3. poster 이미지와 마무리 점검
poster는 영상의 첫 장면을 캡처해 WebP로 저장하면 영상이 시작될 때 화면이 튀지 않습니다. 이 이미지가 사실상 첫 화면의 주인공이므로 100~200KB 안쪽으로 가볍게 만들어 두는 편이 좋습니다.
작업이 끝나면 크롬 개발자 도구의 네트워크 탭에서 영상 용량이 얼마나 줄었는지, 휴대폰에서 실제로 자동 재생되는지 함께 확인하세요. 저희는 배경 영상은 3~5MB 안쪽을 목표로 잡고, 그보다 크면 길이를 줄이거나 해상도를 한 단계 낮춥니다.
"분위기를 만드는 영상일수록 가볍게 준비해야 합니다."
나눔웹은 메인 영상을 넣을 때도 용량과 모바일 재생 환경을 함께 맞춰,
보기 좋으면서도 빠르게 열리는 첫 화면을 만듭니다.
