4장. 화면 설계 확인하기
이번 장에서 할 일
에이전트가 쓴 페이지 목록(사이트맵)과 페이지별 설계 메모(브리프)를 확인해요. 페이지를 빼거나 더하는 일은 화면을 다 만든 뒤보다 지금 하는 게 훨씬 빨라요.
1. 사이트맵 보기
사이트맵에는 모든 페이지와 페이지 사이의 이동, 버튼을 누르면 무슨 일이 일어나는지가 적혀 있어요. 한눈에 보고 싶으면 표로 달라고 하세요.
프롬프트에이전트 대화창에 붙여 넣기
사이트맵을 표로 보여줘. 페이지마다 경로와 한 줄 설명으로.
고루의 사이트맵은 이랬어요.
| 경로 | 페이지 | 하는 일 |
|---|---|---|
/ | 홈 | 내가 보낼 돈과 이번 달 흐름을 한눈에 보고 정산으로 들어가요 |
/expenses | 지출 내역 | 달별 지출을 찾아보고, 항목을 열어 고치거나 지워요 |
/settle | 정산 | 가장 적은 송금 목록을 보고, 금액과 계좌를 복사해요 |
/stats | 통계 | 카테고리 비중, 달별 추이, 사람별 부담을 봐요 |
/house | 우리 집 | 멤버와 초대, 나눔 비율, 한 달 예산을 관리해요 |
/profile | 프로필 | 내 이름, 받을 계좌, 알림을 바꾸고 로그아웃해요 |
/login | 시작하기 | 초대 코드로 집에 들어오거나 다시 로그인해요 |
2. 고치기
빼거나 더할 페이지, 바꿀 이동 방식을 말하세요.
프롬프트에이전트 대화창에 붙여 넣기
통계 페이지는 빼고, 자주 묻는 질문 페이지를 더해줘.
프롬프트에이전트 대화창에 붙여 넣기
휴대폰에서는 화면 아래쪽 탭으로 페이지를 오가게 해줘.
도움말
처음에는 페이지 5~7개로 작게 시작하세요. 페이지가 많을수록 오래 걸리고 사용량도 많이 들어요. 다 만든 뒤에 다듬기로 더할 수 있어요.
3. 브리프 훑어보기
브리프는 페이지마다 무엇을 크게 보여 줄지, 어떤 버튼과 창(모달, 옆에서 열리는 창)이 있는지, 어떤 움직임과 그림을 쓸지 적은 메모예요. 다 읽지 않아도 돼요. 첫 화면만 확인해 보세요.
프롬프트에이전트 대화창에 붙여 넣기
첫 화면 브리프를 다섯 줄로 요약해줘.
4. 한 번에 답하고 진행하기
2~4장의 질문에 한 메시지로 답하는 예예요. 내 답으로 바꿔서 보내세요. Claude Code가 선택지 창을 띄웠다면 "직접 입력"을 고르고 붙여 넣으면 돼요.
프롬프트에이전트 대화창에 붙여 넣기
서비스 질문 답: 같이 사는 2~4명이 쓰고, 평소엔 휴대폰으로 봐. 앱 안에서 돈을 보내지는 않아. 스타일은 1위로 하고 대표 색은 추천대로 해줘. 이름은 2번 후보로 할게. 사이트맵과 화면 설계는 이대로 좋아. 진행해줘.
이렇게 되면 성공
에이전트가 고른 스타일을
DESIGN.md로 저장하고 검사했다고 알려 줘요.사이트맵과 브리프를 확정하고 다음 단계(화면 구성 고르기)로 넘어가요.
막히면
브리프가 너무 길어요: 다 읽지 않아도 돼요.
첫 화면에서 가장 크게 보이는 게 뭐야?처럼 궁금한 것만 물어보세요.이미 확인했는데 또 물어봐요:
사이트맵과 브리프 확인했어. 이대로 진행해줘라고 분명히 보내세요.
에이전트가 물어보면
| 질문 | 답 |
|---|---|
| 사이트맵과 브리프를 확인해 달라 | 고칠 곳을 말하거나 이대로 진행해줘 |
| 휴대폰 메뉴 방식(아래쪽 탭, 햄버거 메뉴) | 추천대로 해줘 |
이 쪽을 다 했나요?