광고 태그가 유발하는 가로 스크롤 레이아웃 붕괴 수정

광고 영역이 레이아웃을 뚫고 나오는 현상을 잡았다.

증상은 단순했다. 특정 광고 태그(<ins>)가 렌더링되면서 컨테이너 너비를 벗어나고, 그게 페이지 전체 가로 스크롤을 유발하고 있었다. 모바일에서는 특히 두드러졌고, 뷰포트 오른쪽에 흰 공백이 생기면서 레이아웃 자체가 무너지는 느낌이었다.

문제의 구조

광고 네트워크가 삽입하는 <ins> 태그는 사실 통제하기 까다로운 영역이다. 우리가 직접 짠 코드가 아니라, 외부 스크립트가 동적으로 크기를 결정하기 때문에 어떤 뷰포트에서 어떤 사이즈로 튀어나올지 예측이 안 된다. 광고 단위 자체에 인라인 스타일로 width나 height가 박혀 있는 경우도 있고, 스크립트가 렌더 이후에 DOM을 건드리는 경우도 있어서 CSS 우선순위 싸움이 벌어지기도 한다.

이번 케이스에서 문제가 된 지점은 두 곳이었다.

ins에 overflow: hidden을 먹이면 광고 콘텐츠가 부모 경계 밖으로 삐져나오는 걸 잘라낸다. 광고가 잘려 보일 수도 있지 않냐는 걱정도 있지만, 어차피 뷰포트를 넘어서 튀어나온 영역은 사용자가 보지 못하거나 가로 스크롤을 유발하는 노이즈일 뿐이다. 차라리 클리핑이 낫다.

html과 body에 max-width: 100%를 거는 건 두 번째 방어선이다. 광고 하나가 아니라 어떤 요소든 간에 뷰포트 너비를 넘어서 페이지 자체를 늘리는 걸 원천 차단하겠다는 의도다. 이 규칙이 없으면 자식 요소 하나가 오버플로우를 일으킬 때 html이나 body 레벨에서 그냥 수용해버리고, 결과적으로 document.body.scrollWidth > window.innerWidth 상태가 된다.

왜 style.css 한 파일 수정으로 커버가 되는가

변경 파일이 app/static/style.css 하나다. 이게 글로벌 스타일시트 역할을 하고 있으니 여기에 ins, html, body 셀렉터를 추가하는 것만으로 전체 페이지에 적용된다. 핀포인트 수정이면서 영향 범위는 전역이라는 게 이런 CSS 글로벌 픽스의 특성이다.

html,
body {
  max-width: 100%;
  overflow-x: hidden; /* 필요 시 같이 묶어서 */
}

ins {
  overflow: hidden;
  display: block; /* ins는 inline이 기본이라 width 제어를 위해 block 명시도 고려 */
}

실제로 ins 태그는 기본적으로 display: inline이다. overflow: hidden이 제대로 작동하려면 display: block 또는 display: inline-block이어야 하는 경우도 있다. 이 부분은 광고 스크립트가 자체적으로 display를 덮어쓰는 경우가 많아서 대부분은 문제없지만, 혹시 예상치 못한 광고 포맷이 들어왔을 때를 대비해 명시적으로 block을 선언해두는 게 안전하다.

이 종류의 버그는 놓치기 쉽다

로컬 개발 환경에서는 광고가 로드되지 않거나 테스트 단위가 삽입되다 보니, 실제 광고 네트워크가 올라간 이후에야 레이아웃 깨짐이 발견되는 경우가 많다. 특히 모바일 뷰포트에서만 재현되면 데스크탑 위주로 개발하는 팀은 놓칠 가능성이 높다. 코드 리뷰 단계에서 광고 렌더링 케이스를 별도 체크리스트로 관리하거나, 실제 광고가 붙은 스테이징 환경에서 모바일 뷰포트를 직접 확인하는 루틴이 있으면 이런 걸 더 일찍 잡을 수 있다.

작은 CSS 수정이지만 배포하고 나서 가로 스크롤이 사라지는 걸 확인했을 때의 쾌감은 있다. 끝.

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

• 기계식키보드 쿠팡에서 보기 →
• 모니터암 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →

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