뷰 전환의 새로운 기능 (2025년 업데이트)

Bramus

게시일: 2025년 10월 8일

2023년에 동일 문서 뷰 전환을 출시한 이후로 많은 변화가 있었습니다.

2024년에는 교차 문서 뷰 전환을 출시하고, view-transition-class 및 뷰 전환 유형과 같은 개선사항을 추가했으며, Safari에서도 뷰 전환 지원을 추가했습니다.

이 게시물에서는 2025년에 뷰 전환이 어떻게 변경되는지 간략하게 설명합니다.

브라우저 및 프레임워크 지원 개선

동일 문서 보기 전환이 기준 새로 사용 가능으로 전환될 예정입니다.

Interop 2025의 중점 분야는 뷰 전환 API이며, 특히 document.startViewTransition(updateCallback), view-transition-class, view-transition-name: match-element을 사용한 자동 이름 지정, :active-view-transition CSS 선택자를 사용한 동일 문서 뷰 전환입니다.

Firefox는 2025년 10월 14일에 안정화되는 예정인 Firefox 144 출시 버전에 이러한 기능을 포함할 계획입니다. 이렇게 하면 이러한 기능을 새로 제공되는 기본 기능으로 만들 수 있습니다.

이제 React 핵심에서 View Transition API를 지원합니다.

올 한 해 동안 React팀은 React의 핵심에 뷰 전환을 추가하기 위해 노력해 왔습니다. 4월에 react@experimental 지원을 발표했으며 이번 주 React Conf에서 지원을 react@canary으로 이동하여 디자인이 거의 최종 단계에 도달했습니다.

function Child() {
  return (
    <ViewTransition>
      <div>Hi</div>
    </ViewTransition>
  );
}

function Parent() {
  const [show, setShow] = useState();
  if (show) {
    return <Child />;
  }
  return null;
}

자세한 내용은 React의 <ViewTransition> 문서를 확인하거나 Aurora Scharff의 이 강연을 시청하여 주제에 대한 좋은 소개를 확인하세요.

최근에 출시된 기능

view-transition-name: match-element로 요소 자동 이름 지정

뷰 전환의 일부로 스냅샷을 찍을 요소를 표시하려면 view-transition-name를 지정합니다. 이는 두 가지 다른 요소 간 전환과 같은 기능을 지원하므로 뷰 전환에 중요합니다. 각 요소는 전환의 각 측면에 동일한 view-transition-name 값을 가지며 뷰 전환이 알아서 처리합니다.

하지만 실제로 변경되지 않는 요소를 많이 전환할 때는 요소의 이름을 고유하게 지정하는 것이 번거로워질 수 있습니다. 목록에서 이동하는 요소가 100개인 경우 고유한 이름 100개를 만들어야 합니다.

match-element 덕분에 이 모든 작업을 할 필요가 없습니다. 이를 view-transition-name의 값으로 사용하면 브라우저가 요소의 ID를 기반으로 일치하는 모든 요소에 대해 내부 view-transition-name를 생성합니다.

다음 데모에서는 이 접근 방식을 사용합니다. 행의 각 카드에는 자동으로 생성된 view-transition-name가 표시됩니다.

.card {
  view-transition-name: match-element;
  view-transition-class: card;
}

#targeted-card {
  view-transition-name: targeted-card;
  view-transition-class: none;
}

입장 또는 퇴장하는 카드에는 명시적인 이름이 지정됩니다. 이 이름은 CSS에서 해당 스냅샷에 특정 애니메이션을 연결하는 데 사용됩니다. 다른 모든 카드의 스냅샷은 연결된 view-transition-class를 사용하여 스타일이 지정됩니다.

/* Style all pseudos with the class .card */
::view-transition-group(*.card) {
  animation-timing-function: var(--bounce-easing);
  animation-duration: 0.5s;
}

/* Style only the targeted-card's pseudos */
::view-transition-old(targeted-card):only-child {
  animation: animate-out ease-out 0.5s forwards;
}
::view-transition-new(targeted-card):only-child {
  animation: animate-in ease-in 0.25s forwards;
}

이제 DevTools에 view-transition-class를 사용하는 의사 요소를 타겟팅하는 규칙이 표시됩니다.

