바이브코딩 훈련소 — vol3_flow_builder.md
~/vibecoding $ cat vol3_intro.txt

만들기 전에 흐름부터 그린다

AI한테 무작정 "만들어줘"를 시키기 전에,
내가 먼저 무엇을 어떤 순서로 만들지 그려야 한다.
플로우가 없으면 AI도 방향을 잃는다.

"일단 플로우를 만들어야 해요. 결국 코딩이라서 그걸 못하면 AI도 못 쓸 거에요." — 리이오, 실제 대화에서
예상 시간35–45분
전제Vol.0–1 완료
핵심 스킬분해 + 순서화
다음Vol.5 실전
01 · 개념

AI가 길을 잃는 이유

"앱 만들어줘"라고 하면 AI는 시작점을 임의로 잡는다.
그 시작점이 내가 생각한 것과 다르면, 모든 후속 결과가 어긋난다.
내가 먼저 단계를 나눠야 AI가 각 단계를 제대로 채울 수 있다.

좋은 협업 플로우 예시 — 할일 앱 만들기
1
기능 목록 정의
할일 추가, 완료 체크, 삭제, 목록 표시
내가 정함
2
데이터 구조 설계
Todo 모델: id, title, isCompleted, createdAt
AI와 함께
3
화면 구성
목록 화면 → 추가 시트 → 빈 상태 화면
내가 결정
4
각 화면 구현 (순서대로)
목록 화면 → 추가 기능 → 삭제 기능 순으로 하나씩
AI가 각 단계 구현
5
연결 & 테스트
전체 흐름 연결, 엣지 케이스 처리
AI + 내가 검증
02 · 분해

큰 목표를 작은 단위로 쪼갠다

"할 수 있는 가장 작은 단위"로 쪼갤수록 AI 결과가 정확해진다.
"로그인 기능 만들어줘" → 너무 크다.
"이메일 입력 필드 + 유효성 검사 함수만 만들어줘" → 딱 맞다.

🔪 분해 기준

한 번의 AI 요청으로 완성 가능한가?
답이 "그게 뭔지에 따라 달라요"라면 → 아직 크다.
답이 "네, 코드 50줄 내외로 나올 것 같아요"라면 → 적당하다.

실습 A
기능 분해 연습
시나리오 "회원가입 기능"을 만들려 한다. 이것을 AI에게 하나씩 넘길 수 있는 가장 작은 단위로 나눈다. 최소 5단계.
회원가입 기능 → 단계 분해
1
2
3
4
5
6
분해한 각 단계 중 AI에게 넘길 것과 내가 결정할 것을 구분하면?
03 · 순서

순서가 틀리면 다 꼬인다

UI 먼저 만들고 데이터 모델을 나중에 잡으면, UI를 다 뜯어고쳐야 한다.
의존 관계를 파악하고, 기초부터 쌓아야 한다.

📐 순서 원칙

데이터 모델 → 로직 → UI 순서가 기본이다.
UI가 어떻게 생겼는지는 나중 문제다. 무슨 데이터를 어떻게 저장하는지가 먼저다.
AI에게도 이 순서로 요청해야 한다.

실습 B
내 프로젝트 순서 설계
시나리오 지금 만들고 있거나, 만들고 싶은 것을 하나 골라 작업 순서를 설계한다. 없으면 "날씨 앱 만들기"로 진행한다.
무엇을 만드는가?
작업 순서 (데이터 → 로직 → UI 원칙 참고)
내 프로젝트 — 작업 순서
1
2
3
4
5
1단계에 대한 AI 요청문 (Vol.1 공식 적용)
0 자
04 · 루프

요청 → 확인 → 개선의 반복 구조

플로우를 짜고 AI에게 단계별로 넘겨도, 한 번에 완벽하게 나오지 않는다.
요청 → 확인 → 개선의 루프가 하나의 완성 사이클이다.

기본 반복 루프
요청
AI
생성
검증
개선 요청
AI
수정
완료 판정
↺ 단계가 완료될 때까지 반복
실습 C
내 루프 패턴 점검
현재 AI와 작업할 때 루프가 몇 회 만에 완료되는 편인가?
루프가 길어지는 주요 원인은?
요청이 너무 모호해서 (→ Vol.1 복습)
한 번에 너무 많은 걸 요청해서
검증을 안 하고 바로 다음 단계로 가서
순서가 뒤바뀌어서 기초가 불안정해서
이 훈련 후 내 루프를 어떻게 바꾸겠는가?
Vol.3 완료

플로우를 그리는 사람은
흔들리지 않는다.

이제 AI에게 무언가를 시키기 전에
분해 → 순서화 → 단계별 요청 → 루프
이 흐름이 몸에 밸 때까지 반복한다.

→ 추천
Vol.5 케이스별 실전
Vol.4
코딩 기초 연결
Vol.2
응답 해석 (먼저 안 했다면)