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

모바일 환경에서 레이아웃의 광고 영역이 화면 경계를 넘어 오버플로우되는 문제를 발견해 Layout.astro 에 가드 로직을 추가했다. 반응형 디자인이 모두 커버되는 줄 알았는데, 3자 광고 컴포넌트 같은 예측하기 어려운 크기의 요소 앞에선 생각보다 취약했다는 걸 깨달은 작업이다.

모바일에서 광고는 늘 골칫거리

이커머스나 콘텐츠 플랫폼에서 광고 영역은 가장 다루기 까다로운 부분 중 하나다. 데스크톱에선 충분한 공간이 있어서 광고 네트워크가 제공하는 다양한 크기의 배너나 메시지를 여유 있게 배치할 수 있지만, 모바일이 되면 얘기가 달라진다.

320px 폭의 화면에 300px 폭의 광고가 들어오면? 당연히 튀어나간다. 광고 제공 업체에서 반응형 광고를 보내주거나, 애초에 우리가 생성하는 광고 코드가 모바일 친화적으로 설정되어 있어야 하는데, 현실에선 예상 밖의 크기가 들어올 때가 있다. 특히 업체별로, 시간대별로, 지역별로 다른 광고 규격이 들어오면서 테스트를 다 할 수 없는 상황이 생긴다.

Layout 에 가드를 꽂다

Layout.astro 는 모든 페이지의 기본 틀을 담당하는 컴포넌트다. 헤더, 푸터, 메인 콘텐츠 영역이 정의되어 있고, 대부분의 광고 영역도 여기서 관리된다. 이 레이아웃이 모바일과 데스크톱 양쪽에서 균형 있게 동작하려면, 각 섹션이 화면을 벗어나지 않는 범위 내에서 렌더링되어야 한다.

문제는 광고 영역에 명시적인 overflow 제어가 없었다는 것이다. 데스크톱 뷰에서는 광고가 할당된 공간 안에 자연스럽게 들어가 보였지만, 모바일에서는 부모 컨테이너의 경계를 무시하고 튀어나가곤 했다. 사용자 입장에선 화면을 옆으로 스크롤할 수 있게 되고, 콘텐츠와 레이아웃이 어색해 보인다.

반응형 가드의 패턴

보통 이런 상황에선 몇 가지 접근이 가능하다:

이 경우 가장 무난한 선택은 모바일 환경에서 광고 컨테이너에 overflow: hidden 과 명시적인 max-width 를 추가하는 것이었다. 광고가 완벽하게 보이지 않을 수도 있지만, 전체 레이아웃이 망가지는 것보다는 낫다. 혹은 광고 래퍼에 overflow-x: hidden; overflow-y: auto 를 주어 가로는 제어하되 세로 스크롤은 허용하는 방식도 생각할 수 있다.

배웠던 점들

이 작업을 하면서 느낀 건 몇 가지다.

첫째, 3자 컴포넌트는 항상 의심해야 한다. 우리 코드가 아닌 외부 광고 스크립트, 분석 도구, 임베드된 위젯 같은 것들은 우리의 CSS 규칙을 무시하거나 예상 밖의 동작을 할 수 있다. 따라서 그들을 격리하는 컨테이너에 방어적인 스타일을 미리 정의해두는 게 중요하다.

둘째, 모바일 테스트는 개발 과정에서 꼭 필요하다. 데스크톱에서만 완벽해 보여도 모바일에선 깨진다. 특히 광고, 이미지, 임베드 콘텐츠 같은 동적 요소들은 실제 디바이스나 브라우저 DevTools 의 모바일 뷰포트에서 여러 번 확인해야 한다.

셋째, 반응형 설계는 "휴대폰에 맞춘다"가 아니라 "모든 크기에 견딘다"는 뜻이다. 정확한 픽셀 완벽함보다 깨지지 않는 구조가 중요하다. 사용자가 어떤 디바이스에서, 어떤 광고와 함께 페이지를 열든 기본적인 가독성과 스크롤 경험은 보장되어야 한다.

네 번째로, 이런 버그들은 보통 QA 단계나 운영 중에 들어온다. 사용자로부터 "화면이 이상한데" 하는 신고가 들어오고, 재현하다 보면 "아, 어제 들어온 그 광고 네트워크 때문이구나" 하는 식으로 발견된다. 그래서 레이아웃 버그는 개발 시점보다 운영 시점에 더 많이 발견될 가능성이 높다는 걸 명심해야 한다.

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

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

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