설계도 (블루프린트) — AI가 만든 도면, 비개발자가 봐야 할 곳
이 레슨이 끝나면
- "블루프린트 = 본인 SaaS의 종합 설계 도면"이라는 한 줄 정의를 안다
- vuild.kr PLAN 4단계에서 자동 생성된 설계도를 보고, 비개발자가 봐야 할 3가지(모델 / 관계 / 핵심 페이지)를 짚었다
- 설계도가 본인 의도와 어긋나면 어떻게 다시 만들지(AI Coach 요청 / 기능 명세 재방문) 안다
블루프린트가 뭐예요?
블루프린트(Blueprint) = 본인 SaaS의 종합 설계 도면이에요. 건축으로 비유하면 집을 지을 때 가장 먼저 그리는 평면도와 같아요. 벽이 어디 있고, 문이 어디 있고, 거실과 안방의 관계는 어떤지 한 눈에 보여주는 그림. 소프트웨어에서는 다음 4가지를 한 화면에 정리한 거예요.
| 설계도 요소 | 건축 비유 | 실제로 뭔지 |
|---|---|---|
| 모델 (Model) | 방의 종류 | 데이터의 종류 — 예: User / Book / Note / Comment |
| 관계 (Relation) | 방과 방의 연결 | "User has many Books" "Book has many Notes" 같은 연결 |
| 페이지 (Page) | 방의 내부 디자인 | 사용자가 보는 화면 — 예: 로그인 / 책 목록 / 책 상세 |
| API | 방을 오가는 통로 | 화면과 데이터를 연결하는 약속 — 예: GET /books, POST /books |
비개발자에게 가장 중요한 건 "모델 / 관계 / 페이지" 세 가지예요. API는 일단 AI가 자동으로 만들어주니 너무 신경 쓸 필요 없어요.
옆 탭에 PLAN 4단계 열기
옆 탭 주소
https://vuild.kr/projects/[본인프로젝트번호]/plan/blueprint
처음 들어가면 자동으로 생성이 시작돼요(또는 "블루프린트 생성하기" 버튼이 보이면 한 번 클릭). 기능 명세 base로 AI가 1~2분 동안 도면을 만들어요. 다 끝나면 한 화면에 모델 박스 + 관계 화살표 + 페이지 리스트가 떠요.
비개발자가 봐야 할 3가지
블루프린트 화면은 정보가 많아서 처음 보면 압도돼요. 그래서 비개발자가 진짜 봐야 할 3가지를 한정해 둘게요. 나머지는 일단 무시해도 돼요.
① 모델 이름 — 한국어로 풀어 봤을 때 자연스러운가
모델 박스 안에 영어 이름이 적혀 있어요. 예: User, Book, Note.
한국어로 풀어 봤을 때 본인 서비스의 핵심 데이터와 일치해야 해요.
예: 독서 노트 앱이면 User(사용자) / Book(책) / Note(메모) — 이건 자연스러워요.
만약 Article이나 Order 같은 엉뚱한 이름이 있으면 의도와 어긋난 신호예요.
② 관계 — 화살표가 본인 머리 속과 같은 방향인가
모델 박스끼리 화살표가 그려져 있어요. 화살표에 보통 "has many"(여러 개를 가짐) 또는 "belongs to"(소속) 라벨이 있어요. 예: User has many Books = "한 사용자가 여러 권의 책을 가짐". 본인 서비스를 머리 속에 그렸을 때 이 관계가 맞는지 확인하세요. 만약 거꾸로 그려져 있으면(예: Book has many Users) AI가 본인 의도를 잘못 이해한 거예요.
③ 핵심 페이지 — Must 기능이 다 페이지로 잡혀 있나
화면 한쪽에 페이지 리스트가 있어요. 예: 홈 / 로그인 / 회원가입 / 책 목록 / 책 상세 / 책 추가. 기능 명세에서 Must로 매긴 카드가 다 페이지로 들어가 있는지 확인하세요. 예: "책 추가"가 Must인데 페이지 리스트에 그 화면이 없으면 → AI가 빠뜨린 거예요.
설계도가 본인 의도와 어긋나면 — 3가지 대응
| 상황 | 대응 |
|---|---|
| 모델 이름이 엉뚱함 | AI Coach에 "Article 모델을 Note로 바꾸고 다시 만들어 줘" 한 줄 요청 |
| 관계 화살표가 거꾸로 | AI Coach에 "User has many Books가 맞아. 다시 그려 줘" |
| Must 기능 페이지가 빠짐 | 먼저 PLAN 3단계로 돌아가서 그 카드 설명을 더 명확히 → 다시 블루프린트 생성 |
⚠️ "Postgres" "Rails" 같은 영어 단어가 뜨는데 무서워요
화면 어딘가에 Rails / Postgres / Active Record 같은 영어 단어가 보일 수 있어요. 전부 "AI가 본인 SaaS를 만들 때 쓰는 도구 이름"이에요. 본인이 직접 다룰 일은 없어요. Rails(웹 프레임워크) Postgres/SQLite(DB) Active Record(DB 다루는 도구) — 이름만 외워둬도 충분해요. 상세는 Ch.4(BUILD)에서 자연스럽게 익혀져요.
실습 — 블루프린트 검토 체크리스트
- 모델 박스 5~7개를 한국어로 한 번씩 읽기 — 다 자연스러운가
- 관계 화살표 모두 따라가 보기 — 본인 의도와 같은 방향인가
- 기능 명세의 Must 카드와 페이지 리스트 비교 — 빠진 게 있나
- 이상한 모델·관계·페이지 1~2개만 메모 (전부 다 고치려 하지 말고)
- AI Coach에 그 1~2개를 한 번에 요청 → 다시 블루프린트 생성
막히는 지점 — 미리 답
- "화면이 너무 복잡해서 안 보여요" → 화면 우상단 zoom 또는 "단순 보기" 토글이 있어요. 모델만 보이는 모드로 전환하면 50% 단순화돼요.
- "화살표가 너무 많아서 헷갈려요" → 모델 한 개를 클릭하면 그 모델과 관련된 화살표만 강조돼요. 한 모델씩 보세요.
- "AI Coach에 요청했는데 변화가 없어요" → 페이지 새로고침 후 "다시 생성" 버튼 한 번. 자동 반영이 가끔 늦어요.
- "내 도메인 특수 모델이 빠졌어요" → AI Coach에 "한국 부동산 매물 모델 'Listing'을 추가해서 User has many Listings 관계로 다시 그려 줘" 같이 구체 요청.
완료 체크리스트
- ☐ 블루프린트 화면이 한 페이지에 떠 있다
- ☐ 모델 박스 이름을 한국어로 풀어 봤을 때 자연스럽다
- ☐ 관계 화살표가 본인 의도와 같은 방향이다
- ☐ Must 기능이 페이지 리스트에 다 들어가 있다 (또는 빠진 거 1~2개를 AI Coach에 요청해서 다시 생성)
다음 단계 → 3-5 디자인 시스템 + 외부 사례
설계 도면이 잡혔으면 다음은 디자인 시스템이에요. 색·폰트·여백 같은 시각 토큰을 한 번에 정의해요. 추가로 Anthropic Claude / Tailwind UI / shadcn / Linear / Vercel 등 외부 디자인 시스템 사례를 보면서 본인 톤을 잡는 lesson이에요. PLAN의 가장 큰 lesson 중 하나니까 시간 여유 있을 때 진행하세요.
옆 탭에 PLAN 4단계 열기
로그인 후 본인 프로젝트로 진행할 수 있습니다.