Embla Carousel로 가벼운 반응형 슬라이더 만들기｜Swiper.js 대체 라이브러리

글쓴이 /

웹사이트에서 이미지나 콘텐츠를 슬라이드 형태로 보여줄 때, 가볍고 빠른 라이브러리를 선택하는 것이 중요합니다. Embla Carousel은 불필요한 기능을 최소화한 경량화 슬라이더로, 반응형 웹에 최적화되어 있습니다. 이 글에서는 Embla Carousel을 사용해 간단한 슬라이더를 구현하고, 성능 최적화 팁까지 함께 살펴보겠습니다.
👉 Embla Carousel 샘플 확인하러가기

Embla Carousel이란?

Embla Carousel은 JavaScript 기반의 경량 슬라이더 라이브러리로,
다음과 같은 장점이 있습니다.

  • 경량화: 기본 스크립트 약 20KB 이하로 매우 가볍습니다.
  • 반응형 기본 지원: CSS와 함께 다양한 디바이스에서 최적화 가능
  • 유연성: 플러그인 없이도 드래그, 루프, 자동 슬라이드 등 구현 가능
  • 프레임워크 호환성: React, Vue, Svelte 등 다양한 환경에서 사용 가능

적합한 경우:

  • 이미지를 단순하게 슬라이드만 하고 싶을 때
  • Swiper.js 같은 무거운 라이브러리가 부담스러울 때
  • 모바일 성능을 최우선으로 고려할 때

기본 설치 및 세팅

설치 방법

npm install embla-carousel
Bash

또는 CDN 사용:

<script src="https://unpkg.com/embla-carousel/embla-carousel.umd.js"></script>
JavaScript

기본 HTML 구조

<div class="embla">
  <div class="embla__container">
    <div class="embla__slide">Slide 1</div>
    <div class="embla__slide">Slide 2</div>
    <div class="embla__slide">Slide 3</div>
  </div>
</div>
HTML

CSS 스타일

.embla {
  overflow: hidden;
  width: 100%;
}

.embla__container {
  display: flex;
}

.embla__slide {
  flex: 0 0 100%;
  min-width: 0;
  background: #ddd;
  text-align: center;
  font-size: 1.5rem;
  padding: 40px 0;
}
CSS

JavaScript 초기화

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const emblaNode = document.querySelector('.embla');
    const embla = EmblaCarousel(emblaNode, {
      loop: true,
      align: 'center',
      skipSnaps: false
    });
  });
</script>
JavaScript

활용 예시: 자동 슬라이드 추가하기

Embla Carousel에는 자동 재생 기능이 내장되어 있지 않지만, 간단히 구현할 수 있습니다.

let autoplay;
function startAutoplay() {
  autoplay = setInterval(() => {
    embla.scrollNext();
  }, 3000); // 3초마다 다음 슬라이드로 이동
}

function stopAutoplay() {
  clearInterval(autoplay);
}

startAutoplay();
JavaScript

📌 TIP:

  • 사용자가 드래그를 시작하면 stopAutoplay()로 자동 재생을 멈추고,
  • 드래그가 끝난 후 startAutoplay()를 재시작하면 UX가 더 좋아집니다.

성능 최적화 팁

  • 이미지 Lazy Loading 사용: 첫 화면에서 보이지 않는 이미지는 loading="lazy" 속성 적용
  • CSS 트랜지션 활용: transform, opacity와 같은 GPU 가속 속성만 사용해 부드럽게 동작
  • 필요한 기능만 추가: 플러그인이나 추가 스크립트 최소화
  • 모바일 우선 개발: 모바일 화면에서 드래그 및 터치 반응 속도 확인

마무리

Embla Carousel은 가볍고 유연한 슬라이더로, 간단한 이미지 슬라이드부터 다양한 커스터마이징까지 가능해 반응형 웹사이트에 최적화되어 있습니다.
성능 중심의 웹사이트를 만들고 싶다면 Swiper.js 대신 Embla Carousel을 적극 고려해보세요.

Summary in English

Learn how to create a lightweight, responsive slider using Embla Carousel. Perfect for mobile-first websites, this guide covers installation, setup, and performance optimization tips.

“이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.”

대표 사진: Unsplash의Behnam Norouzi

위로 스크롤