개발 slecs

로그인 페이지에 광고 도입하며 수익화 확장

목차

AdSense 수익화 전략의 일환으로 로그인 페이지에 광고를 노출시키는 작업을 진행했다. 서비스 초기 단계에서 비용 부담을 줄이기 위해 트래픽이 집중된 페이지들을 차례로 수익화 대상으로 삼는 중인데, 이번에는 로그인 페이지라는 신규 진입점을 활용하게 됐다.

왜 로그인 페이지에 광고를 넣나?

초기에는 로그인 페이지를 순수 기능 페이지로만 봤다. 사용자가 최소한의 마찰로 빠르게 들어와야 하는 곳이니까. 하지만 일일 활성 사용자(DAU)가 늘어나면서 관점이 바뀌었다. 로그인 페이지는 매일 수천 건의 노출을 받는 고트래픽 지점이다. 특히 신규 가입자들도 한 번은 반드시 거치는 만큼, 광고 노출 기회로 본다면 상당히 가치 있다.

다만 로그인 페이지 광고화를 결정할 때 팀 내에서 몇 가지 우려가 있었다:

  • UX 부담: 인증 과정 중 광고가 들어오면 사용자 이탈 가능성
  • 로딩 시간: AdSense 스크립트는 비동기지만, 렌더링 완료까지 영향을 줄 수 있음
  • 브랜드 이미지: 로그인처럼 중요한 단계에 광고가 있는 게 신뢰성을 해칠까?

결국 우리가 선택한 방향은 head tag에 AdSense 스크립트를 정적으로 주입하되, 광고 유닛은 페이지 하단 여백에만 배치하는 형태였다. 인증 UI와 광고를 명확히 분리하는 방식이다.

src/interface/server/web-pages.ts 파일에서 signin 페이지의 HTML을 구성할 때 AdSense head script를 포함시켰다. 방식 자체는 간단하지만, 여기서 고민할 점들이 많았다.

고려사항 선택 이유
head 주입 vs body 말미 head에서 조기 로드해야 ad unit이 렌더링될 때 window.adsbygoogle이 준비됨
async attribute AdSense 공식 권장사항. 메인 렌더링을 블로킹하지 않음
동적 vs 정적 주입 서버 사이드 렌더링이므로 web-pages.ts에 정적으로 포함하는 게 간결함
CSP 정책 고려 AdSense 도메인을 script-src 화이트리스트에 추가해야 함 
// 대략적 패턴 (실제 구현은 마스킹됨)
const headScripts = [
  '<!-- Google AdSense -->',
  '<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>'
];

// signin 페이지 HTML 생성 시 head에 병합

이렇게 하면 서버가 처음 HTML을 내려줄 때부터 AdSense 스크립트가 함께 전달되므로, 클라이언트 사이드에서 나중에 동적으로 주입할 필요가 없다. 특히 서버 렌더링 아키텍처에서는 이 방식이 가장 깔끔하다.

베스트 프랙티스와 주의점

광고 스크립트를 주입할 때 자주 마주치는 함정들이 있다.

1. 보안 정책 확인
Content-Security-Policy(CSP)가 설정되어 있다면, 외부 스크립트를 허용해야 한다. 특히 AdSense는 pagead2.googlesyndication.com, googleads.g.doubleclick.net 등 여러 도메인을 사용하므로 화이트리스트를 충분히 넓게 설정해야 한다. 아니면 나중에 개발자 콘솔에서 CSP 위반 경고를 받게 된다.

2. 로딩 순서
AdSense 스크립트가 로드된 후 실제 광고 유닛(<ins> 태그)이 렌더링되어야 올바르게 작동한다. 우리는 head에 스크립트를 먼저 주입하고, body의 적절한 위치에 ad unit을 배치하는 방식으로 순서를 보장했다.

3. 성능 모니터링
외부 스크립트 추가는 First Contentful Paint(FCP)나 Largest Contentful Paint(LCP) 같은 성능 지표에 영향을 줄 수 있다. async 속성을 사용해 논블로킹으로 로드하더라도, 광고 로딩 자체가 리소스를 소비한다. 프로덕션 배포 후 성능 모니터링이 필요하다.

4. 테스트 ID vs 운영 ID
개발 단계에서는 AdSense 테스트 클라이언트 ID를 사용해야 한다. 실제 ID로 테스트하면 계정이 제한될 수 있다. 배포 전 ID 교체를 빼먹는 실수를 여러 번 봤다.

회고: 작은 변경이 주는 거대한 결정

이 작업은 코드 라인으로는 큰 변경이 아니다. 한 파일, 아마도 10줄 정도의 추가일 것이다. 하지만 단순한 기술 작업으로 보기보다는 서비스의 수익 구조를 바꾸는 의사결정이라고 본다.

로그인 같은 핵심 페이지에 광고를 넣는 순간, 사용자 경험과 매출의 균형이라는 오래된 딜레마와 마주하게 된다. 우리 팀이 이 균형점을 찾기 위해 했던 논의—광고 유닛을 어디에 배치할지, 광고 밀도는 얼마나 할지, 사용자 이탈을 어떻게 모니터링할지—이 모두 이 한 줄의 기능 요청 뒤에 있다.

앞으로도 비슷한 수익화 작업들이 남아있을 거다. 각 페이지마다 트래픽, UX 영향, 예상 매출을 세세히 분석하고, 데이터에 기반해 의사결정하는 문화가 중요하다고 본다.

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

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

이어보기

댓글 0

첫 댓글 달아줘.