📑 Markdown 목차 생성기

Markdown을 붙여넣으면 h1~h6 제목을 추출하여 중첩 목차를 자동 생성. GitHub / GitLab 슬러그, Markdown / HTML / 플레인 출력, 깊이 제한, 번호 목록 지원.

완전 무료 가입 불필요 브라우저 완결 5 개 언어 다크 모드

🔒 개인정보 보호

・브라우저에서만 처리됩니다
・입력 텍스트는 서버로 전송되지 않습니다
・가입 · 로그인 · 결제 불필요

Markdown 입력

⚙ 옵션

출력 형식

슬러그 형식

최소 레벨

최대 레벨

번호 목록 (1.) h1 제외 실시간 변환

생성된 목차

미리보기 (HTML 렌더링)

📖 자주 걸리는 지점

Markdown 의 제목을 읽어 목차를 생성합니다. 출력 형식(플레인 / 슬러그 / 커스텀), 대상으로 할 제목 레벨, 번호 매긴 목록, h1 의 제외를 고를 수 있고 처리는 브라우저 안에서 끝납니다. 앵커 링크의 생성 규칙은 붙여 넣는 플랫폼마다 다릅니다 — 여기서 생성한 링크가 그대로 동작한다는 보장은 없습니다. 특히 일본어 제목은 환경에 따라 취급이 크게 다릅니다.

사례	무슨 일이 일어나는가	어떻게 하면 되는가
목차의 링크를 클릭해도 이동하지 않는다	제목에서 `id` 를 만드는 규칙(슬러그화)은 플랫폼마다 다릅니다 — 기호의 삭제, 연속하는 공백의 취급, 이모지, 그리고 비라틴 문자의 취급이 가장 갈립니다. GitHub 는 일본어를 그대로 `id` 에 쓰고 링크 쪽에서는 URL 인코딩된 형태가 됩니다만 환경에 따라서는 일본어를 전부 떨어뜨리고 `section-1` 같은 연번으로 하는 것도 있습니다. 나아가 같은 Markdown 이라도 GitHub · GitLab · Qiita · Zenn · VitePress · Docusaurus 에서 각각 다른 `id` 가 생성됩니다 — 즉 어디에 붙일지를 정하지 않으면 올바른 링크는 만들 수 없습니다.	붙여 넣는 곳에서 실제로 클릭해 확인하세요 — 이것이 유일하게 확실한 검증 방법입니다. GitHub 라면 제목에 마우스를 올리면 왼쪽에 사슬 아이콘이 나오므로 거기서 복사한 링크가 정답입니다. 하나 확인하면 규칙을 알 수 있으므로 나머지는 같은 변환을 걸면 됩니다. 그리고 목차의 링크가 동작하는지는 공개 후에 반드시 한 번은 전부 클릭하세요 — 특히 긴 기사에서는 링크가 끊긴 목차는 없느니만 못합니다(독자를 무반응한 링크로 이끄는 것은 목차가 없는 것보다 나쁜 경험입니다). 복수의 플랫폼에 같은 문장을 낸다면 목차의 링크는 포기하고 플레인 텍스트의 목록으로 하는 판단도 현실적입니다.
같은 제목이 여럿 있으면 링크가 첫 번째로만 간다	요약 이나 주의점 같은 제목은 한 기사에 몇 번이고 나옵니다. 대부분의 플랫폼은 두 번째 이후의 `id` 에 `-1` · `-2` 처럼 연번을 붙여 충돌을 피합니다만 목차를 생성하는 쪽이 그 규칙을 모르면 전부 같은 링크 대상이 됩니다 — 결과적으로 세 개 있는 요약 중 어느 것을 클릭해도 처음 것으로 갑니다. 연번을 붙이는 방식도 통일되어 있지 않아 `-1` 부터 시작하는 구현과 `-2` 부터 시작하는 구현이 있습니다. 독자가 보기에는 링크는 동작하지만 잘못된 곳으로 가므로 망가진 것을 알아채기 어려운 것이 까다롭습니다.	제목을 유일하게 만드세요 — 요약 이 아니라 인증 주변의 요약, 퍼포먼스의 요약 이라고 쓰면 링크의 문제가 사라질 뿐 아니라 목차를 훑었을 때 내용을 알 수 있게 됩니다. 즉 이는 기술적인 회피책이 아니라 문장의 개선 그 자체입니다 — 목차에 같은 말이 세 번 늘어선 시점에 독자에게 있어서의 가치는 낮아져 있습니다. 굳이 같은 제목을 쓰고 싶은 경우에는 HTML 의 `<a id="...">` 를 손으로 심어 스스로 `id` 를 관리하세요 — Markdown 안에 생 HTML 을 쓸 수 있는 플랫폼이라면 동작합니다(다만 Slack 등 HTML 을 해석하지 않는 환경에서는 무효입니다).
목차가 너무 길어 오히려 읽기 어렵다	h4 나 h5 까지 포함하면 목차만으로 화면 하나분을 차지합니다. 독자가 처음 보는 것이 30 줄의 목록이라면 본문에 다다르기 전에 이탈합니다. 목차의 목적은 전체상을 한눈에 파악시키는 것이므로 한눈에 파악할 수 없는 목차는 목적을 다하지 못하고 있습니다. 더해서 목차의 길이는 제목 구조 그 자체의 문제를 비추고 있습니다 — 20 항목을 넘는다는 것은 한 기사에 너무 밀어 넣었거나 제목을 단락 대신 쓰고 있거나 둘 중 하나입니다.	목차에 실을 것은 h2 와 h3 까지로 하세요 — 이 도구의 최소 / 최대 레벨로 지정할 수 있습니다. h1 은 기사 제목이므로 h1 을 제외를 활성화하세요(본문 중에 h1 이 두 개 있는 것은 애초에 HTML 의 구조로서 올바르지 않습니다). 그래도 20 항목을 넘는다면 기사를 분할하는 것을 검토하세요 — 목차가 길다는 증상은 기사가 다 다룰 수 없는 범위로 퍼져 있다는 진단 결과입니다. 독자가 목차를 보고 나에게 필요한 절이 어느 것인지를 5 초에 판단할 수 있는가를 기준으로 하면 적절한 입도가 정해집니다.

