비디오 압축

웹사이트용 HTML5 동영상 최적화하는 방법

무료 온라인 동영상 편집기 Clipchamp무료로 해 보세요
이 게시물을 공유하세요!

마지막 업데이트: 2019년 10월 15일

온라인 동영상은 계속해서 인터넷을 장악하고 있으며, 오늘날 웹 디자인에서 널리 활용되는 요소로 등극했습니다. 

동영상은 사람들의 주의를 끌고 상상력을 이끌어내므로, 사용자들의 눈길을 끌기 위해 많은 홈페이지에 동영상이 삽입되어 있는 것을 볼 수 있습니다. 이제 거의 모든 웹 브라우저가 HTML5 동영상을 지원하므로, 지금이야말로 웹사이트에 배경 또는 헤더 동영상을 추가하기 위한 최적의 시기입니다.

Clipchamp는 이 매력적인 시네마그래픽처럼 여러분의 웹사이트 디자인에 꼭 맞는 멋진 템플릿을 보유하고 있습니다.

이 템플리트를 사용하십시오.

웹사이트에 HTML5 동영상을 추가해야 하는 이유는 많지만, 너무 서두르지는 마세요. 준비 없이 진행할 경우 문제가 발생할 수 있기 때문에 원활한 재생을 위해서는 먼저 동영상을 최적화해야 합니다. 다음 정보를 확인하세요.

  1. 웹사이트용 동영상을 최적화해야 하는 이유

    • 웹사이트가 느리게 반응하면 고객을 잃을 수 있습니다.

    • 동영상 형식이 모두 동일하게 생성되는 것은 아닙니다.

  2. Clipchamp를 이용해 동영상을 최적화하는 방법

    • HTML5 사용을 위해 동영상을 압축하세요.

    • 브라우저와의 호환성을 위해 동영상을 변환하세요.

1. 웹사이트용 동영상을 최적화해야 하는 이유

HTML5 동영상은 장점뿐 아니라 이에 상응하는 대가도 따릅니다. 자동으로 재생되는 임베디드된 동영상 콘텐츠의 경우 페이지 로딩 속도가 느려질 수 있으며, 이로 인해 방문자 수가 급격히 감소할 수 있습니다. 또한 고객이 사용하는 브라우저와 동영상 파일이 호환되지 않을 경우 문제가 발생할 수도 있습니다.

웹사이트가 느리게 반응하면 고객을 잃을 수 있습니다.

HTML5 동영상 크기가 너무 크면 비즈니스 웹사이트 반응 속도가 현저히 떨어질 수 있습니다. 그리고 이로써 사이트 로딩 중 동영상이 잠시 멈추거나 버퍼링이 걸리는 등 사용자에게 좋지 않은 경험이 발생할 수 있습니다. 

즉, 웹사이트의 전반적인 인상을 개선하기 위해 추가한 멋진 디자인이 오히려 방문자들에게는 웹사이트 모든 요소가 로드되고 올바르게 표시될 때까지 기다려야만 하는 골칫거리로 작용할 수 있습니다.

Desktop and mobile user waiting for video to load

여러분의 웹사이트가 우수한 SEO를 갖추고 있고 사람들을 끌어들이는 멋진 혜택을 제공한다 하더라도, 사용자 경험이 좋지 못하면 소용이 없을 수 있습니다. 그러면 웹사이트 방문자 수가 감소할 뿐만 아니라 Google 검색에서도 이러한 사실이 반영됩니다. 페이지 로딩 시간 및 클릭 반응 속도는 모두 해당 페이지의 Google 순위에 영향을 주는 중요한 요인입니다. 따라서 웹사이트에 게시할 동영상을 반드시 압축하세요.

동영상 콘텐츠가 클라우드에 저장되어 있으면, 사용 중인 클라우드 호스팅 업체의 로딩과 가동 속도가 충분히 빠른지 확인하세요. 그래야 웹사이트 방문자들이 동영상을 끊김 없이 볼 수 있습니다. 서비스 무료 체험을 제공하는 클라우드 호스팅 업체들도 있습니다.

브라우저 내 동영상 편집기.

평생 무료! 단 몇 분만에 전문적인 동영상을 제작하세요.

동영상 형식이 모두 동일하게 생성되는 것은 아닙니다.

세계 최고의 HTML5 동영상이라 할지라도 사용자의 브라우저에 로딩되지 않는다면 소용이 없습니다. 모든 동영상 형식이 모든 브라우저 유형에서 로딩되는 것이 아니므로, 동영상을 반드시 변환하여 플래시 동영상 콘텐츠가 로딩되지 않는 황당한 사용자 경험이 초래되지 않게 해야 합니다. 가능한 한 많은 브라우저와 기기에서 허용되는 형식의 동영상을 사용하는 것이 중요합니다. 

아쉽게도 모든 브라우저와 기기에서 작동하는 하나의 형식은 없지만, WebM(VP8) 또는 MP4(H264)를 사용하는 것이 최선의 선택입니다. 이 형식은 모든 브라우저는 아니지만, 대부분의 브라우저에서 작동합니다. 

