영상 편집이 브라우저 탭 안으로 들어왔습니다
웹의 역사 대부분에서 “온라인으로 영상 편집”이란 곧 “영상을 우리에게 업로드하라”는 뜻이었습니다. 파일이 서버로 가고, 거기서 무언가 일어나고, 링크가 돌아옵니다. 이 방식에는 명백한 문제가 있습니다. 낯선 곳에 넘기고 싶지 않은 자료라면 곤란하죠. 사내 소프트웨어를 담은 화면 녹화, 아이들 영상, 고객 프로젝트의 클립 같은 것들 말입니다. 덜 명백한 문제도 있습니다. 400MB 파일을 가정용 회선으로 올리는 데 편집 자체보다 오래 걸립니다.
WebCodecs가 그것을 바꿨습니다. 브라우저가 이미 영상 재생에 쓰고 있던 하드웨어 인코더와 디코더에 자바스크립트가 직접 접근할 수 있게 해 주는 API입니다. 덕분에 브라우저 탭이 프레임을 디코딩하고 손본 뒤 다시 인코딩하는 일을, 서버가 어느 단계에도 개입하지 않은 채 해낼 수 있게 되었습니다.
이 글은 그것이 실제로 어떤 모습인지에 대한 이야기입니다. 이 사이트의 영상 도구 세 가지가 무엇을 하고 서로 어떻게 다른지, 그리고 브라우저 편집이 여전히 부딪히는 한계가 어디인지를 다룹니다.
같은 파이프라인, 다른 목적지
영상 편집기, 영상 압축기, GIF 만들기는 세 개의 별도 도구로 보이고, 쓰는 입장에서는 실제로 그렇습니다. 그런데 속을 보면 대부분의 기계장치를 공유합니다. 자르고 순서를 바꾸는 타임라인 컴포넌트 하나, 크롭과 자막을 담당하는 공유 레이어 하나입니다. 인코딩은 어느 경우에나 메인 스레드 바깥의 웹 워커에서 이루어지므로 처리 중에도 페이지가 반응합니다. 편집기와 압축기는 WebCodecs 워커를 함께 쓰고, GIF 만들기는 자체 워커를 씁니다.
다른 것은 목적지입니다.
| 도구 | 입력 | 출력 | 쓸 때 |
|---|---|---|---|
| 영상 편집기 | MP4, MOV, M4V | MP4 (H.264) | 자르고 잇고 크롭하고 자막을 넣을 때 |
| 영상 압축기 | MP4, MOV, M4V | MP4 (H.264) | 파일이 너무 커서 보낼 수 없을 때 |
| GIF 만들기 | MP4, MOV, M4V | GIF | 받는 쪽이 영상을 받지 않을 때 |
마지막 줄은 한 번 짚고 갈 만합니다. GIF는 기술적으로 더 나은 선택인 경우가 거의 없습니다. 저쪽에서 영상 파일을 거부할 때 어쩔 수 없이 고르는 선택지죠. 이에 대해서는 아래에서 더 다룹니다.
”압축”이 실제로 조절하는 것
압축기에는 세 가지 품질 설정이 있는데, 그것이 하나가 아니라 두 가지를 동시에 바꾼다는 점을 알아 둘 가치가 있습니다.
| 설정 | 목표 영상 비트레이트 | 출력 해상도 |
|---|---|---|
| 낮음 | 500 kbps | 원본 가로·세로의 절반 |
| 보통 | 1,500 kbps | 4분의 3 |
| 높음 | 3,000 kbps | 그대로 |
둘 중 영향이 큰 쪽은 해상도를 절반으로 줄이는 것입니다. 픽셀의 4분의 3이 사라지기 때문입니다. 낮음 설정이 파일을 극적으로 줄이는 반면 보통은 훨씬 완만한 이유가 이것입니다. 비트레이트 차이는 3배인데 그 위에 픽셀 차이 2.25배가 더 곱해집니다.
실용적인 결론은 이렇습니다. 전체 화면으로 볼 영상이라면 높음을 쓰고 감량이 적은 것을 받아들이세요. 채팅창이나 슬라이드에 들어갈 것이라면, 실제로 보이는 크기에서는 낮음이 구별되지 않는 경우가 많고 파일은 훨씬 작아집니다.
오디오는 따로 재인코딩되며 낮음에서 128 kbps, 그 외에는 192 kbps입니다. 아주 짧은 클립이 아닌 한 전체에서 차지하는 비중은 작습니다.
아무도 보지 못하는 코덱 협상
브라우저 인코딩에는 데스크톱 소프트웨어에 대응물이 없는 특징이 하나 있습니다. 원하는 코덱을 쓸 수 있다고 가정할 수 없다는 것입니다. 하드웨어 인코더 지원은 기기와 운영체제, 브라우저마다 다르고, 같은 브라우저의 같은 코드가 어떤 노트북에서는 되고 어떤 노트북에서는 안 됩니다.
워커는 이를 먼저 물어보는 방식으로 처리합니다. 비트당 화질이 가장 좋은 구성인 H.264 하이 프로파일을 먼저 요청하고, VideoEncoder.isConfigSupported()를 호출해 이 기기가 그것을 할 수 있는지 확인합니다. 답이 아니라면 더 오래되고 약간 덜 효율적이지만 사실상 어디서나 지원되는 베이스라인 프로파일로 물러섭니다.
사용자는 이 과정을 전혀 보지 못합니다. 하지만 5년 된 안드로이드 휴대폰에서도 최신 맥북에서와 마찬가지로 도구가 동작하는 이유이고, 브라우저 API가 네이티브 애플리케이션과 어떻게 다른지 잘 보여 주는 대목이기도 합니다. 설치 시점에 가정하는 대신 실행 시점에 능력을 협상합니다.
GIF가 그토록 커지는 이유
GIF 만들기는 사람들이 가장 놀라는 도구입니다. GIF는 1987년의 형식이고, 전화 접속 시대에는 말이 되었지만 지금은 거의 말이 되지 않는 제약을 지고 있기 때문입니다.
가장 큰 제약은 색입니다. GIF 프레임 하나에는 최대 256가지 색만 들어갈 수 있습니다. 영상을 변환한다는 것은 프레임마다 팔레트를 만들고 모든 픽셀을 가장 가까운 항목에 대응시키는 일이며, 여기 인코더가 하는 일이 정확히 그것입니다(MIT 라이선스의 omggif를 사용합니다). 단색 면과 또렷한 경계는 그 과정을 잘 견딥니다. 인터페이스 화면 녹화가 깔끔하게 변환되는 이유죠. 피부톤과 그러데이션은 견디지 못합니다. 연속적인 범위를 정해진 몇 개의 값으로 근사해야 하고, 그 결과가 눈에 보이는 띠로 나타납니다.
두 번째 제약은 GIF에 프레임 간 압축이라 할 만한 것이 없다는 점입니다. 현대 영상은 온전한 프레임 하나를 저장한 뒤 무엇이 바뀌었는지만 기술합니다. GIF는 각 프레임을 거의 통째로 저장합니다. 그래서 파일 크기가 프레임 수에 거의 비례하고, 5초짜리는 정말로 1초짜리의 다섯 배입니다.
이 두 가지를 합치면 흔히 듣는 조언이 나오는데, 순서를 정해 말할 가치가 있습니다. GIF를 줄이려면 이 순서로 하세요.
- 길이를 자르세요. 1초를 덜어 내는 것이 이 목록의 다른 무엇보다 대가가 적습니다.
- 프레임 레이트를 낮추세요. 화면 녹화라면 10~15fps면 충분하고, 10 아래로 가면 끊김이 사람들이 알아채는 바로 그것이 됩니다.
- 가로 크기를 줄이세요. 폭 절반이면 픽셀은 4분의 1이지만 글자가 금세 읽을 수 없게 됩니다.
그리고 정직한 권고 하나. 받는 쪽이 MP4나 WebM을 받는다면 그쪽을 보내세요. 같은 클립이 흔히 10분의 1 크기에 더 나은 화질이며, 두 형식 모두 브라우저에서 소리 없이 반복 재생됩니다. GIF에 마지막으로 남아 있던 실질적 장점이 그것이었습니다.
기기에 남는 것과 남지 않는 것
세 도구 모두 파일을 전적으로 사용자의 기기에서 처리합니다. 워커의 의존성은 도구를 열 때 CDN에서 끌어오는 것이 아니라 이 도메인에서 제공되므로, 도구를 여는 것만으로 제3자에 접속하는 일이 없고 영상 자체는 어디로도 전송되지 않습니다.
이 성질은 마케팅 문구가 아니라 이 접근 방식 전체의 요점입니다. 사람들이 가장 편집하고 싶어 하면서 가장 업로드하고 싶지 않은 자료에 쓸 수 있다는 뜻이기 때문입니다. 사내 도구나 고객 데이터가 담긴 화면 녹화, 비밀유지 계약이 걸린 것, 가족 영상 같은 자료 말입니다.
여기에는 분명히 말해 둘 대가가 있습니다. 처리 속도가 서버 팜이 아니라 본인 하드웨어에 달려 있으므로, 오래된 노트북에서 긴 클립은 시간이 걸리고 작업 중에는 탭을 열어 두어야 합니다. 파일을 업로드받는 서비스는 당신의 기기보다 많은 CPU를 투입할 수 있습니다. 연산력을 프라이버시와 맞바꾸는 것이며, 사람들이 실제로 편집하는 것들 대부분에는 그럴 만한 거래입니다.
아직 남아 있는 한계
시작하기 전에 알아 둘 만한 한계가 셋 있습니다.
받는 형식의 목록이 짧습니다. 세 도구 모두 MP4, MOV, M4V만 받습니다. WebM이나 AVI, MKV 같은 다른 컨테이너에 담긴 파일은 안의 영상이 아무리 평범해도 먼저 변환해야 합니다.
긴 파일에는 인내와 메모리가 필요합니다. 프레임을 순서대로 디코딩하고 처리하고 다시 인코딩하므로, 메모리가 넉넉하지 않은 휴대폰은 길고 해상도 높은 클립에서 데스크톱과 다른 방식으로 힘겨워합니다.
MP3는 출력으로 제공되지 않으며, 이것은 기술적 결정이 아니라 라이선스에 관한 결정입니다. AAC 인코딩은 브라우저에 내장되어 있지만 MP3 인코딩은 그렇지 않고, 그것을 더해 주는 라이브러리들은 이 사이트가 받아들이지 않는 조건을 달고 있습니다. 그래서 오디오 추출 도구는 AAC 오디오를 담는 M4A를 만들며, 이는 사실상 어디서나 재생됩니다. 어차피 둘 중 나은 형식이기도 합니다. MP3가 여전히 앞서는 유일한 지점은 20년 전에 만들어진 기기에서의 재생뿐입니다.
써 보기
보낼 수 없는 파일이 있다면 영상 압축기부터, 클립을 자르거나 이어야 한다면 영상 편집기를, 받는 쪽이 GIF를 고집한다면 GIF 만들기를 쓰세요. 아무것도 업로드되지 않고 계정도 필요 없으며, 작업하는 동안 네트워크 탭을 열어 두면 그 두 가지를 직접 확인할 수 있습니다.