홈페이지 메인 영상, 용량·길이 기준과 AI 루프

홈페이지 메인 영상은 첫 화면 배경에서 소리 없이 자동으로 반복되는 10~20초 루프 영상입니다. 브라우저는 소리 없는(음소거) 영상의 자동 재생은 허용하고 소리 있는 자동 재생은 조건이 맞을 때만 허용하므로 소리 트랙을 빼고, 파일은 PC용 1080p 기준 몇 MB 안으로 줄입니다(예: 15초에 3MB — 예시로 가정한 목표). 영상이 뜨기 전과 자동 재생이 되지 않는 환경에서는 첫 프레임과 같은 대체 이미지를 보여 주고, 모바일에는 대체 이미지나 세로용 짧은 영상을 둡니다. 촬영 소스가 없으면 AI로 만든 루프 장면으로 브랜드 분위기를 만들 수 있습니다.

홈페이지 메인 영상 — 용량과 길이는 어떻게 잡나요

아래 표는 천천히 움직이는 배경 영상을 기준으로 한 예시 값입니다. 홈페이지 제작 도구가 영상 크기를 따로 정해 두었다면 그 값을 먼저 따릅니다.

용량은 "비트레이트 × 길이(초) ÷ 8"로 정해집니다. 15초 · 3MB를 목표로 하면 여유분 10%를 뺀 2.7MB × 8 ÷ 15 = 약 1.4Mbps가 영상에 쓸 수 있는 값입니다. 이 값에서 화면에 얼룩이 생기면 비트레이트를 올리기보다 해상도를 1,280 × 720으로 낮추거나 길이를 줄입니다. 계산과 압축 순서는 동영상 용량 줄이기, 설정표와 무료 도구 4가지에 있습니다.

대체 이미지가 가벼워야 하는 이유도 있습니다. 구글의 웹 성능 지표인 LCP(첫 화면에서 가장 큰 요소가 그려지는 시간)는 영상의 포스터 이미지가 뜬 시각과 첫 프레임이 보인 시각 가운데 빠른 쪽을 재고, 좋은 값을 2.5초 이하로 봅니다. 사진 규격은 홈페이지 이미지 규격 — 폭·용량·형식의 첫 화면 배경 기준과 같게 둡니다.

배경 영상 루프는 어떤 순서로 만드나요

1. 글자 자리 먼저 — 영상 위에 올라갈 제목 · 버튼 위치를 화면 시안에 먼저 그립니다. 그 자리에는 움직임이 적고 밝기가 고른 면(하늘 · 벽 · 흐린 배경)이 오게 장면을 고릅니다.
2. 소스 준비 — 촬영하거나 AI로 5~10초 컷 2~3개를 만듭니다. 카메라 움직임은 느린 이동 한 가지로 정합니다.
3. 이음새 — 끝 프레임이 첫 프레임으로 자연스럽게 넘어가게 아래 세 방법 가운데 하나를 씁니다.
4. 밝기 — 흰 글자를 얹는다면 영상 위에 검은 반투명 덮개를 깝니다. 덮개 농도는 시안에서 글자를 읽어 보며 정합니다.
5. 내보내기 — 소리 트랙을 지우고 WebM · MP4 두 벌과 포스터 이미지를 함께 뽑습니다.

모바일에서는 어떻게 보여 주나요

모바일에서 홈페이지 메인 영상을 보여 주는 방식은 세 가지이고, 대부분 첫 번째나 두 번째를 고릅니다.

영상을 쓴다면 video 태그에 autoplay · muted · loop · playsinline · poster를 함께 넣습니다. 크롬은 음소거 자동 재생을 늘 허용하고, 아이폰 사파리는 소리 없는 영상의 자동 재생을 허용하되 playsinline이 없으면 화면 안에서 재생하지 않고 전체 화면을 요구합니다. 브라우저 · 기기 설정으로 자동 재생이 막히는 경우도 있어, 그때 포스터 이미지가 그대로 첫 화면이 되도록 영상의 첫 프레임과 같은 이미지를 넣어 둡니다.

움직임을 줄이는 설정과 멈춤 버튼은 어떻게 하나요

