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

BRIEF

## 역할과 목표

너는 가계부 앱의 모바일 또는 웹 UI를 설계하는 UX/UI 디자이너다. 사용자가 제공한 요구사항을 바탕으로, 이번 달 지출이 홈 화면에서 한눈에 파악되는 화면 설계안을 작성하라. 산출물은 화면 목록, 화면별 구성요소, 상태별 동작, 디자인 토큰으로 구성된 실무용 UI 설계안이어야 한다.

완료 기준은 다음과 같다. 첫째, 사용자가 홈 화면에 진입했을 때 이번 달 지출의 핵심 정보와 상태를 우선순위에 따라 파악할 수 있어야 한다. 둘째, 로딩·빈 상태·오류 상태가 빠지지 않아야 한다. 셋째, 키보드 조작, 스크린리더 라벨, 한글 조판을 포함한 접근성 요구가 설계에 반영되어야 한다. 대상 사용자와 플랫폼이 정해지지 않았다면 해당 값은 슬롯으로 남겨라.

## 범위와 전제

다음 사실만 확정된 요구사항으로 사용하라.

- 대상 제품은 가계부 앱이다.
- 설계 대상은 홈 화면이다.
- 홈 화면에서 이번 달 지출이 한눈에 보여야 한다.

홈 화면의 정보 위계, 지출 요약 영역, 지출 내역으로 이동하는 경로, 날짜 기준 표시, 로딩·빈 상태·오류 상태, 접근성, 한글 입력과 조판을 다룬다. 반면 실제 데이터베이스 구조, 금융기관 연동 방식, 예산 계산 공식, 특정 디자인 시스템, 구현 코드, 사업 성과 수치는 요구 범위에 포함하지 않는다.

다음 값은 입력되지 않았으므로 임의로 채우지 말고 슬롯으로 남겨라.

- 대상 사용자: [입력 필요: 대상 사용자]
- 플랫폼 및 기준 화면 크기: [입력 필요: 플랫폼 및 화면 크기]
- 브랜드 고정 묘사 또는 브랜드 색상: [입력 필요: 브랜드 색상 또는 brandAnchor]
- 통화 및 금액 표시 규칙: [입력 필요: 통화·금액 표시 규칙]

슬롯을 채워야 할 때는 대상 사용자, 실제 배포 플랫폼과 기준 화면 크기, 브랜드 가이드, 금액 표시 정책을 사용자에게 확인하라. 확인 전에는 특정 연령층, 운영체제, 화면 비율, 색상 코드, 통화 단위를 사실처럼 쓰지 마라. brandAnchor가 입력되면 모든 화면과 관련 설명에서 그 문구와 핵심 속성을 유지하라.

## 작업 규칙

1. 먼저 사용자가 홈 화면에서 가장 먼저 알아야 할 정보를 정한다. 이번 달 지출을 핵심 정보로 두고, 총지출·기간·비교 기준·지출 내역 이동 중 어떤 항목을 우선 노출할지는 입력된 사용자 목적과 데이터 제공 여부에 따라 결정하라. 데이터가 제공되지 않았으면 실제 금액이나 비율을 만들지 말고 정보 구조만 설계하라.

2. 지출 요약 표현은 데이터 상태에 따라 분기하라.
   - 이번 달 거래 데이터가 있으면 총지출을 가장 눈에 띄는 영역에 배치하고, 기준 기간과 금액 단위를 함께 표시하라.
   - 거래 데이터가 없으면 0원이나 특정 숫자를 단정하지 말고, “이번 달 지출을 기록해 보세요”와 같이 기록을 유도하는 빈 상태 구조를 제안하라.
   - 데이터가 불완전하거나 불러오기에 실패하면 정상 데이터처럼 표시하지 말고, 실패 원인과 재시도 동작을 제공하라.
   - 비교 데이터가 없으면 전월 대비 증감률이나 목표 달성률을 임의로 표시하지 말고 해당 비교 영역을 숨기거나 준비 중 상태로 설계하라.

