Vue3 Carousel에서 화면 줄어들 때 이전 슬라이드가 겹쳐 보이는 문제 해결하기

프로젝트에서 Vue3 Carousel을 사용하다 보면, 해상도가 작아지거나 브라우저 창 크기를 줄였을 때 이전/다음 슬라이드가 화면에 겹쳐서 보이는 문제가 발생할 수 있습니다.

처음에는 캐러셀 자체 버그인가 싶었는데, 원인은 뷰포트 영역이 슬라이드 밖 컨텐츠를 잘라내지 못한 것이었습니다.

---

문제 상황

아래와 같은 상황이 자주 발생합니다.

• 데스크톱 풀스크린에서는 정상적으로 보임
• 하지만 모바일이나 작은 화면에서는 이전/다음 슬라이드의 일부가 비쳐 보임
• 특히 Motion 애니메이션(x: '50%') 같이 좌우로 이동하는 요소가 있으면 더 심해짐

---

해결 방법

해답은 의외로 간단했습니다.
뷰포트 영역에 overflow:hidden을 강제로 주는 것만으로 문제를 해결할 수 있었어요.

.carousel__viewport {
  overflow: hidden !important;
}

---

추가로 적용하면 좋은 보완책

문제가 완전히 사라지긴 했지만, 혹시 모를 상황을 대비해 몇 가지 추가 팁을 정리했습니다.

1. 슬라이드 폭 고정

슬라이드가 뷰포트를 넘지 않도록 강제로 폭을 지정합니다.

.carousel__slide {
  flex: 0 0 100% !important;
  width: 100% !important;
  overflow: hidden;
}

2. 내부 컨텐츠 밀림 방지

Flex 컨테이너 내부에서 텍스트나 이미지가 가로폭을 강제로 늘리지 않도록 min-w-0을 활용하세요.

<div class="flex-1 min-w-0 overflow-hidden">
  ...
</div>

3. Motion 애니메이션 단위 조정

x: '50%' 대신 x: 60(px 단위)을 사용하면 작은 화면에서 컨텐츠가 과도하게 바깥으로 튀어나가는 현상을 줄일 수 있습니다.

---

• 핵심 해결책 : .carousel__viewport { overflow:hidden; }
• 보완책 : 슬라이드 폭 고정, min-w-0 적용, 애니메이션 px 단위로 변경

작은 한 줄 수정으로 겹쳐 보이는 문제를 해결할 수 있었고, 추가 보완책까지 적용하면 모바일 환경에서도 훨씬 안정적인 UI를 유지할 수 있습니다.