뷰 전환으로 매끄러운 탐색 가능

Yuriko Hirota
Yuriko Hirota
Saurabh Rajpal
Saurabh Rajpal
X

전환은 상황에 맞게 유지하고 지연 시간에 대한 인식을 줄이는 등 사용자에게 많은 이점이 있습니다. 개발자는 페이지 간 전환을 원활하게 만들어 사이트에 대한 사용자 참여를 높일 수 있기를 원합니다.

하지만 상태 전환을 사용 설정하려면 개발자가 서로 다른 두 요소의 상태를 관리해야 했기 때문에 매우 어려웠습니다. 단순한 크로스 페이드와 같은 경우에도 두 상태가 동시에 나타나게 됩니다. 이는 나가는 요소에 대한 추가 상호작용을 처리하는 것과 같은 사용성 문제를 야기합니다. 보조 기기 사용자의 경우 전후 상태가 모두 DOM에 동시에 있는 기간이 있습니다. 또한 보기에는 사물이 트리 내에서 움직일 수 있지만 읽기 위치와 초점이 흐려지기 쉽습니다.

Chrome 111에서 출시된 View Transitions API를 사용하면 페이지 간의 원활하고 간단한 전환을 만들 수 있습니다. 이를 통해 상태 간에 겹치지 않고 DOM을 변경할 수 있으며 스냅샷 처리된 뷰를 사용하여 상태 간에 전환 애니메이션을 포함할 수 있습니다.

구현이 얼마나 쉬운지 궁금하실 텐데요. 어떤 종류의 사용 사례가 있나요? 다른 개발자는 뷰 전환을 어떻게 사용하고 있나요?

이 도움말에서는 4개의 웹사이트인 RedBus (여행), CyberAgent (뉴스/블로그 게시자), Nykaa (전자상거래), PolicyBazaar (보험)의 4개 웹사이트에서 뷰 전환을 구현하고 View Transitions API를 사용하여 이 웹사이트의 다양한 이점을 누릴 수 있는 방법을 설명합니다.

redBus

MakeMyTrip 그룹의 자회사인 redBus는 인도 벵갈루루에 본사를 둔 버스 예약 및 티켓 판매 웹사이트로 전 세계 여러 지역에서 서비스를 제공하고 있습니다. 이는 View Transitions API를 사용하여 환경을 구현한 최초의 웹사이트 중 하나입니다.

Redbus가 뷰 전환을 구현한 이유는 무엇인가요?

redBus의 팀은 기본 앱과 최대한 가까운 통합된 앱 같은 웹 환경을 제공하겠다는 확고한 믿음을 가지고 있습니다. 실제로 지난 수년간 여러 개의 맞춤형 솔루션을 구현했습니다. 예를 들어 View Transitions API가 개발되기 전에 페이지 전환을 위한 맞춤형 JavaScript 및 CSS 기반 애니메이션을 출시했습니다. 하지만 이는 낮은 수준의 네트워크 및 기기 세그먼트에서 성능 관리를 처리해야 했기 때문에 때때로 적응형 로드 전략을 갖춘 차등적인 경험으로 이어졌습니다.

redBus는 여러 사용자 여정에 뷰 전환을 사용했습니다. 예를 들어 맞춤 Chrome 탭에서 웹페이지를 여는 모바일 앱의 셀프 서비스 섹션과 사용자가 인벤토리 목록 페이지에서 결제 페이지로 이동하는 버스 티켓 예약 유입경로를 예로 들 수 있습니다. 후자의 경우 뷰 전환을 통해 페이지에서 페이지로의 탐색이 더 매끄러워지고 전환율이 증가했습니다. 이는 사용 가능한 최신 인벤토리 가져오기와 같은 대규모 작업을 실행하는 동안 사용자 환경이 개선되고 인지된 실적이 개선된 결과입니다.

구현 관련 기술 세부정보

