블로그 목록 자동 생성 방법 티스토리 블로그 에서 자동으로 글 목록 만드는 2가지 방법

블로그 목록 자동 생성 방법 비교: jQuery TOC와 순수 JavaScript TOC 장단점

블로그 콘텐츠의 구조적 탐색을 돕는 블로그 목록 자동 생성 방법. jQuery TOC 플러그인과 순수 JavaScript TOC 구현 방법을 비교하고, 각 방법의 SEO 및 성능적 장단점을 분석합니다.

콘텐츠 구조화와 자동 글 목록 생성의 중요성

블로그 글을 작성할 때 자동으로 글 목록을 생성해주는 방법을 활용하면, 콘텐츠를 구조적으로 쉽게 구성할 수 있어 매우 유용합니다. 특히, 긴 글에서 방문자들이 원하는 정보를 빠르게 찾을 수 있도록 돕는 효과적인 방법이며, 이는 곧 사용자 경험(UX) 개선으로 이어져 검색엔진 최적화(SEO)에도 긍정적인 영향을 미칩니다.

이번 글에서는 jQuery TOC 플러그인을 사용한 방법과 순수 JavaScript를 작성해 목차를 만드는 두 가지 방법을 비교하고, 각 방법의 장점과 설정 방법에 대해 자세히 알아보겠습니다. 이를 통해 블로그에서 보다 효율적으로 목차(Table of Contents, TOC)를 생성할 수 있을 것입니다.

1단계: jQuery TOC 플러그인을 활용한 목록 자동 생성 방법

쉽게 글 목록을 작성해주는 jQuery TOC 플러그인 사용방법을 알아보겠습니다. 이 방법은 외부 라이브러리에 의존하지만, 구현 난이도가 낮고 자동화가 용이합니다.

필요한 파일: 아래 링크에서 Download 버튼을 클릭하여 jquery.toc.min.js 파일을 다운로드해야 합니다.

jquery.toc.min.js

0.00MB

1. jQuery TOC를 위한 HTML 및 스크립트 설정

다운로드한 파일을 사용하기 위해, 티스토리의 스킨을 수정해야 합니다. 다음 단계에 따라 HTML을 설정하고 목차 기능을 활성화합니다.

1. 티스토리 관리 페이지 스킨 편집 HTML 편집에서 jquery.toc.min.js 파일을 추가합니다.
2. HTML 메뉴에서 /head 태그 바로 앞에 다음 코드를 추가하여 라이브러리를 로드합니다:

script src="./images/jquery.toc.min.js"/script

1. /body 태그 바로 앞에 다음 스크립트를 추가하여 목차 기능을 활성화합니다:

script
$(document).ready(function() {
 var $toc = $("#toc");
 $toc.toc({
 content: ".tt_article_useless_p_margin",
 headings: "h2,h3,h4"
 });
});
/script

2. 목록 디자인을 위한 CSS 코드 및 서식 추가

목차의 스타일을 설정하기 위해 CSS를 추가합니다. CSS 메뉴에서 아래 코드를 입력하여글 제목의 스타일을 지정합니다. 또한, 목록이 자동으로 표시될 위치에 다음 HTML 서식을 추가합니다:

div class="index_toc"
 p data-ke-size="size16"목차/p
 ol id="toc" style="list-style-type: decimal;" data-ke-list-type="decimal"/ol
/div

이후 글쓰기에서 해당 서식을 불러와 제목을 작성하면 자동으로 목차가 생성됩니다.

2단계: 순수 JavaScript를 사용한 목록 자동 생성 방법

외부 라이브러리 없이 Vanilla JavaScript만을 사용하여 목차를 생성하는 방법입니다. 이 방법은 페이지 로딩 속도를 개선하고 외부 의존성을 줄여 SEO 성능 최적화에 유리할 수 있습니다.

1. 목록을 동적으로 생성하기 위한 JavaScript 코드

HTML 문서의 head 또는 /body 태그 바로 앞에 다음 JavaScript 코드를 추가하여 목차를 동적으로 생성합니다. 이 코드는 본문 내의 H2, H3, H4 태그를 찾아 목록을 구성합니다:

script
document.addEventListener("DOMContentLoaded", function() {
 const toc = document.querySelector('#toc ul');
 const headings = document.querySelectorAll('.tt_article_useless_p_margin.contents_style h2, .tt_article_useless_p_margin.contents_style h3, .tt_article_useless_p_margin.contents_style h4');

 let hasSubheadings = false;

 headings.forEach((heading, index) = {
 if (!heading.id) {
 heading.id = `heading-${index}`;
 }

 if (heading.tagName === 'H2' || heading.tagName === 'H3' || heading.tagName === 'H4') {
 hasSubheadings = true;
 }

 const listItem = document.createElement('li');
 const link = document.createElement('a');
 link.href = `#${heading.id}`;
 link.textContent = heading.textContent;

 // 제목 레벨에 따라 클래스 추가 (스타일링 용이)
 if (heading.tagName === 'H2') {
 link.classList.add('h2-link');
 } else if (heading.tagName === 'H3') {
 link.classList.add('h3-link');
 } else if (heading.tagName === 'H4') {
 link.classList.add('h4-link');
 }

 listItem.appendChild(link);
 toc.appendChild(listItem);
 });

 if (!hasSubheadings) {
 toc.style.display = 'none';
 }
});
/script

