모바일 가로 스크롤 생기는 이유 | CSS 화면 넘침 해결 방법

01모바일에서 가로 스크롤이 생기는 이유는?

모바일 가로 스크롤은 페이지 안의 콘텐츠가 화면 너비보다 넓게 배치되어 문서의 가로 스크롤 영역이 확장될 때 발생할 수 있습니다.

예를 들어 화면 너비가 375px인데 내부 콘텐츠가 600px 너비를 유지하고 있다면 일부 영역이 화면 밖으로 벗어납니다. 이런 요소가 문서의 가로 스크롤 영역을 넓히면 사용자가 페이지 전체를 좌우로 움직일 수 있습니다.

다만 화면 밖에 있는 요소가 모두 문제인 것은 아닙니다. 슬라이더나 모바일 메뉴처럼 의도적으로 화면 밖에 콘텐츠를 배치하는 UI도 있기 때문입니다.

모바일에서 가로 스크롤이 발생했다면 다음 부분부터 확인해 볼 수 있습니다.

• 특정 요소에 고정된 width가 적용되어 있는지
• 100vw와 좌우 여백이 함께 사용되고 있는지
• 이미지가 부모 영역보다 크게 표시되는지
• Flex 또는 Grid 내부 요소가 충분히 줄어들지 못하는지
• 슬라이더나 위치 지정 요소가 문서의 너비를 늘리고 있는지

이 중 하나만 원인일 수도 있고 여러 문제가 겹쳐 나타날 수도 있습니다.

02개발자 도구로 화면을 넘는 요소부터 찾기

CSS를 무작정 바꾸기 전에 크롬 개발자 도구에서 문제가 나타나는 화면 너비를 재현해 봅니다.

크롬에서 홈페이지를 연 뒤 F12를 누르고 기기 툴바를 활성화하면 모바일 화면 크기를 확인할 수 있습니다.

먼저 375px 정도의 너비로 줄여보고 가로 스크롤이 생기는지 살펴보세요. 이후 320px, 425px, 태블릿 크기처럼 너비를 변경하면 어느 구간에서 문제가 발생하는지 파악하기 쉽습니다.

특정 영역에서 문제가 발생한다면 개발자 도구의 Elements 패널에서 해당 요소를 선택하고 적용된 width, min-width, padding, margin, transform 등을 확인합니다.

페이지 전체가 실제로 화면보다 넓은지도 콘솔에서 비교할 수 있습니다.

const pageWidth = document.documentElement.scrollWidth;
const viewportWidth = document.documentElement.clientWidth;

console.log({
  pageWidth,
  viewportWidth
});

scrollWidth가 clientWidth보다 크다면 문서의 가로 스크롤 영역이 화면 너비를 초과하고 있다는 신호입니다. 다만 이 코드만으로 어떤 요소가 문제인지는 알 수 없습니다.

후보를 좁히고 싶다면 다음 코드도 활용할 수 있습니다.

const viewportWidth = document.documentElement.clientWidth;

const suspects = [...document.querySelectorAll('body *')]
  .filter((element) => {
    const rect = element.getBoundingClientRect();

    return rect.width > 0 &&
      (rect.right > viewportWidth + 1 || rect.left < -1);
  });

console.log(suspects);

03원인 1. width: 100vw 때문에 화면이 넘치는 경우

화면 전체 너비를 차지하는 영역을 만들 때 width: 100vw를 사용하는 경우가 있습니다.

vw는 뷰포트 너비를 기준으로 계산하는 단위입니다. 일반적인 세로 스크롤바가 공간을 차지하는 환경에서는 100vw가 실제 콘텐츠가 들어갈 수 있는 너비보다 커져 가로 넘침을 일으킬 수 있습니다.

여기에 좌우 패딩까지 추가하면 문제가 더 쉽게 드러날 수 있습니다.

.hero {
  width: 100vw;
  padding: 0 20px;
}

기본 box-sizing: content-box 상태에서는 지정한 너비에 좌우 패딩이 추가됩니다. 따라서 요소가 의도했던 너비보다 커질 수 있습니다.

부모 영역의 가용 너비에 맞춰 채우려는 목적이라면 다음과 같이 수정할 수 있습니다.

.hero {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
}

이렇게 하면 지정한 너비 안에 패딩을 포함할 수 있습니다. 375px 화면의 독립 테스트 예제에서는 첫 번째 코드의 요소 너비가 415px이었지만, 수정 후에는 375px로 표시됐습니다.

