본문으로 건너뛰기
J
피드

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

frontend 약 5분
tags
#css#scroll-driven-animations#scroll-snap#performance#accessibility
vote
0
댓글
북마크
원문 보기

CSS Scroll Snap과 Scroll-Driven Animations API를 조합하면 JS 한 줄 없이 Apple의 Cover Flow를 재현할 수 있음. GPU 가속, 메인 스레드 밖 실행으로 성능도 뛰어남.

  • 1

    CSS view timeline으로 각 엘리먼트의 스크롤 위치 기반 3D 애니메이션 구현

  • 2

    내부 img에만 transform 적용하는 트릭으로 레이아웃 안정성 확보

  • 3

    60fps 이상 성능, 접근성(키보드/스크린리더/reduce motion) 고려 필요

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)

💡팁

> 3D 트랜스폼을 <li> 대신 내부 <img>에 적용하는 게 핵심 트릭임. <li> 자체를 변환하면 바운딩 박스가 바뀌면서 스크롤 너비에 영향을 줘서 화면이 덜덜 떨림. 내부 엘리먼트만 변환하면 레이아웃은 안정적으로 유지됨

성능과 접근성

  • 성능 면에서 엄청난 이점이 있음. 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년 웹 기술의 현주소임

GSAP이나 jQuery로 하던 걸 CSS 몇 줄로 해결하는 시대. Scroll-Driven Animations는 Cover Flow 너머 패럴랙스, 프로그레스바 등에도 활용 가능.

prev

이전 기사 (P)

next

다음 기사 (N)

댓글

댓글

댓글을 불러오는 중...

관련 기사

frontend

미래적인 텍스트를 만드는 6가지 영화 로고 꼼수

2016년에 나온 타이포그래피 글이지만, SF 영화 로고가 왜 비슷하게 ‘미래적’으로 보이는지 꽤 웃기고 정확하게 해부한다. 기울임, 각진 곡선, V자 형태, 글자 결합, 일부 획 제거, 금속 질감과 별 배경까지 더하면 대충 2092년 느낌이 난다는 식이다.

frontend

브라우저에서 진짜 하늘과 행성 대기를 렌더링하는 법

이 글은 파란 하늘, 노을, 행성 대기를 셰이더로 렌더링하는 과정을 단계별로 파고든다. Rayleigh 산란, Mie 산란, 오존 흡수, 깊이 버퍼, 행성 스케일 처리, LUT 기반 최적화까지 다뤄서 WebGL·React Three Fiber 쪽 개발자에게 꽤 실전적인 자료다.

frontend

블로그 글이 현재 시간을 알려준다? CDN 헤더로 만든 서버리스 시계 실험

이 글은 Cloudflare CDN의 응답 헤더와 브라우저 PerformanceResourceTiming API를 이용해 웹페이지 안에서 현재 시간을 추정하는 실험을 다룬다. NTP처럼 전용 시간 서버를 운영하지 않고도 CDN이 사실상 시간 기준점처럼 동작할 수 있다는 아이디어다. 실제 테스트에서는 웹 시계 오차 범위가 약 60ms로, ntpdig의 약 6ms보다 한 자릿수 정도 덜 정밀했다.

frontend

쿼리 스트링 차단 선언한 개인 웹사이트 운영자의 빡침

한 개인 웹사이트 운영자가 자기 사이트 URL에 임의의 쿼리 스트링을 붙이는 관행을 아예 막겠다고 선언했다. 특히 ref, UTM 같은 추적 파라미터를 남의 URL에 붙이는 건 사용자와 사이트 운영자 모두에게 무례한 일이라는 주장이다.

frontend

번은 좋은데, 이제 앤트로픽 품에 있어서 불안하다는 얘기

글쓴이는 번이 빠르고 실용적인 자바스크립트 런타임이라는 점은 인정하지만, 앤트로픽 인수 이후 장기적인 방향을 신뢰하기 어려워졌다고 말한다. 특히 클로드 코드의 품질 저하, 과금 혼란, 서드파티 하네스 제한 사례를 보며 번도 같은 제품 운영 방식에 휘말릴 수 있다고 우려한다.