안녕하세요! 전(全)자동입니다! 😊
영단어 학습 앱(시즌 1)과 아빠표 수학 연산 앱(시즌 2), 그리고 맞벌이 부부를 위한 육아 스케줄러(시즌 3)까지 연재하면서 이웃분들께 가장 많이 들었던 질문이 있습니다.
"전(全)자동님, 저는 챗GPT나 AI에게 앱을 만들어달라고 하면 엉뚱한 코드를 짜주거나 조금만 수정해도 에러가 터져서 결국 포기하게 됩니다. 대체 AI에게 어떻게 말을 걸어야 저렇게 완성된 결과물이 나오나요?"
결론부터 명쾌하게 말씀드리면, 문제는 '코딩 실력'이 아니라 '기획(PRD)의 부재' 때문입니다.
오늘은 바이브코딩(Vibe Coding)을 시작하기 전, 단 5분의 투자로 AI 개발자의 성공 확률을 10배 이상 끌어올리는 초보자용 PRD(제품 요구사항 정의서) 작성 비법을 아주 쉽게 풀어드리겠습니다.
1. 🧱 왜 '코드'부터 짜면 100% 망할까?
많은 입문자들이 AI 채팅창을 열자마자 이렇게 입력합니다.
❌ 실패하는 프롬프트: "나 영어 단어 외우는 웹 어플 하나 만들고 싶어. 예쁘고 쓰기 편하게 자바스크립트로 풀 코드 짜줘!"
이렇게 질문하면 AI는 그럴싸한 코드를 쏟아냅니다. 하지만 막상 실행해 보면:
- 내가 원했던 디자인과 전혀 딴판이고,
- 단어 데이터가 어디에 저장되는지도 알 수 없으며,
- "버튼 위치 좀 바꿔줘"라고 말하는 순간 전체 코드가 꼬여 먹통이 되어버립니다.
건축으로 비유하자면, 설계도 한 장 없이 목수에게 "알아서 3층짜리 예쁜 전원주택 지어줘"라고 말한 것과 똑같습니다. 아무리 뛰어난 목수(AI)라도 집주인이 원하는 방 개수, 창문 위치, 화장실 배치를 모르면 엉뚱한 집을 지을 수밖에 없습니다.
그 '설계도' 역할을 하는 것이 바로 IT 현업에서 쓰는 PRD(Product Requirements Document, 제품 요구사항 정의서)입니다.
2. 📝 전(全)자동의 [초간단 4단계 PRD 작성 공식]
PRD라고 해서 수십 장짜리 복잡한 문서를 떠올릴 필요가 전혀 없습니다. 우리 같은 1인 바이브코더에게 필요한 것은 메모장에 딱 4가지만 명확히 정리한 '한 장짜리 기획서'입니다.
🎯 바이브코딩 필수 4단계 기획 공식 (T-C-L-T)
① Target & Problem (누가, 어떤 불편함 때문에 쓰는가?)
• 막연한 앱이 아니라 '사용자'와 '해결하려는 고통(Pain Point)'을 구체화합니다.
• 예시: "초등학교 저학년 딸아이가 딱딱한 문제집을 싫어해서, 10분 동안 게임처럼 풀 수 있는 맞춤형 연산 앱이 필요함."
② Core Features (핵심 기능은 딱 3개만!)
• 초보자의 가장 큰 실수는 처음부터 모든 기능을 다 넣으려는 것입니다.
• 핵심 기능 1~3개만 정의하고, 부가 기능은 앱이 완성된 후 붙여나가는 것이 원칙입니다.
• 예시: [1] 1~9 무한 덧셈 문제 자동 생성 / [2] 정답 시 폭죽 애니메이션 / [3] 오늘 푼 점수 기록
③ Look & Feel (화면 분위기와 UI 레이아웃)
• "예쁘게" 대신 구체적인 색감, 폰트 느낌, 화면 배치를 정해줍니다.
• 예시: "시원한 파스텔톤 바다 테마 (민트 & 스카이블루). 모바일 세로 화면 중심. 상단에 캐릭터 프로필, 중앙에 큼지막한 문제 카드, 하단에 둥근 숫자 키패드 배치."
④ Tech Stack & Constraints (어떤 무료 도구로 돌릴 것인가?)
• 서버비 0원을 위한 기술 조건을 명시합니다.
• 예시: "단일 HTML 파일(voca.html) 하나에 CSS, JS를 모두 포함할 것. 별도 유료 백엔드 없이 구글 스프레드시트와 무료 GitHub Pages로만 동작하도록 설계할 것."
3. 🚀 복사해서 바로 쓰는 [실전 PRD 프롬프트 템플릿]
실제 프로젝트를 시작할 때 메모장에 적어둔 내용을 아래 템플릿에 채워 넣고, AI(안티그래비티, 챗GPT 등)에게 첫 번째 메시지로 던져보세요. AI의 답변 퀄리티가 이전과는 완전히 달라집니다.
[초보자용 바이브코딩 PRD 프롬프트 복붙 템플릿]
너는 20년 차 수석 풀스택 개발자이자 UX 디자이너야. 나는 코딩을 전혀 모르는 초보자야.내가 만들고자 하는 프로젝트의 상세 요구사항 정의서(PRD)를 전달할게.
지금 당장 코드를 짜지 말고, 아래 PRD를 꼼꼼히 분석한 후
1) 기획 내용 중 모호하거나 누락된 부분이 있는지 질문해 줘.
2) 전체 개발 로드맵을 4~5단계의 작은 스텝으로 나누어 먼저 제안해 줘.
--------------------------------------------------
[프로젝트명]: (예: 우리 아이 맞춤형 수학 연산 웹앱)
1. 목표 및 타겟 사용자:
- 사용자: (예: 8세 초등학생 아이와 아빠)
- 목적: (예: 스마트폰으로 매일 10문제씩 지루하지 않게 연산 풀기)
2. 핵심 필수 기능 (MVP):
- 기능 1: (예: 1부터 9까지 무작위 한 자리 덧셈 문제 출제)
- 기능 2: (예: 정답 입력 시 즉시 정답/오답 사운드 및 폭죽 애니메이션)
- 기능 3: (예: 맞힌 개수와 소요 시간을 화면 상단에 실시간 표시)
3. 디자인 및 UI 요구사항:
- 모바일 스마트폰 화면 최적화 (반응형 웹)
- 테마: (예: 파스텔톤 민트 & 옐로우 조합의 밝고 아기자기한 느낌)
- 버튼: 아이들이 터치하기 편하게 큼직하고 둥근 모서리(border-radius: 12px)
4. 기술적 제약 사항 (중요):
- 유료 서버나 복잡한 빌드 도구 없이 `index.html` 단일 파일로 동작할 것.
- 깃허브 페이지(GitHub Pages)에 업로드해 평생 무료로 배포할 수 있는 순수 HTML/CSS/JavaScript 구조일 것.
--------------------------------------------------
💡 여기서 가장 중요한 핵심은 바로 이 문장입니다:
"지금 당장 코드를 짜지 말고, 기획을 분석한 뒤 개발 단계를 먼저 제안해 줘."
AI에게 브레이크를 걸지 않으면 수백 줄의 코드를 한 번에 쏟아내고, 그 코드는 십중팔구 수정하기 어려운 덩어리가 됩니다. AI가 내 기획을 제대로 이해했는지 확인한 뒤, 1단계(화면 UI) ➔ 2단계(로직) ➔ 3단계(데이터 연결) 순으로 한 걸음씩 코드를 만들어 나가는 것이 실패 없는 바이브코딩의 절대 원칙입니다.
4. ⚠️ 초보자가 흔히 저지르는 3대 기획 실수
실수 1: "나중에 로그인도 넣고 결제도 넣어야지" (기능 과식증)
로그인, 회원가입, 결제는 전문 개발자도 골머리를 앓는 영역입니다. 1차 버전(MVP)에서는 로그인 없이 로컬스토리지(브라우저 저장)나 공개 링크로 동작하게 만들고, 앱이 진짜 쓸모 있을 때 고도화하세요.
실수 2: 화면 해상도를 명시하지 않는 것
지시하지 않으면 AI는 PC 와이드 모니터 기준으로 화면을 짭니다. 모바일에서 주로 쓸 앱이라면 반드시 PRD에 "스마트폰 세로 모드 기준(max-width: 480px)"이라고 명시해야 레이아웃이 깨지지 않습니다.
실수 3: 데이터 구조(DB)를 지정하지 않는 것
데이터를 어디에 둘지 정해주지 않으면 AI는 브라우저를 껐다 켤 때마다 데이터가 날아가는 임시 코드를 짭니다. "구글 스프레드시트 연동" 혹은 "브라우저 로컬 저장" 여부를 기획서에 못 박아두어야 합니다.
5. 맺음말: 코딩의 시대에서 '기획의 시대'로
AI 시대가 열리면서 문법을 달달 외우고 오타를 찾는 전통적인 코딩의 장벽은 완전히 무너졌습니다.
이제 진짜 중요한 능력은 "내 일상과 가족에게 무엇이 진짜 필요한가?"를 정의하고, 그것을 한 장의 명확한 요구사항(PRD)으로 풀어내는 '기획력과 문제 해결력'입니다.
오늘 소개해 드린 템플릿을 복사해, 여러분이 평소 '이런 게 있으면 좋겠는데...' 싶었던 작은 아이디어를 단 한 장의 기획서로 적어보세요. 여러분의 상상이 놀라울 정도로 빠르게 진짜 앱으로 눈앞에 구현될 것입니다.
📢 [다음 편 예고]
"기획서를 짰다면, 이제 AI에게 슈퍼 파워를 달아줄 차례!"
구글 안티그래비티(Antigravity)의 핵심 무기인 '스킬(Skills)' 기능을 활용해
나만의 전담 AI 개발팀을 세팅하는 실전 노하우로 찾아오겠습니다.
기대해 주세요! 🚀