뷰 전환을 디버그하려면 DevTools의 애니메이션 패널을 사용하여 모든 애니메이션을 일시중지하면 됩니다. 이렇게 하면 뷰 전환이 완료 상태에 도달할까 걱정하지 않고도 의사 요소를 검사할 수 있습니다. 애니메이션 타임라인을 수동으로 스크러빙하여 전환이 어떻게 재생되는지 확인할 수도 있습니다.

이전에는 ::view-transition-* 의사 요소 중 하나를 검사할 때 Chrome DevTools가 설정된 view-transition-class를 사용하여 의사 요소를 타겟팅하는 규칙을 노출하지 않았습니다. 이 기능이 추가된 Chrome 139에서 변경되었습니다.

중첩된 뷰 전환 그룹은 Chrome 140부터 사용할 수 있습니다.

뷰 전환이 실행되면 스냅샷 요소가 의사 요소 트리로 렌더링됩니다. 기본적으로 생성된 트리는 '플랫'입니다. 즉, DOM의 원래 계층 구조가 손실되고 캡처된 모든 뷰 전환 그룹이 단일 ::view-transition 의사 요소 아래에 있는 형제가 됩니다.

이 플랫 트리 접근 방식은 많은 사용 사례에 충분하지만 클리핑이나 3D 변환과 같은 시각적 효과를 사용하는 경우에는 문제가 됩니다. 이를 위해서는 트리에서 계층 구조가 필요합니다.

이제 '중첩된 뷰 전환 그룹'을 사용하여 ::view-transition-group 가상 요소를 서로 중첩할 수 있습니다. 뷰 전환 그룹이 중첩되면 전환 중에 클리핑과 같은 효과를 복원할 수 있습니다.

뷰 전환 그룹 사용 방법 알아보기

이제 의사 요소가 더 많은 애니메이션 속성을 상속함

::view-transition-group(…) 의사 요소에 animation-* 약식 속성 중 하나를 설정하면 포함된 ::view-transition-image-pair(…), ::view-transition-old(…), ::view-transition-new(…)도 해당 속성을 상속합니다. ::view-transition-new(…)와 ::view-transition-old(…) 간의 크로스페이드가 ::view-transition-group(…)와 자동으로 동기화되므로 편리합니다.

::view-transition-group(.card) {
  animation-duration: 0.5s;
}

처음에는 이 상속이 animation-duration 및 animation-fill-mode (나중에는 animation-delay도 포함)로 제한되었지만 이제 더 많은 애니메이션 속성을 상속하도록 확장되었습니다.

뷰 전환을 지원하는 브라우저에는 이제 사용자 에이전트 스타일시트에 다음이 포함되어야 합니다.

:root::view-transition-image-pair(*),
:root::view-transition-old(*),
:root::view-transition-new(*) {
  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
  animation-timing-function: inherit;
  animation-iteration-count: inherit;
  animation-direction: inherit;
  animation-play-state: inherit;
}

더 많은 속성을 상속하는 의사 요소는 Chrome 140에서 출시되었습니다.

finished 프로미스 콜백 실행이 더 이상 프레임을 기다리지 않음

finished 약속을 사용하여 콜백을 실행할 때 Chrome은 해당 로직을 실행하기 전에 프레임이 생성될 때까지 기다렸습니다. 스크립트가 시각적으로 유사한 상태를 유지하려고 일부 스타일을 이동하면 애니메이션이 끝날 때 깜박임이 발생할 수 있습니다.

 document.startViewTransition(() => {
  if (from) {
    dfrom.classList.remove("shadow");
    dto.appendChild(target);
  } else {
    dto.classList.remove("shadow");
    dfrom.appendChild(target);
  }
}).finished.then(() => {
  if (from) {
    dto.classList.add("shadow");
  } else {
    dfrom.classList.add("shadow");
  }
  from = 1 - from;
});

이 타이밍 변경은 수명 주기가 완료된 후 비동기적으로 실행되도록 뷰 전환 정리 단계를 이동하여 상황을 해결합니다. 이렇게 하면 finished 프로미스 해결 시 생성된 시각적 프레임이 뷰 전환 구조를 유지하므로 깜박임이 방지됩니다.

이 타이밍 변경사항은 Chrome 140에서 제공됩니다.

