ARTICLE 18 min

설계도 (블루프린트) — AI가 알아서 설계, 당신은 큰 틀만 확인

이 강의 영상은 Pro 전용입니다

Pro 요금제에 가입하면 모든 강의 영상을 볼 수 있어요.

Pro로 보기 →

이 레슨이 끝나면

  • "블루프린트 = 본인 SaaS의 종합 설계 도면"이라는 한 줄 정의를 안다
  • 설계는 AI가 다 해주고, 나는 큰 틀(어떤 데이터가 있는지 / 그게 자연스럽게 이어지는지 / 내가 정한 핵심 화면이 다 있는지)만 확인하면 된다는 걸 안다
  • 설계도가 본인 의도와 어긋나면 어떻게 다시 만들지(AI Coach에 한국어로 요청 / 기능 명세 재방문) 안다

블루프린트가 뭐예요?

블루프린트(Blueprint) = 본인 SaaS의 종합 설계 도면이에요. 건축으로 비유하면 집을 지을 때 가장 먼저 그리는 평면도와 같아요. 벽이 어디 있고, 문이 어디 있고, 거실과 안방의 관계는 어떤지 한 눈에 보여주는 그림. 소프트웨어에서는 다음 4가지를 한 화면에 정리한 거예요.

설계도 요소 건축 비유 쉽게 말하면
데이터 종류 방의 종류 우리 서비스가 다루는 정보 묶음 — 예: 사용자 / 책 / 메모
연결 방과 방의 연결 "한 사용자가 여러 권의 책을 가진다" 같은 자연스러운 연결
화면 방의 내부 디자인 사용자가 실제로 보는 페이지 — 예: 로그인 / 책 목록 / 책 상세
화면↔데이터 배선 방을 오가는 통로 화면과 데이터를 잇는 내부 배선 — 전부 AI가 알아서 깔아요. 신경 끄세요

도면 자체는 AI가 다 그려요. 당신이 볼 건 큰 틀 세 가지 — "어떤 데이터가 있나 / 그게 자연스럽게 이어지나 / 내가 정한 화면이 다 있나" 뿐이에요. 맨 아래 "화면↔데이터 배선"은 AI가 자동으로 깔아주는 내부 작업이라 당신이 들여다볼 필요가 전혀 없어요.

🎨 생성 (Codex CLI) — "블루프린트 = 건축 도면" 비유 다이어그램. 좌(집 평면도) ↔ 우(SaaS 블루프린트: 모델 박스 + 관계 화살표 + 페이지 mockup).
집 짓기와 같아요. 도면이 명확하면 건축이 빨라요.

옆 탭에 PLAN 4단계 열기

옆 탭 주소

https://vuild.kr/projects/[본인프로젝트번호]/plan/blueprint

처음 들어가면 자동으로 생성이 시작돼요(또는 "블루프린트 생성하기" 버튼이 보이면 한 번 클릭). 기능 명세 base로 AI가 1~2분 동안 도면을 만들어요. 다 끝나면 한 화면에 모델 박스 + 관계 화살표 + 페이지 리스트가 떠요.

📷 캡쳐 — blueprint show 화면. 모델 박스 5~7개 + 관계 화살표 + 페이지 리스트가 한 화면에 정리.
한 화면에 본인 SaaS의 모든 설계 요소가 정리돼 있어요.

당신이 확인할 건 딱 3가지 (큰 틀만)

블루프린트 화면은 정보가 많아서 처음 보면 압도돼요. 하지만 설계는 AI가 다 한 거예요. 당신은 검수하는 게 아니라, 큰 틀이 맞는지 한 번 훑어보면 돼요. 확인할 건 딱 3가지. 나머지(화살표 라벨, 영어 단어 등)는 전부 무시하세요.

① 데이터 종류 — 내 서비스에 필요한 정보가 다 있나

도면에 데이터 묶음(박스)들이 보여요. 박스 안 이름은 영어일 수 있지만, 그 옆/아래에 한국어 설명이 붙어 있어요. 예: 독서 노트 앱이면 사용자 / 책 / 메모 — 내 서비스에 꼭 필요한 정보가 빠짐없이 있는지만 보세요. 전혀 상관없는 게(예: "주문", "상품") 들어 있으면 그것만 메모해 두세요. 고치는 건 아래에서 AI에게 한 줄 부탁하면 돼요.

② 연결 — 상식적으로 자연스럽게 이어지나

데이터 박스끼리 선으로 이어져 있어요. 선에 적힌 영어 라벨은 읽지 않아도 돼요. 그건 AI가 알아서 맞춘 거예요. 당신은 상식 수준에서 "한 사람이 책을 여러 권 가진다" 같은 연결이 자연스러운지만 보면 돼요. 만약 누가 봐도 거꾸로(예: "책 하나가 사람을 여러 명 소유") 같은 게 보이면 그것만 메모. 이런 경우는 드물어요.

③ 핵심 화면 — 내가 정한 '필수' 기능이 다 화면으로 있나

