Web Guide배경 영상비디오 배경히어로 영상
동영상 배경을 쓸 때의 조건
영상 배경은 강력하지만 조건을 못 맞추면 역효과입니다.
느리고, 글자가 안 보이고, 모바일에서 재생되지 않으면 없느니만 못합니다.
01쓸 수 있는 조건
영상 배경은 실제 현장이나 제품이 움직이는 모습을 보여줄 때 효과적입니다. 공장 설비, 시공 현장, 행사 분위기 같은 것들입니다.
반대로 보여줄 것이 없어서 스톡 영상을 쓰면 아무 회사나 쓸 수 있는 화면이 됩니다.
쓸 만한 경우
실제 촬영본이 있음 · 움직임이 메시지를 전달 · 10초 내외로 자를 수 있음 · 소리 없이도 이해됨 · 용량을 줄일 수 있음
쓰지 말아야 할 경우
스톡 영상뿐 · 촬영본 품질이 낮음 · 움직임이 내용과 무관 · 용량이 큼 · 모바일 비중이 높음
02기술적 필수 조건
영상 배경은 몇 가지 기술 조건을 지켜야 제대로 동작합니다. 하나라도 빠지면 문제가 생깁니다.
특히 소리는 반드시 없어야 합니다. 소리가 있으면 모바일 브라우저가 자동재생을 막습니다.
01
무음
소리가 있으면 자동재생이 차단됩니다. 반드시 음소거.
02
자동재생·반복
방문자가 재생 버튼을 누르게 하지 않습니다.
03
포스터 이미지
영상이 로드되기 전에 보여줄 정지 이미지.
04
용량 제한
가능한 한 작게. 몇 MB를 넘으면 느려집니다.
05
짧은 길이
10초 내외. 길면 용량이 커지고 반복이 어색합니다.
06
자연스러운 반복
처음과 끝이 이어지게 편집하면 끊김이 안 보입니다.
03글자가 보이게 한다
영상은 프레임마다 밝기가 바뀝니다. 어떤 순간에는 글자가 잘 보이다가 다른 순간에는 배경에 묻힙니다.
어두운 반투명 레이어를 깔거나, 글자 영역만 별도로 처리해야 합니다.
점검 항목
어두운 오버레이
영상 위에 반투명 검정 레이어. 가장 일반적인 방법입니다.
그라디언트 오버레이
글자가 있는 쪽만 어둡게. 영상이 더 잘 보입니다.
글자 영역 분리
영상은 한쪽에, 글자는 단색 배경 위에 둡니다.
영상 선택
애초에 밝기가 균일하고 복잡하지 않은 영상을 고릅니다.
확인 방법
영상을 처음부터 끝까지 돌려 보며 글자가 계속 읽히는지 봅니다.
04모바일에서는 대체한다
모바일에서 영상 배경은 데이터를 많이 쓰고 배터리를 소모합니다. 그리고 화면이 작아 영상의 효과도 떨어집니다.
모바일에서는 정지 이미지로 바꾸는 것이 일반적입니다.
모바일 대체영상 대신 정지 이미지. 영상의 한 장면을 쓰면 자연스럽습니다.
데이터 절약 모드사용자가 데이터 절약을 켰다면 영상을 로드하지 않습니다.
느린 네트워크연결이 느리면 이미지로 대체하는 처리도 가능합니다.
재생 제어영상을 멈출 수 있는 버튼을 제공하면 접근성에 도움이 됩니다.
CHECK POINT
□ 실제 촬영본이 있는가
□ 영상이 무음으로 설정되어 있는가
□ 자동재생과 반복이 적용되어 있는가
□ 포스터 이미지가 지정되어 있는가
□ 용량이 충분히 작은가
□ 영상 위 텍스트에 오버레이가 있는가
□ 영상을 끝까지 돌려 보며 글자 가독성을 확인했는가
□ 모바일에서 정지 이미지로 대체되는가
#배경 영상#비디오 배경#히어로 영상#자동재생#모바일 대응#가독성#성능#홈페이지 디자인#웹비스타#홈페이지 제작