메뉴를 누르면 화면이 한 번 새하얗게 비워졌다가 다음 페이지가 처음부터 다시 그려집니다. 기능상 문제는 없지만, 손님 입장에서는 매 클릭마다 '방금 보던 화면이 사라지고 새 화면이 로딩되는' 단절을 느낍니다. 이 끊김을 없애려고 그동안 작은 회사 사이트조차 SPA(단일 페이지) 프레임워크를 도입하고, 그 위에 전환 애니메이션 라이브러리를 또 얹곤 했습니다. 부드러움 하나를 위해 구조 전체를 바꾸는 셈이었죠.
왜 그동안은 프레임워크가 필요했나
브라우저는 원래 페이지를 이동할 때 이전 화면을 통째로 버리고 새 문서를 처음부터 그립니다. 그래서 '이전 화면에서 다음 화면으로 자연스럽게 넘어가는' 중간 과정을 만들려면, 페이지를 실제로 이동하지 않고 자바스크립트로 내용만 갈아끼우는 방식(SPA)을 써야 했습니다. 전환 효과는 그 위에서 직접 구현하거나 별도 라이브러리에 의존했고요. 작은 사이트에는 과한 무게였습니다.
View Transitions가 바꾼 것
View Transitions API는 이 과정을 브라우저 기본 기능으로 끌어내립니다. 핵심은 '바뀌기 직전 화면'과 '바뀐 직후 화면'을 브라우저가 스스로 스냅숏으로 찍어, 그 둘 사이를 부드럽게 이어 그려준다는 점입니다. 개발자는 어떻게 움직일지 효과만 지정하면 됩니다.
같은 페이지 안에서
탭을 바꾸거나 목록을 정렬할 때처럼 화면 일부만 갱신하는 경우, 바뀌는 코드를 document.startViewTransition() 으로 감싸기만 하면 됩니다. 그러면 변경 전후가 기본값으로 은은하게 페이드되며 이어집니다.
페이지를 넘나들 때
더 중요한 변화는 여러 페이지를 오가는 일반 사이트(MPA)에서도 작동한다는 점입니다. 문서 head 에 전환을 허용하는 한 줄 설정만 넣으면, 목록에서 상세로 넘어갈 때 화면이 끊기지 않고 이어집니다. 자바스크립트 프레임워크 없이, 평범한 링크 클릭만으로요.
이런 자리에서 빛납니다
- 제품 목록 → 상세 페이지: 눌렀던 썸네일이 그대로 커지며 상세 화면의 대표 이미지로 이어지면, 손님은 '같은 물건을 더 자세히 보는 중'이라고 자연스럽게 인식합니다.
- 갤러리·포트폴리오: 작은 카드가 전체 화면으로 펼쳐지는 흐름이 한 호흡으로 연결됩니다.
- 탭·필터 전환: 콘텐츠가 툭 바뀌지 않고 부드럽게 교차되어 어디가 어떻게 달라졌는지 눈이 따라가기 쉽습니다.
도입할 때 챙길 점
좋은 도구일수록 절제가 중요합니다. 모든 클릭에 화려한 전환을 걸면 오히려 느리고 산만하게 느껴집니다. 전환은 '연결되는 두 화면'에만 쓰는 것이 좋습니다. 또한 아직 모든 브라우저가 동일하게 지원하는 단계는 아니므로, 효과가 적용되지 않는 환경에서도 사이트가 멀쩡히 작동하도록 만드는 것이 전제입니다. 다행히 View Transitions는 '되면 부드럽게, 안 되면 원래대로' 동작하는 구조라, 기존 사이트에 위험 없이 얹을 수 있습니다. 마지막으로 움직임을 줄이고 싶다고 설정한 손님에게는 전환을 꺼주는 배려까지 챙기면 완성도가 올라갑니다.
구조를 바꾸지 않고 경험만 끌어올리는 길
한때 '부드러운 전환'은 사이트를 통째로 SPA로 다시 짓는다는 뜻이었습니다. 이제는 멀티페이지 구조를 그대로 둔 채, 표준 기능 몇 줄로 같은 인상을 줄 수 있습니다. 가볍게 유지하면서도 손님이 느끼는 완성도는 한 단계 올라가는 셈입니다.
CYAN은 새 기술을 '있어 보이려고' 끼워 넣기보다, 손님의 시선이 끊기는 지점을 먼저 찾고 거기에만 꼭 맞게 적용하는 방식으로 작은 회사 사이트를 만듭니다. 화려함보다 '한 호흡으로 이어지는 자연스러움'이 결국 신뢰로 남는다고 믿기 때문입니다.