티스토리 블로그 글쓰기 본문 자동 목차 설정 방법 (가장 쉬운 최신 방법 완벽 정리)

티스토리 블로그 본문 목차 설정 방법에 관한 완벽한 가이드를 확인하세요. 복잡하고 어려운 스킨 CSS 편집 없이 쉽고 간단하게 확실한 방법으로 설정할 수 있습니다. 가장 쉽고 좋은 최신 방법임을 다시 한 번 강조합니다. 

 

[목차여기]

 

     목차(目次, Table Of Contents)란, 쉽게 말해 목록의 차례입니다. 책이나 문서에서 목록이나 제목, 항목 등을 차례로 늘어놓은 것을 의미합니다. 평소 위키백과, 나무위키를 많이 보셨던 분들이라면 이러한 목차 기능이 익숙할 것입니다.

     블로그 게시물의 본문에 목차 구성을 통하여 긴 콘텐츠를 단락과 섹션으로 나누고, 사용자가 페이지를 탐색하는 데 도움이 되는 주제로 하이퍼링크 기능을 제공한다면 검색엔진 최적화(SEO)에 큰 도움이 됩니다. 

     이는 구글봇(Googlebot)이 나의 블로그 게시물을 크롤링하면 구조화된 글로 인식하여 충분히 좋은 점수로 평가받을 수 있기 때문에 검색결과 상위노출로 연결된다는 장점이 있습니다. 그리고 블로그 본문에 목차 기능을 삽입하면 궁극적으로 방문자는 자신이 필요한 정보를 빠르게 찾아서 읽어볼 수 있기 때문에 랜딩 후 이탈률이 낮아지고 체류시간은 늘어난다는 장점이 있습니다. 블로그에서 가장 중요한 점은 결국 이용자(사람)의 편의성이니까요. 기능이 잘 구현된 깔끔한 블로그는 방문자를 편안하게 하여 정보 탐색 시간을 늘려주게 되고, 이는 구독자 증가로도 이어집니다. 

     블로그 본문에 목차를 설정하는 일이란, 기본적으로 페이지에 HTML 태그를 삽입해 하이퍼링크 기능을 구현하는 일입니다. 그런데 블로그 글쓰기를 할 때마다 이 설정을 매번 반복한다면 피로도가 높아질 수밖에 없고, 이는 장기적인 블로그 운영에 장애요소로 작용하게 될 것입니다. 이러한 연유로 대부분 티스토리 블로그 스킨의 HTML 또는 CSS의 일부 내용을 수정 및 추가하여 자동 목차 기능을 구현하게 됩니다.

     그러나 이런 경우 티스토리 초보자들의 입장에서는 설정 방법이 난해하여 어려움을 느낄 수밖에 없습니다. 그래서 저는 가장 쉽고 간단한 설정만으로 완벽하게 작동하는 본문 자동목차 설정 방법을 알려드리겠습니다. 

 

1. 블로그 본문 자동 목차 설정 방법 

     정보성 글이나 구조식 글을 위주로 작성하는 분들이라면 자동으로 목차가 생성되는 기능을 원할 것입니다. 이럴 때 필요한 기능이 <자동 목차 설정 방법>입니다. 이 방법은 말 그대로 모든 게시물에 자동으로 목차 기능을 구현하는 설정 방법입니다. 단 한 번의 세팅만으로 기존에 작성해 두었던 모든 게시물뿐만 아니라 향후 작성하게 될 모든 게시물들까지 본문 안에 자동으로 목차가 생성됩니다. 

     자동 목차라고 하여 거창하고 복잡할 게 없습니다. 크게 어렵지도, 불편하지도 않습니다. 원리는 단순합니다. 블로그 스킨에 자동 목차 HTML 코드를 삽입합니다. 그리고 글쓰기를 할 때 목차로 구현할 텍스트를 제목1, 제목2, 제목3과 같은 H태그로 지정합니다. 이후 자동 목차가 생성되기를 원하는 본문 위치를 정하여 자동 목차가 생성되는 명령어인 [목차여기]를 타이핑합니다. 그럼 글 발행 시 목차가 자동으로 생성되는 아주 편리한 방식입니다. 또한 HTML 태그 역시 오류가 없는, 아주 완벽하고 단순하면서 예쁘게 구현되는 최신 코드입니다. 아래 방법을 따라 하세요. 

 

1-1. 블로그 스킨에 자동 목차 HTML 코드 삽입 방법 

     아래 스크립트 창의 자동 목차 HTML 코드를 복사하세요. 스크립트 창 위에 마우스 좌클릭 상태로 코드의 시작부터 끝까지 전체 내용을 드래그 후 복사 단축키 Ctrl+C를 누르면 됩니다. (맥OS에서 선택 내용 복사 단축키는 커맨드⌘+C 입니다) 

