웹사이에서 동영상 배경을 사용하면 보는 사람들의 첫 관심을 사로 잡을 수 있습니다. 동영상은 수 년간 배경 디자인 기능으로 점점 더 대중화되고, 모든 최신 브라우저에서 HTML5 동영상 지원이 기본으로 변화되어 가므로 계속해서 성장할 것입니다.

웹 디자인용 동영상을 최적화하는 방법에 대해 온라인에서 가장 자주 묻는 질문 중 일부는 프로젝트에서 배경 동영상을 만들고 실행할 때 발생할 수 있는 2가지 일반적인 문제에 이르게 됩니다.

1) 웹사이트에서 사용할 동영상 압축

첫 번째 문제는 파일을 편집 또는 제작 시 파일이 너무 커지는 것입니다. 제한된 대역폭과 열악한 인터넷 연결로 인해 동영상을 전체 불러오기 전 동영상이 일시 정지되거나 버퍼링이 많이 생길 수 있으므로 이는 큰 문제입니다.

따라서 웹사이트의 전체적인 인상을 더하는 멋진 디자인 기능은 방문자가 모든 요소가 로드되고 정확히 표시되기까지 기다려야 하므로 불편을 끼칠 수 있습니다.

compress-web-design

큰 동영상은 전체 페이지 로드 시간에 지연시킬 뿐만 아니라 특히 사이트에 처음 액세스하고 아직 캐시되지 않은 경우, 사용자에게 부정적인 경험을 제공합니다. 빠른 페이지 로드 시간은 Google 및 타사에서 고려하는 중요 요소이므로, 큰 동영상은 사이트의 SEO에도 부정적인 영향을 미칠 수 있습니다. 따라서 웹사이트에 동영상을 사용하기 전 압축하는 것이 바람직한 선택입니다.

2) HTML5 용 동영상 변환

두 번째로, 대부분의 브라우저 (크롬, 파이어폭스, 엣지, 오페라, 인터넷 익스플로러, 사파리 등)는 기타 동영상 포맷, 동영상 코텍 및 추가 플러그인이 없는 오디오 코텍 (컨테이너에 있는 경우)이 아닌 일부만 인식할 수 있으므로, 동료에게서 받은 동영상 또는 편집실에서 만든 동영상은 종종 런타임에 문제를 발생시킬 수 있는 형식일 수 있습니다.

MP4 및 WebM은 거의 웹 사용을 위한 가장 일반적인 동영상 포맷입니다. 가능한 MP4 라이센스 문제로 인해, 웹사이트에서 사용하기 전에 동영상을 WebM로 변환 (VP8) 하고, 선택적으로 WebM을 지원하지 않는 브라우저를 위해 MP4 (H264) 동영상을 대안으로 제공하는 것이 가장 좋습니다.

가능한 많은 휴대전화, 테이블, 랩톱 및 운영 시스템 콤보만큼 많은 브라우저에서 동영상이 허용될 수 있도록 하는 것이 중요합니다. 안타깝게도 지금까지 모두를 규정할 수 있는 단 하나의 포맷/동영상 코덱/오디오 코덱 조합이 없습니다.

웹 디자인을 위한 동영상 최적화

위에서 언급한 것처럼, 웹 디자인을 위한 동영상을 최적화하는 한 가지 방법은 페이지 로드 시간과 재생 성능을 대폭 향상시킬 수 있도록 동영상 파일 크기를 줄이는 것입니다.

추가 옵션으로 동영상 해상도와 품질 (압축 수준과 비트 전송률)을 줄이는 방법이 있습니다. 또 다른 요소는 널리 인식된 동영상 포맷을 선택하는 것입니다.

동영상 해상도와 비트 전송률은 동영상 화질의 2가지 주요 요소이기에 주로 이 두 가지를 너무 낮추는 것을 권장하지 않지만, 웹사이트의 배경 동영상과 같은 클립의 경우 주로 방문자가 치중하는 것이 아니기 때문에 너무 걱정할 필요가 없습니다.

대신 루프된 HTML5 동영상은 투명 레이어 및/또는 텍스트 요소 뒤에 표시되며, 사이트의 인터넷 연결에 상관없이 방문자가 사이트에 액세스하는데 사용하는 모든 디바이스에서 빠르게 불러오고 재생하는데 필요한 지원 디자인 항목입니다.

따라서 작은 파일 크기는 해상도, 비트 전송률, 화질을 어느 정도 삭제합니다.

짐작할 수 있듯이, 좋은 품질로 작은 동영상 파일을 만들고자 할 경우, 저희 무료 온라인 동영상 변환기와 동영상 압축기인 Clipchamp는 도움이 되는 좋은 도구입니다.

이미 웹 디자이너, 웹 개발자, 그래픽 디자이너, 워드프레스, 윅스 및 스퀘어스페이스 제작자 사이에서 인기가 있습니다. 또한 웹 디자인 블로거와 특히 배경 동영상 압축을 위한 웹플로우와 같은 시각적 웹사이트 구축 플랫폼 및 웹사이트용 시네마그래프*에 유용한 앱으로 추천되었습니다.

 

compress-video-web-design

 

Clipchamp는 동영상을 서버, 호스팅 제공업체 또는 웹사이트 빌더에 업로드하기 전에 브라우저에서 동영상을 압축하고 변환합니다. 따라서 동영상을 웹사이트에 올라오면 유용할 뿐만 아니라 초기 업로드 속도가 빨라집니다.

웹사이트에서 사용하기 위해, 일반적으로 Clipchamp의 중간 또는 낮은 화질 설정을 사용하여 최소 720p까지 동영상 압축을 권장합니다. 모바일 출력 옵션 모두 사용가능합니다 – 모바일 사전설정은 화질을 약간 더 줄여서 보다 더 작은 출력 파일을 생성합니다.

요약하면 배경 동영상을 위한 최상의 설정은 웹, 720p, 중간 화질, MP4 또는 WebM 또는 모바일, 720p, 중간 화질, MP4 입니다. 입력 파일 및 품질뿐만 아니라 출력 동영상 파일 크기에 따라, Clipchamp가 시나리오에 따라 생성하므로, 만족스러운 결과를 얻으려면 다양한 설정 조합을 시도해 보시기 바랍니다.

 

HTML5-background-video

 

1080p 이상의 고화잘 동영상을 사용하는 것이 좋은 것 같지만, 특정 웹사이트에서 방문자가 머무는 시간이 15초 미만이라는 것을 고려할 때 고화질 동영상 사용을 자제하는 것이 좋습니다. 중요한 첫 몇 초안에 좋은 첫 인상을 남기길 원한다면, 저희 온라인 동영상 변환기가 도움이 될 것입니다.

 


*시네마그래프는 무엇입니까? 서브레딧과 멋진 예시를 확인하세요.