모바일 광고 배너 가로 스크롤 오버플로우 차단

모바일에서 광고 배너가 화면을 삐져나와 가로 스크롤이 생기는 문제를 globals.css 한 파일 수정으로 막았다.

배경: 970/728 배너는 데스크탑 기준 사이즈다

광고 네트워크가 내려주는 표준 배너 사이즈를 보면 970px, 728px짜리가 주력이다. 리더보드(728×90), 빌보드(970×250) 같은 포맷들. 문제는 이 사이즈가 철저하게 데스크탑 기준으로 설계된 수치라는 점이다.

AdSense 같은 광고 솔루션은 iframe 안에 광고 크리에이티브를 그려 넣는데, 이 iframe 자체가 고정 width 속성을 달고 내려오는 경우가 많다. 브라우저 입장에서 width="728" 이 박혀 있으면 그냥 728px짜리 박스를 그린다. 뷰포트가 375px인 모바일이든 상관없이. 그 결과가 가로 스크롤 — 흔히 말하는 horizontal overflow 문제다.

이번에 발견한 케이스도 정확히 그 패턴이었다. 970px, 728px 두 사이즈 배너와 AdSense iframe이 모바일 뷰포트를 터뜨리고 있었고, 페이지 전체에 원치 않는 가로 스크롤이 붙어 있었다.

수정 내용: globals.css에 max-width 100% 선언

변경은 src/app/globals.css 한 파일로 끝났다. 핀포인트 수정이다.

/* 광고 배너 · AdSense iframe 가로 오버플로우 차단 */
.adsbygoogle,
iframe[src*="googlesyndication"],
[data-ad-slot],
.ad-banner-970,
.ad-banner-728 {
  max-width: 100% !important;
  overflow: hidden;
}

핵심은 max-width: 100%다. 고정 width가 얼마로 내려오든 컨테이너를 넘지 못하게 상한선을 걸어버리는 방식. width: 100%가 아니라 max-width를 쓴 이유는, 데스크탑에서는 원래 사이즈(728px, 970px)를 그대로 보여주고 싶어서다. 뷰포트가 충분히 넓으면 max-width: 100%는 아무 효과가 없다. 모바일처럼 뷰포트가 배너보다 좁을 때만 동작한다.

!important는 광고 스크립트가 인라인 스타일로 width를 주입하는 경우를 대응하기 위해 붙였다. AdSense는 자바스크립트로 iframe에 인라인 스타일을 직접 때려박는 경우가 있어서, 외부 stylesheet만으로는 이기기 어렵다. 이 부분이 광고 관련 CSS에서 유독 !important가 용인되는 맥락 중 하나다.

이 류의 버그가 왜 늦게 발견되는가

광고 관련 레이아웃 버그의 특징이 이렇다. 개발 환경에서는 광고가 안 뜨거나, 광고 차단기가 켜져 있거나, 반응형 에뮬레이터가 실제 광고 렌더링을 완전히 재현하지 못한다. 그래서 QA 단계에서 실제 디바이스로 확인하지 않으면 프로덕션에서야 잡히는 경우가 많다.

이 버그도 그랬다. 로컬에서는 광고 영역 자체가 비어 있으니 레이아웃이 멀쩡해 보이고, 실기기에서 실제 광고가 내려오면서 터진다. 팀에 공유할 때 "광고 버그는 무조건 실기기로 봐야 한다"고 다시 한 번 못 박았다.

회고

globals.css 수정 한 줄로 끝나는 작업이지만, 이게 왜 발생했는지 / 왜 이 방식으로 막는지를 팀이 이해하고 있어야 다음에 비슷한 배너 포맷이 추가될 때 같은 실수를 반복하지 않는다. 그래서 PR 설명에 970/728이 데스크탑 표준 사이즈라는 맥락, max-width vs width 선택 이유, !important 사용 근거를 같이 적었다.

코드리뷰에서 "왜 width: 100% 안 쓰고 max-width?" 질문이 바로 왔고, 그게 이 PR의 가장 유익한 부분이었다고 생각한다. 수정 자체보다 그 논의가 팀 전체 이해도를 올린다.

끝.

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

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

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