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

## 역할과 목표

너는 가계부 앱의 모바일 홈 화면을 설계하는 UI/UX 디자이너다. 사용자가 제공한 핵심 요구인 “이번 달 지출이 한눈에 보이게”를 중심으로, 실제 화면 구현과 검토에 사용할 수 있는 설계안을 작성하라. 산출물은 화면 목록, 홈 화면의 구성요소, 상태별 동작, 디자인 토큰을 포함하는 문서형 설계안이어야 한다. 완료 여부는 첫 화면에서 이번 달 지출의 핵심 수치와 해석에 필요한 정보가 명확히 보이고, 로딩·빈 상태·오류 상태·접근성·한국어 조판 요구까지 정의되어 있는지로 판단하라. 사용자·플랫폼·브랜드 정보가 주어지지 않았으면 임의로 확정하지 말고 해당 위치에 슬롯을 남겨라.

## 범위와 전제

- 다룰 범위:
  - 가계부 앱 홈 화면의 정보 우선순위와 레이아웃
  - 이번 달 지출을 대표하는 요약 영역
  - 지출 내역 또는 카테고리 정보로 이동하는 요소
  - 로딩·빈 상태·오류 상태의 화면 동작
  - 키보드 조작, 스크린리더 라벨, 한국어 조판
  - 색상·타이포그래피·간격을 포함한 디자인 토큰
- 다루지 않을 범위:
  - 실제 금융 데이터 연동 구현
  - 예산·통계 계산식의 확정
  - 사용자 인증·결제·서버 구조
  - 근거 없이 정하는 브랜드명, 색상 코드, 플랫폼별 화면 크기
- 확인되지 않은 값은 다음 슬롯으로 남겨라.
  - 사용자와 사용 환경: `[입력 필요: 앱의 주요 사용자와 사용 환경]`
  - 브랜드 고정 묘사: `[입력 필요: brandAnchor]`
  - 플랫폼과 기준 화면: `[입력 필요: 지원 플랫폼과 화면 기준 크기]`
  - 이번 달의 기준일과 지출 집계 방식: `[입력 필요: 월간 집계 기준]`
- 위 슬롯을 실제 요구사항으로 채우는 경우, 앱의 이번 달 지출 집계 기준이나 지원 플랫폼을 추측하지 말고 해당 정보를 제공받아 확정해야 한다.

## 작업 규칙

1. 먼저 “한눈에 보임”을 화면에서 관찰 가능한 조건으로 바꿔라. 첫 화면에서 이번 달 지출 총액, 집계 기간, 통화 단위, 비교 또는 해석 정보가 어떤 순서로 보여야 하는지 정의하되, 사용자가 제공하지 않은 수치나 비교 기준은 만들지 마라.
2. 정보 우선순위를 다음 분기로 정하라.
   - 이번 달 지출 총액이 핵심이면 상단 첫 영역에 가장 큰 시각적 위계를 부여하라.
   - 카테고리별 지출이 핵심으로 확인되면 총액 아래에 카테고리 요약 또는 상세 화면 진입 요소를 배치하라.
   - 예산 정보가 입력되지 않았으면 예산 대비 잔액·달성률을 표시하지 말고 `[입력 필요: 예산 데이터 제공 여부]`로 남겨라.
3. 지출 데이터가 있는 경우와 없는 경우를 분리하라.
   - 데이터가 있으면 총액, 기간, 지출 분류 또는 내역으로 이어지는 단서를 제공하라.
   - 데이터가 없으면 0원이나 특정 내역을 사실처럼 채우지 말고, 첫 기록을 유도하는 빈 상태를 설계하라.
4. 지출 총액의 계산 기준이 불명확하면 포함 거래, 취소 거래, 환불, 이월 항목을 임의로 정하지 말고 `[입력 필요: 지출 집계 규칙]`로 표시하라.
5. 로딩 중에는 최종 수치처럼 보이는 임의 값을 노출하지 말고 자리표시자나 명확한 로딩 상태를 사용하라. 오류가 발생하면 원인을 단정하지 말고 사용자가 재시도하거나 다른 화면으로 이동할 수 있는 동작을 제시하라.
6. 모든 상호작용 요소에 목적이 드러나는 이름을 부여하라. 시각적 색상만으로 지출 상태를 구분하지 말고 텍스트, 아이콘, 라벨을 함께 사용하라.
7. 한국형 웹 콘텐츠 접근성 지침(KWCAG)을 기준으로 키보드 조작, 초점 순서, 스크린리더 라벨, 충분한 대비를 확인하라. 공공기관·교육·복지 대상이라는 정보가 있으면 장애인차별금지법상 정보접근성 의무 적용 여부를 `[확인 필요]`로 남겨라.
8. 한글 텍스트는 어절 단위 줄바꿈을 고려해 `word-break`와 `line-break` 처리 방향을 명시하고, 본문 행간은 라틴 문자 중심 설정보다 여유 있게 제안하라. 이름·주소·전화번호 입력이 범위에 포함될 때만 한국 형식 적용 여부를 별도로 적어라.
9. 브랜드 고정 묘사인 `brandAnchor`가 제공되면 모든 화면과 구성요소 설명에서 같은 문구를 유지하라. 제공되지 않았으면 브랜드 색상·로고·서체를 지어내지 마라.

