브라우저 기반 동영상 처리 도구를 구축한 이유

웹용 동영상 도구를 구축하기 시작했을 때, 일반적인 통념은 명확했습니다: 동영상 처리는 서버에서 이루어져야 한다. 파일을 업로드하고, FFmpeg를 실행한 다음, 결과를 반환한다. 간단하고 검증된 방식이지만, 대역폭, 비용, 개인 정보 보호 측면에서 깊은 한계를 가지고 있었습니다.

저희는 더 나은 방법이 있을 것이라고 생각했습니다. 알고 보니, 있었습니다 — 그리고 그것은 줄곧 우리 브라우저 안에 있었습니다.

현 상태: ffmpeg.wasm

지난 몇 년 동안 ffmpeg.wasm은 브라우저 내 동영상 처리의 표준 솔루션이었습니다. FFmpeg를 WebAssembly로 컴파일하여 브라우저에서 FFmpeg의 모든 툴킷에 접근할 수 있게 해줍니다. 작동은 하지만, 상당한 단점이 있습니다:

• 큰 번들 크기: ffmpeg.wasm 코어는 약 25MB이며, 형식별 코덱을 포함하면 30MB 이상으로 늘어납니다.
• 느린 초기화: 어떤 처리도 시작하기 전에 25MB WebAssembly 모듈을 로드해야 함
• 기본적으로 단일 스레드: 하드웨어 가속에 접근 불가
• 메모리 제약: WebAssembly 선형 메모리 제한(4GB)으로 인해 큰 파일에서 문제가 발생
• 하드웨어 디코딩 없음: 소프트웨어 전용 디코드/인코드, GPU 가속이 완전히 누락됨

저희 벤치마크에서 70% 품질의 50MB MP4 동영상 압축은 ffmpeg.wasm으로 45-60초가 걸렸습니다. 나쁘지는 않지만, 아주 좋지도 않았습니다.

WebCodecs 접근 방식

WebCodecs API는 브라우저의 네이티브 미디어 코덱에 직접 접근할 수 있도록 하는 비교적 새로운 브라우저 API입니다 — YouTube, Netflix 및 다른 모든 스트리밍 플랫폼에서 동영상 재생에 사용되는 것과 동일한 코덱입니다. 주요 장점은 다음과 같습니다:

• 하드웨어 가속: 가능한 경우 GPU를 디코딩 및 인코딩에 사용
• 번들 오버헤드 없음: WebAssembly도, 컴파일된 바이너리도 없음 — 네이티브 브라우저 API임
• 빠른 초기화: 즉시 사용 가능, 로딩 시간 없음
• 완벽한 형식 지원: H.264, H.265, VP8, VP9, AV1 — 브라우저가 지원하는 모든 형식

단점은? WebCodecs는 저수준입니다. 디먹싱, 프레임별 인코딩, 컨테이너 포맷팅 등 그 사이의 모든 것을 직접 처리해야 합니다. 이는 많은 복잡한 작업입니다.

mediabunny 등장

저희는 mediabunny를 구축했습니다 — WebCodecs를 간단하고 인체공학적인 API로 감싸는 경량 라이브러리입니다. 복잡한 부분을 처리합니다:

• 자동 디먹싱: 컨테이너 형식을 감지하고 동영상/오디오 스트림 추출
• 프레임 수준 제어: 정밀한 편집을 위해 개별 프레임에 접근
• 스마트 재인코딩: 실시간 진행 상황과 함께 구성 가능한 품질 사전 설정
• 메모리 효율적인 스트리밍: 프레임을 한 번에 모두 처리하지 않고 청크 단위로 처리

성능 비교

전반적으로 3-5배 더 빠르며, 메모리 사용량이 현저히 낮고 번들 오버헤드가 전혀 없습니다.

개인 정보 보호: 핵심 기능

성능도 훌륭하지만, 브라우저 기반 처리를 진정으로 차별화하는 것은 바로 아키텍처에 의한 개인 정보 보호입니다.

서버 기반 도구를 사용하면 데이터를 다른 사람에게 맡기는 것입니다. 아무리 좋은 의도를 가진 서비스라도 서버가 침해되거나, 소환되거나, 잘못 구성될 수 있습니다. VideosKit의 경우:

• 파일은 기기를 절대 떠나지 않습니다 — 파일 업로드를 위한 서버 엔드포인트가 문자 그대로 존재하지 않습니다.
• 쿠키, 추적, 파일 콘텐츠에 대한 분석 없음
• 로드되면 오프라인에서도 작동 — 비행기 안에서, 제한된 네트워크에서, 어디에서든 동영상 처리 가능
• 민감한 콘텐츠에 대한 기업 친화적 — 데이터 상주 또는 규정 준수 문제 없음

개발 과제

이것을 구축하는 데 어려움이 없었던 것은 아닙니다:

대용량 파일 처리

브라우저는 무작위 파일 접근을 제공하지 않습니다. 저희는 전체 파일을 메모리에 로드하지 않고 프레임별로 동영상을 처리하기 위해 File API + 스트리밍을 사용합니다. 이는 신중한 버퍼 관리와 가비지 컬렉션 튜닝을 필요로 했습니다.

크로스 브라우저 호환성

WebCodecs는 Chrome 94+, Edge 94+, Safari 16.4+에서 지원됩니다. Firefox는 버전 130에서 지원을 추가했습니다. 저희는 기능을 감지하고 지원되지 않는 브라우저에는 메시지로 우아하게 대체합니다.

메모리 관리

동영상 프레임은 큽니다 — 단일 4K 프레임은 비압축 상태에서 약 33MB입니다. 저희는 4K 콘텐츠에서도 메모리 사용량을 제어하기 위해 프레임 풀링 및 스트리밍 파이프라인을 구현했습니다.

진행 상황 보고

사용자는 얼마나 기다려야 하는지 알아야 합니다. 저희는 프레임 위치를 기반으로 진행 상황을 보고하여 정확한 실시간 업데이트를 제공하는 콜백 시스템을 구축했습니다.

오픈 소스

VideosKit과 mediabunny는 모두 오픈 소스입니다. 코드를 확인해보세요:

• VideosKit: github.com/nicely-gg/video-tools
• mediabunny: github.com/nicely-gg/mediabunny

기여, 문제 제기 및 피드백을 환영합니다.

브라우저 기반 동영상의 미래

WebCodecs는 여전히 진화하고 있습니다. AV1 인코딩, WebGPU 기반 처리, 개선된 MediaSource Extensions는 브라우저 기반 동영상을 더욱 강력하게 만들 것입니다. 저희는 가능한 것의 경계를 넓히는 데 기여하게 되어 기쁩니다.

아직 VideosKit을 사용해보지 않았다면, videoskit.cc를 방문해보세요. 동영상을 압축하고, 변환하고, 자르고, 검사하는 모든 작업을 — 브라우저에서, 모두 무료로 이용할 수 있습니다.