웹 투명 비디오는 alpha 를 누가 들고 오느냐로 갈린다. 1 코덱이 싣는다: video 에 source 두 개를 두고 HEVC .mov 를 먼저, VP9 .webm 을 다음에 둔다. Safari 는 VP9 의 alpha 를 못 써서 HEVC 가 먼저 와야 한다. JS 없이 되지만 HEVC alpha 인코딩은 macOS 에서만 되고, 예제 기준 1.1MB 와 3.4MB 로 무겁다. Safari 27 베타에 WebM alpha 가 들어오는 중이다(2026-08). 2 animated AVIF 를 img 로: AV1 스트림 두 개(색, 밝기로 된 alpha)라 504kB 로 작지만 Safari 에서 깨지고 60fps 도 버거우며, img 라 재생 제어·소리·source 대체가 없어 아직 못 쓴다. 3 직접 싣는다: 위는 색, 아래는 alpha 를 밝기로 쌓은 일반 영상 하나를 WebGL 이 rgb 는 위에서, alpha 는 아래 밝기에서 가져와 합친다. 예제 기준 460kB 이고 alpha 쪽은 8kB 만 더했다. ffmpeg 의 alphaextract 와 vstack 으로 만든다. seeThru 는 같은 발상을 2012 년에 canvas 2D 로 한 것이다. 가장 작지만 JS 와 WebGL 이 필요하다.

Footnotes

  1. 세 방식을 비교한다 — 네이티브(VP9 + HEVC)는 무겁고 버그가 있고, animated AVIF 는 Safari·성능에서 막힌다. 그래서 색과 alpha 를 위아래로 쌓은 AV1 영상 하나를 WebGL 로 합치는 <stacked-alpha-video> 를 만들었다. 인코딩 ffmpeg 명령 포함. ↩

  2. 2020년 기준 탐색기. GIF·APNG·PNG 루프를 거쳐 WebM alpha(GIF 5.8MB → 540KB)로 갔다가 Safari 에서 검은 배경을 보고, Safari 엔 HEVC alpha 를 주는 혼합안에 도착한다. HEVC 는 Mac 의 Finder·Compressor 로 만들고, Safari 버전은 UA 로 판별해 src 를 JS 로 넣는다. ↩

  3. 네이티브 방식(WebM + HEVC) 실무 가이드 — 무엇을 내보내고 어떻게 변환해 <video> 에 넣는지. 2026-08 갱신으로 Safari 27 베타에 WebM alpha 가 들어온다는 소식이 추가됐다. ↩

  4. alpha 를 만드는 쪽. 코덱별 alpha 지원(중간 코덱 ProRes 4444, 배포 코덱 VP9)과 ffmpeg 로 VP9·ProRes alpha 인코딩, 표현식으로 도형을 그려 alpha 마스크를 씌우는 법. ↩

  5. 2012년 라이브러리. alpha 를 영상 안에 따로 담아 두고 canvas 에 다시 그려 투명을 입힌다 — Jake 글의 스택 방식의 canvas 2D 판. README 가 스스로 “WebM·HEVC 네이티브가 되니 아마 필요 없다”고 적는다. ↩

#video#ffmpeg#canvas#transparency
`#27`