전환은 맥락에 맞게 유지하고 지연 시간에 대한 인식을 줄이는 등 사용자에게 많은 이점을 제공합니다. 개발자는 페이지 간에 매끄러운 전환을 만들어 사이트에 대한 사용자의 참여를 높일 수 있기를 원합니다.
하지만 개발자가 서로 다른 두 요소의 상태를 관리해야 하므로 상태 전환을 사용 설정하기가 정말 어려웠습니다. 간단한 크로스 페이드 같은 작업조차도 두 상태가 동시에 나타나게 됩니다. 이는 나가는 요소의 추가 상호작용을 처리하는 것과 같은 사용성 문제를 일으킵니다. 보조 기기 사용자의 경우 이전 및 이후 상태가 동시에 DOM에 존재하는 기간이 있습니다. 또한 시각적으로는 보기 좋게는 트리를 이리저리 움직일 수 있지만 읽기 위치와 초점이 흐려지기 쉽습니다.
Chrome 111에서 출시된 View Transitions API를 사용하면 페이지 간에 원활하고 단순한 전환을 만들 수 있습니다. 상태 간 겹침 없이 DOM을 변경하고 스냅샷으로 생성된 뷰를 사용하여 상태 간에 전환 애니메이션을 만들 수 있습니다.
구현하기가 얼마나 쉬운지 궁금할 것입니다. 어떤 종류의 사용 사례가 있나요? 다른 개발자는 어떻게 뷰 전환을 사용하나요?
이 도움말에서는 RedBus (여행), CyberAgent (뉴스/블로그 게시자), Nykaa (전자상거래), PolicyBazaar (보험) 등 4가지 웹사이트에서 보기 전환을 구현하고, View Transitions API를 사용하여 이들 웹사이트가 다양한 방식으로 혜택을 받는 방법을 설명합니다.
redBus
MakeMyTrip 그룹의 일부인 redBus는 인도 방갈로르에 본사를 둔 버스 예약 및 티켓 판매 웹사이트로서 전 세계 다양한 지역에 지사를 두고 있습니다. View Transitions API를 사용하여 환경을 구현한 최초의 웹사이트 중 하나였습니다.
Redbus에서 뷰 전환을 구현한 이유는 무엇인가요?
redBus 팀은 자사의 네이티브 앱과 최대한 가까운 통합된 앱 같은 웹 환경을 제공하겠다는 확고한 신념을 가지고 있습니다. 실제로 수년 동안 여러 맞춤형 솔루션을 구현했습니다. 예를 들어, View Transitions API가 개발되기 전에도 페이지 전환을 위한 맞춤 JavaScript 및 CSS 기반 애니메이션을 배포했습니다. 하지만 이 때문에 네트워크 및 기기의 하위 부문에서 성능 관리를 처리해야 했고 적응형 로드 전략을 통해 경험을 차별화하는 경우도 있었습니다.
redBus에서는 여러 사용자 여정에 뷰 전환을 사용했습니다. 맞춤 Chrome 탭에서 웹페이지를 여는 모바일 앱의 셀프 지원 섹션과 사용자가 인벤토리 목록 페이지에서 결제 페이지로 이동하는 버스 티켓 예약 유입경로를 예로 들 수 있습니다. 후자의 경우 보기 전환이 페이지 이동이 더 원활해져 전환율이 상승했습니다. 이는 사용 가능한 최신 인벤토리 가져오기와 같은 대규모 작업을 실행하는 동안 사용자 경험과 감지된 성능이 향상되었다는 결과입니다.
구현 관련 기술 세부정보
redBus는 다양한 여정에서 SPA와 MPA를 조합하여 React 및 EJS를 프런트엔드 기술 스택으로 사용합니다. 다음 코드 발췌 부분은 뷰 전환이 사용되는 방식을 보여줍니다.
/* 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의 수석 엔지니어링 관리자인 아밋 쿠마르는 진정으로 더 나은 사용자 경험을 원하고 유지보수 오버헤드를 줄이고자 하는 사람들에게 뷰 전환이 정말 대단하다고 말했습니다.
Google에서는 다양한 사용자 그룹에서 얻은 유용한 정보를 통합하는 포괄적인 사용자 피드백 세션을 진행했습니다. 당사는 사용자 기반 (버스 및 철도)과 그들의 니즈를 깊이 있게 이해하고 당사의 전문성과 결합하여 이 기능이 A/B 테스트 없이도 처음부터 상당한 가치를 제공할 것이라 믿게 되었습니다. 뷰 전환은 원활한 탐색 환경을 통해 앱과 웹 간의 격차를 줄이는 데 한 걸음 더 가까워집니다.
아눕 메논, redBus CTO
CyberAgent
CyberAgent는 일본에 본사를 둔 IT 회사로 블로그, 뉴스 게시 등 다양한 온라인 서비스를 제공합니다.
CyberAgent가 뷰 전환을 구현한 이유는 무엇인가요?
CyberAgent는 과거에 사용자 경험을 개선하기 위해 CSS 애니메이션을 사용하거나 프레임워크를 사용하여 애니메이션 전환을 구현하는 방안을 고려했으나, DOM 렌더링 성능 저하와 코드 유지관리성에 대해 우려했습니다. Chrome에서 View Transition 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의 뷰 전환
또한 뉴스 포털 사이트인 Ameba News라는 서비스에서 새로운 View Transitions API for Multiple Page Apps (MPA) (현재 chrome://flags/#view-transition-on-navigation 플래그 있음)를 사용해 보았습니다.
보기 전환은 두 위치에서 사용되었습니다. 첫 번째는 다음 동영상에 표시된 뉴스의 카테고리를 변경할 때입니다.
두 번째는 콘텐츠 발췌 페이지가 표시되는 뉴스 하이라이트 페이지와 사용자가 세부정보 보기를 클릭하여 이동하면 기사의 나머지 부분이 페이드 인됩니다.
흥미로운 점은 버튼을 클릭한 후 변경되는 부분에만 애니메이션을 추가했다는 점입니다. 애니메이션 디자인을 조금만 조정하면 MPA 페이지가 사용자 관점에서 SPA처럼 표시되고 새 콘텐츠만 애니메이션으로 표시됩니다.
방법은 다음과 같습니다. 페이지의 여러 부분에 다른 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 중 하나입니다. 애니메이션을 표준 브라우저 기능으로 추가하는 기능을 사용하면 라이브러리에 의존하는 다른 솔루션과 비교하여 뷰 전환을 더 쉽게 구현하고 유지관리할 수 있습니다. 우리는 브랜드를 전달하기 위해 더 많은 서비스로 보기 전환을 구현하려고 합니다.
하라 카즈나리, Ameba CTO
니카
Nykaa는 인도 최대의 패션 및 뷰티 전자상거래 플랫폼입니다. 모바일 웹 환경을 네이티브 앱 환경에 최대한 가깝게 만드는 것을 목표로 합니다. 이전에는 전환 애니메이션을 구현하려고 할 때 복잡한 맞춤 JavaScript를 작성하는 데 어려움을 겪었습니다. 이는 웹사이트 실적에도 미미한 영향을 미쳤습니다.
Nykaa가 뷰 전환을 구현한 이유는 무엇인가요?
뷰 전환이 도입되자 Nykaa 팀은 이러한 전환이 기본적으로 제공되어 성능 비용 부담 없이 페이지 전환의 UX를 크게 개선할 수 있음을 확인했습니다. 니카는 제품 세부정보 페이지에서 제품 등록정보 페이지로 전환하기 위해 보기 전환을 많이 사용하고 있습니다.
구현 관련 기술 세부정보
니카는 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의 앱 책임자인 수닛 진달은 보기 전환의 가장 큰 이점은 '속도에 대한 인식'이라고 말했습니다. 니카는 쉬머 효과를 사용하여 콘텐츠가 백엔드에서 로드되기를 기다렸지만, 쉬머 효과를 표시해도 사용자가 콘텐츠가 로드될 때까지 기다려야 하는 시간을 알 수 없다는 것을 알게 되었습니다. 뷰 전환을 사용하면 전환 자체에서 '무슨 일이 일어날 것인가'라는 느낌을 사용자에게 제공하였고 이로 인해 대기해야 하는 상황이 줄어들었습니다.
Nykaa는 뷰 전환을 통해 웹페이지 UX가 새롭게 향상된 것을 매우 만족스러워했으며, 다른 페이지에도 뷰 전환을 구현할 준비를 했습니다. 다음은 디자인 부문 부사장의 말입니다.
Google은 적절한 향후 모든 기능에서 뷰 전환을 구현하도록 최선을 다하고 있습니다. 일부 분야는 이미 파악되었으며 담당 팀에서는 해당 분야에 적극적으로 투자하고 있습니다.
크리슈나 R V, 디자인 부사장
PolicyBazaar
구르가온에 본사를 둔 PolicyBazaar는 인도 최대의 보험 애그리게이터이자 다국적 금융 기술 회사입니다.
PolicyBazaar에서 뷰 전환을 구현한 이유는 무엇인가요?
웹을 우선으로 하는 기업인 PolicyBazaar 팀은 항상 중요한 사용자 여정에서 최고의 사용자 경험을 제공하는 것을 목표로 삼아 왔습니다. View Transitions API를 출시하기 전이라도 자바스크립트 및 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는 뛰어난 매끄러움으로 이를 달성하는 데 중요한 도구임이 입증되었습니다. Google Play가 개발자 커뮤니티 및 사용자 사이에서 광범위하게 호응을 얻으면서 Google팀이 열정을 갖게 되었습니다. 다양한 POD에 대한 통합을 고려할 때 만족도 수준과 운영 우수성에 광범위하게 긍정적인 영향을 미칠 것으로 예상됩니다.
사우라브 티와리 (PolicyBazaar CTO)
다음 단계
뷰 전환을 사용해 보고 싶으신가요? 자세한 내용을 알아볼 수 있는 리소스는 다음과 같습니다.