이 페이지는 Cloud Translation API를 통해 번역되었습니다.

GIF를 동영상으로 바꾸기

Rob Dodson

이 Codelab에서는 애니메이션 GIF를 동영상으로 대체하여 성능을 개선합니다.

먼저 측정

먼저 웹사이트 실적을 측정하세요.

사이트를 미리 보려면 앱 보기를 누른 다음 전체 화면 을 누릅니다.
`Control+Shift+J`(Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
Lighthouse 탭을 클릭합니다.
카테고리 목록에서 실적 체크박스가 선택되어 있는지 확인합니다.
보고서 생성 버튼을 클릭합니다.

완료하면 Lighthouse의 '애니메이션 콘텐츠에는 동영상 형식 사용' 감사에서 GIF가 문제로 표시됩니다.

FFmpeg 가져오기

GIF를 동영상으로 변환하는 방법에는 여러 가지가 있습니다. 이 가이드에서는 FFmpeg을 사용합니다. 이는 Glitch VM에 이미 설치되어 있으므로 원하는 경우 다음 안내에 따라 로컬 머신에 설치할 수도 있습니다.

콘솔 열기

FFmpeg가 설치되어 있고 작동하는지 다시 확인합니다.

리믹스하여 수정을 클릭하여 프로젝트를 수정할 수 있도록 합니다.
터미널을 클릭합니다 (참고: 터미널 버튼이 표시되지 않으면 전체 화면 옵션을 사용해야 할 수도 있음).
콘솔에서 다음을 실행합니다.

which ffmpeg

파일 경로가 반환됩니다.

/usr/bin/ffmpeg

GIF를 동영상으로 변경

콘솔에서 cd images를 실행하여 이미지 디렉터리로 이동합니다.
ls를 실행하여 콘텐츠를 확인합니다.

다음과 같은 결과를 확인할 수 있습니다.

$ ls
cat-herd.gif

콘솔에서 다음을 실행합니다.

ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4

이렇게 하면 FFmpeg에 cat-herd.gif의 입력(-i 플래그로 표시됨)을 가져와 cat-herd.mp4라는 동영상으로 변환하라는 지시가 전달됩니다. 실행하는 데 1초 정도 걸립니다. 명령어가 완료되면 ls를 다시 입력하여 두 파일을 볼 수 있습니다.

$ ls
cat-herd.gif  cat-herd.mp4

WebM 동영상 만들기

MP4는 1999년부터 사용되어 왔지만 WebM은 2010년에 처음 출시된 비교적 새로운 제품입니다. WebM 동영상은 MP4 동영상보다 훨씬 작을 수 있으므로 둘 다 생성하는 것이 합리적입니다. 다행히 <video> 요소를 사용하면 여러 소스를 추가할 수 있으므로 브라우저가 WebM을 지원하지 않는 경우 MP4로 대체할 수 있습니다.

콘솔에서 다음을 실행합니다.

ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm

파일 크기를 확인하려면 다음을 실행합니다.

ls -lh

GIF 1개와 동영상 2개가 있어야 합니다.

$ ls -lh
total 4.5M
-rw-r--r-- 1 app app 3.7M May 26 00:02 cat-herd.gif
-rw-r--r-- 1 app app 551K May 31 17:45 cat-herd.mp4
-rw-r--r-- 1 app app 341K May 31 17:44 cat-herd.webm

원본 GIF는 3.7MB이지만 MP4 버전은 551KB, WebM 버전은 341KB에 불과합니다. 상당한 절약이네요.

GIF 효과를 다시 만들도록 HTML 업데이트

애니메이션 GIF에는 동영상에서 재현해야 하는 세 가지 주요 특징이 있습니다.

자동으로 재생됩니다.
연속 반복됩니다 (일반적으로 반복을 방지할 수 있음).
조용해요.

다행히 <video> 요소를 사용하여 이러한 동작을 다시 만들 수 있습니다.

index.html 파일에서 <img>가 있는 줄을 다음으로 바꿉니다.

<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>

이러한 속성을 사용하는 <video> 요소는 자동으로 재생되고, 무한 루프로 재생되고, 오디오를 재생하지 않으며, 인라인(전체 화면이 아님)으로 재생됩니다. 애니메이션 GIF에서 기대되는 모든 동작입니다. 🎉

소스 지정

이제 동영상 소스를 지정하기만 하면 됩니다. <video> 요소에는 형식 지원에 따라 브라우저에서 선택할 수 있는 다양한 동영상 파일을 가리키는 <source> 하위 요소가 하나 이상 필요합니다. 고양이 무리 동영상으로 연결되는 <source> 요소로 <video>를 업데이트합니다.

<video autoplay loop muted playsinline>
  <source src="/images/cat-herd.webm" type="video/webm">
  <source src="/images/cat-herd.mp4" type="video/mp4">
</video>

참고: 브라우저는 최적의 <source>를 추측하지 않으므로 <source>의 순서가 중요합니다. 예를 들어 MP4 동영상을 먼저 지정하고 브라우저가 WebM을 지원하는 경우 브라우저에서 WebM <source>을 건너뛰고 대신 MPEG-4를 사용합니다. WebM <source>가 먼저 사용되도록 하려면 먼저 지정하세요.

미리보기

사이트를 미리 보려면 앱 보기를 누른 다음 전체 화면 을 누릅니다.

환경은 동일하게 표시됩니다. 지금까지는 좋습니다.

Lighthouse로 확인

라이브 사이트를 연 상태에서 다음을 수행합니다.

`Control+Shift+J`(Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
Lighthouse 탭을 클릭합니다.
카테고리 목록에서 실적 체크박스가 선택되어 있는지 확인합니다.
보고서 생성 버튼을 클릭합니다.

이제 '애니메이션 콘텐츠에는 동영상 형식 사용' 감사가 통과한 것을 확인할 수 있습니다. 축하합니다. 💪