사실상 가장 좋은 방법은 웹사이트 디자인에 사용하기 전에 동영상 콘텐츠를 WebM으로 변환하고, 대안으로 MP4 형식을 제공하는 것입니다. 그러면 WebM 형식이 지원되지 않는 드문 상황이 발생할 경우 Mp4 버전을 대신 로드할 수 있습니다.

2. Clipchamp를 이용해 동영상을 최적화하는 방법

웹 디자인용 동영상을 최적화하는 두 가지 방법은 압축과 변환입니다. Clipchamp Utilities를 사용하면 이 두 가지 방법을 모두 무료로 활용할 수 있습니다.

위에 언급한 바와 같이 웹 디자인용 동영상을 최적화하는 가장 좋은 방법은 압축과 변환이며, 이를 통해 페이지 로딩 시간과 재생 성능을 크게 향상할 수 있습니다. 

하지만 그전에 권장해드리고 싶은 사항이 하나 있습니다. 보통 Clipchamp는 품질 유지를 위해 동영상의 해상도와 비트 전송 속도를 크게 낮추는 것을 권하지 않습니다. 하지만 주로 웹사이트의 배경에서 재생하기 위한 동영상을 디자인하는 경우 보다 유연성을 발휘할 수 있습니다. 이러한 동영상은 관심의 중심이 되는 대상이 아니며, 보통 모바일 휴대폰에서는 검색이 활발하게 이루어지기 때문에 화면에 좀 더 작게 표시해도 됩니다. 

루프된 HTML5 동영상은 일반적으로 투명 레이어 또는 텍스트 요소 뒤에 표시되며, 인터넷 연결 상태와 관계없이 어느 기기에서나 빠르게 로딩되고 재생되어야 합니다. 따라서 해상도보다는 작은 파일 크기가 더 중요합니다. Clipchamp 자체 웹사이트가 이러한 예에 해당합니다. 다시 동영상 최적화로 돌아가겠습니다.

HTML5 사용을 위해 동영상을 압축하세요.

아마도 예상하셨듯이, 크기는 작아도 좋은 품질의 동영상을 만드는 것이 목표라면 Clipchamp의 무료 온라인 동영상 변환기와 동영상 압축기가 유용할 수 있습니다.

이러한 도구는 이미 웹 디자이너, 웹 개발자, 그래픽 디자이너, WordPress, Wix, Squarespace 크리에이터 사이에서 널리 사용되고 있으며, 특히 웹 디자인 블로거Webflow와 같은 비주얼 웹사이트 구축 플랫폼에 의해 배경 동영상 및 웹사이트용 시네마그래픽 압축에 사용할 수 있는 유용한 앱으로 추천되었습니다.

Clipchamp enterprise users

Clipchamp를 이용해 서버, 호스팅 제공자 또는 웹사이트 구축 프로그램에 동영상을 업로드하기 전에 사용 중인 브라우저에서 이를 압축하고 변환할 수 있습니다. 따라서 웹사이트에 동영상을 게시한 후에 유용할 뿐만 아니라 초기 업로드 속도가 더 빨라집니다.

웹사이트에서 이러한 도구를 사용하려면 Clipchamp의 중간 또는 낮은 품질 설정을 사용하여 동영상의 해상도를 최소 720p까지 낮추는 것이 좋습니다. 웹 및 모바일 출력 옵션 모두 이용 가능합니다. 모바일 사전 설정의 경우, 웹 옵션과 비교하여 약간 더 낮은 품질로 더 작은 파일을 생성합니다.

Optimize your video for web

브라우저와의 호환성을 위해 동영상을 변환하세요.

Clipchamp Utilities를 사용하여 동영상을 손쉽게 변환하고 브라우저 호환성을 향상할 수 있습니다. 동영상을 업로드한 후에 사용자 정의 설정에서 원하는 형식을 선택하면 Clipchamp 무료 변환기가 자동으로 형식을 변환합니다.

Select WebM

웹사이트에 백업 MP4 파일을 추가하고 싶다면 MP4 옵션을 선택하고 동일한 과정을 반복하면 됩니다.

Clipchamp 블로그에서 자세히 보기

전화기에서 Clipchamp으로 비디오 가져오기

November 5, 2020
일부 사용자는 휴대폰으로 촬영한 비디오를 공유하기 위해 변환하거나 압축하는 방법 을 문의했습니다. 현재, 이러한 목적으로 Clipchamp을 사용하는…

비디오가 전자상거래의 전환율을 높이는 방법

June 6, 2020
**** 2020 년 5 월 28 일에 업데이트 됨 **** 여러분이 새로운 전자상거래 웹 사이트를 개설하는 중소기업이든, 노출되기 위해 애쓰는…

2007~2016 버전의 Word에 비디오를 삽입하는 방법

March 6, 2020
여러분이 포트폴리오를 돋보이게 하려고 노력하는 전문가든, 혹은 대학 논문에 추가 점수를 받고자 하는 학생이든, Word에 비디오를 삽입하는 것은…

Clipchamp를 이용해 무료 동영상 제작 시작하기