GIF 와 WebM, 무엇을 쓸까
WebM 이 훨씬 가볍다는 건 맞습니다. 그런데 스마트스토어에는 못 올립니다. 둘의 차이가 정확히 무엇이고 언제 무엇을 골라야 하는지 정리했습니다.
최종 수정
한 줄 기준
올릴 곳이 이미지만 받으면 GIF, HTML 을 직접 쓸 수 있으면 WebM. 나머지는 부차적인 문제입니다.
실측 비교
20MB 짜리 1080p MP4 를 860px · 12fps · 5초 구간으로 잘라 두 형식으로 만들어 봤습니다.
같은 화면인데 용량이 한 자릿수 배 차이 납니다. GIF 가 프레임마다 그림을 통째로 들고 있는 반면, WebM 은 앞 프레임과 달라진 부분만 저장하기 때문입니다. 색도 256개로 줄일 필요가 없어서 그라데이션이 뭉개지지 않습니다.
무엇이 다른가
어느 쪽을 고를까
- GIF 를 써야 하는 곳
- 스마트스토어 · 쿠팡 상세페이지, 카카오톡, 이미지 업로드만 되는 게시판·쇼핑몰 편집기. 이런 곳은 선택의 여지가 없습니다.
- WebM 이 나은 곳
- 자체 웹사이트, 티스토리처럼 HTML 을 직접 넣을 수 있는 블로그, 서비스 안의 배너·튜토리얼. 용량이 1/5 이면 페이지가 그만큼 빨라집니다.
- 둘 다 만들어 두면 좋은 경우
- 같은 소재를 상세페이지에도 쓰고 자체 사이트에도 쓴다면, 형식만 바꿔 한 번 더 만드는 게 낫습니다. 설정은 그대로 두고 출력 형식만 바꾸면 됩니다.
코덱 이야기
서버에서 만들면 VP9, 브라우저에서 만들면 VP8 로 인코딩합니다. 브라우저에서 쓰는 wasm 빌드의 VP9 인코더가 프레임 10~15 부근에서 죽는 문제가 있어 VP8 을 씁니다. 컨테이너가 같아 재생 호환성은 차이가 없고, 용량은 VP9 가 조금 더 유리합니다.
WebM 의 화질은 CRF 하나로 조절합니다. 18~60 범위이고 낮을수록 고화질·큰 용량입니다. 기본값 32 면 대개 충분합니다. GIF 처럼 색상 수나 디더링을 고민할 필요가 없습니다.
WebM 을 카카오톡이나 스마트스토어에 올릴 수 있나요?
없습니다. 이런 곳은 이미지 파일만 받고, WebM 은 영상 파일로 분류됩니다. GIF 로 만드세요.
티스토리·네이버 블로그에는 되나요?
HTML 을 직접 넣을 수 있는 편집기라면 <video autoplay muted loop playsinline> 로 넣을 수 있습니다. 에디터가 이미지 업로드만 지원한다면 GIF 를 쓰세요.
MP4 는 왜 없나요?
WebM 이 같은 용도에서 더 작고, 요즘 브라우저는 전부 재생합니다. GIF 로 되돌리는 변환도 아직 없습니다.
어느 쪽이 빨리 만들어지나요?
위 실측에서는 브라우저 기준 둘 다 6초로 비슷했습니다. 서버 모드가 3초로 가장 빨랐지만 업로드 시간이 따로 듭니다.