모비온 광고 모달을 레이아웃에 통합하고 X 버튼 클릭 필수로 확정

모비온 모달을 레이아웃 레벨에 통합하면서, X 버튼 광고 처리 방식을 "자동 닫기 없음, 클릭 필수"로 확정한 작업이었다.

왜 레이아웃에 통합했나

Base.astro에 모달을 넣은 건 의도적인 선택이었다. 특정 페이지(t/[slug]/index.astro)에서만 쓰는 컴포넌트를 페이지 단위로 관리하면 slug별 레이아웃 파편화가 생기고, 나중에 다른 슬러그 페이지가 늘어날 때마다 같은 코드를 반복해야 한다. 팀 관점에서 보면 이건 나중에 반드시 누군가 빠뜨리는 구조다.

베이스 레이아웃에 한 번 박아두면 모든 하위 페이지가 일관되게 모달을 상속받는다. [slug] 페이지 쪽은 모달을 "띄우는 트리거" 역할만 담당하고, 실제 렌더링은 Base.astro가 가져가는 식으로 역할을 분리했다. 변경 파일이 두 개인 이유도 이 구조 때문이다.

X 버튼 광고: 자동 닫기를 제거한 이유

이 작업에서 가장 많이 논의된 부분이 여기였다.

광고 모달에서 "자동 닫기(auto-dismiss)" 동작을 넣고 싶은 유혹은 늘 있다. 사용자 UX를 해치지 않으려는 의도인데, 실제로는 광고 파트너 쪽 요건이 충돌한다. 모비온 같은 광고 네트워크는 X 버튼 자체를 광고 소재로 활용하는 케이스가 있고, 이 경우 닫기 액션이 "노출 종료"가 아니라 "클릭 이벤트"로 집계되어야 한다. 자동 닫기를 허용하면 실제 유저 인터랙션 없이 광고가 종료되어 집계 오류가 생기거나, 파트너 정산 기준을 못 맞추는 상황이 된다.

그래서 정리한 방식은 이렇다:

클릭 필수 구조는 UX 관점에서 다소 강압적으로 보일 수 있지만, 광고 모서리 영역에 X 버튼을 배치하는 레이아웃 자체가 그 긴장감을 어느 정도 완화해준다. 버튼이 눈에 잘 띄고 접근하기 어렵지 않으면 "닫을 수 없다"는 불쾌감보다 "봤으니 닫겠다"는 자연스러운 흐름으로 이어진다.

<!-- Base.astro 모달 구조 예시 패턴 -->
<div id="mobion-modal" class="modal-wrapper">
  <div class="modal-content">
    <!-- 광고 소재 영역 -->
    <slot name="ad-content" />
    <!-- X 버튼: 모서리 고정, 클릭만 닫기 -->
    <button
      class="close-btn corner"
      onclick="closeMobionModal()"
      aria-label="닫기"
    >✕</button>
  </div>
  <!-- backdrop 클릭 닫기 없음: pointer-events: none or no handler -->
</div>

backdrop에 별도 close 핸들러를 달지 않는 것, 타이머 로직을 아예 두지 않는 것, 이 두 가지가 "클릭 필수" 구현의 핵심이다.

회고

[slug]/index.astro 입장에서 이 변경은 꽤 큰 책임 이전이었다. 페이지가 직접 모달을 제어하던 구조에서 레이아웃이 모달을 소유하는 구조로 바뀌면서, 슬러그 페이지 코드가 얇아졌다. 이런 변경은 단기적으로 "왜 페이지에서 못 찾지?"라는 혼란을 팀원에게 줄 수 있어서, PR 설명에 구조 변경 이유를 명시하는 게 중요하다고 생각했다.

광고 통합 작업은 기술적으로 복잡하지 않아도 비즈니스 요건과 UX 요건이 충돌하는 지점을 계속 만나게 된다. 이번에 "자동 닫기 X"라는 결정은 사실 UX팀 눈치 보면서 고민했던 부분인데, 광고 파트너 정산 기준을 먼저 확정하고 나니 선택지가 명확해졌다. 요건 우선순위를 먼저 잡는 게 기술 결정을 오히려 쉽게 만든다는 걸 다시 느꼈다.

다음은 모비온 외 다른 광고 소재가 들어올 때 Base.astro 모달 구조가 얼마나 유연하게 대응하는지 검증하는 작업이 될 것 같다.

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

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

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