View Transitions API로 부드러운 페이지 전환 구현하기

View Transitions API란?

View Transitions API는 문서의 DOM이 변경될 때 부드러운 전환 효과를 만들어주는 브라우저 API입니다. 기존에는 JavaScript 프레임워크에서 복잡한 애니메이션 라이브러리를 사용해야만 가능했던 페이지 전환 효과를, 이제는 브라우저 네이티브 기능으로 구현할 수 있습니다.

기본 사용법

// 가장 간단한 형태의 View Transition
document.startViewTransition(() => {
  // DOM을 업데이트하는 코드
  updateDOM();
});

위 코드가 실행되면 브라우저는 자동으로:

현재 페이지의 스냅숏을 캡처합니다
DOM 변경을 적용합니다
새로운 상태의 스냅숏을 캡처합니다
두 스냅숏 사이에 크로스페이드 애니메이션을 적용합니다

CSS로 커스텀 애니메이션 적용

기본 크로스페이드 대신 슬라이드 효과를 적용할 수도 있습니다:

@keyframes slide-to-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes slide-from-right {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

::view-transition-old(root) {
  animation: slide-to-left 0.3s ease-in-out;
}

::view-transition-new(root) {
  animation: slide-from-right 0.3s ease-in-out;
}

Astro에서의 활용

Astro 프레임워크에서는 ClientRouter 컴포넌트 하나만 추가하면 전체 사이트에 View Transitions를 적용할 수 있습니다:

---
import { ClientRouter } from 'astro:transitions';
---
<head>
  <ClientRouter />
</head>

💡 View Transitions API는 프로그레시브 인핸스먼트를 지원합니다. 미지원 브라우저에서는 일반 페이지 이동이 발생하므로 안전하게 사용할 수 있죠.

결론

View Transitions API는 웹 사용자 경험을 드라마틱하게 향상시킬 수 있는 강력한 도구입니다. 특히 Astro와 같은 MPA 프레임워크에서 SPA 수준의 부드러운 전환을 최소한의 코드로 구현할 수 있다는 점이 매력적입니다.