가계부 앱 홈 화면을 설계해 줘 — 이번 달 지출이 한눈에 보이게

## 역할과 목표

너는 가계부 앱의 홈 화면을 설계하는 UI/UX 디자이너다. 사용자가 앱을 열었을 때 이번 달 지출 규모와 주요 지출 흐름을 빠르게 파악하도록 화면 구조, 컴포넌트, 상태별 동작, 디자인 토큰을 제안하라. 산출물은 구현 담당자가 화면을 만들고 검토 담당자가 완료 여부를 판단할 수 있는 설계안이어야 한다. 완료 기준은 첫 화면에서 이번 달 지출 정보가 가장 먼저 읽히고, 데이터가 없거나 불러오기에 실패해도 다음 행동이 분명하며, 키보드와 스크린리더로 핵심 기능을 사용할 수 있는 것이다.

## 범위와 전제

다루는 범위는 가계부 앱의 홈 화면이다. 핵심 목적은 이번 달 지출을 한눈에 보여 주는 것이며, 이에 필요한 요약 정보, 지출 내역으로 이동하는 진입점, 로딩·빈 상태·오류 상태, 반응형 배치, 접근성 동작을 포함한다. 상세 거래 입력 화면, 예산 설정 화면, 통계 전체 화면, 로그인·회원가입 화면은 홈 화면에서 필요한 연결만 표시하고 상세 설계는 다루지 않는다.

사용자 원문에 없는 브랜드 색상, 글꼴, 로고, 화면 크기, 통화, 지출 총액, 카테고리별 수치, 예산 금액은 만들지 마라. 브랜드 정보는 `[입력 필요: 브랜드 고정 묘사와 색상·글꼴·로고 규칙]`으로 두고, 사용자가 제공할 브랜드 자산과 사용 규칙을 채우는 자리라고 한 줄로 설명하라. 대상 화면은 `[입력 필요: 목표 화면 크기와 이용 환경]`으로 두고, 모바일·태블릿·웹 중 실제 적용 환경을 채우게 하라. 데이터 형식은 `[입력 필요: 지출 항목·기간·통화 형식]`으로 두고, 실제로 표시할 필드와 통화 기준을 채우게 하라.

이번 달의 기준일, 사용자별 예산, 지출 수치와 카테고리는 제공되지 않았으므로 임의의 숫자나 카테고리를 화면 예시처럼 확정하지 마라. 데이터가 없는 경우에는 수치를 채우는 대신 표시 구조와 상태 문구를 설계하라.

## 작업 규칙

브랜드 고정 묘사가 제공되면 색상·글꼴·라운딩을 그대로 유지하라. 간격과 타이포그래피 단계는 첫 화면에서 값으로 확정해 디자인 토큰 표를 만들고, 이후 모든 화면 요소는 토큰 이름을 인용하라. 브랜드 고정 묘사가 없으면 실제 색상 코드나 로고를 지어내지 말고 입력 필요 항목으로 남겨라.

간격 단위는 `[추천: 8pt 배수 — 가계부 홈 화면의 카드와 숫자 정보를 규칙적으로 정렬하기 쉽고, 모바일에서도 터치 영역과 시각적 위계를 관리하기 좋음]`으로 제안하라. 타이포그래피는 화면에서 가장 중요한 정보인 이번 달 지출 총액이 제목·보조 정보·본문보다 분명히 크게 읽히도록 `[추천: 본문 16px, 보조 14px, 섹션 제목 20px, 핵심 지출 금액 32px — 숫자 요약을 짧은 시선 이동으로 구분하기 위한 계층]`으로 제안하라. 실제 제품 기준이 있으면 그 값을 우선한다.

화면의 첫 시선은 이번 달 지출 총액에 고정하라. 총액 아래에는 기준 기간과 비교 또는 예산 관련 정보가 실제 데이터에 존재할 때만 배치하라. 비교 기준이나 예산 데이터가 없으면 상승·하락, 절약·초과 같은 판단을 만들지 말고 해당 영역을 생략하거나 데이터 준비 상태로 표시하라.

이번 달 지출 요약은 단순한 숫자 나열이 아니라 사용자가 다음 행동으로 이어지도록 구성하라. 총액을 확인한 뒤 카테고리별 지출 또는 최근 지출 내역으로 자연스럽게 이동하도록 정보 위계를 설계하라. 사용자가 제공하지 않은 카테고리명, 금액, 비율은 실제 값처럼 표시하지 말고 자리 구조만 제시하라.

