이 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 탭을 클릭합니다.
- 카테고리 목록에서 실적 체크박스가 선택되어 있는지 확인합니다.
- 보고서 생성 버튼을 클릭합니다.
이제 '애니메이션 콘텐츠에는 동영상 형식 사용' 감사가 통과한 것을 확인할 수 있습니다. 축하합니다. 💪