아이와 부모가 함께 쓰는 용돈 관리 앱 '우리집 용돈' 개발기

아이들이 집안일을 하고 받는 용돈을 어떻게 하면 쉽게 기록하고 관리할 수 있을까 고민하다가 직접 앱을 만들어 보기로 했습니다. 기존에도 메모장이나 수첩에 대충 적고 있었는데, 매번 금액을 더하고 아이별로 정리하는 게 은근히 번거롭더라고요.

처음에는 HTML과 React로 간단한 프로토타입을 만들면서 디자인 방향을 잡아갔고, 그다음에 React Native와 Expo로 실제 모바일 앱으로 옮겼습니다. 이 글에서는 그 과정에서 고민했던 점들과 결정했던 내용들을 정리해 봤습니다.

왜 만들었나 — 작은 불편함에서 시작

저희 집에는 두 아이(준이와 수아)가 있습니다. 평소에 설거지, 방 청소, 분리수거 등 집안일을 하면 용돈을 주고 있는데, 문제는 이 기록을 꾸준히 남기는 게 생각보다 쉽지 않다는 거였어요. "오늘 설거지 했으니 2,000원", "이번 주 분리수거 1,000원" 하면서 매번 수첩에 적는 게 여간 번거로운 게 아니었죠.

게다가 아이가 두 명이다 보니 각자 한 일과 받은 금액을 따로 관리해야 했고, 이번 달에 얼마나 모았는지도 한눈에 보고 싶었습니다. 시중에类似的 앱도 있긴 한데, 우리 집 상황에 딱 맞는 앱이 없어서 직접 만들기로 했습니다.

세 가지 디자인 방향 탐색

본격적인 개발에 앞서 HTML + React (via Babel)로 빠르게 프로토타입을 만들어 세 가지 디자인 방향을 탐색했습니다. 하나의 앱 엔진 위에 스타일만 바꿔서 세 가지 방향을 동시에 비교할 수 있게 구성했어요.

A. 깔끔 카드 (HeroCard)

화이트 카드 위에 깔끔하게 정보를 배치하는 심플한 디자인입니다. 하단에 코인 마스코트가 살짝 보이고, 흰색 배경에 미묘한 그림자만 넣어서 전체적으로 모던하고 단정한 느낌을 줍니다. 정보 밀도가 낮아 가독성이 좋지만, 아이들이 좋아할 만한 "재미" 요소가 부족해 보였어요.

B. 컬러풀 저금통 (FloodHeader) ← 최종 채택

아이별 컬러(준이=블루, 수아=핑크)의 그라디언트가 헤더 전체를 채우는 디자인입니다. 아이가 탭을 전환하면 배경색이 부드럽게 바뀌고, 우측에는 커다란 코인 마스코트가 자리 잡고 있어서 아이들이 직관적으로 "내 화면"임을 인식할 수 있어요. 색상이 강렬해서 아이들의 시선을 사로잡고, "저금통"이라는 컨셉과도 잘 맞았습니다. 이 방향을 최종 채택했습니다.

C. 용돈 통장 (PassbookHero)

은행 통장을 컨셉으로 한 디자인입니다. 상단에 도장 스탬프, 점선 구분선, 베이지색 배경이 통장 느낌을 냅니다. 감성적인 접근이지만, 모바일 앱으로는 다소 클래식하고 정보 전달 효율이 떨어져서 탈락시켰습니다.

기술 스택과 앱 구조

프로토타입은 HTML + 순수 React로 만들었지만, 실제 앱은 React Native + Expo로 네이티브 모바일 앱으로 개발했습니다. Expo의 Managed workflow를 사용해서 별도의 네이티브 설정 없이 빠르게 개발하고 APK 빌드까지 할 수 있었어요.

앱 아키텍처는 단일 스크린에 여러 섹션이 스크롤되는 형태입니다. 상태 관리는 useState + useCallback만으로 충분했고, 복잡한 상태 관리 라이브러리는 도입하지 않았습니다. 데이터 흐름은 단방향으로, Entry 배열이 변경되면 모든 파생 데이터(총합, 월별 통계 등)가 순수 함수로 다시 계산됩니다.

