서론
Pukimon 프로젝트를 진행하면서 투명 배경 영상을 구현해야 할 일이 생겼습니다. 동전 던지는 애니메이션을 Three.js로 직접 구현하기보다는 미리 제작된 영상을 활용하는 방향으로 결정했습니다.
그래서 알파 채널을 지원하는 MOV 파일을 웹으로 띄울 생각이였습니다.
히지만, 애플에서 개발한 동영상 포맷인 mov 파일을 웹에서 사용했을 때, 영상이 아예 재생되지 않거나 투명 배경이 검정색으로 표시되는 현상이 나타났습니다. 이에 대해 알아본 결과, 웹 브라우저 환경에서는 MOV 형식을 기본적으로 지원하지 않는다는 사실을 확인할 수 있었습니다.
그래서 velog에 찾아보니, 웹 환경에서는 WEBM 형식이 투명도(알파 채널)를 지원한다는 것을 알았습니다.
해결 방안
이 문제에 대한 해결책을 찾기 위해 다양한 자료를 조사했으며, 다음과 같은 유용한 자원을 발견했습니다:
여러 방법을 시도한 끝에, Shutterencoder가 가장 효과적인 해결책임을 확인했습니다. 이 도구는 mov 파일의 투명 배경을 완벽하게 유지하면서 webm 형식으로 변환해 주는 기능을 제공합니다.
적용 결과
위 이미지에서 확인할 수 있듯이, 변환된 webm 파일은 원본의 투명도를 완벽하게 유지하면서 웹 환경에서 정상적으로 재생됩니다.
이로써 Pukimon 프로젝트에서 의도했던 시각적 효과를 성공적으로 구현할 수 있었습니다.