난이도
★☆☆☆☆ 입문
★★☆☆☆ 기초
★★★☆☆ 중급
★★★★☆ 고급
★★★★★ 실전
01
▼
스탑워치 만들기 / 디자인 변경
★☆☆☆☆
1단계 · 만들기
스탑워치 웹페이지를 만들어줘. 미니멀한 디자인으로
2단계 · 디자인 변경
뉴모피즘 스타일로 디자인 변경해줘.
기대 효과
프롬프트 한 줄로 앱 생성 → 디자인 요청으로 즉시 스타일 변경. Claude Code가 파일을 직접 편집하는 방식을 체험합니다.
02
▼
프리미엄 반려동물 웹사이트 제작
★★☆☆☆
프롬프트
우리 회사는 프리미엄 반려동물 영양제를 만드는 스타트업이야. 회사명은 'PetVital', 슬로건은 '수의사가 설계한 맞춤 영양'.
히어로 섹션, 제품 3개 소개, 고객 후기 2개, CTA 버튼이 있는 모던한 원페이지 랜딩을 만들어줘.
색상은 딥그린 + 화이트 톤으로. 뉴모피즘 스타일로
기대 효과
멀티 파일 프로젝트 구조를 Claude Code가 자동 생성. 실제 쇼핑몰 수준의 랜딩 페이지를 10분 안에 완성합니다.
03
▼
멀티 페르소나로 개선하기
★★☆☆☆
프롬프트
블랙 = 프로덕트 오너 (팀장)
화이트 = 메인 개발자
핑크 = UI UX 디자이너
골드 = 코드 아키텍트
레드 = QA, 비판가
10점 만점으로 평가하고, 10점 수준으로 개선해줘
기대 효과
단일 AI 답변의 한계를 넘어 다각도 검토 후 자동 개선. 혼자선 보이지 않던 문제점이 드러납니다.
04
▼
GitHub 업로드
★★★☆☆
프롬프트
1. Github.com 아이디 생성
2. New Repository 생성
3. API Key 생성
(프로필 → Settings → Developer Settings → Personal Access Tokens → Tokens Classic)
4. 해당 API Key를 클로드 코드에 주고 파일 업로드(Push)
: 절대로 메모리에 저장시키면 안됨, 보안 관리
5. Github.com에서 해당 Repo 클릭 → Settings → Pages → Branch에서 main, /root 선택하고 Save
6. 아이디.github.io/Repository명 으로 웹사이트로 접근
기대 효과
git init → commit → push → Pages 배포까지 전 과정을 자연어 한 줄로 완료. 내 작품이 인터넷에 공개되는 순간을 경험합니다.
05
▼
엑셀 파일 기반 대시보드 만들기
★★★☆☆
프롬프트
해당 폴더의 엑셀 파일("피자 매장별 실적 데이터.xlsx")을 기반으로 경영자 대시보드를 만들어줘.
탐색적 분석을 할수 있는 인터랙티브 차트를 포함해서.
뉴모피즘 스타일로.
기대 효과
엑셀 → 인터랙티브 웹 대시보드 변환을 자동화. 데이터 시각화 도구 없이도 경영진 보고용 대시보드를 즉시 완성합니다.
06
▼
내 위치 기반 별자리 시뮬레이터
★★★★☆
1단계 · Claude.ai 채팅에서 먼저
별자리 시뮬레이터 앱을 만들려고 해.
내 위치(Geolocation)를 기반으로 지금 이 순간 보이는 별자리를 보여주는 웹앱이야.
아래 내용을 포함한 PLAN.md 파일을 작성해줘.
- 구현 기능 목록
- 사용할 기술 스택 & API
- 파일/폴더 구조
- 단계별 구현 순서
2단계 · 클로드 코드에서
내 위치 기반으로 별자리 시뮬레이터를 만들어줘.
PLAN.md를 참고해서 구현해줘.
기대 효과
복잡한 프로젝트일수록 먼저 채팅에서 PLAN.md를 설계하고 클로드 코드로 실행. 코딩 전 설계 습관이 완성도를 결정합니다.
07
▼
CEO 데일리 브리핑 대시보드
★★★★★
프롬프트
CEO 아침 브리핑 대시보드를 만들어줘. 오늘 매출·방문자·전환율 KPI 카드 3개, 오늘의 일정 섹션, 팀 공지사항, AI 비서가 업계 뉴스를 자동 요약해서 보여주는 코너를 포함. 데이터는 data.json으로 관리하고, GitHub Actions로 매일 자정 자동 배포되도록 설정해줘
기대 효과
데이터 관리 + 자동 배포 + AI 뉴스 요약까지 통합. 설정 1회로 매일 아침 최신 상태의 브리핑 페이지가 자동 업데이트됩니다.
바이브코딩 실습 팁
- 01부터 순서대로 진행하세요. 앞 과제에서 만든 파일을 다음 과제에서 계속 활용합니다
- 프롬프트를 그대로 복사하지 말고, 내 상황에 맞게 제품명·색상·기능을 바꿔보세요
- 결과가 마음에 안 들면 "더 고급스럽게", "모바일 최적화", "애니메이션 추가" 등으로 이어서 요청하세요
- 오류가 나도 당황하지 마세요. 오류 메시지를 그대로 Claude에게 보내면 스스로 고칩니다
- ★ 표시 스킬은 해당 과제에서 처음 배우는 핵심 개념입니다. 특히 집중해서 실습하세요
7가지를 모두 만들었나요?
만든 프로젝트를 인터넷에 공개할 차례입니다.
GitHub에 올리면 내 작품이 전 세계에서 접속 가능한 URL로 바뀝니다.