Embla vs Swiper: 무엇을 만드는지에 따라 선택하세요
둘 다 훌륭하고 활발히 관리되는 캐러셀 엔진이며, 둘 사이의 선택은 정말로 막상막하입니다. 결국 하나의 축으로 귀결됩니다: Swiper는 모든 기능을 내장한 채로 제공하고, Embla는 그 위에 쌓아 올릴 작은 헤드리스 엔진을 제공합니다. 이 페이지는 둘 중 어느 쪽과도 경쟁하지 않는 라이브러리의 메인테이너가 작성했습니다 — 그리고 그것이 맨 아래에 있는 세 번째 답이기도 합니다, 알고 보니 애초에 캐러셀이 아니었던 구성을 위한.
| Embla | Swiper | |
|---|---|---|
| 이것은 무엇인가 | 헤드리스 캐러셀 엔진 | 완전한 슬라이더/캐러셀 프레임워크 |
| 번들 (코어, min+gzip) | ≈8 kB | ≈40 kB (모듈에 따라 증가) |
| 스타일링과 마크업 | 전적으로 여러분의 몫 — 아무것도 제공하지 않음 | 자체 DOM 구조와 CSS, 테마 가능 |
| 이펙트 (페이드, 큐브, 커버플로 등) | 커뮤니티 플러그인 또는 직접 구현 | 내장, 성숙한 상태 |
| 자동재생, 페이지네이션, 썸네일 | 공식 플러그인 | 내장 모듈 |
| React 통합 | 퍼스트클래스 훅 (useEmblaCarousel) | 순수 JS 코어를 감싼 래퍼 컴포넌트 |
| 생태계 참고 | shadcn/ui 캐러셀이 내부적으로 쓰는 엔진 | 웹에서 가장 많이 쓰이는 슬라이더 |
| 적합한 경우 | 커스텀 디자인 캐러셀, 디자인 시스템 | 이미지 중심 슬라이더, 기능이 풍부한 갤러리 |
번들 크기는 대략적인 코어 기준입니다 — 최신 수치는 bundlephobia에서 확인하세요. Swiper는 가져오는 모듈에 따라 커집니다.
디자인 제어가 핵심이라면 Embla를 선택하세요
Embla는 스냅 물리, 드래그 처리, 슬라이드 모델만 제공하고 그 외에는 아무것도 주지 않습니다 — 마크업도, CSS도, 화살표도 없습니다. 그것이 강점입니다: 디자인 시스템 안에서는 눈에 보이는 모든 것이 여러분의 것이고, 엔진이 여러분의 스타일과 절대 부딪히지 않습니다. shadcn/ui가 자신의 캐러셀을 구축하는 기반이 바로 이것이며, 이는 이 라이브러리의 적정 지점을 말해줍니다: 캐러셀 라이브러리처럼 보이는 게 아니라 자기 제품처럼 보이는 캐러셀을 원하는 팀들 말이죠.
대가는 슬라이딩을 넘어서는 모든 기능이 애드온이거나 직접 구현해야 한다는 점입니다: 자동재생과 클래스명은 공식 플러그인으로 제공되지만, 페이지네이션 점, 썸네일, 이펙트는 직접 작성해야 합니다.
기능이 미리 갖춰지길 원한다면 Swiper를 선택하세요
Swiper는 배터리 포함형 답입니다: 페이드, 큐브, 커버플로 이펙트, 가상 슬라이드, 줌, 패럴랙스, 썸네일 갤러리, a11y 모듈, 여러 스타일의 페이지네이션까지 — 직접 만드는 게 아니라 설정만 하면 됩니다. 이번 분기에 제품이 이 중 세 가지가 필요하다면 Swiper는 그 크기값을 몇 배로 뽑아냅니다.
대가는 Embla와 정반대입니다: Swiper의 DOM, 테마를 입혀야 할 CSS, React용으로 감싼 순수 JS 코어를 그대로 물려받아야 하며, 킬로바이트로도 표면적으로도 더 무겁습니다.
둘 중 하나를 고르기 전에 던져야 할 질문
두 라이브러리 모두 여러분이 슬라이드를 보여준다고 가정합니다 — 스냅과 위치 감각을 갖춘 채 한 번에 하나, 또는 한 페이지 분량씩. 진짜 "캐러셀"의 상당수는 전혀 그렇지 않습니다: 카테고리 행, 로고 스트립, 탭 바, 칩 필터 — 사용자가 훑어보며 고르는 클릭 가능한 항목의 행들입니다. 이런 것들은 네이티브 스크롤(모멘텀, 스크롤바, 휠, 접근성까지 공짜로)과 함께 어떤 항목이 화면에 보이는지 아는 것을 원합니다 — 그리고 Embla도 Swiper도 항목별 가시성을 모델링하지 않습니다, 슬라이드는 항목이 아니기 때문입니다.
이런 형태를 위한 세 번째 선택지가 있습니다: react-horizontal-scrolling-menu (≈5.7 kB)는 네이티브 스크롤을 그대로 타면서 useIsVisible, scrollToItem, 그리고 가장자리를 인식하는 화살표를 제공합니다. Netflix 스타일 행, 탭 스트립, 칩 바로 확인하거나, 둘과 비교한 전체 비교표를 확인하세요.