소셜 핀테크 — 원장 파생 지표 · 또래 비교 · 미션

FinMate — 청년 금융 온보딩

기간: 2026.04 – 2026.07
역할: 풀스택 — 앱의 프론트·백엔드 단독
참여 인력: 4명 — 기획 2 / 풀스택 1(본인) / 데이터 1 · 가가제작소, 하나금융그룹 × 금융감독원 2026 청년 금융인재

React 19TypeScript strictViteTailwind CSS v4Motion v12React Router 7html-to-imageJava 21 · Spring Boot 3.5PostgreSQL 16Flyway · Testcontainersfal.ai (FLUX)

GitHub에서 코드 보기 ↗

서비스

20대가 금융을 미루지 않고 오늘 작은 행동 하나로 시작하게 만드는 모바일 서비스입니다.

20대는 금융관리의 필요성은 알지만 '무엇부터 해야 할지 몰라서', '어렵고 귀찮아서' 시작을 미룹니다. 필요한 건 더 많은 정보가 아니라 마찰 없는 첫 걸음입니다.

그래서 또래의 금융 행동을 구경하게 해 동기를 만들고, 지금 할 수 있는 작은 미션으로 연결하고, 하루가 끝나면 그날의 소비를 그림 한 장으로 남깁니다.

피드
분석
마이
미션
기록

모바일 홈 화면. 오늘의 예산을 물잔 모양 게이지로 31퍼센트까지 채워 보여주고 아래에 소비 상위 항목이 이어진다 — 마이 — 지표를 가로로 넘기고, 일간·주간·월간을 바꾸면 화면 전체가 그 기간으로 갈아입는다 (시연용 목 데이터로 촬영)

또래 그룹 목록과 오늘의 금융 스토리 카드 그리드가 보이는 화면 — 피드 — 소득·소비·지역이 비슷한 또래를 찾고, 그들의 금융 이야기를 카드로 본다 (시연용 목 데이터로 촬영)

데모 UI: React 19 · TypeScript strict · Tailwind v4 · Motion v12 · 커스텀 SVG 차트
직접 띄워보기: cd finmate-app && npm install && npm run dev→ localhost:5173 (모바일 390×844 · 화면은 finmate-app, 서버는 finmate-api)

e2e가 화면에서 재현하는 것

차트 라이브러리를 쓰지 않고 SVG와 Motion으로 직접 그렸다 — 물잔 수위는 사인파 두 장의 수평 루프다
화면의 모든 수치는 거래 원장에서 파생된다. 예산 챌린지의 일·주·월 판정도 전부 거래에서 계산한다

위 화면은 로컬 데모 실행 결과입니다. 운영 중인 서비스가 아닙니다.

요약

또래 비교가 매 요청 원장 88만 행을 다시 세던 것을 사람×월 사전 집계로 접어 p50 32.5ms → 0.72ms
고치기 전에 먼저 재서 개인 화면은 p95 0.96ms로 문제가 아님을 확인하고, 인덱스(50MB·24.0ms) 대신 사전 집계(1.9MB·0.72ms)를 선택
외부 이미지 생성 API가 3~6초 걸리는 동안 행 잠금이 풀리던 것을 상태 값으로 선점하게 바꿔 두 인스턴스가 같은 작업을 가져가지 못하게 함
합성 데이터셋 2,000명 887,002행을 JDBC 배치로 적재(34,490행/초)하고 원장·프로필 정합성을 통합 테스트로 고정

01청년 금융 · 인구 집계

또래 비교가 매번 88만 행을 세던 것을 미리 접어 32.5ms → 0.72ms

변경 전 원장 88만 7천 행을 순차 스캔하고 디스크 정렬까지 거치던 경로와, 변경 후 사람과 월 단위로 접어 둔 1만 4천 행 집계만 읽는 경로를 비교한 도식 — 또래 비교 — 요청마다 다시 세기 vs 한 번 접어 두고 읽기

문제 원인

