이제 라이브러리 없이, 화면이 부드럽게 바뀝니다.

제가 일을 시작했을 무렵, “페이지가 스르륵 바뀌는” 효과 하나를 넣으려면 결심이 필요했습니다. 애니메이션 라이브러리를 추가하면 번들이 수십 KB 늘고, 버전 올릴 때마다 깨지지 않나 신경 써야 했으니까요. 효과 하나의 대가가 너무 컸죠. 그런데 지금은 그 효과가 브라우저에 표준으로 들어왔습니다. 라이브러리 없이, 코드 몇 줄로요.

그래서, 라이브러리 없이 뭐가 달라지나요?

핵심은 document.startViewTransition()입니다. 화면을 바꾸는 코드(목록을 갈아끼우거나 카드를 펼치거나)를 이 함수로 감싸면, 브라우저가 바뀌기 직전 화면을 ‘사진’으로 찍어두고 바뀐 뒤 화면과 부드럽게 크로스페이드해 줍니다. 우리가 프레임을 일일이 그리지 않아도 됩니다. 백 마디 설명보다 빠릅니다 — 아래 버튼을 눌러보세요.

방금 그 부드러운 변화, 우리가 만든 애니메이션이 아니라 브라우저가 만들어 준 겁니다. 코드로 보면 이렇게 간단합니다.

const btn = document.querySelector('.vt-btn');
btn.addEventListener('click', () => {
  // 1) 지원 안 하면 그냥 바로 바꾸고 끝(폴백)
  if (!document.startViewTransition) { swap(); return; }
  // 2) 지원하면 전환으로 감싸기
  document.startViewTransition(() => swap());
});

지원 안 하는 브라우저는 어떻게 하죠?

이게 가장 자주 듣는 걱정인데, 답은 “알아서 안전하다”입니다. document.startViewTransition이 없는 브라우저에서는 위 코드의 if에 걸려 swap()만 즉시 실행됩니다. 효과만 빠지고 기능은 그대로죠. 그래서 저는 전환을 ‘반드시 있어야 하는 것’이 아니라 점진적 향상(progressive enhancement)으로 다룹니다. 있으면 더 좋고, 없어도 멀쩡한.

2026년 기준으로 같은 문서 안에서의 전환은 Chrome 111+, Edge 111+, Safari 18+, 그리고 Firefox 144+(2025년 10월 안정화)에서 동작하며 이제 Baseline 단계입니다. 즉 대부분의 사용자는 효과를 보고, 나머지는 폴백으로 멀쩡히 씁니다. 어느 쪽도 손해 보지 않습니다.

그럼 멀미 나는 사람은요? (reduced-motion)

부드러운 전환이 누군가에게는 어지럼입니다. 전정기관이 예민한 사용자, 멀미가 잦은 사용자는 운영체제에 “동작 줄이기”를 켜둡니다. 그 신호가 바로 prefers-reduced-motion: reduce예요. 저는 이걸 무조건 존중합니다. CSS 한 블록이면 됩니다.

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

이렇게 두면 동작 줄이기를 켠 사용자는 전환 없이 즉시 화면이 바뀝니다. 기능은 똑같이 쓰되 어지럽지 않게요. 멋과 배려는 같이 가야 합니다 — 위 라이브 위젯도 이 규칙을 그대로 따릅니다.

한 페이지 안에서만? 페이지 이동도 됩니다

지금까지는 같은 문서 안에서 DOM을 바꾸는 전환(startViewTransition())이었습니다. 그런데 ‘목록 페이지 → 상세 페이지’처럼 다른 페이지로 넘어갈 때도 전환을 걸 수 있습니다. 이게 cross-document(MPA) 전환이고, 놀랍게도 자바스크립트가 한 줄도 필요 없습니다.

/* 두 페이지의 CSS에 똑같이 넣어두면 끝 */
@view-transition { navigation: auto; }

2026년 기준 cross-document 전환은 Chrome 126+와 Safari 18.2+에서 동작하고, Firefox는 아직 정식 지원 전이라 여기서도 점진적 향상으로 다룹니다. 지원 안 되면? 그냥 평범한 페이지 이동이 됩니다. 역시 깨지지 않죠.

그래서 실무에서 어디에 쓰나요?

저는 ‘맥락이 이어지는 변화’에 씁니다. 목록의 썸네일을 누르면 그 이미지가 그대로 상세 페이지의 큰 이미지로 자라나는 연출(view-transition-name으로 두 요소를 이어줍니다), 탭을 바꿀 때 콘텐츠가 슬쩍 교차되는 전환, 다크/라이트 모드를 토글할 때 부드럽게 번지는 전환. 공통점은 ‘사용자의 시선이 끊기지 않게’입니다. 화려함이 목적이 아니라, 지금 일어난 변화를 사용자가 따라오게 만드는 게 목적이에요. 그 ‘썸네일이 상세 이미지로 자라는’ 연출이 실은 CSS 한 줄 + JS 한 덩어리입니다.

/* 목록과 상세, 양쪽의 같은 이미지에 동일한 이름을 붙인다 */
.card-thumb   { view-transition-name: hero-photo; }
.detail-photo { view-transition-name: hero-photo; }
/* 이름이 같으면 브라우저가 두 요소를 '같은 것'으로 보고 이어 움직인다 */

// 상세로 넘어가기 직전, DOM 교체를 전환으로 감싼다
function openDetail(id) {
  if (!document.startViewTransition) { render(id); return; } // 폴백
  document.startViewTransition(() => render(id));
}

그리고 배포 전에는 지원 브라우저와 미지원 폴백이 둘 다 멀쩡한지 한 번씩 직접 확인합니다.

$ 지원 점검: 'startViewTransition' in document
$ ✓ Chrome 111+/Safari 18+/Firefox 144+ → 크로스페이드 전환 동작
$ ✓ 미지원 브라우저 → swap()만 즉시 실행(기능 그대로, 효과만 생략)
$ ✓ prefers-reduced-motion: reduce → animation:none 적용 확인

전환 하나를 이렇게 보는 사람이, 사이트 전체를 만듭니다

화면 전환은 사용자가 ‘방금 무슨 일이 일어났는지’를 이해하는 결정적인 0.3초입니다. 그 0.3초를 라이브러리에 떠넘기지 않고 표준으로, 가볍게, 누구도 어지럽지 않게 만드는 태도 — Findable에서는 이게 기본값입니다. 당신의 사이트, 어떤 전환을 만들어 드릴까요?