전환 우수사례 보기

Swetha Gopalakrishnan

Saurabh Rajpal

뷰 전환은 웹페이지 또는 애플리케이션 UI의 다양한 상태 간에 애니메이션으로 매끄러운 전환입니다. View Transition API는 이전보다 더 간단하고 성능이 우수한 방식으로 이러한 효과를 만들 수 있도록 설계되었습니다. API는 이전의 JavaScript 접근 방식에 비해 다음과 같은 여러 이점을 제공합니다.

• 사용자 환경 개선: 원활한 전환과 시각적 신호를 통해 UI 변경사항을 사용자에게 안내하여 탐색이 자연스럽고 불편하지 않게 느껴집니다.
• 시각적 연속성: 뷰 간에 연속성을 유지하면 인지 부하가 줄어들고 사용자가 애플리케이션 내에서 방향을 유지하는 데 도움이 됩니다.
• 성능: API는 최대한 적은 수의 기본 스레드 리소스를 사용하려고 하여 더 부드러운 애니메이션을 만듭니다.
• 현대적인 미학: 개선된 전환은 세련되고 몰입도 높은 사용자 환경을 제공합니다.

브라우저 지원

• 111
• 111
• x
• 18

소스

참고: Chrome에서는 단일 페이지 앱 (SPA)을 위한 View Transition API 지원을 출시했으며 작성 시점에 chrome://flags/#view-transition-on-navigation 플래그 뒤에서 MPA (여러 페이지 앱) 지원을 사용할 수 있습니다. View Transition API에 대해 자세히 알아보기

이 게시물은 전자상거래 회사가 새로운 CSS 및 UI 기능을 사용하여 웹사이트를 개선한 방법을 다루는 시리즈의 일부입니다. 이 도움말에서는 일부 기업에서 View Transition API를 구현하고 이로부터 혜택을 얻은 방법을 살펴봅니다.

redBus

redBus는 항상 네이티브 환경과 웹 환경 간에 최대한 동등한 환경을 만들기 위해 노력해 왔습니다. View Transition API 이전에는 웹 애셋에서 이러한 애니메이션을 구현하는 것이 쉽지 않았습니다. 하지만 API를 사용하면 여러 사용자 여정에서 전환을 직관적으로 만들어 웹 환경을 앱처럼 만들 수 있습니다. 이 모든 기능과 성능상의 이점이 결합되어 모든 웹사이트에 꼭 필요한 기능이 되었습니다.—아밋 쿠마르, redBus 선임 엔지니어링 관리자

팀은 여러 위치에 뷰 전환을 구현했습니다. 다음은 홈 페이지의 로그인 아이콘에 페이드 인 및 슬라이드 인 애니메이션을 조합한 예입니다.

사용자가 redBus 홈페이지에서 로그인 아이콘을 클릭하면 뷰 전환이 페이드 및 슬라이드 인됩니다.

코드

이 구현은 여러 개의 view-transition-name 및 맞춤 애니메이션(scale-down 및 scale-up)을 사용합니다. 고유한 값으로 view-transition-name를 사용하면 로그인 구성요소를 페이지의 나머지 부분과 분리하여 별도로 애니메이션을 적용할 수 있습니다. 고유한 새 view-transition-name를 만들면 가상 요소 트리 (다음 코드에 표시됨)에 새 ::view-transition-group도 생성되므로 기본 ::view-transition-group(root)와 별도로 조작할 수 있습니다.

::view-transition
├─::view-transition-group(root)
│ └─…
├─::view-transition-group(signin)
│ └─…
└─::view-transition-group(signinclose)   
└─…

//Code for VT for login
  if (!document.startViewTransition) {
   this.setState(
     {
       closeSigninModal: condition ? true : false
     },
     () => {
       if (closeSigninCb) {
         closeSigninCb();
       }
     }
   );
 } else {
   const transition = document.startViewTransition();
   transition.ready.finally(() => {
     setTimeout(() => {
       this.setState(
         {
           closeSigninModal: condition ? true : false
         },
         () => {
           if (closeSigninCb) {
             closeSigninCb();
           }
         }
       );
     }, 500);
   });
 }

.signin_open {
 view-transition-name: signin;
}

.signin_close  {
 view-transition-name: signinclose;
}

::view-transition-group(signin),
::view-transition-group(signinclose) {
 animation-duration: 0.5s;
}

::view-transition-old(signin) {
 animation-name: -ua-view-transition-fade-out, scale-down;
}
::view-transition-new(signin) {
 animation-name: -ua-view-transition-fade-in, scale-up;
}

::view-transition-new(signinclose) {
 animation-name: -ua-view-transition-fade-out, scale-down;
}

