티스토리 목차 자동 생성 방법 — 코드 없이 30초 적용, 일괄 적용도 가능

`

블로그 글이 길어지면 독자는 원하는 내용을 찾기 어렵고, 이탈률도 올라갑니다.
목차 하나만 넣어도 체류 시간과 사용자 경험이 확 달라지는데요.

기존에는 jQuery 플러그인을 설치하고 CSS를 수정하는 등 복잡한 과정이 필요했습니다.
지금 소개하는 방법은 코드를 몰라도 됩니다.
웹에서 눈으로 보면서 디자인과 기능을 선택하고, 만들어진 코드를 서식에 붙여넣으면 끝입니다. 30초면 됩니다.

---

적용 방법 A — 글마다 서식으로 적용

1단계 — 디자인 선택 (10초)

buildify365 목차 생성기에 접속합니다.

코드를 직접 작성할 필요가 없습니다. 화면에서 원하는 옵션을 클릭하면 미리보기로 바로 확인할 수 있고, 코드는 자동으로 생성됩니다.

• 테마 (라이트 / 다크)
• 색상
• 불릿 스타일 (●, 1.2.3, —, 없음)
• 사이드바 위치 (왼쪽 / 오른쪽)
• 그 외 다양한 옵션

마음에 드는 디자인이 완성되면 코드 복사 버튼을 눌러 복사하세요.

2단계 — 서식에 붙여넣기 (15초)

1. 티스토리 관리 > 콘텐츠 > 서식 관리
2. 서식 쓰기 클릭
3. 에디터를 HTML 모드로 전환
4. 서식 이름 입력및 복사한 코드를 붙여넣기
5. 완료

1-1. 관리 버튼 클릭	1-2. 서신 관리 클릭

2. 서식 쓰기 클릭	3. 에디터를 HTML 모드로 전환

4. 서식 이름 입력 및 복사한 코드 붙여넣기	5. 완료

3단계 — 글에 적용 (5초)

1. 글쓰기 화면에서 상단 서식 버튼 클릭
2. 저장한 목차 서식 선택
3. 글 발행 → 끝!

1. 글쓰기 화면에서 상단 서식 버튼 클릭	2. 저장한 목차 서식 선택

3. 확인 후 글 발행	4. 목차 확인

 

 

글에 제목 1, 제목 2, 제목 3 (에디터 상단 드롭다운에서 선택)을 사용한 글이면 자동으로 목차가 생성됩니다.

제목이 3개 미만이면 목차가 나타나지 않으니 짧은 글에는 영향 없습니다.

서식은 글 본문에서 원하는 위치에 삽입할 수 있습니다. 소개글 아래에 넣고 싶으면 소개글 다음에 서식을 불러오면 됩니다.

---

적용 방법 B — 모든 글에 자동 적용 (일괄 적용)

매번 서식을 넣기 귀찮다면, 스킨 HTML에 한 번만 넣으면 모든 글에 자동 적용됩니다.

1. 티스토리 관리 > 꾸미기 > 스킨 편집 > HTML 편집
2. Ctrl + F 로 article_rep_desc 를 검색 후 그 아래에 있는 </div> 바로 다음 줄에 복사한 코드 붙여넣기
3. 저장 → 모든 글에 자동 적용!

1-1. 스킨 편집	1-2. html 편집

 

2. 텍스트 찾기 및 코드 복사 붙여넣기	3. 모든 글 적용 확인

 

이 경우 목차는 각 글의 첫 번째 제목(h태그) 위에 자동으로 들어갑니다.

서식과 스킨 HTML을 동시에 사용해도 괜찮습니다.
먼저 서식으로 몇 개 글에 적용해 보고, 마음에 들면 스킨 HTML로 전체 적용하세요.
기존에 서식을 넣었던 글은 지우지 않아도 됩니다 — 서식이 있는 글은 서식 위치가 우선되고, 없는 글만 자동 삽입됩니다.

 

특정 글에서 목차 위치를 바꾸고 싶다면, 그 글에만 서식을 삽입하면 됩니다.

---

기능 소개

본문 목차

글 상단에 접기/펼치기 가능한 목차가 들어갑니다.
항목이 많아도 스크롤로 깔끔하게 표시됩니다.

사이드 목차 (데스크탑)

화면 옆에 고정되어 현재 읽고 있는 위치를 실시간으로 하이라이트합니다.
읽기 진행률 바도 함께 표시됩니다.
드래그로 위치 이동도 가능합니다.

모바일 FAB 버튼

모바일에서는 화면 하단에 플로팅 버튼이 나타납니다.
터치하면 목차 드로어가 열리고, 꾹 누르면 잠시 숨길 수 있습니다.

그 외

• 색상, 불릿 스타일 자유롭게 커스텀
• 제목 레벨 자동 보정 (h1~h4 어떤 조합이든 깔끔하게 정리)

---

FAQ

Q. 모든 글에 자동 적용할 수 있나요?
네. 스킨 편집 > HTML에 코드를 넣으면 전체 글에 자동 적용됩니다.
글마다 다른 위치에 넣고 싶다면 서식 방식을 추천합니다.

Q. 서식과 스킨 HTML 둘 다 넣어도 되나요?
네. 서식이 있는 글은 서식 위치가 우선되고, 없는 글만 자동 삽입됩니다. 중복으로 목차가 생기지 않습니다.

Q. 제목이 적은 글에서도 목차가 나오나요?
기본 설정은 제목 3개 이상일 때만 표시됩니다. 옵션에서 변경 가능합니다.

Q. 무료인가요?
네, 완전 무료입니다.

---

마무리

목차 하나로 블로그 글의 가독성이 확 달라집니다.
서식에 코드 한 번 붙여넣으면 본문 + 사이드 + 모바일 목차가 한 번에 적용됩니다.

👉 지금 바로 만들어보기