글 읽기 경험 개선한 4가지 네비게이션 기능 추가
목차
한 블로그 서비스의 사용자 체류율을 높이기 위해 여러 기능을 한꺼번에 추가했다. 읽은 글의 진행도를 보여주고, 관련 글을 추천하고, 목차로 스크롤을 돕고, 최근 본 글을 기억하는 식으로 말이다. 덤으로 중앙 정렬 레이아웃으로 가독성도 개선했다.
왜 체류율 기능이 필요했는가
블로그의 대부분 사용자는 검색 엔진이나 SNS에서 한 글을 읽고 떠난다. 그게 정상인데, 문제는 떠날 때 다른 글을 알지 못한다는 것. 결국 재방문율이 떨어진다. 특히 길이가 긴 글일수록 사용자는 끝까지 읽는 도중 집중력을 잃을 수 있다. 그래서 "아직 이 글 반도 안 읽었는데", "비슷한 주제의 다른 글이 있으면 좋을 텐데" 같은 불편함이 생긴다.
체류율 개선의 핵심은 세 가지다. 첫째, 현재 진행도를 보여줘서 심리적 완료감을 높인다. 둘째, 목차와 진행도를 함께 표시해서 탐색 시간을 줄인다. 셋째, 끝에 도달하기 전에 관련 글을 미리 제시해서 자연스러운 다음 글로 유도한다. 넷째, 최근 본 글을 기억해서 다시 돌아올 때 원하는 글을 빨리 찾을 수 있게 한다.
추가한 4가지 기능
| 기능 | 목적 | 기술 |
|---|---|---|
| Reading Progress | 글 읽은 진도 시각화 | 스크롤 위치 감지 |
| Table of Contents | 목차 기반 섹션 점프 | 제목 추출 후 앵커 링크 |
| Related Posts | 관련 글 추천 | 태그/카테고리 기반 쿼리 |
| Recently Viewed | 최근 본 글 기록 | 로컬스토리지 저장 |
Reading Progress는 글의 맨 위나 사이드에 진행도 바를 표시한다. 사용자가 스크롤할 때 동적으로 업데이트되며, 심리학적으로 "계속 읽으면 끝낼 수 있다"는 신호를 준다.
Table of Contents는 H2, H3 같은 제목들을 자동 추출해서 목차로 만든다. 사용자가 "이 섹션이 궁금한데 어디 있지?"라고 물을 때 빨리 점프할 수 있게 해준다. 길이가 긴 글일수록 효과가 크다.
Related Posts는 현재 글의 태그나 카테고리와 일치하는 다른 글들을 추천한다. 글 끝에 배치해서 자연스럽게 "다음 읽을거" 후보를 제시하는 식이다.
Recently Viewed는 로컬스토리지에 본 글들을 기록해뒀다가, 각 글 페이지나 사이드바에 보여준다. 다시 방문했을 때 "아, 이 글 이미 봤네" 하고 다른 글을 탐색할 수 있게 만든다.
구현 구조
Post.astro (레이아웃)
├─ ReadingProgress.astro (진행도 바)
├─ TableOfContents.astro (목차)
├─ Post 본문
├─ RecentlyViewed.astro (최근 본 글)
└─ RelatedPosts.astro (관련 글)
src/db.ts는 쿼리 로직이 바뀌었을 것 같다. 관련 글을 찾을 때 "이 글의 태그와 겹치는 다른 글들을 최대 5개" 같은 조건이 필요하고, 성능을 고려하면 쿼리 결과를 캐싱하거나 인덱싱 전략이 필요했을 테니까. Post.astro 레이아웃도 여러 컴포넌트를 조합하는 형태로 리팩토링되었을 것이다.
centered layout 변경은 글을 읽을 때 눈이 왕복하지 않도록 컨텐츠 폭을 제한하고 좌우 마진을 충분히 주는 것. 이건 디자인 트렌드이자 접근성 개선이다.
회고와 배운 점
한꺼번에 여러 기능을 추가할 때 가장 중요한 건 각 컴포넌트를 독립적으로 유지하는 것이다. ReadingProgress가 TableOfContents와 의존하지 않으면, 나중에 하나를 수정해도 다른 하나가 깨지지 않는다. 우리는 이걸 "느슨한 결합(loose coupling)"이라 부른다.
또 하나는 데이터베이스 쿼리 최적화인데, Related Posts 같은 기능을 추가할 때마다 "이 글을 읽는 유저들에게 매번 DB 쿼리를 날릴 건가"라는 고민이 생긴다. 초기 단계에서는 간단하게 하고, 나중에 캐싱이나 배치 처리를 고려하는 게 좋다는 경험을 또 얻었다.
마지막으로 레이아웃 변경은 항상 여러 페이지에 영향을 미친다. 이 경우 Post.astro를 건드렸으니, 모든 블로그 글이 새로운 centered layout을 받는다. 그래서 변경 전에 반응형 테스트(mobile/tablet/desktop)와 가독성 테스트를 꼼꼼히 했을 것이다. 한 번의 실수가 모든 유저 경험을 깎아먹을 수 있으니까.
🛒 이 글과 어울리는 추천 상품
*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.
댓글 0
첫 댓글 달아줘.