View Transition API는 웹사이트의 사용자 경험을 혁신적으로 개선할 수 있는 다양한 시나리오에 적용됩니다.
View Transition API의 작동 원리
View Transition API는 다음 세 가지 핵심 원칙에 기반하여 전환을 구현합니다.
-
스냅샷 생성: 브라우저는 전환 전(이전 상태)과 전환 후(새로운 상태)의 DOM 스냅샷을 촬영합니다.
-
DOM 업데이트: 렌더링을 일시적으로 억제한 상태에서 DOM이 업데이트됩니다.
-
CSS 애니메이션: 촬영된 스냅샷들을 사용하여 CSS 애니메이션을 통해 전환 효과가 구동됩니다.
주요 활용 사례
일반적인 View Transition 활용 사례는 다음과 같습니다.
-
제품 목록 페이지의 썸네일 이미지가 상세 페이지에서 전체 크기 이미지로 부드럽게 전환.
-
페이지 탐색 중에도 고정된 내비게이션 바가 제자리에 유지.
-
필터링 시 아이템들이 그리드 내에서 위치를 변경하며 이동.
View Transition의 두 가지 유형
View Transition은 애플리케이션 아키텍처에 따라 두 가지 방식으로 트리거될 수 있습니다.
1. 동일 문서 View Transition (Same-document view transitions)
-
개요: 단일 문서 내에서 발생하는 전환으로, 주로 SPA(Single-Page Application)에서 사용됩니다. Chrome 111부터 지원됩니다.
-
트리거 방식: JavaScript의
document.startViewTransition()메서드를 호출하여 시작합니다.javascript function handleClick(e) { if (!document.startViewTransition) { updateTheDOMSomehow(); return; } document.startViewTransition(() => updateTheDOMSomehow()); } -
예시: 카드가 추가되거나 제거될 때 카드를 애니메이션화하는 SPA 예시.
2. 교차 문서 View Transition (Cross-document view transitions)
-
개요: 두 개의 다른 문서(페이지) 사이에서 발생하는 전환으로, 주로 MPA(Multi-Page Application)에서 사용됩니다. Chrome 126부터 지원됩니다.
-
트리거 방식: 동일 출처(same-origin) 내에서 두 페이지 모두 옵트인(opt-in)했을 경우, 사용자 클릭과 같은 교차 문서 내비게이션에 의해 자동으로 트리거됩니다. 별도의 API 호출이 필요 없습니다.
-
옵트인 방식: 다음 CSS 스니펫을 사용하여 전환을 활성화합니다.
css @view-transition { navigation: auto; } -
예시: 스택 내비게이터 데모와 같이 페이지가 스택에 푸시되거나 팝되는 MPA 예시.