CSS 뷰 트랜지션 마스터하기: 의사 요소 스타일링 심층 분석

끊임없이 진화하는 웹 개발 환경에서 매끄럽고 유동적이며 매력적인 사용자 경험을 추구하는 것은 변치 않는 과제입니다. 수년간 개발자들은 웹과 네이티브 애플리케이션 간의 격차를 줄이기 위해 노력해왔으며, 특히 페이지 전환의 부드러움에 중점을 두었습니다. 전통적인 웹 탐색은 종종 사용자의 몰입을 순간적으로 깨뜨리는 거친 전체 페이지 새로고침—즉, 텅 빈 흰 화면—을 유발합니다. 싱글 페이지 애플리케이션(SPA)이 이를 완화했지만, 의미 있는 맞춤형 전환을 만드는 것은 여전히 복잡하고 종종 불안정한 작업이었으며, 자바스크립트 라이브러리와 복잡한 상태 관리에 크게 의존했습니다.

웹에서 UI 변경을 처리하는 방식을 혁신할 준비가 된 획기적인 기술인 CSS 뷰 트랜지션 API가 등장했습니다. 이 강력한 API는 서로 다른 DOM 상태 간의 애니메이션을 위한 간단하면서도 매우 유연한 메커니즘을 제공하여, 사용자들이 기대하게 된 세련되고 앱과 같은 경험을 그 어느 때보다 쉽게 만들 수 있도록 합니다. 이 API의 핵심적인 힘은 새로운 CSS 의사 요소 세트에 있습니다. 이것들은 일반적인 선택자가 아닙니다. 브라우저가 전환의 모든 단계를 세밀하게 제어할 수 있도록 동적으로 생성하는 임시 요소입니다. 이 가이드는 이 의사 요소 트리를 심층적으로 탐구하며, 각 구성 요소를 스타일링하여 전 세계 사용자를 위한 멋지고 성능이 뛰어나며 접근성 높은 애니메이션을 만드는 방법을 살펴봅니다.

뷰 트랜지션의 구조

전환을 스타일링하기 전에, 전환이 트리거될 때 내부적으로 어떤 일이 일어나는지 이해해야 합니다. 뷰 트랜지션을 시작하면(예: document.startViewTransition() 호출), 브라우저는 일련의 단계를 수행합니다:

• 이전 상태 캡처: 브라우저는 현재 페이지 상태의 "스냅샷"을 찍습니다.
• DOM 업데이트: 코드가 DOM을 변경합니다(예: 새로운 뷰로 이동, 요소 추가 또는 제거).
• 새로운 상태 캡처: DOM 업데이트가 완료되면 브라우저는 새로운 상태의 스냅샷을 찍습니다.
• 의사 요소 트리 구축: 브라우저는 페이지의 오버레이에 임시 의사 요소 트리를 구성합니다. 이 트리에는 캡처된 이전 상태와 새로운 상태의 이미지가 포함됩니다.
• 애니메이션: 이 의사 요소에 CSS 애니메이션이 적용되어 이전 상태에서 새로운 상태로 부드러운 전환을 만듭니다. 기본값은 간단한 교차 페이드입니다.
• 정리: 애니메이션이 완료되면 의사 요소 트리가 제거되고 사용자는 새로운 라이브 DOM과 상호 작용할 수 있습니다.

커스터마이징의 핵심은 이 임시 의사 요소 트리입니다. 디자인 도구의 레이어 세트처럼 페이지 위에 일시적으로 배치된다고 생각하면 됩니다. 이 레이어들을 CSS로 완벽하게 제어할 수 있습니다. 여러분이 다루게 될 구조는 다음과 같습니다:

• ::view-transition
  • ::view-transition-group(*)
    • ::view-transition-image-pair(*)
      • ::view-transition-old(*)
      • ::view-transition-new(*)

각 의사 요소가 무엇을 나타내는지 자세히 살펴보겠습니다.

의사 요소의 역할

::view-transition: 전체 구조의 루트입니다. 뷰포트를 채우고 다른 모든 페이지 콘텐츠 위에 위치하는 단일 요소입니다. 모든 전환 그룹의 컨테이너 역할을 하며, 지속 시간이나 타이밍 함수와 같은 전반적인 전환 속성을 설정하기에 좋은 위치입니다.

::view-transition-group(*): 각 고유한 전환 요소(view-transition-name CSS 속성으로 식별)에 대해 그룹이 생성됩니다. 이 의사 요소는 콘텐츠의 위치와 크기를 애니메이션하는 역할을 합니다. 만약 카드가 화면의 한쪽에서 다른 쪽으로 이동한다면, 실제로 움직이는 것은 ::view-transition-group입니다.

