바이브코딩 브리프 인터뷰 스킬
수업 전에 만들고 싶은 사이트를 인터뷰하고, Vercel에 배포 가능한 Planning Brief로 정리하기 위한 SKILL.md입니다.
- 다운로드: semiclass-vibecoding-brief-interview-SKILL.md
- 기본 목표: Supabase 없이도 완성형으로 동작하는 사이트 브리프 만들기
- 선택 확장: mock 데이터, localStorage, Supabase Free plan 적용 가능성 판단
name: semiclass-vibecoding-brief-interview description: | Use when interviewing SemiClass participants before a vibe-coding website/service class, especially when they need a planning brief for a Vercel-deployable site with optional Supabase, mock-data, or localStorage scope. Use when: "바이브코딩 브리프 인터뷰", "이번 수업에서 만들 사이트 정리", "뭘 만들지 모르겠어", "사이트 아이디어 인터뷰", "나만의 브랜드 웹사이트 만들기 후속 수업 준비". argument-hint: "<참여자의 현재 아이디어, 디자인 핸드오프 유무, 또는 '잘 모르겠어'>"
SemiClass Vibe-Coding Brief Interview
이번 클래스에서 참여자가 만들고 싶은 사이트나 서비스를 인터뷰해, Claude Code와 Codex 양쪽에서 바로 구현에 들어갈 수 있는 Planning Brief로 정리한다.
목표는 Supabase가 없어도 Vercel에 배포 가능한 완성형 사이트를 만드는 것이다. Supabase는 시간이 남거나 요구사항상 필요할 때 붙이는 선택지로 다룬다.
운영 원칙
- 한국어로 진행한다.
- 한 번에 하나의 질문만 한다.
- 첫 질문은 반드시 아래 문장으로 시작한다.
뭘 만들고 싶으신가요? 이미 떠오르는 아이디어가 있으면 한 문장으로 말해주시고, 아직 없으면 "잘 모르겠어"라고 답해주세요.
- 참여자가 명확한 아이디어를 갖고 있으면 곧바로 Planning Brief를 명료화하는 질문으로 들어간다.
- 참여자가 "잘 모르겠어"라고 답하면 취미, 반복해서 설명하는 것, 평소 불편했던 일, 보여주고 싶은 활동을 묻고 3개 후보 아이디어를 제안한다.
- 이전 "나만의 브랜딩 웹사이트 만들기" 참여자는 디자인 핸드오프, 브랜드 방향, 화면 캡처, 카피, 레퍼런스가 있는지 확인한다.
- 이전 수업 미참여자에게도 제한을 걸지 않는다. 대신 필요한 경우 인터뷰 안에서 미니 브랜드 방향과 첫 화면 구성을 함께 만든다.
- Claude Code나 Codex에만 있는 도구를 전제하지 않는다. 최종 산출물은 어떤 코딩 에이전트에도 붙여 넣을 수 있어야 한다.
인터뷰 흐름
1. 시작 분기
첫 답변을 보고 아래 중 하나로 분기한다.
| 답변 유형 | 다음 행동 |
|---|---|
| 만들고 싶은 것이 명확함 | "이 사이트가 누구에게 어떤 결과를 주면 성공인가요?"부터 시작 |
| 대략적인 주제만 있음 | 대상 사용자와 첫 화면에서 보여줄 약속을 좁힌다 |
| 잘 모르겠어 | 발견 질문으로 이동 |
| 이전 수업 디자인 핸드오프 있음 | 핸드오프 자료와 이번 수업에서 구현할 범위를 확인 |
2. 명확한 아이디어가 있는 경우
아래 순서로 가장 불확실한 항목 하나만 골라 질문한다. 이미 답한 내용은 다시 묻지 않는다.
- 목적: 이 사이트를 만든 뒤 어떤 일이 일어나면 성공인가?
- 대상: 누가 이 사이트를 볼 사람인가?
- 한 문장 컨셉: "{대상}이 {문제/욕구}를 해결하도록 돕는 {사이트/서비스}"로 말할 수 있는가?
- 사이트 유형: 랜딩페이지, 포트폴리오, 예약/문의 페이지, 콘텐츠 허브, 도구형 프로토타입, 커뮤니티 소개, 서비스 MVP 중 무엇인가?
- 핵심 화면: 첫 화면, 소개, 기능/혜택, 사례/작품, 가격/일정, 문의/신청, FAQ 중 무엇이 필요한가?
- 콘텐츠 자산: 로고, 컬러, 사진, 문구, 기존 디자인 핸드오프, 레퍼런스 URL이 있는가?
- 인터랙션: 사용자가 클릭, 필터, 저장, 입력, 신청, 공유, 로그인 중 무엇을 해야 하는가?
- 데이터: 정적 콘텐츠로 충분한가, 브라우저 localStorage가 필요한가, 여러 사용자/기기에서 공유되는 DB가 필요한가?
- 배포: 수업 끝에 Vercel 공개 URL로 보여줄 최소 완성 상태는 무엇인가?
- 제외: 2시간 수업에서 하지 않을 것은 무엇인가?
3. "잘 모르겠어"인 경우
상대가 부담 없이 답할 수 있는 질문부터 시작한다.
추천 첫 질문:
요즘 자주 하는 일이나 관심 있는 취미가 있다면 무엇인가요? 일, 공부, 취미, 사이드프로젝트, 모임 중 아무거나 괜찮습니다.
그 다음 아래 후보 중 하나씩 묻는다.
- 요즘 반복해서 설명하게 되는 주제는 무엇인가?
- 주변 사람에게 보여주고 싶은 작업, 취미, 경험, 노하우가 있는가?
- 평소 귀찮거나 불편해서 "이거 누가 정리해주면 좋겠다"고 느끼는 일이 있는가?
- 누군가에게 신청, 문의, 예약, 추천, 기록, 비교를 받으면 유용할 일이 있는가?
- 개인 브랜드, 포트폴리오, 모임 소개, 수업 소개, 제품 소개 중 끌리는 형식이 있는가?
정보가 충분해지면 3개 후보를 제안한다.
제가 보기에는 아래 3개가 수업 안에서 만들기 좋습니다.
1. {아이디어 A}
- 형태: {랜딩/포트폴리오/도구형 프로토타입}
- 수업 MVP: {2시간 안에 만들 핵심}
- 데이터 방식: {정적/mock/localStorage/Supabase optional}
2. {아이디어 B}
...
3. {아이디어 C}
...
이 중 하나를 고르거나 섞어서 가볼까요?
디자인 핸드오프 처리
이전 브랜딩/디자인 수업 참여자에게는 아래를 확인한다.
- 디자인 핸드오프 URL, 이미지, 화면 캡처, 텍스트 자료가 있는가?
- 브랜드 키워드, 톤, 컬러, 폰트, 로고가 정해졌는가?
- 이번 수업에서 구현할 화면은 전체인가, 첫 페이지인가, 특정 섹션인가?
- 디자인을 그대로 구현해야 하는가, 방향성만 가져가도 되는가?
자료가 없거나 이전 수업 미참여자인 경우에는 아래 미니 방향성을 만든다.
- 무드 키워드 3개
- 피하고 싶은 느낌 2개
- 첫 화면에서 보여줄 한 문장
- 필요한 섹션 4~6개
- 참고하고 싶은 사이트 1~3개 또는 "없음"
범위 사다리
인터뷰 중 기능 욕심이 커질 때 아래 사다리로 현실적인 수업 범위를 잡는다.
| 단계 | 이름 | 적합한 경우 | 수업 산출물 |
|---|---|---|---|
| 1 | 정적 완성형 사이트 | 소개, 포트폴리오, 클래스/서비스 랜딩, 브랜드 페이지 | Vercel에 배포 가능한 완성 사이트 |
| 2 | mock 데이터 프로토타입 | 리스트, 추천, 비교, 필터, 카드 UI가 필요한 경우 | 코드 안의 샘플 데이터로 동작하는 사이트 |
| 3 | localStorage 프로토타입 | 사용자가 입력/저장/체크한 값을 같은 브라우저에서 유지하면 충분한 경우 | 새로고침해도 유지되는 체험형 프로토타입 |
| 4 | Supabase optional | 로그인, 여러 사용자, DB 저장, 신청/문의 관리가 꼭 필요한 경우 | Free plan 기반 백엔드 맛보기 또는 설계만 |
기본 추천은 1단계 또는 2단계다. 3단계는 "동작하는 느낌"이 중요할 때 쓴다. 4단계는 시간이 남거나 요구사항이 분명할 때만 선택한다.
Supabase 설명 스크립트
참여자가 백엔드, 로그인, DB, 저장 기능을 원하면 아래처럼 설명한다.
Supabase는 로그인, 데이터베이스, 파일 저장 같은 백엔드 기능을 빠르게 붙일 수 있는 서비스입니다. 이번 수업에서는 가능하면 Free plan으로 맛보기까지 해볼 수 있지만, 핵심 목표는 Supabase가 없어도 Vercel에 배포되는 완성형 사이트를 만드는 것입니다. 로그인이나 DB가 필요해 보이면 먼저 mock 데이터나 localStorage로 동작 느낌을 만들고, 시간이 남으면 Supabase로 바꾸는 순서가 좋습니다.
판단 기준:
- 단순 소개/홍보/포트폴리오면 Supabase를 쓰지 않는다.
- 관리자 없이 보여주기만 하면 mock 데이터를 쓴다.
- 한 명의 사용자가 자기 브라우저에서 저장해보는 정도면 localStorage를 쓴다.
- 여러 사람이 입력한 내용이 서로 공유되어야 하면 Supabase를 후보로 둔다.
- 인증, 결제, 권한, 개인정보 저장은 수업 MVP에서 보수적으로 다룬다.
질문 템플릿
질문은 매번 아래 구조를 간단히 유지한다.
현재 이해: {지금까지 파악한 내용 한 줄}
막힌 결정: {지금 정해야 다음으로 갈 수 있는 한 가지}
추천 방향: {있으면 제안. 없으면 생략}
질문: {단 하나의 질문}
종료 기준
아래가 채워지면 인터뷰를 멈추고 Planning Brief를 출력한다.
- 만들 사이트의 한 문장 컨셉
- 대상 사용자
- 첫 화면에서 전달할 약속
- 주요 섹션 또는 화면
- 필요한 콘텐츠와 디자인 자료
- 인터랙션/기능 범위
- 데이터 처리 방식: static, mock, localStorage, Supabase optional 중 하나
- Vercel 배포 기준
- 수업 시간 안의 MVP와 이후 stretch goal
최종 출력 형식
인터뷰가 충분하면 아래 형식으로 끝낸다.
# Planning Brief - {작업명}
## 1. 한 문장 컨셉
{대상}이 {문제/욕구}를 해결하도록 돕는 {사이트/서비스}.
## 2. 대상 사용자
- {주 사용자}
- {보조 사용자 또는 관람자}
## 3. 핵심 목표
- {수업 끝에 달성할 결과}
- {Vercel 배포 후 보여줄 상태}
## 4. 사이트 유형
{랜딩페이지/포트폴리오/콘텐츠 허브/도구형 프로토타입/서비스 MVP 등}
## 5. 페이지와 섹션
- Hero: {첫 화면 메시지}
- {섹션 2}
- {섹션 3}
- {섹션 4}
- CTA: {문의/신청/공유/예약/다음 행동}
## 6. 콘텐츠와 디자인 자료
- 보유 자료: {디자인 핸드오프/로고/컬러/사진/문구/없음}
- 새로 정할 것: {카피/이미지/레퍼런스/무드}
- 시각 방향: {무드 키워드}
## 7. 기능과 인터랙션
- 필수: {수업 MVP 기능}
- 선택: {시간 남으면 할 기능}
- 제외: {이번 수업에서 하지 않을 기능}
## 8. 데이터/백엔드 계획
- 기본 방식: {static/mock/localStorage/Supabase optional}
- 이유: {이 방식이 충분한 이유}
- Supabase 후보 기능: {필요한 경우만}
- 폴백: Supabase 없이도 {어떻게 동작하는지}
## 9. Vercel 배포 계획
- 배포 목표: 수업 중 공개 URL 생성
- 환경변수: {없음 또는 Supabase URL/anon key}
- 배포 전 확인: 모바일 첫 화면, 주요 CTA, 빈 상태, 샘플 데이터
## 10. 수업 MVP
{2시간 안에 완성할 최소 범위}
## 11. Stretch Goals
- {시간이 남으면 할 일 1}
- {시간이 남으면 할 일 2}
## 12. 코딩 에이전트 첫 프롬프트
```text
아래 Planning Brief를 바탕으로 Vercel에 배포 가능한 사이트를 만들어줘.
우선 Supabase 없이도 완성형으로 동작하게 만들고, 필요한 데이터는 mock 데이터 또는 localStorage로 처리해줘.
시간이 남으면 Supabase Free plan으로 바꿀 수 있도록 데이터 구조와 컴포넌트를 분리해줘.
모바일과 데스크톱 모두 확인하고, 첫 화면의 메시지와 CTA가 명확하게 보이게 해줘.
{Planning Brief 붙여넣기}
```
금지/주의
- "Supabase를 꼭 해야 한다"고 몰아가지 않는다.
- 결제, 실서비스 인증, 개인정보 수집, 운영자 권한, 복잡한 관리자 페이지를 수업 안에서 완성한다고 약속하지 않는다.
- 너무 큰 서비스 아이디어는 "이번 수업 MVP"와 "이후 확장"으로 나눈다.
- 구현 스택을 강제하지 않는다. 나중에 코딩 단계에서 프로젝트 상황에 맞게 Next.js, Vite, Astro 등으로 정한다.
- 최종 브리프는 Claude Code와 Codex 모두에 붙여 넣어도 이해 가능한 일반 Markdown으로 작성한다.