개발 slecs

모바일 광고로 레이아웃이 깨지던 문제 해결

목차

모바일에서 광고가 컨테이너를 벗어나 페이지 레이아웃을 망치는 현상을 CSS로 차단했다. 생각보다 자주 만나는 패턴인데, 한 번 정리해 둘 만한 주제였다.

광고와 오버플로우, 그리고 모바일

광고는 보통 외부 네트워크(구글 애드센스, 다른 광고 플랫폼 등)에서 동적으로 크기를 결정해서 삽입된다. 광고 네트워크가 제공하는 스크립트는 서버의 응답에 따라 배너 크기, 동영상 광고, 네이티브 형식 등을 유연하게 렌더한다. 문제는 이 동적 크기가 우리가 미리 정한 컨테이너 너비를 무시할 수 있다는 것.

데스크톱에서는 여유 공간이 많아서 광고가 살짝 커도 수평 스크롤이 생기거나 레이아웃이 밀려나는 게 눈에 띄지 않을 수 있다. 하지만 모바일은 뷰포트가 좁다. 320px 화면에 350px 광고가 들어오면 즉시 가로 스크롤이 생기거나, 광고 옆의 콘텐츠가 밀려난다. 사용자 입장에서는 화면을 자꾸 옆으로 스크롤해야 하는 답답한 경험이 된다.

CSS로 경계 지정하기

이번 수정은 public/styles.css 에서 광고 컨테이너에 오버플로우 방지 규칙을 추가한 것이다. 일반적인 패턴은 이렇다:

/* 광고 컨테이너 */
.ad-container {
  overflow: hidden;  /* 넘친 부분 숨기기 */
  width: 100%;       /* 부모 크기에 맞추기 */
  max-width: 100%;   /* 모바일에서 명시적 제한 */
}

/* 혹은 더 엄격하게 */
.ad {
  max-width: 100%;
  overflow-x: hidden;
}

이런 규칙을 적용하면 광고 네트워크가 원하는 크기보다 크더라도, CSS가 물리적으로 그 경계를 지킨다. 광고가 잘릴 수도 있지만 (불완전한 렌더), 적어도 페이지 레이아웃이 흔들리지 않는다. 이건 UX와 기술 구현 사이의 트레이드오프다. 완벽한 광고 노출보다 깔끔한 사용자 경험을 우선시한 선택.

반응형에서 자주 놓치는 부분

CSS만으로는 부족할 때가 있다. 여러 상황에서 주의했던 점:

  • 미디어 쿼리로 모바일 특화: 데스크톱에서는 광고가 스크롤되어도 괜찮을 수 있으니, 모바일(max-width: 768px 같은 breakpoint) 에서만 더 엄격한 제약을 둘 수도 있다.
  • 광고 래퍼와 실제 광고 요소: 광고 라이브러리가 생성하는 <iframe> 이나 <div> 에 직접 스타일을 적용하기 어려울 수 있다. 그래서 부모 컨테이너에 경계를 지정하는 방식을 쓴다.
  • 높이 제약도 필요할 수 있음: 광고가 세로로 튈 수도 있으니 max-height 나 aspect-ratio 를 함께 고려한다.

팀 관점의 회고

이런 종류의 fix는 사용자 피드백에서 출발하는 경우가 많다. "아이폰에서 화면이 자꾸 밀려요", "왜 옆으로 스크롤이 생겨요" 같은 지적이 여러 건 들어왔을 테니.

한 가지 배운 점은, 외부 스크립트(광고, 분석, 채팅 위젯 등)와의 충돌은 처음부터 염두에 두고 설계해야 한다는 것. 우리 코드가 아니라 제3자 코드이기 때문에 통제가 어렵다. 그래서:

  1. 컨테이너 경계를 먼저 물리적으로 고정
  2. 모바일 환경에서 자주 테스트 (실제 광고 네트워크가 응답한 크기로 테스트)
  3. 광고가 잘릴 때 대체 전략 (예: 모바일에서 광고 높이 줄이기, 더 작은 포맷 요청)

CSS 한 줄로 보이지만, 이 뒤에는 "어디서 경계를 지을 것인가"라는 의사결정이 있다. 코드 리뷰할 때도 이런 부분을 짚어본다. 왜 하필 overflow: hidden 이고 overflow-x: auto 가 아닌가. 모바일에서는 가로 스크롤이 답답한 경험이니까.

다음.

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

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

이어보기

댓글 0

첫 댓글 달아줘.