주요 기능 살펴보기

앱의 핵심은 "기록의 간편함"입니다. 기록하기 귀찮으면 앱을 안 쓰게 되니까요. 그래서 프리셋 칩을 탭 한 번으로 오늘의 집안일을 바로 기록할 수 있게 설계했습니다.

• 프리셋 원클릭 기록: 설거지, 화장실 청소, 분리수거, 방 청소, 빨래 개기 등 자주 하는 집안일을 칩으로 만들어두고 탭 한 번으로 바로 기록됩니다. 기록되면 해당 행이 플래시 애니메이션과 함께 추가돼서 즉각적인 피드백을 줍니다.
• 직접 입력: 프리셋에 없는 집안일은 "+ 직접 입력" 버튼으로 하단 시트에서 이름과 금액을 직접 입력할 수 있습니다.
• 아이별 탭 전환: 상단의 세그먼트 컨트롤로 준이/수아를 전환하면 모든 데이터와 컬러 테마가 함께 바뀝니다.
• 날짜별 히스토리: 기록된 내역이 날짜별로 그룹화되어 표시되고, "정리" 모드에서는 삭제할 수 있습니다.
• 6개월 통계: 막대 차트로 지난 6개월간의 월별 용돈 추이를 보여줍니다. 리스트 뷰로 전환할 수도 있어요.

특히 오늘 한 집안일 건수가 헤더 우측에 "🔥 오늘 N개"로 표시되어서, 아이들이 스스로 "오늘은 아직 설거지를 안 했네" 하고 인식할 수 있는 점이 만족스러웠습니다.

개발하면서 배운 점

작은 프로젝트지만 몇 가지 인상 깊었던 경험을 꼽아보면요.

첫째, 프로토타이핑의 중요성입니다. HTML + React로 만든 프로토타입 덕분에 디자인 방향을 코드 레벨에서 빠르게 비교할 수 있었어요. 실제로 세 가지 방향을 모두 만들어보니 "이 중에 이게 가장 낫다"라는 판단이 훨씬 명확해지더라고요. 디자인 툴로 목업을 그리는 것과 실제로 동작하는 코드로 비교하는 건 차이가 큽니다.

둘째, CSS 토큰 시스템입니다. 프로토타입 단계에서 tokens.css로 색상, 폰트, 간격, 그림자 등을 토큰화해 두었는데, React Native로 옮길 때도 이 값들을 그대로 매핑하니까 일관성이 유지됐어요. Pretendard 폰트는 iOS와 안드로이드 모두에서 한글이 아주 예쁘게 나와서 만족스러웠습니다.

셋째, 모바일 앱과 웹앱의 차이입니다. 프로토타입이 아무리 잘 동작해도 SafeArea 처리, 키보드 오버레이, 네이티브 스크롤 물리 등 모바일에서만 신경 써야 할 부분이 많더라고요. 특히 하단 시트(모달)가 키보드와 겹치는 문제는 생각보다 까다로웠습니다.

앞으로 계획

현재는 v1.0.1까지 APK를 빌드해서 실제로 사용 중입니다. 앞으로 생각하고 있는 개선 사항은요.

1. 데이터 백업/복원 — 파일 내보내기/가져오기 기능은 이미 구현했는데, 클라우드 동기화까지 고민 중입니다.
2. 용돈 지급 기능 — 현재는 "기록만" 하는 앱인데, 실제로 용돈을 지급하고 차감하는 정산 흐름을 추가하려고 합니다.
3. 프리셋 커스터마이징 — 부모가 직접 집안일 종류와 금액을 추가/수정할 수 있게.
4. iOS 빌드 — 현재는 안드로이드 APK만 있는데, TestFlight를 통해 iOS도 배포할 계획입니다.
5. 위젯 — 홈 화면 위젯으로 오늘 할 집안일과 현재 용돈 잔액을 표시.