블로그 목차, 사용자 접근성은 좋은데 SEO는 괜찮을까? (CLS 리스크 관리)

블로그 콘텐츠의 품질과 접근성을 높이기 위해 사용하는 블로그 목차(Table of Contents)는 양날의 검과 같습니다. 긴 글의 구조를 한눈에 파악하게 도와주지만, 잘못 구현된 자동 목차는 레이아웃 흔들림(CLS) 문제를 야기하고 구글의 스팸 필터에 걸릴 위험이 있습니다. 오늘은 SEO 지표와 Core Web Vitals를 모두 만족시키는 사이드바 팝업 목차 구현법을 자세히 소개해 드립니다.

블로그 운영 시 목차는 독자가 원하는 정보를 빠르게 찾도록 돕는 훌륭한 내비게이션입니다. 특히 전문적인 정보를 다루는 긴 포스팅일수록 목차의 유무는 체류 시간과 사용자 만족도에 큰 차이를 만듭니다. 하지만 최근 구글 알고리즘이 변화하면서, 자바스크립트로 기계적으로 생성되는 자동 목차가 의도치 않은 SEO 감점 요인이 되는 사례가 늘고 있습니다.

블로그 목차 기능의 양날의 검: SEO 최적화와 CLS 리스크 관리

이번 글에서는 자동 목차가 가진 구조적 한계를 분석하고, 코어 웹 바이탈(Core Web Vitals) 점수를 갉아먹지 않으면서도 사용자 편의성을 극대화하는 전략적 목차 활용법을 다룹니다. 검색 엔진과 사용자 모두를 만족시키는 최적의 타협점을 찾아보겠습니다.

목차 기능이 주는 확실한 이점

블로그에 목차를 넣으면 다음과 같은 긍정적인 효과를 기대할 수 있습니다.

• 글의 구조 시각화: 독자가 전체적인 흐름을 단번에 파악할 수 있습니다.
• 이탈률 감소: 원하는 소제목으로 바로 이동할 수 있어 정보 탐색 효율이 올라갑니다.
• 웹 접근성 향상: 스크린 리더 사용자 등 다양한 환경의 독자에게 명확한 가이드를 제공합니다.
• 스캔 가능성(Scannability) 증대: 바쁜 현대인들이 필요한 정보만 골라 읽기 좋은 환경을 만듭니다.

자동 블로그 목차가 유발하는 SEO 문제점

운영자가 직접 정성 들여 짠 목차와 달리, 프로그램이 만드는 자동 목차는 다음과 같은 치명적인 단점을 가질 수 있습니다.

1. CLS(Cumulative Layout Shift)와 사용자 경험 저해

대부분의 자동 목차는 본문 로딩이 끝난 후 자바스크립트가 실행되면서 뒤늦게 삽입됩니다. 이때 갑자기 목차 영역이 생겨나면서 아래쪽 본문이 툭 밀려 내려가는 현상이 발생하는데, 이것이 바로 CLS입니다. 구글은 이 레이아웃 흔들림 점수를 페이지 경험 평가의 핵심 지표로 삼고 있으며, 점수가 나쁠 경우 검색 순위에서 불이익을 줄 수 있습니다.

2. 구글의 스팸 링크 인식 위험

구글은 2024년 업데이트를 통해 기계적으로 생성된 내부 링크 패턴에 대한 감시를 강화했습니다. 본문 내용과 상관없이 동일한 포맷으로 나열된 자동 목차 링크들이 과도할 경우, 검색 엔진은 이를 유용한 정보가 아닌 검색 순위 조작을 위한 링크 스팸으로 오인할 가능성이 있습니다.

3. 메인 콘텐츠 도달 방해

자동 생성된 목차가 너무 길면 사용자가 실제 내용을 보기 위해 한참을 스크롤해야 합니다. 특히 모바일 환경에서 큰 화면을 차지하는 목차는 사용자 짜증을 유발하여 이탈로 이어지는 원인이 됩니다.

SEO와 UX를 모두 잡는 사이드바 팝업 목차 방법

