View Transition API를 사용한 원활한 전환

Bramus

View Transition API를 사용하면 웹사이트의 다양한 뷰 간에 원활한 시각적 전환을 만들 수 있습니다. 이렇게 하면 다중 페이지 애플리케이션 (MPA)으로 빌드되었는지 단일 페이지 애플리케이션 (SPA)으로 빌드되었는지와 관계없이 사용자가 사이트를 탐색할 때 시각적으로 더 매력적인 사용자 환경이 만들어집니다.

뷰 전환을 사용하는 일반적인 상황은 다음과 같습니다.

  • 제품 등록정보 페이지의 썸네일 이미지가 제품 세부정보 페이지에서 전체 크기의 제품 이미지로 전환됩니다.
  • 한 페이지에서 다른 페이지로 이동할 때 제자리에 유지되는 고정 탐색 메뉴
  • 필터링할 때 항목이 위치를 이동하는 그리드
View Transition API로 생성된 전환입니다. 데모 사이트 사용해 보기 Chrome 111 이상이 필요합니다.

뷰 전환 구현

뷰 전환은 특정 애플리케이션 아키텍처나 프레임워크에 연결되지 않으며 단일 문서뿐만 아니라 두 개의 서로 다른 문서 간에도 트리거될 수 있습니다.

두 유형의 뷰 전환 모두 동일한 구성요소와 원칙을 사용합니다.

  1. 브라우저가 이전 상태와 새 상태의 스냅샷을 찍습니다.
  2. 렌더링이 억제되는 동안 DOM이 업데이트됩니다.
  3. 전환은 CSS 애니메이션으로 작동합니다.

두 유형의 유일한 차이점은 트리거하는 방법입니다.

동일 문서 보기 전환

단일 문서에서 뷰 전환이 실행되면 동일 문서 뷰 전환이라고 합니다. 일반적으로 단일 페이지 애플리케이션 (SPA)에서 이러한 경우가 많습니다. 동일한 문서 뷰 전환은 Chrome 111부터 Chrome에서 지원됩니다.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox Technology Preview: supported.
  • Safari: 18.

Source

트리거 방법

document.startViewTransition를 호출하여 동일 문서 뷰 전환을 트리거합니다.

function handleClick(e) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow();
    return;
  }

  // With a View Transition:
  document.startViewTransition(>() = updateTheDOMSomehow());
}

예

다음 카드 예시는 동일한 문서 보기 전환을 사용하여 새 카드가 추가되거나 삭제될 때 카드를 애니메이션으로 표시하는 SPA입니다.

카드 데모 녹화본 Chrome 111 이상이 필요합니다.

빌드 시작

동일한 문서 뷰 전환에 관한 모든 내용은 전용 문서 페이지를 참고하세요.

동일한 문서 뷰 전환 빌드

교차 문서 보기 전환

두 개의 서로 다른 문서 간에 뷰 전환이 발생하면 이를 교차 문서 뷰 전환이라고 합니다. 이는 MPA에서 일반적입니다. 교차 문서 뷰 전환은 Chrome 126 이상에서 지원됩니다.

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: not supported.
  • Safari: 18.2.

Source

트리거 방법

두 페이지 모두 선택한 경우 동일 출처 교차 문서 탐색으로 교차 문서 뷰 전환이 트리거됩니다. 즉, 문서 간 뷰 전환을 시작하기 위해 호출할 API가 없습니다. 사용자가 링크를 클릭하면 클릭으로 인해 뷰 전환이 트리거됩니다.

선택하려면 다음 CSS 스니펫을 사용하세요.

@view-transition {
  navigation: auto;
}

예

다음 스택 탐색기 예시는 두 개의 서로 다른 문서 간에 교차 문서 뷰 전환을 사용하는 MPA입니다. 탐색을 더 깊이 진행하는지 여부에 따라 페이지가 스택에 푸시되거나 스택에서 팝됩니다.

스택 탐색기 데모 녹화 영상 Chrome 126 이상이 필요합니다.

빌드 시작

교차 문서 보기 전환에 대해 자세히 알아보세요.

문서 간 뷰 전환 빌드