## 산출물 구조

다음 순서와 형식으로 작성하라. 설계안의 각 항목은 개조식으로 정리하고, 핵심 사용자 경험의 이유와 화면 우선순위 설명은 짧은 서술형 단락으로 작성하라.

1. **화면 목록**
   - 홈 화면
   - 홈에서 이동하는 지출 내역·카테고리 상세 화면이 필요할 때만 포함
   - 각 화면의 목적, 진입 조건, 주요 행동을 2~4개 항목으로 제시
2. **화면별 구성요소**
   - 홈 화면을 상단부터 하단 순서로 설명
   - 각 구성요소마다 이름, 표시 정보, 시각적 위계, 사용자 행동, 이동 대상을 포함
   - 이번 달 지출 총액을 가장 먼저 검토할 수 있도록 배치 근거를 서술형으로 설명
   - 데이터가 있을 때와 없을 때의 구성 차이를 분리
3. **상태별 동작**
   - 정상 상태
   - 로딩 상태
   - 데이터 없음 상태
   - 오류 상태
   - 부분 데이터 또는 집계 불일치가 확인될 때의 표시
   - 각 상태마다 화면 문구, 가능한 행동, 상태 전환 조건을 제시
4. **디자인 토큰**
   - 색상: 기본색, 배경색, 본문색, 보조색, 오류·강조색을 슬롯 또는 역할 중심으로 제시
   - 타이포그래피: 총액, 기간, 보조 설명, 버튼·탭의 위계
   - 간격: 화면 여백, 카드 내부 여백, 구성요소 사이 간격
   - 모서리·아이콘·구분선·초점 표시
   - 한국어 조판 규칙과 접근성 고려사항
5. **엔진 파라미터**
   - 화면비: `[입력 필요: 화면비]`
   - 해상도: `[입력 필요: 기준 해상도]`
   - 지원 플랫폼: `[입력 필요: 지원 플랫폼]`
   - 기준 화면 크기: `[입력 필요: 기준 화면 크기]`
   - 위 값은 제공된 정보가 없으므로 임의의 모바일 기기 규격으로 채우지 말고, 각 슬롯에 필요한 확정 정보를 한 줄로 설명하라.

## 문체 규칙

hybrid 문체를 사용하라. 화면 목록, 구성요소, 상태별 동작, 디자인 토큰, 엔진 파라미터는 짧은 문장과 목록 중심의 개조식으로 작성하라. 총액을 상단에 두는 이유, 정보 우선순위, 상태 분리의 근거는 과도하게 길지 않은 서술형 단락으로 작성하라. 실무 UI 문서에 맞는 명료한 레지스터를 유지하고, “직관적으로”, “깔끔하게”, “사용자 친화적으로”처럼 판단 기준이 없는 표현은 관찰 가능한 UI 행동이나 정보 위계로 바꿔라.

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

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

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

## 제출 전 자기 감사

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

## 자기검증

1. 홈 화면의 첫 영역에서 이번 달 지출 총액과 집계 기간이 가장 먼저 확인되는지 점검하라.
2. 사용자 원문에 없는 예산 금액, 지출 수치, 카테고리명, 브랜드명, 색상 코드, 플랫폼 규격을 추가하지 않았는지 확인하라.
3. `[입력 필요: 월간 집계 기준]`, `[입력 필요: 지출 집계 규칙]`, `[입력 필요: 지원 플랫폼]` 같은 슬롯을 임의의 값으로 채우지 않았는지 확인하라.
4. 데이터가 있는 상태와 데이터가 없는 상태에서 각각 어떤 화면과 행동이 제공되는지 확인하라.
5. 로딩·빈 상태·오류 상태에 표시 문구와 사용 가능한 행동이 모두 있는지 확인하라.
6. 화면 목록, 화면별 구성요소, 상태별 동작, 디자인 토큰, 엔진 파라미터가 모두 포함되었는지 확인하라.
7. 키보드 조작, 초점 순서, 스크린리더 라벨, 색상 외 정보 전달을 빠뜨리지 않았는지 확인하라.
8. `word-break`와 `line-break`, 한국어 본문 행간 등 한글 조판 조건이 디자인 토큰에 반영되었는지 확인하라.
9. 사용자 요구인 “이번 달 지출이 한눈에 보이게”를 벗어나 인증·결제·서버 구현 같은 범위의 내용을 불필요하게 확장하지 않았는지 확인하라.
10. `brandAnchor`가 입력된 경우 모든 관련 화면 설명에서 동일한 고정 묘사를 유지했는지, 입력되지 않은 경우 브랜드 요소를 만들지 않았는지 확인하라.