모바일에서 광고가 화면을 벗어나던 문제 수정

반응형 웹 개발하다 보면 예상 밖의 케이스가 자주 터진다. 이번엔 모바일 환경에서 광고 콘텐츠가 화면 범위를 넘어서는 오버플로우 버그였다. public/styles.css 에 오버플로우 가드 처리를 넣어서 해결했다.

문제 상황

사이트에 외부 광고 네트워크에서 제공하는 광고를 임베드하고 있었다. 데스크톱에서는 잘 작동했는데, 모바일 화면(특히 작은 디바이스)에서 광고가 부모 컨테이너를 뚫고 튀어나오는 현상이 발생했다.

이게 단순히 "광고가 조금 튀어나오네" 정도의 미관 문제가 아니었다. 광고가 뷰포트를 초과하면:

• 좌우 스크롤이 활성화돼서 모바일 사용자가 페이지 전체를 옆으로 스크롤해야 함
• 배경 콘텐츠가 가려져서 실제 보고 싶은 정보의 접근성 저하
• 누적 레이아웃 시프트(CLS) 발생으로 페이지 체감 속도 느려짐
• 사용자 이탈 증가

광고 콘텐츠와 오버플로우의 일반적 함정

외부에서 임베드되는 광고는 보통 다음의 특성을 가진다:

이런 상황에서는 "광고를 감싸는 컨테이너"를 잘 설계해야 한다. 광고 자체는 수정할 수 없으니까.

CSS 오버플로우 가드 처리

이번 수정은 광고 컨테이너에 오버플로우 제어를 추가하는 식으로 진행했다. 일반적으로 다음 같은 패턴을 쓴다:

/* 광고 컨테이너 기본 처리 */
.ad-container {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;  /* 수평 오버플로우 차단 */
  overflow-y: auto;    /* 필요하면 수직 스크롤 허용 */
}

/* 모바일 환경에서 추가 보호 */
@media (max-width: 768px) {
  .ad-container {
    overflow: hidden;  /* 모바일에선 모든 오버플로우 숨김 */
  }
}

이 처리의 의도:

1. overflow-x: hidden — 광고가 좌우로 튀어나오면 일단 숨김. 스크롤하지 않고 잘려도 괜찮다는 판단
2. 모바일 미디어 쿼리 — 화면이 좁은 환경에서는 더 공격적으로 overflow: hidden 적용
3. max-width: 100% — 부모를 절대 초과하지 않도록 명시

고민했던 부분들

이 패턴을 적용하면서 몇 가지 트레이드오프가 있었다:

• 광고가 깨져 보일 수 있나? 광고 네트워크가 반응형 광고를 제공하면 상관없지만, 고정 크기면 일부 잘릴 수 있다. 하지만 "튀어나와서 페이지를 깨뜨리는 것"보다는 "광고가 조금 작게 보이는 것"이 낫다는 판단.
• 수직 스크롤은 필요한가? 보통 광고는 수직으로 긴 경우가 드물어서 overflow-y: hidden을 쓰는 게 더 나을 수도 있다. 상황과 광고 형식에 따라.
• 다른 컨테이너에는 영향 없나? 광고 컨테이너만 격리해서 처리하므로 다른 콘텐츠 레이아웃에는 영향 없음.

반응형 테스트의 중요성

이 버그가 상당 시간이 지난 후에 발견된 이유는 개발 단계에서 모바일 환경을 충분히 테스트하지 않았기 때문일 가능성이 크다. 데스크톱 브라우저에서 DevTools로 모바일 뷰를 보는 것과 실제 모바일 디바이스에서의 렌더링은 다르다.

특히 광고 같은 외부 의존성이 있는 콘텐츠는 더 신경을 써야 한다:

• 실제 광고 네트워크 API 응답이 변할 수 있음
• 광고 로드 시간이 네트워크에 따라 다름
• 일부 디바이스에서만 문제가 나타날 수 있음

그래서 배포 전엔:

• DevTools 모바일 뷰 (기본)
• 실제 모바일 기기 1-2가지 크기
• 느린 네트워크 시뮬레이션 (광고 로드 지연)
• 여러 브라우저 (Safari, Chrome on iOS/Android)

정도는 거쳐야 한다.

배운 점

이번 경험에서:

1. 외부 콘텐츠는 격리해서 처리하기 — 서드파티 스크립트나 iframe은 예측 불가능한 크기/동작을 가질 수 있으니, 항상 부모 컨테이너에서 보호하는 마음가짐으로.

2. 모바일 우선 설계 — 데스크톱부터 해서 모바일로 확대하는 게 아니라, 처음부터 가장 제한적인 환경(모바일)을 기준으로 생각하면 나중의 버그가 줄어든다.

3. 오버플로우는 조용하게 — overflow: hidden은 콘텐츠를 잘라내는 "강한" 선택이지만, 페이지 전체를 깨뜨리는 것보다는 낫다는 판단. 완벽하지 않지만 실용적인 손상 제어.

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

• 모니터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 사무의자 쿠팡에서 보기 →

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