상세 페이지 retention 위젯으로 사용자 이탈 방지

상세 페이지에서 관련 항목과 최근 본 항목을 제안하는 위젯을 추가하고, 레이아웃을 가운데정렬로 확장했다. 사용자가 페이지를 떠나기 전에 다음 콘텐츠를 발견하게 유도하는 전략이다.

Retention 위젯의 필요성

사용자 여정을 보면 한 번의 상호작용으로 끝나는 경우가 많다. 상세 페이지를 읽고 나면 뒤로가기를 누르거나 다른 탭을 열어버린다. 이걸 막기 위해 "다음 탐색 포인트"를 명시적으로 제시하는 게 효과적이다. 두 가지 위젯으로 나눴다:

• RecentlyViewed: 사용자가 최근에 방문했던 항목들을 상기시켜서 연쇄 클릭 유도
• RelatedForms: 현재 페이지와 관련 있는 항목을 추천해서 자연스러운 탐색 경로 제공

이 둘은 콘텐츠 발견 단계에서 매우 다른 역할을 한다. 최근 본 것은 "이미 관심 있던 것"이고, 관련 항목은 "새로운 가능성"이다. 둘 다 있으면 사용자가 어느 쪽 심리로든 다음 액션을 취하기 쉬워진다.

컴포넌트 구조와 페이지 조합

Astro로 작성된 각 컴포넌트는 독립적이면서도 같은 섹션에 놓이는 방식이다. RecentlyViewed.astro와 RelatedForms.astro 모두 동일한 스타일 기준을 따르되, 각각의 데이터 소스는 분리했다:

카테고리별 상세 페이지([category]/[slug]/index.astro)에서 이 두 컴포넌트를 순차적으로 배치했다. 페이지 구조상 메인 콘텐츠 아래에 위젯 영역을 두면, 사용자가 읽기를 마칠 때쯤 자연스럽게 다음 단계를 제안받는다.

레이아웃 가운데정렬 확장

기존에는 콘텐츠 정렬이 부분적으로만 적용돼 있었다. 이번에 global.css를 손봐서 두 위젯과 그 주변 여백을 일관되게 가운데 정렬하도록 통일했다. 모바일과 데스크톱 모두에서 깔끔하게 보이려면 viewport 기준으로 max-width를 설정하고, 좌우 여백을 자동으로 맞춰야 한다.

이렇게 하면:
- 좁은 화면에서도 가독성 유지
- 와이드 화면에서는 과도하게 늘어나지 않음
- 모든 섹션이 동일한 규칙을 따르니까 브랜드 일관성도 생김

왜 이 순서로 개발했나

처음부터 "가운데정렬 CSS를 고쳐야겠다"라고 생각하진 않았다. 두 위젯을 페이지에 끼워 넣고 보니 정렬이 튀었고, 그제야 CSS를 손본 거다. 이건 흔한 UI 작업 흐름이다:

1. 컴포넌트를 먼저 완성한다
2. 레이아웃에 붙인다
3. 시각적 불일치를 발견한다
4. 전역 스타일을 손본다

팀원들과 리뷰할 때도 "이 변경이 다른 페이지에는 영향 없나?"를 먼저 확인했다. 전역 CSS를 수정했으니까. 다행히 global.css의 가운데정렬 규칙은 모든 페이지에서 쓰이는 패턴이었고, 이번 확장이 오히려 일관성을 높여줬다.

앞으로의 개선

이번 작업의 성과는 analytics에서 볼 것 같다. 상세 페이지의 bounce rate가 내려가고, 클릭 흐름이 좀 더 깊어질 거라고 기대한다. 만약 위젯이 별로 효과 없으면 배치를 바꿀 수도 있고, 다른 retention 전략(예: 댓글, 관련 키워드 태그 등)을 시도할 수도 있다. 이게 바로 점진적 개선의 가치다.

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

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

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