[티스토리 꿀팁] 방문자 체류시간 늘리는 자동 목차 만들기 & 서식 저장 완벽 가이드

[티스토리 꿀팁] 방문자 체류시간 늘리는 자동 목차 만들기 & 서식 저장 완벽 가이드

블로그에 정성껏 긴 글을 작성할 때, 방문자가 원하는 정보를 쉽게 찾을 수 있도록 친절하게 안내하는 일은 매우 중요하다. 글의 첫머리에 목차(TOC, Table of Contents)를 제공하면 방문자의 체류시간이 길어지고 이탈률이 줄어들기 때문이다. 이는 구글과 같은 검색 엔진에서 SEO(검색엔진 최적화) 점수를 높게 받는 핵심 요소이기도 하다.

오늘 이 글에서는 티스토리 블로그에서 클릭하면 해당 챕터로 부드럽게 이동하는 목차를 HTML로 직접 만드는 방법과, 이 코드를 매번 번거롭게 쓰지 않고 '서식'에 저장하여 클릭 한 번에 불러오는 방법을 아주 상세하게 설명한다. 이 글 자체에도 클릭하면 이동하는 목차를 적용해 두었으니 직접 눌러보며 체감해 보자!

📝 이 글의 목차 (클릭하면 이동한다)

• 클릭하면 이동하는 '앵커 링크(Anchor Link)'의 원리
• HTML 코드로 목차와 챕터 제목 만들기
• 매번 쓰기 귀찮다면? 티스토리 '서식'에 저장하기
• 저장한 서식 실전에서 불러와 사용하기

---

1. 클릭하면 이동하는 '앵커 링크(Anchor Link)'의 원리

목차를 클릭했을 때 글의 특정 위치로 이동하게 만드는 원리는 HTML의 <a> 태그와 id 속성을 이용하는 것이다. 이를 앵커 링크라고 부른다. 출발지(목차)에는 이동할 목적지의 이름을 적어주고, 도착지(챕터 제목)에는 그 이름표를 달아주는 아주 간단한 방식이다.

2. HTML 코드로 목차와 챕터 제목 만들기

이제 직접 코드를 작성해 볼 차례다. 티스토리 에디터 우측 상단의 모드를 '기본모드'에서 'HTML'로 변경한 뒤, 아래의 코드를 활용하면 된다.

① 목차 부분 (출발지)

글의 최상단에 들어갈 목차 리스트다. href="#원하는이름" 형식으로 링크를 걸어주면 된다.

<div style="border: 1px solid #ddd; padding: 20px; border-radius: 8px;">
  <p style="font-weight: bold; font-size: 18px;">📝 목차</p>
  <ul>
    <li><a href="#chapter1">첫 번째 주제</a></li>
    <li><a href="#chapter2">두 번째 주제</a></li>
  </ul>
</div>

② 본문 챕터 제목 부분 (도착지)

이제 본문의 각 소제목에 이름표(id)를 달아줄 차례다. 목차에서 지정한 이름과 동일하게 id="원하는이름"을 넣어주면 연결이 완벽하게 끝난다.

<h2 id="chapter1">첫 번째 주제의 제목</h2>
<p>여기에 첫 번째 주제에 대한 본문 내용을 작성한다.</p>

<h2 id="chapter2">두 번째 주제의 제목</h2>
<p>여기에 두 번째 주제에 대한 본문 내용을 작성한다.</p>

---

3. 매번 쓰기 귀찮다면? 티스토리 '서식'에 저장하기

이렇게 만든 훌륭한 목차 양식을 매번 글을 쓸 때마다 HTML로 타이핑하는 건 너무 비효율적이다. 티스토리의 서식 기능을 활용하면 이 모든 과정을 한 번의 클릭으로 끝낼 수 있다. 다음 순서대로 차근차근 따라 해 보자.

1. 티스토리 [블로그 관리 홈]으로 접속한다.
2. 좌측 메뉴 중 [콘텐츠] - [서식 관리]를 클릭한 뒤, 우측 상단의 [서식 쓰기] 버튼을 누른다.
3. 제목에 '블로그 기본 목차 서식'이라고 알아보기 쉽게 적어둔다.
4. 에디터 우측 상단의 '기본모드'를 클릭해서 'HTML' 모드로 전환한다.
5. 위에서 만들었던 ① 목차 부분과 ② 본문 챕터 제목 부분 코드를 모두 붙여넣고 [완료]를 눌러 저장한다.

4. 저장한 서식 실전에서 불러와 사용하기

이제 새로운 포스팅을 작성할 때 [기본모드] 에디터 상단 메뉴 우측에 있는 점 세 개(...) 아이콘을 누르고 [서식]을 클릭해 보자. 방금 저장한 '블로그 기본 목차 서식'을 바로 불러올 수 있다.

서식을 불러온 후에는 다시 HTML 모드로 갈 필요 없이, 기본모드 상태에서 텍스트만 이번에 쓸 글의 주제에 맞게 수정해서 작성하면 된다. 정말 간편하지 않은가?

---

이렇게 앵커 링크를 활용한 목차는 방문자의 편의성을 극대화하여 글의 가치를 높여주고, 검색 엔진에게 글의 구조를 명확히 전달하여 SEO 최적화에 강력한 무기가 된다. 오늘 정리한 방법으로 블로그 글이 더 많은 사람에게, 더 오래 사랑받길 응원한다!

📌 정보 출처

• HTML 앵커 링크(Anchor Link) 속성 및 구현 원리: W3C(World Wide Web Consortium) HTML5 표준 문서
• 티스토리 서식 저장 및 불러오기 기능: 카카오(Kakao) 티스토리 공식 가이드 및 도움말 센터