redBus는 React 및 EJS를 프런트엔드 기술 스택으로 사용하며, 다양한 여정에서 SPA와 MPA를 조합해 사용합니다. 다음 코드 발췌 부분은 뷰 전환이 사용되는 방식을 보여줍니다.

/* Forward Transition */
export const goToURL = ( url: string , reactHistory: any ): void => {
  if(document.startViewTransition) {
    let viewTransition = document.startViewTransition();
    viewTransition.ready.finally(() => {
      reactHistory ? reactHistory.push(url) : (window.location.href = url);
    })
  } else {
    reactHistory ? reactHistory.push(url) : (window.location.href = url);
  }
};

/* Back Transition */
export const goBack = ( reactHistory: any ): void => {
  if(document.startViewTransition) {
    document.documentElement.classList.add('back-transition');
    let viewTransition = document.startViewTransition();
    viewTransition.ready.finally(() => {
      reactHistory ? reactHistory.goBack() : history.back();
    })
    viewTransition.finished.finally(() => {
      document.documentElement.classList.remove('back-transition');
    })
  } else {
    reactHistory ? reactHistory.goBack() : history.back();
  }
};

다음 CSS에서 slide-to-right, slide-to-left, slide-from-right, slide-from-left는 CSS 애니메이션 키프레임입니다.

