며칠 전부터 마참내 디씨에서 webp를 지원하기 시작했다.

벌써부터 기존에 이용하던 gif에서 webp로 갈아타는 사람들도 보이고, 한편 webp와 gif에 어떤 차이가 있는지 잘 모르는 사람도 있는 거 같다.

그래서 개인적으로 webp를 사용하면서 느꼈던 점, 다른 종류의 애니메이션 파일과 어떤 차이가 있는지 그리고 어떻게 사용해야 하는지를 간단하게 정리해 보려 한다.



우선 webp는 정적인 이미지 파일과 동적인 이미지 파일을 모두 지원하는 파일 포맷이다.


동적인 이미지를 지원한 최초의 파일 포맷은 1987년에 나온 gif인데, 그동안 swf, apng, 동영상 등 다양한 유사 파일 포맷이 나왔음에도 아직까지도 동적인 이미지 부분에선 독보적인 위치를 차지하고 있다.

그 이유는 오랜 기간 거의 유일하게 표준화된 동적 이미지 파일이었고, 구조가 간단해 사용이나 도입이 쉬웠기 때문이다.


그럼에도 구조가 간단했기 때문에 이후에 나온 포맷에 비해 압축률이 떨어지고, 한 프레임 당 256색 밖에 지원하지 않는 등 옛날에 개발된 포맷이라 단점도 많았다.


그러던 중 구글에서 트래픽 사용량을 줄이기 위해 webp와 webm 포맷을 개발했는데, 이후 webp에 애니메이션 기능도 추가하면서 gif의 대체재로 각광받게 된다.



이제 실제 이미지들을 살펴보면서 webp의 특징들을 알아보자.


gif, 18.9MB


webp, 11.0MB


아마 이 두 짤로 두 포맷의 전반적인 장단점을 간단하게 요약할 수 있을 거 같다.

우선 모바일로 들어와서 바로 이 부분부터 보면 알겠지만 gif에 비해 webp의 로딩 속도가 길다.

webp의 가장 큰 문제점인데, gif가 구식 알고리즘을 써서 압축률이 낮긴 하지만 그만큼 로딩이 빨라진다는 장점이 있는 반면, webp는 동영상 압축 알고리즘을 사용해 압축률을 높였지만 그만큼 기기 자원을 더 잡아먹어 로딩이 더 오래 걸린다는 단점이 있다.


다음으로 gif에 비해 webp의 용량이 상당히 낮은 걸 알 수 있는데, 위에서 얘기한 것처럼 webp에는 동영상 압축에 사용되는 알고리즘이 이용되어 동영상 만큼은 아니지만 gif에 비해선 압축률이 높다.


또 webp의 색감이 gif보다 훨씬 낫다. 이 점은 webp가 좋기 때문이라기 보다는 gif가 한 프레임 당 256색밖에 지원하지 않는 병신같은 포맷인 게 크다.


gif 이미지의 한 부분을 캡쳐한 것인데, 오른쪽 이펙트를 보면 초록색 점이 잔뜩 찍혀있는 걸 알 수 있다.


gif는 한 프레임 당 256색의 팔레트를 사용할 수 있지만, 일반적인 이미지나 동영상은 일반적으로 트루칼라, 즉 16777216가지 색을 사용할 수 있다.

이 때 단순하게 팔레트에서 원본의 색에 가장 가까운 색을 사용해 칠하게 되면 색이 불연속적이고 원본의 다양한 색감을 살리지 못하게 된다.


위처럼 이펙트의 색이 불연속적으로 나타나는 걸 알 수 있다.

이를 방지하기 위해 보통 여러 색을 섞어 원본의 색감을 나타내는 디더링을 하는데, 이것도 완벽하진 않아서 위의 gif처럼 아주 다양한 색이 사용된 경우엔 작은 점들이 찍힌 모습이 육안으로 보이게 된다.


정리하면 어떤 경우든 webp가 gif에 비해 색감 면에서 훨씬 우월하다.


