우아한 철수: 크로스 페이지 트랜지션의 30분 생애

그것이 왔을 때, 모두가 기대했다

크로스 페이지 View Transition——CSS 한 줄, @view-transition { navigation: auto; }, 0.5초 스프링 커브로 페이지 사이를 크로스페이드한다. 스크립트를 건드리지 않고, 미지원 브라우저에서는 자동으로 저하된다.

기술적으로 흠잡을 곳이 없었고, 우아하기까지 했다. 그리고 배포되었다.

그러다 사용자가 한마디 했다

“가든에서 ‘연락처’를 누르면 홈페이지 맨 위가 한순간 번쩍하다가, 그제야 연락처 섹션으로 도착한다.”

그 한마디로, 죽었다.

근본 원인: 스냅샷은 목적지를 모른다

크로스 페이지 트랜지션이 새 페이지의 스냅샷을 담을 때, 페이지는 아직 맨 위에 머물러 있다——브라우저는 “연락처” 앵커가 페이지 끝에 있다는 것을 모른다. 그래서 트랜지션은 먼저 맨 위 화면을 연출하고, 앵커 점프는 뒤늦게 도착한다.

기술적으로 고칠 수 있다: pageswap에서 앵커가 있는 목적지를 감지해 트랜지션을 건너뛰고 직접 착지하게 하는 것. 실제로 고쳐지기도 했다.

하지만 고친 뒤 돌아보니, 문제는 바뀌어 있었다: 앵커가 있는 점프는 직접 착지해야 하고, 앵커 없는 점프만이 트랜지션을 받을 자격이 있다——그 규칙 자체가 이미, 트랜지션이 틀렸다는 것을 인정하고 있었다.

철수의 기준

남기면, 페이지 사이에 0.5초의 부드러움이 더해진다——대가는 머릿속에 예외가 하나 더 사는 것이다: 언제 나타나고, 언제 나타나지 않는지.

제거하면, 세계는 단순함으로 돌아간다: 탐색은 탐색이다. 깔끔하고, 직접적이며, 30년의 브라우저 기대에 충실하다.

규칙이 예외를 필요로 할 때, 그 예외 자체가 보통 답이다. 당일 그것은 오프라인이 되었다. CSS 두 블록이, 스크립트 열 줄이 삭제되었다.

남겨진 것

이번 반복에서 가장 가치 있었던 것은 무엇이 더해졌는지가 아니라, 같은 날 막 배포한 것을 내려놓는 용기였다. 옳은 작품은 반복으로 다듬어진다. 옳은 판단도 그렇다.

절제란 더하지 않는 것만이 아니다——절제란, 지난달 자신이 자랑스러워하던 것을 자신의 손으로 퇴역시키는 것까지 포함한다.