이 구현의 핵심은 Turbo Streams의 렌더링 파이프라인을 커스터마이징하여 View Transitions를 통합하는 것입니다.
시작점
- 기본 구성:
id가 “tickets”인 목록과 “Load More” 버튼을 포함하는<form>으로 시작합니다. - 서버 응답: 폼은
/경로로 요청을 보내며, 이는 Ruby on Rails 컨트롤러의 동작을 모방하여 새로운 티켓 항목을append하는<turbo-stream>응답을 반환합니다. - CSS 정의:
styles.css에는new-ticket이라는view-transition-name이 정의되어 있어, 새로운 요소가 오른쪽에서 슬라이드 인(slide-in)되는 애니메이션을 담당합니다.
도전 과제 및 해결 방안
turbo:before-stream-render이벤트: Turbo Streams는 이 이벤트를 발생시켜 렌더링 메서드를 커스터마이징할 기회를 제공합니다.- 렌더링 메서드 오버라이드: 이벤트 리스너 내에서 기존 렌더링 로직을 오버라이드하고, 새로운 콘텐츠가 DOM에 추가되기 전에
document.startViewTransition()을 수동으로 호출하여 전환을 시작해야 합니다. 이는 브라우저의 기본 탐색이 아닌, DOM 직접 조작 시 View Transitions를 활성화하는 핵심 단계입니다. view-transition-name고유성:view-transition-name은 페이지 내 모든 요소에 대해 고유해야 합니다. 이를 통해 브라우저는 특정 요소의 이전 및 새 상태를 정확히 매핑하여 부드러운 전환 효과를 적용할 수 있습니다. 각 새로 추가되는 티켓 항목에 동적으로 고유한 이름을 부여하여 개별적인 애니메이션을 가능하게 합니다.
이 접근 방식은 Turbo Streams의 동적 콘텐츠 업데이트에 View Transitions의 시각적 부드러움을 결합하여 사용자 경험을 효과적으로 향상시킵니다.