[CSS] 스크롤 스냅(Scroll Snap)과 부드러운 스크롤

이번 포스팅에서는 [CSS 인터랙션] 파트의 세부 주제인 스크롤 경험(UX) 개선 기술에 대하여 상세히 알아보겠습니다.

1. 자바스크립트 없는 스와이퍼(Swiper) 캐러셀: Scroll Snap

모바일에서 옆으로 넘길 때 아이템이 중간에 걸치지 않고 자석처럼 딱딱 맞춰지게 하려면 무거운 캐러셀 라이브러리 대신 CSS Scroll Snap을 사용하세요.

.slider-container {
  display: flex;
  overflow-x: auto;
  /* 가로축으로 스냅 설정, mandatory(강제 정렬) 혹은 proximity(느슨한 정렬) */
  scroll-snap-type: x mandatory; 
}
.slide-item {
  flex: 0 0 100%; /* 너비를 컨테이너에 꽉 채움 */
  /* 아이템이 어느 지점을 기준으로 부모에 붙을지 설정 (시작, 중앙, 끝) */
  scroll-snap-align: start; 
}

2. 네비게이션 앵커 부드러운 이동: scroll-behavior

웹사이트 최상단으로 이동하는 버튼이나, 목차를 클릭해 해당 챕터로 점프(<a href="#section1">)할 때 뚝 끊기듯 이동하지 않고 스르륵 부드럽게 스크롤 되도록 만듭니다.

html {
  /* JS의 window.scrollTo({ behavior: 'smooth' }) 와 동일한 효과 */
  scroll-behavior: smooth; 
  /* 헤더가 sticky로 고정되어 있다면, 앵커 이동 시 헤더 높이만큼 덜 이동하게 보정 */
  scroll-padding-top: 80px; 
}

---

지금까지 CSS만으로 구현하는 Scroll Snap 캐러셀과 부드러운 이동에 대해 살펴보았습니다. 네이티브 앱 부럽지 않은 유려한 모바일 웹 경험을 선사해 보세요.