Apple Cover Flow를 JS 없이 순수 CSS만으로 재현하기

Cover Flow, 이제 순수 CSS만으로 된다

• Apple이 2006년 iTunes 7에 도입해서 iPod, Finder까지 퍼졌던 그 Cover Flow를 HTML + CSS만으로 재현할 수 있게 됨. JS 한 줄 없이. CSS Scroll Snap + Scroll-Driven Animations API 조합 덕분임

• 역사적으로 Cover Flow 웹 구현은 고통의 연속이었음. Flash 시절에는 ActionScript로, CSS3 나오고 나서는 jQuery 플러그인이나 직접 requestAnimationFrame 돌리면서 rotateY/translateX 수동 계산. 심지어 WebGL/Canvas까지 동원한 사례도 있었음

핵심 기술: Scroll Snap + View Timeline

• CSS Scroll Snap: scroll-snap-type: x mandatory로 수평 스크롤 컨테이너에서 아이템이 항상 중앙에 딱 맞게 스냅되게 만듦. JS 없이 기본 캐러셀 인터랙션이 완성됨

• CSS Scroll-Driven Animations: 시간 기반이 아니라 스크롤 위치 기반으로 애니메이션을 구동하는 새로운 CSS 기능. view() 함수로 각 엘리먼트가 스크롤 뷰포트에서 어디에 있는지 추적 — 진입 0%, 중앙 50%, 퇴장 100%

• Bramus Van Damme의 순수 CSS 데모가 이 구현의 핵심인데, 구조가 엄청 깔끔함:

  • HTML은 그냥 <ul> 안에 <li><img></li> 나열
  • view-timeline-name: --li-in-and-out-of-view로 각 <li>에 뷰 타임라인 선언
  • z-index 애니메이션: 50% 지점(중앙)에서 z-index: 100으로 올려서 앞으로 튀어나오게
  • 3D 회전 애니메이션: 0%에서 rotateY(-45deg) → 50%에서 rotateY(0) scale(1.5) → 100%에서 rotateY(45deg)

성능과 접근성

• 성능 면에서 엄청난 이점이 있음. Scroll-Driven Animations는 메인 스레드 밖에서 돌아감. transform, opacity만 애니메이션하니까 GPU 가속도 자동으로 먹고, 60fps 이상 나옴. JS로 scroll 이벤트 리스닝하면서 스타일 업데이트하던 시절의 쟁크(jank)와는 차원이 다름

• 접근성도 챙겨야 할 부분이 있음: 스크롤 컨테이너에 tabindex="0" 추가해서 키보드 탐색 가능하게 하고, aria-roledescription="carousel" 지정, 각 이미지에 alt 텍스트 필수, @media (prefers-reduced-motion)으로 애니메이션 축소 대응

• 반사(reflection) 효과는 -webkit-box-reflect로 구현 가능하지만 WebKit/Blink 전용이고 Firefox 미지원. 성능에도 영향을 줄 수 있으니 모바일에서는 끄는 게 나음

• React 버전도 있고 Three.js로 만든 예제도 GitHub에 공개되어 있음. Swiper.js의 Coverflow 모드 같은 유지보수되는 라이브러리도 있지만, 순수 CSS로 이 정도가 된다는 게 2025년 웹 기술의 현주소임