04원인 2. 고정 너비와 이미지가 모바일 화면보다 큰 경우

PC를 기준으로 작성한 고정 너비가 모바일에서도 유지되면 화면을 넘을 수 있습니다.

.banner {
  width: 720px;
}

모바일 화면이 375px인데 배너가 720px을 그대로 유지한다면 부모 레이아웃에 따라 가로 넘침이 발생할 수 있습니다.

.banner {
  width: 100%;
  max-width: 720px;
  box-sizing: border-box;
}

이렇게 하면 사용할 수 있는 너비 안에서 배너 크기가 줄어들고 최대 너비는 720px로 제한됩니다. 이미지도 함께 확인해야 합니다.

.banner img {
  display: block;
  max-width: 100%;
  height: auto;
}

max-width: 100%는 이미지가 부모 영역보다 크게 표시되는 상황을 줄이는 데 도움이 됩니다. height: auto는 이미지의 원래 비율을 유지하는 데 사용합니다.

고정 너비 720px 배너와 이미지 각각을 375px 화면에서 테스트했을 때 문서 너비가 720px까지 확장됐지만, 수정 코드를 적용한 뒤에는 375px 안에 들어왔습니다.

05원인 3. Flex와 Grid의 내부 요소가 줄어들지 않는 경우

Flex와 Grid는 반응형 레이아웃을 만들 때 자주 사용하지만 자동으로 모든 콘텐츠를 화면 안에 맞춰주는 것은 아닙니다.

특히 긴 주소, 줄바꿈되지 않는 문자열, 고정 너비가 있는 자식 요소 때문에 예상보다 넓은 영역이 만들어질 수 있습니다.

Flex에서 min-width: 0 확인하기

예를 들어 이미지와 설명을 나란히 배치한 카드가 있다고 가정해 보겠습니다.

.card {
  display: flex;
  gap: 16px;
}

.card-content {
  min-width: 0;
  flex: 1;
  overflow-wrap: anywhere;
}

Flex 항목은 기본 최소 크기 때문에 콘텐츠 길이만큼 줄어들지 못하는 상황이 있습니다. 이때 실제로 줄어들어야 하는 자식 요소에 min-width: 0을 적용하면 가용 너비 안에서 축소될 수 있도록 허용합니다.

긴 문자열이 원인이라면 overflow-wrap: anywhere를 이용해 줄바꿈할 수 있는 위치를 추가할 수도 있습니다.

긴 영문 문자열을 넣은 독립 브라우저 테스트에서도 두 속성을 적용한 뒤에는 문서의 가로 넘침이 사라졌습니다. 다만 이미지나 다른 자식의 고정 너비가 원인이라면 해당 요소도 별도로 수정해야 합니다.

Grid에서는 열 너비와 줄바꿈을 함께 점검하기

Grid를 사용하는 경우에도 열의 최소 크기 때문에 내용이 화면 밖으로 밀려날 수 있습니다. 카드 목록이라면 다음처럼 구성할 수 있습니다.

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.card-grid > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

minmax(0, 1fr)는 Grid 열이 콘텐츠의 기본 최소 너비 때문에 불필요하게 커지는 상황을 줄이는 데 활용할 수 있습니다. min-width: 0은 자식 요소의 축소를 허용하고, overflow-wrap: anywhere는 긴 문자열이 셀 밖으로 넘치는 상황을 줄이는 데 도움이 됩니다.

또한 모바일에서는 세 개의 열을 하나로 바꿔 카드가 세로로 배치되도록 했습니다.

긴 문자열을 넣은 테스트 Grid에서도 수정 코드를 적용한 뒤 320px, 375px, 425px, 768px 너비에서 문서의 가로 넘침이 발생하지 않았습니다.

06원인 4. 슬라이더와 위치 지정 요소가 화면 밖에 있는 경우

슬라이더는 가로 방향으로 콘텐츠를 움직이는 구조이기 때문에 화면 밖에 다음 슬라이드가 배치되는 경우가 있습니다. 이 자체가 잘못된 것은 아닙니다.

문제는 슬라이더 내부의 이동 영역이 문서 전체의 너비에 영향을 주어 슬라이더가 아닌 페이지 전체까지 좌우로 움직이는 경우입니다.

