[웹/API] View Transition API

---

 

 

View Transitions API

여러 DOM 상태 간에 애니메이션 전환을 쉽게 생성하는 동시에 DOM 콘텐츠를 단일 단계로 업데이트할 수 있는 메커니즘 제공

모바일 앱을 사용하면서 화면 이동 전환이나 요소 애니메이션(슬라이드, 페이드 인-아웃 효과, 확대 등)을 흔히 볼 수있다. 이러한 애니메이션은 만들 수 있으나 그게 마냥 쉬운 것만은 아니다.

SPA에서 이 같은 상태 간 전환에 CSS와 JS로 다음 과정을 수행한다.
이전 콘텐츠를 보여주면서 새 콘텐츠를 렌더링 → 애니메이션 발생 하며 전환 → 전환 완료 후 이전 콘텐츠 제거

위 과정에서 DOM에 이전 콘텐츠와 새 콘텐츠가 모두 표시되어 발생하는 문제가 있을 수 있는데, 이러한 DOM 변경 및 전환 애니메이션을 쉽게 처리하고자 등장한게 View Transitions API 다.

 

기본 보기 전환

• 작동 방식
  1. document.startViewTransition() : 현재 페이지의 스크린샷을 찍는다.
  2. displayNewImage() : 전달된 콜백이 이를 호출하며 DOM 변경
  3. API는 페이지의 새로운 상태를 라이브 표현을으로 캡처
  4. API는 다음 구조로 의사 요소 트리 구성
     • ::view-transition : 모든 보기 전환을 포함. 모든 페이지 콘텐츠의 맨 위에 있는 보기 전환 오버레이의 루트
     • ::view-transition-old : 이전 페이지의 스크린샷
     • ::view-transition-new : 새 페이지 보기의 실시간 표현
     전환 애니메이션이 실행되려고 하면 ViewTransition.ready 가 이행된다.
  5. ::view-transition
     └─ ::view-transition-group(root)
     └─ ::view-transition-image-pair(root)
          ├─ ::view-transition-old(root)
          └─ ::view-transition-new(root)
  6. 이전 페이지는 opacity 1→0 , 새 페이지는 0→1로 애니메이션 되며 교차 페이드 전환 생성
  7. 전환 애니메이션이 종료 상태가 되면 ViewTransition.finished 가 이행되어 응답한다.

 

사용자 지정 애니메이션

API의 기본 CSS 애니메이션이 아닌 일반 CSS를 사용하여 원하는 방식으로도 애니메이션을 수정할 수 있다.
::view-transition-old() , ::view-transition-new() 에 그 속성값을 주면 되는데 그 예제는 문서를 참고하도록 한다.

 

JavaScript로 애니메이션 제어

API에서 제공하는 애니메이션과 더불어 추가 작업을 설정하고 싶을 때 JavaScript로 제어할 수 있다. document.startViewTransition() 메서드는 개체 인스턴스를 반환하여, 전환된 상태에 대한 응답을 통해 JavaScript를 실행 할 수있다.
의사 요소 트리가 생성되고 애니메이션이 시작되려하면 ViewTransition.ready 를 이행하고, 애니메이션이 완료되면 ViewTransition.finished 가 이행되고 새 페이지가 사용자에게 표시된다. 그 예제 역시 문서를 참고하도록 한다.

 

브라우저 호환성

아쉽게도 이제 막 나온 API 이다 보니 호환성은 제한적이다.
포스팅 하는 시점(23-03-25) 기준으로 Chrome 111, Chrome Android 111, WebView Android 111, Edge 111 버전만 가능하다. 그 외 브라우저도 개발 중인 것 같으나 아직은 불가능하다는 점 유의하기.

 

---

애니메이션은 웹 페이지를 보다 아름답게 만들어주는 요소다. 더불어 서비스에 몰입하는 사용자 경험에 영향을 줄 수 있다. 그러한 애니메이션을 편리하게 API 만으로 만들어낼 수 있다니 굉장히 매력적이다.
아직은 신생이다보니 자세한 활용이나 문제는 계속 업데이트 되는 문서를 통해 참고해야겠지만 토이프로젝트 같은 1인 프로젝트에서 유용하게 쓸 수 있지 않을까.

 

---

▶ 참고자료(아래 더보기 클릭)

 

https://youtu.be/ObT87Xu_CO0

https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API

View Transitions API - Web APIs | MDN