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

Bramus

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

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

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

뷰 전환 구현

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

두 가지 유형의 뷰 전환은 모두 매우 동일한 빌딩 블록과 원칙을 사용합니다.

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

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

동일한 문서 보기 전환

단일 문서에서 뷰 전환이 실행되면 이를 동일 문서 뷰 전환이라고 합니다. 이는 일반적으로 단일 페이지 애플리케이션(SPA)에서 발생합니다. 동일 문서 뷰 전환은 Chrome 111부터 Chrome에서 지원됩니다.

브라우저 지원

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 지원되지 않음
  • Safari: 18

소스

트리거 방법

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 이상에서 지원됩니다.

브라우저 지원

  • Chrome: 126
  • Edge: 126.
  • Firefox: 지원되지 않음
  • Safari Technology Preview: 지원됨

트리거 방법

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

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

@view-transition {
  navigation: auto;
}

예

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

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

빌드 시작

교차 문서 뷰 전환에 대해 알아보세요.

교차 문서 뷰 전환 빌드