모바일 광고 가로 스크롤 오버플로우 수정기

모바일에서 광고 컴포넌트가 가로 스크롤을 유발하던 문제를 잡았다.

왜 이게 문제였나

블로그에 광고 삽입 후 데스크톱에서는 멀쩡했는데, 모바일에서 가로 스크롤이 생기는 제보가 들어왔다. 확인해보니 ins 태그와 모비온 iframe 이 컨테이너를 뚫고 나가는 상황이었음. 광고 네트워크에서 내려주는 코드는 대부분 고정 width 값을 인라인 스타일로 박아두는 경우가 많다. 예를 들어 width: 320px 이나 width: 300px 같은 식으로. 뷰포트가 그보다 좁은 디바이스에서는 당연히 오버플로우가 발생한다.

문제의 본질은 서드파티 광고 코드가 우리 레이아웃의 제약을 무시한다는 점이다. 우리가 컨트롤할 수 없는 외부 코드가 DOM에 들어오는 순간, 해당 요소의 사이즈 정책은 광고 플랫폼 쪽이 쥐고 있다. 이건 어느 블로그든, 어느 퍼블리셔 사이트든 광고를 붙이면 한 번씩 겪는 클래식한 문제다.

수정 내용

app/static/style.css 한 파일에 핀포인트 수정. 변경량 자체는 크지 않지만 영향 범위는 모바일 사용자 전체다.

/* before: 별도 제약 없음 → 광고 iframe/ins가 뷰포트 초과 가능 */

/* after */
ins,
iframe {
  max-width: 100%;
}

혹은 광고 래퍼 클래스를 특정해서 더 좁게 잡는 방법도 있다.

.ad-container ins,
.ad-container iframe {
  max-width: 100% !important;
  overflow: hidden;
}

!important 를 쓰는 게 내키지 않을 수 있는데, 이 케이스는 인라인 스타일을 덮어야 하는 상황이라 사용이 정당화된다. 단, 남용하면 나중에 디버깅이 지옥이 되니까 범위를 최대한 좁게 가져가는 게 맞음.

광고 오버플로우, 왜 자꾸 반복되나

이 네 가지가 복합적으로 작용한다. 특히 광고 스크립트가 비동기로 로드되면 초기 레이아웃 계산 시점엔 문제가 안 보이다가, 스크립트 실행 후 DOM이 변경되면서 오버플로우가 터진다. 그래서 개발 환경에서 광고 없이 테스트하면 멀쩡하고, 실제 광고 붙은 프로덕션에서만 재현되는 것.

회고

솔직히 광고 붙이는 시점에 미리 max-width: 100% 를 걸어뒀어야 했다. "외부에서 오는 요소는 레이아웃을 망친다고 가정하고 방어적으로 짜라"는 건 알고 있는 원칙인데, 막상 서드파티 코드 붙일 때는 동작 확인에만 집중하다 보니 반응형 검증을 건너뛴 것. 데스크톱에서만 확인하고 배포한 게 패착이었음.

비슷한 맥락으로, 외부 임베드 콘텐츠(유튜브 iframe, 지도 embed 등)도 동일한 문제를 일으킨다. 글로벌 CSS 레벨에서 iframe, embed, object, ins 에 max-width: 100% 를 선제적으로 걸어두는 게 표준 방어 패턴이다. 이번 기회에 다른 임베드 요소들까지 한 번 훑어볼 예정이고, 팀 내 CSS 보일러플레이트에도 이 항목을 추가해두는 게 맞겠다 싶었다.

작은 CSS 한 줄이지만, 모바일 사용자 입장에서는 가로 스크롤이 생기는 순간 이탈로 이어진다. 사소해 보이는 레이아웃 버그가 실제 사용자 경험에 미치는 영향은 생각보다 크다.

끝.

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

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

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