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

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

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

  • 제품 세부정보 페이지에서 원본 크기 제품 이미지로 전환되는 제품 등록정보 페이지의 썸네일 이미지입니다.
  • 한 페이지에서 다른 페이지로 이동할 때 그대로 유지되는 고정된 탐색 메뉴입니다.
  • 필터링함에 따라 항목이 이동하는 그리드
<ph type="x-smartling-placeholder">
</ph>
View Transition API로 생성된 전환입니다. 데모 사이트 사용해 보기 Chrome 111 이상이 필요합니다.

뷰 전환 구현

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

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

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

두 유형의 한 가지 다른 점은 트리거하는 방법입니다.


동일 문서 뷰 전환

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

브라우저 지원

  • Chrome: 111 <ph type="x-smartling-placeholder">
  • Edge: 111. <ph type="x-smartling-placeholder">
  • Firefox: 지원되지 않음 <ph type="x-smartling-placeholder">
  • Safari: 18. <ph type="x-smartling-placeholder">

소스

트리거 방법

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입니다.

<ph type="x-smartling-placeholder">
</ph>
카드 데모 녹화 Chrome 111 이상이 필요합니다.

빌드 시작

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

동일 문서 뷰 전환 빌드


문서 간 뷰 전환

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

브라우저 지원

  • Chrome: 126 <ph type="x-smartling-placeholder">
  • Edge: 126. <ph type="x-smartling-placeholder">
  • Firefox: 지원되지 않음 <ph type="x-smartling-placeholder">
  • Safari: 지원되지 않음 <ph type="x-smartling-placeholder">

트리거 방법

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

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

@view-transition {
  navigation: auto;
}

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

<ph type="x-smartling-placeholder">
</ph>
Stack Navigator 데모 녹화 Chrome 126 이상이 필요합니다.

빌드 시작

문서 간 뷰 전환에 대해 알아야 할 모든 사항에 대해 알아보세요.

문서 간 뷰 전환 빌드