View Transition API를 사용하면 두 상태 간에 애니메이션 전환을 생성하면서 단일 단계에서 DOM을 업데이트할 수 있습니다.
이런 종류의 전환은 저를 포함하여 개발자들이 자주 요청하는 기능이었는데, 저는 좋은 기본 설정과 확장성 및 맞춤설정의 균형을 이루는 방식으로 전환을 완료할 수 있었습니다. 스스로 칭찬하는 것 같지만 이 기능을 설계하는 데 있어 개발자 의견이 가장 중요했습니다. 이 기능의 초기 프로토타입은 유연성이 훨씬 낮았으며, 여러분과 같은 분들이 프로토타입을 사용해 보고 의견을 제공하자 완전히 다시 생각하게 되었습니다. 감사합니다
기능을 이해하고 데모를 사용해 보려면 가이드를 확인하세요. 여기에서 다루지 않은 내용이 있을 경우 Twitter, Mastodon 또는 이메일을 통해 저에게 문의해 주세요.
View Transition API는 현재 Chrome에서만 사용할 수 있습니다. 이 가이드에는 여러 브라우저에서 사용할 수 있는 도우미 함수가 포함되어 있지만 보기 전환을 지원하는 브라우저에서만 애니메이션을 가져옵니다.
Google은 다른 브라우저 공급업체와 독립 기관의 의견을 바탕으로 CSS Working Group 내에서 이 기능을 개발했습니다. Google에서는 다른 브라우저에서 뷰 전환을 채택할지 또는 언제 지원할지 알 수 없지만 Mozilla의 표준 위치 및 WebKit의 표준 위치는 지속적으로 주시해야 합니다.
하지만 아직 '완료'되지는 않았습니다!
Chrome 111에 도입된 기능은 첫 번째 버전에 불과합니다. Google에서 모든 버그를 찾아냈길 바라며, 문제가 발견되면 crbug.com에서 축소된 데모를 포함하여 신고해 주시기 바랍니다. 익숙하지 않거나 익숙하지 않은 경우 트위터, 마스토돈 또는 이메일로 문의해 주시면 도와드리겠습니다.
이번 출시는 작지만 큰 그림의 유용한 부분입니다. 현재 출시되는 부품이 향후에도 호환될 수 있도록 이 기능의 몇 가지 확장 프로그램을 미리 준비했습니다.
YouTube의 의견을 간단히 살펴보겠습니다. 이는 우선순위가 높지 않으므로 (많은 사람들에게 첫 번째가 가장 중요할 수도 있음) 가장 중요한 추가사항에 대한 의견을 보내주시기 바랍니다.
문서 간 전환
제 생각에 대부분의 개발자분들께서 다음 작업을 바라고 있는 부분이며, 좋은 소식은 이미 이를 준비하고 있다는 것입니다.
View Transitions API는 동일한 출처 문서에서 작동할 수 있도록 설계되었습니다. 유일한 차이점은 startViewTransition가 DOM 상태 변경을 알리는 대신 탐색 자체에서 변경사항을 알리는 것입니다.
chrome://flags/#view-transition-on-navigation 플래그 뒤에 이 프로토타입의 프로토타입이 있습니다. 매우 간단한 데모와 더 복잡한 데모입니다.
이를 진행하려면 각 페이지가 전환에 어떻게 참여하는지 파악해야 합니다. 현재 <meta name="view-transition" content="same-origin"> 메타 태그를 사용하고 있지만 이 경우에는 CSS가 더 적합하다고 생각합니다. 또한 자바스크립트를 작성할 필요 없이 어떤 종류의 페이지에서 전환되는지 더 쉽게 알 수 있도록 하려고 합니다.
해야 할 일이 많고 '빠르게' 하기보다는 '정확하게' 하는 것이 좋지만, 저희에게는 분명히 우선순위가 높습니다.
합성 기반 애니메이션
기본적으로 전환 그룹에서 너비와 높이에 애니메이션을 적용하는 것을 선택했습니다. 사용자 정의가 훨씬 더 쉽기 때문입니다. 그러나 이는 애니메이션이 기본 스레드에서 실행됨을 의미하는데, 이는 특히 페이지가 로드되는 동안은 바람직하지 않습니다.
우리는 기본 애니메이션과 일반적인 맞춤설정을 감지하고, 이를 컴포지터 중심의 애니메이션으로 다시 해석하여 성능을 크게 향상할 계획입니다.
범위 지정 전환
현재 SPA 전환은 전체 문서로 범위가 제한되며 한 번에 하나의 전환만 실행할 수 있습니다. 여러 페이지 구성요소가 독립적으로 전환을 실행할 수 있도록 전환의 범위를 특정 요소로 지정할 수 있는 기능을 도입하려고 합니다.
이를 통해 삽입된 동영상 플레이어에서 삽입된 채팅 위젯과 동시에 보기 전환을 사용할 수 있습니다.
중첩된 전환 그룹
현재 모든 ::view-transition-group는 동위입니다. 이는 뷰를 한 컨테이너에서 다른 컨테이너로 전환할 수 있고 클리핑에 대해 걱정할 필요가 없기 때문에 좋은 일입니다.
그러나 전환에 관련된 일부 상위 요소에 의해 뷰를 자르고자 하는 경우도 있습니다.
다른 ::view-transition-group 내에 특정 ::view-transition-group이(가) 배치된 선택을 조사하려고 합니다.
전환 클래스
각 view-transition-name은 고유해야 합니다. 이를 통해 특정 요소가 문자 그대로 동일한 요소가 아니더라도 DOM 변경 시 양쪽에서 개념적으로 '동일'하다는 것을 확인할 수 있습니다.
그러나 view-transition-name가 서로 다른 항목에서 동일한 종류의 애니메이션을 사용해야 하는 경우도 있습니다. 이는 현재 모든 view-transition-name에 선택기 규칙을 추가한다는 의미입니다.
이러한 한계를 극복하기 위해 전환 클래스를 생성하는 방법을 추가하려고 합니다.
오프스크린 요소 무시
요소에 view-transition-name을 지정하면 자체 그룹으로 전환에 참여하게 됩니다. 그러나 이렇게 하는 것이 적합하지 않은 경우도 있습니다. 예를 들어 헤더에 view-transition-name를 지정한 후 2,000픽셀 아래로 스크롤한 상태에서 페이지 상단의 상태로 전환하면 헤더가 2,000픽셀 떨어진 곳에서 애니메이션되므로 타이밍 측면에서 잘못된 느낌을 줍니다.
대신 표시 영역 밖에 있는 경우 마치 view-transition-name가 없는 것처럼 요소가 무시되는 옵트인을 추가하려고 합니다.
style.viewTransitionName를 동적으로 설정하여 JavaScript로 이미 이 작업을 실행할 수 있지만, 선언적 솔루션이 있어야 할 것 같습니다.
requestAnimationFrame 기반 애니메이션
이미 웹 애니메이션 API를 통해 JavaScript로 뷰 전환 애니메이션을 만들 수 있지만 requestAnimationFrame를 사용하여 프레임별로 작업을 진행해야 하는 경우도 있습니다.
이미 그렇게 할 수 있지만 약간 복잡합니다. 도움이 될 만한 도우미가 나와 있는 데모를 확인하세요. 해킹되지 않도록 하고 싶습니다.
이 작업은 두 부분으로 나누어 살펴보겠습니다. 첫째, 애니메이션이 완료된 시점을 표시하는 API를 제공합니다. 둘째, 의사 요소에 대한 자바스크립트 액세스를 제공합니다. 두 번째 부분은 상당히 번거로울 수 있지만 장기적으로 보면 옳은 일이라고 생각합니다.
이제 멋진 뷰 전환을 만들어 보겠습니다.
저처럼 이 기능의 현재와 미래에 대해 기대해 주시기 바랍니다. 의견이 있으시거나 부드럽고 기능적인 뷰 전환 또는 단순 우스운 뷰 전환을 보여주고 싶으시다면 트위터 또는 Mastodon을 통해 문의해 주세요.