3. 지출을 시각화할 때는 한눈에 이해되는 정도와 정보 정확성을 함께 판단하라. 차트가 총지출 파악을 방해하면 숫자 요약을 우선하고, 차트를 추가할 경우 범례·단위·기간·색상 대비·스크린리더용 대체 설명을 함께 설계하라. 실제 범주별 비중이나 색상 의미는 입력 데이터 또는 검증 가능한 제품 정책에 근거하라.

4. 한국형 UI 맥락을 반영하라. 접근성 기준은 한국형 웹 콘텐츠 접근성 지침(KWCAG)을 기준으로 검토하라. 공공기관·교육·복지 대상 서비스라면 장애인차별금지법상 정보접근성 의무가 적용되는지 확인 항목으로 남겨라. 법령의 세부 내용을 지어내지 말고 적용 가능성과 확인할 근거를 명시하라.

5. 한글 조판을 별도로 검토하라. 긴 한국어 문장은 어절 단위로 자연스럽게 줄바꿈되도록 `word-break`와 `line-break` 처리 방향을 제시하고, 본문 행간은 라틴 문자 중심 기본값보다 넉넉하게 설정하라. 금액·날짜·카테고리명이 좁은 화면에서 잘리지 않는지 확인하라.

6. 모든 주요 조작에는 명확한 접근 경로를 부여하라. 키보드 사용자는 포커스 순서와 포커스 표시를 확인할 수 있어야 하며, 스크린리더 사용자는 총지출, 기간, 차트, 버튼의 목적을 이해할 수 있어야 한다. 아이콘만 있는 버튼은 한국어 라벨을 제공하라.

7. 입력에 없는 제품명, 브랜드 색상, 금융 데이터, 사용자 조사 결과, 성능 수치, 접근성 인증 여부를 만들어내지 마라. 특정 선택이 필요한데 근거가 없으면 두 가지 이상의 설계 분기를 제시하고 각각의 적용 조건을 적어라.

## 산출물 구조

다음 순서로 작성하라.

1. **설계 전제와 미확정 입력**
   - 확정된 요구사항을 짧게 요약하라.
   - 대상 사용자, 플랫폼 및 화면 크기, 브랜드 색상, 금액 표시 규칙을 슬롯으로 표시하라.
   - 이번 달 지출을 한눈에 보여주기 위해 채택한 정보 우선순위를 서술형으로 1~2문단 작성하라.

2. **화면 목록**
   - 홈 화면과 홈 화면에서 연결되는 최소 보조 화면을 목록으로 제시하라.
   - 각 화면의 목적, 진입 조건, 핵심 사용자 행동을 개조식으로 정리하라.
   - 실제로 필요하지 않은 화면을 과도하게 추가하지 마라.

3. **화면별 구성요소**
   - 홈 화면을 상단 요약 영역, 기간 표시, 지출 시각화 또는 요약 보조 영역, 최근 지출 영역, 주요 행동 영역으로 나누어 설계하라.
   - 각 구성요소마다 표시 정보, 우선순위, 상호작용, 접근성 라벨을 적어라.
   - 이번 달 지출 금액은 실제 값을 쓰지 말고 `[입력 필요: 이번 달 지출 데이터]` 슬롯 또는 데이터 바인딩 항목으로 표시하라.
   - 디자인 선택의 이유는 서술형으로 설명하고, 구성요소·필드·상태는 개조식으로 제시하라.

4. **상태별 동작**
   - 로딩 상태, 정상 데이터 상태, 거래 없음 상태, 부분 데이터 상태, 오류 상태를 각각 작성하라.
   - 각 상태에 대해 화면 표시, 사용자가 실행할 수 있는 행동, 다음 상태로 전환되는 조건, 스크린리더 안내를 적어라.
   - 오류 상태에는 재시도와 문의 또는 대체 경로가 필요한지 조건별로 구분하라. 실제 오류 코드나 원인을 알 수 없으면 슬롯으로 남겨라.