<!-- 자동 목차 코드 시작 -->
<script>
const _0x5eef=['classList','92935nhtnYq','setAttribute','push','innerHTML','getElementById','toLowerCase','tt_adsense_top','another_category','style','//p[contains(text(),\x27[목차여기]\x27)]','1954669aacfHB','div','appendChild','toc-ym','title','forEach','DOMContentLoaded','call','addEventListener','length','insertBefore','firstElementChild','log','27309qNoTHN','62SuwPRc','parentNode','querySelector','revenue_unit_wrap','tagName','23736mMyuUa','singleNodeValue','trim','17723tUfPMr','textContent','1STKGDu','getAttribute','contains','nextSibling','791846eKKEom','createElement','outerText','FIRST_ORDERED_NODE_TYPE','querySelectorAll','72wJWnLP','hasAttribute','669103LLOFBD','toc'];function _0x330c(_0x5d40d0,_0x4afdad){_0x5d40d0=_0x5d40d0-0xec;let _0x5eef71=_0x5eef[_0x5d40d0];return _0x5eef71;}const _0x2078d2=_0x330c;(function(_0xbea334,_0x392453){const _0x2c3076=_0x330c;while(!![]){try{const _0x5a087d=-parseInt(_0x2c3076(0x117))+parseInt(_0x2c3076(0xf7))+parseInt(_0x2c3076(0xfa))+-parseInt(_0x2c3076(0x11a))*-parseInt(_0x2c3076(0xf5))+parseInt(_0x2c3076(0x112))*parseInt(_0x2c3076(0x111))+parseInt(_0x2c3076(0xec))*-parseInt(_0x2c3076(0xf0))+-parseInt(_0x2c3076(0x104));if(_0x5a087d===_0x392453)break;else _0xbea334['push'](_0xbea334['shift']());}catch(_0x47ff63){_0xbea334['push'](_0xbea334['shift']());}}}(_0x5eef,0xea9e9),document[_0x2078d2(0x10c)](_0x2078d2(0x10a),function(){const _0x7eb51e=_0x2078d2;try{const _0x591681=document[_0x7eb51e(0x114)]('.contents_style'),_0x1762f9=document[_0x7eb51e(0xfe)](_0x7eb51e(0x107));if(_0x591681&&!_0x1762f9)htmlTableOfContents();else return![];}catch(_0x250abc){console[_0x7eb51e(0x110)]('');}}));function htmlTableOfContents(_0x4f1c99){const _0x388803=_0x2078d2;var _0x4f1c99=_0x4f1c99||document;const _0x44fb35=document[_0x388803(0xf1)]('div');_0x44fb35[_0x388803(0xfb)]('id',_0x388803(0x107));const _0x2117e2=document['querySelector']('.contents_style');var _0x35e549=_0x388803(0x103),_0x552a33=document['evaluate'](_0x35e549,document,null,XPathResult[_0x388803(0xf3)],null)[_0x388803(0x118)];let _0x407aa0;_0x552a33?(_0x407aa0=_0x552a33,_0x407aa0[_0x388803(0x11b)]='',_0x407aa0[_0x388803(0x106)](_0x44fb35)):(_0x407aa0=_0x2117e2[_0x388803(0x10f)],_0x407aa0['classList'][_0x388803(0xee)](_0x388803(0x100))||_0x407aa0[_0x388803(0xf9)]['contains'](_0x388803(0x115))?_0x2117e2['insertBefore'](_0x44fb35,_0x407aa0[_0x388803(0xef)]):_0x407aa0[_0x388803(0x113)][_0x388803(0x10e)](_0x44fb35,_0x407aa0));const _0x3e06b5=document['getElementById'](_0x388803(0x107)),_0x5ee2f2=[]['slice'][_0x388803(0x10b)](_0x2117e2[_0x388803(0xf4)]('h1,\x20h2,\x20h3,\x20h4,\x20h5,\x20h6')),_0x454032=[];for(i=0x0;i<_0x5ee2f2[_0x388803(0x10d)];i++){if(_0x5ee2f2[i][_0x388803(0xf2)][_0x388803(0x119)]()==='')continue;else{if(_0x5ee2f2[i][_0x388803(0xf9)][_0x388803(0xee)](_0x388803(0x108)))continue;else{if(_0x5ee2f2[i][_0x388803(0x113)]['classList'][_0x388803(0xee)](_0x388803(0x101)))continue;else _0x454032[_0x388803(0xfc)](_0x5ee2f2[i]);}}}_0x454032[_0x388803(0x109)](function(_0x5d97e0,_0x2112a5){const _0x4b3465=_0x388803;var _0x94aa2e=_0x4b3465(0xf8)+_0x2112a5;if(_0x5d97e0[_0x4b3465(0xf6)]('id'))_0x94aa2e=_0x5d97e0[_0x4b3465(0xed)]('id');else _0x5d97e0[_0x4b3465(0xfb)]('id',_0x94aa2e);var _0x34278b=_0x4f1c99[_0x4b3465(0xf1)]('a');_0x34278b[_0x4b3465(0xfb)]('href','#'+_0x94aa2e),_0x34278b['textContent']='•\x20'+_0x5d97e0[_0x4b3465(0x11b)];var _0x118edf=_0x4f1c99[_0x4b3465(0xf1)](_0x4b3465(0x105));_0x118edf[_0x4b3465(0xfb)]('class',_0x5d97e0[_0x4b3465(0x116)][_0x4b3465(0xff)]()),_0x118edf[_0x4b3465(0x106)](_0x34278b),_0x3e06b5[_0x4b3465(0x106)](_0x118edf);});const _0xd72dc='\x0a\x20\x20\x20\x20#toc-ym\x20div.h1\x20{\x20margin-left:\x200em\x20}\x0a\x20\x20\x20\x20#toc-ym\x20div.h2\x20{\x20margin-left:\x200.5em\x20}\x0a\x20\x20\x20\x20#toc-ym\x20div.h3\x20{\x20margin-left:\x201em\x20}\x0a\x20\x20\x20\x20#toc-ym\x20div.h4\x20{\x20margin-left:\x201.5em\x20}\x0a\x20\x20\x20\x20#toc-ym\x20div.h5\x20{\x20margin-left:\x202em\x20}\x0a\x20\x20\x20\x20#toc-ym\x20div.h6\x20{\x20margin-left:\x202.5em\x20}\x0a\x20\x20\x20\x20\x0a\x20\x20\x20\x20#toc-ym\x20{\x0a\x20\x20\x20\x20\x20\x20margin:\x2030px\x200px\x2030px\x200px;\x0a\x20\x20\x20\x20\x20\x20padding:\x2020px\x2020px\x2010px\x2015px;\x0a\x20\x20\x20\x20\x20\x20border:\x201px\x20solid\x20#dadada;\x0a\x20\x20\x20\x20\x20\x20background-color:\x20#ffffff;\x0a\x20\x20\x20\x20}\x0a\x20\x20\x20\x20#toc-ym::before\x20{\x0a\x20\x20\x20\x20\x20\x20content:\x20\x22목\x20\x20차\x22;\x0a\x20\x20\x20\x20\x20\x20display:\x20block;\x0a\x20\x20\x20\x20\x20\x20width:\x20120px;\x0a\x20\x20\x20\x20\x20\x20background-color:\x20rgb(255,\x20255,\x20255);\x0a\x20\x20\x20\x20\x20\x20text-align:\x20center;\x0a\x20\x20\x20\x20\x20\x20font-size:\x2018px;\x0a\x20\x20\x20\x20\x20\x20font-weight:\x20bold;\x0a\x20\x20\x20\x20\x20\x20margin:\x20-40px\x20auto\x200px;\x0a\x20\x20\x20\x20\x20\x20padding:\x205px\x200px;\x0a\x20\x20\x20\x20\x20\x20border-width:\x201px;\x0a\x20\x20\x20\x20\x20\x20border-style:\x20solid;\x0a\x20\x20\x20\x20\x20\x20border-color:\x20rgb(218,\x20218,\x20218);\x0a\x20\x20\x20\x20\x20\x20border-image:\x20initial;\x0a\x20\x20\x20\x20}\x0a\x20\x20\x20\x20#toc-ym\x20div{\x0a\x20\x20\x20\x20\x20\x20margin:\x205px\x200px;\x0a\x20\x20\x20\x20}\x0a\x20\x20\x20\x20#toc-ym\x20div:first-child{\x0a\x20\x20\x20\x20\x20\x20margin-top:\x2015px;\x0a\x20\x20\x20\x20}\x0a\x20\x20\x20\x20#toc-ym\x20div:last-child{\x0a\x20\x20\x20\x20\x20\x20margin-bottom:\x2015px;\x0a\x20\x20\x20\x20}\x0a\x20\x20\x20\x20#toc-ym\x20div\x20a\x20{\x0a\x20\x20\x20\x20\x20\x20text-decoration:\x20none;\x0a\x20\x20\x20\x20\x20\x20color:\x20#337ab7;\x0a\x20\x20\x20\x20\x20\x20transition:\x20all\x20ease\x200.2s;\x0a\x20\x20\x20\x20}\x0a\x20\x20\x20\x20#toc-ym\x20div\x20a:hover\x20{\x0a\x20\x20\x20\x20\x20\x20\x0a\x20\x20\x20\x20\x20\x20color:\x20#333333;\x0a\x20\x20\x20\x20\x20\x20background-color:\x20#ecc7ff;\x0a\x20\x20\x20\x20\x20\x20\x0a\x20\x20\x20\x20}\x0a\x20\x20\x20\x20/*\x0a\x20\x20\x20\x20.contents_style\x20h3{\x0a\x20\x20\x20\x20\x20\x20margin-bottom:7px;\x0a\x20\x20\x20\x20\x20\x20padding:\x2010px\x2015px;\x0a\x20\x20\x20\x20\x20\x20border-left:\x205px\x20solid\x20#757575;\x0a\x20\x20\x20\x20\x20\x20background-color:\x20#e5e5e5;\x0a\x20\x20\x20\x20\x20\x20font-weight:\x20500;\x0a\x20\x20\x20\x20\x20\x20color:\x20#000000\x20!important;\x0a\x20\x20\x20\x20}\x0a\x20\x20\x20\x20*/\x0a\x20\x20\x20\x20',_0x3ed036=document[_0x388803(0xf1)](_0x388803(0x102));_0x3ed036[_0x388803(0xfd)]=_0xd72dc,_0x2117e2[_0x388803(0x10e)](_0x3ed036,_0x407aa0);}
</script>
<!-- 자동 목차 코드 종료 -->