애초에 목차를 본문에 심을 필요가 있는지를 확인하세요. GitHub 는 2021 년부터 README 의 오른쪽 위 버튼으로 제목의 아웃라인을 자동 표시합니다. Zenn · Qiita · 많은 정적 사이트 생성기(VitePress · Docusaurus · Astro)도 제목에서 목차를 자동 생성해 스크롤을 따라가는 형태로 표시합니다. 즉 목차를 손으로 쓸 필요가 있는 것은 그것을 갖지 않는 환경뿐입니다. 심을 경우의 대가도 이해해 두세요 — 제목을 하나 바꿀 때마다 목차를 손으로 고치게 되고 그리고 반드시 잊습니다. 썩은 목차는 독자를 존재하지 않는 절로 안내하므로 없느니만 못하게 됩니다. 지속적으로 갱신하는 문서라면 CI 로 목차를 재생성하는 구조를 넣거나 차라리 넣지 않는다는 판단을 하세요 — markdown-toc 같은 도구를 pre-commit 훅에서 돌리면 수작업은 사라집니다. 한 번 쓰고 방치되는 목차가 최악의 선택입니다.

📖 사용법

1

Markdown 붙여넣기

왼쪽 영역에 전체 Markdown 붙여넣기.
2

옵션 조정

출력 형식, 슬러그, 레벨 등 선택.
3

복사 / 다운로드

복사 또는 .md / .html / .txt 다운로드.

❓ 자주 묻는 질문

GitHub 앵커와 동일합니까?

네. GitHub slugger.js와 동일한 규칙.

Markdown이 서버에 전송됩니까?

아니요. 모두 브라우저에서 처리.

코드 블록 내 # 무시?

네. fenced 코드 블록은 제외.

🔗 관련 도구

🐛 이 도구에서 문제가 발생했나요?

무료 · 가입 불필요. 재현 절차만이라도 도움이 됩니다. 보고는 운영자에게 직접 전달되어 개선에 사용됩니다.