개인

Family Budget — 함께 기록하고 월말을 닫는 부부 가계부

개인 제품 · 기획·백엔드·데이터 모델·운영 자동화·반응형 UX 담당 (백엔드·운영 자동화는 비공개 운영 제품 범위)

2026-07-07 — present

매일의 수입·지출, 공동·개인 부담, 목적통장과 반복 계획을 월말 판단으로 연결하는 부부 가계부입니다. 공개 데모에서는 합성 데이터로 기존 내역 연결·실제 반영·재확인과 월말 경고를 브라우저 안에서 재현합니다.

실제 제품 화면으로 보는 사용자 여정

Family Budget

대시보드에서 한 달을 판단하고, 모바일에서 빠르게 기록하며, 예상 항목을 실제 원장에 반영하기 전 확인합니다. 모든 화면은 운영 UI와 같은 canonical UI package에 합성 데이터를 연결해 캡처했습니다.

한 달의 상태를 한 문장으로 — 예상 수입·지출·저축, 실제 기록, 목적통장과 자산 입력 상태를 합쳐 “마감 가능 / 확인 필요”와 다음 할 일을 보여줍니다. 합성 공개 데이터입니다. — **한 달의 상태를 한 문장으로**예상 수입·지출·저축, 실제 기록, 목적통장과 자산 입력 상태를 합쳐 “마감 가능 / 확인 필요”와 다음 할 일을 보여줍니다. 합성 공개 데이터입니다.

비개발 가족 구성원을 위한 빠른 입력 — 지출·수입, 날짜, 금액, 분류, 예산 처리, 결제 수단을 한 화면에서 기록하고 최근 내역을 즉시 확인합니다. — **비개발 가족 구성원을 위한 빠른 입력**지출·수입, 날짜, 금액, 분류, 예산 처리, 결제 수단을 한 화면에서 기록하고 최근 내역을 즉시 확인합니다.

같은 흐름의 모바일 UI — 공유 가계부의 핵심 입력 흐름을 390×844 viewport에서 캡처했습니다. 고정 하단 내비게이션과 입력 폼의 실제 모바일 배치를 함께 보여줍니다. — **같은 흐름의 모바일 UI**공유 가계부의 핵심 입력 흐름을 390×844 viewport에서 캡처했습니다. 고정 하단 내비게이션과 입력 폼의 실제 모바일 배치를 함께 보여줍니다.

계획을 실제 원장에 반영하기 전 확인 — 반복 규칙이 만든 예정 금액과 실제 날짜·금액을 확인한 뒤에만 원장에 반영합니다. 화면은 반영 전 0/3 상태이며 완료 조정을 과장해 주장하지 않습니다. — **계획을 실제 원장에 반영하기 전 확인**반복 규칙이 만든 예정 금액과 실제 날짜·금액을 확인한 뒤에만 원장에 반영합니다. 화면은 반영 전 0/3 상태이며 완료 조정을 과장해 주장하지 않습니다.

핵심 시스템 설계

비공개 운영 제품의 정본 전환

애플리케이션 정본

과거 시트는 읽기 전용 가져오기 경계로 분리

이전: 스프레드시트 중심 입력과 해석

계획 ≠ 실제

규칙 · occurrence · actual 분리

예상·실제·차이를 각각 추적

이전: 예상 규칙과 실제 입금·지출 혼동

중복·불확실성 차단

기존 내역 연결 · 월별 상태 분리

공개 합성 데모에서 reopen 후에도 원장 기록 보존

이전: 후보가 있어도 새 실제 내역을 만들 위험

운영 제품 경계와 공개 증거

가족 구성원과 승인형 도우미는 인증 API를 통해 운영 원장을 사용합니다. 과거 스프레드시트는 읽기 전용 가져오기 경계이며, 공개 데모는 합성 데이터로 화면 계약만 보여주는 보조 증거입니다.

가족 구성원과 승인형 도우미가 인증 API를 거쳐 운영 원장에 접근하고 과거 스프레드시트와 공개 데모를 별도 경계에 두는 운영 제품 아키텍처

대표 조정 흐름

월별 occurrence는 기존 실제 후보를 먼저 찾습니다. 사용자 확인 뒤 연결하거나 새로 만들고, 트랜잭션 쓰기와 read-back을 거쳐 예상·실제·차이를 갱신합니다.

occurrence와 기존 실제 후보 탐색, 사용자 확인, 연결 또는 생성, 트랜잭션 쓰기, read-back, 충돌과 reopen으로 이어지는 조정 흐름

Family Budget — 함께 기록하고 월말을 닫는 부부 가계부 project cover image

문제 해결 과정

계획 항목을 실제 거래처럼 다루면 수입·지출이 중복 집계되고 월별 차이를 설명할 수 없었습니다.

해결 과정

반복 규칙을 계획 정본, 월별 occurrence를 조정 단위, 거래·목적통장 입금을 실제 사실 정본으로 분리했습니다.

결과

대시보드는 예상·실제·차이를 독립 계산하며 “계획은 실제 거래가 아니다”라는 계약을 유지합니다.

실제 입금을 반영할 때 이미 원장에 있는 후보를 놓치면 같은 사건이 새 거래로 중복될 수 있었습니다.

