목차·진행바·관련글로 블로그 글 읽기 경험 개선

길어지는 기술 글일수록 독자가 "어디까지 읽었는지", "뒤에 뭐가 남았는지"를 놓치기 쉽다. 특히 스크롤만 하다가 흥미로운 섹션을 다시 찾으려 할 때 답답한 경험을 한 적 있는데, 이번에 블로그 글 상세 페이지 전체를 손봤다. 목차, 진행바, 관련글, 최근본글 네 개 컴포넌트를 추가하고 중앙 레이아웃을 개선하는 작업이었다.

체류시간 늘리기, 왜 중요한가

블로그는 그냥 정보를 담는 공간이 아니다. 한 글을 읽은 독자가 관련 글을 발견하면 다음 글로 넘어가고, 그러면서 체류시간이 늘고 재방문 가능성이 커진다. 우리 팀에서 "retention"을 작업 카테고리로 따로 관리하는 이유도 거기 있다. 짧은 글만 잘 쓰는 것보다, 긴 글도 쉽게 네비게이션할 수 있게 만드는 게 중요하다는 판단이었다.

처음엔 "목차나 진행바 정도면 충분하지 않을까?" 싶었다. 하지만 데이터 분석팀의 리포트를 보니 장문 글(3000자 이상)에서 이탈률이 유독 높았다. 가설은 명확했다:
- 스크롤 중에 "이미 본 내용인가?" 헷갈림
- "글이 얼마나 더 남았는지" 몰라서 포기
- 다 읽은 후 "비슷한 주제 더 보기"가 어려움

네 개 컴포넌트로 읽기 흐름 정리

단순해 보이지만, 각 컴포넌트 간 데이터 흐름을 신경 써야 했다. 예를 들어 BlogPost.astro 레이아웃에서 마크다운 AST를 파싱해서 제목 리스트를 추출한 뒤, 이를 TableOfContents와 ReadingProgress에 전달해야 했다.

레이아웃 재설계: 중앙 정렬의 의미

기존 레이아웃은 좁은 콘텐츠 영역 + 양쪽 여백이었다. "가운데 레이아웃"이라는 표현이 좀 추상적이긴 한데, 핵심은 이거였다:

기존: [ 사이드 | 글 | 사이드 ]
개선: [  글 중심  | 옆정보 ]
      (읽기 몰입도 ↑)

목차와 최근본글이 방해 요소가 되면 안 되니까, 반응형으로 모바일/태블릿에선 토글 가능하게 만들었다. 그리고 진행바는 글의 위치를 절대적으로 알려주므로 사이드바가 접혀도 독자의 진행 상황을 놓치지 않는다.

팀 차원에서 고민했던 부분은 "performance와 UX의 트레이드오프"였다. 관련글을 매번 서버에서 계산하느냐, 클라이언트에서 필터링하느냐. 우리는 빌드 타임에 태그 기반 인덱스를 만들고, 클라이언트에서 빠르게 조회하는 방식으로 결정했다. 결과적으로 JavaScript 번들도 작아지고, TTI(Time to Interactive)도 개선됐다.

다음 관점에서의 배운 점

목차 컴포넌트를 만들면서 깨달은 게 있다. 제목이 의미 있는 계층 구조(h2-h3-h4)로 작성되지 않으면 목차가 엉망이 된다는 것. 즉, UI 개선은 콘텐츠 작성 규칙으로도 영향을 준다는 뜻이다. 팀에 "앞으로 글 쓸 때 제목 계층을 명확히" 가이드를 공유했고, 기존 글들도 서서히 정리하기로 했다.

또 하나는 사용자 행동 데이터의 중요성이다. "체류시간이 길면 좋다"는 추상적 가정이 아니라, 실제 스크롤 깊이, 목차 클릭 수, 관련글 클릭까지 측정하기 시작했다. 2주 뒤 리뷰에서 진행바가 꽤 많이 클릭되는 걸 보고 놀랐다. 독자들이 "현재 위치"를 주기적으로 확인하고 있었던 것.

이번 작업으로 깨달은 가장 중요한 건 이거다: 기능 추가는 수 대로 가 아니라, 그 기능이 실제로 읽는 사람의 경험을 어떻게 바꾸는가로 평가해야 한다. 목차도 진행바도 관련글도, 다 "이 글을 마지막까지 읽게 하기 위한" 하나의 목표로 수렴되어 있다.

🛒 이 글과 어울리는 추천 상품

• 기계식키보드 쿠팡에서 보기 →
• 모니터암 쿠팡에서 보기 →
• 인체공학마우스 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.