모바일 광고가 화면을 넘어가던 버그 해결

모바일 환경에서 광고 영역이 화면 경계를 벗어나면서 레이아웃이 깨지는 문제를 발견하고 CSS에 오버플로우 가드를 추가했다.

문제의 배경

반응형 웹에서 광고는 늘 골치 아픈 콘텐츠다. 광고 네트워크에서 제공하는 광고 크리에이티브(creative)는 대부분 고정된 크기(예: 300×250, 728×90)로 설계되어 있는데, 모바일 화면에서는 그 너비가 화면 자체보다 클 수 있기 때문이다. 특히 작은 스마트폰이나 가로 모드에서 이런 문제가 두드러진다.

이 경우 광고 컨테이너가 부모 요소의 크기를 초과하면서 레이아웃이 밀리고, 때로는 수평 스크롤바가 생기거나 콘텐츠가 짤린다. 사용자는 "어? 화면이 깨졌네" 같은 어색한 경험을 하게 되고, 최악의 경우 모바일 SEO 스코어에까지 영향을 미친다.

CSS 오버플로우 처리

이번 수정에서는 public/styles.css에 광고 영역에 대한 오버플로우 가드를 추가했다. 일반적으로 이런 문제는 다음과 같은 방식으로 해결한다:

/* 광고 컨테이너의 오버플로우 가드 */
.ad-container {
  overflow: hidden;  /* 또는 overflow-x: hidden; */
  max-width: 100%;
  box-sizing: border-box;
}

/* 광고 내부 이미지/iframe 제약 */
.ad-container img,
.ad-container iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

스타일시트 수정의 핵심은:
- overflow 제어: 광고가 부모 경계를 넘지 않도록 클리핑
- max-width 강제: 모바일에서 화면보다 넓어지지 않도록 제약
- 자식 요소 스케일링: 광고 내 이미지나 iframe도 반응형으로 조정

회고와 배운 점

이 수정을 하면서 느낀 몇 가지:

첫째, 외부 공급처 콘텐츠는 항상 불안정하다는 점이다. 광고, 소셜 미디어 임베드, 결제 위젯 같은 것들은 우리 통제 밖이다. 아무리 검증해도 새로운 광고 크리에이티브가 들어오면 예상 밖의 크기가 올 수 있다. 따라서 "defensive CSS"를 작성해야 한다.

둘째, 모바일 우선 설계가 정말 중요하다는 것이다. 데스크톱에서는 광고 300px가 뭐 대수냐 싶지만, 모바일에서는 화면 전체 너비가 375px일 수도 있다. 초기 설계 단계에서 "최악의 경우"를 생각해야 버그가 적게 난다.

셋째, 과제 우선순위 관점에서도 배웠다. 이 버그는 대부분의 사용자(광고가 보이는 범위의 사용자)에게 영향을 미쳤지만, 코드 변경은 스타일시트 한 곳뿐이었다. 큰 영향에 비해 작은 변경이라는 점에서 높은 우선순위로 진행했다.

넷째, CSS의 속성 조합이 중요하다. overflow: hidden 하나만으로는 부족하고, max-width, box-sizing, 자식 요소의 스케일링 규칙까지 함께 가야 진짜 안정적인 오버플로우 가드가 된다는 것을 다시 확인했다.

이번 경우 overflow: hidden과 max-width 조합이 가장 현실적인 선택지였다. 광고가 약간 잘려도 전체 레이아웃이 깨지는 것보다는 낫기 때문이다.

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

• 기계식키보드 쿠팡에서 보기 →
• 사무의자 쿠팡에서 보기 →
• 책상조명 쿠팡에서 보기 →

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