처음 티스토리 블로그를 시작했을 때 나는 목차라는 개념 자체를 별로 심각하게 생각하지 않았다. 글을 쓰면 당연히 읽어야 하는 거 아닌가, 위에서 아래로 죽 내려가면 되는 거 아닌가 하고. 마치 골목 맛집에 처음 갔을 때 메뉴판 없이 주인아주머니가 그냥 "오늘 건 이거예요" 하면 그냥 시키는 것처럼. 선택지가 없으니 고민도 없고, 불편한지도 몰랐다.
그런데 어느 날 내 글의 평균 체류 시간이 40초대라는 걸 구글 서치 콘솔에서 확인했다. 분명 2000자가 넘는 글인데 40초면 사람들이 첫 두 단락만 보고 나가는 거다. 그때부터 '왜 안 읽고 나가지?'를 진지하게 고민하기 시작했고, 거기서 목차라는 게 얼마나 중요한지 깨달았다.
목차는 독자에게 "이 글에 당신이 찾는 게 있어요"라고 먼저 말해주는 역할을 한다. 마치 레스토랑에 들어갔을 때 입구에서 오늘의 메뉴를 보여주는 것처럼. 메뉴판을 본 손님은 자리에 앉는다. 메뉴판이 없으면 문 앞에서 망설이다 나간다. 목차가 없는 글도 마찬가지다.
앵커 링크로 목차 만들기, 어디서 막히는가
목차를 처음 만들어보려는 분들이 가장 먼저 시도하는 방법은 nav 태그 안에 링크를 나열하는 것입니다. 저도 처음엔 그렇게 했습니다. 클릭해도 화면이 꼼짝도 안 했습니다. 두 시간 동안 왜 안 되는지 몰랐는데, 알고 보니 소제목에 id 속성을 붙이지 않았던 것이었습니다. 이게 바로 앵커 링크(Anchor Link)의 핵심입니다. 앵커 링크란 같은 페이지 내의 특정 위치로 이동할 수 있도록 연결해주는 HTML 방식으로, 목적지에 해당하는 요소에 반드시 고유한 id 값이 있어야 작동합니다.
구조를 구체적으로 설명하면 이렇습니다. 소제목 태그에 id="section1" 같은 속성을 먼저 달아주고, 목차의 링크에는 href="#section1"처럼 샵(#) 기호와 함께 그 id를 연결합니다. 목차를 감싸는 바깥 구조는 nav 태그를 쓰는 것이 표준입니다. 여기서 nav 태그란 HTML5에서 도입된 시맨틱 태그(Semantic Tag)로, 브라우저와 검색 엔진에게 "이 영역은 내비게이션입니다"라는 의미를 전달하는 역할을 합니다. 단순히 div로 감싸는 것과 달리, 시맨틱 태그를 쓰면 스크린 리더나 크롤러가 페이지 구조를 훨씬 정확하게 파악할 수 있습니다(출처: MDN Web Docs).
목차 링크를 클릭했을 때 해당 위치로 부드럽게 이동하려면 CSS에서 scroll-behavior: smooth를 html 요소에 적용하면 됩니다. scroll-behavior란 브라우저의 스크롤 동작 방식을 제어하는 CSS 속성으로, auto 값은 즉시 이동, smooth 값은 부드러운 애니메이션으로 이동하도록 설정합니다. 단 한 줄짜리 CSS인데 사용자 경험이 눈에 띄게 달라집니다.
목차 항목 수는 어느 정도가 적당할지도 고민이 됩니다. 제 경험상 h2 수준 소제목 기준으로 5~8개 정도가 독자가 스캔하기에 적당한 범위입니다. 그 이상이 되면 목차 자체를 읽다가 지쳐버리는 역효과가 납니다. 목차가 본문보다 더 복잡해 보이는 순간, 독자는 그냥 나가버립니다.
목차를 만들 때 실수하기 쉬운 포인트를 정리하면 다음과 같습니다.
- 소제목 태그에 id 속성을 빠뜨리는 것 (가장 흔한 실수)
nav대신div만 사용해 시맨틱 구조를 놓치는 것- scroll-behavior 적용 위치를 body가 아닌 특정 div에만 넣는 것
- 목차 항목 수를 10개 이상으로 과도하게 늘리는 것
- id 값에 한글이나 공백을 포함시키는 것 (영문 소문자와 하이픈만 사용 권장)
체류 시간과 SEO, 목차가 실제로 영향을 미치는가
목차를 달고 나서 한 달 뒤, 구글 서치 콘솔을 다시 열었습니다. 평균 체류 시간이 1분 20초대로 올라 있었습니다. 극적인 하루짜리 반전이 아니라, 조금씩 꾸준히 올라간 흔적이었습니다. 솔직히 이건 예상보다 뚜렷한 변화였습니다. 글의 내용을 바꾼 것도 아니고, 목차 하나만 붙였을 뿐인데 독자가 조금 더 머물기 시작했습니다.
이것이 SEO와 어떻게 연결되는지를 이해하려면 구글이 페이지를 평가하는 방식을 알아야 합니다. 구글은 앵커 링크가 달린 페이지를 크롤링할 때, 각 섹션을 독립적인 콘텐츠 단위로 인식할 수 있습니다. 이를 통해 검색 결과에서 "섹션 링크(Sitelink)" 형태로 노출되기도 합니다. 섹션 링크란 구글 검색 결과 하단에 해당 페이지의 특정 섹션으로 바로 이동할 수 있는 링크가 추가로 표시되는 기능으로, 클릭률(CTR)을 높이는 데 직접적으로 기여합니다(출처: Google Search Central).
그렇다고 목차가 모든 글에 만능인 것처럼 생각하는 분들도 있는데, 저는 조금 다르게 봅니다. 짧은 감성 에세이나 단순한 일상 기록형 포스팅에 억지로 목차를 끼워 넣으면, 오히려 글의 자연스러운 흐름이 끊깁니다. 목차는 정보 전달형 글, 특히 튜토리얼이나 비교 분석형 콘텐츠에서 효과가 훨씬 큽니다. 글 성격을 먼저 판단하고, 목차가 독자에게 실제로 필요한지 물어보는 것이 순서입니다.
제가 목차를 꾸준히 쓰면서 생긴 습관이 하나 있습니다. 글을 쓰기 전에 소제목 구조를 먼저 잡아두는 것입니다. 소제목이 먼저 있으면 목차는 자동으로 따라옵니다. 그리고 소제목 구조가 잡히면 본문을 어디에 무엇을 써야 할지 명확해지기 때문에 글 쓰는 속도도 오히려 빨라졌습니다. 제 경험상 글쓰기가 더 빠르고 편해진 건 목차 덕분에 생긴 의도치 않은 수확이었습니다.
ARIA(Accessible Rich Internet Applications) 규격도 한 번쯤 살펴볼 만합니다. ARIA란 장애가 있는 사용자가 보조 기술을 통해 웹을 탐색할 수 있도록 역할과 상태를 명시하는 W3C 표준 규격입니다. 목차에 aria-label="목차" 같은 속성을 nav 태그에 추가하면 스크린 리더 사용자에게도 명확한 안내가 되며, 이는 구글이 평가하는 접근성 지표에도 긍정적인 영향을 줄 수 있습니다.
목차 하나가 글의 구조를 바꾸고, 구조가 독자의 행동을 바꿉니다. 아직 목차를 달지 않은 글이 있다면, 오늘 서치 콘솔에서 해당 글의 체류 시간부터 한번 확인해 보시길 권합니다. 숫자가 40초 이하라면, 목차를 달기 전에 먼저 소제목 구조가 잘 잡혀 있는지 점검하는 것이 순서입니다. 구조 없이 목차만 붙이면, 그건 표지판만 세워두고 도로는 없는 것과 다름없으니까요.
참고
MDN Web Docs – HTML nav element
MDN Web Docs – scroll-behavior
Google Search Central
W3C – ARIA in HTML