포트폴리오 캐러셀의 가로스크롤 문제 해결

포트폴리오 사이트의 메인 페이지에는 여러 작업물을 슬라이드로 보여주는 캐러셀이 있다. 사용자가 포트폴리오를 탐색할 때 좌우로 스윕하거나 슬라이드 컨트롤로 항목을 넘기는 경험을 제공하려고 설계한 것이다. 그런데 반응형 디자인으로 모바일부터 데스크톱까지 지원하는 과정에서 예상치 못한 버그를 발견했다: 특정 해상도에서 페이지 전체가 좌우로 스크롤된다는 것. 사용자는 포트폴리오를 세로로 둘러보려고 하는데 뜻하지 않게 가로로도 흔들리는 경험이 생긴다. 이건 심각한 사용성 저하다.

왜 캐러셀에서 가로스크롤이 발생했나

캐러셀은 본질적으로 가로 방향으로 확장되는 콘텐츠다. 여러 슬라이드를 한 줄로 배열해야 하므로 폭이 넓어진다. 이를 모바일 화면의 좁은 폭에 맞추면서도 데스크톱에서는 자연스럽게 표시해야 하는데, 이 과정에서 여러 레이어의 CSS 스타일이 충돌했다.

구체적으로, 다음과 같은 요인들이 복합적으로 작용했다:
- 캐러셀 컴포넌트가 자체 스타일을 강하게 정의하면서 부모 요소의 overflow 설정을 무시
- base.html과 포트폴리오 페이지별 스타일시트에서 중복되거나 충돌하는 규칙들
- 특정 해상도(특히 태블릿)에서 미디어 쿼리의 패딩/마진 값이 뷰포트를 벗어남
- 전체 페이지 레벨에서 overflow를 명확하게 제어하는 규칙 부재

표면적으로는 "캐러셀이 화면 밖으로 튀어나왔다"는 증상이지만, CSS 계단식(cascade)의 복잡성 때문에 어디서 이 문제가 발생했는지 파악하기가 쉽지 않았다.

CSS의 우선순위 전쟁

가로 오버플로우를 막으려면 overflow-x를 제어해야 한다. 하지만 어디에 어떻게 설정하는지가 중요하다:

/* 방법 1: 캐러셀 부모 컨테이너에만 */
.carousel-wrapper {
  overflow: hidden;
}

/* 방법 2: 문서 레벨(body)에서 */
body {
  overflow-x: hidden;
}

/* 방법 3: 강제 우선순위 */
html, body {
  overflow-x: hidden !important;
}

이 세 방식이 모두 적용되면서 충돌한다. CSS는 선언 순서와 선택자의 구체성(specificity)에 따라 어느 규칙이 이기는지 결정되는데:

• base.html의 전역 스타일: 모든 페이지에 적용되는 기본값
• 포트폴리오 페이지별 스타일: 특정 페이지의 추가 스타일
• 캐러셀 컴포넌트 자체: 캐러셀이 주입하는 인라인 스타일이나 우선도 높은 선택자

이 셋이 동시에 작용하면 어느 것이 실제로 렌더링되는지 개발자 도구를 켜서 하나하나 확인해야 한다. 때로는 마지막에 로드되는 스타일이 우선되고, 때로는 선택자의 구체성이 이기고, 때로는 !important가 모든 걸 무시해 버린다.

적용한 해결책: overflow-x !important

고민 끝에 base.html의 기본 스타일 섹션에 다음을 추가했다:

html, body {
  overflow-x: hidden !important;
}

!important를 사용한 이유는, 다른 모든 규칙을 무조건 덮기 위함이다. 이렇게 하면 캐러셀이 어떤 스타일을 주입하든 상관없이 페이지의 가로스크롤은 항상 차단된다. base.html에 이를 넣으면 모든 페이지에 자동으로 적용되므로, 위험한 버그를 전사이트 차원에서 한 번에 해결할 수 있다.

추가로 포트폴리오의 한글 페이지(portfolio/index.html)와 영문 페이지(portfolio/en/index.html)에도 명시적으로 같은 규칙을 적용했다. 한 곳에만 의존하면 누군가 실수로 base.html의 규칙을 지울 수도 있고, 페이지별 스타일이 또 다른 충돌을 만들 수도 있기 때문이다. 방어 레이어를 여러 단계로 두는 것이 현명하다.

!important의 의미, 그리고 앞으로의 고민

CSS를 공부할 때 누구나 배운다: "!important는 피해야 할 안티패턴이다." 그리고 이건 맞다. !important를 자주 쓰면 CSS 관리가 악몽이 된다. 나중에 다른 개발자가 규칙을 바꾸려 할 때 !important가 또 필요해지고, 결국 CSS 전체가 !important로 뒤덮인다. 유지보수 비용이 급증한다.

하지만 현실적으로, 여러 소스의 스타일이 섞여 있는 상황에서는 정당한 예외가 있다. 특히 캐러셀처럼 외부 컴포넌트가 강한 스타일을 주입하는 경우, base.html과 페이지별 스타일이 동시에 작용하는 경우, 근본적인 CSS 아키텍처 개선 전에 즉시 버그를 차단해야 하는 경우다. 이때 !important는 "최고의 선택"이 아니라 "현실적인 타협"이다. 긴급 패치로서의 가치가 있다.

다만 이를 계기로 팀과 함께 생각해볼 점들이 있다. 왜 이런 오버플로우 문제가 발생했나? 설계 단계에서 캐러셀의 스타일 격리를 고려했나? 반응형 테스트 체크리스트는 정말 충분한가? CSS가 너무 많은 곳에서 정의되고 있지는 않나? 그리고 이 !important를 언제쯤 정리할 것인가?

포트폴리오 사이트가 앞으로 커질 텐데, 지금 같은 응급 처치가 많이 쌓이면 작은 변경도 예상치 못한 사이드 이펙트를 낳을 수 있다. 이번 수정을 하면서 깨달은 건, CSS 체계화에 더 일찍 투자했으면 좋았겠다는 것이다. 다음 리팩토링 기회에는 전체 스타일시트를 정리하고, 컴포넌트의 스타일을 더 명확하게 격리할 필요가 있다.

🛒 이 글과 어울리는 추천 상품

• 모니터 쿠팡에서 보기 →
• 노트북 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.