애니메이션 GIF 포맷은 1987년에 만들어졌습니다. LZW 압축을 쓰고, 프레임당 256색 팔레트를 하드코딩하며, 프레임 간 모션 보상이라는 개념이 없습니다. 1995년 이후로 이 모든 선택은 의미가 없었지만, GIF는 플러그인 없이 모든 브라우저에서 동작하는 유일한 애니메이션 포맷이었기에 살아남았습니다. 2026년 MP4(와 WebM)는 모든 모던 브라우저에서 보편적이고, 파일 크기 격차는 엄청납니다. 이 글에서 실제 수치를 정리합니다.
압축 격차
전형적인 480p, 5초 애니메이션:
| 포맷 | 파일 크기 |
|---|---|
| GIF (기본 최적화) | 1.8 MB |
| GIF (강하게 최적화, 8색 팔레트) | 900 KB |
| WebP 애니메이션 | 250 KB |
| WebM (VP9) | 110 KB |
| MP4 (H.264) | 90 KB |
같은 시각적 콘텐츠, 더 높은 컬러 충실도에서 GIF → MP4로 20배 감소입니다. 이유는 각 포맷이 압축하는 방식의 본질에 있습니다:
- GIF는 프레임마다 별도의 이미지로 저장하고, 256색 팔레트를 씁니다. 시간축 압축이 없습니다. 30fps, 5초 애니메이션은 말 그대로 150장의 풀 이미지를 인코드합니다.
- MP4 / WebM은 모션 보상을 사용합니다. 몇 초마다 키프레임을 저장하고, 그 뒤로는 직전 프레임과의 차이만 저장합니다. 프레임 간 변화가 거의 없는(현실 GIF의 95%) 애니메이션에서 차이는 거의 0에 가까운 크기로 압축됩니다.
- GIF 색 팔레트는 디더링 지옥입니다. 부드러운 그라데이션이 LZW 코더가 압축 하지 못하는 줄무늬 노이즈로 변합니다. MP4에는 이 제약이 없습니다 — 채널당 8비트의 풀 YUV 색공간을 씁니다.
다운로드 크기를 넘어선 성능 영향
파일 크기는 첫 비용일 뿐입니다. 디코더 쪽도 중요합니다:
- 디코드 CPU. GIF는 프레임마다 소프트웨어 디코드 후 합성해야 합니다. MP4는 모든 모던 디바이스에서 하드웨어 디코드(YouTube를 처리하는 것과 같은 실리콘)됩니다. 모바일 에서는 한 탭이 애니메이션을 재생하는 동안 배터리를 5% 빨아먹느냐 0.5%만 쓰느냐의 차이입니다.
- 메모리. 긴 GIF는 재생 중 전부 메모리에 들고 있습니다 — 50MB GIF는 50MB+를 먹습니다. MP4는 재생하면서 스트리밍합니다.
- 매끄러움. 하드웨어 비디오 디코드는 안정적인 60fps를 칩니다. 소프트웨어 GIF 디코드는 저사양 디바이스에서, 특히 페이지에 GIF 수십 개가 있을 때(쇼핑몰의 상품 썸네일을 생각해보세요) 자주 프레임을 떨굽니다.
Lighthouse / Core Web Vitals 관점
Google의 Core Web Vitals는 빠른 로드를 보상합니다. 히어로 섹션의 2MB GIF는 GIF가 표시되기 시작할 때까지 브라우저가 렌더링을 막기 때문에 LCP(Largest Contentful Paint) 점수를 망칠 수 있습니다. 그 GIF를 MP4로 변환하고 autoplay loop muted playsinline으로 두면 페이로드를 90%+ 줄이고 LCP 회귀를 제거합니다.
히어로 GIF를 MP4로 바꾸는 것만으로 한 페이지에서 Lighthouse 점수가 60에서 90+로 뛰는 사이트들을 봤습니다. 브라우저는 여전히 애니메이션처럼 다루고, 사용자 경험은 동일하며, 대역폭 청구서는 급감합니다.
드롭인 대체: 마크업
GIF처럼 자동재생/루프/무음으로 동작하는 MP4의 HTML:
<video autoplay loop muted playsinline src="animation.mp4"></video>
네 속성 모두 의미가 있습니다:
autoplay— 즉시 재생.loop— 끝나면 재시작(GIF처럼).muted— 2018년 이후 iOS와 대부분 브라우저의 자동재생에 필수.playsinline— iOS가 탭 시 풀스크린으로 열지 못하게.
변환하지 말아야 할 때
- 이메일. 대부분의 메일 클라이언트는 여전히 인라인 비디오를 지원하지 않습니다. 여기서는 GIF가 왕입니다.
- 비-브라우저 뷰어에서 렌더링되어야 하는 문서. 일부 마크다운 미리보기, 임베드 위젯, 채팅 앱은 GIF는 되지만 MP4는 안 됩니다.
- 투명 배경이 필요한 애니메이션. MP4는 투명도를 지원하지 않습니다. 애니메이션 WebP나 VP9-alpha의 WebM을 쓰세요.
변환 방법
일회성 변환에는 저희 GIF → MP4 변환 도구가 WebCodecs API 또는 ffmpeg.wasm으로 브라우저에서 전부 실행됩니다. 업로드 없음, 제3자 서버 없음. CI에 넣을 수 있는 풀 파이프라인의 정석 명령은:
ffmpeg -i input.gif -movflags faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" output.mp4
-pix_fmt yuv420p는 Safari가 결과물을 재생할 수 있도록 보장하고, scale 필터는 H.264가 요구하는 짝수 차원을 강제합니다.
결론
GIF는 관성과 이메일에 의해 살아 있는 박물관 전시품입니다. 그 외 어디든 — 블로그, 마케팅 페이지, 문서, 제품 UI — GIF를 MP4로 바꾸면 인지 가능한 품질 손실 없이 10~20배의 파일 크기 감소를 가져옵니다. 변환은 몇 초면 끝나고, 성능은 모든 방문에서 누적됩니다.