개발 slecs

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

목차

공공 스타일시트 하나의 CSS 가드로 모바일 환경에서 광고 컨테이너가 흘러넘치는 버그를 막았다. 단순한 스타일 수정처럼 보이지만, 외부 콘텐츠를 다루는 프론트엔드 개발에서 자주 마주치는 "경계 보호" 문제를 다시 한 번 생각해보게 된 작업이었다.

광고와 반응형의 불편한 진실

광고는 보통 제3의 라이브러리나 스크립트로 동적 렌더링된다. 우리 관점에서는 크기를 완전히 예측하거나 제어하기 어렵다. 더군다나 모바일 화면처럼 공간이 제한적인 환경에서는 선언한 치수보다 큰 광고가 들어오거나, 콘텐츠 내부에 줄바꿈 규칙 없는 텍스트가 섞일 수 있다.

이번 경우 모바일 뷰포트(보통 320px ~ 768px)에서 광고 엘리먼트가 부모 컨테이너의 경계를 넘어가는 현상이 발생했다. 레이아웃이 옆으로 삐져나가면서 가로 스크롤이 생기거나, 인접한 UI 요소들이 예상 위치를 벗어나는 일이 생긴 것이다.

일반적으로 이 종류 버그는 개발 초기에는 눈에 띄지 않는다. 왜냐하면 테스트할 때 쓰는 광고 데이터는 보통 안전한 크기이기 때문이다. 실제 운영 환경에서 다양한 광고주의 콘텐츠가 들어오다 보면 "어? 이 광고는 왜 삐져나와?" 하는 상황이 발생한다.

CSS로 경계선 그어주기

이 문제의 해결책은 간단했다. CSS의 overflow 처리와 max-width 제약을 활용하는 것이다. 공통 스타일시트에 광고 컨테이너에 대한 가드 규칙을 추가했다.

일반적인 패턴은 다음과 같다:

/* 광고 컨테이너 기본 가드 */
.ad-container {
  max-width: 100%;
  overflow: hidden;
}

/* 모바일에서 더 강하게 */
@media (max-width: 768px) {
  .ad-container {
    width: 100%;
    overflow-x: hidden;
    word-break: break-word;
  }
}

여기서 중요한 선택지들:
- overflow: hidden — 살짝 튀어나온 부분을 자른다. (보수적)
- overflow: auto — 스크롤 가능하게 한다. (광고 내 스크롤은 사용자 경험에 악영향)
- word-break: break-word — 긴 단어도 끝에서 나뉜다. 광고 텍스트 깨짐 방지.

내 경우 overflow: hidden을 주로 선택했다. 광고는 배치 때부터 완전한 크기를 알고 있어야 하고, 사용자는 광고 스크롤을 기대하지 않기 때문이다.

회고: 한 줄짜리 수정이 담은 의미

이 커밋은 라인 수는 작지만, 여러 가지를 생각하게 한다.

첫째, 외부 의존성의 방어다. 광고 스크립트를 우리가 완전히 통제할 수 없을 때, 스타일시트 단계에서 "최소한 이 정도는 안 벗어날 거야"라는 경계를 그어주는 것이 중요하다. 마찬가지로 iframe, 유저 생성 콘텐츠, 서드파티 위젯을 다룰 때도 같은 원칙을 적용한다.

둘째, 반응형 설계는 모든 화면 크기에 대한 책임이다. 데스크톱에서 완벽하게 동작하는 레이아웃도 태블릿과 모바일에서는 예상 밖의 행동을 할 수 있다. 특히 동적으로 들어오는 콘텐츠를 다룰 때는 더욱 그렇다.

셋째, CSS 가드는 조용한 방어다. 에러 처리나 검증 로직처럼 눈에 띄지는 않지만, 사용자가 깨진 화면을 보지 않도록 하는 최후의 보루다. 단순히 "문제가 없으면 되는" 수준이 아니라 "문제가 나도 사용 가능한 상태를 유지한다"는 마인드로 접근해야 한다.

이런 일은 코드 리뷰할 때도 중요하게 봐야 한다. 누군가 새로운 광고 콘텐츠나 레이아웃을 추가할 때, "모바일에서는 어떻게 보이나?", "동적 크기 콘텐츠는 벗어나지 않나?"를 확인하는 습관이 필요하다. 작은 수정 같아도 뒤에는 이런 세심한 관찰과 경험이 있다.

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

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

이어보기

댓글 0

첫 댓글 달아줘.