이외에도 웹에서 gif로 구현 가능한 가장 짧은 프레임의 시간이 20ms인 데 반해 webp는 11ms로 더 짧아서 비록 눈에 잘 띄진 않겠지만 더 자연스러운 움직임을 구현할 수 있다.


그렇다면 로딩 속도를 제외하고 webp는 gif에 비해 모든 면에서 나은가? 하는 질문이 나올 수 있는데, 꼭 그렇진 않다.




webp, 1.3MB


gif, 300.9KB


위의 경우처럼, gif가 webp보다 파일 크기가 훨씬 작은 경우가 존재한다.

그 이유는 gif의 몇가지 최적화 방식 때문인데, webp가 동영상 파일이라면 gif는 일종의 슬라이드쇼라고 할 수 있다.

그래서 한 이미지에서 다음 이미지로 넘어갈 때 어떻게 대체할 지에 대한 옵션을 지정할 수 있는데, 변화하는 부분이 일부일 경우 그 부분을 사각형으로 지정해 그곳만 새로 그리도록 하는 옵션이 존재한다. 이런 최적화를 거친 gif는 webp보다 용량이 작을 수도 있고, 위가 바로 그 최적화의 덕을 톡톡히 본 케이스다.


물론 이런 최적화를 한다고 해서 webp보다 파일 크기가 줄어드는 경우는 흔치 않고, 보통 동영상에서 변환하기 때문에 상하좌우 끝부분에 조금이라도 색이 변하면 용량이 거의 줄어들지 않는다. 거기다 이런 최척화를 거친 gif도 거의 없어서 그냥 아주 특수한 경우를 빼곤 webp가 gif보다 파일 크기가 작다고 기억하면 된다.




추가로, webp에도 jpg, png처럼 손실, 무손실 포맷이 있다. 손실은 동영상 압축 알고리즘인 VP8을 활용한 것이고 무손실은 구글에서 따로 개발한 방식인데, 간단히 말하면 일반적인 경우 손실이 무손실보다 용량이 작다.


왜 또 '일반적'이냐면, 무손실이 손실에 비해 크기가 작아지는 경우가 종종 있기 때문이다.



첫번째로 광장히 단순한 색으로만 이루어진 이미지다.


무손실, 168.1KB


손실, 최저화질, 251KB


이것처럼 광장히 단순한 색으로만 구성된 이미지의 경우 무손실의 압축 효율이 크게 좋아지기 때문에 용량을 최대한 줄이기 위해 최저화질로 인코딩한 손실 이미지보다도 용량이 작은 경우가 있다.



두번째는 가까이 있는 픽셀 간 색 차이가 큰 이미지다.


보통 gif인 이미지를 다시 webp로 변환하면서 일어나는데, 심하게 디더링된 이미지는 무손실보다 압축 효율이 떨어져서 오히려 원본 gif보다 용량이 커지거나

무손실, 23.8KB


손실, 61.7KB


아니면 노이즈가 심한 경우 뭉개져서 화질이 심하게 떨어지는 경우가 있다.

무손실 압축 후 png 변환


손실, 최고 화질 압축 후 png 변환


이는 webp만의 문제가 아니라 jpg, mpeg 등 다른 손실 압축 알고리즘에도 자주 일어나는 문제니 혹시 이런 이미지를 다룰 일이 있다면 유의하자. 다만 webp의 경우 이런 문제가 좀 더 두드러지긴 한다.



위와 같은 경우를 제외하면 손실이 무손실보다 커지는 경우는 거의 없지만, gif에서 webp로 바꾸는 건 꽤 자주 일어나서 주의할 필요가 있다.

반대로 말하면 무손실 webp는 1. 무손실 이미지를 더 작은 크기로 바꾸고 싶을 때 2. 단순한 색으로 된 이미지를 webp로 변환할 때 3. 심하게 디더링되거나 노이즈가 낀 이미지를 webp로 변환할 때 쓴다고 볼 수 있다.


종합하면 일반적인 손실 webp가 최고의 효율을 발휘하는 경우는 동영상 파일을 바로 webp로 변환하는 경우다.

