실무를 하다보면 움직이는 오브제를 배경 요소로 넣어달라는 요청이 오곤 한다.
ex) https://ko.wix.com/transparent-videos
그동안 우리 조직 내에서 권장하는 영상 포맷은 가장 안정성이 높고 압축률이 좋은 mp4였고,
배경이 투명한 움직이는 요소를 써야할 땐 apng로 전달받아 사용하고 있었다.
그러나 apng는 해상도가 커질수록 용량이 커진다는 단점이 있어서 사용에 제약이 있었다.
아니나 다를까 큰 사이즈의 영상을 넣어달라는 요청이 와서 mp4, apng를 가지고 이런저런 시도를 했으나
계속해서 성능상의 이슈에 계속해서 부딪혔다.
그러다 문득 2024년에 아직도 웹에서 투명 배경의 비디오를 지원하지 않을리 없다는 의문이 들었다.
찾아본 결과 아래와 같은 방법으로 영상을 전달받으면 웹에서 투명한 배경의 영상을 사용할 수 있었다!
👉 준비물: 영상을 뽑아줄 디자이너 🤓
1. webm 확장자로 영상을 렌더링한다.
webm은 구글에서 개발한 동영상 포맷이다. VP9 코덱을 지원하며, 알파 배경 처리가 가능하다.
압축률도 높아서 성능 개선 용도로도 사용할 수 있다는 장점이 있다.
다만 아직 safari에서 안정적으로 지원하지 않는다는 문제가 있다.
-> macOS Big Sur의 Safari 15부터 webm/VP9 지원을 하긴 하지만, 알파값을 지원하는 건 아니라고 한다.
우선 영상 1은 webm 확장자로 투명한 부분을 살려 준비한다.
파일명: video.webm
2. mov 확장자, 코덱은 hevc로 설정한 영상을 렌더링한다.
mov는 알파값을 지원하는 확장자이다.
그러나 mov는 웹에서 지원하지 않는 포맷이라 그냥 사용할 수 없다.
만약 mov 파일을 그냥 사용한다면, 웹은 영상을 Mp4파일로 인식하고 투명한 부분을 까맣게 만든다.
투명한 부분을 살리기 위해서는 영상을 뽑을 때 코덱 설정을 hevc로 해주어야 한다.
(💡 어떻게 하는진 나도 모른다!! 디자이너에게 물어보기!)
파일명: video.mov
3. html에서 두 리소스를 넣어주기만 하면 끝!
<video width="600" height="100%" autoplay loop muted playsinline>
<source src="./video.mov" type='video/mp4; codecs="hvc1"'>
<source src="./video.webm" type="video/webm">
</video>중요한 부분은
- mov 파일이 첫 번째 source로 위치해야 한다!
- codecs="hvc1"을 선언해 주어야 한다. 이 코덱이 hevc를 의미한다.
이렇게 하면 모든 브라우저에서 동작하는 투명 배경의 영상을 웹에서 사용할 수 있다!
💡 원리
HTML5 표준에서 공식적으로 지원하는 비디오 파일 형식은 MP4, WebM, OGV 뿐이며, 디폴트 포맷은 MP4이다.
mp4는 압축률이 높고 범용성이 높은 대신 알파값을 지원하지 않는다.
그러므로 mov 등 지원하지 않는 파일이 알파값을 가진채로 들어오면,
기본적으로 MP4 파일로 인식하고 배경을 까맣게 처리한다.
투명 영상 사용에서 문제가 되었던 부분은 크로스 브라우징 처리 시 중요하게 보는 두 브라우저인
💡크롬과 사파리에서 고수하는 표준이 다르다는 점💡이였다.(+IOS의 크롬도 다르다.)
webm 확장자는 구글에서 개발한 포맷이기 때문에 당연히 크롬에서는 지원이 되고
대부분의 브라우저에서도 지원이 되지만, 경쟁사인 Safari에서는 지원이 되지 않는다.
Safari는 MPEG 표준을 고수하고 있어서 HEVC 코덱을 지원하고 있다.
반면에 크롬은 HEVC 코덱을 지원하지 않는다.
(알파 처리에 사용되는 코덱이 webm-VP9, mp4-HEVC 라고 생각하면 된다.)
따라서 mov 파일에 codec을 hevc 로 설정하면, Safari는 mov파일을 mp4로 인식하지만
코덱은 정상적으로 반영되기 때문에 알파값의 처리가 잘 반영된다.
그러나 앞서 이야기했듯 크롬 브라우저에선 HEVC 코덱을 지원하지 않는다.
코덱을 처리할 수 없기 때문에 첫 번째 source를 건너뛰고 webm 파일을 불러오게 된다.
만약 source의 순서가 바뀌면 Sarafi는 webm을 mp4로 인식하거나,
webm을 인식하지만 VP9 코덱을 지원하지 않기 때문에 알파값을 처리하지 못한 채로 나오게 된다.
따라서 꼭 mov가 첫번째에 있어야 한다!
💡 장/단점
⭕️ 장점
- 같은 해상도의 apng 대비 훨씬 적은 용량으로 동일한 품질의 리소스를 사용할 수 있다.
(내 프로젝트의 경우 apng 대비 70%까지 줄일 수 있었다.) - 하드웨어 가속을 사용할 수 있다.
video는 graphics layer가 생성되는 조건이다. 이미지와 별개로 생성되게 만들어 페이지 렌더링을 좀 더 효율적으로 가져갈 수 있다.
(↔️ 이미지에 속하는 apng와 대비되는 장점이라고 볼 수 있다.)
❌ 단점
- 동일한 리소스를 두 개 받아서 관리해야 한다는 점, 리소스에 수정이 생기면 두 개의 리소스를 수정해야 한다.
마치며
원래는 mp4 영상을 canvas에서 크로마키해서 사용하려고 했는데,
크로마키 방법은 해상도가 크게 들어가야 하는 경우엔 사이즈가 커지면서 성능 이슈가 발생한다는 것을 알았다. 그래서 이 방법을 써서 성능 이슈를 해결했다.
(이번 프로젝트의 경우 해상도가 거의 가로 1000~1500, 세로 2000~2500 사이의 영상들이 여러개 들어가야 했다.)
큰 사이즈의 영상이 아니라면 mp4 크로마키 기술을 써서 성능도 챙기고 리소스 관리도 줄이겠지만,
성능에 문제가 생길 정도로 큰 영상이 여러개 들어간다면 webm/mov 방법을 채택해서 써볼 수도 있을 것 같다!
참고
