사용자 경험(UX)은 웹사이트 성공의 중요한 요소로 페이지 전환 될 때 갑작스러운 변화는 사용자에게 혼란을 줄 수 있습니다. 이를 해결하기 위해 CSS 애니메이션과 Page Transitions API를 결합하여 부드러운 화면 전환 효과를 구현할 수 있습니다. 이 글에서는 이러한 기술들을 활용해 UX를 향상시키는 방법과 실제 예제를 소개합니다.
1. Page Transitions API란?
Page Transitions API는 페이지 로드와 전환 시 애니메이션을 부드럽게 처리하도록 설계된 새로운 웹 표준입니다. 이 API를 사용하면 페이지 A에서 B로 이동할 때 단절감을 줄이고 콘텐츠 변경을 매끄럽게 연결할 수 있습니다.
주요 특징
- SPA와 유사한 전환 효과: 전통적인 페이지 이동에도 SPA(Single Page Application) 수준의 부드러운 전환 제공.
- 브라우저 최적화: 애니메이션 중 렌더링 최적화로 성능 유지.
- CSS와의 완벽한 호환: 커스텀 애니메이션 정의 가능.
2. 기본 구현 원리
Page Transitions API는 브라우저가 페이지 전환 이벤트를 감지하고, CSS 애니메이션을 통해 시각적 효과를 추가하는 방식으로 작동합니다.
HTML 기본 구조
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <a href="page2.html" class="transition-link">Go to Page 2</a> </body> </html>
CSS 전환 효과 정의
Page Transitions API는 CSS에서 @keyframes와 animation 속성을 활용해 애니메이션 효과를 추가할 수 있습니다.
/* 전환 효과 정의 */
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 애니메이션 설정 */
body {
animation-duration: 0.5s;
animation-fill-mode: both;
}
body[transition="out"] {
animation-name: fade-out;
}
body[transition="in"] {
animation-name: fade-in;
}
JavaScript로 API 사용하기
// 전환 이벤트 감지 및 처리
document.querySelectorAll('.transition-link').forEach(link => {
link.addEventListener('click', e => {
e.preventDefault(); // 기본 동작 막기
document.body.setAttribute('transition', 'out'); // fade-out 애니메이션 실행
setTimeout(() => {
window.location.href = link.href; // 페이지 이동
}, 500); // 애니메이션 시간과 일치시킴
});
});
// 페이지 로드 시 fade-in 애니메이션 실행
window.addEventListener('load', () => {
document.body.setAttribute('transition', 'in');
});
3. CSS 애니메이션으로 기본 페이지 전환 효과 구현
CSS만으로도 간단한 전환 효과를 추가할 수 있습니다.
페이지 A와 B의 HTML 구조
<!-- page1.html --> <body class="page page-a"> <a href="page2.html" class="link">Go to Page 2</a> </body> <!-- page2.html --> <body class="page page-b"> <a href="page1.html" class="link">Go to Page 1</a> </body>
CSS 애니메이션 스타일
.page {
transition: opacity 0.5s ease, transform 0.5s ease;
}
.page-a {
opacity: 1;
transform: translateY(0);
}
.page-b {
opacity: 0;
transform: translateY(100%);
}
4. Page Transitions API와 CSS 결합
Page Transitions API는 브라우저가 애니메이션 전환 시 시작 및 종료 상태를 자동으로 처리하도록 도와줍니다.
JavaScript 코드 예제
if (document.startViewTransition) {
document.querySelectorAll('.link').forEach(link => {
link.addEventListener('click', e => {
e.preventDefault();
const url = link.href;
// 전환 애니메이션 시작
document.startViewTransition(() => {
return fetch(url)
.then(res => res.text())
.then(html => {
document.body.innerHTML = new DOMParser()
.parseFromString(html, 'text/html')
.body.innerHTML;
});
});
});
});
}
CSS와의 통합
@keyframes slide-out {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
@keyframes slide-in {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
body::view-transition-old {
animation: slide-out 0.5s ease-out;
}
body::view-transition-new {
animation: slide-in 0.5s ease-out;
}
5. 부드러운 페이지 전환 구현 시의 고려사항
- 속도와 타이밍: 애니메이션이 너무 길거나 복잡하면 사용자에게 불편함을 줄 수 있으므로 적정 속도를 설정하세요.
- 접근성 고려: 전환 효과를 시각적으로만 제공하지 말고 ARIA 속성 등을 통해 스크린 리더 사용자에게도 안내하세요.
- 브라우저 호환성: Page Transitions API는 최신 브라우저에서만 지원되므로 적절한 폴백을 준비해야 합니다.
CSS와 Page Transitions API를 결합하면 기존의 갑작스러운 페이지 전환을 부드럽게 개선할 수 있습니다. 이를 통해 사용자 경험을 한층 더 향상시키고, 웹사이트의 프로페셔널한 이미지를 구축할 수 있습니다. 이 글에서 소개한 기술을 활용해 더 나은 페이지 전환 효과를 구현해 보세요!