티스토리 블로그 본문 자동 목차 설정 HTML 태그 최신 코드.txt

0.01MB

     코드가 너무 길어서 복사가 어려운 초보자 분들을 위하여 파일도 첨부했습니다. 고작 0.01MB 밖에 안 되는 아주 작은 용량의 .txt 텍스트 파일입니다.

     첨부된 파일을 클릭하여 다운로드 후 윈도우OS에서는 '메모장', 맥OS에서는 '텍스트 편집기'로 해당 파일을 열어서 코드 내용 전체를 복사하세요.

     코드 내용 아무 곳에나 마우스 좌클릭을 한 번 하여 커서를 작동 후 전체선택 단축키 Ctrl+A, 복사 단축키 Ctrl+C를 차례로 누르면 됩니다. (맥OS에서 전체선택 단축키는 커맨드⌘+A, 선택 내용 복사 단축키는 커맨드⌘+C 입니다) 

설정 - 스킨 편집 - HTML 편집 - 색인(Ctrl+F) - </body> 바로 위에 코드 삽입 - 적용

 

     이제 티스토리 블로그 설정 페이지에 접속 후 좌측 메뉴에서 '꾸미기'의 하위 메뉴인 '스킨 편집'을 클릭합니다. 그리고 새로운 편집창이 열리면 화면 우측의 'HTML 편집'을 클릭하세요. 이때 "html 및 CSS 편집으로 인해 발생하는 문제는 직접 수정하여야 합니다. 계속 진행하시겠습니까?"라는 팝업 경고창이 뜹니다. '확인' 버튼을 클릭하세요. 그럼 html 편집창에 접속할 수 있습니다. 

     html 편집창 화면 우측의 코드 아무 곳에나 마우스 좌클릭 1번(이제 아래 내용부터 '커서를 찍다'라고 표현합니다) 하신 후 키보드에서 단축키 Ctrl+F로 색인 기능을 실행하여 </body>를 찾으세요. 색인창 위에 직접 /body라고만 타이핑을 해도 바로 찾아집니다. </body>는 보통 스킨 html 코드의 최하단에 위치합니다. 

     </body> 위치를 찾았다면 이제 </body> 바로 위에 마우스 커서를 찍은 후 단축키 Ctrl+V를 실행하여 아까 복사했던 자동 목차 html 코드를 붙여 넣기 합니다. 이 모든 과정을 마쳤다면 스킨 편집 화면의 우상단 '적용'을 클릭하여 설정을 저장하는 것으로 작업을 마무리합니다. 

     쉽죠? 별 거 없습니다. 이게 전부입니다. 더 이상 할 게 없습니다. 적용까지 마쳤다면 스킨 편집 창은 이제 닫아도 됩니다. 티스토리 초보자라서 잘 모르겠다면 상기 움짤(움직이는 .gif 파일 이미지)의 작업 순서를 참고하세요. 

 

