WebM Alpha, ProRes 4444, PNG 시퀀스: 무엇으로 내보낼까요?

WebM Alpha, ProRes 4444, PNG 시퀀스는 모두 투명도를 담을 수 있지만 서로 다른 제공 단계에 적합합니다. 작은 웹 결과물에는 WebM Alpha, 편집과 합성에는 ProRes 4444, 모든 프레임에 무손실로 접근해야 할 때는 RGBA PNG 시퀀스를 사용하세요.

여기에는 두 가지 중요한 질문이 남습니다. 같은 애니메이션을 사용하면 결과물 크기는 얼마나 다를까요? 실제 인코딩과 디코딩을 거쳐도 알파 채널이 유지될까요? 같은 AnimGen 애니메이션에서 세 형식을 모두 내보내고 파일 크기를 측정했으며, 두 영상을 다시 프레임으로 디코딩했습니다. 사용한 파일도 아래에서 제공합니다.

사용처에 맞춰 선택하기

전체 파이프라인을 관리한다면 PNG 시퀀스를 이식 가능한 원본으로 보관하고 여기서 제공용 형식을 만드세요. 하나만 내보내면 된다면 가장 고급스러워 보이는 확장자가 아니라 최종 사용처를 기준으로 선택하세요.

하나의 투명 애니메이션, 세 개의 실제 파일

테스트에는 AnimGen의 공개 아이소메트릭 tactician slash 시퀀스를 사용합니다. 원본은 512 × 512 RGBA PNG 프레임 96개이며 24 FPS에서 4.00초 동안 재생됩니다. 캔버스는 고정되어 있고 반복하지 않는 애니메이션입니다. 투명한 모서리는 알파의 기본 정상 여부를 확인하기 좋습니다.

비교에 사용한 정확한 파일을 확인할 수 있습니다.

• 96프레임 RGBA PNG 시퀀스 ZIP 다운로드
• WebM Alpha 내보내기 다운로드
• ProRes 4444 MOV 내보내기 다운로드
• 측정 매니페스트와 SHA-256 해시 열기

두 영상은 같은 96프레임을 당시 AnimGen 내보내기 인코더로 처리한 결과입니다. WebM 검사 결과는 VP8과 ALPHA_MODE=1입니다. MOV는 ProRes 4444 프로파일, 코덱 태그 ap4h, 픽셀 형식 yuva444p12le로 나타납니다. 이후 각 영상을 PNG 프레임 96개로 다시 디코딩해 원본과 비교했습니다.

FFmpeg가 설치되어 있다면 어느 다운로드 파일에서도 같은 컨테이너·스트림 필드를 확인할 수 있습니다.

ffprobe -v error -show_entries "stream=codec_name,profile,codec_tag_string,pix_fmt,width,height,r_frame_rate:stream_tags=ALPHA_MODE:format=duration" -of json your-export.webm

메타데이터만으로 투명도를 최종 검증할 수는 없습니다. 따라서 디코딩한 프레임과 배경 합성 결과도 중요합니다.

실제 파일 크기

이 샘플의 파일 크기는 다음과 같습니다.

이 압축률은 측정한 샘플 하나에 대한 결과입니다. 해상도, 길이, 이미지 디테일, 움직임, 인코더 설정, PNG 파일을 ZIP에 묶는 방식까지 결과에 영향을 줄 수 있습니다. 여기서는 WebM이 훨씬 작았고, PNG 시퀀스와 ProRes는 더 많은 저장 공간을 쓰는 대신 제작에 편리한 구조를 유지했습니다.

영상 인코딩·디코딩 후에도 투명도가 유지됐나요?

이번 테스트에서는 그렇습니다. 두 영상을 디코딩한 결과 모두 96프레임이었고 알파 범위는 0–255였으며 네 모서리 샘플은 완전히 투명했습니다. 따라서 같은 출력 프레임을 밝은 배경, 어두운 배경, 채도가 높은 배경 위에 사각형 배경 없이 합성할 수 있었습니다.

원본 RGBA 프레임에 대한 평균 절대 오차도 0–255 채널 값 기준으로 측정했습니다.

RGB 비교에서 “보이는” 픽셀은 원본 알파가 8보다 큰 픽셀을 뜻합니다. 0이면 픽셀이 정확히 일치합니다. 이 샘플에서 두 형식 모두 사용 가능한 투명도를 유지했고, 디코딩한 ProRes 결과는 원본 픽셀에 더 가까웠습니다. 이는 각 형식의 용도와 맞지만 모든 ProRes 내보내기가 모든 사용처에서 눈에 띄게 더 좋아 보인다는 뜻은 아닙니다.

