웹사이트에서 메뉴를 누르면 화면이 한순간 하얗게 비었다가 새 페이지가 툭 하고 나타납니다. 길어야 0.3초, 익숙해서 눈치채지 못할 뿐이지 그 깜빡임은 매번 일어납니다. 같은 정보를 보여 주는 모바일 앱은 화면이 스르륵 밀려 들어오는데, 우리 회사 사이트만 페이지가 바뀔 때마다 흰 종이를 한 장씩 덮었다 걷는 느낌이 드는 이유입니다.
그동안 이 '깜빡임'을 없애려면 사이트 전체를 자바스크립트로 다시 짜야 했습니다. 화면을 새로 부르지 않고 부분만 바꾸는 방식인데, 작은 회사 사이트에는 과한 공사였습니다. 이제는 View Transitions라는 브라우저 기본 기능이 그 일을 대신합니다.
화면이 '깜빡'하는 그 0.3초가 남기는 인상
사람은 끊김에 민감합니다. 내용이 아무리 좋아도 화면이 툭툭 끊기면 '어딘가 엉성하다'는 인상이 먼저 남습니다. 반대로 화면이 부드럽게 이어지면 같은 내용도 더 정돈되고 믿음직스럽게 느껴집니다. 전환 효과는 장식이 아니라, 방문자가 우리 회사의 꼼꼼함을 무의식적으로 가늠하는 단서입니다.
View Transitions가 하는 일 — 두 화면 사이에 다리를 놓는다
원리는 단순합니다. 화면이 바뀌기 직전의 모습과 바뀐 직후의 모습, 두 장면을 브라우저가 스스로 사진처럼 찍어 둔 뒤 그 사이를 부드럽게 이어 줍니다. 기본 동작은 자연스러운 화면 겹침(크로스페이드)이고, 원하면 밀어 넣기·확대 같은 움직임으로 바꿀 수도 있습니다. 개발자가 애니메이션을 한 프레임씩 계산할 필요가 없다는 것이 핵심입니다.
같은 페이지 안에서: 자바스크립트 한 줄
탭을 누르면 목록이 바뀌거나, 필터를 걸면 카드가 다시 깔리는 화면이라면 document.startViewTransition() 한 줄로 감싸 주기만 하면 됩니다. 내용을 바꾸는 코드를 그 안에 넣으면, 바뀌기 전과 후를 브라우저가 알아서 부드럽게 연결합니다. 라이브러리 설치도, 복잡한 설정도 없습니다.
페이지를 넘어서도: 여러 페이지 사이트에서도 부드럽게
대부분의 작은 회사 사이트는 '회사소개', '서비스', '문의'처럼 여러 페이지로 나뉜 구조입니다. 예전에는 이런 구조에서 전환 효과를 주기가 가장 까다로웠는데, 이제는 CSS에 @view-transition { navigation: auto; } 한 줄을 더하는 것으로 끝납니다. 같은 사이트 안에서 페이지를 옮길 때마다 흰 깜빡임 대신 부드러운 전환이 자동으로 입혀집니다.
특정 요소를 '이어 붙이는' view-transition-name
목록에서 누른 사진이 상세 페이지의 큰 사진으로 자연스럽게 커지며 이어지게 할 수도 있습니다. 두 페이지의 같은 요소에 view-transition-name이라는 같은 이름표를 붙이면, 브라우저가 '이 둘은 같은 대상'이라고 알아보고 둘 사이를 잇습니다. 쇼핑몰의 상품 사진, 포트폴리오의 작업 이미지에서 특히 인상적인 효과를 냅니다.
지원하지 않는 브라우저는? 그냥 예전처럼 넘어갈 뿐
걱정되는 부분은 '오래된 브라우저에서 깨지지 않을까'일 텐데, 이 기능은 점진적 향상 방식입니다. 지원하는 브라우저에서는 전환이 부드럽게 입혀지고, 지원하지 않는 브라우저에서는 효과만 빠진 채 예전처럼 평범하게 페이지가 넘어갑니다. 어느 쪽에서도 사이트가 망가지지 않으니, 부담 없이 더해 두면 되는 기능입니다.
작은 회사 사이트일수록 효과가 크다
큰 기업 사이트는 이미 자체 개발팀이 비슷한 효과를 구현해 둔 경우가 많습니다. 정작 이 기능의 덕을 가장 크게 보는 쪽은, 적은 비용으로 '앱 같은 매끄러움'을 갖고 싶은 작은 회사입니다. 코드 몇 줄로 방문자가 느끼는 완성도가 한 단계 올라가기 때문입니다.
다만 모든 페이지에 화려한 움직임을 욕심내면 오히려 어지럽고 느리게 느껴집니다. 어디에 어떤 전환을 얼마나 절제해서 쓸지가 결국 완성도를 가릅니다. CYAN은 작은 회사의 웹사이트를 만들 때 이런 브라우저 기본 기능을 우선 활용해, 무거운 라이브러리 없이도 가볍고 매끄럽게 동작하는 사이트를 지향합니다. 새로 만들든 기존 사이트를 다듬든, 깜빡임 하나를 줄이는 작은 손질이 방문자의 첫인상을 바꿉니다.