시작하기 전에: 오늘 만들 것은 “앱”이 아니라 “좋은 기획”입니다
기술을 몰라도 됩니다. 이 실습에서는 기능을 설명하면 AI가 필요한 기술 선택지를 설명하도록 합니다.
사람이 결정할 것
누구의 어떤 문제를 풀지, 어떤 경험이 중요한지, 무엇을 이번 버전에 넣고 뺄지 판단합니다.
AI에게 맡길 것
빠진 질문을 찾아 묻고, 대안을 비교하고, 답변을 구조화하며, 필요한 기술 개념을 쉬운 말로 추천하게 합니다.
Rough Idea: 떠오르는 아이디어를 한 번에 적어보기
처음부터 잘 쓸 필요 없습니다. 2~5문장 정도면 충분합니다.
“나는 [어떤 사람]이 [어떤 상황]에서 겪는 [문제]를 줄여주는 [서비스/도구]를 만들고 싶다.”
기능이 먼저 떠오른다면 기능부터 써도 됩니다. 다음 단계에서 문제와 사용자로 다시 연결합니다.
Product Concept Card: AI에게 넘기기 전에 최소한의 생각 만들기
아래 카드는 수기 활동을 웹으로 옮긴 것입니다. 왼쪽에 입력하면 오른쪽에 Live Concept Card와 16:9 슬라이드가 바로 반영됩니다.
지난주 제출한 [W2 Assignment] Problem Definition One-Pager를 옆에 펼쳐두세요. ①~⑦은 W2와 같은 질문이라 W2 답을 그대로 옮겨 와도 됩니다. 각 질문 옆 W2 · 번호 표시는 가져올 W2 항목입니다. ⑧~⑩ 기능은 W2 08 아이디어를 더 구체화하는 칸이고, NEW 표시는 W2에 없던, 이번에 새로 생각할 질문입니다.
PRD 템플릿 고르기: 같은 아이디어도 문서 구조가 달라지면 생각이 달라집니다
세 가지 중 하나를 고르면 바로 아래에 그 템플릿이 펼쳐집니다. 어떤 항목을 채우게 되는지 직접 보고 고르세요.
세 템플릿 한눈에 비교하기
| A. v0 Build PRD | B. Standard PRD (Airbnb) | C. Feature Implementation Spec | |
|---|---|---|---|
| 생각하는 관점 | Designer / Builder | Product Manager | Implementation Planner |
| 주로 묻는 것 | Product surface, context of use, constraints | Background, problem, goal, target users, features, user flows, metrics, dependencies, risks | Requirements, API contracts, UI behavior, test plans |
| 기술 지식 필요? | 거의 없음 | 없음 | 없음 (원하는 동작만 답하면 됨) |
| 주의점 | 짧은 만큼 문제 정의는 약할 수 있음 | 항목이 많아 한 페이지를 넘기 쉬움 (섹션마다 3줄 이내로) | AI의 기술 추천은 결론이 아니라 가설 |
Concept Card + PRD 템플릿을 합쳐 One-Page PRD 완성하기
이 웹페이지가 STEP 2의 Concept Card와 STEP 3의 템플릿을 하나의 프롬프트로 묶어줍니다. 복사해서 외부 LLM에 붙여넣으면, AI가 애매한 항목을 나에게 먼저 역으로 질문한 뒤 한 페이지짜리 PRD를 씁니다.
4-1. 들어갈 재료 확인
서비스 유형: 웹 · 데이터 저장소: Supabase · 분량: One-Page · 상세 기술 스펙 제외
4-2. 프롬프트 복사하기
둘 중 편한 방법 하나만 고르세요. 결과는 같습니다.
AI 메타 프롬프트 + Concept Card + PRD Template이 한 번에 묶여 있습니다. 버튼 하나로 복사해 새 채팅에 붙여넣으세요.
파일 두 개를 저장해 새 채팅에 첨부하고, 아래 메타 프롬프트를 붙여넣어 함께 전송하세요.
4-3. 새 채팅에 붙여넣고 AI의 질문에 답하기
1. 새 채팅 열기
ChatGPT 또는 Claude에서 새 채팅을 열고 복사한 프롬프트를 붙여넣어 전송합니다.
2. 역질문에 답하기
AI가 애매한 항목을 번호로 묻습니다. 짧게 답해도 되고, 모르면 “모르겠어, 추천해줘”라고 답하세요.
3. One-Page PRD 받기
질문이 끝나면 AI가 한 페이지 PRD를 씁니다. 너무 길면 아래 문장으로 줄이세요.
“아직 쓰지 말고, 애매한 항목부터 번호 붙여서 최대 5개만 질문해줘.”
“한 페이지로 줄여줘. 코드나 DB 세부 스펙은 빼고, 외부 데이터(API)와 Supabase에 저장할 항목은 남겨줘.”
One-Page PRD를 발표용 16:9 HTML 슬라이드로 바꾸기
STEP 4의 채팅을 그대로 이어서 진행합니다. PRD를 1~2장짜리 슬라이드로 구조화하고, 리뷰하며 고칩니다.
5-1. PRD 확인하기
5-2. 16:9 HTML 슬라이드로 바꿔달라고 하기
아래 프롬프트를 복사해 같은 채팅에 붙여넣으세요.
5-3. 리뷰하면서 고치기
먼저 AI에게 스스로 검토하게 한 뒤, 내 눈으로 보고 한 가지씩 고쳐달라고 하세요.
내용 고치기
“2장의 핵심 기능을 경험 → 기능 화살표 흐름으로 바꿔줘.”
분량 줄이기
“1장에 글이 너무 많아. 문장마다 12자 이내 키워드로 줄여줘.”
디자인 바꾸기
“흰 배경에 포인트 색 하나만 쓰고, 제목을 더 크게 해줘.”
Peer Review 및 피드백
6명이 다 같이 한 명씩 돌아가며 3분 발표 · 3분 피드백을 합니다. 모든 사람은 최소 2명에게 피드백을 줍니다. 받은 피드백은 이 페이지에 메모해 두고, 집에 돌아가서 회고하며 고칠 것만 고치면 됩니다.
6-1. 진행 방법 (1명당 6분 · 총 약 36분)
발표 3분
슬라이드를 화면에 띄우고 “누구의 어떤 문제를, 어떤 기능과 데이터로 푸는지” 설명합니다.
피드백 3분
듣는 사람은 아래 질문을 보고 좋은 점 · 아쉬운 점 · 제안 중 하나 이상을 말합니다. 발표자는 반박하지 말고 메모만 합니다.
최소 2명에게 피드백
모든 사람은 발표 6개 중 최소 2명에게 피드백을 줍니다. 한 사람에게 피드백이 몰리지 않도록 순서대로 나눠 말해주세요.
리뷰어가 볼 질문
6-2. 받은 피드백 메모
6-3. 집에서 회고하며 고칠 것만 고치기
모든 피드백을 반영할 필요는 없습니다. 메모를 다시 읽고 내 서비스에 맞는 것만 골라 고치세요. AI와 같이 정리하고 싶다면 아래 프롬프트를 STEP 4·5의 채팅에 붙여넣으면 됩니다.
Bonus: Claude Code 실습을 위한 PRD 문서 분리하기
다음 차시에는 Claude Code로 각자의 서비스를 1차로 만들어봅니다. 이때 PRD를 한 번에 통째로 주지 않고 3단계로 나눠서 줍니다. 오늘은 그 3개의 프롬프트를 외부 LLM에게 만들어달라고 해서 준비해 옵니다.
7-1. Claude Code에 줄 3단계 한눈에 보기
전체 서비스 뼈대
One-Page PRD를 그대로 넣어 Next.js 웹 앱을 만듭니다. 외부 API와 Supabase는 “나중에 연결할 예정이니 지금은 하지 마”라고만 알리고, 샘플 데이터로 화면이 동작하게 합니다.
외부 API 연결 + Key 넣기
핵심 API 하나를 연결하고, 내가 API Key를 붙여넣을 .env와 .gitignore를 설정하게 합니다.
이제 실시간 가격을 가져오기 위해 Finnhub API를 연결할 준비가 됐어. API Key는 준비되어 있어. 내가 Key를 붙여넣을 수 있도록 .env 파일과 .gitignore를 설정해줘.
Supabase로 DB 연결
로그인과 데이터 저장을 붙이고, 사용자가 자기 데이터만 보게 합니다.
Supabase로 데이터베이스를 설정해줘. Supabase MCP는 연결되어 있어. 사용자가 로그인하고 관심 종목을 저장할 수 있게만 해줘. 사용자는 자기 종목만 볼 수 있어야 해.
회색 문장은 주식 관심 목록 서비스 예시입니다. 내 서비스에 맞는 문장은 아래 프롬프트로 AI가 만들어줍니다.
7-2. 3단계 프롬프트를 만들어달라고 하기
One-Page PRD가 있는 채팅에 그대로 붙여넣으세요. 단계마다 구분선으로 나뉜 박스(인용 블록) 3개가 나와서 줄바꿈된 채로 읽기 쉽습니다. 마지막에 3단계 전체를 담은 .md 파일 다운로드 링크도 함께 받습니다. 링크가 안 나오면 아래 7-3에 붙여넣어 저장하세요.
7-3. 받은 3단계 프롬프트를 붙여넣고 Markdown으로 저장하기
외부 LLM이 준 프롬프트를 단계별 칸에 붙여넣으세요. 입력 내용은 이 브라우저에 자동 저장되고, 버튼을 누르면 3단계가 구분선으로 나뉜 .md 파일로 받을 수 있습니다. 다음 차시에 이 파일을 가져오면 됩니다.
7-4. 다음 시간에 할 것: Claude Code로 풀사이클 돌려보기
오늘 준비한 3단계 프롬프트로 “만들기 → 연결하기 → 저장하기 → 올리기”를 한 번에 끝까지 경험합니다.
Claude Code 시작
설치와 로그인 후, 1단계 프롬프트로 내 서비스의 뼈대를 샘플 데이터로 만들어 로컬에서 띄워봅니다.
외부 API 연결
API Key 발급받기, .env에 Key 넣기, .gitignore로 Key가 공개되지 않게 막기. 샘플 데이터를 실제 데이터로 바꿉니다.
Supabase 연결
Supabase 프로젝트 만들기와 MCP 연결, 로그인 기능, 사용자별 데이터 저장, 내 데이터만 보이게 하는 권한 설정(RLS)까지.
GitHub 가입 및 연결
코드를 저장하고 버전을 관리할 GitHub 계정을 만들고 Claude Code와 연결합니다. 미리 가입해 오면 좋습니다.
Vercel 배포
GitHub 저장소를 Vercel에 연결해 배포하고, 환경 변수(API Key, Supabase)를 넣어 배포된 링크에서도 로그인과 저장이 잘 동작하는지 확인합니다.
원본 레퍼런스: 템플릿 이름과 워크플로우를 직접 확인하기
이 원페이저는 아래 공개 원본을 바탕으로 수업 목적에 맞게 단순화·재구성했습니다.
Vercel은 별도의 공식 PRD 템플릿을 제공하지 않고, v0에 요청을 잘 쓰는 법을 Product Surface · Context of Use · Constraints & Taste 세 요소로 안내합니다. 이 실습의 A 템플릿은 이 구조를 그대로 옮겼습니다.
How to prompt v0 ↗ · v0 Docs: PRD design ↗
ChatPRD 공식 문서에는 Lenny’s 1-Pager와, v0.dev·Bolt·Lovable·Replit 같은 AI code generation 플랫폼을 위한 App Prototyping with AI Code Generation 템플릿이 포함되어 있다고 명시되어 있습니다.
Included Templates ↗
Airbnb Experiences: Search & Personalization Enhancement PRD (2025, v1.0)입니다. Background · Problem Statement · Goal / Objective · Target Users · Key Features & Requirements · User Flows · Success Metrics · Dependencies · Risks & Mitigation · Launch Plan · Appendix 열한 섹션으로 되어 있고, 이 실습의 B 템플릿은 1~9번 섹션 구조를 그대로 옮겼습니다. 8. Dependencies는 수업 고정 조건에 맞춰 외부 데이터 (API) · 저장 데이터 (Supabase) 칸을 넣었습니다.
원본 파일: Airbnb-PRD.pdf
ChatPRD는 Feature Implementation Spec을 requirements, API contracts, UI behavior, test plans를 다루는 AI-first development template으로 공개했습니다. 이 실습의 C 템플릿은 이 네 영역을 그대로 섹션으로 쓰고, 본문이 앱 안에서만 제공되어 세부 질문만 수업용으로 작성했습니다.
AI-first builder templates ↗
공식 가이드는 rough brief에서 시작해 필요한 경우 clarifying questions를 받고, 초안을 만든 뒤 chat으로 반복 수정하는 workflow를 설명합니다. 이 수업의 “Concept Card → AI의 역질문 → One-Page PRD” 구조가 이 방식과 맞닿아 있습니다.
Writing Your First PRD ↗
PRD, one-pager, technical design 등 공개 템플릿 라이브러리를 직접 둘러볼 수 있습니다.
Template Library ↗