투명 배경 앱 영상 — 어떤 배경 위에도 앱을 올리세요
디바이스 영상을 진짜 알파 채널과 함께 내보내세요. 편집용 ProRes 4444와 웹용 WebM alpha를 지원해 랜딩 페이지 히어로, 슬라이드, 영상 편집까지 어떤 배경 위에도 앱을 자연스럽게 올릴 수 있습니다. 투명 배경 내보내기의 원리와 절차를 정리했습니다.
대부분의 앱 영상은 배경이 영상에 그대로 구워진 채 내보내집니다. 에디터에서는 근사해 보이던 그라데이션이 랜딩 페이지와 충돌하고, 슬라이드 템플릿과 어긋나고, 디바이스를 네모난 틀 안에 가둬 버리죠. 배경이 진짜로 투명한 영상에는 이런 문제가 없습니다. 디바이스는 자유롭게 떠 있고, 그 뒤에 있는 히어로 섹션, 발표 자료, 편집 중인 타임라인이 그대로 비칩니다.
다만 큰 함정이 하나 있습니다. 영상에서 진짜 투명도를 얻기란 유명할 만큼 어렵습니다. 브라우저에 내장된 인코더는 알파 채널을 아예 실어 나르지 못하거든요. 이 글에서는 그럼에도 투명 내보내기가 가치 있는 이유, 조심해야 할 함정, 그리고 Mockpose가 브라우저를 벗어나지 않고 진짜 알파가 담긴 파일을 만들어 주는 방법을 소개합니다.
소재 하나로 모든 배경을 커버
투명한 디바이스 영상은 앱을 주변 환경에서 분리해 주기 때문에, 만들 수 있는 마케팅 소재 중 가장 유연합니다. 한 번 렌더링하면 어디서든 재사용할 수 있습니다.
- 히어로에 떠 있는 디바이스. 랜딩 페이지 고유의 그라데이션과 브랜딩 위에 영상을 올리세요. 다음 분기에 페이지를 리뉴얼해도 영상은 그대로 어울립니다. 다시 내보낼 필요가 없죠.
- 픽처 인 픽처 데모. 런치 영상, 튜토리얼, 발표처럼 더 큰 편집물 안에 색깔 상자 없이 앱을 넣을 수 있습니다.
- 슬라이드와 키노트. 테마가 무엇이든 디바이스가 템플릿 위에 바로 얹힙니다.
- 소셜용 컷아웃. 네모난 사각형을 붙이는 대신 디바이스를 디자인에 자연스럽게 녹여 내세요.
떠 있는 히어로 디바이스가 궁금하다면 랜딩 페이지를 위한 디바이스 목업 가이드도 함께 읽어 보세요.
영상 투명도가 어려운 이유
Mockpose 에디터에서 장면을 투명하게 만드는 건 클릭 한 번입니다. 배경 패널을 열고 배경을 '투명'으로 설정하면 끝이죠. 정지 이미지라면 이야기는 여기서 끝납니다. PNG 내보내기는 완전한 알파 투명도를 유지하며, 무료 플랜에도 포함되어 있습니다.
영상은 사정이 다릅니다. 브라우저가 로컬에서 만들어 내는 인코딩인 H.264 MP4와 WebM VP9에는 알파 채널이 아예 없습니다. 투명한 장면을 그대로 통과시키면 비쳐 보여야 할 픽셀이 전부 검게 칠해집니다. Mockpose의 한계가 아니라, 이 포맷들이 웹 어디에서나 그렇게 동작합니다.
그래서 Mockpose가 뒤를 지켜 줍니다. 장면의 배경이 투명하면 내보내기 창이 이를 감지해 경고하고, 알파를 실제로 담을 수 있는 인코딩을 미리 선택해 둡니다.
진짜 알파를 담는 두 가지 포맷
진짜 알파가 담긴 영상은 프리미엄 서버 렌더링에서 나옵니다. GPU에서 비동기로 돌아가므로 렌더링되는 동안에도 에디터에서 계속 작업할 수 있고, 완성된 파일은 내보내기 목록에 도착합니다. 포맷은 두 가지입니다.
- ProRes 4444 — 편집 스위트의 표준입니다. Final Cut Pro, Premiere Pro, DaVinci Resolve, After Effects에 진짜 알파와 함께 바로 들어가 합성에 쓸 수 있습니다.
- WebM alpha(VP9) — 웹을 위한 선택지입니다. Chrome, Firefox, Edge에서 완전한 투명도로 재생됩니다.
웹 경로에는 주의할 점이 하나 있습니다. Safari는 WebM alpha를 재생하지 못합니다. HEVC alpha가 필요한데 아직 지원되지 않거든요. Safari 방문자를 위해 같은 영상을 어울리는 배경 위에 렌더링한 MP4를 폴백으로 준비해 두면, 누구의 화면에서도 히어로가 깨지지 않습니다.
투명 앱 영상 내보내기 4단계
- 장면을 만들고(시네마틱 카메라 무브와 키프레임 타임라인 모두 브라우저 안에서 동작합니다) 배경을 '투명'으로 설정합니다.
- 디바이스에 애니메이션을 넣거나 100개가 넘는 템플릿 중 하나를 고릅니다.
- 내보내기에서 ProRes 4444(편집용) 또는 WebM alpha(웹용)를 선택합니다.
- 완성된 파일을 원하는 배경 위에 올립니다. 히어로 섹션이든 슬라이드든 편집 타임라인이든 자유입니다.
긴 렌더링 전에 빠르게 확인하고 싶다면 투명 PNG 스틸을 먼저 내보내 보세요. 완전한 알파, 클릭 한 번, 무료 플랜에 포함되어 있습니다.
Mockpose 에디터는 무료로 사용할 수 있습니다(내보내기는 720p까지, 작은 워터마크 포함). 프리미엄으로 업그레이드하면 4K, 워터마크 없는 파일, 그리고 진짜 알파 영상을 가능하게 하는 서버 렌더링이 열립니다. app.mockpose.com을 열어 배경을 '투명'으로 설정하고, 앱이 떠오르는 모습을 확인해 보세요.