글 목록 사이 광고가 콘텐츠처럼 보이도록 CSS 스타일 맞추는 법 4가지
"인피드 광고"는 블로그 글 목록, 카드 리스트, 뉴스 피드 사이에 콘텐츠처럼 자연스럽게 섞여 들어가는 광고 형식이다. 일반 배너 광고보다 클릭률이 평균 3~5배 높고, 독자의 이탈률도 낮다. 광고처럼 보이지 않기 때문이다. 핵심은 주변 콘텐츠 카드와 동일한 스타일 언어를 쓰는 것이다.
블로그를 운영하면서 배너 광고 CTR이 너무 낮아서 고민한 적 있을 거다. 배너는 사람들이 이미 무의식적으로 무시하도록 훈련되어 있다. "배너 블라인드니스"라고 부르는 현상이다. 이걸 우회하는 가장 효과적인 방법이 "인피드 광고"다. 이 글에서는 내 블로그 글 목록과 광고를 CSS로 동일하게 스타일링하는 방법 4가지를 정리했다.
인피드 광고가 일반 배너보다 효과적인 이유
사람의 눈은 패턴을 인식하도록 설계되어 있다. 블로그 글 목록을 볼 때 독자는 카드 형태의 리스트를 훑으면서 흥미로운 글을 찾는다. 이 시각적 탐색 패턴 안에 광고가 동일한 형태로 들어가면, 뇌가 광고를 또 다른 '콘텐츠 후보'로 인식한다. 배너처럼 화면 외곽에 있는 직사각형 광고는 뇌가 자동으로 필터링하지만, "인피드 광고"는 그 필터를 통과한다.
구글 애드센스 공식 데이터에 따르면 인피드 광고는 전통 디스플레이 광고보다 시선 지속 시간이 더 길고, 뷰어블 노출률도 높다. 수익화 관점에서 같은 트래픽으로 더 높은 수익을 내려면 "인피드 광고"를 적극 활용하는 게 맞다.
구글 애드센스 인피드 광고 단위 설정하기
애드센스 콘솔에서 새 광고 단위 → "인피드 광고"를 선택하면 시작된다. 자동 설정 옵션을 선택하면 구글이 블로그를 크롤링해서 글 목록 형태에 맞는 스타일을 제안한다. 하지만 자동 설정이 항상 정확하게 맞는 건 아니다. 수동으로 폰트, 색상, 카드 스타일을 블로그 디자인에 맞게 직접 조정하는 게 훨씬 효과적이다.
설정 항목은 이렇다.
- 레이아웃: 이미지+텍스트 조합, 텍스트 전용, 이미지 전용 중 선택. 블로그 카드가 썸네일+제목+요약 구조라면 동일하게 선택.
- 폰트: 블로그 본문 폰트와 동일하게 설정. 나눔고딕을 쓴다면 광고도 나눔고딕.
- 색상: 제목 색상, URL 색상, 설명 텍스트 색상을 블로그 테마 색상으로 맞춤.
- 테두리: 글 카드에 테두리가 있으면 광고에도 동일한 두께와 색상의 테두리 적용.
글 목록 카드와 광고 카드 스타일 맞추기
CSS로 "인피드 광고" 래퍼를 글 목록 카드와 동일하게 스타일링하는 예시다. 블로그 글 목록 카드 CSS가 다음과 같다고 가정하자.
/* 기존 블로그 글 카드 */
.post-card {
display: flex;
gap: 16px;
padding: 16px;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-bottom: 16px;
background: #fff;
}
인피드 광고 래퍼도 동일한 스타일을 적용한다.
/* 인피드 광고 래퍼 */
.infeed-ad-wrapper {
padding: 16px;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-bottom: 16px;
background: #fff;
overflow: hidden;
}
이렇게 하면 스크롤하면서 글 목록을 훑을 때 광고가 하나의 콘텐츠 카드처럼 보인다. 독자가 내용에 관심이 생겨서 클릭하는 자연스러운 흐름이 만들어진다.
텍스트·이미지·색상 일관성 유지법
스타일 일관성을 유지하는 세 가지 포인트다.
첫째, 제목 폰트 크기와 굵기. 블로그 글 카드 제목이 `font-size: 16px; font-weight: 600`이라면 광고 제목도 같은 크기와 굵기여야 한다. 애드센스 인피드 설정에서 제목 스타일을 맞출 수 있다.
둘째, 이미지 비율. 블로그 썸네일이 16:9 비율이라면 광고 이미지도 16:9로 설정한다. 인피드 광고 단위에서 이미지 비율을 선택할 수 있다.
셋째, 색상. 블로그 주 색상(Primary color)을 CSS 변수로 관리하고 있다면 광고 컨테이너에도 같은 변수를 적용한다. 버튼 색상, 링크 색상, 테두리 색상이 일치하면 광고가 훨씬 자연스럽다.
"광고" 레이블 처리와 정책 준수
중요한 점 하나. 애드센스 인피드 광고는 구글이 자동으로 "광고" 레이블을 표시한다. 이걸 CSS로 숨기거나 제거하면 정책 위반이다. 반대로 내가 임의로 추가적인 "광고" 표시를 넣어도 이중 표시가 되어 이상하게 보인다. 광고 레이블은 구글이 관리하도록 두고 건드리지 않는 게 맞다.
한 가지 주의할 게 있다. 인피드 광고가 콘텐츠와 너무 유사하게 보여서 독자가 광고인지 모르고 클릭하도록 의도적으로 유도하면 이것도 정책 위반이다. "자연스러움"과 "기만"의 경계는 광고 레이블이 명확하게 보이느냐 안 보이느냐로 결정된다.
모바일 인피드 광고 최적화 팁
모바일에서 인피드 광고가 잘 보이려면 몇 가지를 추가로 신경 써야 한다. 첫째, 광고 래퍼에 `width: 100%; box-sizing: border-box`를 적용해서 패딩이 포함된 전체 너비를 제대로 계산하게 한다. 둘째, 모바일에서 터치 타겟(클릭 영역)이 너무 작으면 의도치 않은 클릭이나 놓치는 클릭이 생긴다. 최소 높이를 `min-height: 60px` 이상으로 잡아주는 게 좋다. 셋째, 글 카드 사이에 "인피드 광고"를 몇 개마다 넣을지 결정할 때 모바일 기준 3~5개 카드마다 1개 광고 비율이 적당하다. 너무 많으면 이탈률 상승으로 이어진다.
참고 출처
- 구글 애드센스 인피드 광고 가이드
- 구글 AdSense 정책
- Nielsen Norman Group – Banner Blindness
- MDN Web Docs – CSS Flexbox
- Think with Google – Native Ads