1-2. 자동 목차 기능 작동 원리 

     자동 목차 코드가 어떻게 구현되는 것인지 궁금해하실 분들을 위하여 몇 가지 설명을 드립니다. 일단 이러한 방식을 H태그(제목 태그)라고 합니다. 여기서 H란, 제목을 뜻하는 영어 Headline의 앞글자입니다. 고로 H태그란, 블로그 게시물의 구조와 정보를 검색엔진으로 전달할 때 좀 더 효과적으로 나타내기 위해서 제목을 설정하는 HTML 태그입니다. 

     H태그는 중요도에 따라서 H1부터 H6까지 HTML로 설정할 수 있고, 이를 가장 잘 반영한 텍스트 기반의 마크업 언어가 바로 마크다운(Markdown)입니다. 마크다운까지 너무 깊게 들어가면 초보자 입장에서는 방대한 지식으로 과부하가 올 수 있으니, 이건 다음 기회에 별도로 포스팅을 하겠습니다. 지금은 제목태그의 원리만 이해하면 됩니다. 

     티스토리 블로그 에디터에서는 제목1, 제목2, 제목3 이렇게 3개만 지원합니다. H1은 보통 대제목으로 사용합니다. 블로그는 특성상 1개의 게시물마다 제목이 부여됩니다. 게시물의 제목이 바로 대제목(H1)입니다. 따라서 본문 내용에 사용하는 제목1은 H2, 제목2는 H3, 제목3은 H4 이런 식으로 각각 제목태그를 부여합니다. 

     하나의 게시물에 여러 개의 H1 태그가 있다면 구글봇(Googlebot, =spider, =crawler)이 크롤링(crawling, 인터넷을 돌아다니며 사이트 및 게시물의 정보를 수집해 오는 작업)을 할 때 이상함을 느낄 수밖에 없습니다. 따라서 티스토리 본문 내용에는 H1을 제외한 H2, H3, H4 태그를 부여하는 것이죠. 

     이처럼 H태그를 사용해 글의 단락과 섹션으로 나누면 구조화된 글쓰기가 가능하고, 검색엔진 최적화(SEO)에도 큰 도움이 됩니다. 즉, 시인성이 좋고, 필요한 정보의 캐치가 빠르며, 검색엔진 최적화로 인하여 사이트 및 게시물의 신뢰도가 높아지기 때문에 검색엔진의 검색결과 상위노출 반영에 유리합니다. 이런 연유로 블로그에 본문 목차 기능을 사용한다고 이해하면 되겠습니다. 다시 말해 H태그를 사용하는 자동 목차는 게시물을 작성하는 블로그 운영자뿐만 아니라 블로그에서 정보를 보려는 방문자 그리고 검색엔진 모두에게 편의성을 제공하는 아주 좋은 기능입니다. 

     앞서 스킨에 삽입한 html 코드는 게시물 본문의 H태그를 자동으로 인식 후 목차로 표시하는 기능을 구현합니다. 이로 인해 블로그 운영자는 글쓰기를 할 때마다 일일이 귀찮게 목차 기능을 설정하지 않아도 되는 것이죠. 아주 편리합니다. 

 

1-3. 자동 목차 기능 작동 방법 

     제가 위에서 알려드린 방법 그대로 자동 목차 html 코드를 블로그 스킨에 정상적으로 삽입을 했다면, 이제 여러분께서 블로그에 어떤 글을 작성하든 최종 발행 시점에서 주제태그의 지정 여부, 그 개수를 스스로 빠르게 판단하여 스스로 목차를 자동으로 구성 및 본문에 노출하게 됩니다. 

• 글쓰기 에디터에서 목차로 생성할 부분에 주제태그(주제1, 주제2, 주제3)를 지정하면 자동으로 인식합니다. 
• 티스토리 블로그 본문에 목차가 표시될 위치는 기본적으로 본문 최상단으로 세팅되어 있습니다. 
• 그러나 명령어 [목차여기]를 사용하여 목차가 표시될 위치를 직접 지정할 수도 있습니다. 

<자동 목차 기능 사용법 예시>

1. 대전제: 블로그 스킨에 자동 목차 html 코드 삽입 (상기 1-1 참고)
2. 소전제: 블로그 글쓰기 에디터에서 주제태그 지정 (현재 설명하는 내용) 

     예컨대, 여러분께서 '나비'를 주제로 하는 글을 작성할 것이고, 게시물의 본문에서는 '나비의 기본 개요', '나비의 특징', '나비의 생태', '나비의 천적'에 대한 내용을 집중적으로 다룬다고 가정을 해보겠습니다. 

     이런 경우 '나비의 기본 개요', '나비의 특징', '나비의 생태', '나비의 천적' 이렇게 4개의 소주제에 직접 주제태그를 지정하여 목차로 생성할 수 있습니다. 

     주제태그 지정 방법은 단순합니다. 티스토리 블로그 에디터에서 소주제인 나비의 기본 개요를 마우스로 드래그한 후 글쓰기 에디터 상단의 메뉴바에서 좌측 두 번째 메뉴인 주제태그(기본적으로 '본문2'로 표시됨)를 클릭하여 제목1, 제목2, 제목3 중에서 선택을 하면 됩니다. 그럼 해당 주제태그에 걸맞게 글씨 크기가 달라집니다. 이것으로 주제태그 지정이 끝났습니다.

     참 쉽고 간단하죠? 목차는 에디터 화면에서는 표시되지 않고, 에디터 하단 메뉴바의 미리보기 또는 글 발행 후에만 표시됩니다. 앞서 스킨 편집을 통해 자동 목차 html 코드를 삽입했기 때문에 글 발행 시 주제태그를 빠르게 인식하여 자동으로 목차를 만들어 표시하는 것이죠. 너무나도 쉽고 간단하면서 완벽한 시스템입니다. 

     이렇게 글로만 설명을 하면 이해를 못 하는 분들이 있으니까 또 다른 예시를 들겠습니다. 아래 이미지와 글을 천천히 읽어보신 후 따라 해 보세요. 원리를 알면 자동목차 사용법은 아주 단순합니다. 😀 

