모바일에서 광고가 튀어나가던 UI 문제

모바일 환경에서 광고 요소가 컨테이너를 뚫고 나가는 오버플로우 현상을 CSS 수정으로 차단했다. 간단해 보이지만 이 종류의 버그는 생각보다 광범위한 영향을 미치고, 해결 과정에서 배운 게 많았다.

왜 이런 버그가 발생했나

광고는 보통 제3자 스크립트(광고 네트워크)로 주입되는 요소들이다. 우리가 온전히 제어할 수 없는 콘텐츠인 만큼, 크기와 스타일이 예측 불가능한 경우가 많다. 특히 모바일 화면처럼 뷰포트가 좁은 환경에서는 더 그렇다.

데스크톱에서는 충분한 가로 공간이 있어서 광고가 제멋대로 커도 페이지 전체 레이아웃을 크게 흔들지 않는다. 하지만 모바일은 이야기가 다르다. 화면 너비가 320px에서 420px 정도로 제한적인데, 광고가 그 이상의 너비를 차지하려 하면 스크롤바가 생기거나 레이아웃이 밀려난다. 사용자 경험 측면에서 이건 매우 거슬리는 결과물이 된다.

표면적 증상과 근본 원인

사용자가 제보하는 증상은 보통 "화면이 이상하게 흔들린다", "가로로 스크롤이 생겼다", "뭔가 튀어나와 있다" 같은 식이다. 앱이나 웹사이트를 운영하다 보면 이런 리포트가 꽤 들어온다. 특히 모바일 환경에서.

근본 원인은 간단했다. public/styles.css 에서 광고 컨테이너에 대한 오버플로우 제어가 없었거나 미흡했다. 광고 요소가 부모 컨테이너의 경계를 무시하고 자신의 고유한 크기대로 렌더링되고 있었던 것.

CSS 가드의 패턴

이런 상황에서 일반적으로 쓰이는 가드 기법들이 있다:

내 경우엔 아마도 이들 중 하나 이상을 광고 컨테이너에 추가해서 "어떤 크기든 부모를 벗어나지 마" 라는 규칙을 강제했을 것이다.

팀 차원에서의 영향

이 버그는 작은 것처럼 보이지만, 실은 꽤 많은 사용자가 경험하는 문제였다. 모바일 우선 전략을 쓰는 요즘, 광고는 매출의 중요한 부분이고, 동시에 UX를 헤칠 수 있는 위험 요소다. 광고 네트워크의 스크립트와 우리 스타일을 제대로 조율하지 못하면, 아무리 좋은 콘텐츠도 첫인상에서 망친다.

이걸 해결하면서 깨달은 건, 외부 의존성(제3자 스크립트)에 대한 방어 코드의 중요성이다. 우리가 완전히 제어할 수 없는 요소들도 우리 디자인 시스템 안에서 안전하게 작동하도록 만들어야 한다.

앞으로의 체크리스트

비슷한 상황을 미리 방지하려면:

• 모바일 CSS 리뷰할 때 제3자 스크립트 삽입 영역 (광고, 채팅 위젯 등)을 별도로 점검
• 반응형 테스트할 때 가장 좁은 모바일 기기(320px 정도)에서 반드시 확인
• 광고 컨테이너에는 최소 오버플로우 가드 (overflow: hidden 또는 max-width: 100%)를 사전에 정해둔 패턴으로 적용
• 코드 리뷰 때 "이건 외부 콘텐츠 가능성이 있나?" 하고 한 번 더 물어보기

작은 버그 하나가 무의식적으로 팀의 QA 패턴을 개선하게 만드는 경험이었다.

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

• 모니터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• USB허브 쿠팡에서 보기 →

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