[scroll-snap] JS 없이 카드가 딱 멈추는 스냅 캐러셀

한 줄 요약 - 가로 스크롤 영역에 scroll-snap-type 한 줄, 카드마다 scroll-snap-align 한 줄이면 스크롤이 멈출 때 카드가 가장 가까운 자리에 '딱' 달라붙는 스냅 캐러셀이 됩니다.

이럴 때 필요해요

상품 카드를 옆으로 넘기는 갤러리나 이미지 슬라이더를 만들 때, 보통 캐러셀 라이브러리부터 찾게 됩니다. 그런데 단순히 '한 칸씩 깔끔하게 멈추기'가 목적이라면 무거운 라이브러리가 과합니다. 그냥 두면 스크롤이 카드 중간에서 어정쩡하게 멈춰 절반만 보이죠. scroll-snap(스크롤이 정해진 지점에 자석처럼 붙는 CSS 기능)은 이 문제를 CSS 몇 줄로 해결합니다.

어떻게 동작하나

1. 카드들을 가로로 늘어놓고 영역에 overflow-x: auto 를 줘서 옆으로 스크롤되게 만듭니다.

2. 그 영역에 scroll-snap-type: x mandatory 를 주면, 스크롤을 멈추는 순간 가장 가까운 스냅 지점으로 자동으로 끌려갑니다.

3. 각 카드에 scroll-snap-align: center(또는 start) 를 줘서 '카드의 어느 부분을 기준선에 맞출지'를 정합니다. center면 카드 가운데가 영역 중앙에 옵니다.

핵심은 이거예요

멈추는 '위치 계산'을 브라우저가 다 해 준다는 점입니다. 화살표 버튼도 scrollBy 로 '밀기'만 시키면, 어디에 딱 멈출지는 CSS scroll-snap이 알아서 정렬합니다. JS는 거의 0이고 터치/트랙패드 관성 스크롤도 그대로 살아 있습니다.

놓치기 쉬운 것

• mandatory는 항상 한 칸에 강제로 정렬해 단호하지만, 카드보다 긴 콘텐츠에선 중간을 읽기 어려울 수 있어요. 그럴 땐 proximity(가까울 때만 붙음)가 자연스럽습니다.

• center 정렬을 쓰면 첫/끝 카드가 중앙까지 못 오는데, 트랙에 scroll-padding(또는 scroll-margin)으로 좌우 여백을 줘야 끝 카드도 가운데로 스냅됩니다.

• 빠르게 튕겼을 때 카드를 건너뛰지 않게 하려면 scroll-snap-stop: always 를 더하세요.

이런 곳에 써요

• 쇼핑몰 상품 추천 줄, 모바일 홈의 옆으로 넘기는 배너 카드

• 온보딩 화면처럼 한 장씩 넘겨 보는 풀스크린 슬라이드