PNG 시퀀스는 영상 인코딩·디코딩 왕복이 필요하지 않습니다. ZIP에 원본 개별 RGBA 프레임이 들어 있습니다. 결함이 생성된 프레임, 영상 인코더, 대상 디코더 중 어디에서 생겼는지 확인할 때 가장 명확한 기준이 됩니다.

작은 웹 결과물에는 WebM Alpha 선택하기

투명 캐릭터, 효과, 마스코트를 호환 브라우저나 웹 기반 런타임에서 재생해야 한다면 WebM Alpha가 우선적인 선택입니다. 이 샘플에서는 1 MiB 미만이었으므로 원본 시퀀스를 개별 이미지로 제공할 때의 96번 요청과 훨씬 큰 총 전송량을 피할 수 있습니다.

다만 두 가지를 주의하세요.

첫째, 브라우저가 “WebM”을 지원한다고 해당 코덱의 알파까지 지원하는 것은 아닙니다. 원문 검증 시점의 AnimGen 내보내기는 VP8 Alpha입니다. MDN 동영상 코덱 가이드는 Safari가 VP8·VP9 영상의 알파 투명도를 지원하지 않는다고 설명합니다. 제품에서 실제 사용하는 브라우저, 운영체제, 기기, 내장 웹뷰, 플레이어에서 테스트하세요.

둘째, 실제로 투명한 PNG 포스터나 대체 이미지를 유지하세요. 최신 브라우저가 <video> 요소를 이해해도 제공된 알파 소스를 올바르게 디코딩하거나 합성하지 못할 수 있습니다. 별도 <img>를 사용하고 대상 재생 경로가 정상임을 확인한 뒤 영상으로 전환하는 방식이 안전합니다. 투명 애니메이션 웹사이트 가이드에는 HTML, CSS, 대체 동작, 동작 줄이기 처리, 다운로드 가능한 작동 예제가 있습니다.

다음 경우에는 WebM Alpha를 사용하세요.

• 다운로드 크기가 중요합니다.
• 프레임별 접근이 아니라 영상 하나로 애니메이션을 제공합니다.
• 지원 브라우저 또는 런타임 목록을 알고 검증했습니다.
• 지원하지 않는 경로에 PNG 대체 이미지를 제공할 수 있습니다.

나중에 개별 프레임을 다시 편집할 예정이라면 유일한 마스터 사본으로 사용하지 마세요.

편집과 합성에는 ProRes 4444 선택하기

ProRes 4444는 고품질 영상 파일에 알파가 필요한 모션 그래픽, 합성, 교환 워크플로를 위한 형식입니다. Apple ProRes 백서는 ProRes 4444와 4444 XQ가 4:4:4:4 이미지 소스와 최대 16비트 깊이의 알파 채널을 지원한다고 설명합니다.

이 테스트에서 디코딩한 ProRes 결과는 알파와 보이는 RGB 모두 WebM보다 원본에 가까웠습니다. 대신 4초 MOV가 19.12 MiB로 WebM의 약 24배였습니다. 편집 마스터에는 충분히 합리적일 수 있지만 페이지 에셋으로는 낭비일 수 있습니다.

다음 경우에는 ProRes 4444를 사용하세요.

• 다음 작업이 편집기, 합성 도구, 방송 또는 모션 그래픽 파이프라인입니다.
• 프레임 폴더보다 타임라인에 바로 올릴 파일 하나가 편리합니다.
• 다운로드 크기보다 중간 단계에서 색과 알파를 높은 충실도로 유지하는 것이 중요합니다.
• 실제 대상 애플리케이션에서 ProRes 4444 알파를 검증했습니다.

투명도가 있다는 이유만으로 큰 ProRes 마스터를 웹사이트에 올리지 마세요. 더 작은 제공용 파일을 따로 만드세요.

제어와 진단에는 RGBA PNG 시퀀스 선택하기

PNG 시퀀스는 애니메이션을 가장 명확하게 표현합니다. 각 프레임이 독립적인 RGBA 이미지여서 직접 확인할 수 있고 나머지 동작을 다시 인코딩하지 않고도 교체할 수 있습니다. PNG 자체는 W3C의 PNG 규격으로 표준화된 무손실 이미지 형식입니다.

다음 경우에 특히 유용합니다.

• 아티스트가 한두 프레임을 수정해야 합니다.
• 자체 도구가 픽셀, 마스크, 프레임 사각형을 직접 읽습니다.
• 나중에 WebM, ProRes, 스프라이트 시트, 엔진 팩으로 내보낼 이식 가능한 원본이 필요합니다.
• 투명도가 깨져 어느 단계가 문제인지 분리해야 합니다.

