브라우저가 옛 페이지를 찍어 두자 새 페이지가 무대에 올랐다

요약

• W3C가 2022년 10월 공개한 첫 View Transitions Level 1 초안은 같은 문서의 이전 모습과 바뀐 모습을 브라우저가 포착해 별도 시각 계층에서 전환하도록 했다.
• 2023년과 2024년의 Level 1 문서는 갱신 순서, 이름 붙은 요소와 전환용 가상 요소를 다듬었다. 2024년 Level 2 초안은 문서 사이를 이동할 때의 시각 전환을 다뤘다.

뉴스 첫 화면의 사진은 카드 안에 작게 놓여 있다. 기사를 열면 같은 사진이 제목 위에서 크게 펼쳐진다. 독자는 사진의 이동을 따라 자신이 어느 기사로 갔는지 알아본다. 하지만 웹페이지 내부에서는 옛 카드가 사라지고 새 기사 상태가 들어선다. 매끄러운 움직임을 만들기 위해 두 상태를 문서에 동시에 남겨 두던 시절에는, 애니메이션 한 번을 위해 임시 무대를 짓고 다시 허물어야 했다. 장식이 문서의 구조에 월세를 청구하던 셈이다.

W3C의 2022년 10월 25일 첫 공개 초안은 그 임시 무대를 브라우저의 그리기 작업으로 옮겼다. 페이지가 startViewTransition()을 부르고 문서를 바꾸는 함수를 제공한다. 브라우저는 옛 모습을 포착한 뒤 함수가 실제 문서를 갱신하게 하고, 새 모습도 포착한다. 화면에는 두 시각 상태 사이의 전환이 나타난다. 옛 카드는 문서 안에서 계속 살아 있는 요소가 아니라, 잠시 퇴장 중인 사진에 가깝다.

이 구별은 독자에게도 중요하다. 애니메이션 때문에 이전 인터페이스와 새 인터페이스가 모두 실제 요소로 남으면 읽는 순서와 눌러야 할 대상이 헷갈릴 수 있다. 시각 자료만 잠깐 보관하면 문서는 곧장 새 상태로 갈 수 있다. 브라우저는 사진을 들고 있고, 사이트는 올바른 기사와 링크를 놓는다. 무대 사진사가 기사 제목까지 대신 골라 주지는 않는다.

2023년 9월 5일 후보 권고안은 진행 순서를 뚜렷하게 적었다. 옛 상태를 포착하고, 그리기를 잠시 멈추고, 갱신 함수를 실행하고, 새 상태를 포착한 뒤, 전환용 가상 요소를 만들어 움직인다. 기본은 화면 전체의 겹침 전환이다. 사진이나 제목이 따로 움직여야 한다면 view-transition-name을 주고 CSS로 효과를 고를 수 있다. 공용 무대는 브라우저가 세우지만, 어느 배우를 비출지는 페이지가 정한다.

배우에게는 겹치지 않는 이름이 필요하다. 같은 상태에서 두 요소가 동일한 전환 이름을 주장하면 시각 효과가 중단될 수 있다. 2024년 3월 28일 후보 권고 초안은 가상 요소의 구조와 ViewTransition의 여러 진행 지점을 더 자세히 밝혔다. 애니메이션을 건너뛰어도 문서 갱신 함수는 실행된다. 새 기사가 나타나는 일이 우선이고, 입장 음악은 그 뒤다. 조명이 꺼졌다고 배우까지 집에 보내서는 안 된다.

W3C 발표 이력에는 2022년 첫 초안, 2023년 후보 권고 단계와 2024년 개정이 이어진다. 세 단계의 공통된 거래는 분명하다. 브라우저는 이전과 이후의 화면을 잠시 보관하고, 사이트는 실제 문서를 한 번 갱신한다. 제작자는 어떤 요소에 이름을 붙일지, 얼마나 빠르게 움직일지, 새 화면에 무엇을 담을지 결정한다. 전환용 복제 무대가 콘텐츠 자체를 지배할 필요가 줄었다.

다음에는 더 큰 경계가 나타났다. 한 문서 안에서 내용을 바꾸는 대신, 다른 문서로 아예 이동하면 어떨까? 2024년 11월 13일 Level 2 작업 초안은 참여하는 페이지 사이의 문서 간 탐색에서 전환을 다룬다. Level 1이 한 문서의 장면 전환이라면, Level 2는 공연장을 옮기는 길이다. 브라우저는 그 길에서도 이전 화면과 다음 화면을 시각적으로 이어 준다.

독자의 평가는 간단하다. 눌렀던 카드의 사진이 기대한 기사로 이어지고, 새 화면이 읽을 만해야 한다. 엉뚱한 기사에 화려하게 착륙하면 오히려 실수가 더 잘 보인다. 브라우저는 옛 페이지의 퇴장을 멋지게 만들 수 있다. 새 페이지의 내용을 책임지는 쪽은 여전히 편집자다.