모바일 결과 페이지에서 광고가 모달을 뚫고 나오는 버그 수정

모달 높이 제한이 없어서 특정 뷰포트에서 광고가 모달을 뚫고 나오는 문제를 잡았다.

왜 이 타이밍에 터졌나

레이아웃 파일(Base.astro)과 결과 페이지([result].astro) 두 군데가 동시에 엮인 이슈였다. 모달 컴포넌트는 전역 레이아웃에 물려 있고, 결과 페이지에는 모바일 300x250 광고 슬롯이 본문 안에 박혀 있었다. 둘이 따로 있을 땐 그럭저럭 문제 없어 보였는데, 모바일에서 결과 페이지 위에 모달이 올라오는 순간 레이아웃이 터졌다.

광고 슬롯(300x250)이 본문 흐름에 그냥 인라인으로 들어가 있으면, 모달이 그 위에 overlay로 올라와도 스크롤 컨테이너나 z-index 스택이 꼬이면서 광고 영역이 모달 바깥으로 밀려 나오는 케이스가 생긴다. 특히 position: fixed 또는 overflow: hidden이 걸린 모달 래퍼와 300x250 iframe 계열 광고가 만나면 클리핑이 의도대로 안 되는 건 꽤 흔한 조합이다.

두 가지를 동시에 건드린 이유

처음엔 Base.astro만 건드려서 모달 높이를 제한하는 것만 시도했다. max-height를 주면 콘텐츠가 길어져도 모달 박스 자체가 화면을 벗어나지 않으니까. 근데 그것만으론 부족했다. 결과 페이지 모바일에서 본문 중간에 박힌 300x250 슬롯이 모달 오버레이랑 충돌하는 건 높이 제한으로 해결되는 게 아니었다. 광고 iframe의 z-index 관리나 stacking context 문제는 CSS만으로 완전히 제어하기 어려운 경우가 있어서, 결국 해당 슬롯을 결과 페이지 모바일 본문에서 제거하는 쪽으로 결정했다.

/* Base.astro 모달 래퍼 */
.modal-container {
  max-height: 700px;
  overflow-y: auto;
}

이렇게 단순해 보이지만, max-height 없이 운영하다가 콘텐츠가 길어지면 모달이 뷰포트 아래로 넘어가고, 모바일에서는 닫기 버튼이 잘려서 안 보이는 UX 참사가 따라온다. 이번 기회에 넣어둔 것.

광고 슬롯 제거 결정의 트레이드오프

본문에서 슬롯을 뺀다는 건 해당 지면 수익이 그만큼 줄어든다는 얘기다. 가볍게 결정할 수 있는 일이 아닌데, 이번엔 꽤 명확했다.

• 모달이 결과 페이지에서 핵심 인터랙션인데, 그게 광고 충돌로 깨지면 UX 자체가 망가짐
• 모바일 300x250은 뷰포트 대비 점유율이 높아서 본문 흐름도 이미 좋지 않았음
• 광고 슬롯 위치를 옮기거나 조건부 렌더링으로 모달 열릴 때만 숨기는 방법도 있었지만, 복잡도 대비 효과가 불확실했음

결과적으로 제거가 맞다고 봤다. 복잡한 조건 분기를 추가해서 버그 발생 표면적을 늘리는 것보다, 깔끔하게 해당 케이스를 잘라내는 게 지금 단계에서 옳은 선택이었음.

회고

Base.astro처럼 전역 레이아웃을 건드릴 때는 항상 다른 페이지에도 영향이 가는지 확인하는 게 기본인데, 이번엔 반대로 페이지별 컴포넌트([result].astro)가 전역 레이아웃의 모달에 간섭하는 케이스였다. 방향이 거꾸로였던 거다. 이런 건 페이지 단위로 보면 안 보이고, 실제 사용 흐름(결과 페이지 → 모달 오픈)으로 봐야 재현이 된다. QA 시나리오를 기능 단위가 아니라 사용자 흐름 단위로 설계해야 한다는 걸 다시 한 번 확인한 작업이었다.

끝.

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

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

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