WordPress 글 목차: 제목 구조, 앵커, 모바일 읽기

사이트 이전 안내를 연 독자는 URL 리디렉션 부분만 찾고 싶을 수 있습니다. 계속 스크롤해야 한다면 내용이 충실해도 사용하기 어렵습니다. 목차는 먼저 글의 범위를 보여 주고 필요한 부분으로 바로 이동하게 합니다. 글의 사고 순서를 반영해야 가치가 있습니다.

준비 사항, 작업 단계, 점검, 자주 묻는 질문으로 이루어진 긴 글을 예로 WordPress 앵커와 Easy Table of Contents를 설명합니다. 먼저 장 구성을 명확히 하고 자동 생성과 수동 관리 중에서 선택한 뒤 데스크톱과 휴대전화에서 검증합니다.

장 제목이 독자의 질문에 답하도록 만들기

글의 모든 소제목만 따로 모아 읽어 보세요. '소개', '추가 소개', '기타'가 이어지면 독자는 목차만으로 내용을 알기 어렵습니다. '시작 전에 필요한 자료', '파일을 옮기는 방법', '이전 후 점검 방법'처럼 구체적인 질문으로 바꿉니다. 목차는 모든 문장을 나열하는 곳이 아니라 주요 읽기 경로를 보여 주는 곳입니다.

편집기에서는 실제 제목 블록을 사용하고 내용의 계층에 맞춰 H2와 H3을 배치하세요. 일반 문단을 단순히 크게 굵게 만들거나 글자 크기 때문에 제목 단계를 건너뛰지 마세요. 주요 단계는 H2, 그 안의 설명은 H3을 사용하고 시각적 크기는 테마 스타일에서 조정합니다.

반복되는 FAQ나 주의 사항에는 '이전 전 주의 사항', 'URL 변경 시 주의 사항'처럼 주제를 덧붙이세요. 그러면 독자가 목차와 본문 사이를 이동할 때 현재 위치를 알 수 있고, 나중에 편집자나 지원 담당자가 특정 문단을 인용하기에도 좋습니다.

핵심 항목이 적다면 수동 앵커부터 사용하기

제목 블록의 Advanced 설정에서 HTML Anchor에 prepare-files 같은 이름을 입력합니다. 글 앞부분의 목록이나 버튼에 #prepare-files 링크를 만들면 같은 페이지의 해당 위치로 이동합니다. 다른 글에서 연결하려면 전체 페이지 URL 뒤에 이 프래그먼트를 붙입니다.

WordPress 공식 안내에 따르면 앵커는 같은 문서 안에서 고유해야 하고 대소문자를 구분하며 공백을 포함할 수 없습니다. 오래 인용될 장에는 짧고 명확한 이름을 정해 편집 기록에 남기세요. 본문 제목을 바꾸더라도 이미 인용된 앵커까지 반드시 바꿀 필요는 없습니다.

수동 방식은 장이 적고 구조가 안정적인 서비스 설명이나 기획 페이지에 적합합니다. 다만 장을 추가하거나 삭제할 때 목차 링크를 직접 고쳐야 합니다. 앞부분의 목록을 만든 뒤 잊지 말고 검증 중 모든 항목을 클릭해 대상이 없거나 같은 이름의 잘못된 장으로 이동하지 않는지 확인하세요.

Easy Table of Contents로 목차 생성하기

Easy Table of Contents를 활성화한 뒤 먼저 지원할 콘텐츠 유형을 정하고, 어떤 유형에 목차를 자동으로 넣을지 결정합니다. 지원과 자동 삽입은 서로 다른 설정입니다. 처음에는 일반 게시글만 골라 홈페이지, 결제 페이지, 짧은 공지에 불필요한 목차가 생기지 않도록 할 수 있습니다.

글에 맞는 위치와 표시 기준을 정하세요. 예를 들어 장이 충분한 글에만 표시할 수 있습니다. 짧은 도입문 다음에 목차를 두면 독자는 글이 어떤 문제를 해결하는지 먼저 알 수 있습니다. 명확한 레이블과 제목 단계를 정하고 보통 주요 장과 필요한 하위 장만 넣으면 됩니다. H1부터 H6까지 전부 나열할 필요는 없습니다.

1. 필요한 콘텐츠 유형을 활성화하고 대표적인 긴 글에서 자동 삽입을 시험합니다.
2. 위치, 표시 조건, 포함할 제목 단계를 설정합니다.
3. 테마나 다른 플러그인이 이미 목차를 만들고 있는지 확인해 한 페이지에 두 개가 나타나지 않게 합니다.

