안녕하세요! 10년 차 생활 블로거 케투입니다. 블로그를 운영하다 보면 글의 길이가 길어질 때 독자들이 원하는 정보를 찾지 못해 그냥 이탈해 버리는 경우가 종종 생기더라고요. 저도 초보 시절에는 정성껏 쓴 글이 외면받는 걸 보며 참 속상해했던 기억이 나네요.
그러다 발견한 해결책이 바로 자동 목차(TOC)였는데요. 이게 있고 없고의 차이가 체류 시간과 가독성 면에서 정말 하늘과 땅 차이더라고요. 오늘은 제가 수많은 시행착오 끝에 정착한 티스토리와 워드프레스 등에서 활용 가능한 자동 목차 만드는 법을 아주 자세히 공유해 드리려고 합니다.
1. 자동 목차가 블로그 수익에 미치는 영향
2. 플랫폼별 자동 목차 구현 방식 비교
3. 티스토리 자동 목차 스크립트 설치 가이드
4. 케투의 뼈아픈 수동 목차 실패담
5. 가독성을 높이는 목차 디자인 꿀팁
6. 자주 묻는 질문(FAQ)
자동 목차가 블로그 수익에 미치는 영향
블로그를 운영하는 분들이라면 누구나 구글 상위 노출을 꿈꾸실 거예요. 구글은 사용자의 편의성을 굉장히 중요하게 생각하는데, 자동 목차는 검색 로봇이 글의 구조를 파악하는 데 큰 도움을 주거든요. 특히 스니펫이라고 불리는 검색 결과 상단 노출에 목차 링크가 걸리는 경우도 많아서 클릭률 상승에 직결되기도 하더라고요.
실제로 목차를 적용한 글과 그렇지 않은 글의 데이터를 비교해 보면 이탈률에서 유의미한 수치를 보여준답니다. 독자들은 바쁘기 때문에 자기가 원하는 정보가 어디 있는지 한눈에 보이지 않으면 금방 뒤로 가기 버튼을 눌러버리거든요. 가독성은 곧 수익형 블로그의 핵심 지표인 체류 시간과 비례한다는 점을 꼭 기억하셔야 해요.
또한, 자동 목차는 글의 논리적인 흐름을 잡아주는 역할도 합니다. 글을 쓰기 전에 목차 구성을 먼저 고민하게 되니 글의 퀄리티 자체가 올라가는 부수적인 효과도 있더라고요. 저도 예전에는 의식의 흐름대로 글을 썼지만, 이제는 목차를 먼저 설정하고 내용을 채워 넣는 방식으로 바꾸니 글쓰기 속도도 훨씬 빨라졌답니다.
플랫폼별 자동 목차 구현 방식 비교
블로그 플랫폼마다 목차를 만드는 방법이 조금씩 달라요. 제가 직접 사용해 본 네이버, 티스토리, 워드프레스의 특징을 표로 정리해 보았으니 본인의 환경에 맞는 방법을 찾아보시길 바랄게요.
| 구분 | 네이버 블로그 | 티스토리 | 워드프레스 |
|---|---|---|---|
| 구현 난이도 | 매우 쉬움 (수동) | 보통 (스크립트 설치) | 쉬움 (플러그인 활용) |
| 자동화 여부 | 불가능 (직접 링크) | 가능 (h태그 자동 인식) | 완전 자동화 |
| 디자인 자유도 | 낮음 | 매우 높음 (CSS 수정) | 높음 (설정값 조절) |
| 검색 최적화 | 보통 | 우수 | 최상 |
표를 보시면 아시겠지만, 티스토리는 초기에 스크립트 설정만 잘 해두면 디자인을 내 마음대로 바꿀 수 있다는 장점이 있어요. 반면 네이버는 아직 자동 기능을 지원하지 않아서 텍스트에 일일이 링크를 걸어야 하는 번거로움이 있더라고요. 하지만 국내 검색 유입량은 무시할 수 없으니 각자의 전략에 맞춰 선택하는 것이 중요할 것 같아요.
티스토리 자동 목차 스크립트 설치 가이드
가장 많은 분이 궁금해하시는 티스토리 자동 목차 설치 방법을 단계별로 설명해 드릴게요. 기본적으로 jquery.toc.js 파일을 활용하는 방식이 가장 안정적이더라고요. 먼저 스킨 편집 메뉴로 들어가서 HTML 편집 창을 열어주세요.
첫 번째 단계는 외부 스크립트 파일을 업로드하거나 CDN 링크를 거는 일이에요. </head> 태그 바로 위에 관련 라이브러리 코드를 넣어주면 됩니다. 이때 주의할 점은 본문 영역의 클래스명을 정확히 확인해야 한다는 거예요. 보통 티스토리 스킨마다 .entry-content나 .tt_article_useless_p_margin 같은 이름을 사용하거든요.
목차를 만들 때 h2, h3 태그만 추출하도록 설정하는 것이 가장 깔끔해요. h4 이하의 소제목까지 모두 불러오면 목차가 너무 길어져서 오히려 가독성을 해칠 수 있거든요. 스크립트 옵션에서
selectors: 'h2,h3'로 지정해 보세요!
두 번째 단계는 목차가 노출될 위치에 HTML 코드를 삽입하는 거예요. 서식 기능을 활용해서 글을 쓸 때마다 원하는 위치에 <div id="toc"></div>를 넣어주면 자동으로 해당 위치에 목차가 생성된답니다. 매번 코드를 치기 귀찮다면 티스토리의 서식 관리 기능을 적극 활용해 보시는 걸 추천드려요.
케투의 뼈아픈 수동 목차 실패담
제가 블로그를 시작한 지 얼마 안 되었을 때의 일이에요. 자동 목차라는 개념을 몰라서 일일이 수동으로 앵커 태그를 걸어 목차를 만들었거든요. 글 하나를 쓸 때마다 id 값을 지정하고 링크를 연결하는 데만 30분 넘게 걸렸던 것 같아요.
문제는 글을 수정할 때 발생하더라고요. 중간에 소제목 하나를 추가하거나 순서를 바꾸면 밑에 있는 모든 링크를 다시 수정해야 했거든요. 한 번은 수십 개의 글을 대대적으로 수정하다가 링크가 꼬여버린 적이 있었어요. 독자들이 목차를 눌렀는데 엉뚱한 곳으로 이동하거나 오류 페이지가 뜨는 걸 보고 얼마나 당황했는지 몰라요.
그때 깨달았죠. "아, 기술의 도움을 받아야 하는구나!" 하고요. 여러분은 저처럼 소중한 시간을 낭비하지 마시고 처음부터 자동화 도구를 세팅하시길 바라요. 자동 목차는 단순히 편리함을 넘어 글 관리의 효율성을 극대화해 주는 필수 장치니까요.
가독성을 높이는 목차 디자인 꿀팁
단순히 리스트 형태로 나열된 목차는 시각적으로 매력이 떨어질 수 있어요. 그래서 저는 CSS를 조금 만져서 박스 형태의 디자인을 입히는 편이에요. 배경색을 연한 파란색이나 회색으로 깔아주고, 테두리에 곡률을 주면 훨씬 전문적인 블로그 느낌이 나거든요.
또한, 마우스 오버 효과를 주는 것도 좋은 방법이에요. 사용자가 목차 항목에 마우스를 올렸을 때 색상이 변하거나 밑줄이 생기게 하면 "아, 이게 클릭 가능한 링크구나"라는 인식을 확실히 줄 수 있거든요. 모바일 환경을 고려해서 터치 영역을 충분히 확보하는 것도 잊지 마세요.
가끔 스킨의 기본 폰트 설정과 목차 스크립트가 충돌해서 글자가 깨지는 경우가 있어요. 이럴 때는 CSS 설정에서 목차 전용 폰트를 지정해 주거나
!important 속성을 활용해 스타일 우선순위를 높여주는 것이 해결책이 될 수 있답니다.
마지막으로 스크롤 추적 기능을 추가해 보는 것도 추천드려요. 사용자가 글을 읽어 내려갈 때 현재 어느 섹션을 읽고 있는지 목차에서 강조해 주는 기능인데, 긴 글일수록 독자가 길을 잃지 않게 도와주는 친절한 가이드가 되어준답니다.
자주 묻는 질문
Q. 자동 목차를 넣으면 페이지 속도가 느려지지 않나요?
A. 아주 미미한 수준이라 걱정하지 않으셔도 됩니다. 가벼운 자바스크립트 파일을 사용하기 때문에 사용자 경험을 해칠 정도의 속도 저하는 발생하지 않더라고요.
Q. 특정 제목은 목차에서 제외하고 싶을 땐 어떻게 하나요?
A. 제외하고 싶은 제목 태그에 특정 클래스를 부여하고 스크립트 설정에서 ignoreSelector 옵션을 사용하면 간단히 해결할 수 있습니다.
Q. 구글 애드센스 승인(애드고시)에 목차가 도움이 되나요?
A. 네, 확실히 긍정적인 영향을 줍니다. 글의 구조가 체계적이라는 인상을 주기 때문에 콘텐츠의 전문성을 인정받기 훨씬 유리해지거든요.
Q. 모바일에서도 목차가 잘 보이나요?
A. 반응형 스킨을 사용 중이라면 모바일에서도 자동으로 크기가 조절되어 잘 보입니다. 다만 CSS에서 너비 값을 100%로 설정해 주는 것이 안전해요.
Q. 네이버 블로그에서도 자동 목차 스크립트를 쓸 수 있나요?
A. 아쉽게도 네이버는 외부 스크립트 삽입을 허용하지 않아요. 대신 '링크' 기능을 활용해 수동으로 만드셔야 합니다.
Q. 목차의 폰트 크기를 바꾸고 싶어요.
A. CSS 편집 창에서 #toc li 혹은 .toc-item 클래스의 font-size 속성을 조절하면 원하는 크기로 변경이 가능합니다.
Q. 스크립트를 넣었는데 목차가 안 떠요.
A. 제이쿼리(jQuery) 라이브러리가 먼저 로드되었는지 확인해 보세요. 또한 본문의 h태그가 정확히 h2, h3로 작성되었는지도 체크가 필요합니다.
Q. 목차를 글의 오른쪽 사이드바에 고정할 수 있나요?
A. position: sticky; 속성을 사용하면 스크롤을 내려도 목차가 따라오게 만들 수 있습니다. 다만 사이드바 영역이 확보된 스킨이어야 해요.
Q. 워드프레스는 어떤 플러그인이 좋은가요?
A. 'LuckyWP Table of Contents'나 'Easy Table of Contents'가 가장 대중적이고 설정하기 편리하더라고요.
지금까지 블로그 자동 목차를 만드는 다양한 방법과 노하우를 공유해 드렸어요. 처음에는 코드를 건드리는 게 무섭고 어렵게 느껴질 수 있지만, 한 번 세팅해 두면 평생 블로그 운영이 편해지는 마법 같은 기능이거든요. 저 케투도 처음엔 코드 한 줄 고치는 데 덜덜 떨었지만 지금은 슥슥 잘하게 되었답니다.
작은 차이가 명품을 만든다는 말처럼, 독자를 배려하는 목차 하나가 여러분의 블로그를 더욱 빛나게 해줄 거예요. 오늘 알려드린 내용 천천히 따라 해 보시고, 혹시 막히는 부분이 있다면 언제든 댓글로 물어봐 주세요. 여러분의 즐거운 블로깅 생활을 항상 응원하겠습니다!
작성자: 케투 (10년 차 생활 블로거)
디지털 노마드를 꿈꾸며 실생활에 유용한 IT 정보와 블로그 운영 꿀팁을 전합니다. 수많은 시행착오를 거쳐 얻은 실전 지식만을 기록합니다.
본 포스팅은 일반적인 정보 제공을 목적으로 하며, 플랫폼의 업데이트 상황에 따라 일부 방법이 변경될 수 있습니다. 코드 적용 전 반드시 스킨 백업을 진행하시기 바랍니다.
0 댓글