View Transitions API란?

Adam Kim·약 22시간 전

View transition

angular

목록 보기

90/90

Angular 17은 웹 개발 경험을 한 단계 끌어올리는 혁신적인 기능들을 선보였습니다. 그중에서도 가장 주목받는 기능 중 하나가 바로 View Transitions API입니다.

이번 글에서는 View Transitions API가 무엇인지, 어떻게 사용하는지, 그리고 이 기능이 사용자 경험을 어떻게 향상시키는지 자세히 알아보겠습니다.

View Transitions API란?

View Transitions API는 단일 페이지 애플리케이션(SPA) 내에서 뷰(View)가 전환될 때 부드러운 애니메이션 효과를 쉽게 구현할 수 있도록 돕는 웹 표준 API입니다.

이전에는 라우트 변경 시 애니메이션을 구현하기 위해 복잡한 CSS나 JavaScript 로직이 필요했지만, 이제는 Angular 라우터에 단 한 줄의 코드만 추가하면 기본 전환 효과를 즉시 적용할 수 있습니다.

이 API는 단순히 시각적인 아름다움을 넘어, 사용자가 앱의 흐름을 직관적으로 이해하도록 돕고, 데이터 로딩 중에도 시각적 피드백을 제공하여 앱이 더 빠르고 반응성 좋게 느껴지게 만듭니다.

활성화 방법

View Transitions API를 활성화하는 방법은 놀라울 정도로 간단합니다. app.config.ts 파일에서 provideRouter 설정에 withViewTransitions()만 추가하면 됩니다.

// app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideRouter, withViewTransitions } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(
      routes,
      withViewTransitions() // 👈 이 한 줄만 추가하면 됩니다!
    ),
  ],
};

이 설정만으로도 라우트가 변경될 때마다 부드러운 크로스 페이드(cross-fade) 애니메이션이 자동으로 적용됩니다.

특정 요소에 전환 효과 적용하기

기본 페이드 효과를 넘어, 특정 요소가 두 페이지 간에 자연스럽게 이어지는 애니메이션을 만들 수도 있습니다. 예를 들어, 목록 페이지의 이미지 썸네일을 클릭했을 때 상세 페이지의 큰 이미지로 부드럽게 변하는 효과를 구현할 수 있습니다.

이 효과의 핵심은 view-transition-name이라는 CSS 속성입니다. 전환 전후의 두 요소에 동일한 view-transition-name을 부여하면, 브라우저는 이 두 요소를 동일한 객체로 인식하고 애니메이션을 자동으로 처리합니다.

1. 템플릿에 view-transition-name 설정

먼저, 목록 페이지와 상세 페이지의 해당 요소에 동일한 view-transition-name을 동적으로 할당합니다.

목록 페이지 (List Page)

<!-- books-list.component.html -->
<div class="book-grid">
  {@for (book of books; track book.id)}
    <a [routerLink]="['/book', book.id]">
      <img 
        [src]="book.cover" 
        [style.view-transition-name]="'book-cover-' + book.id"
      />
    </a>
  }
</div>

상세 페이지 (Detail Page)

<!-- book-detail.component.html -->
{@if (book) {
  <div>
    <img 
      [src]="book.cover" 
      [style.view-transition-name]="'book-cover-' + book.id"
    />
    <h1>{{ book.title }}</h1>
  </div>
}}

2. CSS로 전환 효과 커스터마이징하기

단순히 view-transition-name만 설정하면 어떻게 될까요? CSS를 전혀 작성하지 않아도 브라우저는 기본적으로 크기와 위치가 변하는 '모핑(morphing)' 애니메이션을 자동으로 적용합니다. 이것이 View Transitions API의 강력한 점입니다.

하지만 이 기본 동작을 더 세밀하게 제어하거나 다른 효과를 추가하고 싶을 때 CSS가 필요합니다. View Transitions API는 애니메이션 과정을 제어할 수 있도록 ::view-transition-*과 같은 특수한 의사 요소(pseudo-elements)를 제공합니다.

예를 들어, 책 표지가 전환되는 애니메이션의 지속 시간과 타이밍 함수를 변경하고 싶다면 다음과 같이 CSS를 추가할 수 있습니다.

/* styles.css */

/* 'book-cover-'로 시작하는 모든 전환 그룹에 적용 */
::view-transition-group(book-cover-*) {
  animation-duration: 0.5s; /* 애니메이션 지속 시간을 0.5초로 설정 */
  animation-timing-function: ease-in-out; /* 시작과 끝을 부드럽게 처리 */
}

/* 이미지 쌍(이전 이미지와 새 이미지)에 대한 스타일 */
::view-transition-image-pair(book-cover-*) {
  /* 이미지 비율이 다를 때 자연스럽게 보이도록 설정 */
  object-fit: contain; 
}

::view-transition-group(name): 지정된 view-transition-name을 가진 요소의 전체 애니메이션 컨테이너입니다. 여기에 애니메이션의 전반적인 속성을 정의합니다. 와일드카드(*)를 사용하여 'book-cover-'로 시작하는 모든 이름에 규칙을 적용할 수 있습니다.
::view-transition-image-pair(name): 전환되는 '이전' 이미지와 '새' 이미지를 감싸는 요소입니다.

이처럼 CSS를 활용하면 기본 효과를 그대로 사용하거나, 필요에 따라 정교하게 다듬어 훨씬 더 풍부한 사용자 경험을 만들 수 있습니다.