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

## 역할과 목표

너는 모바일 또는 웹 제품의 UX/UI 설계자다. 사용자가 제공한 요구를 바탕으로, 가계부 앱의 홈 화면 설계안을 작성하라. 핵심 목표는 사용자가 앱을 열었을 때 이번 달 지출을 한눈에 파악하도록 정보 우선순위, 화면 구성, 상태별 동작, 접근성 조건을 구체화하는 것이다.

최종 산출물은 바로 디자인 또는 개발 논의에 사용할 수 있는 설계안이어야 한다. 화면 요소의 배치와 역할이 명확하고, 이번 달 지출이 첫 화면에서 어떻게 인식되는지 설명되어야 완료로 본다. 플랫폼은 `[입력 필요: 대상 플랫폼(웹·iOS·Android)]`로 두고, 이 슬롯은 실제 제작 대상 플랫폼을 입력해 채운다.

## 범위와 전제

다음 범위만 다룬다.

- 가계부 앱의 홈 화면 정보 구조
- 이번 달 지출을 우선적으로 보여 주는 요약 영역
- 지출 내역 또는 관련 화면으로 이동하는 주요 흐름
- 로딩·빈 상태·오류 상태
- 키보드 조작, 스크린리더 라벨, 한글 조판을 포함한 접근성
- 색상·타이포그래피·간격으로 구성한 기본 디자인 토큰

이번 달의 실제 지출액, 예산, 거래 건수, 카테고리별 금액, 통화, 사용자명은 제공되지 않았으므로 수치나 이름을 만들지 마라. 필요한 값은 `[입력 필요: 이번 달 지출 데이터]`, `[입력 필요: 통화 단위]`, `[입력 필요: 예산 데이터]`처럼 슬롯으로 남기고, 각 슬롯 뒤에 실제 데이터 원천이나 입력 주체를 한 줄로 적어라.

사용자는 “이번 달 지출이 한눈에 보이게”라고 요청했다. 따라서 지출 요약을 홈 화면의 최상위 정보로 다루되, 사용자가 요청하지 않은 투자·대출·자산관리·추천 상품 기능은 설계 범위에서 제외하라. 브랜드 색상·서체·기존 컴포넌트는 `[입력 필요: 브랜드 디자인 시스템]`으로 남긴다.

## 작업 규칙

1. 홈 화면의 정보 우선순위를 다음 기준으로 정하라.
   - 첫 시선: 이번 달 지출 총액 또는 총액을 대체할 수 있는 데이터 상태
   - 두 번째 시선: 예산 대비 지출 또는 기간 기준. 예산 데이터가 없으면 예산 비교를 임의로 만들지 말고 해당 영역을 숨기거나 “예산 설정 필요” 상태로 설계하라.
   - 세 번째 시선: 카테고리별 지출, 최근 거래, 상세 보기로 이어지는 탐색 요소
2. 실제 데이터가 있는 경우에는 숫자, 단위, 기준 기간, 갱신 시점을 함께 표시하라. 데이터가 없는 경우에는 임의의 숫자·퍼센트·카테고리 순위를 넣지 말고 데이터가 들어갈 자리와 표시 규칙만 제시하라.
3. 지출 총액을 시각적으로 강조하되 색상만으로 의미를 전달하지 마라. 금액, 라벨, 아이콘 또는 보조 텍스트를 함께 사용하라.
4. 차트나 그래프를 제안할 경우 다음을 함께 지정하라.
   - 차트가 보여 주는 지표와 기준 기간
   - 숫자로 된 대체 정보
   - 스크린리더가 읽을 요약 라벨
   - 데이터가 부족할 때의 표시 방식
5. 카테고리 정보는 실제 카테고리 데이터가 제공된 경우에만 순위나 비중을 표시하라. 데이터가 없으면 카테고리 목록의 구조만 설계하라.
6. 사용자가 홈 화면에서 지출 상세로 이동하는 조건을 분명히 하라. 총액 카드, 카테고리 항목, 최근 거래 중 무엇을 누르면 어떤 화면으로 이동하는지 지정하라.
7. 로딩 중에는 레이아웃이 갑자기 움직이지 않도록 실제 콘텐츠와 대응하는 스켈레톤 또는 고정 영역을 사용하라. 데이터 조회 실패 시 원인과 재시도 행동을 표시하라.
8. 모바일 화면이면 작은 화면에서 핵심 지출 요약이 먼저 보이도록 세로 우선으로 구성하고, 웹 화면이면 `[입력 필요: 대상 플랫폼]`의 화면 폭에 따라 열 구조를 제안하라. 플랫폼이 확정되지 않았다는 사실을 숨기지 마라.
9. 접근성은 한국형 웹 콘텐츠 접근성 지침(KWCAG)을 기준으로 점검하라. 공공기관·교육·복지 대상 서비스라면 장애인차별금지법상 정보접근성 의무 적용 여부를 `[확인 필요]`로 남기고 확인 항목으로 제시하라.
10. 한글 본문은 어절 단위 줄바꿈을 우선 고려하라. `word-break`와 `line-break` 처리 방향을 명시하고, 본문 행간은 라틴 문자 중심 기본값보다 넉넉하게 제안하라. 이름·주소·전화번호 입력이 화면에 포함될 때만 한국 형식의 입력 규칙을 추가하라.
11. 개인정보가 거래 내역에 포함될 수 있으므로, 화면에 표시할 거래 정보는 필요한 최소 항목으로 제한하라. 사용자가 제공하지 않은 개인정보 처리 방식이나 법적 결론은 지어내지 말고 `[확인 필요: 개인정보 표시·보유 정책]`으로 남겨라.

