블로그에 애드센스 광고 슬롯 4개 배치하며 챙긴 것들

블로그에 애드센스 광고 슬롯 4개를 실제로 붙인 날.

그냥 <script> 태그 몇 개 넣으면 끝나는 작업 아니냐고 생각할 수 있는데, 막상 해보면 손이 꽤 많이 간다. 어디에 붙이느냐, 레이아웃이 깨지지 않느냐, 모바일에서 튀어나오지 않느냐 — 이런 것들을 하나씩 잡다 보니 파일이 네 군데 동시에 열려 있었다.

왜 이 시점에 붙였나

블로그 자체의 콘텐츠 구조가 어느 정도 안정된 다음에 광고를 붙이는 게 맞다고 판단했다. 레이아웃이 계속 바뀌는 상태에서 슬롯을 먼저 심어놓으면, 나중에 템플릿 구조 손댈 때마다 광고 코드도 같이 흔들린다. 순서가 중요한 이유가 거기 있다.

4개라는 숫자도 그냥 나온 게 아니다. 애드센스 정책상 페이지당 슬롯 수에 대한 가이드라인이 있고, 콘텐츠 대비 광고 밀도가 너무 높으면 정책 위반 리스크가 생긴다. 그래서 포스트 페이지와 리스트 페이지에 나눠서, 독자 경험을 최대한 해치지 않는 위치에 배치하는 방향으로 설계했다.

변경된 파일들과 각각의 역할

base.html에 스크립트를 한 번만 넣고 나머지 페이지에서 슬롯만 선언하는 구조가 깔끔하다. 페이지마다 스크립트 태그를 중복으로 넣는 실수를 종종 보는데, 그렇게 하면 애드센스 측에서 로드 에러를 뱉거나 슬롯이 제대로 활성화 안 되는 경우가 생긴다.

style.css 수정이 같이 들어간 이유는 애드센스 슬롯 자체가 기본적으로 inline 요소처럼 동작하는 경우가 있어서, display: block이나 max-width 처리를 명시적으로 잡아주지 않으면 모바일에서 컨테이너 밖으로 튀어나온다. 이 부분을 미리 잡는 게 나중에 레이아웃 디버깅 시간을 아끼는 길이다.

슬롯 배치 패턴

포스트 페이지 기준으로 일반적으로 자주 쓰는 패턴은 이렇다.

<!-- 본문 상단 (제목 바로 아래) -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

<!-- 본문 하단 (댓글/관련글 위) -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

data-full-width-responsive="true" 이거 빠뜨리면 모바일에서 고정 사이즈로 렌더링되어서 레이아웃이 박살난다. 매번 붙이는 습관을 들이는 게 맞다.

리스트 페이지(index.html)는 글 목록 중간에 끼워 넣는 방식을 택했다. 전체 목록 맨 위나 맨 아래에만 놓으면 클릭률이 너무 낮고, 그렇다고 글마다 사이사이에 다 넣으면 독자 경험이 망가진다. 적당한 간격을 두고 한 군데만 배치하는 게 현실적인 균형점이다.

붙이고 나서 생각

광고 슬롯 작업은 기술적 난이도가 높진 않지만, 의외로 신경 쓸 포인트가 많다. 정책 준수, 레이아웃 안정성, 반응형 대응, 페이지 로드 성능 영향 — 이걸 다 챙기면서 하려면 단순 copy-paste 이상의 판단이 필요하다. 특히 base.html 건드리는 작업은 사이트 전체에 영향을 주기 때문에, 변경 범위를 명확히 이해하고 들어가는 게 중요하다.

리뷰어 입장에서 이런 PR이 들어오면 가장 먼저 보는 건 "스크립트가 중복 로드되진 않는가"와 "슬롯 ID가 올바르게 분리되어 있는가"다. 같은 슬롯 ID를 여러 페이지에서 재사용하면 애드센스 정책 위반이 될 수 있어서, 각 슬롯이 독립적으로 발급된 ID를 쓰고 있는지 반드시 확인한다.

다음은 실제 노출 데이터 보면서 슬롯 위치 최적화 여부를 판단할 것 같다.