시작 페이지에 광고 게이트 모달과 5초 카운트다운 적용

시작 페이지에 광고 게이트 모달을 붙였다. 5초 카운트다운 동안 닫기 버튼이 비활성화되는 그 패턴.

왜 이 시점에 광고 게이트였나

서비스 초기엔 광고 노출을 최대한 자제하는 방향으로 갔다. UX 마찰을 줄이고 싶었기 때문이다. 근데 어느 시점부터 콘텐츠 소비 흐름을 보니, 랜딩 후 바로 이탈하는 패턴이 꽤 뚜렷했다. 모달 하나 세워서 최소한의 노출 시간을 보장하는 게 현실적인 선택지였다.

src/pages/t/[slug]/index.astro — 동적 라우팅 기반의 콘텐츠 페이지다. 여기서 slug 별로 진입하면 게이트 모달이 먼저 뜨고, 5초가 지나야 닫을 수 있다. src/layouts/Base.astro 쪽은 전역 레이아웃이라 모달 마운트 포인트나 스크립트 주입 관련 변경이 들어간 것으로 보인다. 레이아웃 레벨에서 처리한 건 재사용성 때문이다 — 나중에 다른 페이지에도 비슷한 게이트를 달아야 한다면 Base에서 제어하는 게 훨씬 깔끔하다.

5초 카운트다운 + 닫기 disabled 구현에서 신경 쓴 것들

이런 패턴은 구현 자체는 단순하다. 근데 디테일에서 꼭 한 번씩 문제가 생긴다.

let countdown = 5;
const closeBtn = document.getElementById('close-btn');

closeBtn.disabled = true;

const timer = setInterval(() => {
  countdown -= 1;
  closeBtn.textContent = `닫기 (${countdown})`;

  if (countdown <= 0) {
    clearInterval(timer);
    closeBtn.disabled = false;
    closeBtn.textContent = '닫기';
  }
}, 1000);

위 같은 구조가 기본인데, 실제로 신경 써야 할 포인트가 몇 가지 있다.

• 페이지 이탈 후 재진입 시 타이머 중복 실행 — SPA 라우팅이라면 컴포넌트 unmount 시 clearInterval 처리 안 하면 메모리 누수 + 타이머 꼬임
• disabled 스타일링 — 버튼이 비활성화 상태임을 시각적으로 명확히 해야 함. CSS만으로 처리하다가 접근성 속성(aria-disabled)을 빠뜨리는 경우가 많음
• 카운트다운 텍스트 업데이트 — 숫자만 바꿀지, "5초 후 닫기" 전체 문구를 바꿀지 — UX 관점에서 후자가 사용자에게 더 친절하다
• 모달이 뜨는 타이밍 — 페이지 로드 직후 바로 띄울지, 약간의 딜레이를 줄지 — 콘텐츠가 아직 렌더링 중인데 모달이 먼저 뜨면 레이아웃 시프트 느낌이 남

Astro는 기본적으로 SSG/SSR 기반이라 클라이언트 스크립트를 <script> 태그로 직접 내리는 방식을 많이 쓴다. is:inline이나 일반 <script> 블록 중 어느 걸 쓰냐에 따라 번들링 여부가 달라지고, 이게 타이머 관련 스크립트에선 은근히 영향을 준다.

광고 게이트 모달, 팀 관점에서의 트레이드오프

이런 기능을 팀에 제안할 때 항상 나오는 반응은 두 가지다. "UX 망가지는 거 아니냐"와 "그래도 수익화엔 필요하다". 둘 다 틀린 말이 아니다.

5초라는 숫자도 임의로 정한 게 아니다. 너무 길면 이탈, 너무 짧으면 광고 효과가 없다. 업계에서 일반적으로 쓰는 범위가 3~10초 사이인데, 5초는 그 중에서도 비교적 수용도가 높은 편이라 택했다.

회고

Base.astro를 건드릴 때마다 늘 긴장된다. 전역 레이아웃이니까 여기서 실수 하나 나면 모든 페이지에 영향이 간다. 이번엔 모달 마운트 포인트를 레이아웃에 두되, 실제 발동 로직은 슬러그 페이지 쪽에서 조건 분기하는 방식으로 분리했다. 레이아웃은 "틀"만 제공하고, 언제 어떻게 띄울지는 개별 페이지가 결정하는 구조. 이게 나중에 유지보수할 때 훨씬 낫다.

카운트다운 모달처럼 "사용자를 잠깐 막는" 패턴은 항상 의도를 명확히 해야 한다. 광고 때문이라는 걸 사용자가 알게 되면 단순 기다림이 되지만, 이유 없이 막혀 있으면 버그로 인식된다. 카운트다운 숫자를 보여주는 것 자체가 "곧 풀린다"는 신호를 주는 거고, 그게 사용자 불만을 꽤 줄여준다.

다음엔 카운트다운 시간을 slug 별로 다르게 가져갈 수 있는 구조도 고려해볼 만하다.

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

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

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