Swiper loop 버그, 왜 자꾸 끊기고 사라질까?

Swiper loop 버그, 왜 자꾸 끊기고 사라질까?

나는 최근에 Swiper.js를 쓰면서 진짜 난감한 상황을 겪었다. 문서에 나와 있는 설정 그대로 따라 했는데도 슬라이드가 자연스럽게 넘어가지 않고, 이상한 버그가 계속 나타난 거다. loop 옵션을 켜면 끝없이 반복되는 슬라이드가 나와야 하는데, 실제로는 마지막에서 끊기거나, 뒤로 드래그할 때 슬라이드가 사라지고, 가운데 슬라이드를 강조하려고 크기를 키우면 양옆 간격이 틀어지는 문제가 발생했다.

이 문제 때문에 작업 속도가 많이 늦어졌고, 도대체 뭐가 문제인지 감도 안 왔다. 그런데 커뮤니티에서 답변을 받고 나서야 원인을 정확히 알 수 있었다. 결국 알고 보면 단순한 원리였다.

내가 겪은 문제들

첫 번째는 뒤로 넘길 때 슬라이드가 하나씩 사라지는 현상이었다. loop 모드를 켰으니 당연히 자연스럽게 이어져야 하는데, 마치 중간이 비어 있는 것처럼 보였다.

두 번째는 마지막 슬라이드에서 첫 번째 슬라이드로 넘어갈 때였다. 보통 무한 루프라면 자연스럽게 연결돼야 하는데, 실제로는 순간적으로 뚝 끊기거나 같은 슬라이드가 반복 표시되는 것처럼 보였다. 사용자 입장에서는 확실히 어색할 수밖에 없다.

세 번째는 가운데 슬라이드를 크게 보이도록 scale 효과를 준 경우였다. 디자인적으로 많이 쓰는 기법인데, 문제는 가운데가 커지자 양옆 간격이 들쑥날쑥해져서 정렬이 맞지 않게 보였다. 겉보기에는 단순한 오류 같지만 실제로는 디자인 완성도를 크게 떨어뜨리는 부분이었다.

문제의 원인, loopedSlides

이 모든 문제의 원인은 Swiper의 loopedSlides라는 옵션 때문이었다. 이 값은 루프 모드에서 앞뒤로 몇 개의 슬라이드를 복제할지 정하는 역할을 한다. 그냥 아무 숫자나 넣으면 되는 줄 알았는데, 사실 중요한 조건이 있었다.

공식 문서에서도 명확히 나와 있다. 슬라이드 개수는 최소한 loopedSlides 값의 두 배 이상이어야 한다는 것이다. 그래야 Swiper가 앞뒤로 슬라이드를 충분히 복제할 수 있고, 무한 루프처럼 자연스럽게 이어지는 효과가 가능하다.

나는 loopedSlides를 5로 설정했지만 실제 슬라이드가 5개뿐이었다. 즉, 조건이 전혀 맞지 않았던 거다. 그래서 슬라이드가 사라지고, 끊기고, 간격이 틀어지는 문제가 발생했던 것이다. 결국 답변자들의 말대로 loopedSlides를 5로 쓰려면 슬라이드가 최소 10개 이상 있어야 했다.

슬라이드가 적을 때 해결 방법

그렇다고 무조건 슬라이드를 많이 넣을 수 있는 건 아니다. 콘텐츠 개수가 정해져 있다면 어쩔 수 없다. 이럴 때는 몇 가지 해결책이 있다.

첫 번째 방법은 loopedSlides 값을 현재 슬라이드 개수에 맞춰주는 것이다. 예를 들어 슬라이드가 5개라면 loopedSlides도 5로 지정하는 방식이다. 이렇게 하면 부족해서 생기는 문제는 피할 수 있다.

두 번째 방법은 부족한 만큼 슬라이드를 복제해서 채우는 것이다. 실제로 어떤 개발자는 클론을 만들어서 슬라이드 수를 늘리고 loop가 자연스럽게 돌도록 구현했다고 한다.

slidesPerView와 centeredSlides 조합의 주의점

내가 쓴 설정에는 slidesPerView를 자동으로 맞추는 옵션과, 가운데 정렬을 하는 옵션이 있었다. 이 조합은 화면 크기에 따라 보이는 슬라이드 개수가 달라지고, 가운데를 기준으로 배치되다 보니 더 예민하다. 루프가 자연스럽게 돌아가려면 복제할 슬라이드가 충분히 있어야 하는데, 그렇지 않으면 훨씬 쉽게 문제가 드러난다. 그래서 이 옵션을 쓸 때는 특히 loopedSlides 조건을 꼭 맞춰줘야 한다.

정리

Swiper의 loop 기능은 단순히 옵션을 켜는 것만으로 끝나지 않는다. loopedSlides 값과 실제 슬라이드 개수의 관계를 이해해야만 정상적으로 동작한다. 최소한 슬라이드 개수가 loopedSlides 값의 두 배 이상은 되어야 한다.

만약 슬라이드 개수가 부족하다면 loopedSlides 값을 슬라이드 개수에 맞추거나, 부족한 부분을 클론으로 채워야 한다. 특히 가운데 정렬 옵션을 쓸 때는 이 조건을 반드시 지켜야 한다.

마무리

처음엔 왜 이런 문제가 생기는지 몰라서 시간을 많이 낭비했는데, 결국 원리를 알고 나니 단순했다. loopedSlides와 슬라이드 개수의 조건만 맞추면 대부분의 문제는 해결된다. 앞으로는 이 규칙을 꼭 기억하면서 작업해야겠다.

결론은 간단하다.

loopedSlides × 2 이상 슬라이드가 있어야 한다.

이 규칙 하나만 지켜도 Swiper loop 문제로 골치 아플 일은 거의 없을 거다.

Swiper 팁 모음

마지막으로 직접 겪으면서 배운 작은 팁들을 정리해본다.

1. loopedSlides 값은 슬라이드 개수를 고려해 넣어야 한다. 애매하면 그냥 슬라이드 개수와 동일하게 맞추는 게 안전하다.

2. 자동 재생을 쓸 때는 유저가 드래그해도 멈추지 않게 옵션을 조절할 수 있다.

3. 전환 속도는 너무 빠르지도, 너무 느리지도 않게 1초 내외로 맞추는 게 좋다.

4. 슬라이드 폭을 자동으로 잡을 때는 CSS에서도 크기를 확실히 정해줘야 브라우저마다 달라지지 않는다.

5. 가운데 정렬은 멋지지만 loop 조건에 민감하다. 꼭 규칙을 지켜야 한다.

6. 시작할 때 원하는 위치로 이동시키는 초기화 이벤트를 활용하면 더 안정적이다.

7. 반응형을 지원하려면 화면 크기에 따라 옵션을 다르게 줄 수 있는 기능을 꼭 사용해야 한다.

8. 꼭 필요한 상황이 아니라면 loop를 아예 끄는 것도 좋은 방법이다. 성능에도 유리하다.



이 정도만 알아도 Swiper를 쓸 때 훨씬 덜 고생할 수 있다. 나처럼 단순한 설정 때문에 몇 시간을 허비하지 않고, 훨씬 매끄럽고 안정적인 슬라이더를 만들 수 있을 거다.