가계부 앱 UI 템플릿.

가계부·지출 관리 앱을 위한 완성된 UI 디자인입니다. 개요와 예산부터 통계, 계좌까지, 실제 같은 한 달 치 수입·지출 데이터를 담은 휴대폰 화면 8개로 이루어져 있습니다. 모든 화면에서 합계가 딱 맞고, 모든 화면이 순수 HTML과 Tailwind라서 Codex나 Claude Code가 복제해 내 앱으로 바꿀 수 있습니다.

2026년 11월 6일 업데이트

템플릿에 담긴 내용

샘플 데이터는 한 사람의 11월을 미국 달러로 정리한 것입니다. 수입은 $5,500.00, 지출은 $2,674.38, 예산 8개의 합계는 $3,020.00, 순자산은 계좌 잔액의 합과 같습니다. 수입은 플러스 기호가 붙은 초록색, 지출은 마이너스 기호가 붙은 본문 색상이고, 빨간색은 예산을 초과한 카테고리에만 나타납니다.

각 화면은 390×844 크기의 HTML 파일 하나이며, Tailwind CSS v4와 공통 tokens.css로 스타일링하고 차트는 SVG로 그렸습니다. 파일을 브라우저에서 열기만 하면 되고, 설치나 빌드는 필요 없습니다.

Codex나 Claude Code와 함께 쓰기

ui-templates 저장소에서 이 템플릿만 복사하세요.

npx degit ummydev/ui-templates/apps/budgeting my-budget-app

그다음 에이전트에게 내 앱으로 바꿔 달라고 요청하세요.

이 폴더는 가계부 앱 UI 템플릿이야. 이걸 [내 앱 이름]으로 바꿔 줘. 대상은 [사용할 사람들]이야. DESIGN.md와 tokens.css는 디자인 시스템으로 그대로 두고, 통화는 [내 통화]로, 카테고리는 [내 카테고리]로 바꾸고, 모든 합계가 화면마다 일관되게 맞도록 해 줘. 그런 다음 이 화면들을 [Expo / SwiftUI / 내 스택]으로 만들어 줘.

디자인 시스템이 DESIGN.md에 적혀 있기 때문에, 에이전트가 새로 추가하는 화면, 예를 들어 저축 목표나 정기 결제 페이지도 이미 있는 8개 화면과 어울립니다.

Wallet 디자인 시스템 기반

이 템플릿은 금융 앱을 위한 디자인 시스템 Wallet을 씁니다. 고정폭 숫자로 쓴 Manrope의 또렷한 잔액, 차분한 초록 하나, 18px 모서리, 48px 터치 영역이 특징입니다. Wallet 페이지에서 라이브 프리뷰, DESIGN.md 전체, shadcn 테마를 볼 수 있습니다.

자주 묻는 질문

이 가계부 앱 템플릿은 무료인가요?

네. MIT 라이선스 오픈 소스라서 개인 프로젝트와 상업 프로젝트 모두에 쓸 수 있습니다.

숫자가 정말 다 맞나요?

네. 잔액, 예산, 차트 비율, 순자산이 8개 화면 모두에서 일치하므로, 내가 또는 에이전트가 숫자 하나를 바꾸고 전체에 반영해도 디자인이 여전히 앞뒤가 맞습니다.

다크 테마가 있나요?

네. 어느 화면이든 <html> 태그에 class="dark"를 추가하면 Wallet의 다크 테마로 바뀝니다.

더 읽어 보기

• 음식 배달 앱 UI 템플릿주문과 배달을 위한 화면 8개, Pantry 기반.
• AI 에이전트를 위한 디자인 시스템DESIGN.md와 shadcn 테마가 있는 무료 웹·앱 디자인 시스템.