SYDESYDE
SYDESYDE
  • 피드
  • 쇼케이스
  • 블로그
  • 모임
SYDESYDE© 2026 SYDE. All rights reserved.
SYDE 소개문의하기
Kakao
SYDE 오픈채팅
Instagram
Instagram
Threads
Threads
커뮤니티 가이드라인협업문의이용약관개인정보처리방침
커뮤니티 가이드라인협업문의이용약관개인정보처리방침

© 2026 SYDE. All rights reserved.

Flutter로 나만의 가계부 앱 만들기 1 — 로컬 우선, 그리고 부부 공동 가계부까지

Flutter로 나만의 가계부 앱 만들기 1 — 로컬 우선, 그리고 부부 공동 가계부까지

T톡떙· 1시간 전· TIL
목차
  • 기술 스택
  • 화면 둘러보기
  • 내역
  • 통계
  • 예산
  • 계정(자산)
  • 입력과 반복 거래
  • 다크 모드
  • 설계하면서 신경 쓴 것
  • 삽질 기록
  • 숫자로 보면
  • 다음 계획

목차

  • 기술 스택
  • 화면 둘러보기
  • 내역
  • 통계
  • 예산
  • 계정(자산)
  • 입력과 반복 거래
  • 다크 모드
  • 설계하면서 신경 쓴 것
  • 삽질 기록
  • 숫자로 보면
  • 다음 계획

평소에 쓰던 편한가계부의 화면 흐름은 좋은데, 몇 가지 아쉬운 점이 있어서 직접 만들어 보기로 했다.

처음부터 화면을 새로 설계하기보다는, 익숙한 편한가계부의 구성(하단 탭, 내역 탭, 입력 화면 흐름)을 그대로 따라 카피캣으로 먼저 구현하는 데 집중했다. 기능과 데이터 구조를 먼저 탄탄하게 만들어 두고, 디자인은 추후에 나만의 스타일로 새롭게 구현할 예정이다. (아이콘·로고 같은 원본 앱의 리소스는 쓰지 않고 머티리얼 아이콘과 자체 색으로 구성했다.)

목표는 단순하다.

  • 가계부는 민감한 개인정보니까 기본은 내 폰 안에만 저장한다.

  • 나중에 와이프와 같이 쓰는 공동 가계부는 구독 기능으로 붙인다.

지금은 무료 버전(혼자 쓰는 로컬 가계부)이 완성됐고, 공동 가계부는 서버와 동기화 엔진까지 만들어 둔 상태다.

기술 스택

영역

사용한 것

앱

Flutter (안드로이드·iOS)

상태 관리

Riverpod 3

로컬 DB

SQLite + drift

화면 이동

go_router

차트

fl_chart

서버(공동 가계부용)

Supabase (Postgres + RLS)

빌드

GitHub Actions

화면 둘러보기

내역

날짜별로 묶인 내역 목록. 위쪽에 이 달의 수입·지출·합계가 보이고, 일별·달력·월별·총액·상세 탭으로 바꿔 볼 수 있다.

통계

카테고리별 비율과 함께 최근 6개월 추이를 막대로 보여 주고, 지난달보다 얼마나 늘었는지(줄었는지)도 알려 준다.

예산

이 달 전체 예산과 카테고리별 예산. 남은 금액으로 하루 평균 써도 되는 금액을 계산해 준다. 남은 예산을 다음 달로 넘기는 이월 기능도 있다.

계정(자산)

현금·계좌·카드를 모아 보고, 카드는 결제일과 이용 기간으로 다음 결제 예정액을 계산한다. 결제 계좌를 연결해 두면 결제일에 계좌 → 카드 이체 내역을 자동으로 만들어 준다.

입력과 반복 거래

계산기 키패드로 금액을 넣고, 세부 카테고리·사진(영수증)·즐겨찾기를 쓸 수 있다. 월세나 통신비 같은 고정 지출은 반복으로 한 번만 등록하면 앱을 열 때마다 알아서 채워진다.

다크 모드

이 밖에 앱 잠금(비밀번호·지문), 백업 파일 내보내기·복원, 기기 안 자동 백업, 엑셀용 CSV 내보내기도 넣었다.

설계하면서 신경 쓴 것

1. 로컬 우선(local-first) 모든 데이터는 폰 안의 SQLite에 있다. 서버가 없으니 개인정보 규제 부담도, 유출될 서버도, 서버 비용도 없다. 대신 앱을 지우면 데이터도 사라지기 때문에 백업 파일과 자동 백업을 따로 만들었다.

2. DB 마이그레이션은 처음부터 테스트로 앱을 업데이트해도 데이터가 사라지면 안 된다. drift의 스키마 스냅샷 기능으로 v1 → v4 어떤 버전에서 올라와도 데이터가 그대로 남는지 매번 테스트하고 있다.

3. 공동 가계부는 "나중에 고친 쪽이 이긴다" 부부가 각자 폰에서 따로 입력해도 합쳐지도록 모든 데이터에 UUID·수정 시각·삭제 표시를 붙였다. 반복 거래처럼 두 폰이 각자 자동으로 만드는 데이터는 같은 규칙이면 같은 ID가 나오게 해서 중복이 생기지 않는다. 서버(Supabase)는 "가계부 멤버이면서 주인의 구독이 살아 있을 때만" 읽고 쓸 수 있게 RLS로 막았다.

삽질 기록

  • 목록 배경이 반만 칠해지는 버그 — Flutter의 Ink 위젯은 목록 줄이 나중에 길어져도 배경을 다시 그리지 않는다. 줄마다 Material을 두는 방식으로 바꿔서 해결.

  • 수정 시각을 초 단위로 저장했더니 동기화가 어긋남 — 같은 초에 두 번 고치면 어느 쪽이 나중인지 알 수 없었다. 두 폰을 흉내 낸 테스트에서 발견해서 밀리초로 바꿨다.

  • Windows 보안 정책 — 릴리스 빌드에 필요한 실행 파일이 막혀서, 릴리스 APK는 GitHub Actions에서 만들도록 했다. 덕분에 push할 때마다 테스트와 빌드가 자동으로 돈다.

  • 서버 권한은 실제 DB로 검증 — Docker로 Postgres를 띄워 "남의 가계부를 볼 수 없는지", "구독이 끝나면 동기화가 멈추는지" 같은 시나리오 35개를 돌렸다. 여기서 로그인 안 한 사용자에게도 규칙이 적용되던 부분을 찾아 고쳤다.

숫자로 보면

  • 앱 테스트 98개, 서버 권한 시나리오 35개 통과

  • 커밋 20여 개, DB 스키마 v4

다음 계획

  • 디자인 새로 하기 — 지금 화면은 편한가계부 구성을 따라 만든 1차 버전이다. 기능이 자리 잡았으니 색·레이아웃·아이콘을 나만의 디자인으로 다시 만들 계획이다. 색은 한 파일(app_colors.dart)에 모아 두어서 바꾸기 쉽게 해 두었다.

  • Supabase에 연결해서 로그인 + 공동 가계부 화면(만들기·초대 코드·참여) 붙이기

  • 구독 결제 연결 (가격은 아직 고민 중)

  • 앱 아이콘 만들고 스토어 출시 준비


  • #가계부
  • #일인개발
  • #flutter
2
톡
톡떙프론트앤드로 사이드 프로젝트 열심히 하려고 하는 1인

댓글 0

My avatar