Swiper 같은 라이브러리를 사용하는 홈페이지라면 슬라이드 관련 요소의 너비와 부모 컨테이너의 넘침 처리를 확인해야 합니다.

또한 모바일 메뉴처럼 transform으로 화면 밖에 이동시켜 둔 요소, position: absolute로 배치한 장식 요소도 확인 대상입니다.

07overflow-x: hidden을 무조건 적용하면 안 되는 이유

가로 스크롤을 제거하려고 다음 코드를 먼저 적용하는 경우가 있습니다.

body {
  overflow-x: hidden;
}

이렇게 하면 문서의 가로 방향 넘침이 보이지 않도록 처리할 수 있습니다. 하지만 화면 밖으로 밀려난 이미지나 버튼의 너비를 정상적으로 수정하는 것은 아닙니다.

실제 브라우저에서 너비 720px인 배너에 이 속성을 적용해도 배너의 너비 자체는 720px로 유지됐습니다.

예를 들어 중요한 CTA 버튼이 화면 밖에 배치된 상태라면 스크롤을 숨겼을 때 버튼 일부가 잘려 보이지 않을 수 있습니다. 의도적으로 이동하도록 만든 콘텐츠나 애니메이션도 예상과 다르게 표시될 수 있습니다.

물론 overflow-x: hidden이 필요한 상황도 있습니다. 특정 장식 요소나 애니메이션의 넘친 부분을 잘라내려는 의도가 분명하다면 적절한 영역에 사용할 수 있습니다.

08HTML 템플릿 수정 후 모바일 화면에서 확인할 것

기존 HTML 템플릿에 실제 콘텐츠를 넣는 과정에서도 화면 넘침이 발생할 수 있습니다. 짧았던 제목을 긴 문구로 바꾸거나 이미지와 카드 개수를 변경하면서 레이아웃의 크기 조건이 달라질 수 있기 때문입니다.

• 메인 배너 수정 후: 배너 이미지나 문구가 모바일 화면보다 넓어지지 않았는지 확인합니다.
• 카드 콘텐츠 수정 후: 설명 문구가 길어졌을 때 카드 내부 요소가 정상적으로 줄어드는지 살펴봅니다.
• 슬라이더 수정 후: 슬라이더 내부에서만 가로 이동이 발생하는지, 페이지 전체가 같이 움직이지는 않는지 확인합니다.
• 화면 크기 변경 후: 320px, 375px, 425px 등 다양한 구간에서 가로 스크롤이 발생하지 않는지 확인합니다.

디자인키트의 HTML 소스도 제품 유형에 따라 모바일 구성이 다를 수 있습니다.

반응형 HTML 소스는 PC와 같은 경로를 사용하면서 CSS 미디어쿼리로 화면 크기에 대응합니다. 반면 일반형 HTML 소스는 별도의 모바일 파일과 CSS가 제공되는 구조입니다.

따라서 어떤 소스를 수정하고 있는지 먼저 확인한 뒤 해당 모바일 구성에 맞춰 점검해야 합니다.

자주 묻는 질문

모바일 가로 스크롤, 숨기기보다 원인을 찾는 것이 먼저입니다

모바일 가로 스크롤이 생겼다면 가장 먼저 어떤 요소가 화면 너비를 초과하는지 확인해야 합니다.

100vw, 고정 너비, 큰 이미지, Flex·Grid의 최소 크기, 슬라이더처럼 원인에 따라 수정해야 할 부분이 다르기 때문입니다.

이 순서로 접근하면 불필요하게 전체 스타일을 변경하지 않고 문제를 해결할 수 있습니다.

디자인키트 HTML 소스를 활용할 때도 동일합니다. 소스 구조를 확인하고 콘텐츠를 수정한 뒤, 모바일 화면에서 레이아웃이 정상적으로 유지되는지 함께 살펴보세요.

DESIGNKITS HTML SOURCE

디자인키트 HTML 소스 가격 개편

홈페이지를 제작할 때 모든 화면을 처음부터 만들기보다 기존 HTML 소스를 작업에 맞게 수정해 활용하는 방법도 있습니다.

디자인키트에서는 홈페이지 제작에 활용할 수 있는 HTML 소스를 제공하며, 파일 구조와 CSS를 확인한 뒤 프로젝트에 필요한 부분을 수정해 사용할 수 있습니다.

반응형·랜딩형 등 다른 유형은 가격이 다를 수 있으므로 필요한 작업 범위에 맞춰 확인하세요.