::view-transition-old(root) {
  animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
  300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(root) {
  animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
  700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
.back-transition::view-transition-old(root) {
  animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
  300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}
.back-transition::view-transition-new(root) {
  animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
  700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
}

비즈니스에 영향

redBus는 사이트 전반에 걸쳐 INP 개선 노력과 함께 뷰 전환을 구현하기로 했고, 그 결과 매출이 7% 증가했습니다. redBus의 선임 엔지니어링 관리자인 Amit Kumar는 보기 전환이 진정으로 더 나은 사용자 환경을 원하고 유지보수 오버헤드를 줄이고자 하는 사람들에게 정말 좋은 기능이라고 말했습니다.

Google에서는 다양한 사용자 그룹에서 수집한 가치 있는 정보를 취합하여 종합적인 사용자 의견 세션을 진행해 왔습니다. 당사의 사용자층 (버스 및 철도)과 이들의 니즈에 대한 심도 있는 이해와 전문성을 결합한 결과, 이 기능이 A/B 테스트 없이도 처음부터 상당한 가치를 제공할 수 있을 것이라는 믿음을 갖게 되었습니다. 뷰 전환은 원활한 탐색 환경을 통해 앱과 웹 간의 격차를 좁히기 위한 단계입니다.

아눕 메논, redBus CTO

CyberAgent

CyberAgent는 일본에 본사를 둔 IT 회사로 블로그 및 뉴스 게시 등 다양한 온라인 서비스를 제공합니다.

CyberAgent가 뷰 전환을 구현한 이유는 무엇인가요?

과거에 CyberAgent는 사용자 환경을 개선하기 위해 CSS 애니메이션 또는 프레임워크를 사용하여 애니메이션 전환을 구현하는 것을 고려했지만 DOM 렌더링과 코드 유지관리성의 저조한 성능에 대해 우려했습니다. Chrome에서 View 전환 API 지원을 추가하자 이 API를 사용해 이러한 문제를 극복할 수 있는 흥미로운 페이지 전환을 만들 수 있다는 기쁨을 느꼈습니다.

CyberAgent는 블로그 목록과 블로그 페이지 간의 뷰 전환을 구현했습니다. 여기에서 요소 전환을 히어로 이미지에 추가한 방법을 확인하세요. 파트너 사이트를 방문하여 지금 바로 체험해 볼 수 있습니다.

또한 미디어 쿼리를 사용하여 다양한 기기에 맞는 다양한 애니메이션 환경을 설계했습니다. 모바일 페이지에서는 요소 전환이 포함되었지만 이 효과는 데스크톱에서 너무 많이 움직였습니다.

@media screen and (min-width: 769px) {
  .main-visual {
    view-transition-name: none !important;
  }
}

구현 관련 기술 세부정보

CyberAgent는 Next.js를 사용하여 SPA를 빌드합니다. 다음 코드 예에서는 View Transition API를 사용하는 방법을 보여줍니다.

export const usePageTransition = () => {
  const router = useRouter();
  const defferedRef = useRef<Deferred | null>(null);

  useEffect(() => {
    const handleRouteChangeComplete = () => {
      defferedRef.current?.resolve();
    };

    const handleRouteChangeStart = (url: string) => {
      if (!("startViewTransition" in document)) return;
      if (router.asPath === url) return;

      const deffered = new Deferred();
      defferedRef.current = deffered;
      (document as Document).startViewTransition(async () => {
        await deffered.promise;
      });
    };

    router.events.on("routeChangeStart", handleRouteChangeStart);
    router.events.on("routeChangeComplete", handleRouteChangeComplete);

    return () => {
      router.events.off("routeChangeStart", handleRouteChangeStart);
      router.events.off("routeChangeComplete", handleRouteChangeComplete);
    };
  }, [router.asPath]);
};

샘플 Next.js 코드를 더 확인해 보세요.

사전 렌더링 기술을 사용한 MPA 전환 보기

또한 CyberAgent는 뉴스 포털 사이트인 Ameba News라는 서비스에서 새로운 여러 페이지 앱을 위한 View Transitions API (MPA) (현재 플래그 chrome://flags/#view-transition-on-navigation 아래에 있음)를 사용해 보았습니다.

뷰 전환은 다음 두 위치에서 사용되었습니다. 첫 번째는 다음 동영상과 같이 뉴스 카테고리를 변경하는 것입니다.

두 번째 요소는 콘텐츠 발췌 부분이 표시되는 뉴스 하이라이트 페이지와 사용자가 세부정보 보기를 클릭하면 기사의 나머지 부분이 페이드 인되는 영역입니다.

흥미로운 점은 버튼을 클릭하면 변경되는 부분에만 애니메이션을 추가했다는 것입니다. 애니메이션 디자인을 조금만 수정하면 새 콘텐츠만 애니메이션 처리되고 사용자 관점에서 MPA 페이지가 SPA처럼 보이게 됩니다.

방법은 다음과 같습니다. 페이지의 여러 부분에 다른 view-transition-name를 할당했습니다. 예를 들어 기사의 상단 부분에 하나의 view-transition-name를 할당하고 하단에 하나의 view-transition-name를 할당하고 상단에는 애니메이션을 추가하지 않았습니다.

::view-transition-old(root) {
  animation:
    var(--animation-disappear-duration) var(--animation-disappear-easing) both fade-out;
  }

::view-transition-new(root) {
  animation:
    var(--animation-appear-in-duration) var(--animation-appear-in-easing) both fade-in;
}

하단이 전환되는 동안 페이지 상단 부분에 애니메이션이 적용되지 않는 방식을 보여주는 다이어그램

CyberAgent가 뷰 전환 API를 사용한 또 다른 흥미로운 점은 빠른 링크를 사용하여 세부정보 페이지에 사전 렌더링 규칙을 쉽게 구현했다는 것입니다. 샘플 코드는 다음과 같습니다.

import { prerender } from ‘https://.../quicklink.mjs’;

window.addEventListener('load', () => {
  const match = location.pathname.match(/\\/(.+)\\/hl\\/([0-9a-z-_]+)/);
  if (!match) return;
    const [_, dirname, entryId] = match;
    prerender(`/${dirname}/${entryId}/`);
  });

빠른 링크 구현에 대한 자세한 내용은 이 도움말을 참조하세요.

후기

CyberAgent의 Ameba 서비스 기술 책임자인 카즈나리 하라는 두 가지 이유로 뷰 전환이 비즈니스에 상당한 영향을 미칠 수 있다고 말했습니다.

첫째, 사용자를 페이지로 안내합니다. 보기 전환을 사용하면 가장 중요한 메시지에 시각적으로 사용자의 초점을 맞출 수 있으며, 사용자가 웹페이지를 최대한 활용할 수 있습니다. 또한 애니메이션을 통해 브랜드를 강화하고 강조합니다. CyberAgent는 지정된 애니메이션 디자인을 통해 브랜드를 전달합니다. 뷰 전환을 사용하면 외부 라이브러리를 유지관리하는 비용을 추가하지 않고도 이러한 브랜드 환경을 구현할 수 있습니다.

뷰 전환은 제가 가장 좋아하는 API 중 하나입니다. 애니메이션을 표준 브라우저 기능으로 추가하는 기능을 사용하면 라이브러리에 종속된 다른 솔루션에 비해 뷰 전환을 더 쉽게 구현하고 유지관리할 수 있습니다. YouTube는 브랜드를 알리기 위해 더 많은 서비스로 뷰 전환을 구현할 수 있기를 기대합니다.

카즈나리 하라, Ameba CTO

Nykaa

Nykaa는 인도 최대의 패션 및 미용 전자상거래 플랫폼입니다. 모바일 웹 환경을 네이티브 앱 환경과 최대한 가깝게 만드는 것을 목표로 합니다. 이전에는 전환 애니메이션을 구현하려고 시도할 때 복잡한 맞춤 JavaScript를 작성하는 데 어려움을 겪었습니다. 이는 웹사이트 실적에도 약간의 영향을 미쳤습니다.

Nykaa가 뷰 전환을 구현한 이유는 무엇인가요?

뷰 전환이 도입되자 Nykaa의 팀은 이러한 전환을 기본적으로 사용할 수 있으면 성능 비용 없이 페이지 전환의 UX를 크게 개선할 수 있다는 가능성을 발견했습니다. Nykaa는 제품 세부정보 페이지에서 제품 등록정보 페이지로 전환할 때 뷰 전환을 주로 사용하고 있습니다.

구현 관련 기술 세부정보

니카는 React와 Emotion을 사용하여 SPA를 구축했습니다. React에서 뷰 전환을 사용하는 방법에 관한 더 많은 샘플 코드는 여기에서 확인할 수 있습니다.

if (document.startViewTransition) {
      document.startViewTransition(() => {
        history.push(productUrl);
      });
    } else {
      history.push(productUrl);
   }

const fadeIn = keyframes`
  from { opacity: 0; }
`;

const fadeOut = keyframes`
  to { opacity: 0; }
`;

const slideFromRight = keyframes`
  from { transform: translateX(300px); }
`;

const slideToLeft = keyframes`
  to { transform: translateX(-300px); }
`;

const slideToRight = keyframes`
  to { transform: translateX(300px); }
`;

const slideFromLeft = keyframes`
  from { transform: translateX(-300px); }
`

측면 창 애니메이션 CSS:

::view-transition-old(root) {
  animation: 300ms cubic-bezier(0.4, 0, 1, 1) both ${fadeOut},
  1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideToLeft};
}

::view-transition-new(root) {
  animation: 400ms cubic-bezier(0, 0, 0.2, 1) 300ms both ${fadeIn},
  1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideFromRight};
}

.back-transition {
  display: inherit;
}

.back-transition::view-transition-old(root) {
  animation-name: fade-out, ${slideToRight};
}

.back-transition::view-transition-new(root) {
  animation-name: fade-in, ${slideFromLeft};
}

후기

Nykaa의 앱 책임자인 Sunit Jindal은 뷰 전환의 가장 큰 이점은 '속도에 대한 인식'이라고 말했습니다. Nykaa는 쉬머 효과를 사용하여 백엔드에서 콘텐츠가 로드될 때까지 기다렸지만, 쉬머 효과를 표시해도 사용자가 콘텐츠가 로드될 때까지 기다려야 하는 시간을 확인할 수 없다는 사실을 발견했습니다. 뷰 전환을 사용하면 전환 자체에서 사용자에게 '곧 무슨 일이 일어날 것'이라는 느낌을 주었기 때문에 대기 시간이 덜 고통스러웠습니다.

Nykaa는 뷰 전환을 통해 웹페이지의 새롭게 개선된 UX에 매우 만족했으며 추가 페이지에도 뷰 전환을 구현할 준비를 마쳤습니다. 디자인 부문 부사장의 말은 다음과 같습니다.

Google은 적절한 경우 향후 모든 기능에서 뷰 전환을 구현하기 위해 최선을 다하고 있습니다. 일부 영역은 이미 확인되었으며 YouTube팀에서는 이러한 영역에 적극적으로 투자하고 있습니다.

크리슈나 R V, 디자인 부문 부사장

PolicyBazaar

구르가온에 본사를 둔 PolicyBazaar는 인도 최대의 보험 회사이자 다국적 금융 기술 회사입니다.

PolicyBazaar에서 뷰 전환을 구현한 이유는 무엇인가요?

웹 우선 기업인 PolicyBazaar팀은 항상 중요한 사용자 여정에서 가능한 한 최상의 사용자 경험을 제공하는 것을 목표로 삼아 왔습니다. View Transitions API가 출시되기 전에 JavaScript와 CSS를 사용해 맞춤 전환을 구현하는 것이 일반적이었습니다. 사용자 환경을 개선하고, 원활한 탐색 흐름을 만들며, 웹사이트의 전반적인 시각적 효과를 개선했기 때문입니다.

그러나 이러한 맞춤형 구현은 가끔 성능 기반 지연, 코드 유지 관리의 복잡성, 사용되는 프레임워크와의 호환성을 최적화하지 못하는 대가를 치르기도 했습니다. View Transitions API는 기본적으로 사용할 수 있는 성능상의 이점이 있는 사용하기 쉬운 인터페이스를 제공하여 이러한 대부분의 문제를 극복하는 데 도움이 되었습니다.

PolicyBazaar는 견적 전 여정에서 다양한 요소의 뷰 전환을 사용하여 잠재 구매자가 보험 상품 구매 시 필요한 세부정보를 제공할 수 있도록 했습니다.

구현 관련 기술 세부정보

이 회사의 코드베이스 대부분을 Angular와 React가 주도하는 하이브리드 프레임워크 접근 방식을 사용합니다. 다음은 Angular로 작성되고 Aman Soni (PolicyBazaar의 수석 프런트엔드 개발자)가 공유한 코드에서 발췌한 VT입니다.

toggleWidgetAnimation() {
    let doc:any = document;

    if (!doc.startViewTransition) {
      this.toggleWidget();
      return;
    }

    doc.startViewTransition(() => this.toggleWidget());
  }

  toggleWidget() {
    let badgeEle = document.querySelector('.animate_init_state_one');
    let textEle = document.querySelector('.animate_init_state_two');

    badgeEle.classList.toggle('hide');
    textEle.classList.toggle('hide');
  }

후기

디자인 (Life BU) 책임자인 리샤브 메로트라는 조회 전환이 사용성, 참여도, 전반적인 만족도를 개선하여 사용자의 웹사이트 경험을 향상하는 데 중요한 역할을 했다고 말했습니다. 덕분에 원활한 탐색, 가이드 상호작용, 인지 부하 감소, 현대적인 미학 등 다양한 이점을 누릴 수 있었습니다.

웹 경험 향상은 PB의 가장 중요한 목표이며 VT는 매우 원활하게 이 목표를 달성하는 데 중요한 도구임이 입증되었습니다. 개발자 커뮤니티와 사용자 기반 모두의 광범위한 관심을 받은 덕분에 우리 팀은 열정을 갖게 되었습니다. 다양한 POD에 대한 통합을 고려하면서 만족도 수준과 운영 우수성에 매우 긍정적인 영향을 미칠 것으로 예상됩니다.

사우라브 티와리 (PolicyBazaar CTO)

다음 단계

뷰 전환을 사용해 보고 싶으신가요? 다음은 도움이 되는 리소스입니다.