전환 우수사례 보기

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

뷰 전환은 애니메이션으로 다양한 상태 간에 매끄럽게 전환됩니다. 웹 페이지 또는 애플리케이션의 UI입니다. 이 View Transition API 이 원칙은 일반 텍스트보다 더 간단하고 효율적으로 이러한 효과를 만들 수 있습니다. 이전에는 가능했던 적이 있습니다. 이 API는 이전 버전에 비해 여러 가지 이점을 제공합니다. 다음을 포함한 JavaScript 접근 방식:

  • 사용자 환경 개선: 부드러운 전환과 시각적 신호로 사용자를 안내합니다. 탐색이 자연스럽고 덜 거슬리게 느껴질 수 있습니다.
  • 시각적 연속성: 보기 간에 연속성 유지 인지 부하를 줄이고 사용자가 애플리케이션 내에서 방향을 유지하는 데 도움이 됩니다.
  • 성능: API는 최대한 적은 수의 기본 스레드 리소스를 부드러운 애니메이션을 만들 수 있습니다.
  • 현대적인 디자인: 전환이 개선되어 세련되고 완성도가 높은 몰입도 높은 사용자 경험을 제공합니다.

브라우저 지원

  • Chrome: 111 <ph type="x-smartling-placeholder">
  • Edge: 111. <ph type="x-smartling-placeholder">
  • Firefox: 지원되지 않음 <ph type="x-smartling-placeholder">
  • Safari: 18. <ph type="x-smartling-placeholder">

소스

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

redBus

redBus는 항상 네이티브와 웹 환경 간에 최대한의 패리티를 최대한의 노력을 기울입니다. View Transition API 이전에 이러한 API를 구현하려면 웹 애셋의 애니메이션은 어려웠습니다. 하지만 API를 사용하면 직관적으로 다양한 사용자 여정에서 전환을 생성함으로써 더욱 생생하게 경험하세요 이 모든 것이 성능 이점과 결합되어 이어야 합니다.—아밋 쿠마르, 선임 엔지니어링 RedBus의 관리자.

팀은 여러 위치에서 뷰 전환을 구현했습니다. 예를 들면 다음과 같습니다. 홈의 로그인 아이콘에 표시되는 페이드인 및 슬라이드 인 애니메이션 조합 있습니다.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
사용자가 로그인을 클릭할 때 뷰 페이드 및 슬라이드 인 전환 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 투자 금액 카테고리는 '구매해야 하는 이유', 시각적으로 매력적으로 만들고 이러한 기능의 사용을 개선합니다.

뷰 전환을 통합하여 반복적 CSS와 JavaScript를 제거했습니다. 다양한 상태에 걸쳐 애니메이션을 관리하는 코드입니다. 절감 사용자 경험을 크게 개선했습니다.—아만 소니, Policybazaar 기술 책임자.

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
'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를 사용할 때 고려할 사항

동일한 페이지에서 여러 개의 보기 전환 효과를 사용할 때는 각 효과나 섹션에 대해 서로 다른 뷰 전환 이름을 사용하면 충돌합니다.

보기 전환이 활성 (전환 중)인 동안에는 다음에 새 레이어를 추가합니다. 표시됩니다. 따라서 마우스 오버 시 전환을 트리거하지 마세요. mouseLeave 이벤트가 예기치 않게 트리거됩니다 (실제 커서가 움직임이 없음).

리소스

이 시리즈의 다른 기사에서 전자상거래가 어떻게 기업들은 스크롤 기반 전략과 같은 새로운 CSS 및 UI 기능을 사용하여 애니메이션, 팝오버, 컨테이너 쿼리, has() 선택기 등이 포함됩니다.