티스토리 블로그 시작하기 방법 (더쿠, 디시 총망라 최신정보 꿀팁 포함)

     상기 링크에서 볼 수 있듯이 저는 <티스토리 블로그 시작하기 방법>이라는 게시물을 작성했었습니다. 그리고 본문에서 다룰 내용으로 '구글, 티스토리, 네이버 블로그 장단점 분석', '왜 티스토리인가?', '티스토리 블로그 시작하기', '티스토리 블로그 이름, 주소, 닉네임 정하는 방법', '티스토리 블로그 초기 세팅 방법 핵심 요약', '기타 꿀팁' 이렇게 6개의 세부 항목에 주제1(H2) 태그로 지정하여 자동 목차로 생성했습니다. 아래 움짤(움직이는 .gif 이미지)을 참고하세요. 

     제가 예시로 보여드린 ⬆️움짤처럼 목차가 될 텍스트를 선택 후 주제1, 주제2, 주제3 이런 식으로 지정합니다. 그리고 목차가 삽입되기를 원하는 위치에 명령어 [목차여기]를 텍스트로 직접 타이핑하여 입력하면 되겠습니다. 

     너무 쉽고 단순해서 어려울 게 없습니다. 이 포스팅 내용을 하나도 놓치지 않고 정독했음에도 불구하고, 자동 목차 기능 구현이 뭔가 잘 안 되거나, 추가로 궁금한 점이 있다면 공개적인 댓글을 남겨주세요. 제가 도울 수 있는 선에서 최대한 자세하게 설명해 드리겠습니다. 😊 

 

1-4. 자동 목차 사용방법 및 표시 오류 시 참고사항 

• 본문에 반드시 주제1(h2), 주제2(h3), 주제3(h4)을 지정해야만 생성할 목차를 자동으로 인식합니다. 
• 주제1, 주제2, 주제3 중에서 단 1개만 지정해도 목차는 생성됩니다. 
• 주제태그를 지정하지 않은 경우 자동으로 생성된 목차의 박스가 공란으로 표시됩니다. 
• 자동 목차는 글쓰기 에디터 화면에서는 표시되지 않습니다. 
• 자동 목차는 글쓰기 에디터의 미리 보기 또는 글 발행 이후에 정상적으로 표시됩니다. 
• 자동 목차는 기본적으로 본문 최상단에 표시됩니다. 
• 본문에 명령어 [목차여기]를 사용하면 목차 위치를 지정할 수 있습니다. 
• 본문에 [목차여기]를 입력하지 않는 경우 자동 목차는 기본적으로 본문 최상단에 표시됩니다. 
• 명령어 [목차여기] 위로 주소링크를 삽입하면 자동 목차가 표시되지 않습니다.
• 명령어 [목차여기] 아래로 주소링크를 삽입하면 자동 목차가 정상적으로 표시됩니다. 
• 하나의 게시물 본문 안에 명령어 [목차여기]를 여러 번 작성해도 그중에서 가장 상단에 있는 명령어 [목차여기]에만 반응하여 단 하나의 목차만 표시됩니다. 
• 명령어 [목차여기]는 오타나 띄어쓰기 없이 정확하게 타이핑을 해야만 합니다. 
• [목차 여기]라고 띄어쓰기를 하는 경우, [목파여기]처럼 오타가 있는 경우에는 명령어로 인식하지 못합니다. 
• 명령어 [목차여기] 오타 시 목차 위치를 지정할 수 없고, 목차는 자동으로 본문 최상단에 표시됩니다.
• 본문 글씨체는 자동 목차 기능 작동과 무관합니다. 
• 자동 목차 기능은 PC버전 웹에서 정상적으로 작동하며, 모바일 웹에서는 설정에 따라서 표시 여부를 결정합니다. 
• 모바일 환경에서도 자동 목차 기능이 정상적으로 작동하려면 설정 - 꾸미기 - 모바일에서 티스토리 모바일웹 자동 연결을 '사용하지 않습니다'로 설정해야 합니다. 
• 티스토리 모바일 앱(애플리케이션) 화면 안에서는 자동 목차 기능이 작동하지 않습니다. 그러나 대부분의 방문자는 앱 이용자보다 사파리, 크롬과 같은 모바일 웹브라우저를 이용해서 유입되기 때문에 크게 신경 쓰지 않아도 됩니다. 

 

1-5. 모든 글이 아닌, 제가 원하는 글에만 목차가 표시되게 할 수는 없나요? 

     답변부터 드리자면, 가능합니다. 블로그 운영 스타일에 따라서 수필이나 일기 형식으로 일상글을 작성하는 분들도 많습니다. 이런 분들은 본문 전체의 흐름이 매끄럽게 이어지도록 보이기를 원합니다. 이런 분들은 모든 글에 자동으로 목차가 생성되는 것을 원치 않을 것입니다. 

     그러나 어쩌다 한 번은 정보성 글을 작성할 때도 있겠죠. 이럴 때에만 선택적으로 목차 기능을 구현하기를 원할 것입니다. 바로 이럴 때 필요한 기능이 <수동 목차 설정 방법>입니다. 말 그대로 원하는 게시물만 특정하여 수동으로 목차 기능을 구현하는 설정 방법입니다. 아래 내용을 참고하세요. 

 

 

2. 블로그 본문 수동 목차 설정 방법 

     앞서 설명한 <자동 목차 설정 방법>은 모든 게시물에 자동으로 목차가 표시되는 설정입니다. 따라서 모든 게시물이 아닌, 원하는 게시물에만 목차를 표시하고 싶다면, 위의 <자동 목차 설정>을 하면 안 됩니다. 이럴 때에는 수동으로 원하는 글에만 목차를 표시하는 방법이 따로 있습니다. 지금부터 <수동 목차 설정 방법>을 설명합니다. 

    수동 목차라고 하여 거창하고 복잡할 게 없습니다. 크게 어렵지도, 불편하지도 않습니다. 원리는 단순합니다. 목차를 생성시키는 HTML 태그를 에디터의 글쓰기 서식으로 저장합니다. 그리고 목차 기능이 필요한 글쓰기를 할 때에만 선택적으로 서식의 스크립트를 불러와서 목차 기능을 구현하는 아주 간단한 방식입니다. 또한 HTML 태그 역시 오류가 없는, 아주 완벽하고 단순하면서 예쁘게 구현되는 최신 코드입니다. 아래 방법을 따라 하세요. 

 