상태별로 다음처럼 분기하라.

1. 데이터가 불러오는 중이면 핵심 카드와 목록 위치에 실제 정보의 형태를 예측할 수 있는 로딩 플레이스홀더를 표시하고, 화면이 멈춘 것처럼 보이지 않게 하라.
2. 이번 달 지출 데이터가 없으면 총액을 0원 등으로 임의 확정하지 말고, 데이터 없음 상태와 첫 지출 기록으로 이동하는 행동을 제시하라.
3. 데이터 불러오기에 실패하면 실패 원인을 단정하지 말고 재시도 행동과 필요한 안내를 제공하라.
4. 데이터가 있으면 총액, 기간, 사용자가 확인할 수 있는 지출 세부 정보 순서로 배치하라.
5. 금액이나 기간을 선택하면 키보드만으로도 해당 조작이 가능하고, 스크린리더가 컨트롤의 목적과 현재 상태를 읽도록 라벨을 부여하라.

한국어 화면이므로 긴 문장은 어절 단위로 자연스럽게 줄바꿈되게 하고, `word-break`와 `line-break` 처리 방향을 명시하라. 본문 행간은 작은 숫자와 보조 설명이 겹치지 않도록 넉넉하게 잡아라. 한국식 금액 표시와 날짜 형식은 실제 제품 규칙이 있으면 따르고, 없으면 `[입력 필요: 금액·날짜 표시 형식]`으로 남겨 사용자가 결정하게 하라.

## 산출물 구조

다음 순서로 작성하라. 화면에 실제로 보이는 설계 내용은 개조식으로 정리하고, 왜 그렇게 배치했는지와 상태 전환의 이유는 짧은 서술형으로 설명하라.

1. **화면 목록**  
   홈 화면 하나를 기준 화면으로 두고, 홈에서 연결되는 지출 내역·지출 입력·카테고리 또는 통계 화면은 연결 목적만 적는다. 이번 달 지출을 가장 먼저 확인하는 흐름을 기준으로 우선순위를 표시하라.

2. **화면별 구성요소**  
   홈 화면을 상단 요약 영역, 핵심 지출 카드, 보조 지출 정보, 최근 내역 또는 다음 행동 영역, 하단 탐색 영역으로 나누어라. 각 요소마다 화면에 보이는 문구, 데이터 필드, 사용자 행동, 이동 목적지를 적어라. 숫자 예시는 만들지 말고 데이터 필드명으로 표현하라.

3. **상태별 동작**  
   로딩, 데이터 없음, 정상 표시, 오류 상태를 각각 별도로 설명하라. 상태가 바뀔 때 유지되는 위치와 바뀌는 요소를 구분하고, 오류 발생 시 재시도·입력 이동·내비게이션 동작을 명시하라.

4. **디자인 토큰**  
   색상, 타이포그래피, 간격, 라운딩, 테두리, 상태 표현을 표로 정리하라. 실제 브랜드 값이 없는 색상과 글꼴은 `[입력 필요: 항목]`으로 두고, 간격과 글자 크기처럼 추천 가능한 값은 추천값과 한 줄 근거를 함께 제시하라. 이후 화면에서는 토큰 이름만 사용하라.

5. **접근성 및 한국어 조판**  
   KWCAG를 접근성 검토 기준으로 지목하고, 키보드 포커스 순서, 포커스 표시, 버튼 이름, 금액 읽기 방식, 오류 메시지 전달, 스크린리더 라벨, 색상만으로 상태를 구분하지 않는 방법을 적어라. 공공기관·교육·복지 대상인지 확인되지 않았으므로 장애인차별금지법 적용 여부는 `[입력 필요: 서비스 대상과 운영 주체]`로 남겨 확인하게 하라.

## 문체 규칙

전체 문체는 hybrid로 쓴다. **화면 목록, 구성요소, 상태별 동작, 디자인 토큰, 접근성 점검 항목은 개조식과 표 중심**으로 작성하고, **핵심 배치 이유와 상태 전환의 의도는 짧은 서술형**으로 작성하라. 구현 담당자가 바로 옮길 수 있도록 컴포넌트명과 행동은 구체적으로 쓰되, “감성적”, “고급스러운”, “완성도 높은” 같은 추상적 표현 대신 숫자 크기, 간격, 대비, 위치, 상태 변화로 설명하라. 가계부 화면에서 흔한 “한눈에 보기”는 실제로 어떤 정보가 먼저 보이는지와 연결해 한 번만 사용하라.

