블로그 이탈 방지용 retention 위젯 4종 추가

포스트를 끝까지 읽은 사용자가 슬슬 빠져나가는 현상을 자주 봤다. 특히 긴 글일수록 마지막 문단을 지나면서 바로 탭을 닫거나 뒤로가기를 누르는 패턴이 반복됐다. 분석해보니 독자가 "다음에 뭘 읽을까"를 판단할 정보가 부족했던 게 원인이었다. 그래서 포스트 말미에 4가지 retention 위젯을 한 번에 추가하기로 결정했다.

추가한 4개 위젯과 역할

4개를 포스트 말미에 한 자리에 배치하면, 독자는 자연스럽게 다음 콘텐츠로 이동할 가능성이 높아진다. "더 읽을 게 있네"라는 판단을 빠르게 내리기 때문이다. 실제로 이건 단순한 UI 추가가 아니라 "사용자의 다음 행동을 어디로 유도할 것인가"를 설계하는 문제였다.

3-column center 레이아웃으로 시각적 구조 만들기

단순히 4개 위젯을 나열하면 투박해 보인다. Post.astro 레이아웃을 3-column center 구조로 개편한 이유가 바로 그거다. 중앙에 메인 콘텐츠(포스트 본문)를 집중시키고, 좌우 사이드에 부가 정보와 위젯들을 배치하는 방식이다. 이렇게 하면 화면을 효율적으로 활용하면서도 가독성을 유지할 수 있다.

더 중요한 건, 이 구조가 사용자에게 시각적 신호를 준다는 거다. "포스트를 마친 후 여기서 뭘 할지 고르세요"라는 메시지를 비언어적으로 전달한다. 산발적으로 흩어져 있는 것보다, 구조화된 배치가 사용자 이동을 훨씬 자연스럽게 유도한다. 레이아웃이라는 "틀"이 여러 기능을 하나의 경험으로 묶어주는 셈이다.

데이터베이스 쿼리 최적화로 성능 확보

db.ts를 수정한 이유는 간단하다. RecentlyViewed와 RelatedPosts는 매번 요청할 때마다 데이터를 조회해야 한다. 쿼리가 느리면 위젯 로드가 지연되고, 레이아웃 shift가 발생해 경험을 해친다. 또한 TableOfContents와 같은 정적 콘텐츠도 효율적으로 처리해야 한다.

필요한 쿼리들을 사전에 정의하고, 각 데이터 소스별로 캐싱 전략을 검토했다. 성능 저하 없이 기능을 활용하려면, 백엔드 쿼리 설계가 먼저 와야 한다는 원칙을 지켰다.

회고: 작은 기능, 큰 영향

이 작업을 진행하면서 느낀 점은 "작은 UX 개선이 사용자 흐름을 크게 바꾼다"는 것이다. 팀과 논의할 때 일부는 "코드 양이 적은데 굳이 지금 할 필요가 있나"라고 물었다. 하지만 우리가 본 데이터는 달랐다. 월간 이탈률이 높은 수준이었고, 특히 긴 글에서 심했다. 4개 위젯 추가로 그 수치를 낮출 수 있다면? 충분한 우선순위를 가진다. 이게 "작은 기능 vs 데이터 기반 의사결정"의 차이다.

또 한 가지, 여러 컴포넌트를 동시에 추가하면서 깨달은 건 "일관된 구조의 중요성"이다. 각 위젯이 독립적으로 보이지 않도록, Post 레이아웃 안에서 조화롭게 배치되는 게 핵심이었다. 그게 바로 3-column center 레이아웃의 역할이었다.

마지막으로, db.ts 수정은 선제적이었다. "데이터가 언제 필요해질까"를 먼저 생각하고 쿼리를 준비해둔 덕분에, 위젯들이 로드될 때 병목이 없었다. 프론트엔드 기능을 구현하기 전에 백엔드 기초를 다지는 습관이, 이런 순간에 빛난다.

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

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

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