2-1. 본문 목차 기능 HTML 서식 저장 방법 

     우선 본문 목차 기능을 구현하려면 HTML 태그 코드가 필요합니다. 아래 첨부한 HTML 태그 코드 파일을 다운로드하세요. 고작 0.01MB 밖에 안 되는, 아주 작은 용량의 .txt 텍스트 파일입니다. 

<script>
const _0x5eef=['classList','92935nhtnYq','setAttribute','push','innerHTML','getElementById','toLowerCase','tt_adsense_top','another_category','style','//p[contains(text(),\x27[목차]\x27)]','1954669aacfHB','div','appendChild','toc-ym','title','forEach','DOMContentLoaded','call','addEventListener','length','insertBefore','firstElementChild','log','27309qNoTHN','62SuwPRc','parentNode','querySelector','revenue_unit_wrap','tagName','23736mMyuUa','singleNodeValue','trim','17723tUfPMr','textContent','1STKGDu','getAttribute','contains','nextSibling','791846eKKEom','createElement','outerText','FIRST_ORDERED_NODE_TYPE','querySelectorAll','72wJWnLP','hasAttribute','669103LLOFBD','toc'];function _0x330c(_0x5d40d0,_0x4afdad){_0x5d40d0=_0x5d40d0-0xec;let _0x5eef71=_0x5eef[_0x5d40d0];return _0x5eef71;}const _0x2078d2=_0x330c;(function(_0xbea334,_0x392453){const _0x2c3076=_0x330c;while(!![]){try{const _0x5a087d=-parseInt(_0x2c3076(0x117))+parseInt(_0x2c3076(0xf7))+parseInt(_0x2c3076(0xfa))+-parseInt(_0x2c3076(0x11a))*-parseInt(_0x2c3076(0xf5))+parseInt(_0x2c3076(0x112))*parseInt(_0x2c3076(0x111))+parseInt(_0x2c3076(0xec))*-parseInt(_0x2c3076(0xf0))+-parseInt(_0x2c3076(0x104));if(_0x5a087d===_0x392453)break;else _0xbea334['push'](_0xbea334['shift']());}catch(_0x47ff63){_0xbea334['push'](_0xbea334['shift']());}}}(_0x5eef,0xea9e9),document[_0x2078d2(0x10c)](_0x2078d2(0x10a),function(){const _0x7eb51e=_0x2078d2;try{const _0x591681=document[_0x7eb51e(0x114)]('.contents_style'),_0x1762f9=document[_0x7eb51e(0xfe)](_0x7eb51e(0x107));if(_0x591681&&!_0x1762f9)htmlTableOfContents();else return![];}catch(_0x250abc){console[_0x7eb51e(0x110)]('');}}));function htmlTableOfContents(_0x4f1c99){const _0x388803=_0x2078d2;var _0x4f1c99=_0x4f1c99||document;const _0x44fb35=document[_0x388803(0xf1)]('div');_0x44fb35[_0x388803(0xfb)]('id',_0x388803(0x107));const _0x2117e2=document['querySelector']('.contents_style');var _0x35e549=_0x388803(0x103),_0x552a33=document['evaluate'](_0x35e549,document,null,XPathResult[_0x388803(0xf3)],null)[_0x388803(0x118)];let _0x407aa0;_0x552a33?(_0x407aa0=_0x552a33,_0x407aa0[_0x388803(0x11b)]='',_0x407aa0[_0x388803(0x106)](_0x44fb35)):(_0x407aa0=_0x2117e2[_0x388803(0x10f)],_0x407aa0['classList'][_0x388803(0xee)](_0x388803(0x100))||_0x407aa0[_0x388803(0xf9)]['contains'](_0x388803(0x115))?_0x2117e2['insertBefore'](_0x44fb35,_0x407aa0[_0x388803(0xef)]):_0x407aa0[_0x388803(0x113)][_0x388803(0x10e)](_0x44fb35,_0x407aa0));const _0x3e06b5=document['getElementById'](_0x388803(0x107)),_0x5ee2f2=[]['slice'][_0x388803(0x10b)](_0x2117e2[_0x388803(0xf4)]('h1,\x20h2,\x20h3,\x20h4,\x20h5,\x20h6')),_0x454032=[];for(i=0x0;i<_0x5ee2f2[_0x388803(0x10d)];i++){if(_0x5ee2f2[i][_0x388803(0xf2)][_0x388803(0x119)]()==='')continue;else{if(_0x5ee2f2[i][_0x388803(0xf9)][_0x388803(0xee)](_0x388803(0x108)))continue;else{if(_0x5ee2f2[i][_0x388803(0x113)]['classList'][_0x388803(0xee)](_0x388803(0x101)))continue;else _0x454032[_0x388803(0xfc)](_0x5ee2f2[i]);}}}_0x454032[_0x388803(0x109)](function(_0x5d97e0,_0x2112a5){const _0x4b3465=_0x388803;var _0x94aa2e=_0x4b3465(0xf8)+_0x2112a5;if(_0x5d97e0[_0x4b3465(0xf6)]('id'))_0x94aa2e=_0x5d97e0[_0x4b3465(0xed)]('id');else _0x5d97e0[_0x4b3465(0xfb)]('id',_0x94aa2e);var _0x34278b=_0x4f1c99[_0x4b3465(0xf1)]('a');_0x34278b[_0x4b3465(0xfb)]('href','#'+_0x94aa2e),_0x34278b['textContent']='•\x20'+_0x5d97e0[_0x4b3465(0x11b)];var _0x118edf=_0x4f1c99[_0x4b3465(0xf1)](_0x4b3465(0x105));_0x118edf[_0x4b3465(0xfb)]('class',_0x5d97e0[_0x4b3465(0x116)][_0x4b3465(0xff)]()),_0x118edf[_0x4b3465(0x106)](_0x34278b),_0x3e06b5[_0x4b3465(0x106)](_0x118edf);});const _0xd72dc='\x0a\x20\x20\x20\x20#toc-ym\x20div.h1\x20{\x20margin-left:\x200em\x20}\x0a\x20\x20\x20\x20#toc-ym\x20div.h2\x20{\x20margin-left:\x200.5em\x20}\x0a\x20\x20\x20\x20#toc-ym\x20div.h3\x20{\x20margin-left:\x201em\x20}\x0a\x20\x20\x20\x20#toc-ym\x20div.h4\x20{\x20margin-left:\x201.5em\x20}\x0a\x20\x20\x20\x20#toc-ym\x20div.h5\x20{\x20margin-left:\x202em\x20}\x0a\x20\x20\x20\x20#toc-ym\x20div.h6\x20{\x20margin-left:\x202.5em\x20}\x0a\x20\x20\x20\x20\x0a\x20\x20\x20\x20#toc-ym\x20{\x0a\x20\x20\x20\x20\x20\x20margin:\x2030px\x200px\x2030px\x200px;\x0a\x20\x20\x20\x20\x20\x20padding:\x2020px\x2020px\x2010px\x2015px;\x0a\x20\x20\x20\x20\x20\x20border:\x201px\x20solid\x20#dadada;\x0a\x20\x20\x20\x20\x20\x20background-color:\x20#ffffff;\x0a\x20\x20\x20\x20}\x0a\x20\x20\x20\x20#toc-ym::before\x20{\x0a\x20\x20\x20\x20\x20\x20content:\x20\x22목\x20\x20차\x22;\x0a\x20\x20\x20\x20\x20\x20display:\x20block;\x0a\x20\x20\x20\x20\x20\x20width:\x20120px;\x0a\x20\x20\x20\x20\x20\x20background-color:\x20rgb(255,\x20255,\x20255);\x0a\x20\x20\x20\x20\x20\x20text-align:\x20center;\x0a\x20\x20\x20\x20\x20\x20font-size:\x2018px;\x0a\x20\x20\x20\x20\x20\x20font-weight:\x20bold;\x0a\x20\x20\x20\x20\x20\x20margin:\x20-40px\x20auto\x200px;\x0a\x20\x20\x20\x20\x20\x20padding:\x205px\x200px;\x0a\x20\x20\x20\x20\x20\x20border-width:\x201px;\x0a\x20\x20\x20\x20\x20\x20border-style:\x20solid;\x0a\x20\x20\x20\x20\x20\x20border-color:\x20rgb(218,\x20218,\x20218);\x0a\x20\x20\x20\x20\x20\x20border-image:\x20initial;\x0a\x20\x20\x20\x20}\x0a\x20\x20\x20\x20#toc-ym\x20div{\x0a\x20\x20\x20\x20\x20\x20margin:\x205px\x200px;\x0a\x20\x20\x20\x20}\x0a\x20\x20\x20\x20#toc-ym\x20div:first-child{\x0a\x20\x20\x20\x20\x20\x20margin-top:\x2015px;\x0a\x20\x20\x20\x20}\x0a\x20\x20\x20\x20#toc-ym\x20div:last-child{\x0a\x20\x20\x20\x20\x20\x20margin-bottom:\x2015px;\x0a\x20\x20\x20\x20}\x0a\x20\x20\x20\x20#toc-ym\x20div\x20a\x20{\x0a\x20\x20\x20\x20\x20\x20text-decoration:\x20none;\x0a\x20\x20\x20\x20\x20\x20color:\x20#337ab7;\x0a\x20\x20\x20\x20\x20\x20transition:\x20all\x20ease\x200.2s;\x0a\x20\x20\x20\x20}\x0a\x20\x20\x20\x20#toc-ym\x20div\x20a:hover\x20{\x0a\x20\x20\x20\x20\x20\x20\x0a\x20\x20\x20\x20\x20\x20color:\x20#333333;\x0a\x20\x20\x20\x20\x20\x20background-color:\x20#ecc7ff;\x0a\x20\x20\x20\x20\x20\x20\x0a\x20\x20\x20\x20}\x0a\x20\x20\x20\x20/*\x0a\x20\x20\x20\x20.contents_style\x20h3{\x0a\x20\x20\x20\x20\x20\x20margin-bottom:7px;\x0a\x20\x20\x20\x20\x20\x20padding:\x2010px\x2015px;\x0a\x20\x20\x20\x20\x20\x20border-left:\x205px\x20solid\x20#757575;\x0a\x20\x20\x20\x20\x20\x20background-color:\x20#e5e5e5;\x0a\x20\x20\x20\x20\x20\x20font-weight:\x20500;\x0a\x20\x20\x20\x20\x20\x20color:\x20#000000\x20!important;\x0a\x20\x20\x20\x20}\x0a\x20\x20\x20\x20*/\x0a\x20\x20\x20\x20',_0x3ed036=document[_0x388803(0xf1)](_0x388803(0x102));_0x3ed036[_0x388803(0xfd)]=_0xd72dc,_0x2117e2[_0x388803(0x10e)](_0x3ed036,_0x407aa0);}
</script>

