모바일에서 광고 콘텐츠가 튀어나오던 레이아웃 깨짐 수정

CSS 파일 하나로 모바일 환경에서 광고 요소가 화면 경계를 넘어가던 오버플로우 문제를 해결했다. 광고가 제대로 컨테이너 내에 갇혀 있도록 스타일을 정비한 건데, 생각보다 이게 자주 놓치는 부분이더라.

모바일 광고는 왜 자꾸 깨질까

광고 콘텐츠는 정말 악명높은 레이아웃 파괴범이다. 광고 네트워크에서 돌려주는 광고 소재들이 제각각의 크기로 들어오기도 하고, 광고 제공사들이 반응형을 제대로 지원하지 않는 경우도 부지기수다. 특히 모바일 화면처럼 좁은 영역에서는 광고 iframe이나 광고 div가 할당된 공간을 무시하고 고정 너비로 렌더링되는 일이 자주 생긴다.

일반적인 콘텐츠 요소들(텍스트, 이미지)은 CSS에서 좀 더 쉽게 통제할 수 있지만, 광고는 외부 스크립트가 주입하는 요소라서 여러 제약이 생긴다. 그렇다고 해서 광고를 제대로 격리하지 않으면 사용자 입장에서는 화면 좌우가 미끄럼 막대(horizontal scrollbar)로 범벅되는 경험을 하게 되고, 모바일 UX는 순식간에 악화된다.

어떻게 막을까

CSS 레벨에서는 몇 가지 표준적인 패턴으로 대응한다:

/* 광고 컨테이너를 명확히 정의하고 오버플로우 차단 */
.ad-container {
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* 광고 요소 자체도 제약 */
.ad-container iframe,
.ad-container img {
  max-width: 100%;
  height: auto;
}

/* 모바일 브레이크포인트에서 더 강력하게 */
@media (max-width: 768px) {
  .ad-container {
    overflow-x: hidden;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }
}

핵심은 overflow: hidden 또는 overflow-x: hidden 으로 광고 요소를 명시적으로 자르거나, max-width: 100% 로 공간을 제약하는 것이다. iframe이나 embed 광고의 경우 외부 스크립트가 인라인 스타일을 갈겨버릴 수도 있으니, CSS 에서 !important 를 쓰거나 부모 컨테이너를 한 겹 더 감싸는 방식으로 우선순위를 확보하는 게 현실적이다.

이런 수정이 필요한 이유

오버플로우 문제는 단순 미관 문제가 아니다:

어떤 팀원은 광고 컨테이너 높이를 고정하면 된다고 했지만, 광고 측 소재의 aspect ratio가 다양하면 결국 찌그러지거나 공백이 생긴다. 그래서 부모 컨테이너의 크기 제약과 자식 요소의 유연성을 균형있게 맞추는 게 정답에 가깝다.

회고

처음엔 이렇게 세세한 부분이 왜 중요한지 잘 몰랐다. "광고는 제공사에서 알아서 관리하지 않나" 정도로 생각했는데, 실제로는 우리 쪽 마크업과 CSS가 광고 렌더링 환경을 만들어줘야 한다. 광고가 없으면 상관없겠지만, 광고를 표시하기로 결정했다면 그 광고가 전체 레이아웃을 망치지 않도록 격리하는 것도 개발 책임이다.

특히 모바일 환경에서 이런 fix는 눈에 띄는 변화 같진 않지만, 실제 사용자는 "어? 화면이 이상했는데 이제 정상이네?" 정도로 경험한다. 시각적 버그들(깨진 레이아웃, 겹침, 스크롤)은 기능 버그보다 사소해 보이지만, 누적되면 앱 전체를 허술해 보이게 만든다.

CSS 파일 하나이지만 여러 모바일 브레이크포인트를 함께 검토했고, 실제 다양한 기기와 광고 크기에서도 테스트했다. 반응형 디자인이 진정 의미 있으려면 이런 '작은' 수정들이 신경써서 들어가야 한다.

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

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

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