교차 문서 뷰 트랜지션, 튜토리얼이 안 알려준 함정들
다중 페이지 앱(MPA)에서도 SPA처럼 부드러운 화면 전환을 구현하려는 시도는 오래된 숙원이었다. 교차 문서 뷰 트랜지션은 자바스크립트 프레임워크 없이 CSS 한 줄로 이를 가능하게 하지만, 막상 적용하면 튜토리얼이 다루지 않는 함정들이 줄줄이 튀어나온다. CSS-Tricks는 2026년 5월, 실제 도입 과정에서 마주치는 숨은 제약들을 정리했다. 기능이 Baseline에 안착한 지금이야말로 이런 현실적 디테일이 중요해진 시점이다.
"Cross-document view transitions have a hard 4-second timeout. If the new page doesn't reach a renderable state within 4 seconds, the transition dies."CSS-Tricks
무슨 일인가
핵심은 더 이상 <meta name="view-transition"> 태그를 쓰지 않는다는 점이다. 현재 표준은 CSS의 @view-transition { navigation: auto; } 규칙이며, 구버전 문법은 폐기됐다. 더 치명적인 함정은 내비게이션 시작 후 4초의 하드 타임아웃으로, 새 페이지가 그 안에 렌더 가능한 상태에 도달하지 못하면 애니메이션이 조용히 사라진다. 또한 전환용 의사 요소의 기본값이 object-fit: fill이라 이미지가 찌그러지는데, 이는 object-fit: cover로 잡아야 한다.
여러 시각
같은 뷰 트랜지션이라도 자료마다 강조점이 다르다.
- web.dev — 동일 문서 뷰 트랜지션이 Firefox 144와 함께 Baseline에 진입했다고 알리며, 브라우저 호환성과 성숙도를 강조하는 공식 관점.
- CSS-Tricks(7 Recipes) — 픽셀 디졸브, 와이프, 원형 리빌, 3D 플립 등 바로 복사해 쓰는 레시피 중심으로, 이론보다 손으로 익히는 실전 관점.
왜 중요한가
그동안 부드러운 페이지 전환은 사실상 SPA의 전유물이었고, 그 대가로 라우팅과 상태 관리의 복잡도를 떠안아야 했다. 교차 문서 뷰 트랜지션은 평범한 서버 렌더링 MPA에 CSS만으로 동일한 연속성을 부여한다. 즉 프레임워크 종속성을 줄이면서도 UX 품질은 끌어올릴 수 있다는 뜻이다. 다만 함정을 모르면 "가끔 동작하고 가끔 안 되는" 불안정한 경험으로 이어진다.
실무 적용
- 구문을 점검하라. 폐기된 메타 태그 대신
@view-transition규칙을 쓰고, Safari 18.2 이상·Chromium 계열만 지원됨을 전제로 점진적 향상으로 설계한다. - 4초 타임아웃을 의식해 새 페이지의 초기 렌더 비용을 줄여라. 무거운 데이터 페치는 전환 이후로 미루는 편이 안전하다.
- 이미지가 포함된 전환에는 의사 요소에
object-fit: cover를 명시하고,pageswap·pagereveal이벤트로 양 페이지의 상태를 조율한다.
Kenny의 관점
뷰 트랜지션의 진짜 가치는 화려한 효과가 아니라 "인지적 연속성"에 있다. 사용자가 어디서 어디로 이동했는지 시각적으로 이어 보여주면 방향 감각 상실이 줄고 체감 속도가 빨라진다. 그래서 나는 3D 플립 같은 과시적 전환보다 공유 요소(view-transition-name) 매칭으로 맥락을 잇는 절제된 사용을 권한다. 다만 4초 타임아웃은 곧 성능 예산 문제이므로, 전환을 켜는 순간 LCP 최적화가 선택이 아닌 필수가 된다는 점을 잊지 말아야 한다.
출처
이 글은 아래 원문을 바탕으로 Kenny가 한국어로 요약·정리한 큐레이션입니다.
원문 보기 — CSS-Tricks ↗