티스토리 고정형 사이드바 스크롤 구현 방법

티스토리 고정형 사이드바 스크롤 구현 방법

티스토리 고정형 사이드바 스크롤 구현 방법

 

티스토리 스킨고정 사이드바position:stickyIntersectionObserver반응형애드센스

📑 목차

• 개요: 언제 ‘고정 사이드바’가 필요한가
• 방법① CSS만으로 sticky 구현
• 방법② JS로 고정 헤더/푸터 보정
• 방법③ IntersectionObserver로 현재 섹션 하이라이트
• 이미지 슬롯·OG·ALT 규칙
• 적용 루틴(체크 & 테스트)
• 지표: CTR·scroll_90·view_second_post
• 발행 전 체크리스트
• 최종 정리

 

개요: 언제 ‘고정 사이드바’가 필요한가

 

사이드바를 스크롤에 맞춰 고정하면 목차 이동, 관련 글 탐색, 저자 정보/CTA 노출이 안정돼 두 번째 글 조회율을 높일 수 있습니다. 다만 모바일에서는 공간을 많이 차지하므로 데스크톱 우선 적용을 권장합니다.

핵심: 레이아웃은 본문 폭 680~760px, 사이드바 폭 260~320px를 기준으로 여백을 확보하세요.

2열 레이아웃에서 사이드바는 상단 오프셋을 두고 스크롤에 따라 고정됩니다

 

 

방법① CSS만으로 sticky 구현

 

position: sticky는 가장 간단한 방법입니다. 상단 고정 간격을 top으로 지정합니다. 부모 요소에 overflow: visible이거나 overflow를 지정하지 않아야 정상 동작합니다.

 

/* 레이아웃 */
.main-wrap{display:grid;grid-template-columns:1fr 300px;gap:28px}
@media (max-width:1024px){.main-wrap{grid-template-columns:1fr}} /* 모바일 1열 */

/* 사이드바 sticky */
.sidebar{
  position: sticky; /* 스크롤 시 고정 */
  top: 88px;        /* 헤더 높이(고정 네비)만큼 보정 */
  align-self: start;
  height: fit-content;
}

/* 부모가 overflow:hidden이면 sticky가 깨질 수 있음 → 제거 */
.layout, .main-wrap{overflow: visible;}

팁: 티스토리의 상단 고정 헤더가 있다면 실제 헤더 높이(+간격 8~12px)를 top에 반영하세요.

 

방법② JS로 고정 헤더/푸터 보정

 

환경에 따라 헤더 높이가 유동적이면 로드 후 계산해 top 값을 지정합니다. 또한 사이드바가 본문 하단을 넘지 않도록 최대 높이를 동적으로 설정합니다.

 

<script>
(function(){
  const sidebar = document.querySelector('.sidebar');
  const header  = document.querySelector('header'); // 고정 헤더
  const main    = document.querySelector('.post-content');

  function applyStickyOffset(){
    const headerH = header ? header.getBoundingClientRect().height : 0;
    sidebar.style.top = (headerH + 12) + 'px';
    // 본문 높이에 따라 최대 높이 제한
    const maxH = main.scrollHeight - window.innerHeight * 0.1;
    sidebar.style.maxHeight = Math.max(360, Math.min(maxH, 900)) + 'px';
    sidebar.style.overflow = 'auto'; // 키보드 접근성 확보
  }

  window.addEventListener('load', applyStickyOffset);
  window.addEventListener('resize', applyStickyOffset);
})();
</script>

주의: 광고 슬롯이 사이드바 상단 600px 이내에 2개 이상 배치되면 사용자 경험과 정책 모두에 불리할 수 있습니다. 1화면 1광고 원칙을 적용하세요.

 

방법③ IntersectionObserver로 현재 섹션 하이라이트

 

목차(TOC)와 결합하면 사용성이 크게 향상됩니다. 현재 가시 영역의 섹션을 감지해 TOC 링크에 active 클래스를 부여합니다.

 

