monit
내 소비의 거품을 빼다. 지출을 기록할 때 '금액'뿐 아니라 '소비 당시의 상황'을 함께 남기고, 시간이 지난 후 그 소비의 효용을 다시 입력받아 소비의 맥락과 만족도를 분석 리포트로 보여주는 가계부 서비스.
주요 기여
하이브리드 앱의 상태·캐시·렌더링 문제를 구조로 해결하며, 0→1 세팅부터 배포·QA까지 5개 도메인을 담당했습니다.
네이티브 WebView로 래핑된 Next.js 웹앱에서 카카오/Apple 로그인, 캘린더, 리포트, 온보딩 등 다양한 도메인을 일관된 아키텍처로 구현해야 했습니다. 브릿지 타이밍 이슈로 로그인 실패, 탈퇴 후 재로그인 시 이전 캐시 잔존, 바텀시트 리스트 렌더링 jank 등 하이브리드 특유의 문제들이 있었습니다.
지출 기록 → 캘린더 조회 → 분석 리포트 → 만족도 회고까지 이어지는 완결된 가계부 경험을 WebView 하이브리드 앱으로 제공하는 것.
FSD 아키텍처로 도메인 경계를 설계하고, vanilla-extract 기반 디자인 토큰 시스템과 Storybook 스토리 42개로 UI를 문서화했습니다. 캘린더는 월간/주간/바텀시트 3가지 variant를 react-swipeable + transform 기반 가상 캐러셀로 통합했고, 리포트 도메인은 4개 라우트 + 월간·주간 분기 구조로 61개 파일/약 3,700줄 규모를 단독 설계·구현했습니다. 인증은 네이티브 브릿지 기반 카카오/Apple 로그인 + Promise locking 패턴으로 동시 401 리프레시 직렬화를 구현했습니다.
1) 브릿지 미연결 상태에서 로그인 버튼 무반응, 2) 탈퇴 후 재로그인 시 이전 계정 캐시 잔존, 3) 리포트 감정 카드 breakdown 집계 오표시, 4) QA fix 30+건이 '상태 초기화 타이밍'과 '쿼리 무효화 누락' 두 카테고리에 집중됨.
브릿지 ready 상태 추적 + 재시도 로직으로 레이스 컨디션 해소. 리프레시 토큰을 네이티브 스토리지 단일 소스로 통일하고, 로그아웃/탈퇴 시 clearAllUserStorage + QueryClient.clear() 단일 파이프라인 구축. 쿼리 키 팩토리를 도입해 무효화 누락을 구조적으로 해소. shimmer primitive를 공용화하고 스켈레톤 카드 수를 이전 응답 기준 캐시 매칭하여 CLS 최소화.
QA fix 30+건이 거의 전부 두 카테고리(상태 초기화 타이밍, 쿼리 무효화 누락)에 속한다는 걸 발견한 후, 프로젝트 초기에 쿼리 키 전략을 먼저 설계하는 습관이 생겼습니다. 비즈니스 로직 버그는 '숫자가 틀린 게 아니라 숫자의 의미가 틀린 것'이라는 점도 체감했습니다.