01 / 04
01
가계부 핵심 화면
오늘의 재정 상태와 최근 거래를 빠르게 확인하고, 수입·지출 입력으로 바로 이어지는 메인 화면입니다.
02 / 04
02
캘린더
날짜 단위로 거래 내역을 확인하고, 특정 시점의 소비 흐름을 빠르게 추적하는 화면입니다.
03 / 04
03
통계
월별 지출과 소비 패턴을 함께 보는 분석 화면입니다.
04 / 04
04
덕담
부모-자녀가 용돈과 약속을 관리할 수 있는 가족용 금융 서비스 화면입니다.
한눈에 보기
PWA Builder로 앱 번들을 만들어 Google Play 프로덕션까지 출시한 스마트 가계부 앱
역할
기획 · 프론트엔드 · 백엔드 · 배포 주도
범위
17개
//핵심 포인트7개
01
Vercel Function과 Supabase의 리전 불일치를 해결해 동일 조건 5회 측정 중앙값 기준 홈 LCP를 1.99초에서 0.83초로 약 58% 단축
02
성장 버전 1.0.0: 웹 서비스를 PWA로 패키징해 실제 스토어에 출시한 첫 단계
03
PWA Builder로 앱 번들(AAB)을 생성해 Google Play 프로덕션 출시까지 완료
04
프론트엔드 개발자 4인 팀에서 기획·디자인·Supabase 백엔드·배포 역할까지 함께 수행
05
Claude API 기반 영수증 이미지 분석으로 금액, 날짜, 가맹점 정보를 추출해 자동 기입 구현
06
수입·지출 기록, 월별 통계, 자동 기입, 알림, 덕담 기능을 하나의 흐름으로 통합
07
개인정보처리방침과 Play Console 정책 대응까지 실서비스 배포 관점에서 정리
//기술 스택17개
//FRONTEND(5)
탭을 바꿔가며 역할과 설명을 한 범주씩 확인할 수 있습니다.
Next.js
라우팅/렌더링 구조App Router 기반으로 페이지 라우팅과 서버/클라이언트 책임을 분리해 전체 화면 흐름을 구성했다.
React
UI 상태/컴포넌트상태 변화에 따라 UI를 컴포넌트 단위로 조합하고, 재사용 가능한 화면 구조로 유지보수를 쉽게 했다.
TypeScript
타입 안정성API 응답/컴포넌트 Props 계약을 타입으로 고정해 런타임 오류를 줄이고 협업 시 실수를 예방했다.
TanStack Query
도구(Utility)TanStack Query을(를) 프로젝트의 안정성과 구현 속도를 위해 활용했다.
Tailwind CSS
디자인 시스템/스타일토큰(색/타이포/간격)과 유틸 기반으로 스타일 규칙을 표준화해 화면 간 일관성을 유지했다.
PERFORMANCE CASE STUDY
첫 가설을 기각하고 배포 토폴로지에서 실제 병목 찾기
내부 API 재호출을 제거한 뒤에도 성능이 나아지지 않자 가설을 기각하고, Runtime Logs에서 미국 Vercel Function과 서울 Supabase 사이의 장거리 왕복을 발견했습니다.
홈 LCP 중앙값
1.988초→0.828초
약 58.4% 단축
문서 응답 지속시간 중앙값
1,374.2ms→294.8ms
약 78.5% 단축
01 · 문제
메인 카드 노출 지연
Chrome Performance에서 서버 데이터가 필요한 대시보드 카드 문구가 LCP 요소임을 확인했습니다.
02 · 첫 가설
내부 API 재호출
단일 인증, 공통 서버 함수, Promise.all 병렬 조회로 중복 경로를 정리했습니다.
03 · 가설 기각
재측정 결과 효과 없음
LCP 2,032ms, 문서 응답 지속시간 1,505ms로 유의미한 개선이 없어 첫 가설을 기각했습니다.
04 · 실제 원인
컴퓨팅과 DB의 리전 불일치
Runtime Logs에서 Function은 미국 iad1, Supabase는 서울 ap-northeast-2에 있음을 확인했습니다.
05 · 해결
서울 리전 코로케이션
Vercel Function을 icn1에 배치해 Supabase와의 장거리 인증·조회 왕복을 줄였습니다.
개선 전 · 리전 불일치
한국 사용자
↓
서울 Vercel 네트워크 (icn1)
↓
미국 Vercel Function (iad1)
↓
서울 Supabase (ap-northeast-2)
↓
한국 사용자
개선 후 · 리전 코로케이션
한국 사용자
↓
서울 Vercel 네트워크 (icn1)
↓
서울 Vercel Function (icn1)
↓
서울 Supabase (ap-northeast-2)
↓
한국 사용자