@keyframes scale-down {
 to {
     scale: 0;
 }
}

@keyframes scale-up {
 from {
     scale: 0;
 }
}

Tokopedia

팀은 뷰 전환을 사용하여 사용자가 제품 썸네일 간에 전환할 때 페이딩 효과를 추가했습니다.

구현은 매우 쉽습니다. startViewTransition를 사용하면 효과 없이 이전 구현에 비해 더 부드러운 페이드 전환을 즉시 얻을 수 있습니다.—앤디 위할림, Tokopedia 선임 소프트웨어 엔지니어

이전

이후

코드

다음 코드는 React 프레임워크를 사용하며 flushSync.프레임워크를 사용하여 뷰 전환 구현에 관해 자세히 알아보기와 같은 프레임워크별 코드를 포함합니다. 브라우저가 startViewTransition를 지원하는지 확인하고 지원하는 경우 전환을 실행하는 기본 구현입니다. 그렇지 않으면 기본 동작으로 대체됩니다.

const handleClick =
  ({ url, index }) =>
  () => {
    if ('startViewTransition' in document) { //check if browser supports VT
      document.startViewTransition(() => {
        flushSync(() => {
          setDisplayImage({ url, index });
          setActiveImageIndex(index);
        });
      });
    } else { //if VT is not supported, fall back to default behavior
      setDisplayImage({ url, index });
      setActiveImageIndex(index);
    }
  };

...

<Thumbnail onClick={handleClick({url, index})} />

Policybazaar

Policybazaar의 투자 카테고리에서는 '구매해야 하는 이유'와 같은 도움말 요소에 View Transition API를 사용하여 시각적으로 매력적이고 이러한 기능의 사용을 개선했습니다.

뷰 전환을 통합하여 다양한 상태에서 애니메이션을 관리하는 반복적인 CSS 및 JavaScript 코드를 제거했습니다. 이를 통해 개발 작업이 줄고 사용자 경험이 크게 개선되었습니다.—Aman Soni, Policybazaar 기술 책임자

투자 목록 페이지의 'Policybazaar에서 구매해야 하는 이유' CTA에서 전환 애니메이션을 확인하세요.

코드

다음 코드는 이전 예와 유사합니다. ::view-transition-old(root) 및 ::view-transition-new(root)의 기본 스타일과 애니메이션을 재정의할 수 있다는 점이 주목할 만합니다. 이 경우 기본 animation-duration가 0.4초로 업데이트되었습니다.

togglePBAdvantagePopup(state: boolean) {
  this.showPBAdvantagePopup = state;

  if(!document.startViewTransition) {
    changeState();
    return;
  }

  document.startViewTransition(() => {changeState();});

  function changeState() {
    document.querySelector('.block_section').classList.toggle('hide');
    document.querySelector('.righttoggle_box').classList.toggle('show');
  }
}

.righttoggle_box{
  view-transition-name: advantage-transition;
}

.block_section{
  view-transition-name: advantage-transition;
}

::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 0.4s;
}

View Transition API 사용 시 고려사항

동일한 페이지에서 여러 뷰 전환 효과를 사용할 때는 충돌을 방지하기 위해 각 효과 또는 섹션에 다른 view-transition-name을 지정해야 합니다.

뷰 전환이 활성 (전환 중)인 동안에는 나머지 UI 위에 새 레이어가 추가됩니다. 따라서 마우스 오버 시 전환을 트리거하지 마세요. 실제 커서가 아직 움직이지 않을 때 mouseLeave 이벤트가 예기치 않게 트리거되기 때문입니다.

리소스

• View Transition API를 사용한 원활하고 간단한 전환
• 설명: MPA의 뷰 전환
• 우수사례: 뷰 전환을 통한 원활한 탐색
• 우수사례: 웹으로 무엇을 할 수 있을까요? | 앱과 같은 탐색 제공
• 상호 운용성 제안서: 여러 브라우저에서 보기 전환 사용 가능
• 버그를 신고하거나 새 기능을 요청하시겠어요? SPA 및 MPA에 관한 여러분의 의견을 기다립니다.

스크롤 기반 애니메이션, 팝오버, 컨테이너 쿼리, has() 선택기와 같은 새로운 CSS 및 UI 기능을 사용하여 이커머스 기업이 어떤 이점을 얻었는지 설명하는 이 시리즈의 다른 도움말을 살펴보세요.

• 전자상거래 사이트에서 웹 UI 기능이 중요한 이유는 무엇인가요?
• 스크롤 기반 애니메이션 우수사례
• 팝오버 API 우수사례
• 컨테이너 쿼리 우수사례
• :has() 선택자 우수사례