12_Swiper_캐러셀_적용과_프로젝트_마무리

1. Swiper란?

Swiper(스와이퍼)는 터치 슬라이드/캐러셀(Carousel, 회전목마형 슬라이드)을 쉽게 만들어주는 라이브러리이다. 넷플릭스, 유튜브, 쿠팡 같은 서비스에서 콘텐츠를 좌우로 넘기는 UI가 바로 이것이다.

이번 편에서는 6편에서 만든 Section.jsx의 그리드 레이아웃을 Swiper 캐러셀로 업그레이드한다.

---

2. Swiper 설치 확인

1편에서 이미 설치했지만, 혹시 빠뜨렸다면 아래 명령어를 실행한다.

npm install swiper

---

3. 1단계 — Swiper 기본 적용

src/components/Section.jsx 파일을 열고 전체를 아래로 교체한다.

먼저 import 부분부터 작성한다.

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

이어서 컴포넌트 본체를 작성한다.

export default function Section({ title, items }) {
  return (
    <section className="bg-black py-10 px-4">
      <div className="container mx-auto">
        <h2 className="text-[32px] font-bold mb-6">{title}</h2>
        <Swiper
          modules={[Navigation, Pagination]}
          spaceBetween={16}
          slidesPerView={1}
          navigation
          pagination={{ clickable: true }}
        >
          {items.map((m) => (
            <SwiperSlide key={m.id}>
              <Card movie={m} />
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
    </section>
  );
}

여기까지 저장하면 슬라이드가 1개씩 보이는 기본 캐러셀이 완성된다.

---

4. 2단계 — 반응형 설정

모바일에서는 1개, 태블릿에서는 3개, 데스크톱에서는 4개의 카드가 보이게 breakpoints를 추가한다. Swiper 태그 안에 속성을 추가한다.

        <Swiper
          modules={[Navigation, Pagination]}
          spaceBetween={16}
          slidesPerView={1}
          navigation
          pagination={{ clickable: true }}
          breakpoints={{
            640:  { slidesPerView: 2 },
            768:  { slidesPerView: 3 },
            1024: { slidesPerView: 4 },
          }}
        >

breakpoints는 화면 너비에 따라 보이는 슬라이드 수를 조절한다.

---

5. 3단계 — 자동 재생 추가

슬라이드가 자동으로 넘어가게 하려면 Autoplay 모듈을 추가한다.

import에 Autoplay를 추가한다.

import { Navigation, Pagination, Autoplay } from 'swiper/modules';

그리고 Swiper 태그에 Autoplay 모듈과 옵션을 추가한다.

        <Swiper
          modules={[Navigation, Pagination, Autoplay]}
          spaceBetween={16}
          slidesPerView={1}
          navigation
          pagination={{ clickable: true }}
          autoplay={{ delay: 3000, disableOnInteraction: false }}
          loop={true}
          breakpoints={{
            640:  { slidesPerView: 2 },
            768:  { slidesPerView: 3 },
            1024: { slidesPerView: 4 },
          }}
        >

---

6. 자주 쓰는 Swiper 옵션 모음

---

7. 자주 발생하는 에러

---

8. 빌드와 배포

개발이 완료되면 프로덕션(Production, 운영) 빌드를 생성한다.

npm run build

빌드 결과물을 로컬에서 미리 확인하려면 아래 명령어를 실행한다.

npm run preview

---

9. 전체 프로젝트 파일 최종 점검

---

10. 시리즈 전체 요약

이 시리즈를 완료하면 React의 핵심 개념(컴포넌트, Props, State, Hook, 라우팅)과 실전 API 연동, 외부 라이브러리 활용까지 경험한 것이다. 이제 이 GOFLIX 프로젝트를 기반으로 기능을 추가하거나, 자신만의 프로젝트를 시작해 보자.