움직이는 Webp를 만들어 보자(GIF 용량 줄이기)

움직이는 GIF는 만들기도 쉽고 활용하기도 쉬워 오랫동안 사용해 왔지만, 큰 용량 덕에 쓰기가 부담스러웠어요. 이제 움직이는 Webp 포맷을 사용하세요. 기존 GIF 대비 80% 이상 파일 용량을 줄일 수 있습니다.

움직이는 Webp의 장점

GIF 포맷은 압축 효율이 낮아 용량이 클 수밖에 없어요. Webp 포맷을 사용하면 GIF보다 더 나은 압축 효율로 파일 크기가 작아집니다. 또한 24비트 컬러 지원으로 색상이 더 풍부하고 부드럽게 표현됩니다.

움직이는 Webp는 GIF와 방식은 동일하지만, 더 부드러운 애니메이션이 가능하고 더 나은 투명도도 제공합니다. 투명한 GIF는 가장자리가 거칠게 표현되죠. Webp는 알파 채널을 포함한 투명도 지원이 가능하여 부드러운 가장자리를 표현할 수 있어요.

호환성 측면에서는 아무래도 역사가 있는 GIF가 유리하지만, Webp도 모든 최신 브라우저에서 지원이 가능해요. 단, 일부 오래된 브라우저(ex. ie 6~11)에서는 지원하지 않을 수 있습니다.

IE에서 WebP를 사용하는 방법

움직이는 Webp 만들기

webp 애니메이션을 만드는 방법은 여러 가지가 있지만, 가장 쉽고 빠른 방법은 ezgif 웹사이트를 활용하는 것인데요. 이를 이용한 Webp 제작 및 변환 방법을 소개합니다.

별도의 계정 생성이나 로그인 없이 바로 쓸 수 있어요. 사이트에 접속한 후 GIF 또는 MP4 파일을 드래그 앤 드롭으로 업로드 후 프레임 속도, 품질 등 설정 조정을 거쳐 Webp를 생성하여 다운로드하면 됩니다.

이미 가지고 있는 GIF의 용량을 다운시킬 때에도 유용해요.

GIF – Webp 변환하기

화면을 녹화하여 Webp 만들기

영상 등 움직이는 화면을 바로 녹화(캡쳐)하여 바로 움직이는 Webp로 만들 수도 있어요. 반디소프트의 꿀뷰를 쓰는 방법이 있는데요. 국내산 프로그램으로 안심하고 쓸 수 있지만 유료 결제가 아닌 이상 반디소프트 로고가 붙습니다.

1. 녹화 탭을 누르면 빈 프레임이 나와요.
2. 만드려는 영역에 프레임을 맞춰주고 ‘녹화 시작’ 버튼을 누릅니다.
3. 저장 포맷을 Webp로 바꾸고 저장합니다.

로고 붙이기가 영 탐탁지 않다면 외산 프로그램 ScreenToWebP를 사용하면 돼요. 사용법은 꿀뷰와 같습니다. 아래 링크에서 다운로드하시면 되고요. 크롬으로 받으시는 게 좋아요.

ScreenToWebP

그 외 방법

포토샵에서 움직이는 Webp를 만드는 방법은 없는 거 같아요. 하지만, 포토샵에서 MP4로 내보낸 후 온라인 사이트를 이용하여 변환하면 간단히 해결돼요. 이 외 FFmpeg 프로그램으로 변환하는 방법이 있는데요. 설치형 프로그램이라 ezgif보다 번거롭긴 하겠지만, 비트 레이트, 퀄리티, 압축 수준 등 보다 세세한 설정이 가능하다고 합니다.

움직이는 Gif, Webp 파일 크기 비교

5초 분량 mp4 파일 변환 시 최대 조건 원본 사이즈로 변환 시 무려 20M의 차이를 보였습니다. 물론, 물리적인 사이즈에 따른 화질 차이는 있을 수 있습니다. 하지만, 애니메이션 이미지 파일은 그 용도 상 화질이 중요하지 않은 경우가 대부분이죠.

파일 해상도를 줄여도 80% 이상 차이가 나는 걸 알 수 있었습니다.

결론

WebP는 GIF보다 압도적으로 용량이 작아 웹사이트 로딩 속도를 개선하고 저장 공간을 절약하는 데 유리해요. 손실 압축 WebP를 사용하면 80% 이상까지 용량 절감 가능하므로, 애니메이션을 웹에 최적화할 때 움직이는 WebP 사용을 추천합니다!