## 문체 규칙 (휴머나이저 v1)

산출물의 산문 전체에 적용한다. 코드, 명령어, 인용문, 고유명사는 손대지 않는다.

- 종결어미를 하나로 고정하지 마라. ~다/~는데/명사형 종결을 섞고 장문과 단문을 교차시킨다.
- 서두 인사("물론입니다!", "~에 대해 알아보겠습니다")와 마무리 상투구("결론적으로", "도움이 되셨기를 바랍니다")를 쓰지 않는다. 마지막 구체 사실로 끝낸다.
- "첫째, 둘째" 기계 나열, 이모지, 문단마다 붙는 볼드 소제목 금지.
- 근거 없는 추상어("다양한", "효과적인", "전략적 접근")를 구체 서술로 바꿔라. 단 그 구체 정보는 사용자 입력과 검증 가능한 출처에 있는 사실만 쓴다. 인간답게 보이려고 세부를 지어내지 마라. 받지 못한 값은 [입력 필요] 슬롯으로 남긴다.
- 번역투를 피한다. "~에 있어서", "~을 통해" 남발과 "~되어지다" 같은 이중 피동 금지.
- 문두 접속사("또한", "하지만", "따라서")를 연속해서 쓰지 않는다. 문맥상 명확한 주어는 생략한다.
- 같은 핵심어를 한 문단에서 반복하지 마라. 억지 동의어로 돌려 말하는 과교정도 피한다.
- 오탐 가드: 오류 없는 문법, 한 번의 접속어, 격식 어휘는 그 자체로 AI 문체가 아니다. 신호가 여럿 겹칠 때만 고치고, 일부러 거칠게 쓰지 마라.

## 제출 전 자기 감사

초안을 완성한 뒤 스스로 두 가지를 점검하라. 어느 부분이 명백히 AI 문체로 읽히는가. 사용자 입력이나 검증 가능한 출처에 없는 사실을 단정한 곳이 있는가. 걸린 부분을 고쳐 쓴 다음 최종본만 출력한다. 점검 과정 자체는 출력하지 마라.

## 자기검증

1. 첫 화면의 가장 prominent한 정보가 이번 달 지출 총액이며, 다른 카드나 장식이 그보다 먼저 시선을 빼앗지 않는지 확인하라.
2. 실제로 제공되지 않은 지출 금액, 카테고리, 예산, 통화, 날짜를 예시값처럼 넣지 않았는지 확인하라.
3. 브랜드 색상·글꼴·로고가 없는 상태에서 임의의 브랜드 사실을 만들지 않았고, 필요한 항목만 `[입력 필요: 항목]`으로 남겼는지 확인하라.
4. 로딩·데이터 없음·정상 표시·오류 상태가 각각 있으며, 오류 상태에 재시도와 다음 행동이 있는지 확인하라.
5. 키보드 포커스 순서와 스크린리더 라벨이 핵심 버튼과 지출 요약에 연결되어 있는지 확인하라.
6. 한국어 문장이 어절 단위로 자연스럽게 줄바꿈되고, 금액·날짜 표시 형식이 미정이면 확인 대상으로 남아 있는지 확인하라.
7. 화면 목록, 화면별 구성요소, 상태별 동작, 디자인 토큰의 네 부분이 모두 포함되었는지 확인하라.
8. 홈 화면의 범위를 넘어 상세 거래 입력·예산 관리·전체 통계 기능을 완성된 화면처럼 확장하지 않았는지 확인하라.
9. 추천할 수 있는 간격과 타이포그래피 값은 실제 값과 근거를 제시했으며, 사용자만 결정할 브랜드·데이터 값과 섞지 않았는지 확인하라.
10. 위 검토에서 발견한 문제는 검토표나 자기평가로 출력하지 말고, 수정한 최종 설계안만 제시하라.

## 렌더 지시

**엔진에 붙여 넣을 부분 — 명사구 중심**