웹 접근성 국제 기준 WCAG 2.2의 2.2.2(A 등급)는 자동으로 시작해 5초 넘게 움직이고 다른 내용과 함께 보이는 콘텐츠에 사용자가 멈추거나 숨길 수 있는 수단을 두라고 합니다. 10~20초 반복 배경 영상은 여기에 해당하므로 두 가지를 둡니다.

• 멈춤 버튼 — 영상 구석에 "배경 영상 멈춤" 버튼을 둡니다. 키보드 탭 키로도 닿고, 누르면 "재생"으로 바뀌게 합니다.
• 움직임 줄이기 설정 — 기기에서 동작 줄이기를 켠 방문자는 브라우저가 prefers-reduced-motion 값으로 알려 줍니다. 이 값이 켜져 있으면 영상을 틀지 않고 포스터 이미지만 보여 줍니다.

자막 · 대비 같은 나머지 항목은 웹 접근성, 홈페이지에서 먼저 고칠 열 가지로 점검합니다.

홈페이지 메인 영상에 AI 루프를 써도 되나요

됩니다. 질감 · 빛 · 공간 분위기처럼 회사의 사실을 주장하지 않는 장면은 AI 영상이 잘 맞습니다. 반대로 실제 공장 · 매장 · 직원 · 제품처럼 보이는 장면은 실제와 같아야 하므로 촬영본을 쓰거나 실제 사진에서 출발해 움직임만 더합니다. 생성 도구는 상업적 이용이 되는 요금제인지 첫 작업 날 약관을 확인하고, 얼굴이 크게 나오는 인물은 실존 인물을 닮지 않았는지 두 사람 이상이 봅니다.

자주 묻는 질문

유튜브 영상을 메인 배경으로 넣으면 안 되나요?

넣을 수는 있지만 배경용으로는 영상 파일을 직접 넣는 방식이 가볍습니다. 퍼가기(임베드) 플레이어는 재생 버튼 · 제목 같은 화면 요소와 플레이어 스크립트를 함께 불러오기 때문입니다. 소개 영상처럼 소리를 들려줄 영상은 첫 화면 아래에 퍼가기로 따로 둡니다.

메인 영상에 소리를 넣고 싶으면 어떻게 하나요?

기본은 소리 없이 두고 "소리 켜기" 버튼을 따로 둡니다. 크롬은 소리 있는 자동 재생을 방문자가 그 사이트를 클릭하는 등 조건이 맞을 때만 허용하므로, 소리를 켠 채 자동 재생되게 만들면 영상이 아예 재생되지 않을 수 있습니다.

GIF로 넣으면 더 간단하지 않나요?

GIF는 같은 장면에서 영상보다 훨씬 무겁습니다. 구글 web.dev 예시에서는 3.7MB GIF를 MP4로 바꾸니 551KB, WebM으로 바꾸니 341KB가 됐습니다. 움직이는 배경은 GIF 대신 autoplay · loop · muted · playsinline을 넣은 video 태그로 넣습니다.

영상 위 글자는 영상 안에 넣어도 되나요?

글자는 영상에 굽지 말고 홈페이지 글자로 얹습니다. 영상 속 글자는 검색 엔진과 화면 낭독 프로그램이 읽지 못하고, 화면 폭이 바뀌면 잘리며, 문구를 바꿀 때마다 영상을 다시 만들어야 합니다.

홈페이지 메인 영상을 맡기면 견적은 어떤 항목으로 나뉘나요?

소스 촬영이나 AI 장면 생성, 루프 이음새 편집, PC · 모바일 판 수, 포스터 이미지로 나뉩니다. PC 가로 영상 하나에 대체 이미지만 두면 가장 간단하고, 모바일 세로 영상을 따로 만들면 편집과 압축 작업이 한 벌 더 붙습니다. AI 영상 제작 대행을 맡길 때는 영상 위에 올라갈 제목 · 버튼 위치를 그린 시안을 먼저 넘기세요.

오늘 할 일

지금 홈페이지 메인 영상 파일의 길이(초)와 용량(MB)을 적고 "용량 × 8 ÷ 길이"로 비트레이트를 계산하세요. 예시 목표(15초 · 약 1.4Mbps)보다 크게 높다면 그 파일이 첫 화면을 늦추는 첫 후보입니다.

이어서 읽기 — 브랜드 필름, 2분 구성표와 대본 양식 6칸 · 미디어월 콘텐츠, 규격 계산표와 AI 루프 순서