Astro View Transitions

Astro View Transitions API를 활용하여 웹사이트 페이지 간의 끊임없는 새로고침을 제거하고 모바일 앱처럼 부드러운 사용자 경험을 제공합니다. 📱
2025년 기준 95% 이상의 브라우저에서 호환되며, 호환되지 않는 브라우저를 위한 기본 폴백 기능도 제공되어 광범위하게 적용 가능합니다. 🌐
layout.astro 파일의 <head> 태그 내에 <ViewTransitions /> 컴포넌트를 추가하는 것만으로 페이지 전환 효과를 쉽게 적용할 수 있습니다. ✨
기본적으로 부드러운 페이드 전환 효과를 제공하며, 링크에 마우스를 올리면 페이지를 미리 가져와(prefetch) 즉각적인 로딩 속도를 보장하여 사용자 경험을 향상시킵니다. ⚡
transition:animate 디렉티브를 사용하여 fade, initial, none, slide 등 다양한 애니메이션 효과로 기본 전환 동작을 커스터마이징할 수 있습니다. 🎨
transition:name 디렉티브를 통해 특정 요소(예: 이미지)가 페이지 전환 시 부드럽게 이동하는 공유 요소 전환을 구현하여 시각적 연속성을 제공합니다. 🖼️
구현된 모든 전환 효과는 스크린 리더 사용자에게도 접근성이 보장되어 포괄적인 웹 환경을 지원합니다. 👂

로딩 중...