뷰 트랜지션(View Transition)

뷰 트랜지션(View Transition)은 페이지 전환 시 애니메이션 효과를 부여하여 더 부드럽고 직관적인 사용자 경험을 제공하는 기술입니다. 브라우저에서 기본적으로 지원하는 View Transition API를 활용하여 페이지 전환 시 상태를 애니메이션으로 연결할 수 있습니다. 이번 설명에서는 코드를 기반으로 뷰 트랜지션의 원리와 사용 방법을 단계적으로 다루겠습니다.

뷰 트랜지션의 동작 원리

View Transition API

document.startViewTransition()을 호출하면, 현재 페이지에서 다음 페이지로 전환하는 동안의 상태를 애니메이션으로 보여줍니다.
이 과정에서 ::view-transition-old와 ::view-transition-new Pseudo-element를 사용해 이전 상태와 새로운 상태를 각각 스타일링할 수 있습니다.

CSS 애니메이션

페이지 이동 효과는 @keyframes와 Pseudo-element를 활용해 구현합니다.
예제에서는 두 가지 애니메이션이 있습니다:
- 이동하기(다음 페이지로 이동): transform으로 페이지가 왼쪽으로 이동.
- 뒤로가기(이전 페이지로 돌아가기): opacity와 transform을 조합하여 부드럽게 페이드인.

실습

CSS에서 Pseudo-element 활용

/* Section10/10-01-view-transition: 페이지이동 애니메이션 */
@keyframes 이동하기_이전페이지애니메이션 {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes 이동하기_다음페이지애니메이션 {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}

html::view-transition-old(root) {
  animation-name: 이동하기_이전페이지애니메이션;
  animation-duration: 1s;
}

html::view-transition-new(root) {
  animation-name: 이동하기_다음페이지애니메이션;
  animation-duration: 0.5s;
}

/* Section10/10-01-view-transition: 페이지이동(뒤로가기) 애니메이션 */
@keyframes 뒤로가기_이전페이지애니메이션 {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes 뒤로가기_다음페이지애니메이션 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

html.뒤로가기::view-transition-old(root) {
  animation-name: 뒤로가기_이전페이지애니메이션;
  animation-duration: 0.5s;
}

html.뒤로가기::view-transition-new(root) {
  animation-name: 뒤로가기_다음페이지애니메이션;
  animation-duration: 1s;
}

html::view-transition-old와 html::view-transition-new는 이전 상태와 새로운 상태를 각각 애니메이션으로 처리합니다.
뒤로가기 클래스가 추가된 경우 별도의 애니메이션(뒤로가기_이전페이지애니메이션)이 실행됩니다.

JS에서 라우팅에 트랜지션 연결

뒤로가기 이벤트 처리

useRoutingSettingBackExitViewTransition 훅을 통해 뒤로가기 이벤트를 처리합니다.

const onRoutingBack = () => {
  // 1. 종료되어야하는 페이지라면? => 종료요청
  const isExitPage = 종료되어야하는페이지들.includes(pathname);
  if (isExitPage) return fetchApp({ query: "exitDeviceRoutingForBackSet" });

  // 2. 뒤로가야하는 페이지라면? => 뒤로가기
  // return router.back();

  // 3. 뒤로가는 애니메이션 추가
  document.documentElement.classList.add("뒤로가기");
  return document
    .startViewTransition(() => {
      router.back();
    })
    .finished.finally(() => {
      document.documentElement.classList.remove("뒤로가기");
    });
};

뒤로가기 시, 뒤로가기 클래스를 추가하여 Pseudo-element를 활성화하고 애니메이션이 실행되도록 설정합니다.
startViewTransition 내부에서 router.back()을 호출하여 실제로 이전 페이지로 이동합니다.

일반 링크 클릭 이벤트 처리

RoutingSettingBackExitViewTransition 컴포넌트에서는 클릭 이벤트를 감지하여 페이지 이동 시 애니메이션을 적용합니다.
```
window.addEventListener("click", (event) => {
  const isAnchor = event.target.closest("a");
  if (isAnchor) document.startViewTransition();
});
```
- <a> 태그 클릭 시 document.startViewTransition()을 호출하여 뷰 트랜지션 애니메이션을 트리거합니다.