2 / 9약 25분입문

기획 — 한 줄부터 ‘하지 않을 것’까지

모호한 꿈 → 에이전트가 실행 가능한 주문서로

이 장을 끝내면

제품 한 줄 소개 쓰기
첫 버전에 넣을/뺄 것 나누기
에이전트용 작업 지시서 1장 만들기

왜 기획이 먼저인가

‘멋진 앱’만 말하면 에이전트는 추측합니다. 추측이 쌓이면 나중에 전부 고칩니다. 종이에 10분만 써도 비용이 줄어듭니다.

1) 누구의 무슨 고통인가

기술 없이 씁니다. 예: ‘홍길동이 주말에 만든 결과물을 링크와 한 줄로 남기고 피드백을 받고 싶다’.

지금 하기

대상 사용자 한 명(가명) 정하기
그 사람이 지금 불편한 점 한 문장
성공하면 그 사람이 하는 행동 한 문장 (예: 링크를 동료에게 보냄)

2) 제품 한 줄 (엘리베이터 피치)

‘OO하는 사람을 위해, OO을 해주는 웹앱’ 형식.

예:
주말에 만든 실험 앱을 한 줄·링크로 남기고
다른 사람에게 짧은 피드백을 받고 싶은 사람을 위한
결과물 공유 게시판.

3) 첫 버전 화면 목록 (3~5개만)

화면 이름을 일상어로 적습니다. 기술 스택 이름 금지.

홈: 최근 결과물 목록
올리기: 제목·한 줄·링크 입력
상세: 하나 눌러 보기 + 피드백 칸
(나중) 로그인
(나중) 내 글만 보기

지금 하기

종이/노션에 네모 3개 그리고 화면 이름만 쓴다
각 화면에서 ‘사용자가 누르는 버튼’ 1개만 표시

4) 하지 않을 것 (비범위) — 가장 중요

욕심이 프로젝트를 죽입니다. 첫 주에는 아래를 ‘안 함’에 넣으세요.

결제·구독
채팅·실시간
완벽한 디자인·다크모드 미니멀 애니메이션
관리자 통계 대시보드
앱스토어 네이티브 앱 (웹 먼저)

5) 완료 조건 (Definition of Done)

‘잘 되면 좋겠다’가 아니라 체크 가능한 문장.

첫 버전 완료:
[ ] 인터넷 URL로 접속된다
[ ] 제목·한 줄·링크를 올리면 목록에 보인다
[ ] 다른 브라우저(또는 시크릿)에서도 목록이 보인다
[ ] 내가 올린 글을 눌러 상세를 볼 수 있다
[ ] .env 키가 깃허브에 없다

6) 에이전트용 작업 지시서 템플릿

매 작업마다 이 뼈대를 복사합니다.

목표: (한 문장)
하지 말 것: (3개)
관련 경로: (모르면 ‘새 Next 앱 기준으로 제안’)
스택: Next.js App Router, TypeScript, Tailwind, shadcn, Supabase(또는 아직 없음)
완료 조건:
- 명령: (예: npm run build 성공)
- 화면: (예: / 에서 카드 1개 보임)
확인 방법: 내가 브라우저로 직접 본다

에이전트에게 복붙

위 지시서 빈칸을 내 아이디어에 맞게 채워 초안을 제안해줘. 기술 자랑 문장 금지. 비범위 5개 포함.

막히면

아이디어가 너무 크면: ‘목록 + 글 하나 쓰기’만 남기고 전부 비범위
뭘 만들지 모르겠으면: 본인 일상에서 ‘표 계산·반복 문자·링크 모음’ 중 하나

첫 버전 완료: [ ] 인터넷 URL로 접속된다 [ ] 제목·한 줄·링크를 올리면 목록에 보인다 [ ] 다른 브라우저(또는 시크릿)에서도 목록이 보인다 [ ] 내가 올린 글을 눌러 상세를 볼 수 있다 [ ] .env 키가 깃허브에 없다

목표: (한 문장) 하지 말 것: (3개) 관련 경로: (모르면 ‘새 Next 앱 기준으로 제안’) 스택: Next.js App Router, TypeScript, Tailwind, shadcn, Supabase(또는 아직 없음) 완료 조건: - 명령: (예: npm run build 성공) - 화면: (예: / 에서 카드 1개 보임) 확인 방법: 내가 브라우저로 직접 본다