[업데이트 예정] 코딩 없이 블로그 시리즈 목차 넣는 법 — 무료 · 스크린샷 가이드

 

도입부

이전 글에서 시리즈 네비게이션(목차)이 뭔지 소개했습니다.
이번 글에서는 실제로 만들어서 블로그에 붙이는 과정을 스크린샷과 함께 알려드릴게요.

코딩 지식이 전혀 없어도 됩니다. 스크린샷 따라하기만 하면 끝!

 

전체 과정은 크게 3단계입니다:

단계	내용	소요 예상 시간
1단계	목차 만들기 (buildify365.com)	~5분
2단계	GitHub에 업로드	~5분 (이미 계정 있으면 ~3분)
3단계	블로그에 코드 붙여넣기	~2분

 

---

1단계: 목차 만들기 (이미지 1~9)

buildify365 사이트 접속

제가 따로 운영중인 개인 웹사이트입니다.

buildify365.com에 접속한 뒤, 상단 메뉴에서 도구 → 시리즈 목차 생성을 클릭합니다. → [이미지 1]

이미지 1

 

시작하기

시리즈 네비게이션 생성기 페이지가 나타나면 시작하기 버튼을 클릭합니다. → [이미지 2]

이미지 2

Step 1 — 템플릿 선택

마음에 드는 디자인을 골라주세요. 나중에 바꿀 수 있으니 부담 없이 선택! → [이미지 3]

이미지 3

Step 2 — 기능 설정

기능 설정은 기본값 그대로 두고 다음으로 넘어갑니다. → [이미지 4]

이미지 4

 

Step 3 — 시리즈 정보 입력 

• 시리즈 제목: 블로그에 표시될 시리즈 이름 (예: "제주 여행기") → [이미지 5]
• 시리즈 ID: 파일 이름에 사용되는 영문 ID (예: jeju-travel) → [이미지 5]
  • 영문 소문자, 숫자, 하이픈(-), 밑줄(_)만 사용 가능합니다

이미지 5

Step 4 — 글 목록 입력

각 글의 제목, 소제목(선택), URL을 입력합니다.
항목 추가 버튼으로 글을 더 넣을 수 있어요.

다 입력했으면 코드 생성하기를 클릭!

→ [이미지 6]

이미지 6

TIP: 기존 블로그에서 글 목록을 복사해서 붙여넣기하면 자동으로 제목과 URL이 추출됩니다. 추후 상세설명 예정

Step 5 — ZIP 다운로드

ZIP 다운로드 버튼을 클릭해서 파일을 받습니다. → [이미지 7]

이미지 7

압축 풀기 & 내용물 확인

다운받은 ZIP 파일의 압축을 풀면 아래 파일들이 들어있습니다: → [이미지 8][이미지 9]

• series-nav.js — 렌더링 엔진 (모든 시리즈 공통)
• series/시리즈ID.js — 시리즈 데이터 (시리즈마다 1개)
• README.md — 설명서

이미지 8	이미지 9
압축 풀기	ZIP 내용 확인

 

---

2단계: GitHub에 업로드

GitHub이 뭔가요?
코드를 저장하고 공유하는 서비스입니다. 여기서는 무료 웹서버(GitHub Pages)로 사용합니다.
어렵게 생각하지 마세요 — 파일을 올리고 설정 하나 켜면 끝입니다.

2-1. GitHub 회원가입

이미 GitHub 계정이 있다면 이 단계는 건너뛰세요!

 

1. github.com에 접속합니다, Sign up 클릭, 구글 계정으로 간편 가입 가능 → [이미지 10][이미지 11]

이미지10	이미지 11
이미지 10	이미지 11

 

2. 구글 계정으로 계속하기 → [이미지 12] [이미지 13]

이미지 12	이미지 13
이미지 12	이미지 13

 

3. 닉네임, 지역 확인 후 계정 생성 완료 → [이미지 14]

이미지 14

 

 

2-2. 저장소 만들기 + 파일 업로드 (이미지 15~20)

1. New repository(or New) 클릭 → [이미지 15] [이미지 16]

- 이미지 15는 새 계정일 때 뜨는 사진, 이미지 16은 기존 계정이 있을 때 뜨는 사진입니다. 동일합니다.

