단골머니 2.0

1인치 • 2025.06 - 2025.08

단골머니 2.0은 기존 서비스의 피보팅으로 "바코드 머니"라는 프랜차이즈 할인 결제 서비스를 추가하고, 기존 서비스의 UI / UX 개선을 위한 대규모 리뉴얼 프로젝트였습니다. 프로젝트에서 지갑 / 충전 / 차감 / 내역 / 공유모임 전반의 UX 개선과 안정화를 수행했습니다. 특히 단골머니라는 현금으로 충전하는 가상재화를 관리하기 때문에 유저에게 보여지는 단골머니의 상태관리가 중요하여 페이지 간 머니상태 불일치가 발생하지 않도록 작업하였으며, React Query를 이용해 불필요한 네트워크 요청을 최소화하고, 상태 일관성을 확보했습니다. 비록 해당 프로젝트 완료 후 경영사정 악화로 정리해고 되었지만, 뚜렷한 성과를 만들어냈습니다.

주요 지표

도전 과제

• React Query 쿼리키 중복으로 인한 상태 불일치
• 간헐적인 안드로이드 결제 실패
• 결제/차감 플로우에서 발생했던 중복 요청 문제
• Android 15 Edge-to-Edge 디스플레이 대응
• 결제 웹뷰 보안 강화 필요
• 기존 코드베이스 마이그레이션

해결 방안

• QueryKey를 도메인별로 객체로 묶어 일정한 패턴으로 체계화
• 백엔드에서 제공하는 Webview url을 header에서 받아 리다이렉트하는 대신 body에 담아 명확하게 받아서 PG사 웹뷰 렌더링
• useRef를 활용해 리렌더링이 되더라도 함수가 재실행 되지 않도록 커스텀훅 생성
• SafeAreaInsets를 활용해 Android SDK 버전 기준 분기하여 UI 적응
• 앱스킴 및 화이트리스트 기반 웹뷰 보안 강화
• Text, Spacing, Tabs, Button 같은 재사용할수 있는 작은 단위의 컴포넌트들을 만들어 작업시간을 단축시켰습니다.

결과

• 단골머니 2.0 성공적인 서비스 런칭 (v3.0.0)
• 단골머니 상태 값 불일치 이슈 100% 해결
• Android 15 호환성 확보

기술 스택

링크