계산기 페이지 전체의 광고 잘림 현상을 레이아웃에서 수정

광고 영역이 잘리는 이슈를 레이아웃 전반에 걸쳐 수정했다.

배경

사이드에 붙어 있는 광고가 특정 페이지에서 잘려 보인다는 걸 발견했다. 처음엔 한 페이지만의 문제인 줄 알았는데, 확인해보니 annual-leave, car-tax, earned-income-tax, hourly, income-tax — 계산기 계열 페이지 전체에서 동일하게 발생하고 있었다. 즉 특정 페이지의 문제라기보다 레이아웃 수준에서 광고 사이즈가 컨테이너에 맞춰지지 않고 있던 것.

광고 잘림은 사실 기능 버그보다 "조용히 넘어가기 쉬운" 류의 이슈다. 서비스 동작 자체에는 문제가 없으니 테스트에서 잡히지 않고, 수익 손실로도 직결되기 때문에 빠르게 짚고 넘어가야 한다고 판단했다.

어떻게 고쳤나

Layout.astro가 실질적인 진원지였다. 레이아웃 컴포넌트에서 광고 래퍼의 사이즈 처리가 제대로 안 돼 있어서, 각 페이지들이 그 레이아웃을 그대로 상속받으며 동일하게 잘림이 발생하고 있었다.

대략적인 패턴은 이런 형태였다.

<!-- before: 고정 width 또는 overflow 처리 없음 -->
<div class="ad-wrapper">
  <slot name="ad" />
</div>

<!-- after: 컨테이너에 맞게 사이즈 조정 -->
<div class="ad-wrapper" style="width: 100%; overflow: hidden;">
  <slot name="ad" />
</div>

광고 슬롯 자체보다 그걸 감싸는 래퍼가 자기 자리를 제대로 차지하지 못하고 있었던 게 핵심이었다. 각 페이지 파일들(*.astro)은 레이아웃을 import해서 쓰는 구조라 레이아웃 하나를 고치면 전 페이지에 반영된다.

변경 범위가 넓어진 이유

파일 수가 많아 보이지만 실제 변경의 무게중심은 Layout.astro에 있다. 나머지 페이지들은 레이아웃 변경에 따라 같이 손댄 부분이 있거나, 적어도 영향 범위 확인 차원에서 열어본 흔적들이다. 계산기 페이지들이 유독 잘림이 생겼던 건, 이 페이지들이 콘텐츠 높이가 가변적이라 광고 영역과 레이아웃 충돌이 더 잦았기 때문으로 보인다.

회고

이런 류의 버그는 "픽스 자체는 간단한데 발견이 늦어지는" 패턴이 많다. 광고가 조금 잘려도 사용자 입장에서는 그냥 넘기기 쉽고, 개발자 입장에서도 기능 이슈가 아니니 우선순위에서 밀리기 쉽다.

팀 입장에서 짚어둬야 할 것들:

• 광고처럼 외부 스크립트가 inject되는 영역은 레이아웃 변경 시 항상 같이 확인하는 게 맞다
• overflow: hidden / max-width / aspect-ratio 중 어떤 전략으로 광고 영역을 제어할지 공통 규칙을 잡아두면 이런 이슈가 반복되지 않는다
• 레이아웃 컴포넌트 하나가 여러 페이지를 커버하는 구조일수록, 레이아웃 수정의 파급 범위를 먼저 그려두는 습관이 필요하다

작은 픽스지만 수익과 직결되는 영역이라 빠르게 처리한 게 맞았다고 생각한다.

끝.

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

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

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