개발 지식 없이 만드는
AI 프로토타이핑 워크샵
v0와 함께하는 디지털 찰흙 놀이
시작하기 전에
이 워크샵에서 여러분이 알아야 할 딱 세 가지
그라운드 룰
편하게 참여하기 위한 세 가지 약속입니다. 부담 없이 읽어보세요.
모르면 바로 질문
모르는 용어가 나오면 손 들고 바로 물어보세요. 여러분이 어색해 느끼는 단어가 강사도 처음엔 낯설었습니다.
코딩과 디자인은 잠시 잊기
오늘은 코드를 한 줄도 쓰지 않습니다. 완벽한 디자인도 목표가 아닙니다.
목표는 돌아가는 화면
아이디어가 실제로 움직이는 화면으로 바뀌는 경험. 오늘 딱 그것만 합니다.
오늘의 학습 목표
| 목표 | 구체적으로 무엇을? |
|---|---|
| 📋 AI 도구 사용법 익히기 | Claude와 v0를 이용해 PRD → 화면까지 완성 |
| 💬 소통 효율 체감하기 | 텍스트 회의 vs 클릭 가능한 화면의 차이 직접 경험 |
| 🎯 8가지 꿀팁 습득 | 더 좋은 결과를 얻는 바이브 코딩 프롬프트 기법 |
| 🚀 내 업무에 적용 계획 | 오늘 배운 것을 실제 현업에 바로 쓸 수 있도록 |
왜 화면으로 이야기해야 하나요?
백 마디 설명보다 한 번의 클릭이 더 강력한 이유
지금 우리 팀의 모습 vs 앞으로의 모습
기획서를 텍스트로 작성해서 공유합니다. 팀원 A는 "이렇게 생겼겠지"라고 상상하고, 팀원 B는 전혀 다른 모습을 떠올립니다. 회의에서 서로 다른 이미지를 가지고 토론합니다.
- 같은 기획서를 읽고도 다른 화면을 상상
- 수정 → 재수정의 반복 사이클
- 개발 완료 후에야 "이게 아닌데" 발견
클릭 가능한 프로토타입 링크를 공유합니다. 팀원 모두가 동일한 화면을 보며 이야기합니다. 디테일이 달라질 수 없습니다.
- 모두가 같은 화면을 보고 피드백
- 즉시 수정, 즉시 확정
- 개발 착수 전에 완전한 합의 완료
속도의 차이
같은 결과물을 만드는 데 걸리는 시간을 비교해봤습니다.
| 단계 | 기존 방식 | 새로운 방식 (AI) |
|---|---|---|
| 기획 초안 | 기획서 작성 3일 | Claude에 아이디어 입력 10분 |
| 화면 공유 | 팀 회의 소집 (일정 조율) | v0 링크 슬랙으로 공유 즉시 |
| 피드백 반영 | 수정 기획서 작성 2일 | 프롬프트 재입력 5분 |
| 재수정 | 또 2일 | 재지시 3분 |
| 합계 | 약 7일+ | 약 20분 |
우리의 도구
Claude가 두뇌라면, v0는 손입니다
PRD 문서 작성, 요구사항 정리, 아이디어를 구조화된 기획으로 변환
Claude의 기획을 받아 클릭 가능한 인터랙티브 UI로 즉시 변환
⚠️ 보안 주의사항 — 반드시 읽어주세요
🔒 AI 도구 사용 보안 규칙
실제 이름, 전화번호, 주민등록번호, 주소 등을 절대 입력하지 마세요.
내부 보고서, 전략 문서, 미발표 프로젝트 정보를 붙여넣지 마세요.
이름은 "홍길동", 전화번호는 "010-0000-0000", 금액은 임의 숫자를 사용하세요.
찰흙 놀이 실습
지금부터 15분. 여러분의 첫 번째 AI 프로토타입을 만듭니다
오늘의 시나리오 — 법인카드 내역 ERP UI
실제 업무에서 자주 접하는 UI를 함께 만들어봅니다. 아래는 오늘 실습에 사용할 시나리오입니다.
요구사항 예시
"총 금액 5,000원 이상이면 적요(비용 목적) 입력을 필수로 하고 싶다. 조회 조건에도 총 금액 5,000원 이상 필터가 있으면 좋겠다."
3단계 실습 가이드
Step 1: Claude에 아이디어 전달
claude.ai에 접속해서 아래 프롬프트를 입력하세요.
📋 복사해서 붙여넣기
법인카드 내역 조회 ERP 화면의 PRD를 작성해줘. 요구사항: - 법인카드 내역 목록 조회 (날짜, 카드사, 금액, 적요 포함) - 총 금액 5,000원 이상이면 적요(비용 목적) 입력 필수 - 조회 조건에 총 금액 5,000원 이상 필터 - 가상 데이터 사용 (홍길동, 가상 금액) - 개발이 아니라 소통용 프로토타입 목적 결과를 v0에 바로 붙여넣을 수 있는 형태로 만들어줘.
Step 2: v0에 붙여넣기
Claude가 만든 기획안을 v0.dev에 접속해서 채팅창에 그대로 붙여넣으세요.
Step 3: 공유하기
화면이 완성되면 오른쪽 상단 Publish 버튼을 눌러 URL을 생성하세요.
기능은 같지만, 디테일은 다르다
텍스트 기획서로 회의하면 어떤 일이 벌어지는지 체험해봤죠? 같은 "법인카드 조회 화면"을 들어도 사람마다 다른 화면을 상상합니다.
"5,000원 이상은 적요 필수"라는 요구사항을 듣고...
- A: 팝업 모달로 적요 입력
- B: 테이블 인라인 편집
- C: 별도 상세 화면으로 이동
→ 개발 완료 후에야 "이게 아닌데!" 발견
클릭 가능한 프로토타입 URL을 함께 보며...
- 모두가 동일한 화면 보기
- "이 버튼 위치를 오른쪽으로" 즉시 반영
- 5분 만에 완전한 합의 완료
→ 돌아가는 화면으로 이야기하면 디테일이 달라지지 않음
v0 활용 사례
현업에서 v0를 어떻게 쓸 수 있는지 6가지 케이스로 살펴봅니다
📊 BI 대시보드
KPI 차트, 매출 분석, 재고 현황 등 데이터 시각화 화면. "어떤 차트 배치가 좋을지" 팀과 빠르게 합의할 때 사용.
📱 앱 UI/UX
모바일 앱 화면 흐름 시연. 탭 네비게이션, 목록→상세 전환 등 인터랙션을 클릭으로 체험 가능.
🛒 마케팅 랜딩 페이지
신규 서비스 소개 페이지. 복사라이팅 A/B 테스트, 레이아웃 검토를 개발 전에 완료.
🤖 챗봇 인터랙션
챗봇 대화 흐름과 응답 UI 시연. "이런 식으로 답변하면 어때?" 를 실제 채팅 화면으로 보여주기.
🚀 앱 개발 시작점
프로토타입이 잘 작동하면 이 코드를 실제 개발의 출발점으로 활용. 개발자와 더 정확한 소통 가능.
📑 발표 자료 대체
PowerPoint 대신 클릭 가능한 프로토타입으로 경영진 보고. "이런 서비스를 만들겠습니다"를 직접 체험시키기.
8가지 꿀팁 대방출
바이브 코딩 = 입코딩. AI에게 더 잘 지시하는 기술
바이브 코딩 3단계 — 구체적으로 말하기
AI에게 막연하게 "좋은 화면 만들어줘"라고 하면, 막연한 결과가 나옵니다. 세 가지 레이어로 나눠서 구체적으로 지시하세요.
| 레이어 | 설명 | 예시 |
|---|---|---|
| 1️⃣ 시각적 디테일 명시 | 색상, 폰트, 레이아웃을 구체적으로 | "보라색 Primary 색상, 카드형 레이아웃, 둥근 모서리(12px)" |
| 2️⃣ 컴포넌트 구조 정의 | 어떤 UI 요소가 어디에 있는지 | "헤더 좌측에 로고, 우측에 검색+알림 아이콘, 아래 탭 네비게이션" |
| 3️⃣ 인터랙션 및 상태 묘사 | 클릭하면 어떻게 되는지 | "상품 클릭 시 상세 화면으로 전환, 뒤로가기 버튼 있음" |
AI에게 일을 시키는 '4줄 지시법'
복잡한 프롬프트를 쓸 필요 없습니다. 4줄의 틀만 채우면 전문가급 프롬프트가 완성됩니다.
| 줄 | 항목 | 의미 |
|---|---|---|
| 1줄 | Role (역할) | "너는 [역할]이다" — AI의 전문성을 설정 |
| 2줄 | Goal (목표) | "[목표]를 달성하라" — 최종 결과물 명시 |
| 3줄 | Context (맥락) | "[맥락]을 고려해서" — 제약 조건, 배경 설명 |
| 4줄 | Format (형식) | "[형식]으로 출력해라" — 결과물 형태 지정 |
실전 예시: GS25 편의점 픽업 앱
사실, 내가 원했던 픽업 서비스는 이런 흐름이었습니다:
상품 리스트에서 상품을 클릭하면 → 상품 상세 화면에서 상품을 확인하고 → 점포를 선택하고 → 쿠폰/행사 적용하고 → 결제 확인 후 결제완료
이 흐름을 4줄 지시법으로 완성한 프롬프트:
📋 복사해서 붙여넣기
"너는 리테일 O4O 앱의 '클릭 시연 가능한 인터랙티브 프로토타입' 제작자다. [Instruction] - 내부자료/실데이터/캡처 업로드 금지. 더미 데이터/더미 카피만 사용. - 목표는 개발이 아니라 커뮤니케이션 시연이다. - 단일 HTML 파일(HTML/CSS/JS 한 파일)로 동작해야 한다. 외부 라이브러리/외부 CDN 사용 금지. [Task] "픽업 주문" 흐름을 클릭으로 시연할 수 있게 한 페이지(SPA)로 만들고, 버튼/탭 클릭으로 화면이 전환되게 해줘. [화면 6개] 1) 상품 리스트: 검색창 + 카테고리 필터(간단) + 상품 카드 10개(더미) 2) 상품 상세: 가격/행사 배지(1+1 등 더미) + '픽업 점포 선택' CTA 3) 점포 선택: 내 주변 점포 5개(거리/재고 여부 더미) + 선택 버튼 4) 쿠폰/행사 적용: 쿠폰 3개(더미) + '최대 혜택 자동 적용' 토글 5) 결제 확인: 주문 요약 + '결제하기' 버튼 6) 결제 완료: 큰 바코드(더미) + 픽업 유효시간(더미)"
재지시 — 찰흙을 다시 빚듯이
처음 결과가 마음에 들지 않아도 걱정 마세요. 찰흙처럼 계속 다듬을 수 있습니다. 1차 결과는 뼈대, 재지시 후가 완성품입니다.
프롬프트: "업로드 UI 만들어줘."
→ 작은 점선 박스 + Upload 버튼이 생성됨. 기능은 있지만 딱딱하고 UX가 아쉬움.
재지시: "드롭존을 크게 하고, 파일 삭제 버튼을 추가해줘."
→ 대형 드래그 영역 + 파일 선택 버튼 + 파일 삭제(X) 버튼이 생성됨. 완전히 달라진 UX.
📋 재지시 예시 프롬프트
드롭존을 크게 하고, 파일 삭제 버튼을 추가해줘.
디자인 명시 — 폰트·컬러·이펙트를 콕 찍기
AI는 "예쁘게"라는 지시를 받으면 자기가 생각하는 예쁜 것을 만듭니다. 여러분이 원하는 스타일을 직접 명시하세요.
할 일 관리 앱 만들어줘
레트로 픽셀 스타일 할 일 관리 앱. 8-bit 폰트(Press Start 2P), 네온 그린(#00ff41) 액센트, CRT 모니터 효과(scanline), 체크박스 토글시 픽셀 파티클 애니메이션. 다크모드 기본. 할 일 추가 버튼은 아케이드 게임 코인 투입구 디자인
폰트, 컬러, 이펙트, 애니메이션, 메타포(은유)가 결합된 완벽한 명세서입니다.
Advanced: 시스템적 일관성
여러 화면을 만들 때는 처음에 시스템 규칙을 설정하면 AI가 일관된 로직으로 모든 화면을 만들어줍니다.
| 시스템 설정 항목 | 예시 지시 |
|---|---|
| 반응형 그리드 | "모바일: 1컬럼, 태블릿: 2컬럼, 데스크톱: 3컬럼 그리드" |
| 컬러 팔레트 | "Primary: #6366f1, Secondary: #8b5cf6, Background: #0f172a" |
골격 정의 — 픽셀을 채우기 전에 구조를 먼저
집을 지을 때 인테리어보다 골조(뼈대)를 먼저 세우듯, 화면도 구조부터 정의하면 훨씬 좋은 결과가 나옵니다.
| 영역 | 구성 요소 |
|---|---|
| 헤더 (Header) | 로고(왼쪽) + 네비게이션 메뉴(오른쪽) |
| 메인 (Main) | 히어로 섹션(전체 너비 배경 이미지) → 3단 그리드 카드 섹션 → CTA 버튼 영역 |
| 푸터 (Footer) | 3컬럼 레이아웃 |
📋 골격 먼저 지시하는 예시
헤더: 로고(왼쪽) + 네비게이션 메뉴(오른쪽) 메인: - 히어로 섹션 (전체 너비 배경 이미지) - 3단 그리드 카드 섹션 - CTA 버튼 영역 푸터: 3컬럼 레이아웃 위 골격으로 먼저 만들어줘. 디자인은 나중에 다듬을게.
레퍼런스 활용 — 이미 있는 멘탈 모델 빌리기
복잡한 설명을 단 한 단어로 압축할 수 있습니다. 이미 존재하는 서비스를 레퍼런스로 언급하세요.
| 레퍼런스 | 의미 | 프롬프트 예시 |
|---|---|---|
| Notion처럼 | 사이드바 토글 + 미니멀리즘 | "Notion처럼 사이드바 토글 및 미니멀리즘 적용" |
| Stripe 스타일 | 신뢰감 주는 결제 페이지 | "Stripe 결제 페이지 스타일" |
| Linear 앱 | 키보드 중심의 커맨드 팔레트 | "Linear 앱의 커맨드 팔레트" |
v0의 두 가지 대화법 — Instruction vs Plan Mode
v0와 대화하는 방법은 두 가지입니다. 상황에 맞게 선택하세요.
"매번 말하지 않기"
- 실제 데이터는 쓰지 말고 더미 데이터만 사용해줘
- 사용자가 plan:으로 시작하면 코드는 수정하지 말고, 채팅으로 계획만 답변해줘
- 모든 페이지는 메인 페이지와 동일한 디자인 톤을 유지해줘
→ v0 설정의 "Add Instruction"에 등록
"바로 고치기 전에 계획 알기"
- 디자인 시안을 2~3개 비교하고 싶을 때
- 오류 원인을 먼저 찾고 싶을 때
- 구조를 크게 바꿔야 할 것 같을 때
- 요구사항이 아직 덜 정해졌을 때
→ 메시지 앞에 plan: 붙이기
망쳐도 괜찮습니다 — 우리에겐 타임머신이!
화면이 깨지거나 원하지 않는 방향으로 수정됐나요? 걱정 마세요. v0는 모든 버전을 저장합니다.
Appendix — 바이브코딩 심화
화면을 만들어 소통만 도와주는 것이 아니라, 바이브코딩의 베스트 프랙티스가 어떤 건지 꼭 소개해드리고 싶었어요. 부담없이 들어주세요.
코딩 vs 바이브 코딩
둘은 본질적으로 같은 과정입니다. 차이는 "누가 구현하느냐"입니다.
문제 정의
↓ 이해할 수 있게 작업 전달
개발자
↓ 전달받은 작업을 대신하도록 구현
프로그램
문제 정의
↓ 이해할 수 있게 작업 전달
AI
↓ 전달받은 작업을 대신하도록 구현
프로그램
바이브코딩 계층도
AI로 만들 수 있는 결과물에는 계층이 있습니다. 위로 갈수록 자유롭고, 아래로 갈수록 엄격합니다.
| 계층 | 결과물 | 특징 |
|---|---|---|
| 자유도 높음 / 에러 가능성 높음 | UI | 고객 니즈에 맞춰 빈번하게 변경. 디자인/레이아웃은 창의적으로 가능. 오늘 워크샵의 범위. |
| 중간 | PRD 문서 / API 문서 | 기획 문서, 디자인 정의서, DB 테이블 정의서, TRD 문서 등. Claude가 초안 작성에 뛰어남. |
| 엄격함 / 에러 가능성 낮음 | API (백엔드 로직) | 한 번 잘 만들어 놓고, 최대한 재사용. 변경에 신중해야 함. 개발자와 협업 필요. |
프로그램이 하는 일: 입력 → 처리 → 출력
모든 프로그램은 이 세 단계로 작동합니다. API를 이해하면 바이브코딩의 가능성이 크게 넓어집니다.
실전 예시: 노션 글 → SNS 자동 업로드
Open Discussion
내 업무의 '답답함'을 어떻게 해결할까요?
바이브 코딩으로 내 현업 과제를 풀 수 있을까?
오늘 배운 것을 내 업무의 어느 부분에 적용할 수 있는지 생각해보세요.
왜 이 도구를 써야 할까?
시간 단축? 소통 효율? 나에게 맞는 이유를 찾아보세요.
당장 내일 어떻게 적용할까?
오늘 배운 것을 실제로 쓸 첫 번째 기회를 찾아보세요.
안 된다면 어떻게 해결할까?
혼자 어렵다면? 개발자 협업 요청 방법도 있습니다.
문서 대신, 돌아가는 화면으로 이야기합시다
두꺼운 기획서
텍스트 회의
상상 속 화면
개발 완료 후 "이게 아닌데..."
클릭 가능한 프로토타입
화면 보며 회의
동일한 시각
개발 전에 완전한 합의 완료
"우리는 개발자가 되는 것이 목표가 아닙니다."
더 명확하게 요구하고, 더 빠르게 소통하는 'Smart Communicator'가 되는 것이 목표입니다.
오늘 배운 것 최종 체크리스트
- Claude로 PRD 기획안을 만들 수 있다
- v0에 기획안을 붙여넣어 UI를 생성할 수 있다
- Publish로 링크를 만들어 공유할 수 있다
- 4줄 지시법(Role/Goal/Context/Format)을 안다
- 재지시로 결과를 다듬을 수 있다
- Instruction과 Plan Mode의 차이를 안다
- Restore로 이전 버전으로 돌아갈 수 있다
- 내 업무에 적용할 첫 번째 아이디어가 생겼다
용어가 어렵다면? 클릭해서 쉬운 설명 보기
| 용어 | 쉬운 설명 |
|---|---|
| 바이브 코딩 (Vibe Coding) | 코드 없이 말로 프로그램을 만드는 방식. 우리 식으로는 "입코딩". |
| 프로토타입 | 완성되지 않은 제품의 시제품. 소통을 위해 "이렇게 생긴 것"을 보여주는 도구. |
| PRD (Product Requirements Document) | 제품 요구사항 문서. 무엇을 만들지 적어놓은 기획서. |
| v0 | Vercel이 만든 AI UI 생성 도구. 텍스트를 받아 클릭 가능한 화면으로 변환. |
| API | 프로그램과 프로그램이 대화하는 방법. 식당의 "웨이터"에 해당. |
| Instruction | v0에 항상 지켜야 할 규칙을 등록하는 기능. 매번 말하지 않아도 됨. |
| Plan Mode | 코드를 바로 수정하지 않고 계획만 먼저 보여달라고 하는 모드. |
| Restore | v0의 버전 되돌리기 기능. 화면이 망가졌을 때 이전 상태로 복원. |
| SPA (Single Page Application) | 한 페이지 안에서 화면이 전환되는 앱. 새 페이지로 이동하지 않아도 됨. |