CSS Scroll-Snap API로 자바스크립트 없이 이미지 캐러셀 구현하기

Swiper.js의 cssMode가 내부적으로 사용하는 Scroll-Snap API의 원리를 바탕으로, 자바스크립트 없이 순수 CSS만으로 스크롤 보정 효과를 구현하는 과정을 다룬다.

문제 상황 터치 스와이프나 마우스 휠 스크롤 시 스크롤 종료 위치가 이미지 영역에 정확히 맞지 않아 사용자 경험이 저하될 수 있다. Scroll-Snap API는 컨테이너가 특정 자식 요소에 정확히 위치하도록 제어된 스크롤 환경을 제공한다.

구현 방법

1. 스크롤 컨테이너 설정: scroll-snap-type 속성을 사용하여 스냅 축(x, y)과 엄격도(mandatory, proximity)를 지정한다. mandatory는 반드시 스냅을 발생시키고, proximity는 스냅 지점에 가까울 때만 스냅한다.
2. 자식 요소 정렬: scroll-snap-align 속성을 사용하여 스냅 정렬 방식(start, center, end)을 결정한다. start는 컨테이너 왼쪽과 요소 왼쪽이 일치하도록 정렬한다.

활용 이 방식을 통해 이미지 캐러셀뿐만 아니라 페이지 스크롤, 드롭다운 등 다양한 UI에서 제어된 스크롤 경험을 제공할 수 있다.