재방문 사용자가 체감하는 진행 현황을 시각화하기

이번에 리테인션을 개선하기 위해 재방문 사용자를 감지하는 hook을 만들고, 사용자가 보유한 시간을 시각적으로 표시하는 배너 기능을 추가했다. 단순해 보이지만 이 작업을 통해 사용자 경험과 데이터 흐름을 어떻게 연결하는지 다시 생각해볼 수 있었다.

왜 재방문 감지가 필요했나

서비스의 지속성은 신규 사용자 유입만으로는 불가능하다. 한 번 방문했던 사용자가 다시 돌아오는 것, 즉 리테인션이 얼마나 중요한지는 이미 많은 데이터로 증명되어 있다. 문제는 사용자가 "이 서비스를 계속 써야 하는 이유"를 명확하게 느껴야 한다는 점이다.

내가 이번에 추가한 return-visitor hook은 간단한 논리지만 의도가 명확하다:

• 첫 방문 vs 재방문: 같은 서비스를 봐도 심리 상태가 다르다
• 맥락 전달: 재방문자에게는 자신의 이전 진행 현황을 즉시 보여줄 필요가 있다
• 참여도 강화: 내가 이 서비스에서 뭔가 축적하고 있다는 증거를 제공

이런 감정 신호는 코드로 직접 구현되지 않지만, UX 설계에는 핵심이다. 재방문자를 인식했다는 것 자체가 이미 "당신을 기억하고 있다"는 메시지를 전하는 것이다.

owned-seconds 배너의 역할

배너는 단순한 UI가 아니다. 사용자가 현재 보유한 시간(초 단위)을 실시간으로 표시함으로써:

1. 진행도 시각화: 숫자로 된 진행 현황을 한눈에 파악
2. 심리적 소유감: "내가 이 서비스에서 얼마나 많이 축적했는가"를 경험
3. 돌아올 이유: 그 숫자가 내일은 더 클 것이라는 기대감 유발

이런 기능은 게임에서 경험치나 보상 시스템이 하는 역할과 비슷하다. 사용자는 추상적인 "서비스 가치"보다 눈에 보이는 개인의 성장을 더 강하게 느낀다.

파일별 변경의 의미

특히 useMySeconds hook을 별도 모듈로 분리한 것이 중요하다. 나중에 여러 페이지에서 이 데이터가 필요할 때, 로직을 중복으로 작성하지 않고 hook 하나만 재사용할 수 있기 때문이다.

재방문 감지의 기술적 고려

hook 구조는 대대로 이렇게 흘러간다:

return-visitor 감지 (localStorage / sessionStorage / 쿠키)
↓
첫 방문인지 확인
↓
재방문이면 → owned-seconds 데이터 로드
↓
배너 표시 여부 결정
↓
useMySeconds hook 으로 숫자 업데이트

이 과정에서 주의할 점:

• 부팅 시점: 클라이언트 렌더링이 먼저 실행되므로, 서버/클라이언트 hydration 불일치 방지 필요
• 캐싱 전략: 사용자 데이터는 자주 변할 수 있으므로 적절한 캐시 유효성 판단 필요
• 성능: 매 방문마다 hook이 실행되는데, 불필요한 API 호출이나 렌더링 다시 하기를 방지

이 작업을 통해 배운 점

처음엔 "배너 하나 추가하는 거 아니야?"라고 생각했는데, 막상 구현하다 보니 여러 개념이 얽혀 있었다:

• 리테인션과 UX의 연결고리: 데이터 설계가 사용자의 행동에 직접 영향을 미친다
• 재사용 가능한 구조: 한 번 hook을 잘 설계하면, 나중에 다른 페이지나 기능에서도 쉽게 확장할 수 있다
• 스타일과 기능의 분리: 배너의 스타일(CSS)과 데이터 로직(hook)을 분리함으로써 유지보수가 훨씬 쉬워진다

팀원들과 코드리뷰를 하면서 "왜 이런 구조인가?"라는 질문들이 나왔고, 그 과정에서 내 의도도 더 명확하게 다듬을 수 있었다. 작은 기능 하나가 리테인션이라는 큰 목표와 어떻게 연결되는지 함께 이해할 수 있었던 좋은 경험이었다.

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

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

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