블로그 광고 세 곳 통합하고 흩어진 배너와 스폰서 라벨 일괄 정리
목차
광고 제공자를 세 곳으로 묶고, 기존에 흩어져 있던 Sponsored 라벨과 정적 배너를 일괄 제거한 날.
왜 이 시점에 통합했나
블로그에 광고를 붙이는 건 생각보다 결정을 많이 요구하는 작업이다. AdSense 하나만 달면 심사 대기가 있고, Coupang이나 AliExpress 제휴 배너는 심사 없이 바로 수익화가 가능하다. 반대로 AdSense는 콘텐츠 매칭이 자동이라 관리 비용이 낮다. 세 가지를 처음부터 같이 세팅하지 않고 따로따로 붙이다 보면 템플릿 곳곳에 광고 코드가 산발적으로 박히게 된다.
실제로 그랬다. base.html 안에 Sponsored라는 텍스트 라벨이 붙은 하드코딩 배너, 이미 유효하지 않은 정적 이미지 배너, 그리고 임시로 끼워넣은 제휴 링크 블록이 섞여 있었다. 코드를 읽는 사람 입장에서는 "이게 실제로 동작하는 건지, 테스트용인지" 구분이 안 되는 상태였음.
이 상태를 계속 두면 문제가 두 가지다. 첫째, 광고 정책 위반 리스크. AdSense 정책상 "Sponsored" 라벨을 특정 방식 이외로 쓰면 명확성 위반으로 잡힐 수 있다. 둘째, 렌더링 혼선. 정적 배너가 깨지거나 비어 있으면 레이아웃이 무너지고, 그게 사용자 이탈로 이어진다.
작업 내용
| 대상 | 변경 내용 |
|---|---|
base.html |
AdSense 스크립트 통합, Coupang / AliExpress 제휴 블록 위치 정리, Sponsored 라벨 제거, 정적 배너 태그 삭제, 전체 광고 영역 마크업 정돈 |
scripts/bulk_seed.py |
광고 관련 시드 데이터 또는 테스트 픽스처 수정 (정적 배너 제거에 따른 연동 정리) |
base.html이 메인 전장이었다. 레이아웃 템플릿이라 여기서 건드리면 사이트 전체에 영향이 간다. 그래서 변경 순서를 신경 썼음.
- 먼저 정적 배너 / Sponsored 라벨 블록을 주석 처리 후 렌더링 확인
- 문제 없으면 완전 삭제
- AdSense
<script>태그를<head>안 적절한 위치에 단일 로드 - Coupang, AliExpress 제휴 코드는 콘텐츠 영역 하단에 구획을 나눠 배치
- 전체 광고 영역을 CSS 클래스 기준으로 묶어서 나중에 한 곳에서 조정 가능하도록 정리
<!-- 이전: 여기저기 흩어진 광고 블록 -->
<div class="sponsored-label">Sponsored</div>
<img src="/static/banner_old.png" width="300" height="250">
<!-- 이후: 구획 명확하게, 라벨 제거, 동적 스크립트로 대체 -->
<div class="ad-block ad-block--sidebar">
<!-- AdSense ins 태그 -->
</div>
<div class="ad-block ad-block--affiliate">
<!-- Coupang / AliExpress 제휴 코드 -->
</div>
bulk_seed.py가 같이 바뀐 건, 아마도 정적 배너 경로나 광고 관련 더미 데이터를 시드로 심던 로직이 있었기 때문이다. 배너를 제거했으니 그 참조도 같이 정리하지 않으면 스크립트 실행 시 경고나 참조 오류가 남는다. 작은 부분이지만 씨앗 데이터가 실제 서비스 구조와 어긋나면 개발 환경 세팅할 때 혼선이 생기므로 같이 처리하는 게 맞았다.
광고 통합에서 자주 놓치는 것들
세 가지 광고 소스를 하나의 템플릿에서 관리하다 보면 흔히 발생하는 문제가 있다.
- 스크립트 중복 로드: AdSense
adsbygoogle.js를 여러 군데서 참조하면 콘솔 에러와 함께 광고가 안 뜬다. 베이스 템플릿에서 단 한 번만 로드하는 게 원칙 - 레이아웃 시프트(CLS): 광고 영역 크기를 미리 지정하지 않으면 로드 후 페이지가 튀는 현상이 난다. Core Web Vitals에 직접 영향을 줌
- 정책 충돌: AdSense와 다른 제휴 광고를 같은 페이지에 쓰는 건 허용되지만, AdSense 광고처럼 보이도록 꾸미거나 클릭을 유도하는 UI는 정책 위반
- 모바일 반응형: 300x250 고정 배너를 모바일에서 그대로 쓰면 가로 스크롤이 생긴다.
data-ad-format="auto"나 반응형 클래스 필수
이번 작업에서 "Sponsored 라벨 제거"가 단순 디자인 정리처럼 보일 수 있지만, 실제로는 정책 리스크 제거 + 마크업 신뢰도 확보 차원에서 더 중요한 부분이었다. 라벨 하나 남아 있는 게 AdSense 정책 검토에서 걸릴 수 있고, 그렇게 되면 계정 경고로 이어진다.
base.html 하나가 전체 페이지에 영향을 주는 만큼, 이런 작업은 한 번에 몰아서 깔끔하게 끝내는 편이 낫다. 조금씩 건드리다 보면 어느 쪽이 "진짜 광고 블록"인지 템플릿 자체가 혼란스러워진다. 오늘 그 정리를 했다.
끝.
댓글 0
첫 댓글 달아줘.