상단 목차(TOC) 만들기: HTML/CSS만으로 체류 시간 2배 늘리는 자동 목차 구성법

상단 목차(TOC) 만들기 HTML CSS만으로 체류 시간을 늘리는 자동 목차 구성

 

HTML/CSS만으로 체류 시간 2배 늘리는 자동 목차 구성법

 

"목차(TOC)"를 페이지 상단에 추가하면 독자의 체류 시간이 눈에 띄게 늘어나고, 구글 검색 결과에서 사이트링크로 노출될 가능성도 높아진다. 실제로 긴 글에 목차를 달아둔 것만으로 이탈률이 줄어든다는 데이터가 있다. 독자 입장에서는 글을 읽기 전에 전체 흐름을 파악하고 원하는 섹션으로 바로 이동할 수 있으니 편하고, SEO 측면에서도 구글이 페이지 구조를 더 잘 이해하게 된다. 이번 글에서는 JavaScript 없이 순수 HTML/CSS만으로 "목차"를 구성하는 방법을 단계별로 정리한다.

 

📋 목차

• 목차가 SEO와 체류 시간에 미치는 영향
• 앵커 링크로 목차 기본 구조 만들기
• CSS로 목차 박스 스타일링하기
• 스크롤해도 따라오는 사이드 목차
• 부드러운 스크롤 효과 추가하기
• 구글이 좋아하는 목차 마크업 작성법
• 마무리 체크리스트

📊 목차가 SEO와 체류 시간에 미치는 영향

목차가 왜 중요한지부터 짚고 넘어가자. 독자가 블로그에 들어왔을 때 글이 길면 "이거 다 읽어야 하나?" 하는 부담감부터 온다. 목차가 있으면 전체 구조를 한눈에 파악하고, 필요한 부분만 빠르게 찾을 수 있다. 이게 체류 시간 증가로 이어진다.

구글 검색 결과 페이지에서 특정 글이 여러 줄로 펼쳐지면서 내부 링크들이 표시되는 걸 본 적 있을 거다. 이걸 '사이트링크'라고 하는데, 페이지 내 앵커 링크가 잘 구성되어 있을 때 구글이 이를 인식해서 검색 결과에 반영하기도 한다. 직접적인 SEO 신호는 아니지만, 클릭률(CTR) 향상에는 영향을 준다.

또 하나, "목차"가 있는 글은 사용자가 글의 일부를 읽고 이탈했다가 다시 돌아와서 다른 섹션을 읽는 패턴이 발생하기 쉽다. 이것 자체가 재방문율과 페이지당 세션 시간에 긍정적인 신호다. 광고 수익 측면에서도 체류 시간이 길수록 광고 노출 횟수가 늘어나니까 직접적인 연결이 된다.

🔗 앵커 링크로 목차 기본 구조 만들기

기술적으로는 간단하다. 이동하고 싶은 위치에 id를 달아두고, 목차에서 #id로 링크를 걸면 된다. HTML의 기본 기능이라 JavaScript가 전혀 필요 없다.

<!-- 목차 영역 -->
<nav class="toc">
  <h2>목차</h2>
  <ul>
    <li><a href="#section1">첫 번째 주제</a></li>
    <li><a href="#section2">두 번째 주제</a></li>
    <li><a href="#section3">세 번째 주제</a></li>
  </ul>
</nav>

<!-- 본문 섹션 -->
<h2 id="section1">첫 번째 주제</h2>
<p>내용...</p>

<h2 id="section2">두 번째 주제</h2>
<p>내용...</p>

id 값은 영문 소문자, 하이픈(-) 조합으로 쓰는 게 관례다. 한글도 되긴 하는데 URL 인코딩 문제가 생길 수 있어서 영문으로 쓰는 게 낫다. "목차"에서 링크를 걸 때는 #을 앞에 붙이는 것만 기억하면 된다.

소제목이 여러 레벨일 경우, h2와 h3를 구분해서 목차에 넣으면 더 상세한 구조가 된다.

<nav class="toc">
  <ul>
    <li><a href="#main1">대주제 1</a>
      <ul>
        <li><a href="#sub1">소주제 1-1</a></li>
        <li><a href="#sub2">소주제 1-2</a></li>
      </ul>
    </li>
    <li><a href="#main2">대주제 2</a></li>
  </ul>
</nav>

🎨 CSS로 목차 박스 스타일링하기

기능은 만들었으니 이제 보기 좋게 꾸밀 차례다. 독자 눈에 "이게 목차구나"라고 바로 인식되게 디자인해야 한다. 배경색, 테두리, 여백을 활용해서 본문과 구분되는 박스 스타일을 만드는 게 기본이다.

/* 목차 컨테이너 */
.toc {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-left: 4px solid #0066cc;  /* 왼쪽 강조 선 */
  border-radius: 6px;
  padding: 20px 25px;
  margin: 30px 0;
  max-width: 600px;
}

/* 목차 제목 */
.toc-title {
  font-size: 15px;
  font-weight: 700;
  color: #333;
  margin: 0 0 12px 0;
  letter-spacing: -0.3px;
}

/* 목차 리스트 */
.toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc li {
  margin: 6px 0;
  padding-left: 15px;
  position: relative;
}

