웹사이트에 투명 캐릭터 애니메이션을 추가하는 방법

투명한 웹사이트 애니메이션은 뒤쪽 페이지가 비쳐 보이게 합니다. 모든 프레임에 검정색, 흰색, 초록색 또는 체크무늬 사각형이 이미지 일부로 들어 있으면 이런 효과를 얻을 수 없습니다.

이 가이드는 GIF를 재구성한 것이 아니라 실제 AnimGen WebM Alpha 내보내기 파일을 사용합니다. 실제 브라우저 데모를 열고, 전체 HTML 예제를 다운로드한 뒤 같은 파일을 대상 브라우저에서 테스트할 수 있습니다.

코드를 복사하기 전에 결과 확인하기

데모는 하나의 캐릭터 영상을 밝은 패널, 어두운 패널, 그라데이션 히어로 영역 위에 배치합니다. 세 가지 배경으로 테스트하면 투명도가 즉시 드러나고, 특정 색상에서만 잘 안 보이던 가장자리 문제도 찾을 수 있습니다.

여기서 사용한 샘플의 정확한 정보는 다음과 같습니다.

libvpx로 영상의 96프레임 전체를 디코딩했으며, 디코딩된 알파 평면의 값 범위는 0–255였습니다. 이후 macOS 26.5.2의 Chrome 152.0.7977.84에서 페이지를 열어, 세 영상이 재생되는 동안 투명 픽셀을 통해 각 배경이 계속 보이는 것을 확인했습니다. 반응형 페이지는 500픽셀의 작은 뷰포트에서도 점검했습니다.

이는 이 파일과 테스트 환경에 대한 사실입니다. 일반 WebM 지원이 곧 WebM Alpha 지원을 의미하지는 않습니다. 원문 사실 확인 시점의 MDN 동영상 코덱 가이드는 Safari에서 VP8 또는 VP9 동영상의 알파 투명도를 지원하지 않는다고 명시합니다. 따라서 지원 브라우저 목록은 가정이 아니라 제품 요구사항으로 다루세요.

WebM과 PNG를 별도 파일로 준비하기

애니메이션과 정적 대체 이미지를 각각 실제 에셋으로 보관하세요.

public/
└── animation/
    ├── character-run.webm
    └── character-run.png

PNG는 체크무늬 화면의 스크린샷이 아니라 실제로 투명한 프레임이어야 합니다. 아래는 데모에서 사용하는 대체 이미지입니다. 블로그에서 보이는 체크무늬는 파일에 들어 있는 것이 아니라 페이지 이미지 뷰어가 표시하는 배경입니다.

일반 MP4를 투명도 대체 파일로 사용하지 마세요. 일반 MP4나 모델의 원본 미리보기는 불투명합니다. AnimGen에서는 WebM Alpha, ProRes 4444, RGBA 프레임, 투명 스프라이트 에셋이 서로 다른 내보내기 결과물입니다. 각 형식의 용도는 투명 형식 가이드에서 설명합니다.

점진적으로 동작하는 HTML 구성하기

처음에는 PNG를 표시하세요. 브라우저가 VP8 WebM을 재생할 수 있다고 보고한 뒤에만 영상을 보여주고, 미디어 로드에 실패하면 PNG로 돌아가도록 합니다.

<div class="animation-stage">
  <img
    id="character-fallback"
    src="/animation/character-run.png"
    width="512"
    height="512"
    alt="Blue character running"
  />

  <video
    id="character-video"
    width="512"
    height="512"
    muted
    loop
    playsinline
    preload="metadata"
    poster="/animation/character-run.png"
    aria-label="Blue character running"
    hidden
  >
    <source
      src="/animation/character-run.webm"
      type='video/webm; codecs="vp8"'
    />
  </video>
</div>

width와 height를 지정하면 미디어 로드 전부터 올바른 가로세로 비율의 공간을 확보할 수 있습니다. playsinline은 모바일에서 페이지 안에 영상을 유지하고, muted는 장식용 클립을 무음으로 만듭니다. preload="metadata"는 영상이 필요하기 전에 전체를 미리 내려받는 것을 피합니다. MDN <video> 참고 문서는 각 속성과 브라우저의 poster 동작을 설명합니다.

중요한 점이 있습니다. <video>...</video> 안의 텍스트나 이미지는 video 요소를 이해하지 못하는 브라우저를 위한 대체 콘텐츠입니다. 최신 브라우저가 <video>를 이해하지만 제공된 소스를 디코딩하지 못하는 경우에는 표시가 보장되지 않습니다. 별도의 형제 <img> 요소와 오류 핸들러를 사용하면 이처럼 더 흔한 실패 상황을 처리할 수 있습니다.

CSS로 페이지 위에 애니메이션 배치하기

투명 픽셀을 통해 .animation-stage에 지정된 배경이 보입니다.