티스토리 블로그 본문 수동 목차 설정 HTML 태그 최신 코드.txt

0.01MB

 

 

블로그 설정 - 콘텐츠 - 서식 관리 - 서식 쓰기 - "기본 모드" - "HTML" 선택 - 코드 붙여넣기(Ctrl+V) - 제목 입력 - 완료

 

     다운로드한 텍스트 파일을 열어서 코드를 전체 선택(Ctrl+A) 후 복사(Ctrl+C)합니다. 이후 티스토리 블로그 설정에서 서식으로 저장하면 되겠습니다. 설정 경로는 위에 첨부한 이미지의 순서대로 따라 하시면 손쉽게 코드를 서식으로 추가할 수 있습니다. 설정은 이렇게 아주 간단하게 끝납니다. 

     이게 전부입니다. 정말 쉽죠? 이렇게 서식으로 한 번 저장을 해두면 앞으로는 클릭 몇 번으로 본문에 목차 기능을 구현할 수 있습니다. 

 

2. 수동 목차 기능 작동 방법 

글쓰기 에디터 - 상단 도구 - "···" - "서식" - 저장한 목차 서식 불러오기

     수동 목차 기능의 구현 방법은 아주 단순합니다. 일단 티스토리 글쓰기 에디터에서 몇 번으로 저장한 목차 코드 서식을 불러옵니다. 그럼 SCRIPT라는 HTML 태그의 코드 블록이 생성됩니다. 이 코드 블록은 게시물의 신규 작성 또는 수정 중일 때에만 보이고, 게시물의 공개 발행 시에는 목차로 구현되는 부분입니다. 이 코드의 아래에 자유로운 글을 작성하세요. 