출시 예정 기능

아직 한 해가 끝나지 않았으므로 더 많은 기능을 출시할 시간이 있습니다.

범위가 지정된 뷰 전환을 Chrome 140에서 테스트할 수 있음

범위가 지정된 뷰 전환은 HTMLElement에서 document.startViewTransition() 대신 element.startViewTransition()를 호출하여 DOM의 하위 트리에서 뷰 전환을 시작할 수 있는 뷰 전환 API의 제안된 확장 프로그램입니다.

범위가 지정된 전환을 사용하면 여러 뷰 전환이 동시에 실행될 수 있습니다 (전환 루트가 다른 경우). 포인터 이벤트는 전체 문서가 아닌 해당 하위 트리에서만 방지됩니다 (다시 사용 설정할 수 있음). 또한 전환 루트 외부의 요소가 범위가 지정된 뷰 전환 위에 그려지도록 합니다.

다음 데모에서는 버튼 중 하나를 클릭하여 컨테이너 내에서 점을 이동할 수 있습니다. 문서 범위 뷰 전환 또는 요소 범위 뷰 전환을 사용하여 서로 다르게 작동하는 방식을 확인할 수 있습니다.

이 기능은 Chrome 140부터 테스트할 수 있으며, chrome://flags에서 '실험용 웹 플랫폼 기능' 플래그가 사용 설정되어 있습니다. Google은 개발자의 의견을 적극적으로 수렴하고 있습니다.

Chrome 142에서 ::view-transition의 위치가 fixed에서 absolute로 변경됩니다.

::view-transition 의사 요소는 현재 position: fixed을 사용하여 배치됩니다. CSS 작업 그룹의 결정에 따라 position: absolute로 변경됩니다.

Chrome 142에 도입되는 fixed에서 absolute로의 position 값 변경은 ::view-transition 의 포함 블록이 스냅샷 포함 블록이므로 시각적으로 관찰할 수 없습니다. 관찰할 수 있는 유일한 효과는 getComputedStyle을 실행할 때 position 값이 달라진다는 것입니다.

document.activeViewTransition이 Chrome 142에 제공됩니다.

뷰 전환이 시작되면 ViewTransition 인스턴스가 생성됩니다. 이 객체에는 전환 진행 상황을 추적하고 전환을 건너뛰거나 유형을 수정하는 등의 조작을 허용하는 여러 프로미스와 기능이 포함되어 있습니다.

이제 Chrome에서는 이 인스턴스를 수동으로 추적할 필요 없이 이 객체를 나타내는 document.activeViewTransition 속성을 제공합니다. 진행 중인 전환이 없으면 값은 null입니다.

동일한 문서 뷰 전환의 경우 document.startViewTransition를 호출할 때 값이 설정됩니다. 교차 문서 뷰 전환의 경우 pageswap 및 pagereveal 이벤트에서 해당 ViewTransition 인스턴스에 액세스할 수 있습니다.

document.activeViewTransition 지원이 Chrome 142에 곧 출시됩니다.

ViewTransition.waitUntil로 뷰 전환이 자동으로 완료되지 않도록 방지

모든 애니메이션이 완료되면 뷰 전환이 자동으로 finished 상태에 도달합니다. 이러한 자동 종료를 방지하려면 곧 ViewTranistion.waitUntil를 사용하면 됩니다. 프로미스를 전달할 때 전달된 프로미스도 확인된 경우에만 ViewTransition가 finished 상태에 도달합니다.

const t = document.startViewTransition(…);
t.waitUntil(async () => {
  await fetch(…);
});

이 변경사항은 올해 말에 적용되며, 예를 들어 fetch를 기다리거나 스크롤 기반 뷰 전환을 더 쉽게 구현할 수 있습니다.

다음 단계

2023년에 뷰 전환을 처음 출시한 이후로 가만히 있지 않았습니다. 향후 범위가 지정된 뷰 전환을 제공할 예정이며, 언제나 의견을 기다리고 있습니다.

뷰 전환에 관해 궁금한 점이 있으면 소셜 미디어로 문의하세요. 뷰 전환 기능 요청은 CSS WG에 제출할 수 있습니다. 버그가 발생하면 Chromium 버그를 신고하여 알려주세요.