<script>
document.addEventListener('DOMContentLoaded', function(){
  const tocLinks = Array.from(document.querySelectorAll('.toc a[href^="#"]'));
  const targets = tocLinks.map(a => document.querySelector(a.getAttribute('href'))).filter(Boolean);
  const opt = {rootMargin:'-30% 0px -60% 0px', threshold:[0, 1.0]};
  const io = new IntersectionObserver((entries)=>{
    entries.forEach(entry => {
      const id = '#' + entry.target.id;
      const link = document.querySelector('.toc a[href="'+id+'"]');
      if(!link) return;
      if(entry.isIntersecting){ tocLinks.forEach(l => l.classList.remove('active')); link.classList.add('active'); }
    });
  }, opt);
  targets.forEach(el => io.observe(el));
});
</script>
/* 활성화 스타일 */
.toc a.active{font-weight:700;color:#111827;text-decoration:underline}

팁: 링크에는 aria-current="true"를 함께 설정하면 스크린리더가 현재 위치를 정확히 읽어줍니다.

 

이미지 슬롯·OG·ALT 규칙

 

• 대표 썸네일(OG): 1200×630, 대비 높은 색 + 12~16자 핵심 문구.
• 본문 이미지: WebP 권장, width/height 명시, loading="lazy".
• ALT: 이미지를 보지 못해도 구조/흐름이 이해되는 1문장 작성.

 

CSS만으로 구현하는 기본 스티키 사이드바

 

적용 루틴(체크 & 테스트)

 

1. 데스크톱: 1200px, 1440px에서 스크롤 테스트 → 헤더/푸터 겹침 여부 확인
2. 모바일: 1024px 이하에서는 1열로 전환하고 사이드바 콘텐츠를 하단으로 이동
3. 접근성: 키보드 Tab 순서와 포커스 표시, aria-current 확인
4. 성능: 레이아웃 쉬프트(CLS) 방지 위해 이미지 크기 지정, 광고는 지연 로딩

팁: 목차·관련 글·뉴스레터 구독만 남기고 나머지는 접어두세요(아코디언). 스크롤 시 방해 요소를 최소화합니다.

 

지표: CTR·scroll_90·view_second_post

 

• CTR: 사이드바 카드/목차 클릭률(리스트 > 4% 권장).
• 완독: scroll_90 비율(개별 글 > 35% 목표).
• 깊이: view_second_post 비율(> 22% 목표)로 내부 링크 품질 점검.

 

지표	문제 징후	개선 액션
CTR	사이드바 클릭 < 2%	목차를 상단 배치, 링크 수 줄이고 명칭을 구체화
scroll_90	< 30%	서론 압축, 첫 이미지/요약 박스를 상단 노출
view_second_post	< 15%	허브↔스포크 내부 링크 2개 이상, 관련 글 썸네일 추가

 

발행 전 체크리스트

 

1. 레이아웃이 2열에서만 sticky 동작하고, 모바일(≤1024px)에서는 1열로 전환되는가?
2. 부모 요소의 overflow로 인해 sticky가 깨지지 않는가?
3. 헤더 높이 보정(top)이 정확하며, 포커스 이동 시 가려지지 않는가?
4. 이미지 WebP, width/height, loading="lazy", ALT/캡션이 적용됐는가?
5. 애드센스 정책(1화면 1광고) 및 저작권/출처 표기를 준수했는가?

 

출시 전 최종 점검 레이아웃 보정 접근성 정책

 

 

최종 정리

 

티스토리에서 고정형 사이드바는 목차/관련 글 노출을 안정화해 사용자 여정을 부드럽게 만듭니다. 기본은 position: sticky, 환경 보정은 JS, 사용성 개선은 IntersectionObserver로 완성하세요. 모바일은 1열 전환을 기본값으로 하고, 동일 URL을 지속적으로 업데이트하며 지표를 통해 사이드바 구성 요소를 최적화하면 애드센스와 SEO 모두에 긍정적인 효과를 기대할 수 있습니다.