대신 운영상 관리가 필요합니다. 96개 파일의 순서를 유지해야 하고, 재생 속도는 외부 메타데이터에 있으며, 저장·전송량이 빠르게 커질 수 있습니다. ZIP은 전달을 편리하게 하지만 게임이나 편집기에서는 여전히 압축을 풀고 프레임을 해석해야 합니다.

PNG 시퀀스를 가져올 때는 파일 이름 순서, FPS, 캔버스 크기, 피벗, 색 처리, 텍스처 필터링, 대상이 straight 알파와 premultiplied 알파 중 무엇을 기대하는지 확인하세요. 원본 픽셀이 완벽해도 가져오기 설정이 맞지 않으면 잘못 보일 수 있습니다.

게임에서는 스프라이트 시트나 엔진 팩 고려하기

WebM, ProRes, PNG 시퀀스만 있는 것은 아닙니다. 2D 게임에서는 타이밍·피벗 메타데이터가 포함된 스프라이트 시트나 엔진 전용 패키지가 유용한 경우가 많습니다. 범용성 대신 런타임 가져오기가 쉬워지고 텍스처 전환을 줄일 수 있습니다.

이 형식 비교는 세 입력을 프레임당 512 × 512로 동일하게 유지합니다. 기존 공개 엔진 샘플은 런타임에 맞춘 다른 패킹 설정을 사용하므로 파일 크기를 차트에 포함하지 않았습니다. 이 코덱 테스트의 네 번째 막대가 아니라 워크플로 선택지로 비교하세요.

Godot을 사용한다면 Godot 4 가져오기 실측 사례에서 전체 공개 패키지, 96개 프레임 영역, 재생 타이밍, 재현 가능한 프로젝트를 볼 수 있습니다. 출력 형식 참고 문서는 스프라이트 시트, Unity, Godot, Unreal Paper2D, Cocos Creator와 대응 API 형식 이름을 다룹니다.

투명 영상이 검게 보이는 이유

검은 사각형이 보인다고 파일에서 알파가 사라졌다고 단정할 수는 없습니다. 다음 순서로 확인하세요.

1. 대응하는 PNG 프레임 하나를 밝은 배경과 어두운 배경 위에서 엽니다.
2. PNG가 투명하면 해당 코덱과 알파 모드를 지원하는 디코더 또는 합성 도구로 영상을 확인합니다.
3. 서버가 WebM은 video/webm, ProRes MOV는 video/quicktime으로 전송하는지 확인합니다.
4. 운영체제 썸네일에 의존하지 말고 실제 대상 브라우저 또는 애플리케이션에서 테스트합니다.
5. 모든 출력이 불투명하면 원본 알파와 투명 내보내기 설정으로 돌아갑니다.

위의 세 배경 이미지는 의도적으로 단순합니다. 실제 투명 가장자리는 편리한 색 하나뿐 아니라 여러 배경에서 동작해야 합니다. 가는 머리카락, 발광, 모션 블러, 그림자, 키 배경과 비슷한 색은 빈 모서리보다 더 자세히 확인해야 합니다. 투명 형식 호환성 가이드와 내보내기 문제 해결 가이드에서 자세히 설명합니다.

실용적인 내보내기 전략

프로젝트 전체 기간에 걸쳐 형식 하나만 선택할 필요는 없습니다. 유연한 워크플로는 다음과 같습니다.

1. 필요한 동작을 생성하고 구간을 잘라냅니다.
2. 먼저 PNG 프레임을 내보내 대표 프레임을 여러 배경에서 확인합니다.
3. 팀이 프레임 중심으로 작업하는지 타임라인 중심으로 작업하는지에 따라 PNG 시퀀스 또는 ProRes 4444를 제작 원본으로 보관합니다.
4. 검증된 웹 사용처에는 WebM Alpha를 만듭니다.
5. 실시간 게임 사용처에는 스프라이트 시트 또는 엔진 팩을 만듭니다.
6. FPS, 프레임 순서, 캔버스, 피벗 정보를 에셋과 함께 저장합니다.

AnimGen에서는 무료 PNG 프레임 내보내기로 제작용 형식을 선택하기 전에 결과가 쓸 만한지 확인할 수 있습니다. WebM Alpha, ProRes 4444, 스프라이트 메타데이터, 엔진 팩, 상업적 이용은 현재 유료 플랜 또는 크레딧 팩 이용 권한을 따릅니다. 글에 복사된 가격이 아니라 현재 내보내기·상업적 이용 조건을 확인하세요.

투명 PNG 캐릭터가 있다면 투명 애니메이션 워크플로로 시작하여 동작을 생성하고 실제 사용처에 맞춰 내보내세요. 다음 도구에서 검증하고 편집하고 배포할 수 있는 형식을 선택하세요. 사용처에서 안정적으로 쓸 수 없다면 화려한 사양도 큰 의미가 없습니다.