전환 우수사례 보기

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X LinkedIn
Saurabh Rajpal
Saurabh Rajpal
X LinkedIn

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

  • 사용자 환경 개선: 부드러운 전환과 시각적 신호는 UI의 변경사항을 통해 사용자를 안내하여 탐색이 자연스럽고 덜 거슬리게 합니다.
  • 시각적 연속성: 뷰 간의 연속성을 유지하면 인지 부하가 줄어들고 사용자가 애플리케이션 내에서 방향을 유지하는 데 도움이 됩니다.
  • 성능: API는 가능한 한 적은 기본 스레드 리소스를 사용하려고 하므로 애니메이션이 더 부드럽게 만들어집니다.
  • 모던한 디자인: 개선된 전환으로 세련되고 매력적인 사용자 환경을 제공합니다.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox Technology Preview: supported.
  • Safari: 18.

Source

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

redBus

redBus는 항상 네이티브 환경과 웹 환경 간의 동등성을 최대한 높이기 위해 노력해 왔습니다. View Transition API 이전에는 웹 애셋에 이러한 애니메이션을 구현하는 것이 어려웠습니다. 하지만 API를 사용하면 여러 사용자 여정에서 전환을 만들어 웹 환경을 앱과 더 유사하게 만드는 것이 직관적입니다. 이 모든 것과 성능상의 이점을 고려할 때 모든 웹사이트에 필수적인 기능입니다.—Amit Kumar, 수석 엔지니어링 관리자, 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 코드를 삭제했습니다. 이를 통해 개발 노력을 절약하고 사용자 환경을 크게 개선할 수 있었습니다.아만 소니, 기술 리드, 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;
}

뷰 전환 API 사용 시 고려사항

동일한 페이지에서 여러 뷰 전환 효과를 사용하는 경우 충돌을 방지하려면 효과 또는 섹션마다 다른 view-transition-name이 있어야 합니다.

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

리소스

이 시리즈의 다른 도움말에서 전자상거래 회사가 스크롤 기반 애니메이션, 팝오버, 컨테이너 쿼리, has() 선택기와 같은 새로운 CSS 및 UI 기능을 사용하여 어떤 이점을 얻었는지 알아보세요.