6교시 · 15:00~15:50
쉬는 시간 15:50~16:00
1. BRD와 PRD : 만들기 전에 AI에게 무엇을 왜, 어떻게 만들지 알려 주는 기획서
AI에게 "웹페이지 만들어줘" 한 줄만 주면, AI가 목적과 범위를 짐작해서 만듭니다. 결과가 내 생각과 달라지는 이유입니다.
BRD와 PRD는 만들기 전에 무엇을 왜 만들고(BRD), 어떻게 만들지(PRD)를 문서로 정해 두는 기획서입니다. AI는 이 문서를 보고 만들고, 새 대화를 열어도 두 파일만 주면 같은 맥락으로 이어 작업합니다.
BRD (Business Requirements Document)
= "왜, 무엇을 만드는지?"
목적, 범위, 이해관계자, 예산, 제약사항
비즈니스 관점의 기획
PRD (Product Requirements Document)
= "어떻게 만드는지?"
핵심기능, 화면 구성, 만드는 방법, 만드는 순서
기술 관점의 설계
이 과정에서의 용도
- 원래 BRD, PRD는 만들기 전에 요구사항을 이해관계자, 개발팀과 맞추는 문서입니다
- 이 과정에서는 그 상대가 AI입니다. 만들기 전에 AI와 함께 쓰고, AI는 이 문서대로 만듭니다
- 만든 뒤 바뀐 것은 문서에도 반영해 둡니다. 그래야 다음 대화에서 이어 작업할 수 있습니다
활용 흐름 :
만들고 싶은 것을 한 문단으로 전달
→ AI의 역질문에 답하기
→ "BRD로 정리해줘" →
brd.md
→ "이 BRD를 보고 PRD를 써줘" → prd.md
→ 두 문서를 주고 "이대로 만들어줘"
- 추가 프롬프트 : "이런 목적의 BRD를 작성해줘. 내가 결정해야 할 부분은 질문으로 남겨줘."BRD (Business Requirements Document)
프로젝트를 왜 하는지를 비즈니스 관점으로 정리한 문서입니다. 만들기 전에 아래 항목을 채웁니다.
항목 | 내용 |
기능 목표 | 기능의 목표, 목표 및 결과에 대한 설명 |
범위 및 요구사항 | 일의 범위에 대한 정의 |
이해관계자 | 핵심 이해관계자 식별 및 역할 |
타임라인 | 단계별 상세 일정 |
예산 | 프로젝트 비용과 예상 혜택 |
제약 사항 | 프로젝트의 한도와 리소스 |
기능 목표 : 이 프로젝트로 무엇을 이루려는가?
프로젝트의 최종 목적과 성공 기준을 정합니다. "루프별 소석률과 부킹 현황 집계 시간 50% 단축" "영업팀장이 월요일 아침 확인하는 주간 현황 자료를 수작업 없이 자동 생성" 등 구체적인 성공 지표를 담습니다.
범위 및 요구사항 : 어디까지 만드는가?
프로젝트에 넣을 것과 일부러 뺄 것을 명확히 정합니다. "한중, 한일, 동남아 3개 루프의 소석률과 부킹 현황 조회는 포함, 운임 정산과 D&D 청구 관리는 다음 단계에서" 처럼 경계가 명확해야 AI가 범위를 멋대로 넓히지 않습니다.
이해관계자 : 누가 쓰고 누가 관여하는가?
프로젝트에 관련된 사람들과 각자의 역할을 정리합니다. 예 : "영업팀(부킹, 소석률 관리), 운항팀(선복 배정, 스케줄), 고객지원팀(화주 문의 대응), IT팀(시스템 유지보수), 임원실(주간 영업 현황 보고)"
타임라인 : 언제까지 만드는가?
단계별 일정을 정합니다. "7교시에 1차 완성 → 8교시에 수정과 배포" 처럼 적습니다.
예산 : 얼마나 들고 무엇이 남는가?
프로젝트 비용과 기대 효과를 함께 정합니다. "개발비 3,000만원 vs 운항팀과 영업팀 주간 보고서 작성 시간 절감 연 5,000만원" 처럼 ROI를 남겨둡니다.
제약 사항 : 무엇이 걸림돌이 될 수 있는가?
미리 알고 있어야 할 한계와 지켜야 할 규칙을 적습니다. 예 : "회사 자료 대신 더미 데이터 사용", "사내 보안 정책으로 외부 클라우드 사용 불가"
시연 BRD 지표 정의 (라이브 작성 예시)
루프별 확정 물량(TEU) = 상태가 '확정'인 부킹의 TEU 합계, 월별 집계 기준
롤오버 비중(%) = 상태가 '롤오버'인 부킹 TEU ÷ 전체 부킹 TEU × 100
BRD에 들어가는 대표적인 분석: SWOT 분석 (강점·약점·기회·위협), 이해관계자 맵, 비용 대비 효과 분석
참고 자료 : SWOT 분석 방법과 주의점 - Salesforce
PRD (Product Requirements Document)
프로젝트를 어떻게 만들지를 기능, 화면, 기술 관점으로 정리한 문서입니다. AI는 이 문서를 보고 그대로 만들고, 나중에 새 대화에서 고칠 때도 이 문서 하나로 전체 구조를 파악합니다.
항목 | 내용 |
목적 | 제품이 해결하고자 하는 비즈니스 문제 |
대상 고객 | 최종 사용자의 불만과 기대치 |
핵심 기능 | 제품의 핵심 특징과 기능 세분화 |
UI 디자인 | 사용자 인터페이스 설계 |
플로우차트 | 사용자가 어떤 순서로 쓰는지 |
기술 사양 | 아키텍처, 데이터 저장소, 프레임워크 |
구현 계획 | Phase 1, 2, 3… 단계별 계획 |
목적 : 이 제품이 해결할 문제는?
비즈니스 문제를 기술적 관점으로 재정리합니다. "영업팀이 수작업으로 취합하던 루프별 부킹, 소석률 데이터를 웹 대시보드로 전환해 주간 현황 파악 시간 단축"
대상 고객 : 누가 쓰는가?
사용자의 근무 환경, 행동 패턴, 주요 이슈를 정리합니다. 예 : "영업팀장(PC, 월요일 아침 주간 현황 확인), 영업 담당자(PC, 엑셀 익숙, 화주별 부킹 관리), 운항팀(선복 배정 확인)"
핵심 기능 / 요구사항 정의서 : 무엇이 되어야 하는가?
각 기능을 상세하게 정리합니다. "소석률 현황 : 루프/항차별 소석률, 롤오버 표시" "부킹 조회 : 화주/루프별 검색, 확정 부킹 TEU 표시" "주간 영업 요약 : 자동 텍스트 생성 → 클립보드 복사" 등
UI 디자인 / 와이어프레임 : 화면을 어떻게 구성하는가?
화면 레이아웃을 설명합니다. "왼쪽 사이드바 = 필터(주차, 루프, 화주), 가운데 = 소석률과 부킹 현황 테이블, 오른쪽 = 주간 영업 요약 카드" 식으로 구역을 정리합니다.
플로우차트 : 사용자가 어떤 순서로 작업하는가?
사용자가 어떤 순서로 쓰는지 화살표로 적습니다. "로그인 → 주차 선택 → 루프/화주 필터 → 소석률, 롤오버 확인 → 주간 요약 복사 → 보고" 플로우를 다이어그램으로 남깁니다.
기술 사양 : 무엇으로 만드는가?
어떤 파일과 도구로 만들지 적습니다. 예 : "HTML 파일 하나, 엑셀 데이터를 파일 안에 넣음, 브라우저로 열어 봄"
구현 계획 / 확장 포인트 : 어떤 순서로 만드는가?
Phase를 나눠 먼저 만들 것과 나중에 붙일 것을 정합니다. "Phase 1(먼저) : 소석률과 부킹 현황 조회 + 자동 요약", "Phase 2(다음) : 마감 임박 항차 알림 + 롤오버 추이 분석", "Phase 3(구상) : 사내 영업관리 시스템 연동"
PRD에 들어가는 대표적인 산출물: 플로우차트(Mermaid), 와이어프레임, 요구사항 정의서, 기술 아키텍처 다이어그램
참고 자료 :
만든 뒤에는 문서도 최신으로
만들면서 바뀐 것이 있으면 아래 한 줄로 문서에 반영해 둡니다. 다음에 새 대화를 열어도 두 파일만 주면 이어서 고칠 수 있습니다.
지금까지 바뀐 내용을 brd.md와 prd.md에 반영해줘.BRD vs PRD 정리
BRD = "왜, 무엇을 만드는지?" (비즈니스 관점) → PRD = "어떻게 만드는지?" (기술 관점). 둘 다 만들기 전에 쓰고, 읽는 쪽은 AI입니다.
2. 실습 : 나를 위한 웹페이지의 BRD, PRD 쓰기
오늘은 기획서만 씁니다. 만드는 것은 다음 07에서 이 기획서를 보고 합니다
- 주제는 2개 중 하나를 고릅니다
- A 나를 위한 웹페이지 : 취미 · 취향 · 건강 · 간단한 게임
- B 공공데이터 웹사이트 : 해운 · 항만 공공데이터를 화면으로. 공공데이터 안내 페이지 3번 표에서 만들 것 하나를 고릅니다
- 순서 : Step 1 스킬 받기 → Step 2 기획서 쓰기 → Step 3 결과 확인
Step 1 : 기획서 스킬 받기 (처음 한 번 · 5분)
① 아래 zip 파일을 받아
서울_바이브코딩 폴더 안에 zip 그대로 넣습니다. 직접 풀지 않습니다 (윈도우에서 직접 풀면 폴더가 하나 더 생겨 스킬이 안 잡힙니다)② 클로드 코드 입력 칸에 아래를 붙여 넣습니다. 클로드 코드가 알맞은 자리에 풀어 줍니다
이 폴더에 있는 기획서스킬_서울_바이브코딩에_풀기.zip 을 이 폴더에 풀어줘.
풀고 나서 .claude/skills/plan-webpage/SKILL.md 가 있는지 확인해서 알려줘.→
서울_바이브코딩/.claude/skills/plan-webpage/ 가 생기면 된 것입니다 (.claude 는 점으로 시작해 숨김 폴더로 보일 수 있습니다. VS Code 왼쪽 탐색기에서는 보입니다)③ 끄지 않고 바로 Step 2로 갑니다 (
기획서 쓰자 가 안 먹으면 그때만 터미널에서 /exit 뒤 claude)Step 2 : 기획서 쓰기 (40분)
클로드 코드에 아래 한 줄을 칩니다.
기획서 쓰자스킬이 하나씩 묻습니다. 번호나 한 줄로 답하면 됩니다. 답해야 다음으로 넘어갑니다.
순서 | 내가 하는 것 | 시간 |
1 주제 고르기 | 1 A 나를 위한 웹페이지 / 2 B 공공데이터 웹사이트 중 번호 하나 | 3분 |
2 한 문단 쓰기 | 「나는 [무엇]을 [얼마나 자주] 하는데, [무엇이 불편]해서, [무엇이 보이는] 웹페이지를 갖고 싶다」를 채웁니다 | 3분 |
3 짐작 확인하기 | AI가 한 문단을 보고 짐작해 채운 틀을 한 묶음씩 보여 줍니다 (6묶음)
맞으면 1, 다르면 그 줄만 고쳐 보냅니다. [?] 칸은 숫자를 적거나 모름 | 12분 |
4 기다리기 | 클로드가 brd.md → prd.md 를 씁니다. 탐색기에서 파일을 누르고 Ctrl + Shift + V 로 봅니다 | 9분 |
5 확인하기 | (제안) 이 붙은 칸을 확인하고, 내 생각과 다른 곳 하나를 고칩니다. 예 : 범위에서 로그인 기능은 빼줘 | 5분 |
6 pdf 열기 | 기획서.pdf 오른쪽 클릭 → Reveal in File Explorer (파일 탐색기에 표시) → 두 번 눌러 엽니다 | 5분 |
막히면
- AI의 짐작이 맞으면 →
1(다른 줄만 고쳐 보내면 됩니다)
- 주제가 떠오르지 않으면 →
샘플(러닝 기록판으로 끝까지 갑니다. 이것도 성공입니다)
- 중간에 끊겼으면 →
기획서 이어서
- (제안) : AI가 대신 채운 칸입니다. 내가 확인하면 지워집니다
짐작 확인 6묶음 미리 보기
AI가 묻는 순서는 만드는 순서입니다. 04에서 배운 3가지 기법(개괄식 · 단계별 · 역질문)을 그대로 씁니다
화면 예 :
맨 위 숫자 카드 [이번 달 거리 · 이번 달 기록의 거리를 더한 값] 이번 달 목표 [?] km묶음 | AI가 짐작해 채우는 것 (맞는지 확인) |
1 목적 | 지금 어떻게 하나 · 무엇이 불편한가 · 생기면 무엇이 달라지나 · [?] 한 번 몇 분, 한 달 몇 번, 생기면 몇 분 |
2 데이터 | 다루는 항목 3~5개 · 어디서 오나(직접 입력 / 엑셀 / 공공데이터) |
3 화면 | 맨 위 숫자 카드(무엇 · 어떻게 셈하나) · 가운데 그래프(종류 · 무엇 기준) · 아래 표와 입력 칸 |
4 동작 | 열고 → 무엇을 하고 → 닫는 순서 · 누르는 버튼 · 고르는 것(날짜 등) |
5 범위 | 꼭 넣을 것 3개 · 이번엔 뺄 것 1개 · 빼는 이유 |
6 사람 | 누가 · 언제 · PC / 휴대폰 |
숫자는 AI가 짐작하지 않고
[?] 로 비워 묻습니다. 모름 이면 「정할 것」에 질문으로 남습니다Step 3 : 결과 확인
결과물 예시 :
기획서.pdf (주제 A 「러닝 기록판」으로 만든 예시입니다. 내 주제로 쓰면 내용이 달라집니다)① 앞쪽 BRD : 왜, 무엇을 만드는지
② 뒤쪽 PRD : 어떻게 만드는지
brd.md · prd.md · 기획서.pdf 는 서울_바이브코딩 폴더에 그대로 둡니다. 따로 제출하지 않습니다. 다음 07에서 brd.md · prd.md 두 파일로 웹페이지를 만듭니다스킬이 안 잡힐 때 · 손으로 진행하기
① 만들고 싶은 것을 전하고 역질문에 답하기
내가 쓰려고 만드는 웹페이지를 기획하려고 해. 아직 만들지는 마.
내가 설명하면, 무엇을 다루고 어떤 항목이 필요하고 무엇이 보이면 좋을지
나에게 5개 이내로 먼저 물어봐 줘.
만들고 싶은 것 : [한 문단으로]② BRD 쓰기
지금까지 답한 내용으로 BRD를 써서 brd.md 로 저장해줘.
기능 목표, 범위(넣을 것과 뺄 것), 쓰는 사람, 일정, 제약 사항을 넣고
내가 정해야 할 것은 질문으로 남겨줘.③ PRD 쓰기
brd.md 를 보고 PRD를 써서 prd.md 로 저장해줘.
핵심 기능, 화면 구성(위에서 아래로 무엇이 보이는지), 만드는 방법(HTML 파일 하나),
먼저 만들 것과 나중에 붙일 것을 넣어줘. 아직 만들지는 마.④ 읽어 보고 한 곳 고치기
- VS Code 탐색기에서
brd.md,prd.md를 열어 읽습니다
- 내 생각과 다른 곳을 하나 골라 고쳐 달라고 합니다. 예 : "범위에서 로그인 기능은 빼줘"
✅ 클리어 조건 :
brd.md, prd.md 두 파일이 있고, 내가 요청한 수정이 1군데 이상 반영됐다강사 시연용 데이터 (부킹 현황 대시보드)
위 이론 예시(부킹 현황 대시보드)에 쓴 엑셀입니다. 실습에는 쓰지 않습니다.
웹사이트 구축 시 활용 가능한 공공데이터 API 링크입니다.
클로드에게 링크 붙여 넣고 아래와 같이 요청해보세요.
https://github.com/yybmion/public-apis-4Kr 링크에 있는 공공데이터 분석 후 내가 만들 웹사이트 아이디어 5개를 제안해줘