랜딩 페이지에 제품 영상 넣는 법 (자동재생, 용량, 배치)

글: Ivan Cernja · 2026년 10월 11일

랜딩 페이지 상단의 제품 영상은 방문자가 한 글자를 읽기도 전에 무엇을 하는 제품인지 보여줘요. 페이지를 느리게 만들지 않으면서 어디서나 자동재생되게 하려면 몇 가지 선택이 필요한데, 브라우저 규칙만 알면 어렵지 않아요.

방식 고르기

자동재생 규칙

Chrome의 정책은 간단해요. "음소거 자동재생은 항상 허용됩니다." 반면 소리가 있는 자동재생은 사이트와 이전에 상호작용한 적이 있어야 하는 등의 조건이 필요해요(Chrome for Developers). MDN도 모든 브라우저에 같은 규칙을 설명하면서, Safari에서는 자동재생에 playsinline 속성도 필요하다고 안내해요(MDN Web Docs). 그러니 히어로 반복 영상은 음소거와 playsinline이 필수이고, 소리가 있는 영상은 클릭을 기다려야 해요. Chrome의 가이드는 영상이 반드시 재생될 거라고 가정하지 말고, 재생되지 않을 때 일시정지 버튼을 보여주지 말라고도 당부해요(Chrome for Developers).

HTML 코드

<video src="/product.mp4" poster="/product.jpg"
  autoplay muted loop playsinline preload="metadata"></video>

포스터 이미지는 영상이 로딩되는 동안 바로 표시되고, preload="metadata"는 필요하기 전에 브라우저가 파일 전체를 내려받지 않게 해 줘요. 이 페이지 옆 카드에 있는 영상도 같은 코드를 쓰고 있어요.

가볍게 유지하기

• GIF 말고 영상을 쓰세요. web.dev의 예시에서 3.7 MB짜리 GIF가 551 KB MP4와 341 KB WebM이 됐어요(web.dev).
• 음소거 반복 영상에서는 오디오 트랙을 빼고, 실제로 표시되는 크기에 맞춰 줄이세요. ffmpeg로는 ffmpeg -i video.mp4 -an -vf scale=1280:-2 -c:v libx264 -crf 26 -preset slow -movflags +faststart hero.mp4 같은 명령이면 30초 반복 영상이 보통 몇 메가바이트로 줄어요.
• 소리가 있는 긴 영상은 동영상 호스팅을 쓰세요. Wistia, Vimeo, YouTube 같은 곳을 쓰면 적응형 스트리밍과 컨트롤이 기본으로 따라와요.

배치와 길이

• 헤드라인이 보이게 하세요. 영상은 헤드라인을 받쳐 줘야지, 노트북 화면에서 헤드라인을 스크롤 아래로 밀어내면 안 돼요.
• 프레임은 16:9로 잡고, 모바일 너비에서도 중요한 부분이 잘리지 않게 하세요.
• 반복 영상은 짧게. Wistia 데이터에서 참여율이 가장 높은 건 1분 미만 영상이고(Wistia), 30초보다 짧은 반복 영상은 지루하게 느껴지는 일이 드물어요.

영상 구하기

아직 영상이 없다면, Teasr가 랜딩 페이지로 1920 x 1080 MP4를 약 10분 만에 만들어 드려요. 브랜드와 실제 화면을 그대로 살리고, 가격은 €19.50부터예요. 음악이 함께 들어가는데, 음소거 반복 영상에서는 위의 명령어로 오디오를 빼면 돼요.