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