View Transitions API 완벽 가이드 — 브라우저 네이티브 페이지 전환 애니메이션

View Transitions API 작동 원리와 기본 사용법

document.startViewTransition(callback)을 호출하면 브라우저는 현재 페이지 상태를 스냅샷으로 캡처한다. 이후 콜백에서 DOM을 변경하면 새 상태의 스냅샷을 찍고, 두 스냅샷 사이를 CSS 애니메이션으로 전환한다. 기본 전환 효과는 크로스페이드이며, CSS의 ::view-transition-old와 ::view-transition-new 가상 요소로 완전히 커스터마이징할 수 있다. 브라우저가 API를 지원하지 않으면 콜백이 그냥 실행되어 애니메이션 없이 동작하므로 폴백 처리가 자동으로 된다.

// SPA에서 라우트 전환에 적용
async function navigate(href: string) {
  if (!document.startViewTransition) {
    updateDOM(href); return;
  }
  await document.startViewTransition(() => updateDOM(href)).finished
}

/* 공유 요소 전환 — 목록 아이템 → 상세 페이지 */
.card { view-transition-name: card-1; }

@keyframes slide-in { from { translate: 100% 0; } }
::view-transition-new(root) { animation: slide-in 0.3s ease-out; }

View Transitions API 공유 요소 전환으로 매끄러운 UX 구현

view-transition-name CSS 속성으로 특정 요소에 이름을 부여하면, 같은 이름을 가진 이전 상태와 현재 상태의 요소 사이에 위치와 크기가 자연스럽게 보간되는 공유 요소 전환이 적용된다. 목록에서 상세 페이지로 이동할 때 선택한 카드가 부드럽게 확장되는 효과를 CSS 몇 줄로 구현할 수 있다. 각 요소의 view-transition-name은 동일 페이지 내에서 유일해야 하므로, 동적 목록에서는 style={{ viewTransitionName: item-${id} }}처럼 ID 기반으로 이름을 동적 생성해야 한다.

View Transitions API와 React Router, TanStack Router 통합

React Router v7과 TanStack Router에서는 View Transitions 지원이 내장되어 viewTransition prop 하나로 활성화할 수 있다. <Link viewTransition to="/post/1"> 형태로 선언하면 해당 링크 클릭 시 자동으로 document.startViewTransition이 호출된다. React 18의 동시성 기능과 함께 사용할 때는 flushSync로 DOM 업데이트를 동기적으로 처리해야 전환이 올바르게 동작한다.

View Transitions API Astro MPA 크로스 도큐먼트 전환

Astro 3.x 이상에서는 <ViewTransitions /> 컴포넌트를 레이아웃에 추가하면 MPA 전체에 크로스 도큐먼트 View Transition이 활성화된다. 일반 <a> 태그 클릭으로 페이지를 이동해도 SPA 수준의 전환 애니메이션이 적용된다. transition:name 지시어로 공유 요소를 지정할 수 있으며, 페이지 전체를 JavaScript로 관리하지 않아도 매끄러운 내비게이션 경험을 제공할 수 있다.

View Transitions API prefers-reduced-motion 필수 적용

prefers-reduced-motion 미디어 쿼리를 반드시 존중해야 한다. 전정기관 장애나 모션 민감성이 있는 사용자에게 과도한 애니메이션은 불쾌감이나 신체 증상을 유발할 수 있다. @media (prefers-reduced-motion: reduce) 블록에서 View Transition 지속 시간을 0으로 설정하거나 ::view-transition-image-pair를 통해 애니메이션을 비활성화하는 것이 접근성 필수 사항이다.

View Transitions API 성능 최적화와 주의사항

View Transitions는 브라우저의 합성 레이어를 사용하여 GPU 가속으로 실행되므로 성능이 우수하다. 단, 너무 많은 요소에 view-transition-name을 부여하면 스냅샷 캡처 비용이 증가할 수 있으므로 실제로 전환이 필요한 핵심 요소에만 적용한다. 애니메이션 지속 시간은 300ms 이하를 권장하며, 긴 애니메이션은 사용자가 대기한다는 인식을 줄 수 있다.