이미지 15	이미지 16

 

2. 저장소 이름을 입력합니다

• 이름: buildify365-widgets (다른 이름도 OK)
• Public 선택 (GitHub Pages 무료 사용을 위해 공개 필요) → [이미지 17]

이미지 17

 

3. Add file → Upload files 클릭 → [이미지 18]

이미지 18

 

4. 아까 압축 푼 파일들을 드래그 앤 드롭 또는 파일 선택으로 업로드 → [이미지 19]

이미지 19

 

5. 아래쪽 Commit changes 클릭하여 저장 → [이미지 20]

이미지 20

2-3. GitHub Pages 켜기

이제 업로드한 파일을 인터넷에서 접근할 수 있도록 웹서버를 켭니다.

 

1. 저장소에서 Settings 탭 클릭 → [이미지 21]

이미지 21

 

2. 왼쪽 메뉴에서 Pages 클릭 → Source에서 main branch 선택 → Save 클릭 → [이미지 22] [이미지 23] [이미지 24]

이미지 22 ( Pages -> main branch -> save)	이미지 23 ( main 클릭하면 이 UI로 변경됨)

이미지 24 (Save 완료 된 모습)

 

3. Code 탭으로 돌아가기 → [이미지 25]

이미지 25 (Save 완료 된 모습)

 

4. 잠시 기다리면 오른쪽에 Deployments 섹션에 github-pages가 표시됩니다. 이게 보이면 웹서버 구동 완료! → [이미지 26]

이미지 26

 

5. 확인 과정. 표시된 주소가 내 웹서버 주소입니다. 블로그에서 이 주소로 파일을 불러옵니다 → [이미지 27]

(예: https://내닉네임.github.io/buildify365-widgets/)

이미지 27

---

3단계: 블로그에 적용 (이미지 28~34)

거의 다 왔습니다! 마지막으로 블로그 글에 코드를 붙여넣기만 하면 됩니다.

티스토리 HTML 모드

1. 티스토리 글 작성 화면에서 우측 상단 HTML 버튼을 클릭해 HTML 모드로 변경합니다 → [이미지 28]

이미지 28

블로그 삽입 코드 복사

2. buildify365 시리즈 네비게이션 생성기로 돌아가서 블로그 삽입 코드 복사 버튼을 클릭합니다 → [이미지 29]

이미지 29

코드 붙여넣기

3. 티스토리 HTML 모드에서 목차를 넣고 싶은 위치에 코드를 Ctrl+V로 붙여넣습니다 → [이미지 30]

이미지 30

 

미리보기

4. 미리보기 클릭해서 목차가 제대로 보이는지 확인합니다 → [이미지 31] [이미지 32]

• 시리즈 제목이 잘 나오는지
• 각 글 제목이 맞는지
• 현재 글에 하이라이트가 되는지

이미지 31	이미지 32

 

확인했으면 완료 클릭하여 게시! → [이미지 33]

이미지 33

최종 확인

5. 게시된 글에서 목차가 잘 동작하는지 확인합니다 → [이미지 34]

• 클릭하면 해당 글로 이동되는지
• 현재 글에 하이라이트 표시가 되는지

이미지 34

---

새 시리즈를 추가하고 싶다면?

렌더링 엔진(series-nav.js)은 이미 업로드되어 있으므로,
새 시리즈를 만들 때는 시리즈 데이터 파일만 추가하면 됩니다.

1. buildify365.com에서 새 시리즈 정보 입력 → 코드 생성
2. 시리즈 데이터 다운로드 버튼으로 series/새시리즈ID.js 파일만 다운로드
3. GitHub 저장소의 series/ 폴더에 업로드
4. 블로그 글에 삽입 코드 붙여넣기

---

마무리

수고하셨습니다! 이제 시리즈 글마다 목차가 자동으로 표시됩니다.
독자들이 시리즈 글을 쉽게 탐색할 수 있어서 이탈률도 줄어들 거예요.

궁금한 점이 있으시면 buildify365@gmail.com 또는 댓글로 문의해 주세요.

👉 buildify365 시리즈 네비게이션 생성기 바로가기