이 단계에서 하는 것: 디자이너 역할을 세우고, 앞에서 만든 PRD와 회사 디자인 시스템을 근거로 화면기획서(
docs/화면기획서.md)를 만든다. 다음 단계로 넘길 것: 화면 목록과 화면별 요소·상태·흐름이 디자인 시스템 토큰으로 지정된 화면기획서.
기획자가 무엇을 만들지 정했다면, 다음은 그것을 어떤 화면으로 보여줄지 정하는 일이다. 이번에는 AI에게 디자이너 자리를 맡긴다. 색과 간격을 그때그때 새로 정하지 않고, 회사가 이미 정해 둔 docs/가이드/디자인시스템.pdf의 토큰(수입=녹색, 지출=빨강 등)을 근거로 삼아 화면기획서를 쓴다. 이렇게 하면 다음 단계의 화면 구현이 문서 한 곳을 기준으로 어긋나지 않는다.
docs/PRD.md가 만들어졌고, 완료 기준이 적혀 있다.docs/가이드/디자인시스템.pdf가 프로젝트에 들어 있다(색·타이포·간격 토큰과 컴포넌트 규칙이 정의돼 있다).Claude Code에 아래 프롬프트를 그대로 붙여 넣는다. 역할을 세우는 문장과 화면기획서를 만드는 지시가 한 번에 들어 있다.
'UX 디자이너' 역할을 만들어줘. 화면을 설계하고 화면기획서를 관리한다.
이 역할로, docs/PRD.md와 docs/가이드/디자인시스템.pdf 를 근거로 화면기획서를 docs/화면기획서.md로 만들어줘. 포함할 것:
- 화면 목록: 로그인/회원가입, 거래 내역 목록, 수입·지출 입력, 월별 통계
- 화면별 요소와 상태(빈 상태·로딩·에러, 수입=녹색/지출=빨강 등 디자인시스템 규칙 적용)
- 화면 흐름(로그인 후 목록 → 입력 → 통계)
색·간격은 임의로 정하지 말고 디자인시스템의 토큰 이름으로 지정해줘.
이렇게 나오면 성공: docs/화면기획서.md가 만들어지고, 화면 목록(로그인/회원가입, 거래 내역 목록, 수입·지출 입력, 월별 통계)과 화면별 요소·상태가 정리된다. 색·간격이 임의의 값이 아니라 디자인 시스템의 토큰 이름(예: bg-primary-600, text-income-600, text-expense-600, p-4)으로 적혀 있다.
만들어진 문서를 열어 화면 흐름과 상태가 빠짐없이 담겼는지 확인한다.
docs/화면기획서.md를 열어서, 화면별로 빈 상태·로딩·에러가 모두 정의됐는지,
그리고 로그인 후 목록 → 입력 → 통계로 이어지는 흐름이 적혀 있는지 짚어줘. 지금 문서만 확인하고 코드는 만들지 마.
이렇게 나오면 성공: 각 화면에 빈 상태·로딩·에러가 정의돼 있고, 로그인 후 목록에서 입력, 통계로 이어지는 흐름이 확인된다.
금액의 방향(수입·지출)이 디자인 시스템 규칙대로 표시되도록 지정됐는지 확인한다.
화면기획서에서 금액 표시가 디자인시스템 규칙을 따르는지 확인해줘.
수입은 녹색(text-income-600)에 +, 지출은 빨강(text-expense-600)에 −, 잔액은 중립색으로 지정됐는지 짚어줘.
색만으로 구분하지 않고 부호(+/−)를 함께 쓰는지도 확인해줘. 코드는 만들지 마.
이렇게 나오면 성공: 수입=녹색(+), 지출=빨강(−), 잔액=중립색으로 지정돼 있고, 색과 부호를 함께 쓰도록 적혀 있다. — 화면이 회사 디자인 기준을 그대로 따르는 것이다.
docs/화면기획서.md를 만들었다.docs/PRD.md나 디자인 시스템 문서가 안 보이면 이전 단계로 돌아가 파일을 확인한다.다음 단계에서 DBA 역할을 세워 데이터와 인증을 설계한다.