블로그를 운영하다 보면 글이 길어질 때가 참 많죠? 정성스럽게 쓴 글이 길어지는 건 좋지만, 읽는 독자 입장에서는 내가 원하는 정보가 어디 있는지 한참 찾아야 하는 번거로움이 생기기도 합니다. 이럴 때 꼭 필요한 게 바로 '목차'입니다.
그동안 구글 블로그(Blogspot)에 자동 목차를 넣는 방법을 많이들 고민하셨을 텐데요. 저 역시 가장 간단하게 가젯을 추가해서 사용하는 방법을 이전에 소개해 드린 적이 있었습니다. 하지만 실제로 사용해 보니 한 가지 아쉬운 점이 생기더라고요. 바로 '로딩 속도'였습니다.
블로그 방문자는 아주 짧은 시간 안에 글을 읽을지 말지 결정합니다. 그런데 목차가 뜨는 데 시간이 걸리면 금방 페이지를 나가버릴 수도 있거든요. 그래서 오늘은 기존 코드보다 훨씬 빠르고 가볍게 작동하는 개선된 자동 목차 코드를 공유해 드리려고 합니다. 복잡한 HTML 수정 없이 가젯 추가만으로 누구나 쉽게 따라 하실 수 있습니다.
왜 자동 목차를 꼭 써야 할까요?
단순히 예뻐 보이려고 목차를 넣는 것은 아닙니다. 목차는 블로그의 성장에 정말 중요한 두 가지 역할을 합니다.
첫째는 독자의 편의성입니다. 목차가 있으면 독자는 본인이 필요한 부분으로 바로 이동할 수 있습니다. 특히 모바일에서 긴 글을 읽을 때 목차는 내비게이션 같은 역할을 하죠. 둘째는 검색 엔진 최적화(SEO)입니다. 구글 같은 검색 엔진은 글의 구조가 잘 짜여 있는 것을 좋아합니다. 목차를 통해 글의 흐름을 한눈에 파악할 수 있게 해주면 검색 결과에서도 더 좋은 점수를 받을 확률이 높아집니다.
기존에 제가 올렸던 기본적인 방법이 궁금하시다면 아래 링크를 먼저 가볍게 훑어보고 오셔도 좋습니다.
더 빠르고 가벼워진 자동 목차 코드 (업데이트 버전)
기존 코드는 페이지의 모든 요소가 다 불러와진 다음에 작동하는 방식이라 약간의 지연이 느껴졌습니다. 이번에 개선한 코드는 웹페이지의 구조(DOM)가 파악되는 즉시 실행되도록 수정하여, 글을 클릭하자마자 목차가 순식간에 나타납니다.
사용 방법은 아주 간단합니다. 구글 블로그 관리 화면에서 [레이아웃] -> [가젯 추가] -> [HTML/JavaScript]를 선택하신 후, 아래의 코드를 그대로 복사해서 붙여넣기만 하면 됩니다.
🚀 속도 개선 버전: 자동 목차 코드 보기 (클릭하세요)
<script>
document.addEventListener("DOMContentLoaded", function () {
const content = document.querySelector(".post-body, .entry-content");
const postTitle = document.querySelector(".post-title, .entry-title");
if (!content || !postTitle) return;
const headings = content.querySelectorAll("h2, h3");
if (headings.length === 0) return;
const wrapper = document.createElement("div");
wrapper.style.border = "1px solid #ddd";
wrapper.style.borderRadius = "8px";
wrapper.style.padding = "1.2em";
wrapper.style.marginBottom = "2.5em";
wrapper.style.backgroundColor = "#fdfdfd";
wrapper.style.fontSize = "15px";
wrapper.style.boxShadow = "0 2px 4px rgba(0,0,0,0.03)";
const tocTitle = document.createElement("div");
tocTitle.textContent = "📑 목차 보기";
tocTitle.style.fontWeight = "bold";
tocTitle.style.marginBottom = "0.8em";
tocTitle.style.fontSize = "17px";
tocTitle.style.color = "#333";
wrapper.appendChild(tocTitle);
const tocList = document.createElement("ul");
tocList.style.listStyle = "none";
tocList.style.padding = "0";
tocList.style.margin = "0";
let h2Index = 0;
let h3Index = 0;
headings.forEach((heading, index) => {
const id = `toc-${index}`;
heading.setAttribute("id", id);
heading.style.scrollMarginTop = "120px";
const li = document.createElement("li");
li.style.marginBottom = "0.6em";
const link = document.createElement("a");
link.setAttribute("href", `#${id}`);
link.style.textDecoration = "none";
link.style.color = "#0056b3";
const text = heading.textContent.trim().replace(/\s+/g, ' ');
if (heading.tagName === "H2") {
h2Index++;
h3Index = 0;
link.textContent = `${h2Index}. ${text}`;
link.style.fontWeight = "600";
li.style.marginLeft = "0";
} else if (heading.tagName === "H3") {
h3Index++;
link.textContent = `${h2Index}.${h3Index} ${text}`;
li.style.marginLeft = "1.5em";
link.style.fontSize = "14px";
link.style.color = "#555";
}
li.appendChild(link);
tocList.appendChild(li);
});
wrapper.appendChild(tocList);
content.insertBefore(wrapper, content.firstChild);
});
</script>
만약 위의 코드가 너무 길어서 복사하기 힘드신 분들은 아래 구글 문서 링크에서 깔끔하게 정리된 버전을 가져가실 수 있습니다.
자동목차 가젯 배치하기
내 입맛대로 목차 디자인 수정하기
기본 제공해 드린 코드도 깔끔하지만, 블로그의 전체적인 분위기에 맞춰 색상이나 크기를 바꾸고 싶으실 거예요. 코드의 각 부분이 어떤 의미인지 아주 쉽게 설명해 드릴게요. 이 부분만 살짝 수정해 보세요!
1. 목차 박스 전체 설정 (wrapper)
목차를 감싸고 있는 큰 틀을 말합니다. 배경색이나 테두리를 조절할 수 있어요.
| 속성 명칭 | 하는 일 | 추천 변경법 |
|---|---|---|
| border | 박스 테두리 | 점선으로 바꾸거나 "none"으로 없앨 수 있어요. |
| borderRadius | 모서리 둥글기 | 숫자가 커질수록 모서리가 동글동글해져요. |
| padding | 박스 안쪽 여백 | 글자와 테두리 사이가 너무 답답하면 숫자를 키우세요. |
| backgroundColor | 배경 색상 | 연한 노란색(#fff9c4)이나 하늘색도 예뻐요. |
2. '목차'라는 글자 꾸미기 (tocTitle)
목차 상단에 적히는 제목 부분입니다.
- textContent: "목차"라는 글자 대신 "오늘 읽을 내용"이나 "INDEX"로 바꿀 수 있습니다.
- fontWeight: 글씨 두께를 결정합니다. "bold"가 가장 무난해요.
- fontSize: 제목인 만큼 본문 목차보다는 조금 더 큰 17~18px 정도를 추천합니다.
3. 각 항목과 링크 스타일 (link & li)
실제 클릭하게 되는 각 소제목들의 스타일입니다.
- textDecoration: 링크 밑줄이 보기 싫다면 "none"으로 두세요.
- color: 클릭하고 싶게 만드는 색상이 중요합니다. 보통 신뢰감을 주는 파란색 계열(#0056b3)을 많이 씁니다.
- marginLeft (h3 전용): H3 태그(작은 제목)는 H2보다 조금 더 안으로 들어가게 설정해서 계층 구조를 보여줍니다. 보통 1.5em~2em 정도가 적당합니다.
설정 시 주의해야 할 팁
자동 목차를 성공적으로 넣었다면, 마지막으로 두 가지만 체크해 보세요. 블로그의 전문성이 확 살아납니다.
첫째, 스크롤 여백 설정(scrollMarginTop)입니다. 모바일이나 상단 메뉴가 고정된 테마의 경우, 목차를 클릭했을 때 제목이 상단 바에 가려지는 경우가 있습니다. 이럴 때 scrollMarginTop 값을 100px에서 150px 사이로 조절해 주면 제목이 딱 보기 좋게 중간에 멈춥니다.
둘째, 글 작성 시 태그 사용입니다. 글을 쓰실 때 단순히 글자 크기만 키우지 마시고, 에디터 상단에 있는 [제목], [부제목] 형식을 꼭 사용해 주세요. HTML상으로 <h2>, <h3> 태그가 제대로 들어가 있어야 코드가 이를 인식하고 자동으로 목차를 만들어 줍니다.
마치며
오늘은 구글 블로그의 필수 요소인 자동 목차를 가장 빠르고 간단하게 넣는 방법을 알아보았습니다. 작은 가젯 하나 추가했을 뿐인데 블로그가 훨씬 체계적이고 전문적으로 보이지 않나요? 방문자들도 여러분의 소중한 글을 더 편하게 읽게 될 거예요.
혹시 설치하시다가 안 되는 부분이 있거나, 디자인을 바꾸는 게 어렵다면 언제든 편하게 말씀해 주세요. 여러분의 즐거운 블로그 생활을 응원합니다!
댓글 쓰기