Swiper 사용 후기 (feat. 테일윈드)

 

React에서 많이 사용하는 Swiper는 이미지 캐러셀을 쉽게 구현할 수 있도록 도와주는 라이브러리이다.

현재 프로젝트에서 Tailwind CSS와 함께 Swiper를 사용하면서 느낀 장단점을 정리해보았다.

 

 

---

 

장점

1. 사용이 간편하다

Swiper는 기본적인 설정만으로도 쉽게 캐러셀을 구현할 수 있다.

캐러셀이 필요한 부분에 <Swiper>를 생성하고, 그 내부에 <SwiperSlide>를 추가하면 된다.

 

<Swiper>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
</Swiper>

 

 

 

2. 문서화가 잘되어있다

Swiper는 문서가 잘 정리되어 있고, 다양한 예제도 제공되어 있어 처음 사용하는 사람도 쉽게 접근할 수 있다.

Swiper - The Most Modern Mobile Touch Slider

Swiper - The Most Modern Mobile Touch Slider

 

 

 

단점

1. Tailwind와 호환성이 높지 않다

Swiper는 Tailwind CSS와 함께 사용하기에 불편한 부분이 있다.

테일윈드의 경우 클래스명을 통해 간단하게 스타일을 정의할 수 있는 점이 장점이 있다. 하지만 Swiper는 CSS 작업 시.css 파일을 생성해 직접 스타일을 변경하거나 인라인 스타일을 사용해야 하는 경우가 많다.

 

예를 들어:

.swiper{}

<Swiper
  ...
  style={{ width: '350px' }}
>

이런 점 때문에 테일윈드의 간편함과는 다소 거리가 있다.

 

 

 

2. 다른 UI 라이브러리와 마찬가지로 배우는데 시간이 필요하다

Swiper는 다양한 설정을 제공하지만, 처음 사용하는 경우 설정 항목들을 익히는 데 시간이 필요하다.

<Swiper
    spaceBetween={10}  // <- 이런 내부 설정들이 많다.
    centeredSlides
    pagination={{clickable: true,}}
    modules={[Autoplay]}
    autoplay={{ delay: 4000, disableOnInteraction: false }}
    loop
    slidesPerView={1}
    grabCursor
    onSlideChange={handleSlideChange}
    style={{ width: '350px' }}
>...</Swiper>

하지만 이 부분은 어쩔 수 없다고 생각한다. 오히려 장점이 될 수도..?

 

 

 

3. 테스트 설정에 추가 작업이 필요하다

현재 프로젝트에서 Jest로 컴포넌트 테스트를 진행 중인데, Swiper가 포함된 테스트를 진행하려면 예외 설정을 추가로 해야했다. (그냥 내가 Jest에 익숙하지 않아서 그런 것일 수도 있다.)

물론 Swiper만의 문제라기보다는 UI 라이브러리들의 공통적인 어려움일 수 있다.

하지만 이 작업이 나를 매우 힘들게 한다.😥

 

 

---

 

결론

전체적으로 Tailwind CSS를 사용한다면 Swiper 대신 다른 라이브러리를 추천하고 싶다. 다른 라이브러리는 나도 모르겠다. (저에게 추천해주세요..ㅎㅎ)

 

가장 큰 이유는 css를 별도로 작성해야 하는 점이 너무 불편하다. 현재 프로젝트에서도 캐러셀을 직접 구현해볼까 고민 중이다.

 

추가로 Tailwind CSS로 캐러셀을 구현하고 싶다면, 아래 문서를 참고하길 추천한다.

Scroll Snap Type - Tailwind CSS

Scroll Snap Type - Tailwind CSS