웹어셈블리와 FFMpeg

FFmpeg 이란?

동영상의 인코딩과 디코딩을 하는 프로그램 중 하나이며 가장 유명한 오픈소스 라이브러리이다.
사실상 업계 표준이며 독점적인 위치에 있다고 볼 수 있다.

웹사이트에서 FFmpeg을 쓰는 이유

웹사이트에서 FFMPEG을 쓰게 되는 이유는 바로 트래픽 절감이다.
움짤(GIF)포맷은 나온지 20년이 가까이 된 포맷이라 최적화, 화질 등에서 좋지 못하지만 움직이는 그림이라는 이라는 독점적인 지위때문에 아직도 사용자들이 많이 사용하고 쓰이고 있는 포맷이기 때문이다.
APNG, WebP 등 GIF의 위치를 차지하려는 후발주자의 포맷들은 드문드문 나오긴 했지만
다양한 웹환경(IE, Safari, Chrome, FireFOx, Opera, Edge 등…)에서 전부 다 지원하지 못하는 이미지 포맷이기에 묻혀버렸으며, GIF의 아성을 뛰어넘지 못하던 그때 대부분의 결론은 이거였다.

동영상으로 변환 하는것이 낫다

어차피 움직이는것이라면 동영상 포맷으로 변환하는것이 낫다는것이다.
HTML5의 등장으로 Video태그가 지원되기 시작했고 대부분의 브라우저에서 영상 보기가 가능해졌기 때문이다.
그 중에서 용량을 가장 최적화 할 수 있는 포맷은 구글에서 공개한 WebM 등(유튜브에서 주로 인코딩 되는 포맷이다)이지만 MAC기반 운영체제의 브라우저들은 지원이 미약하여 GIF의 자리를 뻇어오기 힘든 포지션이다.
그 중 MP4(H264) 포맷은 IE, Safari, Chrome 등 주요 브라우저들이라면 모두 지원하며, 용량 최적화는 WebM보다는 떨어지지만 GIF에 비교하면 상당한 용량 절감(최소 2~3배에서 많게는 10배까지 압축해준다)을 보이기에 가능하다면 변환해서 보여주는 것이다.

한국웹에서 FFmpeg의 문제점

트래픽이 신경 쓰이는 사이트란 어디일까?
바로 중소규모 사이트일 것이다.
물론 대형사이트도 마찬가지겠지만 대형사이트의 경우 직접 서버를 돌리거나, 클라우드 서버를 돌리거나 하여 과도한 트래픽, 대용량에 대해 대비가 되어있는 경우가 많지만
중소규모 사이트의 경우 단순히 웹호스팅환경에서 제한된 트래픽으로 운영하기 때문이다.

이러한 사이트에서 가장 트래픽을 많이 발생시키는 요소는 움짤(GIF)이며 대부분의 사이트에서는 이러한 그림파일에 대한 용량제한이 있는것을 볼 수 있다.

문제점이란 무엇인가.
바로 해당 FFMPEG이 백앤드, 즉 서버에서 실행시켜야 하는데 우리나라 웹호스팅(CAFE24, DOTHOME 등…)에서는 해당 FFMPEG을 설치하고 실행시킬 루트권한이 없다는 것이다.

웹어셈블리(WebAssembly)와 FFmpeg

FFMPEG은 업계 표준에 가까운 동영상 인(디)코딩 포맷이기에 다양한 언어에서 활용할 수 있다.
C는 물론이고 Rust 등의 언어에서도 활용할 수 있다
즉, 웹의 클라이언트 단에서 FFMpeg을 실행시킬 수 있다는 말이 된다.
물론 순수한 자바스크립트로도 FFmpeg을 실행할 수 있으며 이것은 7년전 정도쯤에 깃헙에 공개되어있기도 하다.
하지만 해당기술을 활용할시 변환에 시간이 지나치게 걸려서 클라이언트 단에서 동작한다는것을 알려주는 정도일뿐이다.
아래에서 보여줄 그림을 변환하는데 30초에서 40초 이상의 시간이 걸린다.
자바스크립트 FFmepg
아직까지현재 WebAssembly는 일부 환경에서는 충분히 실사용할만 하지만 보편적으로 활용되기에는 무리가 있으며
마찬가지로 WASM로 포팅된다고 해서 해당 기능을 100% 활용하기는 어려운 편이다.

계속 발전하고 있는 기술이기에 언젠가는 클라이언트단에서도 간단한 프로그램들을 실행시켜 서버의 과부하를 줄여줄것이라 기대한다.

용량은 4.55MB->340KB의 절감을 보였으며 변환 시간은 대략 5~10초(클라이언트에서 동작하므로 클라이언트컴퓨터 사양에 영향을 많이 받는다)가 되었다.

물론 아직까진 실사용에 무리가 있지만 앞서 말한 순수한 자바스크립트에 비해 속도가 월등하며 지금도 발전하고 개선되고 있기에 조금 뒤의 미래에는 충분히 활용할 가치가 있을 것이다.

다음글에선 일반웹환경과 vue3에서 활용하는 방법을 예제와 함께 알아보겠다.