티스토리 북클럽스킨 사이드바 광고 고정 방법 – 수익을 높이는 간단한 설정

티스토리 블로그를 운영하는 분들 중 북클럽(Book Club) 스킨을 사용하는 사용자라면, 사이드바에 위치한 광고를 스크롤 시에도 고정시켜 광고 노출률과 클릭률을 높이는 방법이 궁금하실 겁니다. 이 글에서는 북클럽 스킨 사용자들을 위한 사이드바 광고 고정 방법을 상세히 소개합니다. CSS 코드만 추가하면 누구나 쉽게 설정할 수 있으며, 추가로 반응형 대응과 광고 삽입 팁까지 함께 설명드립니다.

 

 

1. 사이드바 광고 고정이 필요한 이유

많은 티스토리 사용자들이 사이드바 영역에 Google AdSense 광고나 HTML 배너를 삽입합니다. 그러나 사이드바는 스크롤 시 화면 아래로 사라지기 때문에, 콘텐츠를 길게 읽는 독자의 경우 광고를 볼 기회가 줄어들게 됩니다.

사이드바를 고정시키면 다음과 같은 효과를 얻을 수 있습니다.

• 광고 노출 시간 증가: 스크롤을 내리더라도 광고가 계속 보입니다.
• 클릭률(CTR) 향상: 콘텐츠를 읽는 중간중간 광고에 자연스럽게 노출됩니다.
• 수익 증가: 광고가 지속 노출됨에 따라 수익 구조가 개선됩니다.

 

 

 

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

북클럽(Book Club) 스킨은 심플한 디자인에 책 리뷰, 독서 기록 등 콘텐츠 중심 블로그 운영에 적합한 스킨입니다. 이 스킨은 기본적으로 다음과 같은 구조를 가지고 있습니다.

• #content : 본문 콘텐츠 영역
• #aside : 사이드바 영역
• #wrap : 전체 컨테이너

우리는 이 중 #aside 영역에 광고를 삽입하고, 고정시켜야 합니다.

 

 

 

3. 사이드바 광고 고정 설정 방법

(1) 관리자 페이지 접속

1. 티스토리 블로그 관리자 페이지 로그인
2. 좌측 메뉴 → 꾸미기 > 스킨 편집
3. 우측 상단의 HTML/CSS 편집 클릭

 

 

(2) CSS 코드 추가

상단의 CSS 탭을 클릭한 후, 제일 하단에 다음 코드를 추가합니다:

 

 

/* 사이드바 고정 시작 */
#aside {
  position: sticky;
  position: -webkit-sticky;
  top: 80px;
}
/* 사이드바 고정 끝 */

 

 

설명:

• position: sticky는 요소를 특정 위치에 고정하는 CSS 속성입니다.
• top: 80px은 상단에서 80픽셀 아래 위치에 고정시키겠다는 의미입니다.

Tip: 이 숫자는 블로그 상단 헤더 높이에 따라 조정 가능합니다.

 

(3) 저장 및 적용

오른쪽 상단의 저장 및 적용 버튼을 클릭하여 변경사항을 저장합니다.

 

 

 

4. 데스크톱 환경에서만 고정되도록 설정하기 (반응형 대응)

모바일에서는 화면이 좁기 때문에 사이드바 고정이 오히려 UX를 해칠 수 있습니다. 이를 방지하기 위해 다음과 같이 미디어 쿼리를 사용합니다:

 

 

@media (min-width: 1024px) {
  #aside {
    position: sticky;
    position: -webkit-sticky;
    top: 80px;
  }
}

 

 

이 설정을 적용하면 데스크톱(1024px 이상) 화면에서만 고정 기능이 작동하게 됩니다.

 

 

 

5. 광고 코드 삽입 방법 (HTML 배너 활용)

사이드바에 광고를 삽입하기 위해 티스토리에서 제공하는 HTML 배너 출력 플러그인을 활용할 수 있습니다.

 

 

 

(1) 플러그인 활성화

• 관리자 메뉴 → 플러그인 > HTML 배너 출력 활성화

(2) 사이드바에 위젯 추가

• 꾸미기 > 사이드바로 이동
• HTML 배너 출력 위젯을 사이드바 영역으로 드래그

 

(3) 광고 코드 삽입

Google AdSense 광고 코드 또는 다른 배너 코드를 입력합니다.

<!-- 예시: 구글 애드센스 광고 코드 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXX"
     data-ad-slot="XXXXXXX"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

주의: 광고가 반응형으로 자동 조정되도록 설정하는 것이 좋습니다.

 

 

 

6. 자주 묻는 질문 (FAQ)

Q1. 사이드바 고정하면 AdSense 정책 위반 아닌가요?

과거에는 일부 고정광고가 정책 위반으로 간주되기도 했습니다. 현재는 공식적으로 "sticky" 위치 광고에 대한 제한은 없지만, 화면의 30% 이상을 차지하지 않도록 설정하는 것이 권장됩니다.

 

Q2. 사이드바 고정이 작동하지 않아요.

• 다른 CSS에 의해 덮어쓰여졌을 수 있습니다.
• 브라우저 캐시 문제일 수 있으니, Ctrl + F5로 새로고침해 보세요.
• #aside 클래스명이 스킨에 따라 다를 수 있으니 HTML 구조를 확인하세요.

 

Q3. 모바일에서는 사이드바가 아예 안 보여요.

북클럽 스킨의 경우, 모바일 레이아웃에서 사이드바는 기본적으로 숨겨질 수 있습니다. 모바일 전용 설정을 별도로 해야 하며, 고정은 권장되지 않습니다.

 

 

 

7. 마무리 및 블로그 수익 최적화 팁

사이드바 광고를 고정하는 것은 블로그 수익 최적화를 위한 매우 간단하면서도 효과적인 방법입니다. 특히, 콘텐츠가 긴 블로그라면 광고 노출 시간이 크게 늘어나 수익 향상에 직접적인 기여를 합니다.

하지만 한 가지 잊지 말아야 할 점은 광고 위치보다 콘텐츠의 품질이 먼저라는 것입니다. 방문자가 오래 머무르고, 유용하다고 느낄 수 있는 콘텐츠를 함께 제공해야 광고 효과도 더 커집니다.