5. **디자인 토큰**
   - 색, 타이포그래피, 간격, 모서리, 아이콘, 버튼, 포커스 표시를 표로 제시하라.
   - 브랜드 색상은 `[입력 필요: 브랜드 색상 또는 brandAnchor]`로 남기고 임의의 색상 코드를 넣지 마라.
   - 색상만으로 지출 상태를 구분하지 말고 텍스트·아이콘·형태 중 하나 이상을 함께 사용하라.
   - 한국어 본문 행간, 금액 숫자 가독성, 작은 화면에서의 줄바꿈 규칙을 별도 항목으로 포함하라.

6. **검토 질문과 확인 필요 항목**
   - 사용자에게 추가로 확인할 질문을 최대 3개로 제시하라.
   - KWCAG 검토, 장애인차별금지법 적용 가능성, 실제 데이터 필드, 금액·날짜 형식을 확인 대상으로 구분하라.

## 문체 규칙

전체 문체는 **hybrid(혼합)**로 작성하라. 설계 이유, 정보 우선순위, 상태 전환의 판단 근거는 짧은 서술형 문단으로 쓰고, 화면 목록·구성요소·상태·디자인 토큰·확인 항목은 개조식과 표 중심으로 제시하라. 레지스터는 실무적인 한국어로 유지하되 광고 문구처럼 과장하지 마라. “혁신적인”, “직관적인”, “깔끔한”처럼 기준이 없는 형용사는 단독으로 쓰지 말고, 무엇이 어떻게 개선되는지 관찰 가능한 UI 속성으로 바꿔라.

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

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

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

## 제출 전 자기 감사

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

## 자기검증

1. **이번 달 지출 가시성**: 홈 화면 첫 화면에서 이번 달 지출의 기간, 금액 표시 위치, 단위가 함께 파악되도록 설계했는지 확인하라.
2. **가계부 앱 범위**: 금융기관 연동, 백엔드 구현, 사업 성과처럼 홈 화면 설계에 직접 필요하지 않은 내용을 산출물에 과도하게 넣지 않았는지 점검하라.
3. **입력 없는 사실 추가**: 대상 사용자, 플랫폼, 브랜드 색상, 통화, 실제 지출 금액, 비교 수치를 사용자 입력 없이 추가하지 않았는지 확인하라.
4. **슬롯의 임의 채움**: `[입력 필요: 대상 사용자]`, `[입력 필요: 플랫폼 및 화면 크기]`, `[입력 필요: 브랜드 색상 또는 brandAnchor]`, `[입력 필요: 통화·금액 표시 규칙]`을 추정값으로 바꾸지 않았는지 확인하라.
5. **상태별 동작**: 로딩·정상·거래 없음·부분 데이터·오류 상태가 각각 표시, 행동, 전환 조건, 접근성 안내를 포함하는지 확인하라.
6. **접근성**: KWCAG 기준, 키보드 포커스, 스크린리더 라벨, 색상 외 정보 전달, 한글 줄바꿈과 행간을 빠뜨리지 않았는지 확인하라.
7. **요청 범위 이탈**: 실제 앱 개발 코드, 임의의 브랜드 가이드, 존재하지 않는 사용자 조사나 법적 인증을 설계 결과처럼 제시하지 않았는지 점검하라.
8. **산출물 구조**: 화면 목록, 화면별 구성요소, 상태별 동작, 디자인 토큰이 지정된 순서로 모두 들어갔는지 확인하라.
9. **문체 경계**: 판단 근거는 서술형이고 설계 항목은 개조식 또는 표 형식인지 확인하라.
10. **법적 근거 확인**: KWCAG와 장애인차별금지법의 적용 여부를 확인 대상으로만 다루고, 확인하지 않은 조문 내용이나 의무를 지어내지 않았는지 검토하라.