스크롤 UI 구현하기 : Swiper Free Mode VS. overflow-x: scroll

FE 개발을 하다 보면 좌우로 스크롤해 카테고리나 메뉴를 선택하는 등의 UI를 구현해야 할 때가 있는데요,

이번 글에서는 좌우 스크롤 UI를 구현할 때 선택할 수 있는 두 가지 방법을 간단히 소개해보려 합니다.

1. CSS의 overflow-x: scroll 속성 사용하기

아마 좌우 스크롤 UI를 구현할 때는 overflow-x: scroll을 사용하는 것이 가장 쉽고 널리 알려진 방법일 것이라 생각합니다.

.list {
  list-style: none;
  display: flex;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  pointer: grab;
}

 

마크업을 간단히 진행한 뒤, CSS만으로 좌우 스크롤 UI를 구현한 모습입니다.

UI를 조작하는 데에는 아무런 지장이 없지만, 스크롤이 좌우 모서리의 끝에 도달하면 더이상 스크롤을 할 수 없다는 특징이 있습니다.

💡 웹뷰 환경에서는 스크롤바가 나타나지 않기 때문에 별다른 작업이 필요하지 않습니다.
만약 PC 환경에서 스크롤바를 감출 방법이 필요하다면 W3Schools 의 글을 참고해 주세요.

2. Swiper.js의 Free Mode 사용하기

두 번째 방법은 Swiper의 Freemode 모듈을 사용하는 것입니다.

[코드 예시]

import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import { FreeMode } from "swiper/modules";

const categoryList = [
  "일식",
  "중식",
  "한식",
  "양식",
  "햄버거",
  "음료",
  "족발",
  "찜/구이",
];

const SwiperList = () => {
  return (
    <>
      <div className="title">Swiper Free Mode</div>
      <Swiper
        slidesPerView={'auto'} // 각 .swiper-slide의 너비는 고정값으로 잡아 주세요
        spaceBetween={8}
        freeMode={true}
        modules={[FreeMode]}
        className="list"
      >
        {categoryList.map((category) => {
          return (
            <SwiperSlide className="list-item" key={category}>
              {category}
            </SwiperSlide>
          );
        })}
      </Swiper>
    </>
  );
};

export default SwiperList;

Freemode 모듈은 overflow-x: scroll과 동일한 효과를 제공하면서 드래그 제스처에 자연스럽게 반응하지만,

스크롤이 좌우 모서리의 끝에 도달한 뒤에도 영역을 더 스크롤할 수 있는 관성 효과를 제공합니다.

마치며

얼핏 "이런 사소한 UI까지 스와이퍼를 써야 해?" 라고 생각하실 수도 있지만,

한편으로는 약간의 시간을 더 투자하면 "내가 드래그한 만큼 UI가 움직인다" 는 직관적인 경험을 줄 수도 있을 것으로 기대합니다.

(물론 디자이너와 사전에 상의해 보는 것을 권해드립니다 😄)

 

상황에 따라 적절한 방법을 선택하실 수 있길 바라며, 즐거운 코딩 하세요!