::view-transition-image-pair(*): 그룹 내부에 중첩된 이 요소는 이전 뷰와 새로운 뷰의 컨테이너 및 클리핑 마스크 역할을 합니다. 주요 역할은 애니메이션 동안 border-radius나 transform과 같은 효과를 유지하고 기본 교차 페이드 애니메이션을 처리하는 것입니다.

::view-transition-old(*): 이것은 이전 상태(DOM 변경 전)에 있는 요소의 "스냅샷" 또는 렌더링된 뷰를 나타냅니다. 기본적으로 opacity: 1에서 opacity: 0으로 애니메이션됩니다.

::view-transition-new(*): 이것은 새로운 상태(DOM 변경 후)에 있는 요소의 "스냅샷" 또는 렌더링된 뷰를 나타냅니다. 기본적으로 opacity: 0에서 opacity: 1로 애니메이션됩니다.

루트: ::view-transition 의사 요소 스타일링

::view-transition 의사 요소는 전체 애니메이션이 그려지는 캔버스입니다. 최상위 컨테이너로서 전환에 전역적으로 적용되어야 할 속성을 정의하기에 이상적인 장소입니다. 기본적으로 브라우저는 애니메이션 세트를 제공하지만, 이를 쉽게 재정의할 수 있습니다.

예를 들어, 기본 전환은 250밀리초 동안 지속되는 교차 페이드입니다. 사이트의 모든 전환에 대해 이를 변경하고 싶다면 루트 의사 요소를 타겟팅할 수 있습니다:

::view-transition {

  animation-duration: 500ms;

  animation-timing-function: ease-in-out;

}

이 간단한 규칙으로 이제 모든 기본 페이지 페이드가 두 배 더 오래 걸리고 'ease-in-out' 곡선을 사용하여 약간 다른 느낌을 줍니다. 여기에 복잡한 애니메이션을 적용할 수도 있지만, 일반적으로는 보편적인 타이밍과 이징을 정의하는 데 사용하는 것이 가장 좋으며, 세부적인 연출은 더 구체적인 의사 요소가 처리하도록 합니다.

그룹화 및 이름 지정: `view-transition-name`의 힘

추가 작업 없이도 뷰 트랜지션 API는 기본적으로 전체 페이지에 대한 교차 페이드를 제공합니다. 이는 루트에 대한 단일 의사 요소 그룹에 의해 처리됩니다. 이 API의 진정한 힘은 특정 개별 요소를 상태 간에 전환하고 싶을 때 발휘됩니다. 예를 들어, 목록 페이지의 제품 썸네일이 상세 페이지의 기본 제품 이미지 위치로 매끄럽게 커지면서 이동하게 만드는 것입니다.

서로 다른 DOM 상태에 있는 두 요소가 개념적으로 동일하다는 것을 브라우저에 알리려면 view-transition-name CSS 속성을 사용합니다. 이 속성은 시작 요소와 끝 요소 모두에 적용되어야 합니다.

/* 목록 페이지 CSS에서 */

.product-thumbnail {

  view-transition-name: product-image;

}

/* 상세 페이지 CSS에서 */

.main-product-image {

  view-transition-name: product-image;

}

두 요소에 동일한 고유 이름('product-image'의 경우)을 부여함으로써, 브라우저에 "이전 페이지를 페이드 아웃하고 새 페이지를 페이드 인하는 대신, 이 특정 요소에 대한 특별한 전환을 만들어라"고 지시합니다. 브라우저는 이제 루트 페이드와는 별도로 애니메이션을 처리하기 위해 전용 ::view-transition-group(product-image)을 생성합니다. 이것이 바로 인기 있는 "모핑" 또는 "공유 요소" 전환 효과를 가능하게 하는 기본 개념입니다.

중요 참고: 전환 중 특정 순간에 view-transition-name은 고유해야 합니다. 동시에 동일한 이름을 가진 두 개의 보이는 요소가 있을 수 없습니다.

심층 스타일링: 핵심 의사 요소

요소에 이름을 지정했으므로, 이제 브라우저가 생성하는 특정 의사 요소를 스타일링하는 단계로 넘어갈 수 있습니다. 여기서 진정으로 독창적이고 표현력 있는 애니메이션을 만들 수 있습니다.

`::view-transition-group(name)`: 이동 담당

