← 목록으로

클로드 코드 실전 과제 7가지

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

노코드 CLI
🖥️ 클로드 코드 101 🎯 실전 과제 7가지 🐙 Git & GitHub
난이도 ★☆☆☆☆ 입문 ★★☆☆☆ 기초 ★★★☆☆ 중급 ★★★★☆ 고급 ★★★★★ 실전
01
스탑워치 만들기 / 디자인 변경
★☆☆☆☆
1단계 · 만들기
스탑워치 웹페이지를 만들어줘. 미니멀한 디자인으로
2단계 · 디자인 변경
뉴모피즘 스타일로 디자인 변경해줘.
기대 효과
프롬프트 한 줄로 앱 생성 → 디자인 요청으로 즉시 스타일 변경. Claude Code가 파일을 직접 편집하는 방식을 체험합니다.
스킬 ★ 프롬프트 엔지니어링 ★ UI/UX 디자인
02
프리미엄 반려동물 웹사이트 제작
★★☆☆☆
프롬프트
우리 회사는 프리미엄 반려동물 영양제를 만드는 스타트업이야. 회사명은 'PetVital', 슬로건은 '수의사가 설계한 맞춤 영양'. 히어로 섹션, 제품 3개 소개, 고객 후기 2개, CTA 버튼이 있는 모던한 원페이지 랜딩을 만들어줘. 색상은 딥그린 + 화이트 톤으로. 뉴모피즘 스타일로
기대 효과
멀티 파일 프로젝트 구조를 Claude Code가 자동 생성. 실제 쇼핑몰 수준의 랜딩 페이지를 10분 안에 완성합니다.
스킬 ♦ 프롬프트 엔지니어링 ♦ UI/UX 디자인
03
멀티 페르소나로 개선하기
★★☆☆☆
프롬프트
블랙 = 프로덕트 오너 (팀장) 화이트 = 메인 개발자 핑크 = UI UX 디자이너 골드 = 코드 아키텍트 레드 = QA, 비판가 10점 만점으로 평가하고, 10점 수준으로 개선해줘
기대 효과
단일 AI 답변의 한계를 넘어 다각도 검토 후 자동 개선. 혼자선 보이지 않던 문제점이 드러납니다.
스킬 ♦ 프롬프트 엔지니어링 ♦ UI/UX 디자인 ★ 멀티 페르소나/에이전트
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")을 기반으로 경영자 대시보드를 만들어줘. 탐색적 분석을 할수 있는 인터랙티브 차트를 포함해서. 뉴모피즘 스타일로.
기대 효과
엑셀 → 인터랙티브 웹 대시보드 변환을 자동화. 데이터 시각화 도구 없이도 경영진 보고용 대시보드를 즉시 완성합니다.
스킬 ♦ 프롬프트 엔지니어링 ♦ UI/UX 디자인 ♦ 멀티 페르소나/에이전트 ★ 데이터 & API 연동
06
내 위치 기반 별자리 시뮬레이터
★★★★☆
1단계 · Claude.ai 채팅에서 먼저
별자리 시뮬레이터 앱을 만들려고 해. 내 위치(Geolocation)를 기반으로 지금 이 순간 보이는 별자리를 보여주는 웹앱이야. 아래 내용을 포함한 PLAN.md 파일을 작성해줘. - 구현 기능 목록 - 사용할 기술 스택 & API - 파일/폴더 구조 - 단계별 구현 순서
2단계 · 클로드 코드에서
내 위치 기반으로 별자리 시뮬레이터를 만들어줘. PLAN.md를 참고해서 구현해줘.
기대 효과
복잡한 프로젝트일수록 먼저 채팅에서 PLAN.md를 설계하고 클로드 코드로 실행. 코딩 전 설계 습관이 완성도를 결정합니다.
스킬 ♦ 프롬프트 엔지니어링 ♦ UI/UX 디자인 ♦ 데이터 & API 연동 ★ PLAN.md 설계
07
CEO 데일리 브리핑 대시보드
★★★★★
프롬프트
CEO 아침 브리핑 대시보드를 만들어줘. 오늘 매출·방문자·전환율 KPI 카드 3개, 오늘의 일정 섹션, 팀 공지사항, AI 비서가 업계 뉴스를 자동 요약해서 보여주는 코너를 포함. 데이터는 data.json으로 관리하고, GitHub Actions로 매일 자정 자동 배포되도록 설정해줘
기대 효과
데이터 관리 + 자동 배포 + AI 뉴스 요약까지 통합. 설정 1회로 매일 아침 최신 상태의 브리핑 페이지가 자동 업데이트됩니다.
스킬 ♦ 프롬프트 엔지니어링 ♦ UI/UX 디자인 ♦ 멀티 페르소나/에이전트 ♦ 데이터 & API 연동 ♦ 버전관리 & 배포 ★ AI 비서 만들기
바이브코딩 실습 팁

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

만든 프로젝트를 인터넷에 공개할 차례입니다.
GitHub에 올리면 내 작품이 전 세계에서 접속 가능한 URL로 바뀝니다.