expense
Design
조용하고 정확한 기록의 기준.Foundation
기본
2px + 2pxSpacing4 · 8 · 12 · 16 · 20 · 24 · 32 · 40
Radius
Border1px · quiet
Shadowoverlay · floating action
Width
Typography
Wanted Sans
Display · 29 / 680 / 1.2한 달의 기록
Title · 24 / 670 / 1.252026년 7월
Heading · 18 / 650 / 1.35오늘
Body · 14 / 450 / 1.55필요한 정보만 차분하게 보여줍니다.
Label · 12 / 590 / 1.4남은 금액
Caption · 11 / 520 / 1.47월 15일
Amount · 29 / 680 / 1.2128,500원
Layout
화면
콘텐츠최대
모바일 여백
데스크톱 여백
섹션 간격24px
Dock ·
Safe area하단 여백에 더함
Card정보를 묶을 때만
Components
구성 요소
Buttons
Input
Segmented · sliding indicator
Setting row
월 시작일매월 1일
Dock
Calendar cell
Record hierarchy
점심 약속학교 앞에서 먹음식비−8,500원
Sortable category
Dialog frame
Desktop840px · 최대 88dvhMobile화면 너비 · 최대 100dvhAuto size측정된 크기 사이 전환Content본문만 스크롤Footer고정 · safe areaScrollbar본문에서만 숨김
이번달 목표
Date field
Hidden category
선택 화면보이지 않음기존 기록기타로 표시다시 보이기원래 이름 복원저장값원래 분류 유지
Icon select
Compact empty
아직 목표가 없어요
한국식 금액
Period
Category summary
Overlay
States
아직 기록이 없어요
Motion
움직임
- Fast 160 · Normal 210 · Slow 260ms
- Standard · Emphasized easing
- Segmented · 배경만 좌우 이동
- 분류별 총계 · fade + 4px
- Sheet · opacity + 26px
- 정렬 · 핸들을 길게 눌러 이동
- Swipe · 아래로 닫기
- Reduced motion · 0.01ms
Voice
문장
사용홈 · 기록 · 설정 · 이번 달 · 오늘 · 남은 금액 · 기록하기 · 수정 · 지우기 · 아직 기록이 없어요
사용하지 않음submit · transaction · payload · update success · create item · 데이터 처리 중 · 설정을 구성하세요 · 당신의 금융 여정을 시작하세요
Budget
하루 예산
하루 목표
오늘18,000원남음예산 30,000원 · 지출 12,000원
이번 주102,400원초과예산 70,000원 · 지출 172,400원
이번 달223,461원초과예산 280,000원 · 지출 503,461원
하루 목표 · 기본18,000원남음
8px 버튼 · 12px 표면 · 16px 다이얼로그. 예산은 선택일부터 적용하며, 오늘과 미래의 차액은 누적 절약에 포함하지 않습니다.
Sharing
함께 보는 가계부
공유는 사용자가 직접 시작합니다. 전체 또는 기간을 선택하며, 읽기는 누구나, 댓글과 반응은 로그인한 사용자만 가능합니다. 공유 종료는 원래 기록을 지우지 않습니다. 각 항목 아래에 반응과 최근 댓글 세 개를 표시하며, 항목을 누르면 같은 자리에서 댓글을 작성합니다. 반응은 공통 아이콘과 개수로 표시합니다. 반응 높이는 데스크톱 28px, 모바일 32px입니다. 남길 권한이 없는 반응도 같은 색과 불투명도로 표시합니다. 내 가계부의 기록·상세·하루 총평에는 같은 댓글과 반응 컴포넌트를 사용합니다. 댓글은 배경과 테두리 없이 13px 텍스트로 표시하며, 이름 첫 글자를 넣은 26px 원형 아바타(모바일 24px)를 나란히 둡니다.
Recurring
고정지출
고정지출은 홈·기록 화면에서 하나의 패널을 재사용합니다. 추가는 항상 노출하고, 목록은 제목과 화살표를 눌러 펼칩니다. 이름과 주기·다음 날짜는 두 줄, 금액은 오른쪽에 맞추며 항목을 눌러 수정합니다. 아이콘은 중립색으로 사용하고 삭제는 작은 별도 버튼으로 둡니다. 설정에는 두지 않습니다. 신규 반복에 지난 시작일을 고르면 날짜 아래 짧은 안내를 표시합니다. 공통 record-editor-dialog와 dialog-frame: 데스크톱 800px 이내, 최대 min(88dvh, 860px), 모바일 화면 너비의 sheet. 헤더와 푸터는 고정하며 본문만 스크롤합니다. 이름과 금액을 나란히 배치하고 반복·날짜를 한 그룹으로 묶습니다. 입력 높이 46px, 본문 간격 22px, 공통 금액·필드 토큰과 분류 선택을 사용합니다. 삭제 확인은 기존 confirm-dialog를 사용합니다.
Principles
철칙
필요한 것만같은 것은 같게숫자는 선명하게움직임은 조용하게문장은 짧게장식은 적게
Dohandle로 정렬
아이콘과 짧은 이름
한국식 금액 축약
정확한 정렬
제한된 색상
아이콘과 짧은 이름
한국식 금액 축약
정확한 정렬
제한된 색상
Don’t텍스트뿐인 아이콘 select
긴 금액 자르기
큰 빈 상태 카드
화려한 분석 차트
모든 요소의 pill 처리
긴 금액 자르기
큰 빈 상태 카드
화려한 분석 차트
모든 요소의 pill 처리