광고가 모바일에서 튀어나가던 버그 수정

모바일 환경에서 광고 요소가 화면을 벗어나며 UI를 깨뜨리는 문제를 발견하고, CSS 오버플로우 가드로 대응했다.

마주친 문제

팀원들로부터 보고가 들어왔다. 모바일 앱에서 특정 페이지의 광고가 화면 가장자리를 넘어가면서 레이아웃이 흐트러진다는 것. 사용자 관점에서는 광고 콘텐츠 일부가 잘려 보이거나, 스크롤 바가 생기는 식으로 화면 전체가 밀려 보인다. 사소해 보이지만 모바일 UX에서는 이런 미세한 레이아웃 깨짐이 전문성을 크게 떨어뜨린다.

문제의 원인은 광고 배너나 광고 네트워크에서 주입하는 요소가 부모 컨테이너의 너비 제약을 무시하고 고정값이나 절대값으로 설정되어 있었기 때문이었다. 반응형 설계가 제대로 되지 않은 광고 요소가 작은 화면에서 그대로 렌더링되면서 오버플로우되는 것이다.

CSS 레벨에서의 방어선

backend/src/main/resources/static/styles.css 파일에 간단한 CSS 규칙을 추가했다. 광고 요소가 속한 컨테이너에 오버플로우 가드를 적용하는 방식이다. 핵심은:

• 광고 요소를 감싸는 컨테이너에 overflow: hidden 혹은 overflow-x: hidden 처리
• 내부 광고 요소에 max-width: 100% 강제 적용
• 필요시 box-sizing: border-box 로 패딩/보더까지 너비에 포함

이런 처리는 광고 서드파티 라이브러리가 어떤 크기로 렌더링하든 그것이 부모 경계를 벗어나지 못하도록 사실상 "바운더리"를 쳐주는 것이다.

왜 이런 버그가 흔한가

팀과 얘기하다 보면 이 유형의 버그가 꽤 일반적이란 걸 깨닫는다. 몇 가지 이유가 있다:

1. 외부 요소의 통제 밖 — 광고는 대부분 서드파티 스크립트/iframe에서 주입된다. 그들의 CSS가 우리의 반응형 설계 철학을 따르지 않을 수 있다.
2. 모바일 테스트 빠뜨림 — 개발할 때 desktop을 중심으로 작업하면, 모바일 환경에서의 광고 동작은 후순위가 되기 쉽다.
3. CSS 계층화의 문제 — 광고 요소가 어떤 CSS 규칙을 갖고 있는지 추적하기 어렵다. 그래서 부모에서 방어선을 치는 게 현실적이다.

내 관점에선, 이런 버그는 "개별 요소의 자립성"과 "시스템 전체의 견고성" 사이의 갭을 드러낸다. 팀이 처음 광고 기능을 붙일 때 "최악의 경우 광고가 이런 크기로 뜨면 어떻게 할 것인가"를 미리 가정하지 않았던 것이다.

체크포인트

이 수정 이후로 팀 내에서 새로운 습관을 들이기 시작했다:

• 외부 요소 테스트: 서드파티 스크립트나 iframe을 삽입할 때 모바일 환경(375px, 414px 폭)에서의 동작을 체크리스트화
• CSS 가드 레이어: 사용자 입력 같은 예측 불가능한 콘텐츠뿐 아니라 서드파티 콘텐츠도 "일단 깨질 수 있다"고 가정하고 방어 CSS 추가
• 코드 리뷰: 새로운 외부 요소 추가 PR에서 "모바일에서 이게 어떻게 보이나?" 질문을 빼먹지 않기

작은 CSS 한두 줄이지만, 이것이 가능한 이유는 부모 컨테이너를 믿고 그곳에 경계를 명확히 했기 때문이다. 다음에 또 다른 예측 불가능한 요소가 들어와도, 같은 원칙으로 대응할 수 있게 된 것.

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

• 모니터 쿠팡에서 보기 →
• 노트북 쿠팡에서 보기 →
• 사무의자 쿠팡에서 보기 →

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