2. 목록 디자인을 위한 CSS 스타일 및 표시 위치 설정

목차의 디자인을 변경하려면 아래와 같은 CSS 코드를 추가합니다. 목록을 표시할 위치에는 간단히 div id="toc"ul/ul/div 코드를 삽입하여 JavaScript가 동적으로 목록을 채우도록 합니다.

블로그 목록을 자동으로 형성하기

이와 같은 방식으로 순수 JavaScript를 사용하여 목차를 생성하면, 추가 라이브러리 없이도 효율적이고 유연하게 콘텐츠를 탐색할 수 있는 기능을 구현할 수 있습니다.

3단계: 자동 목록 생성 방법 (TOC 플러그인 vs. JavaScript) 비교

이제 TOC 플러그인과 순수 JavaScript를 사용한 목차 생성 방법의 장단점을 명확히 비교해보겠습니다. 이 비교를 통해 자신의 블로그 환경에 가장 적합한 자동 목록 생성 방식을 선택할 수 있습니다.

블로그 TOC 구현 방식별 장단점 비교

구분	jQuery TOC 플러그인	순수 JavaScript TOC
구현 난이도	쉬움 (설정만 필요)	중간 (직접 DOM 조작 코드 작성 필요)
성능 / 경량화	jQuery 라이브러리 의존성으로 인해 상대적으로 무거움	경량화, 외부 의존성 없음 (페이지 로딩 속도에 유리)
자동화 / 유연성	제목 변경 시 자동 업데이트, 높은 유연성	제목 구조 변경 시 코드 수정 필요, 유지 관리가 까다로움
SEO 측면	사용자 경험 개선으로 간접적 도움	경량화로 인한 페이지 속도 개선 (직접적 SEO 이점)

간단한 블로그 또는 SEO 성능 최적화가 목표일 경우: 제목이 자주 변경되지 않는다면 순수 JavaScript TOC 방법이 경량화 및 페이지 속도 측면에서 더 적합할 수 있습니다.

복잡한 콘텐츠 또는 빠른 구현이 목표일 경우: 제목이 자주 추가되거나 변경되는 경우, 자동 업데이트 기능이 뛰어난 jQuery TOC 플러그인을 사용하는 것이 효율적입니다.

---

Q1. 목차를 자동 생성하는 것이 블로그 SEO에 직접적인 영향을 주나요?

A. 목차 자체는 직접적인 검색엔진 평가 요소는 아닙니다. 하지만 목차는 긴 콘텐츠의 구조를 명확히 보여주고 사용자가 원하는 정보로 빠르게 이동하게 하여 사용자 경험(UX)을 크게 개선합니다. UX 개선은 체류 시간 증가로 이어져 간접적으로 SEO에 매우 긍정적인 영향을 미칩니다.

Q2. JavaScript TOC를 사용하면 페이지 로딩 속도가 정말 빨라지나요?

A. 네, 빨라질 수 있습니다. jQuery TOC는 jQuery라는 큰 외부 라이브러리에 의존하지만, 순수 JavaScript TOC는 추가 라이브러리가 필요 없어 파일 크기가 훨씬 작습니다. 파일 크기가 작으면 초기 로딩 리소스가 줄어들어 페이지 속도 개선에 직접적인 이점을 줄 수 있습니다.

Q3. 모바일 환경에서도 자동 목록 생성 기능이 제대로 작동해야 노출 순위에 유리한가요?

A. 그렇습니다. 구글을 포함한 대부분의 검색엔진은 모바일 친화성을 중요한 검색엔진 평가 요소로 간주합니다. 모바일에서 목차가 올바르게 표시되고 터치로 이동하는 기능이 원활해야 사용자 경험 점수가 높게 유지되며, 이는 곧 노출 순위 유지에 필수적입니다.

블로그 환경에 맞는 TOC 구현 방식 선택하기

블로그 목록 자동 생성 방법은 jQuery TOC와 순수 JavaScript TOC 중 어떤 것이든 콘텐츠의 가독성을 높여주는 효과적인 SEO 점검 항목입니다. 구현 난이도, 페이지 속도 목표, 콘텐츠의 복잡성 등을 고려하여 귀하의 블로그에 가장 적합한 TOC 구현 방식을 선택하시기 바랍니다.