← 목록으로

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

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

노코드 CLI
클로드 코드 101 실전 과제 8가지 GitHub · Vercel · Netlify
난이도 ★☆☆☆☆ 입문 ★★☆☆☆ 기초 ★★★☆☆ 중급 ★★★★☆ 고급 ★★★★★ 실전
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
엑셀 실적 데이터로 컨설팅 PPT 만들기
★★★☆☆
프롬프트
해당 폴더의 엑셀 파일("피자 매장별 실적 데이터.xlsx")을 탐색적으로 분석해줘. 매출·성장·수익성에서 발견한 핵심 인사이트를 정리하고, 경영진 보고용 Bain/맥킨지 스타일 진단 PPT로 만들어줘.
기대 효과
엑셀 원본 → 탐색적 분석 → 컨설팅 덱까지 한 번에. 데이터에서 인사이트를 뽑아 의사결정용 슬라이드로 정리하는 흐름을 경험합니다.
스킬 ♦ 프롬프트 엔지니어링 ♦ 멀티 페르소나/에이전트 ★ 데이터 & API 연동 ★ 문서·슬라이드 생성
06
구글 스프레드시트 기반 대시보드 만들기
★★★☆☆
프롬프트
아래 구글 스프레드시트("피자 매장별 실적 데이터")를 기반으로 경영자 대시보드를 만들어줘. https://docs.google.com/spreadsheets/d/1ZUOzgPdXKMp7mkyjTOhZ9wfaRRe9IuuGkekKNKG41ZQ/edit?gid=38840795 탐색적 분석을 할수 있는 인터랙티브 차트를 포함해서. 데이터는 Google Sheets CSV에서 직접 읽어오게. 뉴모피즘 스타일로.
기대 효과
구글 스프레드시트 → 인터랙티브 웹 대시보드 변환을 자동화. 시트를 수정하면 대시보드에 바로 반영되고, 데이터 시각화 도구 없이도 경영진 보고용 대시보드를 즉시 완성합니다.
스킬 ♦ 프롬프트 엔지니어링 ♦ UI/UX 디자인 ♦ 멀티 페르소나/에이전트 ♦ 데이터 & API 연동
클로드 코드 없이 · 아티팩트로 만들기
클로드 코드를 설치하지 않아도 됩니다. claude.ai 채팅에 아래 프롬프트를 붙여 넣으면 오른쪽 아티팩트 패널에 대시보드가 바로 만들어집니다.
아래 구글 스프레드시트("피자 매장별 실적 데이터")를 읽어서 경영자용 인터랙티브 대시보드를 아티팩트로 만들어줘. https://docs.google.com/spreadsheets/d/1ZUOzgPdXKMp7mkyjTOhZ9wfaRRe9IuuGkekKNKG41ZQ/edit?gid=38840795 탐색적 분석이 가능한 인터랙티브 차트를 포함하고, 시트 데이터는 아티팩트 안에 직접 담아줘.
07
CEO 데일리 브리핑 대시보드
★★★★★
프롬프트
CEO 아침 브리핑 대시보드를 만들어줘. 오늘의 날씨, 환율·마켓, AI 비서가 요약한 업계 뉴스, AI 명언, 오늘 일정을 한 화면에 모은 개인 대시보드야. 중요: API 키 없이도 샘플(mock) 데이터로 완전히 작동하게 만들어줘. 그리고 설정 패널에서 본인 API 키(뉴스·날씨·환율)를 입력하면 실시간 데이터로 전환되도록 해줘. 뉴모피즘 스타일로.
기대 효과
키 없이도 mock 데이터로 완성형 대시보드가 바로 작동하고, 본인 API 키를 연결하면 실시간으로 전환됩니다. "키 없이 완성, 키 있으면 실시간"이라는 실전 앱 설계 패턴을 익힙니다.
스킬 ♦ 프롬프트 엔지니어링 ♦ UI/UX 디자인 ♦ 멀티 페르소나/에이전트 ♦ 데이터 & API 연동 ★ AI 비서 만들기
08
마인크래프트 같은 3D 블록 세계 만들기
★★★★★
1단계 · Claude.ai 채팅에서 먼저
마인크래프트처럼 네모난 블록으로 이루어진 3D 세계를 브라우저에서 만들려고 해. 사원·숲·연못이 있는 공간을 내가 직접 1인칭으로 걸어다니는 웹앱이야. 아래 내용을 포함한 PLAN.md 파일을 작성해줘. - 구현 기능 목록 (WASD 이동, 마우스 시점, 점프/질주) - 사용할 기술 스택 (Three.js 등) - 파일/폴더 구조 - 단계별 구현 순서
2단계 · 클로드 코드에서
마인크래프트처럼 네모난 블록으로 이루어진 3D 세계를 만들어줘. PLAN.md를 참고해서 구현해줘.
기대 효과
복잡한 프로젝트일수록 먼저 채팅에서 PLAN.md를 설계하고 클로드 코드로 실행. 코딩 전 설계 습관이 완성도를 결정합니다.
스킬 ♦ 프롬프트 엔지니어링 ♦ UI/UX 디자인 ★ 3D & 게임 그래픽 ★ PLAN.md 설계
바이브코딩 실습 팁

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

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