애니메이션 라이브러리를 버리세요: SPA를 Native App처럼 느끼게 하는 5줄

Source: Dev.to

작동 방식

브라우저는 내부에서 세 단계를 수행합니다:

1. 이전 상태의 스크린샷을 찍습니다.
2. 콜백을 실행해 DOM을 업데이트합니다.
3. 새로운 상태의 스크린샷을 찍고 차이를 애니메이션합니다.

모든 작업이 단일 프레임 안에서 이루어지므로 사용자는 부드러운 전환을 경험합니다. 기본 애니메이션은 크로스‑페이드이며, CSS를 사용해 슬라이드, 변형 등 원하는 효과를 만들 수 있습니다.

예시: 기존 뷰 전환 코드

// original SPA view switch
function showView(name) {
  document.querySelectorAll('.view').forEach(v => v.style.display = 'none');
  document.getElementById('view-' + name).style.display = 'block';
  updateActiveNav(name);
}

View‑Transition을 적용하기

function showView(name) {
  const doSwitch = () => {
    document.querySelectorAll('.view').forEach(v => v.style.display = 'none');
    document.getElementById('view-' + name).style.display = 'block';
    updateActiveNav(name);
  };

  if (document.startViewTransition) {
    document.startViewTransition(doSwitch);
  } else {
    // fallback: works normally without animation
    doSwitch();
  }
}

그게 전부입니다. 이제 개요 → 패밀리 → 노드 탭 전환이 부드러운 크로스‑페이드로 바뀝니다. 빌드 단계도, 새로운 의존성도, 번들 크기 증가도 없습니다.

CSS로 전환 커스터마이징

/* Slide left‑to‑right */
::view-transition-old(root) {
  animation: slide-out 0.25s ease-out;
}
::view-transition-new(root) {
  animation: slide-in 0.25s ease-out;
}

@keyframes slide-out {
  to { transform: translateX(-40px); opacity: 0; }
}
@keyframes slide-in {
  from { transform: translateX(40px); opacity: 0; }
}

view-transition-name 사용하기

두 상태에 걸쳐 같은 이름을 부여하면 브라우저가 자동으로 위치와 크기를 보간합니다.

/* Same name on thumbnail and fullscreen view */
.thumbnail   { view-transition-name: hero-image; }
.fullscreen  { view-transition-name: hero-image; }

이제 확대·축소 클릭이 네이티브처럼 느껴집니다—GSAP이나 Framer Motion을 끌어들이지 않아도 됩니다.

인기 애니메이션 라이브러리와 비교

MPAs(멀티‑페이지 앱)를 위한 View Transitions

전체 페이지 전환을 위해서는 CSS 두 줄만 필요합니다:

@view-transition {
  navigation: auto;
}

주요 참고 사항

1. 전환 중 요소는 이미지처럼 애니메이션되며, font-size 변경이나 clip-path는 애니메이션 단계에서 적용되지 않습니다.
2. view-transition-name은 페이지마다 고유해야 합니다. 예: view-transition-name: item-${id};.
3. Firefox의 MPA 지원은 아직 진행 중입니다. document.startViewTransition은 Firefox 133+에서 동작합니다. @view-transition { navigation: auto } 규칙은 2026년 중으로 도입될 예정이며, 현재는 @supports를 활용해 폴백을 구현하세요.

Graceful degradation – 지원되지 않는 브라우저에서는 단순히 DOM을 정상적으로 업데이트하므로 아무 문제도 발생하지 않습니다.

요약

새로운 애니메이션 라이브러리를 도입하기 전에, 브라우저가 이미 제공하는 기능을 먼저 확인해 보세요. View Transitions API는 의존성이 없고 가벼운 방법으로 SPA(또는 MPA)에 네이티브 앱 같은 느낌을 거의 코드 없이 제공해 줍니다.