Swiper 이미지 슬라이더 반응형 넓이 이슈

문제 상황

  • 모바일/태블릿 등 반응형 화면에서 Swiper 슬라이더 영역의 width가 22369600px처럼 비정상적으로 계산됨
  • 페이지 전체에 가로 스크롤이 생겨 사용자 경험 저하
  • 데스크톱에서는 정상 작동하지만 작은 화면에서만 문제 발생

    • 원인

  • Next.js Image 컴포넌트에서 fill 속성 사용 시 sizes 속성을 명시하지 않으면 브라우저가 이미지 크기를 잘못 계산
  • Swiper는 초기화 시 자식 요소(이미지)의 크기를 기반으로 슬라이드 width를 계산하는데, 이미지 크기가 비정상적으로 계산되면서 전체 레이아웃 붕괴

    • 해결 방법

  • <Image /> 태그에 sizes 속성 추가

  • 추가 안정화 조치

    • 결과

  • 모든 화면 크기에서 정상적인 width 계산
  • 비정상적인 가로 스크롤 완전 제거
  • 반응형 디자인 정상 작동