글 상세 페이지 체류율 개선

글 읽기 화면에 읽기진행바, 목차, 관련글, 최근본글을 추가하는 작업을 했다. 단순히 기능을 넣는 것이 아니라 사용자가 글을 끝까지 읽게 하고, 읽은 후에도 계속 탐색하도록 유도하는 전략이었다.

왜 이 작업이 필요했는가

콘텐츠 플랫폼에서 "읽기 시작"과 "읽기 완료"는 전혀 다른 문제다. 사용자가 글 목록에서 제목을 보고 들어오는 건 쉽지만, 긴 글을 전부 읽게 하는 건 다르다. 진입은 했는데 중간에 나가버리는 패턴이 발생하면, 아무리 좋은 콘텐츠도 제 값을 못 한다. 그게 바로 "체류율" 문제다.

이전에는 글 본문만 있어서 사용자가 읽다가 지루하면 그냥 나갔다. 특히 긴 글일수록 "어디까지 읽었는지", "앞으로 얼마나 더 읽어야 하는지" 감이 없으니 이탈 확률이 높았다. 또 하나의 문제는 한 글을 다 읽은 후에 갈 곳이 없다는 거. 관련된 글이나 최근에 본 글들이 보였다면 자연스럽게 다음 콘텐츠로 넘어갈 텐데, 화면에 아무것도 없으면 사용자는 뒤로 가기를 누를 수밖에 없다.

추가한 4가지 UI 패턴

읽기진행바는 가장 기본적이면서도 심리적 효과가 큰 패턴이다. 사용자가 스크롤할 때마다 상단에 파란 바가 채워지면, 무의식적으로 "아, 이 정도 읽었구나. 끝까지 봐야지" 하는 동기가 생긴다. 게임의 경험치 바와 비슷한 원리. 진행 상황이 시각적으로 명확하면 포기율이 확실히 떨어진다.

목차는 특히 기술 글이나 가이드 같은 구조화된 글에 효과적이다. 사용자가 "아, 이 글에 내가 원하는 섹션이 있네?"하고 바로 점프할 수 있다. 전체를 다 읽지 않아도 필요한 부분만 찾아 읽는 전략적 읽기를 지원한다. 이게 중요한 이유는 모든 사용자가 처음부터 끝까지 읽는 건 아니기 때문. 목차가 있으면 사용자 의도에 맞는 읽기 방식을 선택할 수 있다.

관련글과 최근본글은 읽기를 마친 후의 여정을 설계하는 부분이다. 글을 다 읽은 사용자는 두 가지 욕구가 있다: 같은 주제를 더 깊게 파고싶거나(관련글), 아니면 이전에 읽던 다른 글로 돌아가고 싶다(최근본글). 두 옵션을 모두 제공하면 사용자가 자연스럽게 다음 액션을 선택할 수 있다. 이게 결국 장기 체류율과 재방문율로 연결된다.

코드 변경의 의미

변경한 세 파일이 각각 하는 역할이 명확했다.

app/main.py에서는 백엔드 로직을 담당했다. 글 조회할 때 관련글과 최근본글 데이터를 쿼리해서 템플릿으로 넘겨주는 부분. 목차도 글 본문을 파싱해서 제목 헤더들을 자동 추출하는 로직이 들어갔을 거다. 데이터베이스 쿼리가 늘어나는 만큼 캐싱이나 인덱싱도 함께 고려했을 리 크다. 한 번 글을 열 때마다 관련 데이터를 다 다시 구하면 응답 속도가 떨어지니까.

app/static/style.css는 UI 스타일링을 담당한다. 진행바는 페이지 최상단에 위치해야 하고, 목차는 사이드바나 고정 영역에 배치해야 한다. 관련글과 최근본글은 글 하단에 카드 형태로 배열할 텐데, 모바일에서도 보기 좋게 반응형으로 처리했을 거다. 특히 진행바의 애니메이션이나 목차의 스크롤 위치 강조(active state)처럼 약간의 상호작용성도 들어갈 수 있다.

app/templates/post.html은 모든 것을 조립하는 곳이다. 진행바 HTML, 목차 리스트, 관련글 루프, 최근본글 섹션이 각각 적절한 위치에 들어간다. 특히 목차와 실제 제목 앵커의 연결, 최근본글 데이터 표시 로직 등이 템플릿에서 처리된다.

이런 패턴들이 정말 체류율을 높일까?

업계 데이터를 보면 답은 "예"다. 읽기진행바를 넣은 뉴스·블로그 사이트들은 대체로 평균 읽기 시간이 10~20% 증가한다. 특히 5분 이상의 긴 글에서 효과가 크다. 사용자가 "아직 30%밖에 안 읽었네"라는 걸 인식하는 것만으로 완주 확률이 올라간다.

목차도 마찬가지. 기술 문서나 하우투 글에서 목차가 있는 페이지는 없는 페이지보다 평균 체류 시간이 15% 정도 길다. 왜냐하면 사용자가 "이 글에 내가 원하는 정보가 있다"고 빠르게 판단할 수 있기 때문이다.

관련글과 최근본글은 더 미묘하다. 직접적으로 현재 글의 체류율을 높이지는 않지만, 사용자가 글을 다 읽은 후 이탈하는 걸 막는다. 즉 "이 글 다음에 뭘 할까?"라는 의사결정 시간을 줄이는 것. 이게 결국 총 방문시간과 페이지뷰로 이어진다.

회고

이 작업에서 배운 가장 큰 점은 "기능"과 "경험"의 차이다. 읽기진행바, 목차, 관련글, 최근본글을 각각 따로 떼어놓으면 그냥 4개의 UI 요소일 뿐이다. 하지만 이들이 읽기라는 여정 전체에 어떻게 작용하는지를 생각하면, 각각이 다음 단계를 자연스럽게 이어주는 흐름이 된다. "시작(진행바로 동기부여) → 중간(목차로 네비게이션) → 끝(관련글·최근본글로 다음 이동)"이라는 내러티브가 있다는 뜻이다.

또 하나 중요했던 부분은 과도함을 피하는 것. 진행바, 목차, 관련글, 최근본글을 한 번에 다 추가했지만, 화면이 너무 복잡해지면 오히려 이탈이 늘 수 있다. 아마 모바일 버전과 데스크톱 버전에서 노출 방식을 다르게 했을 거고, 목차는 화면 크기에 따라 토글로 감춰진 상태에서 시작했을 수도 있다. 기능의 우선순위를 명확히 하되, UI 계층을 너무 복잡하게 만들지 않으려는 균형이 필요하다.

마지막으로, 이런 개선들은 A/B 테스트 없이는 정말 효과가 있는지 알 수 없다는 교훈도 얻었다. 데이터가 가설을 증명해야 한다.

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

• 모니터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →

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