NEXT.JS / ZUSTAND / LOCALSTORAGE

Rabbit Tracker

모바일 앱에 갇힌 투두리스트 대신, 큰 화면에서 습관과 지표를 직접 관리하는 로컬 우선 기록 도구입니다.

프로젝트 바로가기
🐇 rabbit-tracker🔒 Auto-saving locally
2026JAN   FEB   MAR   APR   MAY
ESSENTIALS010203040506
Workout
Read a Book
Sleep Duration7.28.06.57.88.17.4

your private
daily matrix.

배경과 문제

Reddit에서 한 사용자가 모바일 중심 투두리스트가 자신에게 맞지 않았고, 휴대폰을 멀리하는 습관을 만들기 위해 Numbers로 직접 투두리스트를 만들었다는 글을 발견했습니다. 이 글은 추천 132개와 댓글 44개를 받았고, 댓글 대부분은 같은 템플릿을 받고 싶다는 반응이었습니다. 큰 화면에서 관리하는 기록 도구에 수요가 있다고 판단했고, Numbers에 익숙하지 않은 사람도 쉽게 사용할 수 있도록 웹 서비스로 만들었습니다.

핵심 가설

Numbers 템플릿에 반응한 사람들이 웹 서비스에도 관심을 보일 것이라는 가설을 확인하고 싶었습니다. 최소 기능의 MVP를 빠르게 출시해, 큰 화면에서 직접 구성하는 기록 도구가 실제 사용과 공유로 이어질지 살펴봤습니다. Ko-fi에 등록해 무료 관심을 넘어, 사용자가 이 도구에 비용을 지불할 의향이 있는지도 함께 확인하고자 했습니다.

내 역할

서비스 기획, 기록 데이터 구조 설계, UX/UI 디자인, 프론트엔드 개발, 배포와 Ko-fi 등록까지 전 과정을 직접 담당했습니다.

핵심 기능

  • 카테고리와 기록 항목 직접 생성
  • 완료·부분 완료·건너뜀 상태와 숫자 지표 기록
  • 월·연도 단위 기록 조회와 JSON 백업·복원

사용 기술과 선택 이유

  • Next.js + Vercel — 프론트엔드와 백엔드를 하나의 프레임워크에서 빠르게 개발하고, Vercel과 연동해 빠르게 배포하기 위해 선택
  • Zustand + persist — 하나의 브라우저 안에서 카테고리·기록 항목·일일 기록을 한곳에서 가볍게 관리하고, localStorage에 JSON 형태로 자동 저장·복원하기 위해 선택
  • localStorage — 기록을 저장하기 위해 로그인과 회원 관리 부담을 사용자에게 더하지 않고, 브라우저 안에서 바로 관리할 수 있도록 선택

회고

Rabbit Tracker는 약 두 시간 만에 만든 MVP입니다. 복잡한 백엔드 기술보다, 이미 바이럴된 템플릿을 웹 서비스로 만들었을 때도 수요가 이어지는지 확인하는 데 집중했습니다. 여러 서비스를 만들며 기술을 발전시키는 일만큼, 사용자가 실제로 원하는 기능을 고민하는 일이 중요하다고 느끼고 있었습니다.

Vercel Analytics 기준 하루 약 13명의 방문자가 있었고, Reddit에도 다시 홍보했지만 바이럴로 이어지지는 않았습니다. 원본 콘텐츠가 바이럴됐다는 사실만으로 웹 서비스까지 같은 반응을 얻을 수는 없었습니다. 기술적으로 완성도가 높더라도 사용되지 않으면 의미가 없다는 생각을, 수요와 유통을 함께 검증해야 한다는 과제로 더 구체화하게 된 프로젝트였습니다.