해결 과정

이름·소유자·월로 occurrence와 후보를 찾고, 후보가 있으면 자동 생성 대신 연결을 먼저 제안하며 새 생성은 명시적 선택으로 제한했습니다.

결과

연결·새 생성·건너뜀·reopen 경로가 같은 조정 흐름 안에서 중복 없이 추적됩니다.

자동화가 쓰기 성공과 후속 조회 실패를 하나의 실패로 뭉개면 성공한 기록을 재시도해 중복을 만들 수 있었습니다.

해결 과정

비공개 운영 자동화에서는 변경 전 요청 본문을 승인받고 쓰기 후 원장·대시보드를 read-back하며 부분 성공·검증 실패를 구분합니다. 공개 데모는 이 서버·자동화 경로의 증거가 아니라 브라우저 로컬 조정 흐름의 증거입니다.

결과

확인되지 않은 재시도 대신 현재 사실을 다시 조회하고, 필요한 경우 occurrence를 reopen해 안전하게 복구합니다.

도메인 모델과 사용자 흐름

계획·occurrence·actual의 관계와 모바일 입력·데스크톱 검토 흐름을 공개 안전한 다이어그램으로 설명합니다.

**계획·occurrence·actual의 도메인 정본**반복 규칙은 계획, 월별 occurrence는 조정 단위, 거래·목적통장 입금은 실제 사실로 분리하며 대시보드는 예상·실제·차이를 파생합니다.

**모바일 입력과 데스크톱 검토, 공개 증거 분리**비개발 가족 구성원의 빠른 입력과 검토 사용자의 원장·조정 흐름은 같은 운영 정본을 사용하며, 합성 공개 데모는 화면 계약을 보여주는 보조 증거로만 둡니다.

운영 한계

공개 사례는 실제 금융값·계좌명·실명·운영 URL·인증 정보·인프라 식별자를 포함하지 않습니다. 화면의 구성원 표기는 합성 fixture입니다.

공개 데모는 단일 브라우저의 합성 데이터·로컬 저장만 사용합니다. 운영 백엔드·실제 데이터 규모·다중 사용자 협업·동시 서버 쓰기·기기 간 동기화를 증명하거나 보장하지 않습니다.

사용자 수·절감 시간·재무 효과·완전 자동화·실시간·무결점 운영을 공개 근거 없이 주장하지 않습니다.

Claim → 공개 근거

각 주장에 대응하는 공개 근거를 연결합니다. 소스·테스트와 운영 관측 기록의 검증 범위는 구분합니다.

26개 canonical UI 파일

UI 정본과 허용 seam은 어떻게 고정했는가?

Manifest Verifier

로컬 조정·원장 보존·월말 경고

급여·저축 연결, 지출 반영, 원장을 지우지 않는 reopen, 목적통장 부족 경고와 초기화는 어디서 구현·회귀 검사하는가?

Adapter Test

UI와 데이터 소스 분리

공통 UI에 공개 어댑터를 어떻게 주입하는가?

Runtime DemoShell

공개 경계 검사

어떤 실행 가능한 검사가 drift와 금지 패턴을 차단하는가?

Boundary scan CI

라이브 합성 제품 흐름

로그인 없이 공개 화면을 직접 확인할 수 있는가?

Live Demo

프로젝트 설명

Family Budget은 “거래를 적는 도구”에서 끝나지 않습니다. 비개발 가족 구성원은 모바일에서 일상 지출을 빠르게 입력하고, 함께 쓰는 데스크톱 화면에서는 거래 원장·목적통장·자산·예상 항목을 한 달 단위로 검토합니다. 대시보드는 예상 수입·지출·저축과 실제 기록, 누락된 확인 항목을 모아 이번 달을 마감할 수 있는지 보여줍니다. 이를 위해 반복 규칙(계획), 월별 확인 항목(occurrence), 실제 거래를 분리하고 기존 실제 내역 연결을 새 생성보다 우선했습니다. 아래 화면은 운영 UI와 동일한 canonical UI package를 합성 데이터 어댑터에 연결한 공개 제품 증거이며, 실제 가족 금융값과 운영 백엔드는 공개하지 않습니다.

주요 내용

모바일 빠른 입력 → 거래 원장 → 목적통장·자산 → 월말 판단으로 이어지는 Family Budget 사용자 여정
공동·개인 부담과 계획·실제를 분리해 부부가 같은 한 달을 서로 다른 관점에서 검토
합성 데모에서 기존 급여·저축 내역 연결, 지출 실제 반영, 원장을 보존하는 reopen과 목적통장 부족 경고 재현

기술 선택 근거

▶반복 규칙·월별 occurrence·실제 원장을 분리해 모델은 늘었지만 계획 변경과 실제 사실을 서로 덮어쓰지 않게 했습니다.
▶후보 자동 연결보다 사용자 확인을 선택해 한 단계가 늘었지만 금융 원장에서 잘못된 결합을 방지했습니다.
▶공개 UI package와 합성 데모를 보조 증거로 분리해 운영 구현을 공개하지 않으면서 화면 계약과 공개 경계를 재현했습니다.

기술 스택

TypeScriptNext.jsReactVitestVercel