손님이 목록에서 마음에 드는 메뉴 하나를 눌렀다. 그런데 화면이 스르륵 이어지는 대신, 온 페이지가 흰 종이처럼 한 번 툭 사라졌다가 처음부터 다시 그려진다. 0.3초 남짓한 그 깜빡임 동안 손님은 자기도 모르게 멈칫한다. 스마트폰 앱에서는 화면이 옆으로 미끄러지고 사진이 자연스럽게 커지는데, 우리 홈페이지만 유독 '딱딱한 종이 넘기기' 같다. 이 어색함의 정체가 바로 페이지 전환이다.
왜 웹의 화면 전환은 늘 '툭' 끊겼나
지금까지 웹에서 부드러운 화면 전환을 만들려면, 개발자가 옛 화면과 새 화면을 동시에 띄워 놓고 자바스크립트로 위치와 투명도를 일일이 계산해 겹쳐야 했다. 손이 많이 가고 잘 깨지다 보니, 대부분의 작은 회사 홈페이지는 그냥 포기하고 페이지를 통째로 새로 그리는 쪽을 택했다. 손님이 느끼는 그 '멈칫'은 게으름이 아니라, 여태껏 웹이 감당하기 버거웠던 일이었던 셈이다.
브라우저가 대신 스냅샷을 찍어 준다
뷰 트랜지션(View Transitions)은 이 수고를 브라우저에게 통째로 넘긴다. 화면이 바뀌기 직전과 직후를 브라우저가 사진처럼 한 장씩 찍어 두었다가, 그 사이를 스스로 부드럽게 이어 붙인다. 개발자는 "이제 화면을 바꾼다"고 알려 주기만 하면 된다. 두 장의 사진을 겹쳐 녹이는 어려운 계산은 전부 브라우저 몫이라, 예전이라면 며칠 걸렸을 효과가 코드 몇 줄로 끝난다.
같은 페이지 안에서 — 목록이 상세로 자란다
진짜 매력은 낱개 요소를 이어 줄 때 드러난다. 목록의 작은 사진 한 장에 이름표를 붙여 두면, 손님이 그 사진을 눌렀을 때 사진이 사라졌다 다시 뜨는 게 아니라 그 자리에서 상세 화면 크기로 스르륵 자라난다. 손님의 눈은 방금 고른 것을 놓치지 않고 끝까지 따라가고, "내가 지금 어디로 왔는지"가 몸으로 이해된다. 쇼핑몰의 상품, 포트폴리오의 작업 사진, 메뉴판의 음식에서 특히 효과가 크다.
페이지를 넘어서도 이어진다
얼마 전까지는 한 페이지 안에서만 가능했지만, 이제는 서로 다른 페이지 사이도 이어 붙일 수 있게 됐다. CSS에 @view-transition 한 줄을 선언해 두면, 회사 소개에서 문의 페이지로 넘어갈 때도 헤더는 그 자리에 얌전히 머물고 본문만 부드럽게 바뀐다. 여러 장으로 나뉜 홈페이지가 마치 하나의 앱처럼 매끈하게 흘러가는 것이다.
작은 회사가 지금 챙길 점
가장 든든한 점은 점진적 향상이라는 성질이다. 이 기능을 지원하지 않는 옛 브라우저에서는 전환 효과만 조용히 생략될 뿐, 페이지 이동 자체는 멀쩡히 된다. 그러니 "일부 손님만 못 본다"는 걱정 없이 지금 바로 얹어도 된다. 다만 화면 움직임에 어지럼을 느끼는 손님을 위해, 기기에서 '동작 줄이기'를 켠 경우 효과를 자동으로 끄는 배려 한 줄은 꼭 함께 넣어야 한다. 멋보다 앞서는 것은 언제나 편안함이다.
전환 효과는 눈에 잘 띄지 않지만, 손님이 홈페이지에 머무는 내내 손끝으로 느끼는 '완성도'를 조용히 끌어올린다. CYAN은 작은 회사의 홈페이지를 만들 때, 이런 최신 웹 기술을 옛 브라우저에서도 탈 없이 돌아가도록 조심스럽게 얹어, 손님이 이유는 몰라도 '왠지 잘 만든 곳'이라 느끼게 하는 데 마음을 쓴다.
