포스트 페이지를 3컬럼으로 개선, 재방문 유도 위젯 추가

포스트 페이지에 머물러 있는 사용자들이 "다음에 무엇을 읽을까" 고민하게 만드는 게 목표였다. 블로그는 단순히 한 글을 전달하는 공간이 아니라, 사용자의 탐색을 자연스럽게 이어나가는 생태계여야 한다고 생각했기 때문이다. 기존 포스트 페이지는 콘텐츠에만 집중되어 있어서, 글을 다 읽은 후의 사용자 경험이 다소 끊어지는 느낌이 있었다.

3컬럼 레이아웃으로 정보 계층 재구성

가장 먼저 한 작업은 포스트 페이지의 레이아웃을 단순한 싱글컬럼에서 3컬럼(메인 콘텐츠 + 좌측 보조 + 우측 보조) 구조로 변경하는 것이었다. 이건 단순한 시각적 개선이 아니라, 사용자의 시선과 관심을 어디로 이끌지를 다시 설계하는 과정이었다.

좌측 사이드바에는 ReadingProgress(읽기 진행률)와 TableOfContents(목차)를 배치했다. 특히 긴 글을 읽을 때 "나 지금 어디까지 읽었나" "다음 섹션이 뭐더라" 하는 불편함이 있었는데, 목차를 항상 보이도록 고정하면 사용자가 원하는 부분으로 빠르게 점프할 수 있다. 진행률 바는 심리적으로도 작용한다—완성도를 시각적으로 보여주면 "끝까지 읽고 싶다"는 동기가 생기기도 한다.

우측 사이드바에는 RecentlyViewed(최근 본 글)와 RelatedPosts(관련 글) 두 위젯을 배치했다. 역할은 명확하다. 현재 글을 다 읽은 사용자에게 "방금 본 다른 글들" 또는 "비슷한 주제의 글들"을 즉시 제시함으로써, 페이지를 떠나기 전에 다음 클릭을 자극하는 것이다.

db.ts의 변화—사용자 추적의 시작

이 작업의 숨은 부분은 db.ts의 변경이다. RecentlyViewed가 작동하려면 사용자가 어떤 글을 읽었는지 추적해야 한다. 이건 단순한 프론트엔드 UI 개선이 아니라, 데이터 수집 구조까지 손대는 작업이었다.

이 지점에서 몇 가지를 고민했다:

• 로컬 스토리지 vs. 백엔드 기록: 간단하게는 브라우저 로컬 스토리지에만 저장할 수도 있지만, 여러 기기에서 일관된 경험을 원하면 백엔드 DB에 기록해야 한다.
• 수집 범위: 어떤 정보를 몇 개까지 보관할지. 너무 많으면 저장소와 조회 비용이 늘어나고, 너무 적으면 의미 있는 추천이 어렵다.
• 개인정보 정책: 사용자 행동을 추적하는 것이므로, 서비스 약관에 명시하고 필요시 동의를 받아야 한다는 점도 중요했다.

왜 이 순서로, 그리고 이 조합으로?

팀장으로서 의사결정할 때는 ROI(투자 대비 효과)와 난이도의 균형을 본다. 3컬럼 레이아웃은 구조 변경으로 곧바로 가시적 효과가 있다. 하지만 진정한 재방문 유도는 추천(RelatedPosts)과 이력(RecentlyViewed) 같은 동적 콘텐츠가 있을 때다.

그래서 우선순위는:

1. 레이아웃 개선 (낮은 난이도, 즉각적 효과)
2. 정적 위젯 추가 (TableOfContents, ReadingProgress)
3. 동적 위젯 추가 (이력 수집 + RelatedPosts 로직)

이렇게 점진적으로 올려가는 게 팀 관점에서도 좋다. 레이아웃 변경 후 몇 주간 사용자 반응을 보고, 그다음 이력 추적을 추가할지 결정할 수도 있기 때문이다.

고려했던 대안들과 트레이드오프

4컬럼은 안 했나? 너무 많은 정보가 한 화면에 몰린다. 특히 모바일에서는 비참할 텐데, 반응형을 따로 관리해야 하는 복잡도가 늘어난다.

2컬럼은? 더 간단하지만, 좌측에 목차, 우측에 추천을 모두 넣기는 공간이 부족했다.

싱글컬럼에 플로팅 위젯? 가능하지만 사용자가 스크롤할 때 방해될 가능성이 높다. 체계적인 레이아웃이 더 전문적이다.

다음에 검증해야 할 것

이 변경이 실제로 "재방문"을 늘렸는지는 측정이 필요하다. 분석 로그를 보면 위젯 클릭율(각 추천 링크를 몇 %의 사용자가 클릭했나), 평균 체류 시간(페이지에 머문 시간이 늘었나), 세션 길이(한 번의 방문에서 평균 몇 개 글을 읽는가) 같은 지표들이 움직였는지 확인할 수 있다.

모바일 반응형 처리도 중요하다. 3컬럼이 데스크톱에서는 자연스럽지만, 모바일에서는 다시 고민해야 한다. 스택형으로 변환할지, 탭으로 전환할지.

마지막으로, RecentlyViewed와 RelatedPosts가 실제로 클릭되는지도 지켜봐야 한다. 위젯이 있어도 사용자가 무시하면 의미가 없기 때문이다. 데이터를 보면서 "이 위치가 최적인가", "글 수를 줄여야 하나" 같은 조정이 지속적으로 필요할 것 같다.

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

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

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