View Transition API를 사용하면 한 번에 DOM을 업데이트하면서 두 상태 간에 애니메이션 전환을 생성할 수 있습니다.
이러한 종류의 전환은 저를 비롯한 개발자들이 자주 요청한 기능이었고, 좋은 기본값과 확장성 및 맞춤설정의 균형을 맞추는 방식으로 제공할 수 있었습니다. 자화자찬하는 것처럼 들릴 수 있지만 이 기능을 설계하는 데는 개발자 의견이 핵심이었습니다. 이 기능의 초기 프로토타입은 유연성이 훨씬 떨어졌으며, 프로토타입을 사용해 보고 의견을 제공해 주신 분들 (예: 여러분) 덕분에 완전히 다시 생각해 볼 수 있었습니다. 감사합니다.
이 기능을 숙지하고 데모를 사용해 보려면 가이드를 확인하세요. 여기에 포함되지 않은 내용이 있다고 생각되면 트위터, Mastodon 또는 이메일로 문의해 주세요.
View Transition API는 현재 Chrome에서만 사용할 수 있습니다. 다행히 점진적 개선으로 사용할 수 있습니다. 이 가이드에는 여러 브라우저에서 사용할 수 있는 도우미 함수가 포함되어 있지만 뷰 전환을 지원하는 브라우저에서만 애니메이션이 표시됩니다.
Google은 다른 브라우저 공급업체 및 독립 개발자의 의견을 바탕으로 CSS 작업 그룹 내에서 이 기능을 개발했습니다. 다른 브라우저에서 뷰 전환을 채택할지, 언제 채택할지는 알 수 없지만 Mozilla의 표준 입장 및 WebKit의 표준 입장을 계속 확인하세요.
하지만 아직 '완료'되지 않았습니다.
Chrome 111에 제공되는 기능은 첫 번째 출시 버전일 뿐입니다. 이미 모든 버그를 찾았기를 바라지만 발견한 문제가 있으면 crbug.com에서 신고해 주세요. 가급적 축소된 데모를 포함하세요. 익숙하지 않거나 불편하다면 트위터, Mastodon 또는 이메일로 문의해 주세요. 최선을 다해 도와드리겠습니다.
이 버전은 전체적인 그림에서 작지만 유용한 부분입니다. 현재 배송 중인 부품이 향후 호환되도록 하기 위해 이 기능을 확장하는 몇 가지 방안을 이미 수립했습니다.
다음은 Google의 계획을 미리 살펴볼 수 있는 기회입니다. 우선순위 순으로 나열되지는 않습니다 (많은 사용자에게 첫 번째 항목이 가장 중요할 수 있음). 가장 중요한 추가 기능에 관한 의견을 보내주세요.
문서 간 전환
대부분의 개발자가 다음으로 Google에서 해결해 주기를 바라는 기능입니다. 좋은 소식은 이미 이 기능을 개발 중이라는 점입니다.
View Transitions API는 동일 출처 문서에서 작동하도록 설계되었습니다. 유일한 차이점은 startViewTransition가 DOM 상태 변경을 알리는 대신 탐색 자체가 변경사항을 알린다는 점입니다.
chrome://flags/#view-transition-on-navigation 플래그 뒤에 있는 프로토타입입니다. 다음은 매우 간단한 데모와 더 복잡한 데모입니다.
이를 진행하려면 각 페이지에서 전환을 선택하는 방법을 알아야 합니다. 현재 메타 태그 <meta name="view-transition" content="same-origin">를 사용하고 있지만 CSS가 더 적합하다고 생각합니다. 또한 JavaScript를 작성하지 않고도 전환하는 페이지의 유형을 더 쉽게 파악할 수 있도록 했습니다.
해야 할 일이 많으며 '빠르게' 하는 것보다 '올바르게' 하는 것이 중요하지만, 이 기능은 확실히 Google의 우선순위입니다.
컴포저 기반 애니메이션
전환 그룹의 너비와 높이를 기본적으로 애니메이션 처리하도록 선택했습니다. 맞춤설정하기 훨씬 쉽기 때문입니다. 하지만 이렇게 하면 애니메이션이 기본 스레드에서 실행되므로 특히 페이지 로드 중에 적합하지 않습니다.
기본 애니메이션과 일반적인 맞춤설정을 감지한 후 컴포저 기반 애니메이션으로 재해석하여 성능을 개선할 계획입니다.
범위가 지정된 전환
현재 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가 없는 것처럼 요소가 무시되는 선택사항을 추가하고자 합니다.
이미 JavaScript로 style.viewTransitionName를 동적으로 설정하여 이 작업을 실행할 수 있지만 선언적 솔루션이 있어야 할 것 같습니다.
requestAnimationFrame 기반 애니메이션
이미 웹 애니메이션 API를 통해 JavaScript로 뷰 전환 애니메이션을 만들 수 있지만 requestAnimationFrame를 사용하여 프레임별로 작업을 실행해야 하는 경우도 있습니다.
이미 할 수 있지만 약간 해킹스럽습니다. 도움이 될 만한 도우미가 포함된 데모를 확인해 보세요. 해킹이 아닌 방식으로 만들고자 합니다.
두 부분으로 나누어 살펴보겠습니다. 첫 번째는 애니메이션이 완료되었음을 나타내는 API를 제공하는 것입니다. 둘째, 의사 요소에 JavaScript 액세스를 제공합니다. 두 번째 부분은 상당히 큰 작업일 수 있지만 장기적으로는 올바른 조치라고 생각합니다.
이제 멋진 뷰 전환을 만들어 보세요.
저와 마찬가지로 이 기능의 현재와 미래에 많은 기대를 걸고 계시길 바랍니다. 의견이 있거나 부드럽고 기능적인 뷰 전환이나 단순 우스꽝스러운 뷰 전환을 보여주고 싶은 경우 트위터 또는 Mastodon을 통해 문의해 주세요.