글쓰기 에디터 - 글 작성 - 제목으로 정할 텍스트 선택 - 상단 도구 - 문단 모양 - 제목1, 제목2, 제목3 중에서 선택

 

     이제 본문 내용의 단락과 섹션으로 나누어 목차로 설정할 수 있습니다. 목차 기능 구현 방법은 아주 간단합니다. 제목으로 정할 텍스트를 마우스 드래그 또는 Shift+방향키로 정확하게 지정(블록 선택)하여 상단 도구의 문단 모양을 클릭 후 제목1, 제목2, 제목3 중에서 선택하면 됩니다. 그럼 본문에서 보이는 크기가 달라집니다. 이게 전부입니다. 더 이상 설정할 것이 없습니다. 

     이렇게 지정 후 글쓰기가 끝나서 공개 발행하면, 상기 첨부한 이미지처럼 제목으로 지정한 부분만 자동으로 목차에 나열되는 시스템입니다. 참 쉽죠? 너무 간단하고 쉬운 방법이라서 이렇게 알려드립니다. 요약하자면 아래와 같습니다. 

글쓰기 에디터 - 목차 코드 서식 불러오기 - 글쓰기 진행 - 제목 설정 - 글 발행

 

2-3. 수동 목차 사용방법 및 표시 오류 시 참고사항 

1. 대전제: 목차 html 코드를 서식으로 저장. 
2. 소전제: 글쓰기 에디터에서 목차 서식 스크립트 불러오기. 
3. 목차로 표시되길 원하는 텍스트에 주제태그(주제1, 주제2, 주제3) 선별 지정. 
4. 글쓰기 상태에서는 목차가 아닌 스크립트로 표시됨. 
5. 글쓰기 완료 후 발행하면 해당 게시물에만 목차가 표시됨. 
6. 스크립트가 있는 위치에 목차가 표시됨. 
7. 스크립트를 여러 개 삽입해도 가장 위에 있는 단 1개의 스크립트에만 반응하여 해당 위치에 목차를 표시함. 
8. 스크립트 수정 시 목차 표시가 안 될 수도 있음. 
9. 본문에서 스크립트를 삭제하는 경우 목차 표시 불가능. 

 

 

3. 자동 목차 vs 수동 목차, 무엇이 더 좋을까? 

• 자동 목차: 단 한 번의 설정으로 블로그 내 모든 게시물 본문에 목차를 표시함. 
• 수동 목차: 원하는 게시물에만 목차를 표시함. 
• 자동목차와 수동목차 설정을 모두 혼용 또는 병합하여 사용할 수 없음. 
• 평소 정보 전달을 위한 구조식 글쓰기가 잦은 경우에는 자동목차 설정을 권장함. 
• 평소 일기, 포토덤프, 수필 형식의 글쓰기가 잦은 경우에는 수동목차 방식을 권장함. 

     앞서 설명한 것처럼 주제태그를 설정한 목차 기능을 사용하면 검색엔진 최적화(SEO)에 유리합니다. 그래서 저는 기본 세팅을 자동목차로 설정하였습니다. 이는 저의 블로그 지향점에 따른 선택사항일 뿐, 무조건 정답은 아닙니다. 

     원론적으로 따져보면, 블로그에 과다한 기능을 설치하는 경우에는 블로그 게시물의 페이지 로딩 시간이 길어지면서 방문자의 랜딩 지연이 생길 수밖에 없습니다. 다시 말해 페이지 로딩 시간이 길어진다면 사이트의 구조가 복잡하고 무거워졌다는 의미이고, 구글봇(Googlebot)이 크롤링 후 낮은 점수로 평가를 하기 때문에 결과적으로 구글 검색엔진 최적화(SEO)와 멀어지게 됩니다. 그럼 결국 구글 검색결과 상위노출과는 영영 멀어지는 것이죠. 그래서 진짜 전문가들은 수동 목차 설정 방식을 권장합니다. 이는 티스토리 블로그뿐만 아니라 구글 블로거(Blogger), 설치형 워드프레스 역시 해당하는 부분입니다. 

     그러나 요즘 초고속 인터넷이 발달한 점, 티스토리는 카카오라는 대기업이 운영하는 고성능 서버 장비를 통해 구현되는 블로그 서비스라는 점, 이런 작은 기능을 하나 설치한다고 블로그 로딩 시간이 엄청나게 지연되지는 않는다는 점까지 종합적으로 따져 본다면 실보다 득이 큽니다. 

     단적인 예로 나무위키 보세요. 나무위키의 모든 페이지에는 자동목차가 생성됩니다. 그렇다고 접속 시간이 느린가요? 아니면 검색결과 상위노출이 안 되나요? 요즘 시대에는 블로그에 자동 목차 기능 하나 설치한다고 엄청난 페널티를 받지 않습니다. 오히려 구조화된 페이지로 인식하여 검색엔진 최적화(SEO)에 있어 더 높은 점수를 받는 것이죠. 

     그러니까 너무 예민하게 받아들이지 마시고, 편의성 및 블로그 지향점을 생각하여 본인에게 적합한 형태의 목차 시스템을 설정 및 이용하면 되겠습니다. 이상의 내용이 여러분의 티스토리 블로그 라이프에 조금이나마 도움이 되었기를 소망합니다. ☺️