화면 한쪽에 페이지 목록이 있어요. 예: 홈 / 로그인 / 회원가입 / 책 목록 / 책 상세 / 책 추가. 앞 단계(기능 명세)에서 '필수'로 정한 기능이 다 화면으로 들어가 있는지만 확인하세요. 예: "책 추가"가 필수인데 화면 목록에 없으면 → AI가 빠뜨린 거예요. 그것만 메모.

📷 캡쳐 — 블루프린트의 데이터 영역 클로즈업. 박스 + 박스를 잇는 연결선 강조.
데이터 박스가 상식적으로 이어지는지만 보세요. 선 위 영어는 무시.
📷 캡쳐 — 페이지 목록 영역 클로즈업. '필수' 기능과 화면이 1:1로 맞는지 비교 라벨.
'필수' 기능과 화면 목록을 비교하세요.

어긋난 곳이 있으면 — AI에게 한국어로 부탁하면 끝

고치는 건 당신이 직접 도면을 만지는 게 아니에요. 우상단 AI Coach에 평소 말투로 한 줄 부탁하면 AI가 다시 그려줘요.

상황 AI Coach에 이렇게 부탁
엉뚱한 데이터가 들어 있음 "이건 독서 노트 앱이야. '주문' 같은 건 빼고 사용자·책·메모 위주로 다시 설계해 줘"
연결이 누가 봐도 거꾸로 "한 사용자가 책을 여러 권 가지는 구조야. 그렇게 다시 그려 줘"
'필수' 기능 화면이 빠짐 먼저 PLAN 3단계로 돌아가 그 기능 설명을 더 분명히 → 다시 블루프린트 생성

💬 막히면 화면을 그대로 복붙하세요

도면을 봐도 뭐가 맞는 건지 모르겠으면, 화면을 캡쳐하거나 보이는 내용을 그대로 AI Coach(또는 Claude Code)에 붙여넣고 "이 설계 내 서비스에 맞아? 이상한 데 있으면 알려줘"라고 물어보세요. AI가 대신 검토해줘요. 혼자 끙끙댈 필요 없어요.

⚠️ 영어 단어(Rails, Postgres 등)가 뜨는데 무서워요

화면 어딘가에 영어 단어가 보일 수 있어요. 전부 "AI가 본인 SaaS를 만들 때 쓰는 도구 이름"일 뿐, 당신이 직접 다룰 일은 없어요. 지금은 그냥 무시해도 돼요. 어떤 도구인지 궁금하면 Ch.4(BUILD)에서 자연스럽게 익혀져요.

실습 — 큰 틀만 한 번 훑기 (3분)

  1. 데이터 박스를 한국어 설명으로 한 번씩 읽기 — 내 서비스에 필요한 게 다 있나
  2. 박스끼리 이어진 선을 상식 수준에서 훑기 — 누가 봐도 거꾸로인 게 있나 (선 위 영어는 무시)
  3. '필수' 기능과 화면 목록 비교 — 빠진 화면이 있나
  4. 이상한 곳 1~2개만 메모 (전부 다 고치려 하지 말고)
  5. 그 1~2개를 AI Coach에 한국어로 한 번에 부탁 → 다시 블루프린트 생성

막히는 지점 — 미리 답

  • "화면이 너무 복잡해서 안 보여요" → 화면 우상단 확대(zoom) 또는 "단순 보기" 토글이 있어요. 데이터 박스만 보이는 모드로 바꾸면 훨씬 단순해져요.
  • "선이 너무 많아서 헷갈려요" → 박스 한 개를 클릭하면 그 박스와 이어진 선만 강조돼요. 한 박스씩 보세요.
  • "AI Coach에 부탁했는데 변화가 없어요" → 페이지 새로고침 후 "다시 생성" 버튼 한 번. 자동 반영이 가끔 늦어요.
  • "내 분야 특유의 데이터가 빠졌어요" → AI Coach에 평소 말투로 "부동산 매물 정보도 다뤄야 해. 사용자가 매물을 여러 개 올리는 구조로 추가해 줘" 같이 부탁.
  • "그래도 뭐가 맞는 건지 모르겠어요" → 화면을 그대로 AI Coach나 Claude Code에 복붙하고 "이 설계 내 서비스에 맞아?"라고 물어보세요.

완료 체크리스트

  • ☐ 블루프린트 화면이 한 페이지에 떠 있다
  • ☐ 데이터 종류(박스)가 내 서비스에 필요한 것들로 채워져 있다
  • ☐ 박스끼리 연결이 상식적으로 자연스럽다 (선 위 영어는 안 봐도 됨)
  • ☐ '필수' 기능이 화면 목록에 다 들어가 있다 (또는 빠진 거 1~2개를 AI Coach에 부탁해서 다시 생성)

다음 단계 → 3-5 디자인 시스템 + 외부 사례

설계 도면이 잡혔으면 다음은 디자인 시스템이에요. 색·폰트·여백 같은 화면의 "톤"을 한 번에 정해요. 여기서도 직접 만드는 게 아니라, AI가 만든 톤 옵션 중에 고르고, 유명 서비스 디자인을 참고로 흉내 내는 정도예요.

옆 탭에 PLAN 4단계 열기

로그인 후 본인 프로젝트로 진행할 수 있습니다.

로그인