글 완독 후 다음 콘텐츠 발견 경로를 5개 추가
목차
블로그 플랫폼에서 사용자 체류율을 높이기 위해 관련글, 목차, 진행바, 최근본글, 다음글이라는 5개의 새로운 위젯을 Post 레이아웃에 통합했다. 각각의 컴포넌트를 먼저 개별적으로 개발하고, 나중에 Post.astro의 레이아웃에 한 번에 조합하는 방식으로 진행했다.
각 위젯의 역할과 사용자 경험
목차(TableOfContents) 먼저, 이건 긴 글을 읽을 때 진짜 필수다. 기술 블로그는 보통 섹션이 많은데, 독자가 특정 부분을 건너뛰거나 나중에 다시 찾고 싶을 때 마크다운 헤딩 구조를 파싱해서 자동으로 생성된 목차가 있으면 네비게이션이 훨씬 수월하다. 특히 모바일 환경에서 "아, 이 글이 어디까지 다루지?" 하고 한눈에 파악할 수 있게 해주는 효과가 크다.
진행바(ReadingProgress) 는 심리학적인 부분을 건드린다. 스크롤 깊이에 따라 진행률을 실시간으로 표시하면 "이미 70% 읽었으니 끝까지 가야지" 하는 심리가 생긴다. 긴 기술 글은 몇천 단어에 달할 수 있는데, 그렇게 되면 마치 끝이 없을 것처럼 느껴질 수 있다. 진행바는 그런 막연함을 구체적인 수치로 바꿔주고, 독자에게 "너, 거의 다 왔어" 하는 격려를 준다.
관련글(RelatedPosts) 과 다음글(NextPost) 은 둘 다 "다음 읽을 거리"를 제시하지만, 전략이 조금 다르다. 관련글은 같은 태그나 주제를 공유하는 글들을 추천해주므로, 독자가 특정 영역을 깊이 있게 탐색할 수 있도록 지원한다. 예를 들어 "성능 최적화" 글을 읽으면 그 태그를 가진 다른 글들을 쉽게 발견한다. 반면 다음글은 작성 시간 순서나 시리즈로 연결된 글들을 제시해서, 읽는 흐름을 방해하지 않으면서도 "그 다음엔 뭐가 있을까?" 하는 호기심을 자극한다. 글이 끝났을 때 그게 진짜 끝이 아니라 다음으로의 자연스러운 입구처럼 느껴지도록 한 것이다.
최근본글(RecentlyViewed) 은 로컬 스토리지 기반의 간단하지만 효과적인 기능이다. 여러 글을 오가며 참고할 때, "아까 읽던 그 글 다시 보고 싶은데" 할 때 검색 없이 빠르게 돌아갈 수 있다. 이건 사용자의 맥락(context)을 유지해주는 것이 핵심이다.
왜 이런 기능들이 필요했나
기술 블로그를 운영하면서 계속 아쉬웠던 부분이 하나 있었다. 글을 완독한 사용자가 그 다음에 어디로 가야 할지 명확한 경로가 없다는 것. 특히 길이가 길거나 난이도가 높은 기술 글일수록 마지막 문단에 도달했을 때 독자는 이미 피로도가 꽤 높은 상태다. "좋은 정보 얻었다, 이 정도면 충분하다" 하고 창을 닫는 게 자연스러워진다.
결국 블로그 플랫폼의 retention(사용자 체류율)을 높이려면, 글의 끝을 "끝"으로 만들지 말고 "다음으로의 입구"처럼 설계해야 한다. 목차로 글 구조를 명확히 하고, 진행바로 피로감을 상쇄하고, 관련글과 다음글로 자연스러운 이동 경로를 제시하는 것이다. 이 5개 위젯은 각각 다른 접근 방식이지만, 모두 같은 목표를 향한다: 사용자를 "계속 읽는 상태"로 유지하기.
구현 관점의 배운 점
Post.astro라는 단일 레이아웃에 5개의 독립적인 컴포넌트를 통합함으로써, 모든 블로그 글에 일관된 경험을 한 번에 적용할 수 있었다. 각 컴포넌트는 자신의 책임만 가지고 있지만—목차는 헤딩 파싱, 진행바는 스크롤 추적, 관련글은 태그 매칭—함께 작동할 때 비로소 시스템의 가치를 발휘한다.
데이터 관점으로는, 이제 어느 위젯이 실제로 효과적인지 모니터링할 수 있다. 어떤 글에서는 목차 클릭이 많고, 어떤 글에서는 관련글 이동이 많은지 분석하면, 글의 길이나 주제에 따른 사용자 행동 패턴도 파악할 수 있다. 그게 다음 개선 사항을 알려줄 것이다. 처음부터 "이게 100% 정답이다"라고 확신하기보다는, 이런 기능들을 일단 배포하고 실제 사용자 신호를 받아서 다음 판을 짜는 방식이 훨씬 현명하다.
🛒 이 글과 어울리는 추천 상품
*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.
댓글 0
첫 댓글 달아줘.