홈페이지 첫 화면 영상, 만들기 전에 확인할 것은?

홈페이지 첫 화면 영상은 소리 없이 자동 재생되는 짧은 반복 영상으로 만들고, 만들기 전에 파일 용량과 로딩 속도, 모바일에서 보일 대체 이미지, 영상 위에 올라갈 글자의 가독성을 확인해야 합니다. 주요 브라우저는 음소거 상태일 때만 자동재생을 자유롭게 허용하고, 영상의 첫 프레임이나 포스터 이미지가 뜨는 속도는 구글이 제시하는 페이지 속도 지표에 반영됩니다. 영상은 새로 찍지 않고 브랜드 필름 원본에서 첫 화면용 장면을 골라 다시 편집해 만들 수도 있습니다.

첫 화면 영상은 어떤 역할을 하나요?

방문자가 스크롤하기 전 몇 초 동안 브랜드의 첫인상을 정하는 역할입니다. 첫 화면에서 방문자가 확인하려는 것은 "이 회사가 무엇을 하는 곳인지"이므로, 영상은 그 답을 분위기로 보여 주고 글자(헤드라인)는 그 답을 문장으로 말합니다.

그래서 첫 화면 영상에는 이야기 전개가 필요하지 않습니다. 브랜드 필름이 처음부터 끝까지 보는 사람을 위한 영상이라면, 첫 화면 영상은 몇 초만 보고 지나가도 브랜드의 결이 전달되는 장면 몇 개면 충분합니다. 제품이 쓰이는 손, 공간의 빛, 사람의 표정처럼 브랜드를 대표하는 장면을 고르는 것이 출발점입니다.

자동재생은 왜 음소거여야 하나요?

브라우저 정책상 소리가 있는 영상은 자동으로 재생되지 않을 수 있기 때문입니다. Chrome의 자동재생 정책은 "음소거 자동재생은 항상 허용"한다고 밝히고, 소리가 있는 자동재생은 사용자가 해당 사이트를 클릭하거나 탭한 적이 있는 경우 등 조건을 충족할 때만 허용합니다. 처음 방문한 사람에게는 소리 있는 자동재생이 막힐 수 있습니다.

아이폰도 비슷합니다. WebKit 공식 블로그는 iOS에서 muted 속성이 있는 동영상은 사용자 동작 없이 자동재생할 수 있고, playsinline 속성이 있으면 전체 화면으로 바뀌지 않고 페이지 안에서 재생된다고 안내합니다. 음소거가 풀리면 재생이 멈춘다는 점도 함께 적혀 있습니다. 결국 첫 화면 영상은 처음부터 소리 없이 봐도 완결되도록 편집해야 하고, 홈페이지 개발 담당자에게는 muted·playsinline 속성을 넣어 달라고 전달하면 됩니다.

이 글과 관련된 서비스

돌감자공작소가 직접 제공하는 서비스입니다.

브랜드 필름

브랜드의 첫인상과 신뢰를 결정짓는 밀도 높은 영상.

작업 사례 보기견적 받기

파일 용량과 로딩 속도는 어떻게 관리하나요?

포스터 이미지를 가볍게 만들고, 영상 파일에서 필요 없는 데이터를 덜어 냅니다. web.dev는 동영상의 포스터 이미지 또는 첫 프레임이 표시되는 시점 중 빠른 쪽이 LCP(Largest Contentful Paint, 첫 화면에서 가장 큰 요소가 그려지는 시간) 계산에 쓰인다고 설명합니다. 좋은 LCP 기준은 방문의 75번째 백분위수에서 2.5초 이하입니다. 첫 화면을 가득 채우는 영상은 이 지표의 대상이 되기 쉽습니다.

web.dev의 동영상 성능 가이드가 권하는 방법을 제작 단계에 옮기면 다음과 같습니다.

