전환 우수사례 보기

Swetha Gopalakrishnan

Saurabh Rajpal

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

• 사용자 환경 개선: 매끄러운 전환 및 시각적 신호가 사용자에게 UI의 변경사항을 안내하여 탐색이 자연스럽고 부드러운 느낌을 줍니다.
• 시각적 연속성: 뷰 간에 연속성을 유지하면 인지 부하를 줄이고 사용자가 애플리케이션 내에서 방향을 유지하는 데 도움이 됩니다.
• 성능: API는 기본 스레드 리소스를 가능한 한 적게 사용하여 더 매끄러운 애니메이션을 만듭니다.
• 현대적인 미학: 개선된 전환은 세련되고 매력적인 사용자 환경을 제공합니다.

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

redBus

redBus는 네이티브 환경과 웹 환경 간에 최대한 동일한 환경을 만들기 위해 항상 노력하고 있습니다. View Transitions API 이전에는 이러한 애니메이션을 웹 애셋에 구현하기가 어려웠습니다. 하지만 이 API를 사용하면 여러 사용자 여정에서 전환을 만들어 웹 환경을 앱과 유사하게 만드는 것이 직관적이라는 사실을 발견했습니다. 이 모든 기능과 함께 성능상의 이점까지 더해지면서 이 기능은 모든 웹사이트에서 반드시 사용해야 하는 기능입니다. 아밋 쿠마르, 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 Transitions API를 사용하여 시각적으로 매력적으로 만들고 이러한 기능의 사용을 개선했습니다.

뷰 전환을 통합함으로써 다양한 상태에 걸쳐 애니메이션을 관리하는 반복적인 CSS 및 JavaScript 코드가 필요 없게 되었습니다. 이를 통해 개발 작업을 줄이고 사용자 환경을 크게 향상시켰습니다. 아만 소니, Policybazaar 기술 책임자.

코드

다음 코드는 이전 예와 유사합니다. 한 가지 유의해야 할 점은 ::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 Transitions API 사용 시 고려해야 할 사항

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

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

자료

• View Transitions API를 사용한 원활하고 간단한 전환
• 설명: MPA의 뷰 전환
• 우수사례: 뷰 전환을 통해 가능해진 원활한 탐색
• 우수사례: 웹이 할 수 있는 일은? | 앱과 유사한 탐색 제공
• 상호 운용성 제안: 여러 브라우저에서 뷰 전환을 사용할 수 있도록 설정
• 버그를 신고하고 싶으신가요, 아니면 새로운 기능을 요청하고 싶으신가요? SPA 및 MPA와 관련된 여러분의 의견을 기다립니다.

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

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