온라인 콘텐츠 제작 분야에서 오랜 경력을 쌓은 사람이라면 누구나 알고 있는 사실이 있습니다. 바로 구글(Google)이 긴 형식의 깊이 있는 글을 선호한다는 점입니다. 인터넷 사용자에게 더 많은 양질의 정보를 제공할 수 있기 때문인데요. 그 결과 수천 단어에 달하는 장문의 글이 웹에서 흔하게 찾아볼 수 있게 되었습니다. 하지만 그만큼 긴 글 속에서 방향을 잃고 이탈하는 독자들도 함께 늘어나고 있습니다.
장문의 글을 읽을 때 독자의 탐색을 도와주는 대표적인 요소가 바로 목차(Table of Contents, TOC)입니다. 그런데 안타깝게도 대부분의 목차는 본문 상단 등 특정 위치에만 표시되다가, 사용자가 조금만 아래로 스크롤하면 화면에서 사라져 버립니다. 목차가 글을 따라 움직이면서도 항상 고정된 위치에 떠 있다면 얼마나 편리할까요?
워드프레스 사용자라면 아래 방법을 통해 게시물에 플로팅(floating) 목차를 손쉽게 추가할 수 있습니다.
1단계: 목차 삽입하기
먼저 목차 자체를 만들어야 합니다. 추천 플러그인은 Table of Contents Plus(TOC+)입니다. 이 플러그인은 글의 제목 태그(h2, h3 등)를 기준으로 목차를 자동 생성해 줍니다.
설치 후 활성화하면 관리자 메뉴의 "설정(Settings) → TOC+"에서 세부 옵션에 접근할 수 있습니다. 특정 콘텐츠 유형(글·페이지 등)에 목차를 자동으로 표시하거나, 목차가 나타나기 위한 최소 제목 개수를 지정하고, 숏코드(shortcode)를 이용해 원하는 위치에 직접 삽입하거나 비활성화하는 등 다양한 커스터마이징이 가능합니다.
목차를 사이드바에 표시하려면 "외모(Appearance) → 위젯(Widgets)" 메뉴로 이동한 뒤, "TOC+" 위젯을 사이드바 영역으로 드래그 앤 드롭하고 저장(Save) 버튼을 클릭하면 됩니다.
이제 조건을 충족하는 모든 글과 페이지의 사이드바에 목차가 나타납니다.
하지만 이 상태의 목차 위젯은 여전히 페이지와 함께 스크롤됩니다. 화면에 고정되도록 만들려면 다음 단계를 계속 진행하세요.
2단계: 목차 고정하기
두 번째 목표를 달성하려면 Q2W3 Fixed Widget이라는 또 다른 플러그인의 도움이 필요합니다. 워드프레스 플러그인 저장소에서 검색한 후 설치하고 활성화하세요.
이 플러그인의 설정은 "외모 → Fixed Widget Options" 메뉴에서 확인할 수 있지만, 대부분의 사용자는 기본값 그대로 두어도 무방합니다.
사용법은 간단합니다. 다시 "외모 → 위젯"으로 이동해 사이드바에 고정하고 싶은 위젯을 선택합니다. 우리는 TOC+ 위젯이 스크롤과 함께 움직이며 사이드바의 고정된 위치에 떠 있기를 원하므로, 해당 위젯을 선택하세요.
그러면 저장(Save) 버튼 바로 위에 "Fixed widget"이라는 새 체크박스가 나타납니다. 이 항목에 체크하기만 하면 고정된 목차가 완성됩니다.
이 기능은 Table of Contents Plus에만 국한되지 않습니다. Q2W3 플러그인을 활용하면 어떤 위젯이든 사이드바에 계속 보이도록 고정할 수 있습니다.
이제 사이드바 목차가 적용된 글이나 페이지로 이동해 결과물을 확인해 보세요. 나중에 기능을 끄고 싶다면 "외모 → 위젯" 메뉴로 돌아가 체크박스를 해제하면 됩니다.
3단계: 더 좋은 결과를 위한 팁
CSS에 능숙한 사용자라면 TOC+의 스타일 커스터마이징 기능을 활용해 원하는 모양으로 다듬을 수 있지만, 대부분의 사용자는 플러그인을 기본 설정 그대로 사용합니다. 즉, 목차의 디자인은 사용 중인 테마의 영향을 크게 받습니다.
필자는 여러 테마에서 TOC+와 Q2W3의 조합을 직접 테스트해 보았는데, 최상의 결과를 얻는 데 도움이 되는 몇 가지 팁을 공유합니다.
1. 고정 위젯은 사이드바 맨 아래에 배치하기
먼저 고정된 TOC+ 위젯을 다른 위젯들 아래, 즉 사이드바의 가장 아래쪽에 배치하세요. 그래야 스크롤할 때 다른 위젯과 겹치는 것을 방지할 수 있습니다. 위젯의 배경이 투명한 경우(테스트한 테마들이 그랬습니다) 투명한 위젯 두 개가 서로 겹쳐 보이면, 하나는 움직이고 하나는 멈춰 있는 상황이라 더욱 지저분해 보입니다.
2. 사이드바 위젯은 최소한으로 사용하기
둘째, 사이드바에는 가능한 한 적은 수의 위젯을 사용하세요. 그래야 TOC+ 위젯이 첫 화면(페이지 폴드 이전)에 먼저 노출되고, 이후 페이지와 함께 위로 스크롤되다가 화면 상단에 닿으면 그 자리에 고정됩니다.
고정 사이드바의 또 다른 장점은 방문자가 페이지를 끝까지 아래로 스크롤했을 때 흔히 나타나는 텅 빈 여백 영역이 생기지 않는다는 점입니다.
두 플러그인의 조합을 직접 적용해 보고 어떤 결과가 나왔는지 의견을 들려주세요.