고객이 메뉴를 누른다. 익숙한 사이트의 다른 페이지로 넘어가는데, 그 사이 화면이 한 번 흰색으로 깜박이고 모든 요소가 다시 그려진다. 같은 브랜드 안에 있다는 감각이 그 순간 끊긴다. 디자이너는 페이지마다 같은 컬러를 깔고 같은 폰트를 쓰지만, 전환의 깜박임 한 번이 일관성을 흩뜨려 놓는다.
이 깜박임을 매끄러운 흐름으로 바꿔주는 것이 View Transitions API다. 두 페이지 사이의 변화를 브라우저가 한 장면처럼 이어 그려, 자바스크립트 라이브러리 없이도 영화 같은 페이지 전환을 만들어 낸다.
페이지 전환의 깜박임은 사이트의 신뢰를 갉아먹는다
고객을 사이트의 깊은 곳까지 데려가려면, 매 페이지 전환이 같은 공간 안에서의 이동처럼 느껴져야 한다. 그러나 일반적인 멀티페이지 사이트는 메뉴를 누른 순간 화면 전체가 깜박이고 헤더와 푸터까지 다시 그려진다. 같은 자리에 같은 폰트로 다시 그려진다 해도, 그 짧은 공백이 고객의 눈에는 '여기는 다른 어딘가'라는 신호로 닿는다.
SPA(싱글 페이지 앱)는 이 문제를 자바스크립트 라우터로 풀어왔다. 그러나 작은 회사 사이트에는 SPA의 복잡함을 감당할 이유가 없고, SEO와 첫 로딩 속도까지 함께 잃는다. 멀티페이지의 단순함은 그대로 두고, 전환만 부드럽게 만들 수는 없을까. View Transitions API가 답하는 질문이 바로 이것이다.
한 줄의 CSS로 전환이 시작된다
이 API의 출발점은 단 한 줄의 CSS다.
@view-transition { navigation: auto; }
이 선언 한 줄을 스타일시트에 추가하면, 같은 사이트 안에서 페이지를 이동할 때 브라우저가 자동으로 두 화면 사이에 부드러운 페이드 전환을 그려 준다. 라이브러리도, 자바스크립트도, 빌드 도구도 필요 없다. 최신 크롬·엣지 계열 브라우저는 이미 이 기능을 지원하고 있고, 사파리도 도입을 진행 중이다.
같은 사진이 두 페이지를 가로질러 자라난다
더 흥미로운 것은 view-transition-name이다. 서로 다른 두 페이지에 같은 이름을 단 요소가 있으면, 브라우저는 그 둘을 같은 사물로 인식해 이전 페이지의 위치에서 새 페이지의 위치까지 부드럽게 이어 그린다.
- 상품 목록의 작은 썸네일이 상세 페이지의 큰 메인 이미지로 자연스럽게 확대된다
- 블로그 카드 안의 제목이 글 상세의 큰 제목으로 그대로 이어진다
- 지도의 작은 핀이 매장 상세 페이지의 큰 사진으로 흐르듯 변한다
고객이 본 것이 어디로 갔는지 눈으로 따라갈 수 있게 되면, 사이트 안에서의 이동은 더 이상 '클릭'이 아니라 '카메라가 가까이 다가가는 장면'이 된다.
실패해도 사이트가 망가지지 않는다
View Transitions API의 가장 큰 매력은 점진적 적용이다. 도입에 실패해도 사이트가 망가지지 않는다. 지원하지 않는 브라우저는 그저 기존처럼 깜박이며 페이지를 바꿀 뿐, 기능이 멈추거나 레이아웃이 깨지지 않는다.
그래서 처음 도입할 때는 가장 자주 오가는 한두 동선부터 시작하는 것이 좋다. 목록에서 상세로 넘어가는 흐름, 메인 페이지의 히어로 이미지가 소개 페이지로 이어지는 동선 정도면 충분하다. 모든 화면 사이에 전환을 욱여넣으면 오히려 산만해진다. 이 사이트는 어디로 이동하는지 보여주고 싶은가를 한 곳씩 짚어가며 붙이는 편이 낫다.
전환 한 번이 사이트의 격을 바꾼다
고객은 부드럽게 이어지는 화면을 '비싼 사이트', '잘 만든 브랜드'로 기억한다. 그동안 이런 인상은 SPA를 따로 구축할 수 있는 큰 회사의 몫이었지만, View Transitions API는 그 격차를 한 줄의 CSS로 좁힌다. 작은 회사가 큰 회사처럼 보이게 만드는 디테일이, 더 이상 기술 비용으로 막혀 있지 않다.
CYAN 에이전시는 작은 회사 웹사이트에도 이런 디테일을 차곡차곡 얹는다. 깜박임 한 번을 부드러운 흐름으로 바꾸는 작업도, 우리가 사이트 전체의 인상을 다듬는 방식 중 하나다.