개발 slecs

사용자 재방문 패턴을 한눈에, 리텐션 위젯 추가

목차

최근 도구 대시보드에 리텐션 위젯을 추가했다. 사용자가 특정 도구를 얼마나 자주 돌아와서 쓰는지, 어떤 패턴으로 반복 사용하는지를 한눈에 볼 수 있게 하려던 작업이다.

왜 리텐션 추적이 필요했나

도구 플랫폼 입장에서는 신규 가입도 중요하지만, 한번 가입한 사용자가 계속 돌아오는가가 비즈니스 지속성을 좌우한다. 신규 유입이 아무리 좋아도 리텐션이 낮으면 결국 성장 곡선이 평탄해진다. 그런데 지금까지는 "어떤 도구가 반복 사용되는가", "어느 유저 세그먼트가 자주 돌아오는가" 같은 질문에 정량적으로 답할 방법이 없었다.

그래서 "최근 도구" 개념의 위젯을 만들기로 했다. 각 도구마다 마지막 사용 시점, 사용 빈도, 연속 사용 여부 같은 데이터를 수집해서 마케팅·운영팀이 의사결정할 때 참고하게 하려는 의도였다. "이 도구는 일주일에 1회 이상 반복 사용되는가", "신가입 유저는 첫 일주일에 몇 번 돌아오는가" 같은 진단이 이제 가능해진다.

변경된 파일들의 역할

파일 주요 역할 이번 변경 의미
src/lib/tools.ts 도구 비즈니스 로직 리텐션 지표 계산 로직 추가 (최근 사용일, 사용 빈도 누적, 이탈 판정 등)
src/components/RecentTools.astro UI 컴포넌트 retention 데이터를 카드/리스트 형태로 시각화하는 위젯 자체
src/layouts/Tool.astro 페이지 레이아웃 구조 위젯이 들어갈 위치(메인 대시보드 상단? 사이드바?)와 우선순위 정의
public/styles.css 전역 스타일시트 1400px 가운데 정렬 규칙 + 위젯 카드 스타일(색상, 간격, 폰트 등)

1400px 가운데 레이아웃 선택의 배경

처음엔 "왜 하필 1400px?"라고 자문했다. 이건 정보 밀도와 가독성 사이의 오래된 트레이드오프였다.

  • 너무 넓으면(1600px+): 한 화면에 데이터가 과포화된다. 사용자 눈이 피곤해지고, 스캔 속도도 떨어진다. 특히 테이블이나 차트에서는 행 길이가 너무 길어져 다음 줄을 찾기 어렵다.
  • 너무 좁으면(1000px 이하): 컬럼이 강제로 줄어들거나, 테이블이 수평 스크롤을 요구한다. 모바일 대응은 좋지만, 데스크톱 사용자 입장에선 답답하다.
  • 1400px: 현대 모니터 해상도(보통 1920 또는 2560)에서 좌우 마진을 120~160px 남기면서도 충분한 콘텐츠 영역을 확보한다. 특히 도구 리스트, 리텐션 그래프, 메타데이터 테이블을 함께 표시할 때 최적이다.

가운데 정렬(margin: 0 auto)을 명시적으로 선언한 것도 의도가 있다. 대시보드는 "정보를 정확하게 전달"하는 공간이다. 콘텐츠가 화면 한쪽으로 쏠려 있으면 사용자 시선이 자연스럽게 흐르지 않는다. 한 행의 데이터가 시각적 중심에 있을 때, 스캔과 비교, 의사결정이 더 빨라진다.

이것이 팀 전체에 주는 영향

단순한 UI 추가처럼 보이지만, 실제로는 데이터 기반 의사결정으로 가는 경로를 하나 더 닦은 것이다:

  • 마케팅팀: "도구 X는 주당 반복 사용자가 60%인데, Y는 20%다. Y의 온보딩을 개선해야겠다"
  • PM: "신가입 후 7일 이내 리텐션이 30%에 그친다. 이 구간에 어떤 마찰이 있나?"
  • 운영팀: "고리텐션 도구와 저리텐션 도구의 UX 차이를 분석해서, 저리텐션 도구에 적용할 개선안을 도출하자"
  • 개발팀: "리텐션 개선이 우리의 분기 목표니까, 기능 우선순위를 거기에 맞추자"

또 하나 배운 점은 레이아웃도 기술 결정이 아니라 비즈니스 결정이라는 것. CSS를 건드린다고 해서 무작정 "가로 1200px" "가로 1600px" "꽉 찬다" 같이 정하면, 나중에 차트가 추가되고 테이블이 복잡해질 때마다 또 건드려야 한다. 처음부터 팀과 함께 "이 대시보드의 주요 정보는 뭐고, 한 화면에 어디까지 보여야 의사결정이 빨라질까?"라는 질문을 던지는 게 맞다.

다음: 데이터를 운영으로

리텐션 위젯이 정상 작동하니, 이제는 마케팅·운영팀과 함께 이 데이터를 어떻게 활용할지가 다음 스프린트의 화제다. "도구 X의 현재 리텐션 40% → 1개월 안에 55%"처럼 목표를 정하고, 개발팀의 우선순위를 거기에 맞추면, 팀 전체가 같은 지표를 보며 진행하게 된다. 그게 정말 효율적인 팀 운영이라고 본다.


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

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

댓글 0

첫 댓글 달아줘.