Tip

티스토리 북클럽스킨 목차 만드는 법 – 자동 목차로 글의 완성도를 높이자

lifenwealth 2025. 4. 22.

티스토리 블로그를 운영하면서 글이 길어지면 독자들이 원하는 정보를 빠르게 찾기 어려워질 수 있습니다. 이때 필요한 기능이 바로 자동 목차(ToC, Table of Contents)입니다.
특히 북클럽(Book Club) 스킨을 사용할 경우 약간의 설정만으로도 콘텐츠에 자동으로 목차가 생성되는 기능을 추가할 수 있습니다.

이 글에서는 HTML과 CSS를 활용해 북클럽 스킨에 자동 목차를 추가하는 방법을 상세히 안내드립니다.

1. 왜 목차 기능이 중요한가?

자동 목차는 단순히 보기 편한 기능을 넘어, 독자의 체류 시간 증가, 콘텐츠 구조화, 검색엔진 최적화(SEO) 등 다양한 이점을 제공합니다.

가독성 향상: 긴 글의 구조를 한눈에 파악할 수 있음
이동성 확보: 원하는 항목으로 바로 이동 가능
SEO 개선: 검색엔진이 구조화된 콘텐츠로 인식함
전문 블로그 느낌 강화: 독자의 신뢰도 상승

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

북클럽 스킨은 콘텐츠 중심형 레이아웃을 사용하며, 글 본문은 다음과 같은 클래스로 구성되어 있습니다:

.tt_article_useless_p_margin: 실제 본문이 들어가는 div
h2, h3, h4: 제목 태그 (이들이 목차 항목으로 활용됨)

자동 목차는 이 h2~h4 태그들을 탐색해 목차 리스트를 생성합니다.

3. 자동 목차 기능 구현을 위한 준비물

먼저, 자동 목차 기능을 구현하기 위해 다음 요소를 준비합니다.

jQuery TOC 스크립트 파일: 목차 생성을 위한 자바스크립트 파일
CSS 스타일 코드: 목차 영역의 디자인 설정
HTML 삽입 코드: 글 안에 목차 위치를 표시

4. HTML & JS 코드 추가 방법

1단계: jQuery TOC 파일 업로드

jquery.toc.min.js 파일 다운로드
티스토리 관리자 → 꾸미기 > 스킨 편집 > HTML 편집
상단의 파일업로드 클릭 → js 파일 업로드

2단계: <head> 위에 자바스크립트 연결

HMTL

<script src="./images/jquery.toc.min.js"></script>

3단계: <body> 닫히기 전, 스크립트 추가

HTML

<script>
  $(function() {
    $("#toc").toc({
      content: ".tt_article_useless_p_margin",
      headings: "h2, h3, h4",
      top: -80,
      isBlink: true,
      blinkColor: '#21B9DE'
    });
  });
</script>

설명:

.tt_article_useless_p_margin: 본문 컨테이너
headings: 목차로 구성할 제목 태그
top: 이동 시 상단 여백 조절
blinkColor: 클릭 시 강조 색상

5. CSS로 목차 디자인 설정하기

HTML 구조만으로는 목차가 예쁘게 보이지 않기 때문에, 스타일을 적용해야 합니다.

CSS 코드 추가

스킨 편집 > CSS 탭에서 아래 코드를 추가하세요:

CSS

.book-toc {
  border: 1px solid #ddd;
  padding: 15px;
  background: #f9f9f9;
  margin-bottom: 20px;
  font-family: 'Noto Sans KR', sans-serif;
}

.book-toc p {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 10px;
}

.book-toc ul {
  list-style-type: decimal;
  padding-left: 20px;
}

.book-toc a {
  text-decoration: none;
  color: #333;
}

.book-toc a:hover {
  color: #0077cc;
}

이 스타일은 깔끔한 카드 형태의 목차 UI를 만들어줍니다.

6. 글 작성 시 목차 삽입 방법

이제 실제로 글을 작성할 때 목차를 삽입하는 위치에 아래 코드를 넣기만 하면 됩니다:

HTML

<div class="book-toc">
<p>목차</p>
<ul id="toc"></ul>
</div>

id="toc": 자바스크립트가 인식할 요소
h2, h3, h4가 있는 본문을 기준으로 자동 생성됨

7. 서식으로 등록해 반복 작업 줄이기

매번 목차 코드를 입력하는 것이 번거롭다면, 티스토리의 서식 기능을 활용하세요.

서식 등록 방법

관리자 페이지 > 콘텐츠 > 서식 관리 > 서식 쓰기
HTML 모드로 전환 후 목차 코드 삽입
제목 작성 후 저장
글쓰기 시 서식에서 불러오기

서식 예시 제목: [서식] 자동 목차 블럭

8. 마무리: 사용자 경험과 SEO를 동시에 잡자

목차는 단순한 기능이 아니라, 전문적인 블로그 운영자의 디테일한 배려입니다.
북클럽 스킨을 사용한다면, 이 자동 목차 기능을 통해 다음과 같은 효과를 얻을 수 있습니다:

독자의 콘텐츠 탐색 편의성 향상
검색 노출 구조 개선
글의 신뢰도와 전문성 강화

'Tip' 카테고리의 다른 글

SK텔레콤 해킹 사태와 유심보호서비스 안내: 가입자 대응 가이드 (1)	2025.04.23
워드프레스 필수 플러그인 6선 – 초보자도 꼭 알아야 할 설치 리스트 (2)	2025.04.22
티스토리 링크 버튼 만드는 방법 – 클릭을 부르는 블로그 버튼 만들기 (1)	2025.04.22
티스토리 북클럽스킨 본문 상단 광고 2개 배치하는 방법 – 애드센스 수익 극대화 전략 (1)	2025.04.22
티스토리 북클럽스킨 사이드바 광고 고정 방법 – 수익을 높이는 간단한 설정 (0)	2025.04.22

티스토리 북클럽스킨 목차 만드는 법 – 자동 목차로 글의 완성도를 높이자

1. 왜 목차 기능이 중요한가?

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

3. 자동 목차 기능 구현을 위한 준비물