블로그에서 목차는 SEO (검색엔진 최적화)에 유리하며 사용자 경험을 개선하여 이탈률을 낮추고 전문성 있어 보이는 글 구성을 만들어 주므로 삽입하시는 것을 추천드립니다.
티스토리 목차 삽입을 위해서는 스킨편집에서 html, CSS 코드에 목차 코드를 삽입하고 목차 플러그인 파일을 업로드 해야합니다. 아래에서 코드와 플러그인 파일을 다운로드 받아 복사, 붙여넣기만 하시면 목차를 손쉽게 삽입하실 수 있습니다.
목차 플러그인 파일 업로드
jquery.toc 및 jquery.toc.min 파일은 웹 페이지나 블로그 글 본문 내에 포함된 제목 태그(h2, h3 등)를 자동으로 감지하여, 사용자가 별도로 입력하지 않아도 자동으로 목차(Table of Contents, TOC)를 생성해 주는 기능을 하는 스크립트 파일입니다. 이러한 파일은 주로 블로그나 문서 중심 웹사이트에서 긴 글의 구조를 한눈에 파악하고, 원하는 섹션으로 빠르게 이동할 수 있도록 도와주는 역할을 합니다. 현재 jquery.toc는 오픈소스로 배포되고 있으며, 누구나 무료로 다운로드하여 자유롭게 사용할 수 있습니다. 특히 티스토리와 같은 블로그 플랫폼에서는 별도의 플러그인 없이도 이 파일을 활용해 글의 가독성과 사용자 편의성을 높이는 데 유용합니다.
HTML 목차 코드 삽입
HTML 편집 화면에서 3가지 코드를 입력해야 합니다. (위의 바로가기로 가시면 해당 코드를 다운로드 받을 수 있고 삽입방법에 대한 설명을 보실 수 있습니다.) 스크립트 파일을 업로드한 다음 HTML 코드에 해당 스크립트를 삽입하는 과정은, 단순히 파일을 올리는 것에서 끝나는 것이 아니라 웹페이지 상에서 실제로 목차 기능이 작동하도록 연결해주는 핵심 단계입니다. jquery.toc는 자바스크립트로 동작하는 자동 목차 생성 도구로, 이 파일만 단독으로 업로드해 놓아서는 목차가 자동 생성되지 않습니다. 반드시 HTML 코드 내에서 해당 스크립트를 불러오고 실행하는 구문을 추가해 주어야 글 제목(h2, h3 등)을 인식하고 동적으로 목차를 생성할 수 있게 됩니다.
이렇게 HTML 코드에 스크립트를 삽입하는 목적은 다음과 같습니다:
- 업로드된 스크립트를 페이지에 연결해 동작시키기 위함
브라우저가 jquery.toc.js 또는 jquery.toc.min.js 파일을 읽고 실행할 수 있도록 태그를 삽입합니다. - 본문 내 h2, h3 등의 제목 요소를 인식하고, 목차 영역에 구조화된 링크 목록으로 자동 생성하도록 하기 위함
<div id="toc"></div> 등과 같이 목차가 표시될 위치를 미리 만들어두고, 스크립트 실행 시 이 부분에 목차가 출력되도록 설정합니다. - 사용자 편의성 향상 및 글의 가독성 강화
긴 글일수록 목차가 있으면 독자가 필요한 부분으로 빠르게 이동할 수 있어, 체류 시간을 높이고 블로그의 품질 점수(SEO 관점)에도 긍정적인 영향을 줄 수 있습니다.
CSS 코드 삽입
목차를 자동으로 생성하는 기능은 자바스크립트로 구현되지만, 그 목차가 실제로 어떻게 보일지, 어디에 위치할지, 어떤 스타일로 정렬될지 등은 CSS가 담당합니다. 따라서 jquery.toc 스크립트를 업로드하고 HTML 코드로 불러온 다음에는, 반드시 CSS 코드를 함께 추가해야 목차가 시각적으로도 안정적이고 보기 좋게 표시됩니다.
CSS 코드 추가의 목적은 다음과 같습니다:
- 목차의 위치와 레이아웃 지정
예를 들어, 목차를 본문 상단 또는 사이드바에 고정하려면 position, margin, padding 등의 CSS 속성을 설정해야 합니다. - 글머리 기호, 번호, 들여쓰기 등 계층 구조 표현
h2와 h3를 구분해서 목차에 표시하려면, 각 계층에 따라 스타일을 달리 지정해주는 것이 좋습니다. 예를 들어 h2 항목은 진하게, h3 항목은 들여쓰기로 구분해 가독성을 높일 수 있습니다. - 반응형 디자인 적용
목차가 모바일 기기나 태블릿에서도 자연스럽게 보이도록 @media 쿼리 등을 활용해 반응형 스타일을 설정할 수 있습니다. - 사용자 경험 향상
마우스를 올렸을 때 색이 바뀌거나, 클릭 시 부드럽게 스크롤되는 효과 등을 CSS로 설정하면 목차의 활용도가 높아지고 방문자의 만족도도 올라갑니다.
이처럼 CSS는 단순한 꾸밈 요소를 넘어서, 목차 기능을 시각적으로 완성시키고 사용자에게 직관적인 탐색 환경을 제공하는 데 필수적인 요소입니다. 특히 티스토리처럼 디자인 커스터마이징이 가능한 플랫폼에서는, 기본 목차 스타일 외에도 블로그의 분위기나 스킨 디자인에 맞게 세부 조정할 수 있다는 점에서 CSS 추가는 선택이 아닌 필수 단계입니다.
마치며
이처럼 jquery.toc 스크립트를 업로드하고, HTML과 CSS 코드를 함께 적용하면 티스토리 블로그에서도 복잡한 작업 없이 자동 목차(Table of Contents)를 손쉽게 구현할 수 있습니다. 별도의 플러그인 없이도 본문 내 제목(h2, h3 등)을 자동으로 인식해 목차를 만들어주기 때문에, 긴 글을 작성하거나 정리된 구조가 필요한 글에 특히 유용합니다.
목차는 단순한 장식이 아니라, 사용자 편의성과 블로그 가독성을 높이는 핵심 도구입니다. 독자 입장에서는 원하는 정보를 빠르게 찾을 수 있고, 글쓴이 입장에서는 글의 신뢰도를 높이고 검색 노출(SEO)에도 긍정적인 영향을 줄 수 있습니다.
제가 설명드린 순서를 따라 차근차근 적용해 보신다면, 누구나 어렵지 않게 티스토리 블로그에 깔끔하고 심플한 자동 목차 기능을 추가하실 수 있을 것입니다. 작은 설정 하나로 블로그 전체의 품질을 높일 수 있는 방법이니, 꼭 한 번 적용해 보시길 권해드립니다.