View Transitions API: 브라우저의 부드러운 페이지 및 상태 변경
View Transitions API의 기능, 동일 문서 및 문서 간 전환의 작동 방식, CSS를 사용하여 스타일을 지정하는 방법 및 책임감 있게 사용하는 방법.
핵심 포인트
View Transitions API를 사용하면 브라우저가 페이지의 두 가지 상태 간에 애니메이션을 적용할 수 있습니다. DOM을 업데이트하는 함수로 document.startViewTransition()을 호출하면 브라우저는 이전 보기와 새 보기의 스냅샷을 찍고 그 사이에 애니메이션을 적용합니다. ::view-transition 의사 요소로 스타일을 지정할 수 있습니다. 단일 페이지 앱 내에서 작동하며 지원 브라우저에서는 페이지 탐색 전반에 걸쳐 작동합니다.
작동 원리
MDN는 document.startViewTransition()을 단일 페이지 앱에서 일반적으로 발생하는 동일한 문서 보기 전환을 시작하는 것으로 설명합니다. 브라우저는 현재 보기를 캡처하고, 업데이트를 실행하고, 새 보기를 캡처하고, 그 사이에서 애니메이션을 적용합니다. 기본적으로 이는 크로스페이드입니다. CSS를 사용하면 변경할 수 있습니다.
동일 문서 및 교차 문서
동일한 문서 전환은 SPA에서와 같이 한 페이지 내에서 실행되며 Chrome는 Chrome 111부터 이를 지원했습니다. 문서 간 전환은 역사적으로 불가능했던 다중 페이지 사이트의 별도 페이지 간에 애니메이션을 적용합니다. 그들은 페이지 교환 및 페이지 공개 이벤트와 CSS의 옵트인을 사용합니다. 브라우저 지원은 둘 사이에 다르므로 현재 호환성 표를 확인하세요.
전환 스타일 지정
대부분의 사용자 정의는 일반 CSS입니다.
- 요소에 뷰 전환 이름을 지정하여 페이지의 나머지 부분과 별도로 애니메이션을 적용합니다(예: 썸네일이 히어로 이미지로 성장).
- 애니메이션을 사용자 정의하려면 ::view-transition-old() 및 ::view-transition-new()를 대상으로 합니다.
- 지속 시간을 짧게 유지하고 모션을 의미 있게 유지하세요.
- 선호 감소 모션 검사로 사용자 정의 애니메이션을 래핑합니다.
점진적인 향상
API를 호출하기 전에 항상 지원을 확인하고, 누락된 경우 DOM을 직접 업데이트하세요. 페이지는 애니메이션 없이도 동일하게 작동해야 합니다. 탐색 시 긴 전환을 피하세요. 그러면 전체 사이트가 느리게 느껴집니다.
프로덕션 구현 예시
// Same-document transition with a safe fallback
function navigate(updateDom) {
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!document.startViewTransition || reduce) {
updateDom();
return;
}
document.startViewTransition(() => updateDom());
}
/* CSS: animate one element on its own */
.product-image { view-transition-name: product-image; }
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 200ms;
}기억할 핵심 원칙
- startViewTransition()은 기존 뷰와 새 뷰의 스냅샷을 찍고 그 사이에 애니메이션을 적용합니다.
- 동일한 문서(SPA) 및 교차 문서(다중 페이지) 변형이 존재합니다.
- view-transition-name 및 ::view-transition 의사 요소를 사용한 스타일
- 지원을 확인하고 즉시 업데이트로 돌아갑니다.
- 전환을 짧게 유지하고 감소된 모션을 존중합니다.
자주 묻는 질문
출처
- View Transition API — MDN 웹 문서
- Smooth transitions with the View Transition API — 개발자를 위한 Chrome