또래 비교는 소득대가 같은 사람 전부를 가로질러 집계하므로 한 달치가 105,484행
조건이 기간뿐이라 (persona_id, occurred_on) 인덱스의 선행 컬럼이 없어 Parallel Seq Scan
count(DISTINCT persona_id)가 정렬을 강요해 work_mem을 넘기고 디스크 정렬 2,496kB 발생

해결 과정

고치기 전에 먼저 측정 — 개인 화면도 함께 재보니 p95 0.96ms로 문제가 아니었고, 예상과 달리 인구 집계만 비쌌음
싼 것부터 검증 — 쿼리 수정으로 디스크 정렬을 없애 28.0ms, 커버링 인덱스는 50MB를 쓰고 24.0ms에 그쳐 채택하지 않음
사람×월 사전 집계를 도입하되 원장을 유일한 진실로 두어 언제든 통째로 재생성 가능하게 설계

결과

p50 32.5ms → 0.72ms, 읽는 버퍼 23,326 → 206 (2,000명 · 원장 887,002행 기준)
50명이 동시에 화면을 넘길 때 또래 비교 p95 25.39ms — 순차로 잰 0.72ms와는 다른 숫자다
사전 집계는 14,000행 1.9MB로 원장의 1.1%, 두 방식의 결과가 소득대 6개 그룹 전부 일치

측정또래 비교 p50 (단일 클라이언트 순차)32.5ms→0.72ms45배로컬 Testcontainers postgres:16 · 2,000명 887,002행 · 40회 측정또래 비교 p95 (50명 동시)25.39msk6 50 VU · 30초 · 21,218요청 실패 0 · 화면 전환 전체를 도는 시나리오 측정읽는 버퍼23,326→206 측정사전 집계 크기1.9MB원장 179MB 대비 1.1%

구현 기능

위 문제 해결 외에, 서비스가 돌아가기 위해 구현한 것들입니다.

하루의 거래에서 그날의 주인공(소비·저축·투자)을 뽑아 AI 그림일기 한 장으로 기록 — 하루 한 장 멱등성, 3회 재시도, 응답 없는 작업 회수
예산 챌린지 판정을 저장하지 않고 매번 원장에서 세고, 포인트는 잔액이 아니라 원장으로 쌓아 이중 지급 차단 — 또래 비교는 금액을 구간으로만 내보내고 20명 미만 그룹은 만들지 않는다
화면의 모든 수치를 거래 원장에서 파생하는 순수 셀렉터로 통일하고, 차트는 라이브러리 없이 SVG로 직접 구현해 번들에 차트 의존성 0개

주장하지 않는 것

하나금융그룹 × 금융감독원 2026 청년 금융인재 프로젝트의 팀 프로젝트(가가제작소)입니다. 위 내용은 제가 작성한 프론트엔드(finmate-app, 365커밋 중 361커밋)와 백엔드(finmate-api, 커밋 100%)의 범위입니다. 원래 백엔드는 프론트와 다른 제품 정의로 설계돼 앱에 연결된 적이 없어, 앱의 데이터 계층을 계약으로 삼아 다시 구현했습니다.

기획·리서치와 합성 데이터셋(finmate-data)은 팀원의 작업이라 제 성과로 적지 않았습니다. 발표자료에 실린 카드 데이터 EDA 규모와 설문 표본 수치도 같은 이유로 싣지 않습니다.

성능 수치는 Apple M4 로컬의 Testcontainers Postgres에서 단일 클라이언트로 잰 값이며 운영 성능이나 SLO 주장이 아닙니다. Postgres 설정은 컨테이너 기본값이고 튜닝하지 않았습니다.

화면이 이 백엔드에 붙는 작업은 일부만 됐습니다 — 2026-08-07에 둘을 함께 띄워 확인해 보니, 마이 탭의 기준일·예산·소비 상위는 실제 원장에서 파생돼 화면까지 오지만 피드·분석·미션·기록 네 탭은 아직 목 데이터로 그립니다(탭을 옮겨도 API를 부르지 않습니다). 또래 비교·미션·인사이트 API는 만들어 두었지만 앱이 아직 부르지 않으므로, 끝에서 끝까지의 응답 시간은 주장하지 않습니다. 위 화면 사진 두 장도 목 데이터로 찍은 것입니다.

← Projects