.animation-stage {
  position: relative;
  width: min(100%, 32rem);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 1.5rem;
  background: linear-gradient(145deg, #7c3aed, #0891b2);
}

.animation-stage > img,
.animation-stage > video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

캐릭터 캔버스 전체가 보여야 한다면 object-fit: contain을 사용하세요. 의도적으로 잘라내려는 경우에만 cover를 사용하세요. CSS drop-shadow()는 복잡한 히어로 영역에서 캐릭터를 구분하는 데 도움이 되지만, 먼저 효과 없이 원본 가장자리를 확인해야 합니다. 그림자가 색 번짐이나 테두리를 가릴 수 있기 때문입니다.

애니메이션과 대체 이미지를 안전하게 전환하기

canPlayType()은 초기 경로를 선택하는 데 유용하지만 코덱과 컨테이너 지원 여부만 알려줍니다. 브라우저가 해당 알파 인코딩을 올바르게 합성할지는 증명하지 못합니다.

const video = document.querySelector("#character-video");
const fallback = document.querySelector("#character-fallback");
const playButton = document.querySelector("#play-character");

function showFallback() {
  video.pause();
  video.hidden = true;
  fallback.hidden = false;
}

const canPlayWebM = video.canPlayType(
  'video/webm; codecs="vp8"'
);

if (canPlayWebM) {
  fallback.hidden = true;
  video.hidden = false;
} else {
  showFallback();
}

video.addEventListener("error", showFallback);
playButton.addEventListener("click", () => video.play());

중요한 히어로 영역이나 온보딩 단계라면 실제 대상 브라우저에서 확인하고 애플리케이션 수준의 명시적인 대체 경로를 유지하세요. 투명 애니메이션이 선택적인 장식이라면 좋은 PNG 하나로도 페이지를 막지 않고 디자인을 유지할 수 있습니다.

방문자가 움직임을 제어할 수 있게 하기

투명 영상도 움직이는 콘텐츠입니다. 무한 반복하는 장식용 영상만 봐야 페이지를 이해하거나 사용할 수 있도록 만들지 마세요.

다운로드 가능한 데모는 포스터 이미지로 시작하며 재생/일시정지 버튼을 제공합니다. prefers-reduced-motion도 확인합니다. 방문자가 동작 줄이기를 요청한 경우에는 직접 재생을 시작하기 전까지 PNG 대체 이미지를 계속 표시합니다.

const reducedMotion = matchMedia(
  "(prefers-reduced-motion: reduce)"
).matches;

if (reducedMotion) {
  showFallback();
}

자동 재생이 꼭 필요하다면 영상을 무음 및 인라인으로 유지하고, play() 프로미스가 거부되는 경우를 처리하며, 일시정지 기능도 제공하세요. 짧은 애니메이션이 반복된다는 이유만으로 CPU와 네트워크를 계속 소모해서는 안 됩니다.

가볍게 제공하기

이 데모에서 세 영상을 동시에 재생하는 이유는 세 배경 위의 알파 결과를 보여주기 위해서입니다. 실제 서비스 페이지에는 보통 같은 에셋을 재생하는 디코더 세 개가 아니라 영상 요소 하나면 충분합니다.

배포 전에 다음을 확인하세요.

1. 실제로 보이는 동작만 남기도록 클립을 잘라냅니다.
2. 작은 카드에 큰 원본을 보내는 대신 최대 표시 크기에 가까운 크기로 내보냅니다.
3. 첫 화면 아래에 있거나 사용자가 선택해야 재생하는 미디어에는 preload="none"을 사용합니다. 크기와 재생 시간을 미리 알아야 한다면 metadata를 사용합니다.
4. 대표 프레임의 투명 PNG 포스터를 포함합니다.
5. 오래 재생되는 애니메이션은 화면 밖으로 나가거나 탭이 숨겨지면 일시정지합니다.
6. WebM을 올바른 video/webm Content-Type으로 제공하고, 버전이 붙은 불변 파일을 캐시합니다.
7. ProRes 4444는 편집·합성용으로 사용하고 일반적인 웹사이트 인라인 재생에는 사용하지 않습니다.

참고로 이 4초 샘플은 약 1.54 MiB입니다. 데모에는 합리적일 수 있지만 모든 사이트에 적용되는 예산은 아닙니다. 속도를 제한한 모바일 연결에서 페이지의 다른 요소와 함께 측정하세요.

동작을 다시 생성하지 않고 검은 사각형 해결하기

투명 애니메이션이 검은 배경 위에 표시되면 에셋 문제와 재생 문제를 나눠 확인하세요.

1. 함께 내보낸 RGBA PNG를 밝은 배경과 어두운 배경 위에서 엽니다.
2. PNG는 투명한데 WebM만 검게 보이면 브라우저·디코더 지원, 정확한 코덱, 영상 합성기를 확인합니다.
3. 두 파일 모두 불투명하다면 원본 알파, 내보내기 모드, 그림에 배경이 포함되어 있는지 확인합니다.
4. 서버가 Content-Type: video/webm과 함께 완전한 파일을 반환했는지 확인합니다.
5. 제품에서 실제 사용하는 브라우저, 운영체제, 기기, 내장 웹뷰에서 다시 확인합니다.

투명 내보내기 문제 해결 가이드는 테두리, 색 번짐, 흐릿한 가장자리, 알파 채널은 있지만 잘못 표시되는 파일을 더 자세히 다룹니다.

애니메이션을 만든 뒤 실제 사용처에서 테스트하기

AnimGen 웹사이트 에셋은 유효한 알파가 있는 PNG로 시작하세요. 투명 애니메이션을 선택해 동작을 생성하고, 필요한 구간을 잘라낸 다음 WebM Alpha와 대체 이미지용 PNG 프레임을 내보냅니다. 투명 애니메이션 워크플로는 원본과 내보내기의 차이를 보여주며, 달리기·점프 사례는 배포 전 동작 생성과 정리 과정을 다룹니다.

그다음 다운로드한 파일만이 아니라 실제 웹 컴포넌트를 사이트 배경과 지원하는 최소 뷰포트에서 테스트하세요. 전체 예제를 다운로드해 시작하거나 AnimGen Studio를 열어 직접 투명 캐릭터 애니메이션을 만들 수 있습니다.