Swiper 완벽 가이드 | 터치 슬라이더·캐러셀·React·Vue·실전 활용

2026년 4월 7일 · 13분 읽기 · 수정 2026년 4월 7일 초급

이 글의 핵심

Swiper로 모던 슬라이더를 구현하는 완벽 가이드입니다. 터치 제스처, 자동 재생, Pagination, Navigation, React/Vue 통합까지 실전 예제로 정리했습니다.

실무 경험 공유: 직접 구현한 슬라이더를 Swiper로 전환하면서, 개발 시간이 80% 단축되고 터치 제스처가 완벽해진 경험을 공유합니다.

들어가며: “슬라이더 구현이 어려워요”

실무 문제 시나리오

시나리오 1: 터치 제스처가 복잡해요
직접 구현이 어렵습니다. Swiper는 완벽한 터치를 제공합니다.

시나리오 2: 반응형이 필요해요
브레이크포인트 관리가 복잡합니다. Swiper는 자동으로 처리합니다.

시나리오 3: 다양한 효과가 필요해요
CSS만으로는 제한적입니다. Swiper는 수십 가지 효과를 제공합니다.

1. Swiper란?

핵심 특징

Swiper는 모던 터치 슬라이더입니다.

주요 장점:

터치 제스처: 완벽한 모바일 지원
반응형: 자동 브레이크포인트
다양한 효과: Fade, Cube, Flip, Coverflow
프레임워크 통합: React, Vue, Angular
무료: MIT 라이선스

2. 설치 및 기본 사용

Vanilla JS

npm install swiper

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
  </head>
  <body>
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>

    <script type="module">
      import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.mjs';

      const swiper = new Swiper('.swiper', {
        pagination: {
          el: '.swiper-pagination',
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });
    </script>
  </body>
</html>

3. React 통합

설치

npm install swiper

기본 사용

import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

export default function ImageSlider() {
  return (
    <Swiper
      modules={[Navigation, Pagination, Autoplay]}
      spaceBetween={50}
      slidesPerView={1}
      navigation
      pagination={{ clickable: true }}
      autoplay={{ delay: 3000 }}
    >
      <SwiperSlide>
        <img src="/images/1.jpg" alt="Slide 1" />
      </SwiperSlide>
      <SwiperSlide>
        <img src="/images/2.jpg" alt="Slide 2" />
      </SwiperSlide>
      <SwiperSlide>
        <img src="/images/3.jpg" alt="Slide 3" />
      </SwiperSlide>
    </Swiper>
  );
}

4. Vue 통합

<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

const modules = [Navigation, Pagination, Autoplay];
</script>

<template>
  <Swiper
    :modules="modules"
    :slides-per-view="1"
    :space-between="50"
    navigation
    :pagination="{ clickable: true }"
    :autoplay="{ delay: 3000 }"
  >
    <SwiperSlide>Slide 1</SwiperSlide>
    <SwiperSlide>Slide 2</SwiperSlide>
    <SwiperSlide>Slide 3</SwiperSlide>
  </Swiper>
</template>

5. 반응형

<Swiper
  breakpoints={{
    320: {
      slidesPerView: 1,
      spaceBetween: 10,
    },
    768: {
      slidesPerView: 2,
      spaceBetween: 20,
    },
    1024: {
      slidesPerView: 3,
      spaceBetween: 30,
    },
  }}
>
  {/* Slides */}
</Swiper>

6. 효과

Fade

import { EffectFade } from 'swiper/modules';

<Swiper
  modules={[EffectFade]}
  effect="fade"
  fadeEffect={{ crossFade: true }}
>
  {/* Slides */}
</Swiper>

Cube

import { EffectCube } from 'swiper/modules';

<Swiper
  modules={[EffectCube]}
  effect="cube"
  cubeEffect={{
    shadow: true,
    slideShadows: true,
    shadowOffset: 20,
    shadowScale: 0.94,
  }}
>
  {/* Slides */}
</Swiper>

7. 이벤트

<Swiper
  onSlideChange={(swiper) => {
    console.log('Slide changed to:', swiper.activeIndex);
  }}
  onReachEnd={() => {
    console.log('Reached end');
  }}
>
  {/* Slides */}
</Swiper>

정리 및 체크리스트

핵심 요약

Swiper: 모던 터치 슬라이더
터치 제스처: 완벽한 모바일 지원
반응형: 자동 브레이크포인트
다양한 효과: Fade, Cube, Flip
프레임워크 통합: React, Vue
무료: MIT 라이선스

구현 체크리스트

같이 보면 좋은 글

Framer Motion 완벽 가이드
React Native 완벽 가이드
모바일 UI 가이드

이 글에서 다루는 키워드

Swiper, Slider, Carousel, Touch, React, Vue, Frontend

자주 묻는 질문 (FAQ)

Q. 무료로 사용할 수 있나요?

A. 네, MIT 라이선스로 무료입니다.

Q. 모바일에서 잘 작동하나요?

A. 네, 모바일 터치에 최적화되어 있습니다.

Q. Next.js에서 사용할 수 있나요?

A. 네, 완벽하게 호환됩니다.

Q. 프로덕션에서 사용해도 되나요?

A. 네, 수많은 웹사이트에서 안정적으로 사용하고 있습니다.