모바일 광고 오버플로우로 가로스크롤 나던 버그 수정

포트폴리오 사이트에 수익화 목적으로 AdSense 광고를 붙였는데, 모바일에서 가로스크롤이 자꾸만 생겼다. 광고 iframe이 고정 너비(1280px)로 설정되어 있었고, 모바일 뷰포트(375px 정도)에서 그대로 렌더링되면서 벌어진 문제였다.

광고 iframe의 함정

이런 문제는 생각보다 흔하다. 광고 플랫폼에서 제공하는 iframe은 보통 데스크톱 기준으로 설계되어 있고, 너비를 고정값으로 강제하는 경우가 많기 때문이다.

• 기본 광고 사이즈: 300px, 728px, 또는 큰 포맷 1280px 등
• 문제 상황: HTML이나 CSS에서 별도 처리 없으면, 모바일 기기에서도 그 너비 그대로 렌더링
• 결과: 모바일 뷰포트보다 큰 컨텐츠 → 강제 가로스크롤

특히 포트폴리오 같은 개인 서비스는 광고 통합이 자주 후덜미 처리되곤 한다. "일단 수익화부터 해보자"는 마음으로 광고 코드만 복사-붙여넣기 하다가, 모바일 QA 단계에서야 발견되는 패턴이다. 이번 경우도 마찬가지였는데, 사용자가 지적하기 전에 잡을 수 있어서 다행이었다.

해결 방식: 템플릿과 CSS로 오버플로우 가드

변경한 파일들을 보면:

base.html에 다음과 같은 패턴을 도입했다:

<!-- 광고 영역을 뷰포트 너비로 제한 -->
<div class="ad-container ad-responsive">
  <ins class="adsbygoogle"
       style="display:block"
       data-ad-client="..."
       data-ad-slot="..."></ins>
</div>

.ad-responsive {
  max-width: 100%;
  overflow-x: hidden;
  width: 100%;
}

.ad-responsive ins {
  max-width: 100%;
  display: block;
}

/* 모바일: 광고도 반응형으로 제약 */
@media (max-width: 768px) {
  .ad-responsive {
    padding: 0 1rem;
    box-sizing: border-box;
  }
}

핵심은 광고 iframe을 명시적으로 뷰포트 너비 안으로 강제하는 것이다. CSS max-width: 100%와 overflow-x: hidden으로 어느 기기에서도 스크롤이 안 생기도록 막았고, base.html 한 곳에서 처리했으니 한국어/영문 포트폴리오 모두 자동으로 적용된다.

외부 서비스 통합의 원칙

이 fix를 하면서 팀과 함께 확인한 요점들:

제3자 라이브러리는 항상 wrapper로 감싼다
- 광고, 채팅, 분석 스크립트 등은 대부분 데스크톱 중심 설계
- "이 라이브러리는 responsive일 것"이라는 가정 금지
- 반드시 우리 사이트의 규칙을 강제할 수 있는 wrapper와 CSS로 감싸기

base.html 같은 공통 템플릿의 가치
- 한 곳 수정이 전체 사이트에 영향 → 일관성 유지 용이
- 다국어 지원할 때 광고 관련 유지보수 포인트가 명확해짐
- 나중에 다른 광고 플랫폼으로 마이그레이션할 때도 base.html만 수정

모바일 우선 사고의 실제 가치
- 이론으로만 "모바일 먼저"라고 해도, 외부 서비스 통합 순간 빈틈이 생김
- 광고처럼 직접 만들지 않은 컨텐츠는 특히 주의 필요
- QA 체크리스트에 "iframe, embed, 외부 스크립트 기반 컨텐츠는 모바일 테스트 필수" 항목 추가하기로 함

이 fix는 코드량으로 보면 작지만, 팀이 운영하는 서비스에서 외부 컨텐츠를 안전하게 다루는 태도를 다시 점검한 계기가 됐다. 특히 수익화 기능들이 점점 늘어나면서, 이런 방어적 통합 패턴이 얼마나 중요한지 느껴진다.

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

• 모니터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 사무의자 쿠팡에서 보기 →

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