개발 slecs

모바일 광고 오버플로우로 인한 레이아웃 깨짐 방지

목차

모바일 환경에서 광고 컨텐츠가 화면 밖으로 튀어나오면서 레이아웃이 망가지는 현상을 CSS 레벨의 responsive 가드로 해결했다. site/src/styles/global.css 파일에 오버플로우 방지 로직을 추가한 작업인데, 단순해 보이지만 꽤 흥미로운 문제와 해결 과정이 담겨 있다.

광고는 외부 컨텐츠다

광고 시스템을 다뤄본 사람이라면 이 문제의 본질을 안다. 광고 틀(ad slot)에 들어올 컨텐츠를 우리가 완전히 통제할 수 없다는 것이다. 광고주나 광고 네트워크에서 제공하는 이미지, 텍스트, 동영상의 크기는 예측하기 어렵다. 특히 이미지 비율이나 텍스트 길이가 우리가 설계한 광고 영역 크기와 맞지 않을 때가 많다.

모바일 화면은 데스크톱보다 뷰포트가 훨씬 좁다. 같은 광고 소재도 모바일에선 원래 크기 그대로 렌더되면 자연스럽게 화면 경계를 벗어난다. 그동안 이 부분에 대한 방어 로직이 없었던 것 같다. 사용자가 화면을 옆으로 스크롤해야 하거나, 광고 영역 때문에 주 콘텐츠가 밀려나는 UX 문제가 발생했을 것이다.

CSS로 경계를 지키다

이 문제를 CSS의 레벨에서 해결한다는 게 핵심이다. 과정은 대략 이렇다:

문제 CSS 해결책
광고 이미지 너비가 고정값일 때 max-width: 100% 또는 width: 100%; max-width: <설정값>
텍스트가 컨테이너를 뚫을 때 overflow: hidden, text-overflow: ellipsis, word-break: break-word
광고 래퍼가 여유 공간을 차지할 때 box-sizing: border-box, padding/margin 재검토
모바일에서만 문제일 때 media query로 breakpoint별 다른 규칙 적용

가장 일반적인 패턴은 광고 컨테이너에 overflow: hidden 또는 overflow: auto를 걸어서 내부 콘텐츠가 경계를 넘지 못하게 막는 것이다. 동시에 이미지나 자식 요소들에 max-width: 100%를 적용해서 부모 크기에 맞추도록 강제한다.

/* 광고 영역의 responsive 가드 예시 */
.ad-container {
  width: 100%;
  overflow: hidden;  /* 오버플로우 차단 */
}

.ad-container img {
  display: block;
  max-width: 100%;   /* 부모 너비에 맞춤 */
  height: auto;      /* 비율 유지 */
}

/* 모바일 전용 추가 규칙 */
@media (max-width: 768px) {
  .ad-container {
    overflow: hidden;
    word-break: break-word;  /* 긴 텍스트 줄바꿈 */
  }
}

왜 지금 고쳤는가

이런 류의 버그는 보통 두 가지 경로로 드러난다. 하나는 사용자 신고(특히 모바일 사용자), 다른 하나는 개발자가 실제 모바일 기기로 테스트하다가 발견하는 것이다. 이 경우도 아마 그중 하나였을 것 같다.

흥미로운 점은, 이 문제가 "responsive" 카테고리에만 고쳐졌다는 거다. 즉, 데스크톱이나 태블릿에서는 이미 문제가 없었거나 눈에 띄지 않았다는 뜻이다. 이건 뷰포트 크기를 기준으로 하는 CSS media query의 필요성을 보여준다. 모바일만 따로 처리해야 한다.

회고: 광고 같은 외부 컨텐츠 다루기

이 경험에서 배운 점이 있다:

  • 예측 불가능한 컨텐츠는 CSS 레벨에서 방어하자. 광고, 사용자 생성 콘텐츠, 외부 임베드 등은 크기나 형식이 불확실하다. 이런 요소들을 감싸는 컨테이너에는 항상 오버플로우 처리를 기본으로 설정하는 게 좋다.

  • 모바일 테스트는 별도의 단계다. 데스크톱 브라우저의 모바일 에뮬레이션도 도움이 되지만, 실제 모바일 기기에서 한 번은 확인해야 한다. 뷰포트 크기뿐 아니라 네트워크 속도, 터치 인터랙션, 화면 방향 전환 같은 변수가 더 있다.

  • 글로벌 CSS에 이런 가드를 넣는 건 절충이다. 모든 광고에 동일한 규칙을 적용하는 게 간단하지만, 광고 종류별로 다른 스타일이 필요하면 더 세밀한 조정이 필요하다. 그래서 이런 기본 가드는 "최악의 상황을 방지하는 safety net" 역할을 한다고 보면 된다.

단순한 CSS 픽스처럼 보이지만, 사실 외부 컨텐츠를 다루는 팀이 겪는 전형적인 문제를 해결한 것이다. 다음에 비슷한 상황이 오면, 처음부터 오버플로우 방지를 설계에 포함시키면 이런 fix가 필요 없을 것 같다.

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

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

이어보기

댓글 0

첫 댓글 달아줘.