캐러셀 구현하기 CSS scroll-snap-*

웹 혹은 앱을 개발하다보면 캐러셀 구조를 구현하게 되는 경우가 종종 있습니다. 슬라이더라고도 부릅니다.

좌우로 슬라이드하며 상품을 보여주기도 하고 앨범을 넘겨가며 보기도 하는 등 다양한 곳에 쓰입니다.

 

캐러셀은 보통 JavaScript를 통해 구현하고는 합니다.

그러다 CSS의 이 속성을 알게 되었습니다. scroll-snap-type 

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type

scroll-snap-type - CSS: Cascading Style Sheets | MDN

scroll-snap-type 브라우저 호환

 

스크롤-스냅-* 속성들을 이용하면 매우 간단하게 캐러셀을 구현할 수 있습니다.

 

먼저 snap, 스냅이 어떤 동작인지를 알아보자면, 스냅 동작은 스크롤이 특정 지점에 달라붙거나 고정되는 동작을 의미합니다.

스크롤-스냅은 브라우저에 의해 스크롤의 속도와 방향이 계산되고 스크롤의 종료 시 snap point를 찾아 스크롤을 자동으로 살짝 조정하게 합니다. 이 과정에서 브라우저에 의해 자동으로 부드러운 애니메이션이 적용됩니다.

scroll-snap에는 세가지 속성이 있습니다.

scroll-snap-type: 스냅 동작의 축과 엄격성을 정의합니다. - x, y / mandatory, proximity

  mandatory: 스크롤이 항상 가까운 스냅 포인트에 정확히 멈추게 함

  proximity: 스크롤이 스냅 포인트 근처에서 멈출 경우에만 스냅 동작이 발생

 

scroll-snap-align: 각 자식 요소의 스냅 정렬 위치를 정의합니다. - none, start, center, end

  none: 기본값, 스냅 정렬을 적용하지 않음

  start: 요소의 시작 가장자리를 스냅 포인트에 정렬

  center: 요소의 중앙을 스냅 포인트에 정렬 (중앙이 스크롤 컨테이너의 중앙과 일치하도록 정렬됨)

  end: 요소의 끝 가장자리를 스냅 포인트에 정렬 

 

scroll-snap-stop: 스크롤 동작 중 중간의 스냅 포인트를 건너뛸 수 있는지를 결정합니다. - normal, always

  normal: 기본값, 스크롤 동작 중 중간의 스냅 포인트를 건너뛸 수 있음 (사용자가 보고 싶은 항목으로 빠르게 넘어갈 수 있습니다)

  always: 스크롤 시 모든 스냅 포인트에 반드시 멈추게 함 (중요 콘텐츠들을 모두 볼 수 있게 합니다)

 

<div class="carousel">
      <img
        class="carousel-item"
        src="https://picsum.photos/id/230/300/200"
        alt="Image 1"
      />
      <img
        class="carousel-item feature"
        src="https://picsum.photos/id/235/300/200"
        alt="Featured Image"
      />
      <img
        class="carousel-item"
        src="https://picsum.photos/id/230/300/200"
        alt="Image 3"
      />
      <img
        class="carousel-item"
        src="https://picsum.photos/id/230/300/200"
        alt="Image 4"
      />
      <img
        class="carousel-item"
        src="https://picsum.photos/id/230/300/200"
        alt="Image 5"
      />
</div>

.carousel {
  scroll-snap-type: x mandatory;
}

.carousel-item {
  scroll-snap-align: center; /* 기본값 */
}

.carousel-item.feature {
  scroll-snap-align: start; /* 특정 항목에 다른 정렬 적용 */
}

 

위는 스크롤-스냅 속성을 사용하기 위해 구성한 html과 css의 예시입니다. 다음 코드샌드박스에서 실제 동작을 확인할 수 있습니다.

feature 클래스가 붙은 이미지는 start 지점에서 멈추고, 나머지는 해당 이미지가 컨테이너의 중앙에 올 때 멈추는 것을 확인할 수 있습니다.

https://codesandbox.io/p/sandbox/carousel-snap-xph2rs

https://codesandbox.io/p/sandbox/carousel-snap-xph2rs

 

 

이처럼 CSS의 scroll-snap 속성을 사용하면 JavaScript를 사용하지 않고 간단하고 효과적인 캐러셀의 구현이 가능합니다. 물론, 캐러셀의 동작에 따라 로그를 남긴다거나, 특정 동작을 실행하거나 하려면 추가적인 JavaScript의 사용이 필요하기에 필요에 따라 방향을 선택하는 것이 필요할 것입니다.