그룹의 유일한 책임은 이전 요소의 크기와 위치에서 새 요소의 크기와 위치로 전환하는 것입니다. 실제 콘텐츠의 모양은 포함하지 않으며, 오직 그 경계 상자(bounding box)만 다룹니다. 움직이는 프레임이라고 생각하면 됩니다.

기본적으로 브라우저는 transform과 width/height 속성을 애니메이션합니다. 이를 재정의하여 다른 효과를 만들 수 있습니다. 예를 들어, 곡선 경로를 따라 애니메이션하여 움직임에 호를 추가하거나, 이동 중에 크기를 키웠다 줄였다 할 수 있습니다.

::view-transition-group(product-image) {

  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

}

이 예에서는 제품 이미지의 움직임에만 특정 이징 함수를 적용하여, 나머지 페이지의 기본 페이드에 영향을 주지 않으면서 더 역동적이고 물리적인 느낌을 줍니다.

`::view-transition-image-pair(name)`: 클리핑 및 페이드 담당

움직이는 그룹 내에 중첩된 image-pair는 이전 뷰와 새로운 뷰를 담고 있습니다. 클리핑 마스크 역할을 하므로 요소에 border-radius가 있는 경우, image-pair는 크기와 위치 애니메이션 전체에 걸쳐 콘텐츠가 해당 반경으로 클리핑되도록 보장합니다. 다른 주요 역할은 이전 콘텐츠와 새 콘텐츠 간의 기본 교차 페이드를 조율하는 것입니다.

시각적 일관성을 보장하거나 더 고급 효과를 만들기 위해 이 요소를 스타일링할 수 있습니다. 고려해야 할 핵심 속성은 isolation: isolate입니다. 자식 요소(이전 및 새로운 뷰)에 고급 mix-blend-mode 효과를 사용할 계획이라면 이는 매우 중요합니다. 새로운 쌓임 맥락(stacking context)을 생성하여 블렌딩이 전환 그룹 외부의 요소에 영향을 미치는 것을 방지하기 때문입니다.

::view-transition-image-pair(product-image) {

  isolation: isolate;

}

`::view-transition-old(name)` 및 `::view-transition-new(name)`: 쇼의 주인공

이들은 DOM 변경 전후의 요소의 시각적 모양을 나타내는 의사 요소입니다. 대부분의 맞춤 애니메이션 작업이 여기서 이루어집니다. 기본적으로 브라우저는 opacity와 mix-blend-mode를 사용하여 간단한 교차 페이드 애니메이션을 실행합니다. 맞춤 애니메이션을 만들려면 먼저 기본 애니메이션을 꺼야 합니다.

::view-transition-old(name),

::view-transition-new(name) {

  animation: none;

}

기본 애니메이션이 비활성화되면 자유롭게 자신만의 애니메이션을 적용할 수 있습니다. 몇 가지 일반적인 패턴을 살펴보겠습니다.

맞춤 애니메이션: 슬라이드

교차 페이드 대신 컨테이너의 콘텐츠가 슬라이드 인하도록 만들어 봅시다. 예를 들어, 기사 간을 이동할 때 새 기사의 텍스트는 오른쪽에서 슬라이드 인하고 이전 텍스트는 왼쪽으로 슬라이드 아웃되도록 하고 싶습니다.

먼저, 키프레임을 정의합니다:

@keyframes slide-from-right {

  from { transform: translateX(100%); }

  to { transform: translateX(0); }

}

@keyframes slide-to-left {

  from { transform: translateX(0); }

  to { transform: translateX(-100%); }

}

이제 이 애니메이션들을 'article-content'라는 이름의 요소에 대한 이전 및 새로운 의사 요소에 적용합니다.

::view-transition-old(article-content) {

  animation: 300ms ease-out forwards slide-to-left;

}

::view-transition-new(article-content) {

  animation: 300ms ease-out forwards slide-from-right;

}

맞춤 애니메이션: 3D 플립

더 극적인 효과를 위해 3D 카드 플립을 만들 수 있습니다. 이를 위해서는 transform 속성을 rotateY로 애니메이션하고 backface-visibility도 관리해야 합니다.

/* 그룹에는 3D 컨텍스트가 필요합니다 */

::view-transition-group(card-flipper) {

  transform-style: preserve-3d;

}

/* image-pair도 3D 컨텍스트를 유지해야 합니다 */

::view-transition-image-pair(card-flipper) {

  transform-style: preserve-3d;

}

/* 이전 뷰는 0도에서 -180도로 뒤집힙니다 */

