이 단계에서 하는 것: 프론트엔드 개발자 서브에이전트를 설정하고 회원가입·로그인, 거래 목록·입력, 월별 통계 화면을 구현한다. 화면에서 앞서 만든 API를 호출해 실제 데이터와 AI 결과를 표시한다. 다음 단계로 넘길 것: 로그인한 사용자가 자기 거래와 통계·AI 결과를 볼 수 있도록 화면→API→Supabase가 연결된 앱.
지금까지 Supabase 데이터, API 명세서, 백엔드 기능을 준비했다. 이제 사용자가 이용할 화면을 구현한다. 잔액·통계는 서버가 계산한 값을 받아 표시하고, AI 추천도 서버 응답을 사용한다. 이번 단계에서 화면과 서버의 책임이 제대로 나뉘어 있는지 확인한다.
docs/화면기획서.md가 만들어져 있고, 화면 목록과 상태(빈 상태·로딩·에러), 수입=녹색/지출=빨강 규칙이 적혀 있다.docs/API명세.md가 만들어져 있다.docs/가이드/디자인시스템.pdf가 있다.먼저 서브에이전트의 담당 범위와 기준을 정한 뒤 화면 구현을 요청한다.
① 정의 — 서브에이전트 생성
'프론트엔드 개발자' 서브에이전트를 만들어줘. 화면(UI) 구현만 담당하고 docs/화면기획서.md와 docs/API명세.md를 기준으로 작업한다. 라이브러리는 최신 공식 문서를 확인하고 필요한 의존성을 추가한다. 서버 로직·DB·API 명세서는 수정하지 않는다.서브에이전트를 만든 뒤에는 Claude Code를 한 번 다시 띄운다(/exit 뒤 claude). 새 서브에이전트는 다음 세션부터 보인다.
② 실행 — 화면과 로그인 만들기
프론트엔드 개발자 서브에이전트로 프론트엔드 개발해줘. 결제는 뒤에서 따로 붙일 거니까 이번엔 빼줘. 결제를 권하는 버튼은 두고 결제 연결만 뒤로 미룬다.화면기획서·명세에 없는 세부는 기획서의 원칙대로 네가 정하고 보고에 적어. 기획서·명세·API 코드는 고치지 않는다.확인은 내가 한다. 브라우저를 열지 마.지시가 짧은 이유: 화면 목록·요소·상태·이동 흐름은
화면기획서에, 요청할 API는API명세에 적혀 있다. 화면기획서에서 지정한 색상·간격 토큰은 앞에서 아키텍트가 프로젝트 설정에 등록했다. 서버가 검증·계산을 맡고 클라이언트가 DB에 직접 접근하지 않는다는 원칙은CLAUDE.md에 있다. 서브에이전트는 이 문서들을 기준으로 작업한다.
이렇게 나오면 성공: AI가 프론트엔드 개발자 역할을 맡고, 다음 화면 파일들이 만들어진다. - 회원가입/로그인 화면. 로그인하지 않은 상태에서는 가계부 화면으로 들어갈 수 없다. - 거래 내역 목록 화면, 수입·지출 입력 화면, 월별 통계 화면. - 거래 입력 화면에 AI 추천 카테고리가 표시된다. 통계 화면의 AI 요약 자리에는, 무료 사용자에게 결제를 권하는 버튼이 표시된다(요약은 프리미엄에서 열린다). - 색·간격은 임의 값이 아니라 디자인시스템 토큰으로 지정되고, 수입은 녹색·지출은 빨강으로 구분된다.
구현이 끝나면 Claude에게 만든 화면과 확인한 내용을 보고받는다. 보고 끝에 "정하지 못한 것" 몇 건(로딩 중 버튼 상태, 문서에 없는 오류 문구 등)이 남는 것은 정상이다 — "기획서·명세대로, 없는 건 지금 임시 처리대로 두고 문서는 고치지 마"라고 한 번만 답한다. 아키텍트가 등록한 토큰에 빠진 것(반경·글자 크기)을 프론트엔드가 보강하는 것도 정상이다. 보고에서 ① 로그인하지 않은 사용자가 가계부 화면에 접근할 수 없는지 ② 잔액·통계·AI 결과를 서버 응답으로 표시하는지 확인한다. 이어서 사람도 브라우저에서 직접 동작을 확인한다.
AI의 완료 보고를 받은 뒤 서버를 띄우게 하고 브라우저에서 직접 화면을 사용해 본다.
서버 실행해서 url 알려줘. 내가 확인해볼게demo@moneynote.dev / moneynote1234, 앞에서 만든 것)으로 로그인한다. (회원가입 화면도 한 번 눌러 새 계정 만들기가 되는지 확인해 본다.)이렇게 나오면 성공: 로그인한 뒤 입력한 거래와 통계·AI 결과가 화면에 표시된다. 문제가 있다면 화면 이름과 증상을 AI에게 알려 주고 수정을 요청한다.
로그인부터 통계 확인까지 이어지는 화면을 구현했다. 다음 단계에서는 결제 기능을 추가하고, 이후 QA·보안 역할이 전체 흐름을 검증한다.