그렇다면 목차를 아예 없애야 할까요? 아닙니다. 해결책은 필요할 때만 나타나는 사이드바 팝업 형태로 구현하는 것입니다. 이 방식은 본문 레이아웃에 영향을 주지 않으므로 CLS 문제를 원천 차단할 수 있습니다.

핵심은 목차를 본문 흐름에서 분리하여 사용자 선택에 따라 보여주는 것입니다!

• CLS 방지: 팝업 형태는 기존 본문의 위치를 밀어내지 않아 레이아웃이 안정적입니다.
• 콘텐츠 집중도 향상: 평소에는 숨겨져 있어 독자가 글 내용에만 집중할 수 있게 합니다.
• 크롤러 최적화: aria-hidden 속성 등을 활용해 스팸 의혹을 줄이면서도 검색 로봇이 구조를 이해하게 돕습니다.

사이드바 팝업 목차 구현 코드

아래 코드를 스킨 편집의 HTML 편집에서 </body> 태그 바로 위에 삽입하세요. 이 스크립트는 본문의 H2~H4 태그를 찾아 자동으로 목차를 생성하고, 화면 크기에 맞춰 스마트하게 노출 여부를 결정합니다.

<!-- 목차 토글 버튼 및 영역 구성 -->
<div id="toc-toggle" style="position:fixed; bottom:20px; right:20px; background:#333; color:#fff; padding:10px; cursor:pointer; z-index:10001;">목차</div>

<div id="toc-popup" style="display:none; position:fixed; top:100px; right:20px; width:250px; background:#fff; border:1px solid #ddd; padding:15px; z-index:10000; box-shadow:0 0 10px rgba(0,0,0,0.1); max-height:70vh; overflow-y:auto;">
    <div id="toc"><ul style="list-style:none; padding:0; margin:0;"></ul></div>
</div>

<script>
document.addEventListener("DOMContentLoaded", () => {
    const tocList = document.querySelector("#toc ul");
    const popup = document.getElementById("toc-popup");
    const toggle = document.getElementById("toc-toggle");
    // 티스토리 본문 영역 클래스에 맞춰 수정 가능
    const headings = document.querySelectorAll(".contents_style h2, .contents_style h3, .contents_style h4");

    if (!headings.length || !popup || !toggle) {
        if(popup) popup.remove();
        if(toggle) toggle.remove();
        return;
    }

    headings.forEach((heading, i) => {
        if (!heading.id) heading.id = "heading-" + i;
        const li = document.createElement("li");
        li.style.marginBottom = "8px";
        
        if (heading.tagName === "H3") li.style.paddingLeft = "15px";
        else if (heading.tagName === "H4") li.style.paddingLeft = "30px";
        
        const a = document.createElement("a");
        a.href = "#" + heading.id;
        a.textContent = heading.textContent;
        a.style.textDecoration = "none";
        a.style.color = "#555";
        a.style.fontSize = "0.9rem";
        
        li.appendChild(a);
        tocList.appendChild(li);
    });

    let userToggled = false;
    function updateDisplay() {
        if (!userToggled) {
            popup.style.display = window.innerWidth >= 1500 ? "block" : "none";
        }
    }

    updateDisplay();
    toggle.addEventListener("click", () => {
        popup.style.display = popup.style.display === "block" ? "none" : "block";
        userToggled = true;
    });
    window.addEventListener("resize", updateDisplay);
});
</script>

이 방식을 적용하면 대화면 사용자에게는 항상 편리한 목차를 제공하고, 모바일이나 일반 화면에서는 본문 내용을 방해하지 않는 깔끔한 환경을 유지할 수 있습니다. Core Web Vitals의 CLS 점수가 획기적으로 개선되어 구글 검색 엔진에서 높은 점수를 받는 데 유리해집니다.

자동화 목차는 분명 편리하지만, 그 이면에 숨겨진 SEO 리스크를 관리하는 것이 실력 있는 블로거의 차이입니다. 오늘 소개해 드린 팝업 전략을 통해 빠르고 안정적인 블로그를 만들어 보세요.