모바일 광고 오버플로우로 깨진 레이아웃 수정

모바일 환경에서 광고가 화면 경계를 넘어가면서 레이아웃이 깨지던 문제를 CSS로 막아냈다. 단순해 보이지만, 반응형 디자인에서 제3자 요소를 다루는 팀의 공통적 고민이 담겨 있다.

모바일 광고는 언제나 불청객

광고를 서빙하는 라이브러리들은 보통 제공되는 광고 크기가 예측 불가능하다. 광고 네트워크가 실시간으로 배치하는 광고의 해상도, 비율, 심지어 스크립트 실행 타이밍도 다 다르기 때문이다. 데스크톱에서는 여유로운 화면 폭 때문에 좀 튀어나와도 눈에 띄지 않지만, 모바일 320px 폭의 디바이스에서는 조금의 오버플로우도 레이아웃을 완전히 깬다.

문제는 단순한 레이아웃 미스가 아니라 사용자 경험 전체를 망친다는 데 있었다. 광고가 텍스트나 버튼을 덮으면 상호작용 자체가 불가능해지고, 가로 스크롤바가 생기면 모바일 사용자는 "이 사이트 버그인가?" 하고 이탈한다. 우리 팀도 사용자 피드백을 받기 전까진 이 문제의 심각도를 제대로 못 잡고 있었다.

CSS로 방어하기

fix는 결국 세 번째 방법이다. 광고 컨테이너를 감싼 부모 요소에 overflow-x: hidden과 max-width 제약을 걸어서, 광고가 아무리 커도 화면 폭을 넘지 못하게 했다. CSS는 순수하고 예측 가능한 방어 수단이다. 광고 스크립트가 언제 실행되든, 어떤 크기를 서빙하든 상관없이 항상 같은 규칙이 적용된다.

/* 광고 컨테이너 방어 패턴 */
.ad-container {
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

/* 더 엄격한 제약이 필요한 경우 */
.ad-wrapper {
  max-width: 100vw;
  overflow: hidden;
}

실제로는 광고 내부의 iframe이나 img 태그도 함께 제어해야 할 수 있다. 예를 들어 광고 요소 자체에 max-width: 100%를 명시하거나, 부모의 box-sizing: border-box를 확인하는 식이다. 하지만 핵심은 "다층 방어"다. 부모 요소, 광고 자체, 내부 미디어 요소까지 한 겹씩 제약을 준다면, 어떤 조합의 크기도 버틸 수 있다.

팀 관점에서 배운 점

이 fix를 통해 몇 가지 생각해볼 지점이 생겼다.

첫째, 제3자 라이브러리 통합은 방어적으로 설계해야 한다. 광고, 채팅봇, 결제 위젯 같은 외부 스크립트는 우리가 통제할 수 없는 부분이 많다. 따라서 통합할 때부터 "최악의 경우"를 생각해야 한다. 크기가 크면? 스크립트가 느리면? 여러 개가 동시에 로드되면? 각 시나리오에 CSS 안전판을 미리 깔아두는 게 맞다.

둘째, 모바일 테스트는 설계 단계에서부터 빠져선 안 된다. 데스크톱 개발 환경에서는 광고 오버플로우 같은 문제가 눈에 잘 띄지 않는다. 우리 팀도 처음엔 로컬 테스트에서 모바일 viewport를 제대로 체크하지 못했다. 이후로 광고나 삽입형 콘텐츠를 추가할 때는 개발 초기부터 실제 모바일 디바이스(또는 DevTools의 모바일 에뮬레이션)에서 확인하는 룰을 만들었다.

셋째, 작은 fix도 큼직한 배경이 있다는 걸 명시하자. 팀원들에게 커밋 메시지만 보면 "아, CSS 한 줄 추가했네" 정도로 보인다. 하지만 코드 리뷰나 회의에서 "모바일 광고 오버플로우 때문에 레이아웃이 깨지고 있었고, 이걸 css overflow 가드로 막은 거다" 정도의 컨텍스트를 나눴다면, 팀 전체가 왜 이런 방어 코드가 필요한지 이해하고 비슷한 상황에서 더 빨리 판단할 수 있다.

결국 모바일 레이아웃 안정성도, 제3자 요소와의 공존도 일회성 fix가 아니라 설계 원칙의 문제다. 이 작은 수정이 그 원칙을 팀에서 더 의식하게 된 계기였다.

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

• 듀얼모니터 쿠팡에서 보기 →
• 사무의자 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →

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