gif를 거치거나 무손실 영상을 손실 webp로 변환하는 경우에는 화질열화나 용량 증가를 겪을 수 있다.




그렇다면 webp 파일은 어떻게 만들수 있을까?

가장 간단한 방법은 gif 제작에도 많이 이용되는 ezgif를 이용하는 방법이다.

https://ezgif.com/video-to-webp

다만 웹앱인 만큼 크기 제한이 걸려 있어서 큰 이미지나 긴 webp를 만들기에는 부적합하다.


원도우즈라면 오픈소스 캡쳐 프로그램도 있다.

https://github.com/NickeManarin/ScreenToGif

캡쳐와 동시에 webp로 변환 가능하고, 편의기능도 괜찮아서 좋은 것 같다.


귀찮은 것도 괜찮으니 세부적인 부분을 직접 설정하고 싶을 경우엔 ffmpeg가 제일 나을 것이다.

커맨드는 아래에서 조금씩 변형해서 사용하면 된다.

ffmpeg -i input_file -vcodec libwebp -lavfi "fps=25,scale=960:-1:flags=lanczos" -loop 0 -lossless 0 -q:v 90 -compression_level 4 -an -vsync 0 output_file.webp


각 부분의 의미는 다음과 같다.

-lavfi : webp로 변환하기 전에 간단한 필터를 적용하는 부분이다. 전처리가 필요없다면 이 부분과 뒤에 큰따옴표로 싸인 부분은 날려도 된다.

fps=25 : fps를 25로 설정한다.

scale=960:-1:flags=lanczos : 가로를 960 픽셀로 하고 비율을 동일하게 유지해서 크기를 바꾼다. 이 때 interpolation은 lanczos로 한다. 다른 interpolation 방법도 있지만 webp로 만드는 경우는 짧은 영상이라는 뜻이니 크게 속도 차이가 나진 않을 것이다.


-loop 0 : 반복횟수를 설정한다. 0이면 무한반복, 그 외에는 지정한 횟수만큼 반복된다.

-preset default: 기본적으로 설정된 프리셋을 선택할 수 있다. 이걸 설정하면 이후의 화질 및 압축 설정이 무시되니 주의해야 한다.

-lossless 0 : 무손실압축을 설정하는 부분이다. 1이면 무손실, 0이면 손실이다.

-q:v 90: 손실의 경우 용량과 화질 중 어느쪽에 더 중점을 둘 것인지를 설정하고, 무손실의 경우 얼마나 압축할 것인지를 결정한다. 최소 0, 최대 100이고 기본값은 75이며, 대부분의 경우 손실에선 90정도만 해도 충분히 높은 화질을 얻을 수 있다.

-compression_level 4 : 인코딩 속도와 용량 중 어느쪽에 중점을 둘 지를 결정한다. 최소 0, 최대 6, 기본값은 4이며 보통 기본값이어도 충분하다.

-an -vsync 0 : 오디오를 제거하고 싱크를 유지한다. 바꿀 필요 없다.



이렇게 대충 정리가 됐다.

webp가 사실 그렇게 효율이 좋은 편은 아니라 다른 차세대 이미지 포맷인 heif나 avif들한테 자주 비교당하지만, 그래도 현재 사용되는 움직이는 이미지 포맷들 중에서는 화질, 용량, 범용성 등 모든 면에서 가장 나은 포맷이한 건 변함이 없다.

구글 쪽에서 개발한 포맷이라 애플 쪽 지원이 늦었지만 이제 최신 ios에서도 지원하는 만큼 많이 사용돼서 낮은 화질의 gif들을 하루빨리 대체할 수 있길 바란다.





3줄 요약:

1. webp는 용량, 효율성, 색 보존 등 재생속도와 호환성 부분을 제외하면 거의 언제나 gif보다 나음

2. 이미 gif인 이미지들은 webp로 변환 시 용량이 더 커질 수도 있으니 주의

3. webp 제작에는 ezgif(영상->webp), ScreenToGif(캡쳐 프로그램), ffmpeg(영상->webp) 등이 괜찮음