본문 바로가기
Product/구현

가계부 앱 만들기

by kynikosist 2026. 5. 24.

서론

결혼을 하고 가계부 작성의 필요성을 느꼈다

맞벌이다 보니 두 사람의 수입과 지출을 함께 관리해야했고,

그 수입 지출을 각자가 입력할 수 있어야 했다.

그래서 찾은 가계부 앱이 있었는데 이번달을 마지막으로 서비스를 종료된다고 한다
그래서 내 입맛에 맞는 가계부 웹앱을 직접 만들었다. 

문제

기존 가계부 앱들은 뭔가 하나씩 걸린다.

  • 입력이 귀찮다. 한 건씩 넣어야 하고, 화면 전환이 많다
  • 금융사, 카드사를 연결하여 자동 입력이 되지만 '네이버페이' 정도로 입력되는건 카테고리 분류가 애매하다
  • 증권계좌로 입금되는 금융 수입은 안잡힌다.(연결 해놨는데도 왜 안잡히는지 모르겠다)
  • 카테고리 분류가 내 생활 패턴이랑 안 맞다
  • 데이터를 내가 통제할 수 없다. 앱이 망하면 내역도 사라진다

그리고 나와 아내의 특성상 수입/지출이 발생하는 즉시 입력하는 습관이 없다

그래서 몰아서 입력하다보니 매우 귀찮고 시간이 오래걸린다.

해결

구글 시트를 DB로 쓴다

별도 데이터베이스를 안 쓴다.

구글 시트 하나에 transactions, budgets, categories 세 개 시트를 만들고, Google Sheets API로 읽고 쓴다.

장점이 명확하다. 데이터를 구글 시트에서 직접 열어볼 수 있다.

필터 걸고, 피벗 테이블 만들고, 원하는 대로 가공할 수 있다.

DB 비용도 0원이다.

한 번에 몰아서 입력

거래를 한 건씩 넣는 게 아니라 여러 건을 한 번에 입력한다.

구글 Vison API를 붙여서 토스 거래내역 캡쳐에서 텍스트를 추출하고 자동으로 입력한다.

위에서 언급한 '네이버페이'같은 항목은 사람이 수정한다

대시보드에서 한눈에

월별 수입/지출 잔액, 일별 지출 바 차트, 카테고리별 예산 소진율을 한 화면에 넣었다.

전월 대비 증감률도 자동으로 계산된다.

예산은 카테고리마다 월별로 설정할 수 있다.

식비 50만원, 교통 10만원 이런 식으로 잡아두면 대시보드에서 프로그레스 바로 현재 소진율이 보인다.

투자탭을 따로 만들어서 증권앱을 따로 켜지 않아도 현재 수익률을 파악할 수 있다.

종목, 평균단가는 수동으로 한번 입력하고 현재 시세는

한국 투자 증권 API를 활용하여 현재 시세로 수익률을 계산할 수 있게 만들었다.

증권사를 여러개 사용하고 있어서 한눈에 보기 좋다.

결론

웹 앱을 홈화면에 추가해서 사용하고 구글 시트를 DB로 사용하다보니 휴대폰을 바꾸거나 여러대 사용해도 설정을 그대로 쓸 수 있다.

아내와 나만 접속 가능하고 사용 중 추가하고 싶은 기능은 내가 원하는 퀄리티로 추가할 수 있다.

지난 번 만들었던 가족 사진 공유용 URL에 서브도메인을 활용하면 돼서 추가 비용도 없다.

 

웹 앱 화면

 

사용한 도구들

이 프로젝트를 직접 만들어보고 싶다면:

용도 도구 비고
프론트엔드 Next.js 16.2.6, React 19.2.4, TypeScript  
DB Google Sheets API  
차트 Recharts  
UI 컴포넌트 shadcn  
스타일링 Tailwind CSS v4  
보안 Cloudflare Zero Trust Google 인증(gmail로 로그인)
서버  Oracle A1 무료 인스턴스 VM.Standard.A1.Flex
OCPU 4, 메모리 24gb

'Product > 구현' 카테고리의 다른 글

$50로 바이브코딩  (0) 2026.06.02
셀카 한 장으로 화장품 성분 추천  (0) 2026.05.25
사주로 알아보는 성격  (0) 2026.05.21
알림 메모장  (0) 2026.05.04
사진 공유  (0) 2026.04.05