사이드바 고정 기술: 스크롤해도 광고가 따라오는 sticky 설정 완벽 가이드

사이드바 고정 광고가 따라오게 만드는 sticky 설정

스크롤해도 광고가 따라오는 sticky 설정 완벽 가이드

 

CSS position: sticky를 제대로 설정하면 사이드바 광고나 목차가 스크롤에 따라 화면에 고정되어 노출 시간이 대폭 늘어난다. 이 기능 하나로 광고 노출 수가 2~3배 차이 나는 경우도 있다. 사용자가 긴 글을 읽는 동안 계속 눈에 들어오는 위치에 광고가 있으니 당연한 결과다. 그런데 막상 적용하려고 하면 "왜 안 되지?"를 반복하게 되는 속성이기도 하다. 작동이 안 되는 이유가 생각보다 다양해서다. 이번 글에서는 "사이드바 고정" 설정 방법부터 안 될 때 해결법까지 다 정리했다.

 

📋목차

• sticky 속성이 광고에 유리한 이유
• position sticky 기본 사용법
• 2단 레이아웃에서 sticky 사이드바 구성
• sticky가 안 될 때 확인할 5가지
• 사이드바 높이 문제 해결하기
• 모바일에서 sticky 사이드바 처리
• 스크롤 방향에 따른 고급 고정 효과
• 마무리 체크리스트

💡 sticky 속성이 광고에 유리한 이유

애드센스 수익은 노출 수와 클릭 수로 결정된다. 사이드바 광고를 그냥 두면 사용자가 스크롤을 조금만 내려도 광고가 화면 밖으로 사라진다. 하지만 "사이드바 고정" 처리를 하면 사용자가 글을 읽는 내내 광고가 화면 안에 머문다. 특히 글이 긴 경우 차이가 더 두드러진다.

광고뿐 아니라 목차, 관련 글 링크, 뉴스레터 구독 버튼 등도 sticky로 처리하면 전환율이 올라간다. 독자가 글을 다 읽고 무언가를 클릭하려고 할 때, 클릭할 수 있는 요소가 항상 보이는 위치에 있으면 당연히 클릭률이 높다.

예전에는 이런 기능을 구현하려면 JavaScript로 스크롤 이벤트를 감지해서 position: fixed로 전환하는 복잡한 코드가 필요했다. 지금은 CSS 한 줄, position: sticky로 해결된다. 브라우저 지원도 IE 제외한 모든 현대 브라우저에서 된다.

📌 position sticky 기본 사용법

position: sticky는 스크롤 위치에 따라 relative처럼 흐름을 유지하다가, 지정한 위치에 도달하면 fixed처럼 고정되는 속성이다. top, bottom 값을 반드시 함께 지정해야 작동한다.

.sticky-box {
  position: sticky;
  top: 20px;  /* 화면 상단에서 20px 위치에서 고정 */
}

이게 전부다. 근데 이 단순한 코드가 실제로는 잘 안 되는 경우가 많다. 이유는 뒤에서 설명한다.

top 값이 0이면 화면 최상단에 붙고, 양수값을 주면 그 만큼의 여백을 두고 고정된다. 고정 헤더가 있는 블로그라면 헤더 높이만큼 top 값을 줘야 헤더 뒤에 숨지 않는다.

/* 고정 헤더가 60px인 경우 */
.sticky-sidebar {
  position: sticky;
  top: 80px;  /* 60px 헤더 + 20px 여백 */
  align-self: flex-start;  /* 이거 없으면 flex에서 안 될 수 있음 */
}

🏗️ 2단 레이아웃에서 sticky 사이드바 구성

실제 블로그에 적용할 때는 본문과 사이드바가 나란히 있는 2단 레이아웃에서 사용하게 된다. Flexbox를 기반으로 구성하는 게 가장 깔끔하다.

/* 전체 페이지 컨테이너 */
.page-container {
  display: flex;
  align-items: flex-start;  /* 핵심! stretch가 아닌 flex-start */
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
}

/* 메인 콘텐츠 */
.main-content {
  flex: 1;
  min-width: 0;
}

/* 사이드바 */
.sidebar {
  width: 300px;
  flex-shrink: 0;
}

/* sticky 적용된 사이드바 내부 */
.sidebar-sticky {
  position: sticky;
  top: 20px;
}

