티스토리 북클럽스킨 본문 상단 광고 2개 배치하는 방법 – 애드센스 수익 극대화 전략

티스토리 블로그를 운영하면서 수익형 블로그로 성장하고 싶다면, 광고 배치 위치는 매우 중요합니다. 특히 본문 상단 광고는 방문자에게 가장 먼저 노출되는 영역으로, 클릭률(CTR)과 수익을 결정짓는 핵심 위치입니다. 본 포스팅에서는 티스토리 북클럽(Book Club) 스킨을 사용하는 블로거들이 본문 상단에 Google AdSense 광고 두 개를 배치할 수 있도록 상세한 방법을 안내합니다.

 

 

1. 왜 본문 상단 광고가 중요한가?

블로그에 방문한 사용자가 가장 먼저 보는 영역은 제목 바로 아래, 즉 본문 상단입니다. 이 영역에 광고를 배치하면 자연스럽게 시선이 머물게 되며, 다음과 같은 장점을 기대할 수 있습니다.

• 광고 노출률 극대화
• 초반 클릭률 상승
• 스크롤 없이 광고 인지 가능
• 콘텐츠 소비 전 광고 노출

그렇기 때문에 많은 수익형 블로거들이 본문 상단 광고 배치를 우선적으로 고려합니다.

 

 

 

2. 북클럽 스킨 구조 이해하기

티스토리 북클럽 스킨은 책 리뷰, 에세이, 일기 블로그에 최적화된 미니멀한 디자인의 스킨입니다. 스킨의 구조는 다음과 같습니다.

• #content : 전체 콘텐츠 영역
• #article : 개별 게시글 컨테이너
• ##_article_rep_desc_## : 게시글 본문을 출력하는 위치

우리는 이 ##_article_rep_desc_## 위에 광고 코드를 삽입할 것입니다.

 

 

3. 광고 단위 2개 생성하기 (Google AdSense)

1. Google AdSense 접속
2. 왼쪽 메뉴에서 광고 > 광고 단위 기준 클릭
3. 디스플레이 광고 선택
4. 광고 이름 입력 (예: post-top-1)
5. 광고 크기: 반응형 선택 → 광고 단위 생성
6. 광고 단위 ID 복사 (data-ad-client, data-ad-slot)

→ 위 과정을 반복해서 광고 단위 2개를 생성합니다.

 

 

 

4. 광고 코드 작성 및 배치 방법

두 개의 광고가 PC에서는 가로로 나란히, 모바일에서는 하나만 보이도록 설정합니다. 아래는 예시 코드입니다.

 

 

data-ad-client와 data-ad-slot 뒤에 본인의 숫자를 입력합니다

 

<!-- 본문 상단 애드센스 광고 2개 시작 -->
<div style="text-align: center; margin-bottom: 20px;">
  <style>
    .adsbygoogle.top1 { display: block; }
    .adsbygoogle.top2 { display: none; }

    @media (min-width: 768px) {
      .adsbygoogle.top1, .adsbygoogle.top2 {
        display: inline-block;
        width: 336px;
        height: 280px;
        margin: 0 10px;
      }
    }
  </style>

  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

  <ins class="adsbygoogle top1"
       data-ad-client="ca-pub-XXXXXX"
       data-ad-slot="1111111111"
       data-ad-format="auto"
       data-full-width-responsive="true"></ins>
  <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
  </script>

  <ins class="adsbygoogle top2"
       data-ad-client="ca-pub-XXXXXX"
       data-ad-slot="2222222222"
       data-ad-format="auto"
       data-full-width-responsive="true"></ins>
  <script>
       (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
</div>
<!-- 본문 상단 애드센스 광고 2개 끝 -->

TIP: top1, top2 클래스명은 본문 내 중복되지 않도록 자유롭게 변경 가능합니다.

 

 

5. HTML에 광고 코드 삽입하기

이제 위에서 작성한 광고 코드를 티스토리 스킨 HTML에 삽입합니다.

 

삽입 위치:

1. 티스토리 관리자 > 꾸미기 > 스킨 편집 > HTML 편집
2. ##_article_rep_desc_##를 검색
3. 해당 줄 바로 위에 광고 코드 붙여넣기
4. 상단의 저장 및 적용 클릭

 

6. 반응형 대응을 위한 CSS 설정

모바일에서는 화면이 좁아 광고 두 개를 나란히 보여주는 것이 비효율적이므로, 위 코드에서는 768px 이하 화면에서는 하나만 표시되도록 설정했습니다.

 

 

@media (max-width: 767px) {
  .adsbygoogle.top2 {
    display: none;
  }
}

 

PC : 광고 2개 노출
모바일 : 광고 1개 노출
이러한 방식은 Google AdSense 정책에도 부합합니다.

 

 

7. 최종 점검 및 적용 확인

• 블로그에서 글을 하나 클릭하여 본문 상단에 광고가 노출되는지 확인합니다.
• PC에서 두 개가 나란히, 모바일에서 하나만 나오는지 확인합니다.
• 광고가 비어있거나 회색 박스로만 보일 경우, 광고 단위 생성 후 반영되기까지 시간이 걸릴 수 있습니다.

 

 

8. 광고 정책 준수사항

Google AdSense는 다음과 같은 기준을 명시하고 있습니다:

• 광고 2개 이상이 동시에 지나치게 강조되지 않도록 설정
• 모바일 UX를 해치지 않도록 크기 및 위치 조정
• 콘텐츠보다 광고가 먼저 로딩되지 않도록 함

위의 설정은 이러한 기준을 모두 만족하며, 안정적으로 운영할 수 있습니다.

 

 

9. 마무리: 수익 향상을 위한 실전 팁

• 관련성 높은 콘텐츠와 함께 배치: 광고 근처에 콘텐츠 요약 또는 리스트형 글을 함께 배치하면 CTR이 더 올라갑니다.
• 광고 코드 위치 조절: 제목 아래, 첫 문단 위 등 다양한 위치를 테스트해보세요.
• 광고 스타일 최적화: AdSense 내에서 광고 스타일을 '글과 어울리게' 설정해주면 사용자 피로도가 줄어듭니다.