6장: 아이디어를 설계로 바꾸는 방법
"이런 거 만들고 싶어"에서 시작하기
모든 프로젝트는 한 문장에서 시작합니다.
"우리 동네 맛집을 모아서 보여주는 사이트를 만들고 싶어." "프리랜서 일감 관리를 할 수 있는 대시보드가 있으면 좋겠어." "우리 동아리 일정을 공유하는 앱을 만들고 싶어."
완벽한 기획서가 없어도 됩니다. 막연한 아이디어도 됩니다. 이 한 문장을 가지고 AI와 대화하면서 구체화하면 됩니다.
아이디어를 AI가 이해할 수 있게 정리하는 방법
한 문장짜리 아이디어를 그대로 던지면 AI도 막막합니다. 아래 세 가지 질문에 답하면 AI가 구체적인 설계를 만들 수 있습니다.
누가 쓰는가? 나 혼자 쓸 건지, 소수의 지인이 쓸 건지, 불특정 다수가 쓸 건지. 이에 따라 로그인 기능이 필요한지, 관리자 페이지가 필요한지가 달라집니다.
핵심 기능은 뭔가? 이 서비스가 반드시 해야 하는 일 2~3가지. "없으면 이 서비스가 의미 없다"는 것들만 추려냅니다.
어떤 화면이 필요한가? 사용자가 어떤 순서로 이 서비스를 쓰는지 흐름을 생각해봅니다.
이걸 AI에게 이렇게 전달합니다.
나는 프리랜서 일감 관리 대시보드를 만들려고 해.
- 사용자: 나 혼자 씀
- 핵심 기능:
- 일감을 등록하고 상태(진행중/완료/미수금)를 관리
- 월별 수입을 차트로 보여주기
- 클라이언트별 히스토리 조회
어떤 화면들이 필요할지 정리해줘.
완벽할 필요 없습니다. AI가 빠진 부분을 물어보기도 하고, 대화하면서 채워나가면 됩니다.
AI에게 인터뷰 시키기
뭘 만들지 아직 완전히 정리하지 못했다면, 4장에서 다룬 reverse prompting을 써봅니다. AI에게 먼저 질문하게 하는 방법입니다.
나는 [간단한 설명]을 만들려고 해.
내가 놓친 부분을 찾아내기 위해 질문해줘.
기술 구현, UI/UX, 엣지 케이스, 트레이드오프에 대해 물어봐.
당연한 질문 말고, 내가 미처 생각 못 했을 어려운 부분을 파고들어줘.
이렇게 하면 혼자 생각할 때 놓쳤던 것들 — 오프라인일 때는 어떻게 되는지, 사용자가 실수로 삭제하면 어떻게 할 건지, 여러 사람이 동시에 편집하면 어떻게 되는지 같은 것들 — 을 미리 발견할 수 있습니다.
MVP란 무엇인가
MVP는 Minimum Viable Product, 최소 기능 제품입니다. "핵심 기능만 있는 가장 단순한 버전"입니다.
프리랜서 대시보드라면 이렇게 나눌 수 있습니다.
MVP에 포함:
- 일감 등록하고 상태 바꾸기
나중에 추가:
- 월별 수입 차트
- 클라이언트별 히스토리
- 이메일 알림
- 모바일 앱
처음부터 모든 기능을 만들려고 하면 끝이 없습니다. 완성하지 못하고 지치는 경우가 많습니다. MVP를 먼저 만들고, 직접 써보면서 "이게 더 필요하다"고 느끼는 것을 하나씩 추가하는 게 훨씬 현실적입니다.
AI에게 MVP를 정해달라고 할 수 있습니다.
이 프로젝트의 MVP를 정해줘.
가장 핵심적인 기능만 남기고, 나머지는 '나중에 추가'로 분류해줘.
판단 기준은 "이게 없으면 이 서비스가 의미 없다"야.
프론트엔드, 서버, 데이터베이스
웹서비스는 크게 세 부분으로 나뉩니다.
프론트엔드는 브라우저에 보이는 화면입니다. 버튼, 텍스트, 이미지, 입력 폼 — 눈에 보이는 모든 것입니다.
서버는 화면 뒤에서 일하는 부분입니다. 로그인 처리, 데이터 저장, 이메일 발송 같은 작업을 합니다. 사용자 눈에는 보이지 않습니다.
데이터베이스는 데이터가 실제로 저장되는 곳입니다. 사용자 계정 정보, 게시글, 주문 내역 같은 것들이 여기에 저장됩니다.
인스타그램으로 예를 들면: 사진을 올리는 화면이 프론트엔드, "이 사진을 이 사용자의 계정에 저장해"라는 명령을 처리하는 게 서버, 사진 파일과 댓글이 실제로 저장되는 게 데이터베이스입니다.
AI에게 "일감 관리 대시보드 만들어줘"라고 하면 세 부분을 한꺼번에 만들어줍니다. "프론트엔드에 버튼을 추가했습니다" 같은 말을 할 때 무슨 뜻인지 이해하는 정도면 충분합니다.
AI의 산출물과 소프트웨어가 동작하는 방식
AI에게 "투두 앱 만들어줘"라고 하면 AI는 텍스트 파일들을 만듭니다. 사람이 읽을 수 있는 문자로 작성된 명령어 묶음입니다. 이걸 코드라고 합니다.
브라우저나 서버는 이 코드를 읽고 해석해서 실제로 동작시킵니다. 버튼을 클릭하면 무슨 일이 일어나는지, 데이터를 어디에 저장하는지, 화면을 어떻게 그리는지가 전부 이 파일들 안에 적혀 있습니다. 즉 AI가 만드는 산출물은 코드 파일이고, 그 파일을 컴퓨터가 실행하면 소프트웨어가 됩니다.
바이브코딩에서 이 파일들을 직접 읽거나 수정할 일은 거의 없습니다. AI가 작성하고, 브라우저에서 결과를 확인하면 됩니다.
기술 스택 추천받기
기술 스택이란 프로젝트를 만드는 데 쓰는 도구들의 조합입니다. 어떤 프레임워크를 쓰고, 데이터베이스는 뭘 쓰고, 어디에 배포할지.
이걸 직접 고를 필요 없습니다. AI에게 시키면 됩니다.
프리랜서 일감 관리 대시보드를 만들려고 해.
나는 코딩 경험이 없어.
가장 간단하게 만들 수 있는 기술 스택을 추천해줘.
이유도 설명해줘.
이 가이드에서는 아래 조합을 기준으로 합니다. AI가 가장 잘 알고, 바이브코딩에서 가장 많이 쓰이는 검증된 조합입니다.
Next.js — 프론트엔드와 서버를 한 프로젝트에서 만들 수 있습니다. 화면과 사용자의 요청을 처리하는 기능을 함께 구성할 수 있어요.
Supabase — 데이터베이스와 로그인 기능을 제공합니다. 별도의 서버를 직접 구축하고 관리할 필요가 없습니다. 대시보드에서 클릭 몇 번으로 세팅할 수 있습니다.
Vercel — 완성한 프로젝트를 인터넷에 올리는 서비스입니다. GitHub에 코드를 올리면 자동으로 배포해줍니다. 무료 플랜으로 시작할 수 있습니다.
✏️ 실습: 내 아이디어를 AI에게 설명하고 설계까지 정하기
1단계: 만들고 싶은 것을 한 문장으로 적어봅니다. 뭐든 좋습니다. 없으면 "프리랜서 일감 관리 대시보드"를 써도 됩니다.
2단계: Code 탭에서 Select folder를 눌러 my-project라는 새 폴더를 만들고 선택합니다.
3단계: 아래 형식으로 아이디어를 전달합니다. 대괄호 안의 내용을 여러분 것으로 바꾸세요.
나는 [만들고 싶은 것]을 만들려고 해.
코딩 경험이 없어서 Claude Code로 바이브코딩 방식으로 만들 거야.
- 사용자: [누가 쓰는지]
- 핵심 기능:
- [기능 1]
- [기능 2]
- [기능 3]
이 프로젝트의 MVP를 정해주고,
어떤 화면들이 필요한지, 어떤 순서로 만들면 좋을지 정리해줘.
4단계: 설계가 나오면 기술 스택도 물어봅니다.
이 프로젝트에 어떤 기술 스택을 쓰면 좋을지 추천해줘.
최대한 단순하게 빠르게 만들 수 있는 조합으로.
5단계: AI가 만든 설계를 읽고, 마음에 안 드는 부분을 수정합니다.
세 번째 화면은 빼줘. 나중에 추가할게.
대신 클라이언트 메모 기능을 MVP에 넣어줘.
이 설계와 기술 스택이 다음 장에서 실제 프로젝트를 초기화하는 기반이 됩니다.
참고자료