왜 만들었을까
블로그에 시리즈 글을 쓰면서 한 가지가 계속 마음에 걸렸습니다.
한 사람이 시리즈의 한 편을 읽고, 그 시리즈의 다른 글도 읽어줬으면 좋겠다.
시리즈물 쓰는 사람이라면 다 비슷할 것이라고 생각합니다. 한두 시간 공들여 쓴 글이 한 번 들어왔다 가는 사람보다, 시리즈 전체를 봐주는 사람이 한 명이라도 더 있었으면 하는 마음. 글이 한 편씩 따로따로 떠다니는 게 아니라, 하나의 묶음으로 읽혀야 의미가 생기니까요.
티스토리에는 위아래로 이전 글/다음 글 보여주는 시리즈 링크 기능이 있긴 있습니다. 근데 솔직히 잘 안 보이고 다른 글을 읽고싶은 느낌은 없었습니다.
제가 원했던 건 글 본문 안에 자연스럽게 녹아드는, 한눈에 시리즈 전체 흐름이 보이는 목차였습니다. 3편 읽고 있는 사람한테 "이 글 앞에 1편, 2편이 있고, 뒤로 4편, 5편이 이어진다"를 자연스럽게 보여주고 싶었습니다.
이 도구는 그 목적으로 만들었다.
어떤 효과가 있나
실제로 적용해보면 두 가지가 달라집니다.
1. 시리즈 중간 편으로 들어온 사람의 이탈이 줄어든다.
검색으로 들어온 독자는 보통 그 글이 시리즈인지 모릅니다. 글 본문 위에 시리즈 전체 흐름이 보이면, "이 글 앞에 어떤 맥락이 있구나"가 한눈에 들어옵니다. 1편으로 거슬러 올라가서 처음부터 읽기 시작하는 독자가 생길 가능성이 높습니다.
2. 새 글을 발행할 때마다 기존 글을 수정할 일이 사라진다.
시리즈 목차를 직접 HTML로 삽입하면, 새 편 발행할 때마다 이미 발행한 글들의 본문을 전부 열어서 목차를 갱신해야 한다. 10편짜리 시리즈에 11편 추가하려면 글 10개를 다 수정해야 한다. 제가 만든 도구는 그 작업이 0(없음)이다. 새 글을 발행하면 모든 시리즈 글의 목차에 자동으로 추가됩니다.
블로그 스킨에 코드를 한 번만 붙여넣으면 끝입니다. 코딩 지식은 필요 없습니다.
한눈에 보는 작업 흐름 요약
작업은 세 단계로 끝납니다. 전체 소요 시간은 약 2분입니다.
- 생성기 사이트에서 코드 만들기 (1분)
- 블로그 스킨에 코드 붙여넣기 (1분)
- 시리즈 글에서 잘 보이는지 확인 (10초)
이게 전부입니다. 아래에서 각 단계를 자세히 풀어드립니다.
시작 전 안심 메시지
이 작업으로 블로그가 망가지지 않습니다.
마음에 들지 않으면 붙여넣은 코드를 지우는 것만으로 원상복구됩니다.
천천히 따라오시면 됩니다.
1단계 — 생성기 사이트에서 코드 만들기
시리즈 카테고리 주소를 복사합니다
본인 블로그에서 시리즈 글들이 모여 있는 카테고리 페이지를 엽니다. 그 상태에서 브라우저 주소창의 주소를 그대로 복사합니다.
GitHub 가입도, 파일 업로드도 필요 없습니다.
블로그 스킨에 코드를 한 번만 붙여넣으면 끝입니다.
그 후로는 새 글을 쓸 때마다 시리즈 목차에 자동으로 추가됩니다.
이 글은 v2를 적용하는 가장 쉬운 방법을 정리한 것입니다. 코딩 지식 없이도 따라 할 수 있도록 작성했습니다.
복사한 주소는 다음과 같은 형태입니다.
https://본인블로그.tistory.com/category/카테고리이름생성기 사이트에 접속합니다
buildify365 시리즈 목차 생성기에 접속한 뒤, 상단 [v2 최신] 탭을 클릭합니다.
카테고리 주소를 붙여넣습니다
화면의 "1. 카테고리 URL" 입력란에 방금 복사한 주소를 붙여넣습니다.
→ [이미지 3]
시리즈가 여러 개라면 한 줄에 하나씩 입력할 수 있습니다.
https://본인블로그.tistory.com/category/시리즈1
https://본인블로그.tistory.com/category/시리즈2디자인을 선택합니다
"2. 디자인" 영역에서 원하는 시안을 클릭합니다. 미리보기에 즉시 반영됩니다.
- Editorial — 미니멀 타임라인 (라이트 톤)
- Magazine — 책 목차 스타일 (크림 톤)
- Lecture — 강의 챕터 (다크 톤)
처음 적용하시는 분께는 Editorial을 추천드립니다. 어떤 블로그 디자인에도 무난하게 어울립니다. 나중에 언제든 변경 가능합니다.
미리보기로 확인합니다
화면 아래 "3. 미리보기" 영역에 실제 시리즈 글이 어떻게 보일지 표시됩니다. 본인 시리즈 글 목록으로 시뮬레이션되니, 적용 전 결과를 그대로 확인할 수 있습니다.
코드를 복사합니다
"4. 임베드 코드" 영역의 [코드 복사] 버튼을 클릭합니다. 클립보드에 코드가 복사됩니다.
복사 후에는 다른 것을 복사하지 마세요. 다른 텍스트를 복사하면 이 코드가 사라지므로 바로 다음 단계로 넘어가는 것이 좋습니다.
복사된 코드는 이런 모양입니다.
<!-- buildify365 시리즈 nav -->
<div class="bf365-series-auto"
data-categories="https://본인블로그.tistory.com/category/카테고리이름"></div>
<script src="https://cdn.jsdelivr.net/gh/buildify365/series-nav@main/series-nav.min.js" defer></script>
1단계는 여기까지입니다.
2단계 — 블로그 스킨에 코드 붙여넣기
이 단계는 티스토리 관리 페이지에서 진행합니다. 평소 잘 들어가지 않는 영역이라 다소 낯설 수 있습니다. 그러나 실제로 손대는 부분은 매우 작습니다.
관리 페이지로 이동합니다
본인 블로그에서 우측 상단 프로필 또는 관리 버튼을 클릭해 관리 페이지로 진입합니다.
스킨 편집 메뉴를 엽니다
좌측 메뉴에서 꾸미기 → 스킨 편집을 클릭합니다.
HTML 편집 모드로 전환합니다
스킨 편집 화면 우측 상단의 [HTML 편집] 버튼을 클릭합니다.
전체 화면 가득 코드가 표시되는데, 처음 보면 이걸 만져도 되나 생각하기 쉽습니다. 그러나 이번 작업에서 손대는 부분은 저 코드중에 추가할 한 줄뿐입니다. 다른 부분은 수정하지 않기 때문에 기능에 문제 없습니다.
본문이 들어가는 자리를 찾습니다
키보드 단축키로 검색합니다.
- Windows:
Ctrl + F - Mac:
Cmd + F
검색창에 다음을 그대로 입력합니다.
[##_article_rep_desc_##
이 코드 글 본문이 표시되는 자리를 의미합니다. 모든 티스토리 스킨에 공통으로 들어 있습니다.
(마지막 대괄호 하나는 고의적으로 제외했습니다.)
그 줄 바로 아래에 코드를 붙여넣습니다
찾은 줄의 바로 다음 줄에 1단계에서 복사한 코드를 붙여넣습니다.
위치가 한두 줄 어긋나도 괜찮습니다. 위젯이 자동으로 적절한 위치(본문 맨 위)로 이동합니다.
적용합니다
화면 우측 하단의 [적용] 버튼을 클릭합니다. "적용되었습니다" 메시지가 표시되면 완료입니다.
2단계도 끝났습니다.
3단계 — 잘 보이는지 확인하기
본인 블로그의 시리즈 글 한 편을 새 탭에서 열어봅니다.
위젯이 표시된다면 적용 성공입니다.
새 글을 발행했는데 위젯에 들어오지 않을 때
자동 갱신은 최대 1시간이 걸립니다. 즉시 반영하려면 다음과 같이 진행하시면 됩니다.
- 생성기 페이지 다시 열기
- 상단의 "↻ 글 쓰고 시리즈 목차에 반영" 토글 펼치기
- 카테고리 주소 입력 후 [지금 반영] 클릭
자주 사용하실 분을 위해 같은 페이지에 북마크용 주소도 노출됩니다. 한 번 즐겨찾기 해두시면 다음부터는 클릭 한 번으로 갱신됩니다.
시리즈가 늘어나면
새 시리즈가 생겨도 글마다 코드를 다시 추가할 필요는 없습니다. 스킨 편집에서 처음 붙여넣은 부분만 수정하면 됩니다.
<div class="bf365-series-auto"
data-categories="https://본인블로그.tistory.com/category/시리즈1
https://본인블로그.tistory.com/category/시리즈2
https://본인블로그.tistory.com/category/시리즈3"></div>
data-categories=" " 안에 한 줄씩 추가하면 모든 글에 즉시 반영됩니다.
질문
위젯이 보이지 않습니다
다음 네 가지를 차례로 확인해주세요.
- 카테고리 주소가 정확한가요? 카테고리 페이지를 직접 클릭한 상태에서 주소창의 주소를 그대로 복사하셨는지 확인해주세요. 한 글자만 달라도 작동하지 않습니다.
- 시리즈에 속한 글에서 보고 계신가요? 홈, 카테고리 목록, 소개 페이지에서는 의도적으로 표시되지 않습니다. 시리즈 카테고리에 속한 개별 글에서만 표시됩니다.
- 티스토리 모바일 앱에서 보고 계신가요? 티스토리 앱은 외부 스크립트를 차단하므로 위젯이 표시되지 않습니다. PC 브라우저나 모바일 웹브라우저(크롬, 사파리 등)에서는 정상 표시됩니다.
- 코드 위치가 맞나요?
[##_article_rep_desc_##근처에 붙여넣었는지 다시 확인해주세요.
시리즈가 아닌 글에도 위젯이 뜹니다
data-categories에 입력한 카테고리 주소와 현재 글의 카테고리가 정확히 매칭될 때만 위젯이 표시됩니다. 매칭되지 않으면 자동으로 숨겨집니다. 입력하신 카테고리 주소를 다시 확인해주세요.
디자인이나 옵션을 바꾸고 싶습니다
생성기 페이지에서 옵션을 다시 선택해 새 코드를 복사한 뒤, 스킨 편집에서 기존 코드를 새 코드로 교체하고 적용하면 됩니다. 한 곳만 바꾸면 모든 글에 즉시 반영됩니다.
잘못 건드린 것 같습니다. 되돌릴 수 있나요?
스킨 편집에서 붙여넣은 그 코드 세 줄만 지우고 적용하면 100% 원상복구됩니다.
카테고리 주소 안의 한글이 %EC%B9%B4%ED... 같은 이상한 코드로 바뀝니다
정상입니다. 컴퓨터는 한글과 저 코드를 똑같이 인식합니다.
마치며
함께 쓰면 좋은 다른 도구도 같이 소개합니다.
문의는 buildify365@gmail.com 또는 댓글로 부탁드립니다.
'Project > 시리즈 네비게이션(목차) 생성기' 카테고리의 다른 글
| [구버전] 코딩 없이 블로그 시리즈 목차 넣는 법 — 무료 · 스크린샷 가이드 (1) | 2026.02.28 |
|---|---|
| [구버전] 시리즈 목차, 5분이면 끝 (무료 · 코딩 없이) — 시리즈 네비게이션 생성기 (1) | 2026.02.28 |