SPA를 쓰지 않으면 페이지 전환 애니메이션은 포기해야 한다는 게 오랫동안 암묵적인 합의였습니다. Framer Motion을 설치하고, React Router와 엮고, 애니메이션 상태를 관리하는 코드를 짜다 보면 어느 순간 "이게 다 페이지 전환 효과 하나 때문인가?" 싶어지죠. SSG 기반 사이트에선 결국 그냥 포기하는 쪽이 흔한 선택이었습니다.

View Transitions API는 그 전제를 뒤집습니다. 브라우저가 전환 전후의 화면을 직접 스냅샷으로 찍고, 그 사이에 CSS 애니메이션을 끼워 넣는 방식이라 MPA에서도, 기본 크로스페이드 수준이라면 JS 없이도 동작합니다. CSS 선언 두 줄이면 사이트 전체에 크로스페이드 전환을 적용할 수 있고, 특정 요소에 이름을 붙이면 그 요소가 페이지 사이를 이동하는 "공유 요소 전환"도 가능합니다.

2026년 기준 Chrome·Edge·Safari는 MPA cross-document 전환을 지원하고, Firefox는 아직 실험 단계입니다. 다만 미지원 브라우저에서는 그냥 애니메이션 없이 페이지가 바뀌는 기존 방식으로 폴백되기 때문에, Progressive Enhancement 관점에서는 지금 도입해도 사이트 기능은 그대로 유지됩니다.

브라우저가 직접 스냅샷을 찍으면 달라지는 것들

동작 원리를 세 단계로 살펴보기

View Transitions API의 핵심은 브라우저가 페이지 이동을 가로채서 직접 애니메이션을 조율한다는 점입니다. 개발자가 JS로 이전 요소를 fade-out 시키고 새 요소를 fade-in 시키는 코드를 쓸 필요가 없어요.

다이어그램 1

이 과정에서 개발자가 직접 건드리는 부분은 CSS뿐입니다. @view-transition { navigation: auto; } 선언으로 opt-in하고 나면, 기본 크로스페이드는 브라우저가 알아서 처리합니다.

Same-document vs Cross-document — 어떤 맥락에서 쓰나

이 둘의 구분이 처음엔 헷갈리기 쉬운데, 도입 판단에서 꽤 중요한 차이입니다.

모드	동작 방식	브라우저 지원 (2026년 9월 기준)	적합한 아키텍처
Same-document	`document.startViewTransition()` JS 호출	Baseline 달성 — Chrome 111+, Edge 111+, Firefox 133+, Safari 18+	SPA, 탭 전환, 아코디언
Cross-document	CSS `@view-transition` 선언만으로 작동	Chrome 126+, Edge 126+, Safari 18.2+, Firefox 미지원	MPA, SSG, 멀티페이지 사이트

Same-document transitions는 web.dev의 Baseline 발표에 따라 SPA 환경에서는 Firefox를 포함한 전 브라우저에서 안심하고 쓸 수 있습니다. 이 글에서 주로 다룰 cross-document transitions는 2026년 9월 기준 Firefox가 빠져 있고, MDN 공식 상태는 "Not Baseline"입니다.

어떤 상황에서 도입할 수 있을까

다이어그램 2

MPA에 @view-transition 얹어보기

기본 설정 — CSS 선언 하나

cross-document view transitions는 전환에 참여하는 양쪽 페이지 CSS 모두에 아래 선언이 있어야 합니다. 한쪽만 있으면 동작하지 않습니다.

css

/* 사이트 공통 CSS에 추가 */
@view-transition {
  navigation: auto;
}

이것만으로 페이지 전체가 크로스페이드 됩니다. Jekyll, Hugo, 11ty 같은 SSG라면 공통 스타일시트 하나에 넣으면 전체 사이트에 적용됩니다. JS 한 줄 없이요.

prefers-reduced-motion은 반드시 함께

애니메이션을 추가할 때 접근성 처리는 선택이 아닙니다.

css

@view-transition {
  navigation: auto;
}
 
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

공유 요소 전환 — 목록 썸네일이 상세 히어로로 이동하는 효과

view-transition-name으로 요소에 이름을 붙이면 브라우저가 두 페이지에서 같은 이름을 찾아 자동으로 연결해줍니다.

상품 목록 페이지:

css

/* product-list.css */
.product-card .thumbnail {
  view-transition-name: product-hero;
  contain: layout;
}

상품 상세 페이지:

css

/* product-detail.css */
.hero-image {
  view-transition-name: product-hero;
  contain: layout;
}

브라우저는 두 product-hero 요소를 자동으로 연결해서 목록의 썸네일이 상세 페이지 히어로 이미지로 이동하는 애니메이션을 만들어 냅니다. 서버 렌더링 기반 플랫폼에서도 CSS만으로 이 효과를 얻을 수 있다는 게 실용적으로 큰 의미가 있습니다.

목록 아이템처럼 반복되는 요소 처리

여기서 자주 막히는 지점이 있습니다. view-transition-name은 페이지 내에서 유일해야 합니다. 상품 카드가 10개 있는데 모두 같은 이름을 붙이면 전환이 조용히 깨집니다. 에러 메시지도 없어서 처음엔 원인을 찾기 까다롭습니다.

서버 템플릿에서는 ID를 활용해 동적으로 고유한 이름을 부여하면 됩니다. 아래는 개념적 예시입니다.

html

<!-- Nunjucks / Jinja2 스타일 개념 예시 -->
<div class="product-card" style="view-transition-name: product-{{ product.id }}">
  <img src="{{ product.image }}" alt="{{ product.title }}">
</div>

상세 페이지에서도 같은 ID를 이름으로 쓰면 연결됩니다.

html

<img
  src="{{ product.image }}"
  alt="{{ product.title }}"
  style="view-transition-name: product-{{ product.id }}"
>

전환 애니메이션 커스터마이징

기본 크로스페이드 대신 슬라이드 효과를 원한다면 ::view-transition-old와 ::view-transition-new 의사 요소를 직접 스타일링합니다.

css

@keyframes slide-in-from-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
 
@keyframes slide-out-to-left {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}
 
::view-transition-old(root) {
  animation: 300ms ease-in slide-out-to-left;
}
 
::view-transition-new(root) {
  animation: 300ms ease-out slide-in-from-right;
}

뒤로가기/앞으로가기 방향 구분 — JS가 개입해야 하는 지점

여기서부터는 순수 CSS만으로는 부족합니다. :active-view-transition-type() 의사 클래스는 CSS 전용이지만, cross-document 전환에서 forward/backward 같은 타입 자체를 설정하는 것은 pageswap/pagereveal 이벤트에서 JS로 해야 합니다. 아래 CSS만 붙여두면 아무 일도 일어나지 않습니다.

javascript

// 개념적 예시: pagereveal에서 방향 타입을 부여한다
window.addEventListener('pagereveal', (event) => {
  if (!event.viewTransition) return;
 
  const nav = navigation.activation;
  if (nav?.navigationType === 'traverse') {
    const from = nav.from?.index ?? 0;
    const to = nav.entry.index;
    event.viewTransition.types.add(to > from ? 'forward' : 'backward');
  } else {
    event.viewTransition.types.add('forward');
  }
});

그런 다음 CSS에서 타입에 따라 스타일을 분기합니다.

css

:active-view-transition-type(forward) {
  &::view-transition-old(root) {
    animation-name: slide-out-to-left;
  }
  &::view-transition-new(root) {
    animation-name: slide-in-from-right;
  }
}
 
:active-view-transition-type(backward) {
  &::view-transition-old(root) {
    animation-name: slide-out-to-right;
  }
  &::view-transition-new(root) {
    animation-name: slide-in-from-left;
  }
}

:active-view-transition-type() 의사 클래스의 정확한 표준 상태는 시점에 따라 달라질 수 있으니 도입 전에 MDN 페이지와 Chrome for Developers 문서에서 최신 명세와 지원 상태를 확인하시길 권장합니다.

프레임워크 통합 선택지

Astro의 `<ViewTransitions />`는 조금 다른 이야기

한 가지 짚어둘 부분이 있습니다. Astro 3.0의 <ViewTransitions /> 컴포넌트는 브라우저의 native cross-document 전환을 곧바로 활성화하는 게 아닙니다. 링크 클릭을 가로채서 JS로 새 페이지를 fetch하고 DOM을 교체하는 client-side routing(soft navigation) 방식이며, 그 위에서 document.startViewTransition()을 호출합니다. 즉 same-document 전환의 옷을 입은 MPA 경험에 가깝습니다.