::view-transition-old(card-flipper) {

  animation: 600ms ease-in forwards flip-out;

  backface-visibility: hidden;

}

/* 새로운 뷰는 180도에서 0도로 뒤집힙니다 */

::view-transition-new(card-flipper) {

  animation: 600ms ease-out forwards flip-in;

  backface-visibility: hidden;

}

@keyframes flip-out {

  from { transform: rotateY(0deg); }

  to { transform: rotateY(-180deg); }

}

@keyframes flip-in {

  from { transform: rotateY(180deg); }

  to { transform: rotateY(0deg); }

}

실용 예제 및 고급 기술

이론은 유용하지만, 실제 적용을 통해 진정으로 배울 수 있습니다. 몇 가지 일반적인 시나리오와 이를 뷰 트랜지션 의사 요소로 해결하는 방법을 살펴보겠습니다.

예제: "모핑" 카드 썸네일

이것은 전형적인 공유 요소 전환입니다. 사용자 프로필 갤러리를 상상해 보세요. 각 프로필은 아바타가 있는 카드입니다. 카드를 클릭하면 해당 아바타가 상단에 눈에 띄게 표시되는 상세 페이지로 이동합니다.

1단계: 이름 할당

갤러리 페이지에서 아바타 이미지에 이름을 지정합니다. 이름은 각 카드마다 고유해야 하며, 예를 들어 사용자 ID를 기반으로 할 수 있습니다.

/* gallery-item.css에서 */

.card-avatar { view-transition-name: avatar-user-123; }

프로필 상세 페이지에서 큰 헤더 아바타는 정확히 동일한 이름을 갖습니다.

/* profile-page.css에서 */

.profile-header-avatar { view-transition-name: avatar-user-123; }

2단계: 애니메이션 맞춤 설정

기본적으로 브라우저는 아바타를 이동하고 크기를 조정하지만 콘텐츠도 교차 페이드합니다. 이미지가 동일하다면 이 페이드는 불필요하며 약간의 깜박임을 유발할 수 있습니다. 이를 비활성화할 수 있습니다.

/* 여기서 별표(*)는 이름이 지정된 모든 그룹에 대한 와일드카드입니다 */

::view-transition-image-pair(*) {

  /* 기본 페이드 비활성화 */

  animation-duration: 0s;

}

잠깐, 페이드를 비활성화하면 콘텐츠는 어떻게 전환될까요? 이전 뷰와 새로운 뷰가 동일한 공유 요소의 경우, 브라우저는 전체 전환에 하나의 뷰만 사용할 만큼 똑똑합니다. `image-pair`는 본질적으로 하나의 이미지만 담고 있으므로 페이드를 비활성화하면 이 최적화가 드러납니다. 콘텐츠가 실제로 변경되는 요소의 경우, 기본 페이드 대신 맞춤 애니메이션이 필요합니다.

가로세로 비율 변경 처리

전환하는 요소의 가로세로 비율이 변경될 때 흔히 발생하는 문제가 있습니다. 예를 들어, 목록 페이지의 16:9 가로 썸네일이 상세 페이지의 1:1 정사각형 아바타로 전환될 수 있습니다. 브라우저의 기본 동작은 너비와 높이를 독립적으로 애니메이션하므로 전환 중에 이미지가 찌그러지거나 늘어나 보입니다.

해결책은 우아합니다. ::view-transition-group이 크기와 위치 변경을 처리하도록 하고, 그 안의 이전 및 새로운 이미지 스타일링을 재정의합니다.

목표는 이전 및 새로운 "스냅샷"이 왜곡 없이 컨테이너를 채우도록 하는 것입니다. 너비와 높이를 100%로 설정하고 브라우저의 기본 object-fit 속성(원본 요소에서 상속됨)이 크기 조절을 올바르게 처리하도록 하여 이를 수행할 수 있습니다.

::view-transition-old(hero-image),

::view-transition-new(hero-image) {

  /* 컨테이너를 채워 왜곡 방지 */

  width: 100%;

  height: 100%;

  

  /* 효과를 명확하게 보기 위해 기본 교차 페이드 재정의 */

  animation: none;

}

이 CSS를 사용하면 `image-pair`는 가로세로 비율을 부드럽게 애니메이션하고, 내부의 이미지는 일반 컨테이너에서와 같이 `object-fit` 값에 따라 올바르게 잘리거나 레터박스 처리됩니다. 그런 다음 이 수정된 기하학 위에 교차 페이드와 같은 자신만의 맞춤 애니메이션을 추가할 수 있습니다.