• 소리가 필요 없는 영상은 오디오 트랙을 빼서 파일 크기를 줄입니다.
• 포스터 이미지(영상이 재생되기 전에 보이는 정지 화면)를 따로 만들어 둡니다.
• 효율이 좋은 형식(WebM 등)과 호환성이 넓은 MP4를 함께 준비해 브라우저가 고르게 합니다.
• 영상 길이를 짧게 잡고 반복 재생되게 하면 같은 화면 시간에 필요한 용량이 줄어듭니다.

몇 MB 이하로 만들어야 한다는 공식 기준은 확인하지 못했습니다(확인 필요). 완성본을 실제 홈페이지에 올린 뒤 PageSpeed Insights 같은 측정 도구로 LCP를 확인하는 것이 가장 정확합니다.

기준일 2026-10-02 · 출처: Chrome for Developers(Autoplay policy), WebKit 블로그(New video policies for iOS), web.dev(LCP, Video performance), W3C WCAG 2.2(2.2.2, 1.4.3)

모바일에서는 영상 대신 무엇을 보여 주나요?

정지 이미지나 모바일 화면에 맞게 다시 편집한 짧은 세로 영상을 보여 줍니다. 가로로 넓은 첫 화면 영상을 휴대폰 세로 화면에 그대로 띄우면 양옆이 잘리면서 중요한 장면이 화면 밖으로 나갈 수 있습니다.

가장 단순한 방법은 영상의 대표 장면을 고른 대체 이미지를 모바일에서 보여 주는 것입니다. 모바일에서도 움직임이 필요하다면 같은 원본에서 세로 구도로 다시 자른 버전을 따로 만듭니다. 어느 쪽이든 대체 이미지와 세로 버전을 촬영·편집 단계에서 함께 요청해야 나중에 원본을 다시 찾는 일이 줄어듭니다.

영상 위 글자는 어떻게 읽히게 하나요?

영상의 밝기와 상관없이 글자와 배경의 대비가 유지되도록 만듭니다. 영상은 장면마다 밝기가 바뀌어서 밝은 장면에서는 흰 글자가, 어두운 장면에서는 검은 글자가 묻힙니다. 웹 접근성 기준 WCAG 2.2의 1.4.3 항목은 일반 글자에 4.5:1, 큰 글자에 3:1 이상의 명암 대비를 요구합니다(AA 수준).

현실적인 방법은 두 가지입니다. 영상 전체에 반투명한 어두운 막을 깔고 흰 글자를 올리거나, 글자가 놓일 자리에 움직임과 밝기 변화가 적은 장면만 골라 편집하는 것입니다. 또 같은 기준의 2.2.2 항목은 자동으로 시작해 5초 넘게 이어지는 움직임에 일시정지·정지·숨기기 수단을 두라고 규정하므로, 영상 구석에 멈춤 버튼을 함께 배치합니다.

브랜드 필름 원본은 어떻게 잘라 쓰나요?

첫 화면에 쓸 장면을 촬영 전에 정해 두고, 브랜드 필름 원본에서 그 장면들만 골라 짧은 반복 영상으로 편집합니다. 위의 비쥬주앙 패션 브랜드 필름처럼 분위기로 브랜드를 보여 주는 영상이라면, 말이나 자막 없이도 이해되는 장면을 골라 첫 화면용으로 잘라 쓸 수 있습니다.

편집할 때는 내레이션과 자막에 기대는 장면을 빼고, 장면 전환이 잦지 않게 길게 이어지는 컷을 고르고, 마지막 장면이 첫 장면으로 자연스럽게 이어지게 맞춥니다. 헤드라인이 들어갈 자리를 비워 둔 구도도 미리 확보해야 합니다. 브랜드 필름을 기획할 때 정리할 것은 브랜드 필름 기획 준비 글에서, 제작 기간과 비용 구성은 브랜드 필름 비용·기간 글에서 다뤘습니다.

다음 할 일: 홈페이지 첫 화면 시안에 헤드라인 위치를 먼저 정하고, 그 자리를 피해서 쓸 수 있는 장면 목록을 만들어 보세요. 개발 담당자에게는 위 표의 muted·playsinline 속성, 포스터 이미지, 일시정지 버튼을 함께 전달하면 됩니다.