딱따고기 블로그.

가족공유 가계부 서비스 개발기 #1

가족단위로 함께쓰는 가계부 서비스 개발

·약 2분·조회 788·수정일: 2026년 10월 5일
가족공유 가계부 서비스 개발기 #1

생활비를 통합하여 사용하는 우리집 환경에 맞게끔, 구성원이 하나의 가계부를 같이 공유하며 사용할 가계부를 만들기로 했다.

시중에 가계부 앱은 넘쳐나지만, 막상 구성원간 공유가 자연스럽고, 구독현황/ 계약/ 경조사 까지 한 곳에서 관리할 수 있는 앱을 찾기 어려웠다. 그래서 직접 만들기로 했다.

기술 스택

  • Next.js

  • TypeScript

  • Tailwind CSS

  • NextAuth.js - JWT 세션

  • MySQL

  • PWA

왜 네이티브 앱이 아닌 웹(PWA)인가.

처음 기획할 때 가장 먼저 고민한 게 이 부분이었다.
IOS 앱 + 안드로이드 앱을 각각 만들면 가장 자연스럽겠지만, 현실적인 문제들이 있었다.

  1. Apple Developer 비용 - 연 $99. 가족끼리 사용하는 용도에는 부담스러운 금액이다.

  2. 유지보수 - 나와 아내는 iOS, 장모님은 안드로이드. 크로스플랫폼으로 개발하더라도, 두 마켓에 심사를 받고 업데이트를 진행하는건 여간 귀찮은일이 아니다.

그렇다고 웹 브라우저를 그대로 사용하기엔 불편함이 있다. 매번 브라우저를 열고 URL을 입력하거나, 즐겨찾기로 이동해야 하며. 푸시 알림도 받을 수 없다.

PWA(Progressive Web App)는 이 문제들을 해결할 수 있는 방안이었다.
웹으로 개발하되, 홈화면에 추가하여 앱처럼 동작시킬 수 있으며, 서비스 워커를 통해 푸시 알림도 받을 수 있다. (누가 돈을 쓰면 즉각적으로 알아야하므로..)

배포 환경

기존에 사용중이던 VPS 자원에 여유가 있어, 해당 서버에 배포하기로했다.
해당 서버에서 NPM(Nginx Proxy Manager)를 통해 프록시하여 제공하며, Let's Encrypt로 HTTP 인증서를 자동 갱신한다. NPM을 이용하면 프록시 관리 및 SSL 인증서 자동갱신을 매우 간단하게 할 수 있는데, 해당 내용은 추후에 다뤄보도록 하겠다.

구현한 기능

  1. 멀티테넌트 구조
    처음부터 우리가족만 쓰는게 아닌, 범용 서비스를 목표로 설계했다. 가정단위 키를 기준으로 필터링하여, 회원가입 시 가족 그룹을 생성하고 구성원을 초대하여 한 가정이 만들어지는 방식이다.

  2. 가계부 캘린더
    달력에 날짜별 수입/지출 을 한눈에 보기 쉽도록 구성하고, 날짜를 탭하면 해당 날짜의 거래 목록을 보여준다.
    MySQL에서 날짜를 가져올 때 datetime 타입이 JS에서 T00:00:00 형태로 오는 이슈가 있었다..

// MySQL datetime → YYYY-MM-DD 파싱
  const d = typeof t.date === 'string'
    ? t.date.split('T')[0]
    : new Date(t.date).toISOString().split('T')[0]
// MySQL datetime → YYYY-MM-DD 파싱
  const d = typeof t.date === 'string'
    ? t.date.split('T')[0]
    : new Date(t.date).toISOString().split('T')[0]

  1. 반복 거래
    매달 고정 지출(모임비, 저축 등)을 템플릿으로 등록하여 매일 오전 1시 cron을 통해 해당 날짜에 맞는 거래를 자동 생성한다.
    중복 방지를 위해 주간은 YEARWEEK(), 월간은 DATE_FORMAT('%Y-%m')으로 이미 생성된 건지 체크한다.

  2. OpenAI OCR 영수증 스캔
    카메라로 영수증을 촬영하면, OpenAI API를 통해 금액/날짜/품목을 인식해서 등록 폼에 자동으로 채워준다. ※영수증이 아닌 모바일 앱 결제 스크린샷도 가능

  3. 푸시 알림
    Web Push API + VAPID 키로 구독 결제일, 계약 만료, 가족 거래 등록시 알림을 푸시로 보낸다. iOS는 홈화면에 추가한 후에 푸시가 가능한데, 이 때문에 PWA 설치 유도 배너를 따로 만들었다.

  4. 고정지출 대시보드
    구독, 계약, 반복 거래를 모아, 이번달 고정비 합계를 홈화면에 표시했다. 숨만 쉬어도 나가는 고정 지출을 알 수 있어서 지금 우리 가정이 얼마나 심각한지 한눈에 알 수 있게되었다.

마치며

이 프로젝트는 기획부터 배포까지 AI와 함께 진행했다. 단순히 코드를 작성하는것 뿐 아니라, 설계 및 디버깅, 추가로 있었으면 하는 기능에 대한 기획에 대한 의견을 주고 받으며 빠르게 작업할 수 있었다.
이번 프로젝트를 통해 단순 기능 구현보다 사용자 경험과 사용성에 대한 부분에 더 비중을 두고 고민했다.
다음 글에서는 GitHub Actions를 활용한 CI/CD 구성 과정을 정리해볼 예정이다.

해당 프로젝트는 https://home.jikwang.net 에서 서비스중이며, 준비가 되는대로 코드를 깃허브에 공유할 예정이다.

공유
← 목록으로