← 목록으로

바이브 코딩 실전 과제 9가지

바이브코딩으로 직접 만들며 배우는 단계별 프로젝트

노코드 CLI
바이브 코딩 101 실전 과제 9가지 GitHub · Vercel · Netlify
난이도 ★☆☆☆☆ 입문 ★★☆☆☆ 기초 ★★★☆☆ 중급 ★★★★☆ 고급 ★★★★★ 실전
01
스탑워치 만들기 · 디자인 변경
★☆☆☆☆
1단계 · 만들기
스탑워치 웹페이지를 만들어줘.
2단계 · 디자인 변경
피카소가 그린 얼굴이 시계 배경으로 나오도록 디자인 변경해줘.
기대 효과
프롬프트 한 줄로 앱을 만들고, 요청 한 줄로 디자인을 바꿉니다. AI가 내 컴퓨터의 파일을 직접 고치는 방식을 체험합니다.
스킬 ★ 프롬프트 엔지니어링 ★ UI/UX 디자인
02
프리미엄 반려동물 웹사이트 제작
★★☆☆☆
프롬프트
우리 회사는 프리미엄 반려동물 영양제를 만드는 스타트업이야. 회사명은 'PetVital', 슬로건은 '수의사가 설계한 맞춤 영양'. 히어로 섹션, 제품 3개 소개, 고객 후기 2개, CTA 버튼이 있는 모던한 원페이지 랜딩을 만들어줘. 색상은 딥오렌지 + 화이트 톤으로.
기대 효과
AI가 여러 파일로 나뉜 프로젝트 구조를 스스로 설계합니다. 쇼핑몰에 써도 될 수준의 랜딩 페이지를 10분 안에 만듭니다.
스킬 ♦ 프롬프트 엔지니어링 ♦ UI/UX 디자인
03
멀티 페르소나로 개선하기
★★☆☆☆
프롬프트
블랙 = 수행자, 화면을 직접 만들고 고친다 레드 = 이성 비평가, 논리와 근거와 결론을 본다 실버 = 분야 전문가, 현장 디테일과 품질 기준을 본다 블루 = 공감 비평가, 사용자가 어디서 막히는지 본다 골드 = 독자, 실제로 이 화면을 쓰는 사람의 눈으로 본다 10점 만점으로 평가하고, 10점 수준으로 개선해줘
기대 효과
답변 하나로 끝내지 않고 다섯 관점에서 검토한 뒤 스스로 고칩니다. 혼자 볼 때는 지나쳤던 문제가 드러납니다.
스킬 ♦ 프롬프트 엔지니어링 ♦ UI/UX 디자인 ★ 멀티 페르소나/에이전트
04
GitHub 업로드
★★★☆☆
프롬프트
1. GitHub.com 아이디 생성 2. New Repository 생성 3. API Key 생성 (프로필 → Settings → Developer Settings → Personal Access Tokens → Tokens Classic) 4. 해당 API Key를 AI에게 주고 파일 업로드(Push) : 절대로 메모리에 저장시키면 안됨, 보안 관리 5. GitHub.com에서 해당 Repo 클릭 → Settings → Pages → Branch에서 main, /root 선택하고 Save 6. 아이디.github.io/Repository명 으로 웹사이트로 접근
기대 효과
git init부터 commit, push, Pages 배포까지 자연어 한 줄로 끝냅니다. 내 작품이 인터넷에 공개되는 순간을 경험합니다.
스킬 ♦ 프롬프트 엔지니어링 ★ 버전관리 & 배포
05
엑셀 실적 데이터로 시사점 5개와 컨설팅 PPT 만들기
★★★☆☆
이 실습의 순서
두 단계로 진행합니다. 먼저 데이터에서 시사점 5개를 뽑아 파일로 남기고, 그 파일을 근거로 슬라이드를 만듭니다. 워크북에는 원본 실적 외에 매장·메뉴·공급사·플랫폼 마스터와 사건로그, 데이터사전이 들어 있습니다. 첫 시트 '안내'에 구조와 함정이 적혀 있습니다. 같은 파일을 07번에서 온톨로지와 지식 그래프로 다시 씁니다.
1단계 프롬프트 · 탐색적 분석으로 시사점 5개
해당 폴더의 엑셀 파일("피자 매장별 실적 데이터.xlsx")을 탐색적으로 분석해서 경영진에게 보고할 맥킨지 수준의 시사점 5개를 뽑아줘. 결과는 insights.md로 저장해줘.
2단계 프롬프트 · 시사점으로 컨설팅 PPT
insights.md의 시사점 5개로 경영진 보고용 Bain/맥킨지 스타일 진단 PPT를 만들어줘.
기대 효과
엑셀 원본에서 시사점을 근거 숫자와 반증 조건까지 붙여 뽑고, 그 결론을 액션 타이틀로 슬라이드에 옮깁니다. 분석 결과를 파일로 남긴 뒤 다음 프롬프트가 그 파일을 읽게 하는, 단계를 나눠 맡기는 방식을 익힙니다.
스킬 ♦ 프롬프트 엔지니어링 ♦ 멀티 페르소나/에이전트 ★ 데이터 & API 연동 ★ 문서·슬라이드 생성
06
구글 스프레드시트 기반 대시보드 만들기
★★★☆☆
프롬프트
아래 구글 스프레드시트("피자 매장별 실적 데이터")를 기반으로 경영자 대시보드를 만들어줘. https://docs.google.com/spreadsheets/d/1ZUOzgPdXKMp7mkyjTOhZ9wfaRRe9IuuGkekKNKG41ZQ/edit?gid=38840795 탐색적 분석을 할수 있는 인터랙티브 차트를 포함해서. 데이터는 Google Sheets CSV에서 직접 읽어오게. 뉴모피즘 스타일로.
기대 효과
구글 스프레드시트를 인터랙티브 웹 대시보드로 바꾸는 일을 자동화합니다. 시트를 고치면 화면에 바로 반영됩니다. 시각화 도구 없이도 경영진 보고용 대시보드를 그 자리에서 만듭니다.
스킬 ♦ 프롬프트 엔지니어링 ♦ UI/UX 디자인 ♦ 멀티 페르소나/에이전트 ♦ 데이터 & API 연동
설치 없이 · 채팅에서 만들기
Claude Code나 Codex를 설치하지 않아도 됩니다. claude.ai 채팅에 아래 프롬프트를 붙여 넣으면 오른쪽 아티팩트 패널에 대시보드가 바로 만들어집니다. ChatGPT에서는 프롬프트의 "아티팩트"만 "캔버스"로 바꿔 말하면 됩니다.
아래 구글 스프레드시트("피자 매장별 실적 데이터")를 읽어서 경영자용 인터랙티브 대시보드를 아티팩트로 만들어줘. https://docs.google.com/spreadsheets/d/1ZUOzgPdXKMp7mkyjTOhZ9wfaRRe9IuuGkekKNKG41ZQ/edit?gid=38840795 탐색적 분석이 가능한 인터랙티브 차트를 포함하고, 시트 데이터는 아티팩트 안에 직접 담아줘.
07
엑셀 실적 데이터로 온톨로지와 지식 그래프 만들기
★★★★☆
이 실습의 순서
이 실습은 엑셀 파일에 어떤 대상이 있는지(매장, 메뉴, 공급사, 배달 플랫폼, 사건), 그 대상들이 서로 어떻게 이어져 있는지를 AI에게 정리하게 합니다. 대상과 관계를 정리한 규칙이 온톨로지이고, 그 규칙대로 실제 대상을 선으로 이은 그림이 지식 그래프입니다. 파일에는 함정이 두 개 들어 있습니다. 시트마다 같은 매장이 다른 이름으로 적혀 있고, 매출 항목에는 상품이 아닌 배달비가 섞여 있습니다. AI가 이 함정을 알아채고 정리하는지 보는 것이 이 실습의 핵심입니다.
1단계 프롬프트 · 온톨로지
해당 폴더의 엑셀 파일("피자 매장별 실적 데이터.xlsx")의 모든 시트를 읽고 온톨로지를 설계해서 html로 저장해줘.
2단계 프롬프트 · 지식 그래프
앞서 만든 온톨로지대로 엑셀 파일의 실제 대상들을 연결한 지식 그래프를 단일 html로 그려줘. 그리고 아래 질문 3개에 그래프를 따라가며 답해줘. 1. 배민 수수료 인상은 어느 매장의 어느 달 이익률에 영향을 줬나? 2. 밀크팜 치즈 단가 인상은 어떤 메뉴와 매장에 영향을 주나? 3. 2026년 4월 홍대점 클레임 폭증은 어떤 사건들과 이어져 있나?
기대 효과
같은 데이터를 표가 아니라 개체와 관계로 보는 눈이 생깁니다. 이름이 다른 같은 대상을 하나로 합치고, 분류가 애매한 항목을 규칙으로 못 박고, 수수료 인상이 어느 매장의 어느 달 이익에 닿았는지처럼 여러 시트를 건너야 나오는 답을 그래프에서 찾습니다. 컴퍼니 브레인의 LLM 위키가 왜 규칙과 지도를 함께 두는지 손으로 확인합니다.
스킬 ♦ 프롬프트 엔지니어링 ♦ 데이터 & API 연동 ♦ UI/UX 디자인 ★ 온톨로지 & 지식 그래프
08
CEO 데일리 브리핑 대시보드
★★★★★
프롬프트
CEO 아침 브리핑 대시보드를 만들어줘. 오늘의 날씨, 환율·마켓, AI 비서가 요약한 업계 뉴스, AI 명언, 오늘 일정을 한 화면에 모은 개인 대시보드야. 중요: API 키 없이도 샘플(mock) 데이터로 완전히 작동하게 만들어줘. 그리고 설정 패널에서 본인 API 키(뉴스·날씨·환율)를 입력하면 실시간 데이터로 전환되도록 해줘. 뉴모피즘 스타일로.
기대 효과
API 키가 없어도 샘플(mock) 데이터로 대시보드가 완성된 채 돌아갑니다. 내 키를 연결하면 실시간 데이터로 바뀝니다. "키 없이 완성, 키 있으면 실시간"이라는 실전 앱 설계 패턴을 익힙니다.
스킬 ♦ 프롬프트 엔지니어링 ♦ UI/UX 디자인 ♦ 멀티 페르소나/에이전트 ♦ 데이터 & API 연동 ★ AI 비서 만들기
09
마인크래프트 같은 3D 블록 세계 만들기
★★★★★
1단계 · 채팅에서 먼저
마인크래프트처럼 네모난 블록으로 이루어진 3D 세계를 브라우저에서 만들려고 해. 사원·숲·연못이 있는 공간을 내가 직접 1인칭으로 걸어다니는 웹앱이야. 아래 내용을 포함한 PLAN.md 파일을 작성해줘. - 구현 기능 목록 (WASD 이동, 마우스 시점, 점프/질주) - 사용할 기술 스택 (Three.js 등) - 파일/폴더 구조 - 단계별 구현 순서
2단계 · 코딩 도구에서
마인크래프트처럼 네모난 블록으로 이루어진 3D 세계를 만들어줘. PLAN.md를 참고해서 구현해줘.
기대 효과
복잡한 프로젝트일수록 채팅에서 PLAN.md를 먼저 설계하고, 코딩 도구에서 실행합니다. 코딩 전에 설계하는 습관이 완성도를 결정합니다.
스킬 ♦ 프롬프트 엔지니어링 ♦ UI/UX 디자인 ★ 3D & 게임 그래픽 ★ PLAN.md 설계
바이브코딩 실습 팁

9가지를 모두 만들었나요?

만든 프로젝트를 인터넷에 공개할 차례입니다.
GitHub에 올리면 내 작품이 전 세계 어디서나 열리는 URL을 갖습니다.