가계부 앱 홈 화면, 이번 달 지출 총액 최우선, 상단 핵심 요약 카드, 명확한 숫자 위계, 지출 기간 표시, 최근 지출 진입점, 카테고리 지출 요약 영역, 하단 주요 탐색, 8pt 간격 체계, 넉넉한 한국어 행간, 높은 텍스트 대비, 명확한 포커스 표시, 로딩 플레이스홀더, 데이터 없음 상태, 오류 재시도 상태, 모바일 우선 반응형 구성, 단순한 카드 기반 정보 구조, 실제 데이터 없는 금액·카테고리 미표시

**사용자가 읽을 부분**

이번 달 지출을 첫 시선에 고정하고, 그 아래에서 세부 내역으로 이동하게 구성한다. 실제 브랜드와 데이터가 없으므로 색상 코드, 로고, 금액, 카테고리 수치는 확정하지 않는다. 화면을 구현할 때는 아래 디자인 토큰과 상태별 문구를 기준으로 같은 위계를 유지한다.

## 제외 지시

임의의 지출 금액, 임의의 카테고리, 근거 없는 예산 비교, 과도한 장식 그래픽, 낮은 대비의 회색 본문, 색상만으로 표시한 오류 상태, 숨겨진 키보드 포커스, 라벨 없는 아이콘 버튼, 읽을 수 없는 작은 금액, 불필요한 광고 배너, 워터마크

## 일관성 절차

브랜드 고정 묘사가 제공되면 그 문구를 모든 화면과 상태에 글자 그대로 반복하라. 브랜드 고정 묘사가 없으면 첫 화면에서 확정한 간격 토큰, 타이포그래피 토큰, 상태 색상 토큰, 카드 라운딩 토큰을 이후 모든 상태와 연결 화면에서 그대로 인용하라. 첫 화면에서 확정한 토큰 표가 기준이며, 로딩·빈 상태·오류 상태에서도 위치와 위계는 유지하고 내용만 바꿔라. 여러 화면을 연속 생성하는 경우 첫 화면의 참조 입력이나 시드 고정을 지원하면 첫 결과를 이후 화면에 재사용하라. 텍스트와 토큰만으로 동일한 화면이 보장되지 않을 수 있음을 사용자에게 알리되, 단일 화면 설계라면 불필요한 시드 절차는 생략하라.

## 파라미터와 확인

- 화면 유형: 가계부 앱 홈 화면
- 우선 정보: 이번 달 지출 총액
- 화면 환경: `[입력 필요: 모바일·태블릿·웹 중 목표 환경]` — 실제 적용할 화면 크기를 채우는 자리
- 브랜드 규칙: `[입력 필요: 색상·글꼴·로고·라운딩 규칙]` — 기존 브랜드 시스템이 있으면 그 값을 채우는 자리
- 데이터 표시: `[입력 필요: 금액·날짜·통화 형식]` — 실제 서비스의 표시 규칙을 채우는 자리
- 간격 단위: `[추천: 8pt 배수 — 카드와 숫자 정보를 안정적으로 정렬하기 좋은 기준]`
- 본문 글자 크기: `[추천: 16px — 모바일에서도 금액 설명과 상태 문구를 읽기 쉽게 유지하는 크기]`
- 보조 글자 크기: `[추천: 14px — 기간과 설명을 핵심 금액보다 낮은 위계로 표시하기 위한 크기]`
- 핵심 금액 글자 크기: `[추천: 32px — 홈 화면에서 총액을 즉시 식별하게 하는 크기]`
- 접근성 기준: KWCAG
- 한국어 조판: 어절 단위 줄바꿈, `word-break`·`line-break` 적용, 본문 행간 확대

### 남은 입력 필요 항목

1. `[입력 필요: 모바일·태블릿·웹 중 목표 환경]` — 실제 화면 설계와 반응형 기준을 결정할 값이다.
2. `[입력 필요: 색상·글꼴·로고·라운딩 규칙]` — 브랜드 시스템에서 제공할 값을 채우는 자리다.
3. `[입력 필요: 금액·날짜·통화 형식]` — 앱에서 실제 지출을 표시하는 규칙을 결정하는 값이다.
4. `[입력 필요: 서비스 대상과 운영 주체]` — 장애인차별금지법 적용 여부를 확인하기 위한 정보다.

① 위 항목을 채워 주면 해당 값과 화면 환경을 반영해 홈 화면 설계를 완성한다.  
② 추천값을 그대로 사용하고, 입력 필요 항목은 실제 데이터가 연결되는 시점에 확정하는 구조로 완성한다.  
③ 홈 화면 범위나 화면 구조부터 수정한다.