프론트엔드
View Transitions API
두줄요약
View Transitions API로 React 상태 변경 전후 화면을 캡처해 복잡한 화면 전환을 단순화했습니다. 가상 요소와 CSS·Web Animations API로 요소별 슬라이드와 썸네일 이동 효과를 구현했습니다.
문제 상황
- DOM 탐색, 클래스·레퍼런스 관리, 키프레임과 종료 타이밍 제어에 따른 복잡한 화면 전환 구현
- 현재·미래 화면 동시 렌더링과 타임아웃 기반 전환으로 인한 코드 복잡도 및 깜빡임 가능성
구조와 흐름
document.startViewTransition내부 상태 변경 전후 화면 캡처와 기본 fade-in/out 전환::view-transition-old와::view-transition-new가상 요소를 통한 변경 전후 화면 구성view-transition-name으로 요소별 전환 그룹 생성 및 CSS 애니메이션 연결
해결 방법
- React 상태 변경을
startViewTransition으로 감싸 기본 화면 전환 적용 - 제목·설명·카운터에
slideOut·slideIn키프레임을 지정해 요소별 슬라이드 효과 구성 ready에서 선택 썸네일의 위치·크기를 계산해 가상 요소 애니메이션 실행,finished에서 클래스 정리
주의할 점
- 실험적 API이며 당시 기준 Chrome·Edge·Chrome Android 중심의 제한적 브라우저 지원
- 미지원 환경에서는 상태만 변경하는 폴백 처리 필요
- Chrome 개발자 도구 Animations 탭을 통한 전환 시간대 디버깅
