뷰 전환의 새로운 기능 (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에 이러한 기능을 포함할 계획입니다. 이렇게 하면 이러한 기능이 새로 제공되는 Baseline이 됩니다.

이제 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에서 '실험적 웹 플랫폼 기능' 플래그를 사용 설정하여 테스트할 수 있습니다. 개발자 의견을 적극적으로 기다리고 있습니다.

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 버그를 신고하여 알려주세요.