광고 게이트 모달을 전역 레이아웃에 탑재한 수익화 컴포넌트 설계기

광고 게이트 모달을 새로 붙이면서, 컴포넌트 설계 방향을 두고 꽤 오래 고민했다.

왜 게이트 모달인가

콘텐츠 수익화를 고민할 때 가장 먼저 떠오르는 건 배너 광고지만, 실제로 사용자 행동에 영향을 주는 패턴은 따로 있다. 그 중 하나가 ad gate — 특정 콘텐츠에 접근하기 전 광고를 잠깐 보여주는 방식이다. 유튜브 프리미엄 없이 영상 보기 전 광고 보는 것과 비슷한 개념이라고 보면 된다.

이번에 붙인 건 그 게이트 모달이다. 단순히 "광고 띄운다"가 아니라, 광고를 본 뒤 콘텐츠 접근이 허용되는 흐름 자체를 컴포넌트로 캡슐화하는 게 목표였다.

psy 패턴으로 설계한 이유

psy 패턴이라는 표현을 커밋 메시지에 직접 달았는데, 이건 psychological pattern — 즉 사용자 심리 흐름을 고려한 UI/UX 설계 패턴이다. 단순히 모달을 띄우고 닫는 게 아니라, 사용자가 "광고를 봤다"는 감각을 자연스럽게 인지하면서도 거부감 없이 다음 단계로 넘어가도록 유도하는 구조를 만드는 것.

이런 류의 모달을 설계할 때 흔히 빠지는 함정이 있다.

• 닫기 버튼을 너무 눈에 띄게 만들어서 광고 자체를 스킵하게 방치함
• 반대로 닫기를 너무 숨겨서 사용자에게 강압적인 인상을 줌
• 카운트다운 타이머만 넣고 인터랙션 피드백을 빼먹어서 "멈춰있는 것처럼" 보임

psy 패턴이라고 이름 붙인 건, 이 밸런스를 의식적으로 잡으면서 설계했다는 뜻이다. 광고를 본 사용자가 "내가 뭔가 교환했다"는 느낌을 받을 수 있도록.

파일 구조 — 왜 세 파일이 엮였나

Astro 프로젝트에서 layouts/Base.astro를 건드렸다는 건 꽤 의미 있는 결정이다. 특정 페이지에만 모달을 붙이는 게 아니라, 레이아웃 레벨에서 전역으로 마운트하겠다는 뜻이기 때문이다. 조건부 렌더링이나 클라이언트 측 진입 제어를 레이아웃에서 처리하면, 개별 페이지마다 컴포넌트를 임포트하는 수고를 줄일 수 있다.

src/components와 루트 components 두 경로에 파일이 나뉜 건, Astro 프로젝트에서 종종 발생하는 경로 혼선이다. 팀 내 컨벤션이 정착되기 전엔 이런 이중 경로가 생기기 쉽고, 나중에 리팩토링 부채로 남을 수 있으니 조만간 정리가 필요하다.

수익화 컴포넌트, 얼마나 격리할 것인가

광고 관련 컴포넌트를 설계할 때 팀장 입장에서 항상 따지는 게 있다. 비즈니스 로직과 UI 로직의 격리 수준이다.

---
// AdGateModal.astro 개념 구조 (일반 예시)
const { gateId, redirectTarget } = Astro.props;
// 광고 노출 여부, 이미 본 사용자 판별은 이 컴포넌트 밖에서 처리
---

<div class="ad-gate-overlay" data-gate-id={gateId}>
  <div class="ad-gate-modal">
    <!-- 광고 슬롯 -->
    <slot name="ad" />
    <!-- 타이머/진행 피드백 -->
    <div class="gate-timer" />
    <!-- 접근 허용 트리거 -->
    <button class="gate-confirm" data-target={redirectTarget}>
      계속하기
    </button>
  </div>
</div>

이 정도 구조라면, 광고 슬롯 내용이 바뀌어도 게이트 로직 자체를 건드릴 필요가 없다. 수익화 방식이 바뀌거나(예: 광고 → 포인트 소모), 게이트 조건이 바뀌어도 컴포넌트 외부에서만 수정하면 된다. 이런 격리가 되어 있지 않으면 광고 소재 교체 하나에 모달 전체 로직을 재검토해야 하는 상황이 생긴다 — 팀 리소스 낭비다.

짧은 회고

모달 하나 붙이는 작업이라고 하면 단순해 보이지만, 수익화와 직결된 컴포넌트는 UX 판단, 경로 설계, 전역 마운트 전략이 전부 얽혀 있다. 특히 Base.astro 건드리는 순간부터 "이 변경이 모든 페이지에 영향을 준다"는 긴장감이 생긴다. 그만큼 조건 분기를 꼼꼼히 챙겨야 한다.

경로 혼선은 다음 PR 때 한 번 정리할 것.

끝.

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

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

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