embla-carousel

최근에 진행한 프로젝트에서 여러 캐러셀을 구현할 일이 있었다.
일정이 촉박했고, 세상에는 좋은 오픈소스들이 많이 있기에 당연한 수순으로 캐러셀 라이브러리를 찾아보게 되었다.

이전에 사용했던 타 라이브러리를 채택하려니, 기존에 만들어둔 기능과 충돌하거나 디자인 시안대로 커스텀하기가 까다로워서 고민하던 찰나에 팀원 분이 소개해주신 라이브러리가 embla-carousel이었다.

공식 문서 https://www.embla-carousel.com/
github https://github.com/davidjerleke/embla-carousel

설치 yarn add embla-carousel-react

맨 처음 공식 문서를 열자마자 떠올린 감상은 와... 깔끔하다... 였던 것 같다.

그리고 실제 사용 체감도 꽤 깔끔했다. 늘 <Carousel...> 뭐 대충 이렇게 생긴 컴포넌트로 감싸서 작성하는 캐러셀만 사용하다가 ref를 사용하는 캐러셀을 쓰니 처음에는 낯설긴 했지만, 그리 어렵지 않기에 금세 적응할 수 있었다.

2019년에 처음으로 릴리즈된 라이브러리로 보이는데, 오늘인 24년 8월 9일 기준 지난주에도 릴리즈 흔적이 있는 것을 보니 꾸준히 업데이트되고 있는 듯했다.

기본 구조는 다음과 같다.

import React from 'react'
import useEmblaCarousel from 'embla-carousel-react'

export function EmblaCarousel() {
  const [emblaRef] = useEmblaCarousel()

  return (
    <div className="embla" ref={emblaRef}>
      <div className="embla__container">
        <div className="embla__slide">Slide 1</div>
        <div className="embla__slide">Slide 2</div>
        <div className="embla__slide">Slide 3</div>
      </div>
    </div>
  )
}

carousel에 대한 스타일링을 적용하는 것도 간편하고, 자유도도 높다. 다음과 같이 class에 스타일을 지정하면 끝이다.

.embla {
  overflow: hidden;
}
.embla__container {
  display: flex;
}
.embla__slide {
  flex: 0 0 100%; // flex basis 값으로 너비 설정
  min-width: 0;
}

캐러셀의 꽃인 Autoplay 기능 또한 플러그인을 통해 제공한다. 비단 Autoplay뿐만 아니라 Auto scroll, Fade 등등의 기능도 제공하고 있다. 내가 써본 것은 Autoplay뿐이지만 다른 기능들도 매우 유용해 보임.

import React, { useEffect } from 'react'
import useEmblaCarousel from 'embla-carousel-react'
import Autoplay from 'embla-carousel-autoplay'

export function EmblaCarousel() {
  const [emblaRef] = useEmblaCarousel({ loop: false }, [Autoplay()])

  return (
    <div className="embla" ref={emblaRef}>
      <div className="embla__container">
        <div className="embla__slide">Slide 1</div>
        <div className="embla__slide">Slide 2</div>
        <div className="embla__slide">Slide 3</div>
      </div>
    </div>
  )
}

공식 문서를 보면 next / prev 버튼 (https://www.embla-carousel.com/guides/previous-and-next-buttons/), dot controll에 대한 예제 (https://www.embla-carousel.com/guides/previous-and-next-buttons/) 또한 존재한다.

해당 라이브러리를 이용하여 다양한 양상의 캐러셀을 만들었다. 양 옆 컨텐츠가 노출되는 캐러셀, 한 번에 하나의 컨텐츠만이 보이는 캐러셀, controll Dot이 붙은 것과 붙지 않은 것 그리고 캐러셀을 응용한 튜토리얼 페이지 등등...
사용법만 한 번 익히면 안 될 게 없었던 것 같다. 새로이 만들고 싶은 게 있어도 공식 문서에 워낙 예제가 잘 되어있는지라 참고하기도 편하다.

다음에도 캐러셀을 구현할 일이 생긴다면 embla-carousel을 가장 먼저 떠올리게 될 것 같다.