디버깅 및 브라우저 지원

아주 짧은 시간 동안만 존재하는 요소를 스타일링하는 것은 까다로울 수 있습니다. 다행히 최신 브라우저는 이를 위한 훌륭한 개발자 도구를 제공합니다. Chrome 또는 Edge 개발자 도구의 "Animations" 패널에서 뷰 트랜지션을 트리거할 때 일시 중지할 수 있습니다. 애니메이션이 일시 중지된 상태에서 "Elements" 패널을 사용하여 다른 DOM 부분처럼 전체 `::view-transition` 의사 요소 트리를 검사할 수 있습니다. 적용된 스타일을 보고 실시간으로 수정하여 애니메이션을 완성할 수 있습니다.

2023년 말 기준으로 뷰 트랜지션 API는 Chromium 기반 브라우저(Chrome, Edge, Opera)에서 지원됩니다. Firefox와 Safari에 대한 구현이 진행 중입니다. 이는 점진적 향상에 완벽한 후보가 됩니다. 지원되는 브라우저의 사용자는 즐겁고 향상된 경험을 얻고, 다른 브라우저의 사용자는 표준적인 즉각적인 탐색을 경험합니다. CSS에서 지원 여부를 확인할 수 있습니다:

@supports (view-transition: none) {

  /* 모든 뷰 트랜지션 스타일은 여기에 작성합니다 */

  ::view-transition-old(my-element) { ... }

}

전 세계 사용자를 위한 모범 사례

애니메이션을 구현할 때 전 세계의 다양한 사용자와 장치를 고려하는 것이 중요합니다.

성능: 애니메이션은 빠르고 유동적이어야 합니다. 브라우저가 처리하기에 비용이 저렴한 CSS 속성, 주로 transform과 opacity를 애니메이션하는 데 집중하세요. width, height, margin과 같은 속성을 애니메이션하면 모든 프레임에서 레이아웃 재계산을 유발하여 특히 저사양 장치에서 버벅거림과 나쁜 경험을 초래할 수 있습니다.

접근성: 일부 사용자는 애니메이션으로 인해 멀미나 불편함을 경험합니다. 모든 주요 운영 체제는 움직임을 줄이는 사용자 설정을 제공합니다. 우리는 이를 존중해야 합니다. prefers-reduced-motion 미디어 쿼리를 사용하면 이러한 사용자를 위해 애니메이션을 비활성화하거나 단순화할 수 있습니다.

@media (prefers-reduced-motion: reduce) {

  ::view-transition-group(*),

  ::view-transition-old(*),

  ::view-transition-new(*) {

    /* 모든 맞춤 애니메이션을 건너뛰고 빠르고 간단한 페이드를 사용 */

    animation: none !important;

  }

}

사용자 경험(UX): 좋은 전환은 목적이 있습니다. 사용자의 주의를 유도하고 UI에서 일어나는 변화에 대한 맥락을 제공해야 합니다. 너무 느린 애니메이션은 애플리케이션을 느리게 느끼게 할 수 있고, 너무 화려한 애니메이션은 주의를 산만하게 할 수 있습니다. 전환 지속 시간은 200ms에서 500ms 사이를 목표로 하세요. 목표는 애니메이션이 눈에 보이는 것보다 느껴지도록 하는 것입니다.

결론: 미래는 유동적이다

CSS 뷰 트랜지션 API, 특히 그 강력한 의사 요소 트리는 웹 사용자 인터페이스의 기념비적인 도약을 의미합니다. 이는 개발자에게 한때 네이티브 애플리케이션의 전유물이었던 유동적이고 상태 저장 전환을 만들 수 있는 네이티브하고 성능이 뛰어나며 고도로 사용자 정의 가능한 도구 세트를 제공합니다. ::view-transition, ::view-transition-group, 그리고 old/new 이미지 쌍의 역할을 이해함으로써 단순한 페이드를 넘어 사용성을 향상시키고 사용자를 즐겁게 하는 복잡하고 의미 있는 애니메이션을 연출할 수 있습니다.

브라우저 지원이 확대됨에 따라 이 API는 현대 프론트엔드 개발자의 툴킷에서 필수적인 부분이 될 것입니다. 그 기능을 수용하고 성능 및 접근성에 대한 모범 사례를 준수함으로써, 우리는 기능적일 뿐만 아니라 전 세계 모든 사람에게 더 아름답고 직관적인 웹을 구축할 수 있습니다.