모바일 화면에서 광고가 튀어나오던 문제 해결

모바일 웹에서 광고가 화면을 벗어나는 현상을 CSS 레벨에서 처리했다. 간단한 수정처럼 보이지만, 반응형 디자인에서 서드파티 콘텐츠를 다루는 방식에 대해 꽤 많은 생각이 들어간 작업이었다.

모바일에서 광고가 자꾸 튀어나왔던 이유

처음 이 문제를 감지한 건 QA 단에서였다. 모바일 기기에서 광고 배너가 화면 너비를 초과해 오버플로우되고, 가로스크롤이 생기는 상황이 보고됐다. 일반적인 콘텐츠라면 디자인 시점에 크기를 정확히 예측할 수 있지만, 광고는 다르다. 광고는 보통 광고 네트워크에서 동적으로 제공되는 콘텐츠고, 소재 크기도 들쭉날쭉할 수 있다. 게다가 광고 스크립트가 DOM을 직접 조작하는 경우가 많아서, 개발 단계에서 모든 엣지 케이스를 예측하기는 거의 불가능하다.

모바일에서 특히 문제가 심한 이유는 뷰포트 폭이 좁기 때문이다. 300px 정도의 좁은 화면에 예상보다 큰 광고 크리에이티브가 들어오면, 그 즉시 오버플로우가 발생한다. 데스크톱이나 태블릿에서는 여유 공간이 있어서 동작하던 광고가 모바일에선 깨져 보이는 식이다.

CSS로 방어벽을 쳤다

결국 CSS 레벨에서 "광고는 어떤 크기가 와도 상자 밖으로 나가면 안 된다"는 원칙을 적용했다. 대표적인 패턴은 다음 같은 것들이다:

.ad-container {
  max-width: 100%;
  overflow: hidden; /* 또는 overflow-x: auto 등 */
  word-wrap: break-word;
}

/* 또는 더 강한 제약 */
.ad-container img,
.ad-container iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

이런 식으로 광고 컨테이너 자체를 제약하면, 광고 네트워크가 어떤 크기의 소재를 밀어 넣어도 화면을 벗어날 수 없다. 물론 이렇게 하면 광고가 의도한 크기보다 작게 렌더링될 수 있지만, 화면이 깨지는 것보다는 낫다는 판단이다.

public/styles.css 에 이런 규칙들을 추가한 건 "한 번 정의하면 전사적으로 모든 광고에 적용된다"는 뜻이다.

회고: 서드파티 콘텐츠는 "예외"로 취급해야 한다

이번 경험에서 배운 게 하나 있다면, 서드파티가 내재된 콘텐츠는 내 코드와 다른 위험 시나리오를 가진다는 점이다. 광고, 임베드 비디오, 챗봇 위젯, 외부 분석 스크립트 같은 것들은 내가 통제할 수 없는 변수다. 그래서:

• 방어적으로 설계한다: CSS 제약을 먼저 깔아두고, 그다음에 개선하는 식으로 생각한다.
• 테스트할 때 가능한 모든 크기를 고려한다: 고정 크기 광고뿐 아니라 반응형 광고도 테스트한다.
• 모니터링을 신경 쓴다: 광고 렌더링 오류가 실제 사용자 경험을 해치는지 주기적으로 체크한다.

팀에서도 이런 류의 수정이 자주 나온다. 광고 플랫폼 업데이트가 되거나 새로운 광고 포맷이 들어올 때마다 또 다른 오버플로우 문제가 튀어나오곤 한다. 그래서 "한 번 고치고 끝"이 아니라 "어떻게 하면 앞으로도 이런 문제가 덜 생기게 할까"를 자꾸만 생각하게 되는 영역이다.

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

• 모니터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →

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