포스트 사용자 체류를 높인 새 레이아웃

블로그나 매거진 같은 콘텐츠 플랫폼을 운영하다 보면, 가장 중요한 지표 중 하나가 사용자 체류율이다. 글이 좋아도, 사용자가 한 포스트를 읽고 그대로 떠나버리면 비즈니스 관점에서 아쉽다. 이번에는 포스트 페이지의 구조와 UI를 개편해서 사용자를 다음 콘텐츠로 자연스럽게 유도하는 작업을 진행했다.

산만했던 사용자 여정

이전에는 포스트 페이지에 여러 보조 UI 요소들이 있었지만, 일관된 구조가 부족했다. 목차, 읽는 진도 표시, 최근 본 글, 관련 글 같은 위젯들이 제각기 배치되어 있어서 사용자 입장에서는 어디를 봐야 할지 명확하지 않았다.

특히 글을 다 읽은 후 "다음으로 뭘 할까?"라는 선택지를 발견하기 어려웠다. 그 결과 자연스럽게 페이지를 떠나거나, 뒤로가기를 눌러버리는 사용자가 많았다. 또한 각 위젯이 서로 다른 크기와 스타일로 구현되어 있어서, 전체 페이지가 시각적으로 일관성이 없었다. 마치 여러 디자인이 쌓인 것 같은 느낌을 주었다.

체류를 위한 4가지 위젯

이번 개편에서 다음 4개 컴포넌트를 핵심으로 삼았다:

1. ReadingProgress — 사용자가 현재 글을 어느 정도 읽었는지를 시각적으로 표시한다. "아직 반 정도 남았네" 또는 "거의 다 읽었다"는 심리적 신호가 계속 읽기로 이어진다.

2. TableOfContents — 긴 글의 경우, 목차를 통해 사용자가 관심 있는 섹션으로 빠르게 이동할 수 있다. 전체를 읽지 않아도 되겠다는 판단이 생기면, 오히려 페이지 체류 시간이 늘어난다.

3. RecentlyViewed — 사용자가 최근에 본 다른 글들의 목록을 제시한다. 방금 읽은 글과 맥락이 비슷한 이전 글을 추천받으면, 새로운 탭을 열지 않고도 다음 콘텐츠로 자연스럽게 넘어간다.

4. RelatedPosts — 현재 포스트와 주제나 태그가 관련된 다른 글들을 명시적으로 보여준다. 이건 가장 직접적인 다음 액션 유도다.

각 위젯이 개별로는 작아 보이지만, 모두 같은 목표를 향한다: 사용자가 이 페이지에서 다음 콘텐츠를 발견하도록 돕는 것.

3-column 중앙 정렬 구조

4개 위젯이 실제 효과를 내려면, 시각적으로 눈에 띄고 논리적으로 배치되어야 한다. 그래서 Post 레이아웃을 3-column 중앙 정렬 구조로 개편했다:

이 구조는 웹 매거진이나 미디엄 같은 성숙한 플랫폼에서 널리 쓰이는 방식이다. 가운데는 본문에 집중하게 하고, 양옆에 보조 정보와 다음 액션을 배치한다. 시각적 위계도 명확해진다.

데이터 계층의 중요성

UI 개편만으로는 부족했다. db.ts를 손댄 이유는 이 위젯들이 필요로 하는 데이터를 효율적으로 가져와야 하기 때문이다:

• 최근 본 글 조회: RecentlyViewed 위젯을 위해 사용자의 열람 이력을 빠르게 조회해야 한다.
• 관련 글 추출: RelatedPosts는 현재 글의 태그나 카테고리를 기반으로 유사 글을 찾아야 한다.
• 성능 최적화: N+1 쿼리 같은 성능 문제가 없어야 한다.

아무리 좋은 UI 위젯도, 페이지가 느리면 사용자는 그 전에 떠난다. "체류율 개선"이라는 목표는 디자인만 아니라 데이터 계층과 함께 달성된다.

팀 리딩 관점에서의 고민

이 작업을 진행하면서 팀과 함께 고민한 부분들:

일관성 vs 유연성 — 4개 위젯을 같은 3-column 레이아웃에 맞추려다 보니, 각 위젯의 고유한 특성을 조금 포기해야 했다. 하지만 사용자 경험 관점에서는 "뭔가 통일되고 세련된" 페이지가 "뭔가 많지만 산만한" 페이지보다 훨씬 효과적이다.

성능 vs 기능 — 단순하게 UI만 가져가면 빨랐을 텐데, 그러면 데이터가 없어서 위젯이 제 역할을 못 한다. 반대로 복잡한 쿼리를 다 넣으면 유지보수 부담이 크다. 적절한 선에서 타협하는 게 핵심이었다.

점진적 vs 일괄 출시 — 6개 파일을 동시에 변경하는 거라, 버그나 엣지 케이스가 있을 수 있다. 한두 위젯씩 먼저 출시하고 피드백을 받는 게 더 안전할 수도 있었지만, 전체 레이아웃이 통합되어야 효과가 나므로 일괄 출시를 선택했다.

시스템 설계의 교훈

사용자 체류율을 높이려면 "콘텐츠가 좋아" 만으로는 부족하다. 페이지 아키텍처 수준에서의 설계가 필요하다는 걸 다시 한번 확인했다.

개별 위젯(ReadingProgress, RecentlyViewed 등)은 각각 작은 기능처럼 보인다. 하지만 이들을 일관된 구조 안에 배치하고, 데이터 계층에서 효율적으로 지원할 때 비로소 시너지가 생긴다.

또한 프론트엔드 컴포넌트 개편만으로는 끝나지 않는다. 데이터 쿼리, 캐싱 전략, 성능 최적화까지 함께 고려해야 진정한 사용자 경험 개선이 된다.

이제 남은 건 이 개편이 실제 지표에 미치는 영향을 확인하는 일. 체류율과 클릭율 데이터를 보면서 각 위젯별 세부 최적화 방향도 함께 찾을 거다.

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

• 모니터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 사무의자 쿠팡에서 보기 →

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