GPT로 자동 목차 만들기: 프롬프트까지 포함한 초보자 가이드

📌 목차

1. GPT로 자동 목차 만들기: 프롬프트까지 포함한 초보자 가이드
2. 1. GPT가 해주는 일
3. 2. 기본 흐름
4. 3. 사용할 프롬프트 예시
5. 4. GPT가 만들어 주는 결과 (예시)
6. 5. 플랫폼별 적용 방법
7. ✅ 정리

GPT로 자동 목차 만들기: 프롬프트까지 포함한 초보자 가이드

블로그 글이 길어질수록 독자들은 “이 글 어디까지 읽어야 하지?” 하고 고민한다. 그래서 필요한 게 바로 **목차(ToC, Table of Contents)**이다.

문제는 초보자에게 HTML 코드를 일일이 작성하는 게 쉽지 않다는 점이다.

그럴 때 바로 GPT를 활용할 수 있다. 내가 쓴 글 전체를 GPT에 붙여넣으면, GPT가 자동으로 소제목(H1, H2, H3)을 인식해서 목차 코드를 만들어 준다. 심지어 프롬프트를 잘 작성하면 GPT가 목차를 최상단에 붙여 넣은 완성형 블로그 글까지 반환한다.

---

1. GPT가 해주는 일

1. 글 전체를 읽고 H1/H2/H3 소제목을 추출한다.
2. 각 소제목에 맞는 id를 자동 생성한다. (영문 소문자·하이픈 형태)
3. 상단에 넣을 **목차 코드(nav 태그)**를 만든다.
4. 본문 소제목에도 id를 붙여서 다시 출력한다.
5. 최종적으로 **“목차가 포함된 전체 블로그 글”**을 반환한다.

👉 즉, 내가 할 일은 글과 함께 올바른 프롬프트를 GPT에 던지는 것뿐이다.

---

2. 기본 흐름

1. 내 블로그 글 작성
2. → 평소처럼 H1, H2, H3 소제목을 달아 글을 쓴다.
3. GPT에게 글과 프롬프트를 같이 제공
4. → “이 글의 소제목을 인식해서 목차 코드를 최상단에 넣고 전체 블로그를 반환해라”라는 명령을 준다.
5. GPT가 완성된 글 제공
6. → 목차 박스 + 본문 + id까지 반영된 글이 통째로 나온다.

---

3. 사용할 프롬프트 예시

아래 프롬프트를 그대로 GPT에 붙여 넣으면 된다.

글 내용을 함께 붙여 넣는 걸 잊지 말자.

너는 블로그 편집 도우미야.
내가 주는 블로그 글에서 H1, H2, H3 소제목을 인식해서 다음을 해 줘:

1) 각 소제목(H1/H2/H3)에 영어 소문자-하이픈 규칙의 id를 자동 생성한다.
2) 글 최상단에 넣을 <nav class="toc"> 목차 코드를 만든다.
   - H2는 1단계 목록, H3는 들여쓰기된 하위 목록으로 표시.
   - 목차 항목은 a href="#id" 형태로 해당 제목과 연결한다.
3) 목차 코드가 최상단에 포함된 상태로, 전체 블로그 글을 HTML로 다시 반환한다.
4) 보기 좋은 간단한 CSS도 포함해 준다.

아래는 내가 쓴 블로그 글이다:
[여기에 네 블로그 글 전체를 붙여넣기]

---

4. GPT가 만들어 주는 결과 (예시)

내 글에 이런 소제목이 있다고 하자:

# 블로그 SEO 기초 가이드

## 1. 글 제목 최적화### (1) 키워드 앞배치### (2) 숫자 활용
## 2. 첫 문단 작성법### (1) 3문장 규칙### (2) 대상·약속·결과
## 3. 소제목 활용하기

👉 GPT는 다음과 같이 결과를 준다.

목차 + 전체 글 HTML

<nav class="toc" aria-labelledby="toc-title">
  <strong id="toc-title">목차</strong>
  <ol>
    <li><a href="#title-optimization">1. 글 제목 최적화</a>
      <ul>
        <li><a href="#keyword-front">(1) 키워드 앞배치</a></li>
        <li><a href="#use-numbers">(2) 숫자 활용</a></li>
      </ul>
    </li>
    <li><a href="#intro-paragraph">2. 첫 문단 작성법</a>
      <ul>
        <li><a href="#three-sentences">(1) 3문장 규칙</a></li>
        <li><a href="#structure">(2) 대상·약속·결과</a></li>
      </ul>
    </li>
    <li><a href="#use-headings">3. 소제목 활용하기</a></li>
  </ol>
</nav>

<h1 id="blog-seo-guide">블로그 SEO 기초 가이드</h1>

<h2 id="title-optimization">1. 글 제목 최적화</h2>
<h3 id="keyword-front">(1) 키워드 앞배치</h3>
<h3 id="use-numbers">(2) 숫자 활용</h3>

<h2 id="intro-paragraph">2. 첫 문단 작성법</h2>
<h3 id="three-sentences">(1) 3문장 규칙</h3>
<h3 id="structure">(2) 대상·약속·결과</h3>

<h2 id="use-headings">3. 소제목 활용하기</h2>

<style>
.toc { padding:1rem; border:1px solid #eee; border-radius:8px; background:#fafafa; }
.toc ol, .toc ul { margin:0.25rem 0 0.25rem 1.25rem; }
.toc li { margin:0.25rem 0; }
.toc a { text-decoration:none; color:#333; }
.toc a:hover { text-decoration:underline; }
</style>

이제 이 결과를 그대로 복사해 블로그 HTML 편집 모드에 붙여 넣으면 된다.

---

5. 플랫폼별 적용 방법

• 워드프레스: “커스텀 HTML” 블록에 붙여 넣기 → CSS는 “추가 CSS”에 적용 가능
• 티스토리: 글쓰기에서 HTML 편집 모드 전환 후 붙여 넣기
• 네이버 블로그: “HTML 편집(소스)” 모드에서 붙여 넣기
• 노션: HTML 편집이 불가 → 대신 “목차 블록(ToC)” 기본 기능 사용

---

✅ 정리

1. 글을 다 쓰고 H1, H2, H3를 달아 준다.
2. 글 전체를 GPT에 붙여 넣는다.
3. *프롬프트: “목차 코드를 최상단에 넣어서 전체 블로그 반환”**을 사용한다.
4. GPT가 만들어 준 결과를 복사해서 블로그 HTML 모드에 붙여 넣는다.

👉 이렇게 하면 초보자도 완성형 목차가 포함된 블로그 글을 손쉽게 만들 수 있다.

 

 

 

구글 검색 상위 노출: 블로그 초보자를 위한 실천 가이드