/* 광고 박스 */
.ad-box {
  width: 300px;
  min-height: 250px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

/* 목차 박스 */
.toc-box {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-left: 3px solid #0066cc;
  border-radius: 6px;
  padding: 15px;
  font-size: 13px;
}

<!-- HTML 구조 -->
<div class="page-container">
  <main class="main-content">
    <!-- 본문 내용 -->
  </main>

  <aside class="sidebar">
    <div class="sidebar-sticky">
      <div class="ad-box">
        <!-- 애드센스 광고 코드 -->
      </div>
      <div class="toc-box">
        <!-- 목차 -->
      </div>
    </div>
  </aside>
</div>

align-items: flex-start가 핵심이다. 기본값인 stretch로 두면 사이드바가 본문과 같은 높이로 늘어나서 "사이드바 고정"이 먹히지 않는다. sticky는 부모 요소 높이 안에서만 작동하기 때문이다.

🔧 sticky가 안 될 때 확인할 5가지

sticky를 적용했는데 작동이 안 된다면 아래 5가지를 순서대로 확인하면 된다.

1. top/bottom 값이 없는 경우. position: sticky만 쓰고 top이나 bottom을 지정하지 않으면 작동하지 않는다. 반드시 함께 써야 한다.

2. 부모 요소에 overflow가 설정된 경우. 부모나 조상 요소 어딘가에 overflow: hidden, overflow: auto, overflow: scroll이 있으면 sticky가 그 컨테이너 안에서만 동작하게 되어 스크롤을 따라오지 않는다. 브라우저 개발자 도구로 부모 요소들을 하나씩 확인해봐야 한다.

/* 이게 있으면 sticky가 안 됨 */
.parent {
  overflow: hidden;  /* sticky를 죽이는 속성 */
}

3. 부모 요소가 flex고 align-items가 stretch인 경우. 위에서 설명한 것처럼, flex 컨테이너에서 align-items: flex-start를 빠뜨리거나, sticky 요소 자체에 align-self: flex-start를 안 써서 발생한다.

4. 부모 요소의 높이가 sticky 요소보다 크지 않은 경우. sticky는 부모 요소의 높이 범위 안에서만 작동한다. 부모가 콘텐츠에 딱 맞는 높이라면 sticky할 여유 공간이 없어서 안 된다.

5. z-index 충돌. sticky 요소가 다른 요소 뒤에 숨어서 안 보이는 경우도 있다. z-index를 적절히 설정해줘야 한다.

.sidebar-sticky {
  position: sticky;
  top: 20px;
  align-self: flex-start;
  z-index: 10;  /* 필요한 경우 추가 */
}

📏 사이드바 높이 문제 해결하기

사이드바 안에 광고가 여러 개이거나 목차가 길면, sticky 영역이 화면 높이를 넘어서 스크롤이 필요할 수 있다. 이럴 때는 최대 높이와 내부 스크롤을 설정한다.

.sidebar-sticky {
  position: sticky;
  top: 20px;
  align-self: flex-start;
  max-height: calc(100vh - 40px);  /* 뷰포트 높이 - 여백 */
  overflow-y: auto;  /* 내용이 많으면 내부 스크롤 */
}

/* 스크롤바 스타일 커스텀 (웹킷 계열) */
.sidebar-sticky::-webkit-scrollbar {
  width: 4px;
}

.sidebar-sticky::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-sticky::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 2px;
}

calc(100vh - 40px)에서 40px은 top 20px + 하단 여백 20px을 계산한 것이다. 고정 헤더 높이도 있다면 그만큼 더 빼줘야 한다.

📱 모바일에서 sticky 사이드바 처리

모바일에서는 화면 너비가 좁아서 사이드바를 옆에 두기가 어렵다. 사이드바를 아래로 내리거나 아예 숨기는 처리가 필요하다. "사이드바 고정" 효과는 PC에서만 적용하는 게 일반적이다.

/* 모바일: 1단 레이아웃으로 전환 */
@media (max-width: 900px) {
  .page-container {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    order: -1;  /* 사이드바를 본문보다 위에 표시하려면 */
    /* 또는 아래에 표시하려면 order를 건드리지 않음 */
  }

  /* 모바일에서는 sticky 해제 */
  .sidebar-sticky {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

/* 좁은 모바일: 사이드바 완전히 숨기기 */
@media (max-width: 600px) {
  .sidebar {
    display: none;
  }
}

사이드바를 완전히 숨기면 광고도 같이 숨겨지니까 광고 노출 감소가 걱정될 수 있다. 이럴 때는 본문 내 인라인 광고를 모바일용으로 따로 배치해두는 게 낫다.

⚡ 스크롤 방향에 따른 고급 고정 효과

스크롤을 아래로 내릴 때는 사이드바가 화면 하단에 고정되고, 위로 올릴 때는 상단에 고정되는 효과를 원한다면 JavaScript가 조금 필요하다. 순수 CSS만으로는 스크롤 방향 감지가 안 된다.

/* CSS */
.sidebar-adaptive {
  position: sticky;
  transition: top 0.3s ease;
}

.sidebar-adaptive.scroll-down {
  top: auto;
  bottom: 20px;
}

.sidebar-adaptive.scroll-up {
  top: 20px;
  bottom: auto;
}

/* JavaScript - 스크롤 방향 감지 */
let lastScrollY = window.scrollY;
const sidebar = document.querySelector('.sidebar-adaptive');

window.addEventListener('scroll', () => {
  const currentScrollY = window.scrollY;

  if (currentScrollY > lastScrollY) {
    // 아래로 스크롤
    sidebar.classList.add('scroll-down');
    sidebar.classList.remove('scroll-up');
  } else {
    // 위로 스크롤
    sidebar.classList.add('scroll-up');
    sidebar.classList.remove('scroll-down');
  }

  lastScrollY = currentScrollY;
}, { passive: true });

이 정도면 꽤 세련된 "사이드바 고정" 동작이 구현된다. passive: true 옵션은 스크롤 성능 최적화를 위해 넣어두는 것이다.

✅ 마무리 체크리스트

"사이드바 고정"은 생각보다 사용자 경험과 광고 수익 모두에 영향을 주는 기능이다. CSS만으로도 충분히 구현 가능하고, 안 될 때는 overflow와 flex 설정을 의심하면 된다. 오늘 코드를 블로그에 적용해보고, 실제로 스크롤할 때 광고가 따라오는지 확인해보면 된다. 체감이 바로 온다.

• ☑ position: sticky + top 값 설정
• ☑ 부모에 overflow 속성 없는지 확인
• ☑ flex 컨테이너에 align-items: flex-start
• ☑ align-self: flex-start 또는 align-items로 처리
• ☑ max-height + overflow-y: auto 설정
• ☑ 모바일에서 position: static으로 해제
• ☑ z-index 충돌 없는지 확인

---

참고 자료 및 출처

• MDN Web Docs – position: sticky: https://developer.mozilla.org/en-US/docs/Web/CSS/position
• CSS-Tricks – Sticky Positioning: https://css-tricks.com/position-sticky-2/
• web.dev – Avoid non-composited animations: https://web.dev/animations-guide/
• Google AdSense – 고정 광고 정책: https://support.google.com/adsense/answer/9462053