정적 사이트 팀은 MPA에도 SPA에 가까운 전환감을 주고 싶지만, 클라이언트 라우터로 전면 재작성은 부담스럽습니다. View Transitions API—2026년에 특히 주목받는 문서 간(cross-document) 기능—은 일반 링크와 서버 렌더링 HTML만으로 동일 출처 탐색 사이에 애니메이션을 얹을 수 있게 합니다. 누가 지금 도입할지, Safari/WebKit을 호환 표에 어떻게 둘지, 그리고 주 개발 기기가 Linux나 Windows일 때 최종 승인용 Apple Silicon Mac mini를 빌리는 이유를 정리합니다. QA 일정과 함께 정적 컴포넌트의 컨테이너 쿼리와 STP 대 안정판 Safari 글을 참고하면 수월합니다.
문서 간 뷰 전환은 브라우저가 문서를 바꾸는 전체 탐색에서 발화합니다. 모든 페이지가 공유하는 스타일시트에 @view-transition { navigation: auto; }만 쓰면 옵트인이 됩니다. 엔진은 이전·새 문서 트리의 스냅샷을 잡고, 공통 view-transition-name 요소를 보간합니다. 미지원 환경은 즉시 이동만 수행—점진적 향상으로 레이아웃은 유지되고 효과만 빠집니다.
2026년 전형적인 스택은 (1) 정적 호스트의 글로벌 CSS, (2) 프레임워크가보내는 메타 수준 힌트, (3) 디자이너·개발자가 공유하는 네이밍 규칙입니다. 랜딩에서 80개가 넘는 고유 전환 이름을 만들지 않도록 가이드를 두면 유지보수가 쉬워집니다. Astro, Eleventy, Hugo 등은 공통 파셜로 각 라우트에 같은 opt-in을 주입할 수 있어 클라이언트 번들이 필요 없습니다.
정적 MPA에 추가된 것
문서 간 전환은 동일 출처 전체 페이지 탐색에 묶입니다. 스냅샷 후 이름이 겹치는 요소는 morph, 나머지는 크로스페이드 등으로 처리됩니다. 빌드 파이프라인에서는 베이스 스타일에 한 번만 @view-transition을 두고 모든 템플릿이 같은 해시 CSS를 가리키게 하는 편이 안전합니다.
정적 생성기는 횡단 관심사에 강하고, 배포 시 CSS·HTML 참조를 맞추기 쉽습니다. 기능 플래그로 블록을 감싸 특정 라우트만 일시적으로 끌 수도 있습니다.
2026 브라우저 매트릭스
디자인 리뷰에서 아래 표를 공유하세요. 「프리뷰」 채널은 법무가 명시하지 않는 한 계약 최종 승인에 쓰지 않습니다.
| 엔진 | 문서 간 VT | 정적 MPA 메모 |
|---|---|---|
| Chromium 125+ | 안정 | DevTools 오버레이가 풍부. 모바일 Chrome GPU 메모리 주의. |
| Safari 18+ / WebKit | 지원(마이너마다 재확인) | 실제 macOS 필수. iOS Safari는 터치 스크롤 특성이 있습니다. |
| Firefox | 플래그/단계적 롤아웃 | 폴백 전제. 엔진 대기로 출시를 멈추지 마세요. |
| 임베디드 WebView | 가변 | 인앱 브라우저는 애니메이션을 제거할 수 있음. 동일 문서는 document.startViewTransition 별도 감지. |
긴 카탈로그에서 동시에 이름 붙은 전환이 열 개를 넘으면, 일부 팀은 GPU 사용이 12~18% 가량 늘었다고 보고합니다. 웹폰트처럼 소수의 고임팩트 순간에 예산을 쓰는 편이 건강합니다.
운영 가능한 MPA 패턴
공유 크롬: 내비, 푸터, 공지 바가 첫 후보입니다. 레이아웃 파셜에 안정적인 view-transition-name을 정의해 모든 정적 페이지가 상속합니다.
썸네일→상세: 그리드 타일과 PDP 히어로를 SKU 기반 논리 이름으로 연결합니다. 서버에서 일치를 검증해 엉뚱한 페이지가 이름을 공유하지 않게 합니다.
문서 사이트: 본문만 크로스페이드하고 사이드바는 고정—독자에게는 연속성이 느껴지지만 MPA입니다. 컨테이너 쿼리 기반 사이드바와 잘 맞습니다.
안티패턴은 전송 4MB를 넘는 무거운 LP에 전체 opacity 애니메이션을 거는 것, 비동기로 다시 그려지는 광고 슬롯에 전환을 묶는 것입니다. 중간 재페인트가 끼면 끊깁니다.
성능 가드레일
- 라우트당 동시 이름 요소는 프로파일 없이 10~12개 전후를 상한으로.
- 움직이는 카드에
contain: paint로 레이어를 격리하되 Safari에서 overflow 클립 확인. - 출발·도착 템플릿 모두에 크리티컬 CSS를 선로딩해 스로틀링된 4G에서도 탐색 후 100ms 안팎으로 새 문서가 페인트되게.
prefers-reduced-motion: reduce에서는 장식 전환 비활성—접근성 중시 팀은 필수로 봅니다.
Web Vitals와 함께, 전환 켠 뒤 LCP 중앙값이 200ms 이상 나빠지면 불필요한 애니메이션을 미루거나 스냅샷 면적을 줄입니다.
Safari/WebKit 워크플로
Linux CI만으로는 블렌딩·모서리 미세 번짐을 보증하기 어렵습니다. 주당 45분 정도 실기 슬롯을 두고, 고객 대면은 안정판 Safari, 최신 수정 확인은 Safari Technology Preview로 한정하는 것이 안전합니다. 디자인 QA용 화면 녹화를 남기고 Web Inspector 레이어 패널로 예기치 않은 프로모션을 추적합니다.
사내에 Apple 기기가 없으면 클라우드 Mac mini 단기 임대가 조달 지연을 없앱니다. 실험 플래그 전에 스냅샷을 찍고, 잘못된 defaults write로 WebKit이 망가져도 되돌릴 수 있습니다. SSH/VNC는 OS와 무관합니다. 일 단위 짧은 사용은 $16.9/일 전후가 일반적이며, 스프린트 두 번을 위해 노트북을 보내는 것보다 저렴할 때가 많습니다.
하이브리드에서 동일 문서 vs 문서 간
정적 MPA에 작은 클라이언트 섬을 얹는 마케 팀은 document.startViewTransition이 인플레이스 업데이트용이고 문서 간 API가 전체 탐색용임을 정리해 두면 혼선이 줄어듭니다. PCI 때문에 정적 출처가 둘로 나뉜 결제 흐름에서는 경계를 넘지 못하므로, 모프 대신 로딩 스켈레톤을 설계합니다.
국제화는 RTL이 애니메이션 방향에 영향을 줍니다. 아랍어·히브리어 템플릿을 WebKit 안정판과 STP 모두에서 시험하고, 혼합 헤더를 움직이면 마이너 버전 사이에 backdrop-filter 2px급 차이가 날 수 있습니다.
캐시 전략도 중요합니다. opt-in CSS가 CDN에서 Cache-Control: immutable이면 모든 HTML이 같은 해시 자산을 가리키도록 배포를 동기화하지 않으면, 절반만 오래된 CSS라 「Safari 랜덤 버그」처럼 보입니다.
pageswap·pagereveal에서 「전환이 주관적으로 완료된」 시점을 계측하고 5% 샘플링이면 대개 24시간 안에 퇴보를 잡을 수 있습니다.
보안 리뷰에서는 스냅샷이 민감 정보를 담지 않는지 묻습니다. CSS로 숨기기 전에 잠깐 번쩍하는 PII 화면을 공유 전환 이름에 올리지 마세요. 서버 리다이렉트나 라우트 분리로 공개 크롬과 기밀 상태를 나눕니다.
인쇄 스타일에서는 전환 가치가 거의 없으므로 장식은 @media screen에 두고 PDF 용 레이아웃을 안정적으로 유지합니다.
자주 묻는 질문
뷰 전환이 SPA 라우터를 대체하나요?
아니요. 콘텐츠 중심 사이트의 클라이언트 라우터 의존은 줄이지만, 코드 스플릿을 깊게 쓴 데이터 대시보드는 React Router 등을 유지해도 됩니다. 제품별로 고릅니다.
서브도메인 사이는?
현재는 동일 출처가 전제입니다. 향후 사양에 기대지 말고 크로스 서브도메인은 「불가」로 설계하세요.
접근성에서 자주 나오는 실수는?
동작 감소 설정 무시, 포커스 가능 요소 애니메이션과 포커스 순서 불일치, 스크린 리더에 로딩 상태 미전달 등입니다. 포커스 링을 유지하고 필요 시 라이브 리전으로 주요 라우트 변경을 알립니다.
Apple Silicon Mac mini는 네이티브 색 관리와 조용한 동작으로 긴 Safari 검증에 적합합니다. MacHTML은 SSH/VNC 가능한 베어메탈 Mac mini를 제공해 정적 팀이 스프린트 단위로 View Transitions 증거를 모은 뒤 용량을 반납할 수 있게 합니다.
뷰 전환 WebKit QA를 클라우드에서
Apple Silicon Mac mini를 임대해 Safari 녹화, STP 실험, 위험 플래그 테스트 시 스냅샷 복구까지 한 번에 진행하세요.