애드센스를 블로그에 달고 나서 처음 한 달 동안 CTR이 0.3%도 안 나왔다. 트래픽이 문제인가, 글이 문제인가 싶었는데 알고 보니 광고 위치가 문제였다. 광고가 아예 보이지 않는 곳에 처박혀 있거나, 페이지 맨 아래에 혼자 덩그러니 있거나. 글을 다 읽고 나면 이미 독자가 뒤로 가기를 눌러버린 다음이다.
CSS로 광고 위치를 제대로 잡기 시작하고 나서부터 CTR이 조금씩 달라졌다. 광고를 늘린 게 아니라 위치를 바꿨을 뿐이다.
또한 독자 대부분은 거기까지 스크롤하지 않았습니다. 광고 위치를 바꾸면서 상황이 달라지기 시작했고, 그 과정에서 배치 전략이 얼마나 중요한지 몸으로 배웠습니다.
이 글에서는 내가 직접 써보면서 "이게 맞다"고 느낀 광고 배치 전략 네 가지를 정리한다.
광고 위치: 독자 시선이 멈추는 곳에 놓아야 합니다
광고 수익을 결정하는 가장 큰 변수는 트래픽보다 광고 위치입니다. 제가 직접 겪어봤는데, 광고가 글 아래쪽에 있을 때는 존재 자체를 모르는 독자가 대부분이었습니다.
ATF(Above The Fold) 영역이 중요한 이유가 여기 있습니다. ATF란 스크롤 없이 처음 화면에 보이는 영역을 말합니다. Think with Google 연구에 따르면, ATF에 배치된 광고는 하단 광고보다 뷰어빌리티(viewability), 즉 광고가 실제로 사용자 화면에 노출된 비율이 유의미하게 높다고 밝히고 있습니다(출처: Think with Google).
글 시작 직후 광고를 넣으면서 변화가 생겼습니다. 단, 주의할 점이 있습니다. 첫 문단이 두 줄밖에 안 되면 제목 바로 아래 광고처럼 보여서 어색합니다. 저는 첫 문단을 4줄 이상으로 늘린 뒤에야 광고가 자연스럽게 자리를 잡았습니다.
광고 위치를 선택할 때 효과적인 지점은 다음과 같습니다.
- 글 시작 직후 첫 문단 아래 (ATF 진입 직전)
- H2 소제목 바로 앞 (챕터 전환 경계)
- 글 마지막 본문 아래 (콘텐츠 소비 완료 시점)
H2 소제목 앞에 광고를 넣었을 때 효과가 가장 좋았습니다. 챕터가 넘어가는 경계에서 독자가 잠깐 멈추는 그 순간, 광고가 시야에 들어오기 때문입니다. 이건 저만의 경험이 아니라, 독자 행동 패턴을 분석하면 자연스럽게 나오는 결론입니다.
광고 밀도: 많이 넣는다고 수익이 오르지 않습니다
솔직히 처음엔 광고를 많이 넣을수록 수익이 올라갈 거라고 생각했습니다. 광고 개수를 7개까지 늘린 적도 있습니다. 결과는 반대였습니다. CTR(Click-Through Rate), 즉 광고 노출 대비 클릭 비율이 오히려 떨어졌습니다.
광고 개수를 7개에서 3개로 줄였더니 개별 광고 CTR이 올라갔습니다. 광고가 너무 많으면 독자는 무의식적으로 광고를 배경으로 인식하기 시작합니다. 이를 배너 블라인드니스(Banner Blindness)라고 하는데, 화면에 광고가 너무 자주 등장해 눈에 보여도 뇌가 자동으로 걸러내는 현상을 말합니다.
광고 밀도(Ad Density)는 페이지 전체 콘텐츠 대비 광고가 차지하는 비율을 의미합니다. Google AdSense 광고 게재 정책에서는 콘텐츠보다 광고가 더 많아지는 구성을 명시적으로 금지하고 있습니다(출처: Google AdSense 고객센터). 정확한 기준은 정책이 수시로 업데이트되기 때문에 직접 확인하는 것이 좋습니다.
한 가지 더 짚고 싶은 부분이 있습니다. 일반적으로 "광고를 본문과 자연스럽게 어우러지게 만들면 좋다"는 의견도 있는데, 저는 이 표현이 위험할 수 있다고 봅니다. 애드센스 정책상 광고 위장(disguising ads), 즉 광고를 콘텐츠처럼 보이게 꾸미는 행위는 명백히 금지되어 있습니다. 자연스러운 배치와 광고 위장은 다릅니다. 전자는 위치의 문제고, 후자는 외형의 문제입니다.
CSS 구현: 배치 코드보다 모바일 대응이 먼저입니다
CSS로 광고를 배치할 때 가장 많이 쓰는 방식이 사이드바 고정 광고입니다. position: fixed를 사용하면 스크롤해도 광고가 화면 한쪽에 고정됩니다. position: fixed란 브라우저 뷰포트를 기준으로 요소를 고정 배치하는 CSS 속성으로, 스크롤 위치와 무관하게 항상 같은 자리에 표시됩니다.
제가 직접 써봤는데, PC에서는 체류 시간이 긴 글일수록 사이드바 고정 광고 효과가 좋았습니다. 문제는 모바일이었습니다. display: none 처리를 빠뜨렸더니 모바일 화면에서 본문이 극도로 좁아졌고, 이탈률이 오히려 올라갔습니다. 그 이후로 CSS 작성할 때 모바일 대응을 가장 먼저 체크하는 습관이 생겼습니다.
미디어 쿼리(Media Query)를 반드시 함께 써야 합니다. 미디어 쿼리란 화면 크기나 기기 환경에 따라 CSS 스타일을 다르게 적용하는 기술로, 반응형 웹 구현의 기본 도구입니다. 사이드바 고정 광고에는 아래처럼 모바일 분기 처리가 필수입니다.
광고 CSS 구현 시 체크해야 할 핵심 항목은 다음과 같습니다.
- 사이드바 광고: @media (max-width: 768px) 구간에서 display: none 처리
- 본문 중간 광고: H2 소제목 앞 요소에 margin-bottom으로 간격 확보
- 글 시작 직후 광고: 첫 문단 아래 삽입, 첫 문단은 반드시 4줄 이상 확보
- 글 마지막 광고: 본문 마지막 요소 직후 배치, 콘텐츠와 시각적으로 분리
뷰포트(Viewport)도 자주 간과되는 요소입니다. 뷰포트란 사용자의 화면에서 실제로 콘텐츠가 표시되는 영역을 말하며, 기기마다 크기가 다릅니다. 광고 단위 크기가 뷰포트를 초과하면 레이아웃 깨짐이 발생하고, 이는 코어 웹 바이탈(Core Web Vitals) 지표 중 CLS(Cumulative Layout Shift) 점수에 직접 영향을 줍니다. CLS란 페이지 로드 중 예기치 않게 요소가 이동하는 정도를 측정하는 지표로, Google 검색 순위 요소 중 하나입니다.
광고 배치는 설정하고 끝나는 작업이 아닙니다. 저는 최소 한 달 단위로 애드센스 리포트에서 광고 단위별 CTR과 RPM을 비교하면서 위치를 조정하고 있습니다. RPM(Revenue Per Mille)이란 광고 1,000회 노출당 예상 수익을 나타내는 지표로, 광고 효율을 비교할 때 가장 직관적인 수치입니다. 수치를 보면 어느 위치가 실제로 작동하는지 명확히 보입니다. 처음부터 완벽한 배치는 없고, 데이터를 보면서 조금씩 맞춰가는 과정이 전부입니다.
참고
Google AdSense 고객센터 – 광고 게재 정책
Think with Google – Above the fold 광고 연구
Google AdSense 최적화 가이드
CSS-Tricks – Position fixed