이 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>
미리보기
- 사이트를 미리 보려면 앱 보기를 누른 다음 전체 화면 을 누릅니다.
환경은 동일하게 표시됩니다. 지금까지는 좋습니다.
Lighthouse로 확인
실시간 사이트가 열려 있는 상태에서 다음 단계를 따르세요.
- `Control+Shift+J` (Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
- Lighthouse 탭을 클릭합니다.
- 카테고리 목록에서 실적 체크박스가 선택되어 있는지 확인합니다.
- 보고서 생성 버튼을 클릭합니다.
이제 '애니메이션 콘텐츠에는 동영상 형식 사용' 감사가 통과한 것을 확인할 수 있습니다. 축하합니다. 💪