잡음을 제거하고 읽기 쉬운 목차 유지하기

관련 글, 바닥글, 광고의 제목이 목차에 들어오면 왜 그 블록이 본문으로 처리되는지 먼저 확인하세요. 플러그인에는 제목 제외 설정이 있습니다. CSS class에 따른 제외는 공식 문서에서 Pro 기능으로 소개하므로 사용하려는 버전에서 지원하는지 확인합니다.

일부 페이지 빌더나 쇼트코드는 제목을 동적으로 출력합니다. 따라서 편집기에서는 정상이어도 공개 페이지의 목차는 다를 수 있습니다. 편집기 사이드바만 보지 말고 실제 공개 화면에서 시험하세요. 플러그인 업데이트 뒤에는 특히 반복 제목, 접힌 콘텐츠, 동적 블록이 있는 대표 페이지를 다시 확인합니다.

목차의 글자를 너무 작게 만들지 마세요. 긴 제목은 자연스럽게 줄바꿈하고 계층별 들여쓰기를 구분할 수 있어야 합니다. 글이 매우 길다면 주요 장만 먼저 보여 주거나 분명한 펼치기 버튼을 제공하세요. 처음부터 접혀 있더라도 독자가 조작할 수 있는 목차의 존재를 알아차려야 합니다.

고정 목차와 고정 헤더를 함께 검증하기

Easy Table of Contents는 Fixed/Sticky TOC를 Pro 기능으로 안내합니다. 고정 목차를 선택하기 전에 스크롤 중 계속 보여 줄 필요가 있는지 판단하세요. 데스크톱 사이드바에 공간이 있다고 해서 휴대전화 화면 모서리에도 전체 목록을 놓을 수 있는 것은 아닙니다. 문의 버튼, Cookie 알림, 맨 위로 버튼과 같은 자리를 차지할 수 있습니다.

목차를 누른 뒤 장 제목이 고정 헤더에 가려지면 이동 시 여백을 조정해야 합니다. 먼저 플러그인이나 테마에 관련 설정이 있는지 확인하세요. 맞춤 CSS가 필요하면 담당자가 scroll-margin-top 같은 방법을 검토하고 실제 헤더 높이에 맞춰 검증합니다. 하나의 숫자가 모든 기기에 맞는다고 가정하지 마세요.

부드러운 스크롤은 시각 효과이지 정확한 위치로 이동하는 기능을 대신하지 않습니다. 긴 페이지와 느린 기기에서 시험하고 이미지가 뒤늦게 로드되어 레이아웃이 움직이면서 위치가 어긋나는지 보세요. 애니메이션이 읽기를 방해한다면 단순하게 만들되 명확한 링크와 안정된 장 위치를 유지합니다.

편집 절차에 목차 검사를 추가하기

게시 전에 첫 번째, 가운데, 마지막 목차 항목을 차례로 누른 뒤 모든 항목을 검사합니다. 키보드로 펼치기 기능과 링크를 조작하고 포커스가 보이는지 확인하세요. 좁은 화면에서 넘침과 본문 가림을 살피고 휴대전화를 회전한 뒤 고정 요소를 다시 확인합니다.

앵커가 포함된 URL을 새로운 로그아웃 창에서 열어 원하는 장에 바로 도착하는지 확인하세요. 이미지나 광고가 로드된 뒤 페이지 높이가 바뀌는 사이트에서는 깊은 링크를 직접 연 결과를 특히 살펴봅니다. 이는 페이지 로딩이 끝난 뒤 목차를 클릭하는 시험과 다르므로 두 가지를 모두 유지합니다.

글을 수정할 때는 참조 중인 장이 삭제, 이름 변경, 이동되었는지 먼저 확인하고 목차를 함께 고칩니다. 앵커를 바꿔야 한다면 관련 내부 링크와 고객 지원에서 쓰는 링크도 정리하세요. 페이지는 열리지만 해당 장을 찾지 못하는 참조를 남기지 않아야 합니다. 목차를 콘텐츠와 함께 관리해야 독자의 탐색 시간을 계속 줄일 수 있습니다.

WordPress 게시글과 페이지 정리하기

웹사이트 카테고리와 탐색 설계하기

• 튜토리얼
• 앱·소프트웨어
• 웹사이트·이커머스
• WordPress