astro

---
// src/layouts/BaseLayout.astro
import { ViewTransitions } from 'astro:transitions';
---
<html>
  <head>
    <ViewTransitions />
  </head>
  <body>
    <slot />
  </body>
</html>

이 방식의 장점은 same-document 경로를 타기 때문에 Firefox를 포함한 브라우저 전반에서 애니메이션이 재생된다는 점입니다. 대신 라우팅 로직이 클라이언트 JS에 의존하므로, 이 글의 큰 주제인 "JS 없는 순수 CSS cross-document 전환"과는 결이 다릅니다. 두 방식은 서로 배타적이지 않고, 사이트 성격에 따라 골라 쓰거나 조합할 수 있습니다.

다이어그램 3

솔직하게 보는 트레이드오프

무엇이 좋고, 무엇을 조심해야 하는가

항목	내용
CSS 기반 MPA 전환	기본 크로스페이드는 CSS 선언만으로 사이트 전체에 적용
Progressive Enhancement	미지원 브라우저에서는 기존 즉시 이동 방식으로 폴백, 사이트 기능 보존
의존성 축소 여지	페이지 전환용으로만 붙였던 애니메이션 라이브러리를 걷어낼 수 있는 경우가 있음(전체 대체는 아님)
MPA 아키텍처 유지	SEO, 서버 캐싱, 빌드 단순성을 포기할 필요 없음
세밀한 요소 제어	`view-transition-name`으로 요소 단위 전환 커스터마이징 가능

놓치면 나중에 고생하는 것들

Firefox cross-document 미지원: 2026년 9월 기준 Firefox 안정 버전은 MPA 전환 애니메이션을 지원하지 않습니다. Nightly에서 실험 중이지만, 지금 기준으로는 Firefox 사용자에게 애니메이션이 보이지 않는 점을 감안해야 합니다.

view-transition-name 유일성: 같은 이름이 페이지에 두 개 이상이면 전환이 조용히 깨집니다. 콘솔 에러도 없어서 원인 파악이 늦어지기 쉽습니다. DevTools의 Animations 패널을 열어두고 테스트하면 도움이 됩니다.

INP 영향: 복잡한 애니메이션이 메인 스레드를 오래 점유하면 INP 지표가 악화될 수 있습니다. 300ms 이하, transform과 opacity 위주로 유지하는 게 안전합니다.

Same-origin 제한: cross-document 전환은 동일 출처 페이지 간에만 동작합니다. 외부 도메인으로 이동하는 링크에는 적용되지 않습니다.

물리 기반 애니메이션의 한계: 드래그로 반응하는 인터랙티브 애니메이션, 물리 시뮬레이션 같은 고도로 스크립팅된 전환은 여전히 전문 라이브러리 영역입니다. View Transitions API가 모든 애니메이션 요구를 대체하진 않습니다.

브라우저 지원 현황 한눈에

다이어그램 4

도입을 검토한다면 어디부터 손댈지

지금 MPA를 운영 중이고 "SPA로 마이그레이션해야 전환 효과를 쓸 수 있나?" 고민 중이라면, 먼저 공통 CSS에 @view-transition { navigation: auto; }부터 넣어보시길 권합니다. 빌드 파이프라인을 건드릴 필요가 없고, Firefox에서는 그저 이전과 동일한 즉시 이동이 유지되므로 리스크가 크지 않습니다.

그다음으로 눈에 띄는 페이지 쌍(주로 목록→상세)에서 핵심 요소에 view-transition-name을 붙여보면 공유 요소 전환의 임팩트를 가장 빠르게 체감할 수 있습니다. 방향 구분이나 프레임워크 라우팅 통합처럼 JS가 필요한 영역은 그 이후에 필요한 만큼만 얹으면 됩니다.

Firefox가 cross-document 전환 지원을 완성했을 때 별도 수정 없이 자동으로 적용된다는 점은 이 방식의 장점이지만, 그 시점이 언제일지는 아직 확정된 것이 아닙니다. 지금 시점에서는 "Chromium 계열과 Safari 사용자를 위한 향상된 경험"이라는 실용적 프레이밍으로 접근하는 게 안전합니다.

참고 자료