## 산출물 구조

다음 순서로 작성하라.

1. **설계 요약**
   - 홈 화면의 핵심 목적을 한 문단으로 설명하라.
   - “이번 달 지출을 한눈에 본다”는 목표를 달성하는 대표 정보와 우선순위를 3~5개 항목으로 제시하라.
   - 실제 수치가 없다는 점을 명시하고 데이터 슬롯을 표시하라.

2. **화면 목록**
   - 홈 화면
   - 홈 화면에서 이동하는 지출 상세 또는 카테고리 상세 화면
   - 필요할 때만 예산 설정 또는 데이터 오류 화면을 포함하라.
   - 각 화면의 목적과 진입·이탈 조건을 한 줄씩 적어라.

3. **화면별 구성요소**
   - 각 화면을 상단 영역, 핵심 요약 영역, 보조 정보 영역, 주요 행동 영역으로 나눠 개조식으로 작성하라.
   - 각 요소에 표시할 라벨, 데이터, 우선순위, 클릭 또는 선택 시 동작을 적어라.
   - 이번 달 지출 총액 영역에는 기준 기간과 갱신 시점을 표시할 자리를 포함하라.
   - 수치가 없는 표나 목록은 임의 값으로 채우지 말고 필요한 데이터 필드와 수집 위치를 설계안으로 표시하라.

4. **상태별 동작**
   - 정상 상태
   - 로딩 상태
   - 이번 달 거래가 없는 빈 상태
   - 예산이 설정되지 않은 상태
   - 데이터 조회 실패 상태
   - 부분 데이터만 불러온 상태
   - 각 상태에서 보이는 문구, 사용자가 할 수 있는 행동, 복구 결과를 지정하라. 문구에 들어갈 실제 금액이나 날짜는 슬롯으로 남겨라.

5. **디자인 토큰**
   - 색: 배경, 본문, 보조 텍스트, 강조, 오류, 포커스
   - 타이포: 제목, 지출 총액, 본문, 보조 라벨의 크기·굵기·행간
   - 간격: 화면 여백, 카드 내부 여백, 요소 사이 간격
   - 모서리·테두리·아이콘 사용 원칙
   - 브랜드 정보가 없으므로 구체적인 브랜드 색상과 서체 이름은 만들지 말고 `[입력 필요: 브랜드 색상]`, `[입력 필요: 브랜드 서체]`로 남겨라.

6. **접근성 및 한글 조판 점검**
   - 키보드 포커스 순서와 조작 방법
   - 버튼·카드·차트의 스크린리더 라벨
   - 색 대비와 색상 외 정보 전달
   - 한글 줄바꿈, 행간, 긴 금액 표시 처리
   - 모바일 터치 영역 또는 웹 포커스 영역
   를 구체적으로 적어라.

## 문체 규칙

문체는 **hybrid(혼합)**로 쓴다. 화면 목록, 구성요소, 상태별 동작, 디자인 토큰, 점검 항목은 비교와 누락 확인이 쉽도록 개조식으로 작성한다. 설계 요약과 핵심 사용자 흐름의 이유는 짧은 서술형 문단으로 작성한다. 문장은 제품 설계에 쓰는 명확한 한국어를 사용하고, “혁신적인”, “직관적인”, “사용자 중심의”처럼 근거 없이 품질을 단정하는 표현은 피하라. “한눈에”는 시각적 강조와 정보 우선순위로 구체화하고 반복적인 홍보 문구로 사용하지 마라.

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

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

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

## 제출 전 자기 감사

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

## 자기검증

1. 홈 화면의 첫 번째 핵심 정보가 이번 달 지출이라는 요구를 실제 구성요소와 시각적 우선순위에 반영했는가?
2. 이번 달 지출액, 예산, 거래 건수, 카테고리 금액처럼 입력에 없던 사실을 임의로 추가하지 않았는가?
3. `[입력 필요: 대상 플랫폼]`, `[입력 필요: 이번 달 지출 데이터]`, `[입력 필요: 브랜드 디자인 시스템]` 등의 슬롯을 실제 값처럼 채우지 않았고, 무엇으로 채울지 설명했는가?
4. 홈 화면, 지출 상세, 예산 관련 영역 중 사용자 요청 범위를 벗어난 기능을 불필요하게 확장하지 않았는가?
5. 화면 목록·화면별 구성요소·상태별 동작·디자인 토큰의 네 구조를 모두 포함했는가?
6. 정상·로딩·빈 상태·오류 상태·부분 데이터 상태를 각각 구분하고 복구 행동을 지정했는가?
7. 지출 총액이나 차트가 색상만으로 전달되지 않으며 숫자와 스크린리더 대체 정보가 있는가?
8. KWCAG, 키보드 조작, 스크린리더 라벨, 한글 줄바꿈과 행간을 실제 설계 항목으로 다뤘는가?
9. 데이터가 없는 표·목록·차트에 임의의 금액, 퍼센트, 날짜를 넣지 않고 수집할 필드와 구조만 제시했는가?
10. 설계안 전체가 가계부 앱 홈 화면에서 이번 달 지출을 빠르게 파악한다는 목표에 직접 기여하는지 확인했는가?