난이도
★☆☆☆☆ 입문
★★☆☆☆ 기초
★★★☆☆ 중급
★★★★☆ 고급
★★★★★ 실전
01
▼
스탑워치 만들기 · 디자인 변경
★☆☆☆☆
1단계 · 만들기
스탑워치 웹페이지를 만들어줘.
2단계 · 디자인 변경
피카소가 그린 얼굴이 시계 배경으로 나오도록 디자인 변경해줘.
기대 효과
프롬프트 한 줄로 앱을 만들고, 요청 한 줄로 디자인을 바꿉니다. AI가 내 컴퓨터의 파일을 직접 고치는 방식을 체험합니다.
02
▼
프리미엄 반려동물 웹사이트 제작
★★☆☆☆
프롬프트
우리 회사는 프리미엄 반려동물 영양제를 만드는 스타트업이야. 회사명은 'PetVital', 슬로건은 '수의사가 설계한 맞춤 영양'.
히어로 섹션, 제품 3개 소개, 고객 후기 2개, CTA 버튼이 있는 모던한 원페이지 랜딩을 만들어줘.
색상은 딥오렌지 + 화이트 톤으로.
기대 효과
AI가 여러 파일로 나뉜 프로젝트 구조를 스스로 설계합니다. 쇼핑몰에 써도 될 수준의 랜딩 페이지를 10분 안에 만듭니다.
03
▼
멀티 페르소나로 개선하기
★★☆☆☆
프롬프트
블랙 = 수행자, 화면을 직접 만들고 고친다
레드 = 이성 비평가, 논리와 근거와 결론을 본다
실버 = 분야 전문가, 현장 디테일과 품질 기준을 본다
블루 = 공감 비평가, 사용자가 어디서 막히는지 본다
골드 = 독자, 실제로 이 화면을 쓰는 사람의 눈으로 본다
10점 만점으로 평가하고, 10점 수준으로 개선해줘
기대 효과
답변 하나로 끝내지 않고 다섯 관점에서 검토한 뒤 스스로 고칩니다. 혼자 볼 때는 지나쳤던 문제가 드러납니다.
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
▼
엑셀 실적 데이터로 컨설팅 PPT 만들기
★★★☆☆
프롬프트
해당 폴더의 엑셀 파일("피자 매장별 실적 데이터.xlsx")을 탐색적으로 분석해줘.
매출·성장·수익성에서 발견한 핵심 인사이트를 정리하고, 경영진 보고용 Bain/맥킨지 스타일 진단 PPT로 만들어줘.
기대 효과
엑셀 원본을 탐색적으로 분석해 컨설팅 덱까지 한 번에 만듭니다. 데이터에서 시사점을 뽑아 의사결정용 슬라이드로 정리하는 순서를 익힙니다.
06
▼
구글 스프레드시트 기반 대시보드 만들기
★★★☆☆
프롬프트
아래 구글 스프레드시트("피자 매장별 실적 데이터")를 기반으로 경영자 대시보드를 만들어줘.
https://docs.google.com/spreadsheets/d/1ZUOzgPdXKMp7mkyjTOhZ9wfaRRe9IuuGkekKNKG41ZQ/edit?gid=38840795
탐색적 분석을 할수 있는 인터랙티브 차트를 포함해서. 데이터는 Google Sheets CSV에서 직접 읽어오게.
뉴모피즘 스타일로.
기대 효과
구글 스프레드시트를 인터랙티브 웹 대시보드로 바꾸는 일을 자동화합니다. 시트를 고치면 화면에 바로 반영됩니다. 시각화 도구 없이도 경영진 보고용 대시보드를 그 자리에서 만듭니다.
설치 없이 · 채팅에서 만들기
Claude Code나 Codex를 설치하지 않아도 됩니다. claude.ai 채팅에 아래 프롬프트를 붙여 넣으면 오른쪽 아티팩트 패널에 대시보드가 바로 만들어집니다. ChatGPT에서는 프롬프트의 "아티팩트"만 "캔버스"로 바꿔 말하면 됩니다.
아래 구글 스프레드시트("피자 매장별 실적 데이터")를 읽어서 경영자용 인터랙티브 대시보드를 아티팩트로 만들어줘.
https://docs.google.com/spreadsheets/d/1ZUOzgPdXKMp7mkyjTOhZ9wfaRRe9IuuGkekKNKG41ZQ/edit?gid=38840795
탐색적 분석이 가능한 인터랙티브 차트를 포함하고, 시트 데이터는 아티팩트 안에 직접 담아줘.
07
▼
CEO 데일리 브리핑 대시보드
★★★★★
프롬프트
CEO 아침 브리핑 대시보드를 만들어줘. 오늘의 날씨, 환율·마켓, AI 비서가 요약한 업계 뉴스, AI 명언, 오늘 일정을 한 화면에 모은 개인 대시보드야.
중요: API 키 없이도 샘플(mock) 데이터로 완전히 작동하게 만들어줘. 그리고 설정 패널에서 본인 API 키(뉴스·날씨·환율)를 입력하면 실시간 데이터로 전환되도록 해줘.
뉴모피즘 스타일로.
기대 효과
API 키가 없어도 샘플(mock) 데이터로 대시보드가 완성된 채 돌아갑니다. 내 키를 연결하면 실시간 데이터로 바뀝니다. "키 없이 완성, 키 있으면 실시간"이라는 실전 앱 설계 패턴을 익힙니다.
08
▼
마인크래프트 같은 3D 블록 세계 만들기
★★★★★
1단계 · 채팅에서 먼저
마인크래프트처럼 네모난 블록으로 이루어진 3D 세계를 브라우저에서 만들려고 해.
사원·숲·연못이 있는 공간을 내가 직접 1인칭으로 걸어다니는 웹앱이야.
아래 내용을 포함한 PLAN.md 파일을 작성해줘.
- 구현 기능 목록 (WASD 이동, 마우스 시점, 점프/질주)
- 사용할 기술 스택 (Three.js 등)
- 파일/폴더 구조
- 단계별 구현 순서
2단계 · 코딩 도구에서
마인크래프트처럼 네모난 블록으로 이루어진 3D 세계를 만들어줘.
PLAN.md를 참고해서 구현해줘.
기대 효과
복잡한 프로젝트일수록 채팅에서 PLAN.md를 먼저 설계하고, 코딩 도구에서 실행합니다. 코딩 전에 설계하는 습관이 완성도를 결정합니다.
바이브코딩 실습 팁
- 01부터 순서대로 진행하세요. 앞 과제에서 만든 파일을 다음 과제에서 계속 활용합니다
- 프롬프트를 그대로 복사하지 말고, 내 상황에 맞게 제품명·색상·기능을 바꿔보세요
- 결과가 마음에 안 들면 "더 고급스럽게", "모바일 최적화", "애니메이션 추가" 등으로 이어서 요청하세요
- 오류가 나도 당황하지 마세요. 오류 메시지를 그대로 AI에게 보내면 스스로 고칩니다
- ★ 표시 스킬은 그 과제에서 처음 배우는 핵심 개념입니다. 특히 집중해서 실습하세요
8가지를 모두 만들었나요?
만든 프로젝트를 인터넷에 공개할 차례입니다.
GitHub에 올리면 내 작품이 전 세계 어디서나 열리는 URL을 갖습니다.