블로그 글이나 문서를 쓰다 보면 움직이는 장면을 넣어야 할 때가 있죠. 그때마다 GIF로 만들지, 그냥 동영상으로 올릴지 고민하게 되는데, 저는 대략 이런 기준으로 고릅니다.
한 줄로 먼저
- 짧고(10초 안쪽), 소리가 필요 없고, 이미지처럼 아무 데나 붙여야 하면 → GIF
- 길거나, 소리가 필요하거나, 색감과 화질이 중요하면 → 동영상(MP4)
나머지는 이 기준이 왜 나왔는지에 대한 설명입니다.
GIF가 큰 이유
GIF는 1987년에 나온 이미지 포맷이에요. 한 장에 최대 256색만 쓸 수 있고, 장면과 장면 사이에서 바뀐 부분만 똑똑하게 저장하는 압축이 거의 없습니다. 반면 MP4 같은 동영상 포맷은 바로 그 “바뀐 부분만 저장”이 핵심이라, 같은 장면이면 보통 MP4가 훨씬 작아요.
FFmpeg 글에서 아무 옵션 없이 GIF로 바꿨더니 83.6MB가 나왔던 것도 같은 이유입니다. 팔레트를 잘 잡으면 많이 줄어들긴 하지만, 길이가 길어지면 결국 감당이 안 돼요.
그래도 GIF를 쓰는 이유
이미지처럼 어디든 들어갑니다
GIF는 그냥 이미지라서 이미지가 들어가는 곳이면 거의 다 됩니다. GitHub README나 이슈, 노션, 사내 위키, 마크다운 문서, 메신저에 그대로 붙이면 끝이에요. 동영상은 플레이어를 지원하는 곳에서만 재생되고, 마크다운에서는 따로 링크를 걸어야 하는 경우가 많습니다.
알아서 재생되고 반복됩니다
클릭할 필요 없이 바로 움직이고, 끝나면 다시 처음부터 돕니다. 버튼을 누르는 과정이나 에러가 나는 순간처럼 “이걸 봐 주세요”를 보여 주기엔 이게 제일 편해요.
이메일에서도 대부분 보입니다
이메일 본문에서는 동영상이 거의 재생되지 않아서, 움직이는 걸 넣고 싶으면 사실상 GIF뿐입니다. 다만 일부 아웃룩 데스크톱 버전은 GIF의 첫 장만 보여 주니까, 첫 장만 봐도 내용이 전달되게 만드는 게 좋아요.
동영상이 나은 경우
- 30초가 넘는 긴 영상: GIF로는 용량이 감당이 안 됩니다.
- 소리가 필요한 경우: GIF는 소리를 못 담아요.
- 노을, 피부, 그림자처럼 그라데이션이 많은 실사 영상: 256색으로 줄이면 줄무늬가 생기기 쉽습니다.
- 인스타그램, 유튜브 같은 동영상 중심 서비스: 인스타그램 피드는 GIF 파일 업로드를 받지 않아서 어차피 동영상으로 올려야 해요.
내 사이트에 직접 넣는다면
내 블로그나 홈페이지처럼 HTML을 직접 고칠 수 있으면, 동영상을 GIF처럼 쓰는 방법도 있습니다.
<video autoplay loop muted playsinline>
<source src="demo.mp4" type="video/mp4">
</video>
muted가 있어야 대부분 브라우저에서 자동 재생이 됩니다. 이렇게 하면 GIF처럼 알아서 반복되면서 용량은 훨씬 작아요. 대신 위에서 말한 README, 이메일, 메신저 같은 곳에서는 못 씁니다.
WebP, AVIF는 어때요?
움직이는 WebP나 AVIF는 GIF보다 작고 256색 제한도 없습니다. 브라우저 지원도 많이 좋아졌어요. 그런데 메신저, 이메일, 각종 업로드 창에서는 아직 GIF만큼 어디서나 되는 건 아니라서, 저는 “어디에 붙일지 모를 때”는 아직 GIF를 고릅니다.
정리
| 상황 | 저라면 |
|---|---|
| 버그 리포트, README, 노션에 붙일 짧은 화면 | GIF |
| 메신저로 보낼 짤 | GIF |
| 이메일 뉴스레터 | GIF (첫 장도 신경 쓰기) |
| 30초 넘는 튜토리얼, 소리 있는 영상 | MP4 |
| 인스타그램, 유튜브 | MP4 |
| 내 사이트에 직접 넣는 배경 영상 | MP4 (autoplay loop muted) |
GIF로 정했다면, 용량을 줄이는 설정은 설정 정리 글에 정리해 두었어요.
💬 댓글
자유롭게 의견을 나눠주세요