/* 불릿 대신 화살표 */
.toc li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: #0066cc;
  font-weight: bold;
}

/* 목차 링크 */
.toc a {
  color: #444;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.6;
  transition: color 0.2s ease;
}

.toc a:hover {
  color: #0066cc;
  text-decoration: underline;
}

/* 하위 목차 들여쓰기 */
.toc ul ul {
  margin-top: 5px;
  padding-left: 15px;
}

.toc ul ul li::before {
  content: '–';
  color: #999;
}

.toc ul ul a {
  font-size: 13px;
  color: #666;
}

/* 다크 모드 */
@media (prefers-color-scheme: dark) {
  .toc {
    background-color: #1e1e1e;
    border-color: #333;
    border-left-color: #4da6ff;
  }

  .toc-title {
    color: #e0e0e0;
  }

  .toc a {
    color: #bbb;
  }

  .toc a:hover {
    color: #4da6ff;
  }
}

배경색을 너무 튀게 하면 광고처럼 보일 수 있다. 본문과 어울리는 조용한 색상 계열에 왼쪽 강조 선 하나 넣는 게 심플하면서도 눈에 잘 띈다. 블로그 테마 색상과 맞춰서 #0066cc 부분만 바꿔서 쓰면 된다.

📌 스크롤해도 따라오는 사이드 목차

긴 글에서는 사이드에 목차가 고정되어 있으면 훨씬 편하다. 현재 읽고 있는 섹션이 어디인지 파악하기도 쉽고, 다른 섹션으로 이동할 때 위로 스크롤할 필요가 없다.

/* 2단 레이아웃 */
.page-layout {
  display: flex;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
}

.main-content {
  flex: 1;
  min-width: 0;
}

/* 사이드 목차 컨테이너 */
.side-toc {
  width: 240px;
  flex-shrink: 0;
}

/* 스크롤해도 따라오는 고정 목차 */
.side-toc-inner {
  position: sticky;
  top: 20px;  /* 상단 여백 */
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 15px;
  font-size: 13px;
}

/* 모바일: 사이드 목차 숨기기 */
@media (max-width: 900px) {
  .side-toc {
    display: none;
  }
}

모바일에서는 사이드 공간이 없으니까 사이드 목차는 숨기고, 대신 본문 상단에 일반 인라인 "목차"를 보여주는 게 좋다. 두 개를 각각 만들고 CSS로 화면 크기에 따라 보여주고 숨기면 된다.

🌊 부드러운 스크롤 효과 추가하기

앵커 링크를 클릭했을 때 화면이 순간 이동하면 좀 어색하다. CSS 한 줄로 부드러운 스크롤 효과를 줄 수 있다.

/* 전체 페이지에 부드러운 스크롤 적용 */
html {
  scroll-behavior: smooth;
}

/* 고정 헤더가 있는 경우, 앵커 위치 조정 */
:target {
  scroll-margin-top: 70px;  /* 헤더 높이만큼 오프셋 */
}

scroll-behavior: smooth는 거의 모든 현대 브라우저에서 지원된다. :target 셀렉터와 scroll-margin-top은 고정 헤더가 있을 때 유용하다. 헤더가 섹션 제목을 가리는 문제를 해결해준다. 헤더 높이에 맞게 px 값을 조정하면 된다.

🔎 구글이 좋아하는 목차 마크업 작성법

SEO 관점에서 "목차"를 더 잘 만드는 방법이 있다. <nav> 태그를 쓰는 것, aria-label을 추가하는 것, 그리고 시맨틱 마크업을 지키는 것이다.

<nav aria-label="페이지 목차" class="toc">
  <p class="toc-title">목차</p>
  <ol>
    <li><a href="#section1">섹션 제목 1</a></li>
    <li><a href="#section2">섹션 제목 2</a></li>
  </ol>
</nav>

<nav> 태그는 내비게이션 역할을 한다는 걸 브라우저와 검색엔진에 알려준다. aria-label은 스크린 리더 사용자를 위한 접근성 속성이다. 구글은 접근성이 잘 된 페이지를 더 선호하는 경향이 있다. 순서가 있는 목차라면 <ol>을 쓰는 게 시맨틱하게 맞다.

✅ 마무리 체크리스트

"목차"는 글이 길수록 가치가 더 커진다. 짧은 글에는 굳이 필요 없지만, 1000자 이상의 글이라면 독자를 위해서라도, SEO를 위해서라도 꼭 넣는 게 좋다. 오늘 정리한 코드를 가져가서 블로그에 적용해보면 된다. 생각보다 효과가 빠르게 나온다.

• ☑ h2/h3 태그에 id 속성 추가
• ☑ nav 태그로 목차 감싸기 + aria-label
• ☑ CSS 박스 스타일 적용
• ☑ scroll-behavior: smooth 추가
• ☑ 고정 헤더 있으면 scroll-margin-top 처리
• ☑ 모바일에서 사이드 목차 숨김 처리
• ☑ 다크 모드 대응

---

참고 자료 및 출처

• MDN Web Docs – HTML nav element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav
• MDN Web Docs – scroll-behavior: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
• Google Search Central – 페이지 내 링크: https://developers.google.com/search/docs/appearance/sitelinks
• W3C – ARIA in HTML: https://w3c.github.io/aria-in-html/