블로그스팟에서 목차를 자동으로 만들어주는 TOC 기능, h2 태그만 있으면 JavaScript가 알아서 목차를 뽑아주는데 설치 과정에서 코드 붙여넣기 위치 하나 틀리면 블로그 전체가 깨질 수 있거든요.
처음 블로그스팟을 시작했을 때 솔직히 목차 같은 건 신경도 안 썼어요. 글만 잘 쓰면 되는 줄 알았거든요. 근데 서치 콘솔에서 데이터를 들여다보니까, 긴 글일수록 이탈률이 높더라고요. 3,000자 넘어가는 글은 평균 체류시간이 40초대밖에 안 되는 거예요.
그때 워드프레스 하는 지인이 "목차 하나 넣어봐"라고 했는데, 블로그스팟은 워드프레스처럼 플러그인이 없잖아요. Easy TOC 같은 거 클릭 한 번이면 끝나는 그런 게 없어요. 직접 HTML 편집 들어가서 코드를 넣어야 하는 구조라 처음엔 좀 막막했어요. 근데 막상 해보니까 복붙 다섯 번이면 끝나더라고요.
블로그스팟 TOC가 뭐길래 다들 넣으라는 건지
TOC는 Table of Contents, 말 그대로 글의 목차예요. 본문에 있는 h2 태그(소제목)를 자동으로 읽어서 클릭하면 해당 위치로 이동하는 링크 목록을 만들어주는 거거든요. 위키백과에서 글 상단에 있는 그 목차 생각하면 딱 맞아요.
워드프레스는 Easy TOC, Table of Contents Plus 같은 플러그인을 설치하면 자동으로 생성돼요. 클릭 몇 번이면 끝이에요. 근데 블로그스팟은 이런 플러그인 시스템 자체가 없어요. 구글이 제공하는 가젯(위젯)에 TOC 기능이 포함되어 있지 않거든요.
그래서 직접 JavaScript 코드와 CSS를 테마 HTML에 삽입하는 방식을 쓰는 거예요. 순수 자바스크립트로 18줄 정도 되는 코드인데, 이게 본문의 h2 태그를 스캔해서 자동으로 목차를 뽑아주는 원리예요. 한 번 테마에 넣어두면 그 다음부터는 글 쓸 때마다 활성화 코드 한 줄만 추가하면 됩니다.
구글 검색에서도 이 목차가 영향을 줘요. 목차의 앵커 링크가 구글 검색 결과에 "이 페이지의 섹션" 형태로 표시될 수 있거든요. 이걸 사이트링크 스니펫이라고 하는데, 검색 결과에서 내 글이 차지하는 면적이 넓어지니까 클릭률이 올라가는 거예요.
설치 전에 꼭 알아둬야 할 것들
코드 넣기 전에 반드시 테마 백업을 해두세요. 블로그스팟 관리 페이지에서 테마 → 맞춤설정 옆 화살표 → 백업 순서로 들어가면 xml 파일로 현재 테마를 저장할 수 있어요. 코드 넣다가 뭔가 잘못되면 이 백업 파일로 복원하면 되거든요.
한 가지 더. 블로그스팟 테마마다 내부 HTML 구조가 조금씩 달라요. 특히 <data:post.body/> 태그가 테마에 따라 한 개일 수도 있고, 두세 개일 수도 있거든요. Essential 테마 기준으로 보통 한 개인데, Contempo나 Notable 테마는 여러 개가 있는 경우가 있어요. 이걸 다 찾아서 교체해줘야 목차가 제대로 동작해요.
⚠️ 주의
테마 HTML 편집에서 Ctrl+F로 </head>를 검색할 때, </header>와 헷갈리면 안 돼요. </head>는 보통 20~40번째 줄 근처에 있고, </header>는 훨씬 아래에 있어요. 잘못된 위치에 코드를 넣으면 블로그 전체 레이아웃이 깨질 수 있어요. 백업 없이 작업했다가 복원 못 해서 테마를 처음부터 다시 꾸민 적이 있거든요.
글을 쓸 때 h2 태그를 최소 네 개 이상 사용하는 게 좋아요. 목차 항목이 두세 개뿐이면 굳이 목차를 넣을 의미가 없어요. 긴 글, 그러니까 2,000자 이상 되는 포스팅에 목차를 넣어야 효과가 있더라고요.
테마 HTML 편집으로 코드 넣는 과정
자, 여기서부터 본격적인 작업이에요. 블로그스팟 관리자 페이지에 로그인하고, 왼쪽 메뉴에서 "테마"를 클릭해요. 그러면 현재 적용된 테마가 보이는데, "맞춤설정" 버튼 옆에 작은 화살표(▼)가 있거든요. 그걸 누르면 "HTML 편집"이 나와요.
HTML 편집 화면이 열리면 코드가 쭉 나오는데, 여기서 Ctrl+F를 누르면 검색창이 활성화돼요. 여기에 </head>를 입력해서 찾아요. 초록색으로 하이라이트 되는 부분이 보이면 그 바로 윗줄에 JavaScript 코드를 붙여넣는 거예요.
넣어야 할 코드는 이거예요. Font Awesome 아이콘 CSS 링크와 함께 TOC를 생성하는 JavaScript 함수가 담겨 있어요. 이 함수가 하는 일은 단순해요. post-toc이라는 id를 가진 영역 안에서 h2 태그를 전부 찾아서, 각각에 고유 id(point0, point1, point2...)를 부여하고, 그 제목 텍스트와 앵커 링크를 목차 리스트에 추가하는 거예요.
코드를 붙여넣은 다음 할 일은 <data:post.body/>를 찾는 거예요. 이 태그가 본문 내용이 출력되는 위치인데, 이걸 <div id='post-toc'><data:post.body/></div>로 감싸줘야 해요. JavaScript가 이 div 안에서 h2 태그를 스캔하는 구조거든요. 테마에 따라 <data:post.body/>가 여러 개 있을 수 있으니, 전부 다 같은 방식으로 감싸주는 게 안전해요.
여기서 저장 버튼(플로피디스크 모양 아이콘)을 꼭 눌러야 해요. 저장 안 하고 다른 페이지로 넘어가면 작업한 게 전부 날아가거든요. 처음에 이거 몰라서 두 번 같은 작업을 반복한 적이 있어요. 허무하더라고요.
| 구분 |
블로그스팟 TOC |
워드프레스 TOC |
| 설치 방식 |
테마 HTML 직접 편집 |
플러그인 설치 (Easy TOC 등) |
| 난이도 |
코드 복붙 5회 (중간) |
클릭 2~3회 (쉬움) |
| 글 작성 시 |
HTML 모드에서 활성화 코드 삽입 |
자동 생성 (별도 작업 불필요) |
| 디자인 커스텀 |
CSS 직접 수정 (자유도 높음) |
플러그인 설정 내 옵션 |
목차 디자인 CSS까지 한 번에 세팅하기
JavaScript만 넣으면 목차는 생기지만 디자인이 밋밋해요. 기본 ol 리스트 형태로 나오거든요. 여기서 CSS를 추가해야 보기 좋은 목차가 완성돼요.
다시 테마 → HTML 편집으로 들어가서, 이번에는 Ctrl+F로 ]]></b:skin>을 찾아요. 이 태그 바로 윗줄에 CSS 코드를 붙여넣는 거예요. CSS는 목차 컨테이너의 배경색, 테두리, 폰트, 링크 색상 같은 걸 지정하는 코드예요.
기본 CSS에서 배경은 연한 회색(#f1f1f1), 테두리는 1px solid #ccc, 링크 색상은 파란 계열(#007acc)로 설정돼 있어요. 이건 취향에 따라 바꿀 수 있는 부분이에요. 본인 블로그 테마 색상에 맞춰서 배경색이나 링크 색을 조정하면 훨씬 자연스러워 보이거든요.
목차 가로폭은 width: 70%가 기본인데, 모바일에서는 100%로 잡히게 반응형으로 처리하는 게 좋아요. 다만 블로그스팟의 테마 내 b:skin 영역에서는 @media 쿼리가 정상 동작하는 경우가 많아서, 모바일 대응이 필요하면 b:skin 안에 미디어 쿼리를 별도로 넣을 수 있어요. 처음에는 기본 설정 그대로 두고, 글이 제대로 나오는지 확인한 다음에 디자인을 건드리는 걸 추천해요.
💡 꿀팁
목차에 접기/펼치기 버튼을 넣으면 모바일 사용자 경험이 훨씬 좋아져요. JavaScript에 포함된 toggleTOC(또는 avsToggle) 함수가 이 역할을 해요. 목차 div 안에 <button onclick="avsToggle()">Contents</button> 형태로 버튼을 추가하면, 클릭할 때마다 목차가 접혔다 펼쳤다 하거든요. 긴 목차가 모바일 화면을 덮는 문제를 깔끔하게 해결할 수 있어요.
글 작성할 때 목차 활성화하는 방법
테마에 코드를 넣는 건 한 번만 하면 되는 작업이에요. 그 다음부터는 글을 쓸 때마다 간단한 코드 두 줄을 추가하는 거예요.
블로그스팟에서 새 글 쓰기에 들어가면, 편집기 상단에 연필 모양 아이콘(작성 모드)과 < > 모양 아이콘(HTML 모드)이 있거든요. HTML 모드로 전환해야 해요. 이게 중요해요. 작성 모드에서는 코드가 텍스트로 출력되거든요.
HTML 모드에서 본문 맨 위에 이 코드를 넣어요: <div class="avsTOC"><button onclick="avsToggle()">Contents</button><ol id="avsTOC"></ol></div>. 그리고 본문 맨 아래에 <script>avsTOC();</script>를 넣어요. 이 두 줄이 전부예요.
본문은 h2 태그로 소제목을 구분해서 작성하면 돼요. <h2>첫 번째 소제목</h2> 이런 식으로요. 작성 모드에서 글을 먼저 쓰고, 소제목에 해당하는 텍스트를 드래그해서 "제목" 드롭다운에서 "소제목"(h2)을 선택하면 자동으로 h2 태그가 감싸져요. 코드를 직접 쓸 필요 없어요.
게시 버튼을 누르고 블로그를 확인하면, 본문 상단에 목차가 자동으로 생성되어 있어요. 각 항목을 클릭하면 해당 소제목 위치로 스크롤이 이동하고요.
목차 넣고 나서 실제로 달라진 점
솔직히 처음엔 반신반의했어요. 목차 하나 넣는다고 뭐가 달라지겠나 싶었거든요.
근데 한 달 정도 지나니까 서치 콘솔 데이터가 좀 다르게 나오기 시작했어요. 3,000자 이상 긴 글들의 평균 체류시간이 40초대에서 1분 20초 정도로 늘었어요. 물론 목차만의 효과는 아닐 수 있어요. 같은 시기에 글 구성도 좀 바꿨거든요. 그래도 목차가 있는 글과 없는 글을 비교하면 체류시간 차이가 꽤 났어요.
구글 검색 결과에서도 변화가 있었어요. 일부 글에서 "이 페이지의 섹션"이라는 형태로 소제목 링크가 검색 결과에 같이 표시되기 시작했거든요. 이게 나오면 검색 결과에서 내 글이 차지하는 영역이 넓어지니까 눈에 더 잘 띄어요. 클릭률(CTR)도 체감상 올라간 느낌이었어요.
📊 실제 데이터
구글 공식 문서에 따르면, 구조화된 콘텐츠(목차 포함)는 검색엔진이 페이지 내용을 이해하는 데 도움을 줘요. 앵커 링크가 포함된 목차는 구글이 페이지 내 특정 섹션을 직접 검색 결과에 노출할 수 있는 근거가 되거든요. 사이트링크 스니펫이 적용되면 일반 검색 결과 대비 노출 면적이 2~3배 넓어질 수 있어요.
한 가지 오해를 바로잡자면, 목차를 넣는다고 무조건 구글 랭킹이 올라가는 건 아니에요. 목차는 사용자 경험(UX)을 개선하는 요소이고, 구글은 UX가 좋은 페이지를 선호하는 거예요. 직접적인 랭킹 팩터라기보다는 간접적인 효과라고 보는 게 정확해요.
글을 쓰는 입장에서도 좋은 점이 있었어요. 목차를 넣으려면 h2 소제목을 체계적으로 잡아야 하니까, 자연스럽게 글의 구조가 탄탄해지더라고요. 두서없이 쓰던 습관이 고쳐진 느낌이에요.
자주 생기는 오류와 해결법
목차가 안 나오는 경우, 열 중 여덟은 <data:post.body/> 교체를 빼먹은 거예요. 테마 HTML에서 이 태그를 <div id='post-toc'>로 감싸지 않으면 JavaScript가 h2를 찾을 영역 자체가 없으니까 목차가 생성될 리가 없어요.
두 번째로 많은 실수가, 글 쓸 때 HTML 모드가 아닌 작성 모드에서 활성화 코드를 넣는 거예요. 작성 모드에서 코드를 입력하면 그냥 텍스트로 화면에 찍혀 나와요. 반드시 < > 버튼을 눌러 HTML 모드로 전환한 상태에서 코드를 넣어야 해요.
세 번째는 목차가 빈 상태로 나오는 경우예요. 본문에 h2 태그가 하나도 없으면 이렇게 돼요. 작성 모드에서 "소제목"을 선택하지 않고 그냥 볼드 처리만 한 건 h2 태그가 아니거든요. HTML 모드에서 확인해보면 <b> 태그로 감싸져 있을 거예요.
네 번째, 목차 클릭 시 이동이 안 되는 문제. 이건 JavaScript에서 부여하는 id(point0, point1...)와 목차 링크의 href가 불일치할 때 생겨요. 보통은 코드를 그대로 복붙하면 문제없는데, 코드를 수정하다가 변수명을 건드린 경우에 발생해요.
💬 직접 써본 경험
처음 설치했을 때 목차가 두 개 생겨서 당황했어요. 알고 보니 테마에 <data:post.body/>가 두 곳에 있었는데, 한쪽만 div로 감쌌던 거예요. 나머지 한 곳도 동일하게 감싸주니까 해결됐거든요. 테마 구조를 모르면 이런 부분에서 시간을 쓰게 돼요. Ctrl+F로 data:post.body를 검색하면 몇 개 있는지 바로 확인할 수 있어요.
마지막으로, 일부 커스텀 테마에서는 본문 영역의 id가 post-toc이 아닌 다른 이름으로 되어 있을 수 있어요. 이런 경우 JavaScript 코드에서 getElementById("post-toc") 부분의 "post-toc"을 해당 테마의 본문 영역 id로 바꿔줘야 해요.
❓ 자주 묻는 질문
Q. 블로그스팟 TOC는 h3 태그도 인식하나요?
기본 코드는 h2 태그만 인식해요. h3까지 포함하고 싶으면 JavaScript에서 getElementsByTagName("h2") 부분을 querySelectorAll("h2, h3")로 바꾸고, 들여쓰기 로직을 추가해야 해요. 다만 소제목이 너무 많아지면 목차가 지저분해질 수 있어요.
Q. 매번 글 쓸 때마다 코드를 넣어야 하나요?
네, 글마다 HTML 모드에서 상단에 목차 div, 하단에 script 호출 코드를 넣어야 해요. 블로그스팟 설정에서 "글 서식(Post Template)"에 이 코드를 미리 등록해두면 새 글 쓸 때 자동으로 포함되니까 훨씬 편해요.
Q. 목차 없이 발행한 기존 글에도 소급 적용되나요?
아니요. 테마에 코드를 넣는 건 사전 작업이고, 각 글에서 목차를 보이게 하려면 해당 글의 HTML을 편집해서 활성화 코드를 추가해야 해요. 기존 글을 수정 모드로 열어서 코드를 넣으면 돼요.
Q. 애드센스 광고와 목차가 충돌하는 경우는 없나요?
목차 자체가 광고와 충돌하는 경우는 거의 없어요. 다만 목차 바로 아래에 자동 광고가 삽입되면서 목차와 본문 시작 사이가 벌어지는 경우가 있는데, 이건 목차 div에 margin-bottom 값을 조절해서 간격을 줄일 수 있어요.
Q. 모바일에서 목차가 잘려서 보이는데 어떻게 하나요?
CSS에서 목차 컨테이너의 width를 70%에서 100%로 바꾸거나, max-width: 100%를 추가하면 돼요. 그리고 접기/펼치기 버튼을 활용하면 긴 목차가 모바일 화면을 가득 채우는 문제를 방지할 수 있어요.
본 포스팅은 개인 경험과 공개 자료를 바탕으로 작성되었으며, 전문적인 의료·법률·재무 조언을 대체하지 않습니다. 정확한 정보는 해당 분야 전문가 또는 공식 기관에 확인하시기 바랍니다.
👉 함께 읽으면 좋은 글: 블로그스팟에서 글 예약 발행하는 법
👉 함께 읽으면 좋은 글: 블로그스팟 댓글 스팸 차단 설정
👉 함께 읽으면 좋은 글: 블로그스팟 모바일에서 글이 잘리는 문제 해결법
블로그스팟에서 자동 목차 만드는 건 테마 HTML에 JavaScript + CSS 코드를 한 번 넣어두고, 글 쓸 때마다 활성화 코드 두 줄만 추가하면 끝이에요. 체류시간이 오르고, 구글 검색 결과에 섹션 링크가 노출될 수 있으니까 긴 글을 자주 쓰는 분이라면 안 할 이유가 없어요.
목차 설치하면서 겪은 시행착오나 궁금한 점 있으면 댓글로 남겨주세요. 비슷한 고민 하시는 분들한테도 도움이 될 거예요. 유용했다면 공유도 부탁드려요.
댓글
댓글 쓰기