뷰 전환은 웹페이지 또는 애플리케이션 UI의 다양한 상태 간에 애니메이션으로 매끄러운 전환입니다. View Transition API는 이전보다 더 간단하고 효율적으로 이러한 효과를 만들 수 있도록 설계되었습니다. API는 이전의 JavaScript 접근 방식에 비해 다음과 같은 여러 이점을 제공합니다.
- 사용자 환경 개선: 매끄러운 전환과 시각적 신호로 사용자에게 UI 변경사항을 안내하여 탐색이 자연스럽고 불편함을 덜어줍니다.
- 시각적 연속성: 뷰 간에 연속성을 유지하면 인지 부하가 줄어들고 사용자가 애플리케이션 내에서 방향을 유지하는 데 도움이 됩니다.
- 성능: API는 더 원활한 애니메이션을 만들기 위해 기본 스레드 리소스를 가능한 한 적게 사용하려고 합니다.
- 현대적인 디자인: 전환이 개선되어 세련되고 매력적인 사용자 환경이 조성됩니다.
이 게시물은 전자상거래 회사가 새로운 CSS 및 UI 기능을 사용하여 웹사이트를 개선한 방법을 설명하는 시리즈의 일부입니다. 이 도움말에서는 일부 기업에서 View Transition API를 구현하고 이로부터 혜택을 얻은 방법을 살펴봅니다.
redBus
redBus는 항상 네이티브 환경과 웹 환경 간에 최대한 패리티를 만들기 위해 노력해 왔습니다. View Transition 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의 투자 카테고리에서는 '구매해야 하는 이유'와 같은 도움말 요소에 View Transition API를 사용하여 시각적으로 매력적이고 이러한 기능의 사용을 개선했습니다.
뷰 전환을 통합함으로써 다양한 상태에 걸쳐 애니메이션을 관리하는 반복적인 CSS 및 JavaScript 코드를 제거했습니다. 이에 따라 개발 작업이 줄어들고 사용자 환경이 크게 향상되었습니다. — 아만 소니, Policybazaar 기술 책임자
코드
다음 코드는 이전 예와 유사합니다. 한 가지 주의할 점은 ::view-transition-old(root) 및 ::view-transition-new(root)의 기본 스타일과 애니메이션을 재정의할 수 있는 기능입니다. 이 경우 기본 animation-duration가 0.4s로 업데이트되었습니다.
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를 사용할 때 고려할 사항
동일한 페이지에서 여러 뷰 전환 효과를 사용하는 경우 충돌을 방지하기 위해 각 효과나 섹션에 서로 다른 뷰 전환 이름을 사용해야 합니다.
뷰 전환이 활성 (전환 중)인 동안에는 나머지 UI 위에 새 레이어가 추가됩니다. 따라서 마우스 오버 시 전환을 트리거하지 마세요. mouseLeave 이벤트가 예기치 않게 트리거되기 때문입니다 (실제 커서가 아직 움직이지 않을 때).
리소스
- View Transition API를 사용한 원활하고 간단한 전환
- 설명자: MPA의 전환 보기
- 우수사례: 뷰 전환을 통한 원활한 탐색
- 우수사례: 웹으로 무엇을 할 수 있을까요? | 앱과 유사한 탐색 제공
- 상호 운용성 제안서: 여러 브라우저에서 보기 전환 사용 가능
- 버그를 신고하거나 새 기능을 요청하시겠어요? SPA 및 MPA에 관한 의견을 들려주세요.
이 시리즈의 다른 도움말을 통해 전자상거래 회사가 스크롤 기반 애니메이션, 팝오버, 컨테이너 쿼리, has() 선택기와 같은 새로운 CSS 및 UI 기능을 사용하여 얻을 수 있는 이점을 알아보세요.