웹 서비스 만들기 20강

이 과정에서 만드는 것

코딩을 몰라도 한국어로 AI에게 시켜서 내 서비스를 하나 만들고, 인터넷에 공개하고, 폰 홈 화면에 설치하는 과정입니다. 총 20강, 약 13시간 분량이며 하루 한 강씩 20일 동안 진행합니다.

기본 도구는 Claude 데스크탑 앱의 Code 탭입니다. 말로 시키면 파일을 만들고 고치고 명령까지 실행합니다. 터미널(글자 명령 창)은 각 강의의 "터미널로도 할 수 있어요"로 보조 방법만 안내합니다.

매 강의는 같은 리듬입니다. 요청 → 비교 화면 읽기 → 브라우저에서 눈으로 확인 → 커밋(저장) → 안 되면 되돌리기.

전체 흐름

1부 · 준비 (1~5강)

• 1강. 바이브 코딩이 뭔가요? — 설명하기 → 확인하기 → 다시 요청하기. 내 서비스 한 줄 적기.
• 2강. AI 시대의 기본 용어 — 프론트엔드, 백엔드, DB, API를 식당 비유로 익힙니다.
• 3강. 개발 환경 세팅 — Claude 데스크탑 앱, VS Code, Node.js, Git 설치.
• 4강. Claude Code 200% 활용하기 — 화면 구성, 승인 창 읽기, 파일 만들고 고치는 순환.
• 5강. Git — 세이브(커밋), 되돌리기, GitHub에 올리기.

2부 · 기획과 프롬프트 (6~10강)

• 6강. 아이디어에서 기획까지 — 다섯 칸짜리 PLAN.md.
• 7강. 좋은 프롬프트의 기술 — 구체적으로, 하나만, 하지 말 것, 확인 기준.
• 8강. 첫 프로젝트 — Next.js 프로젝트를 만들고 Vercel로 첫 배포. 내 주소 생성.
• 9강. CLAUDE.md — AI에게 프로젝트 규칙 설명서 주기.
• 10강. 수직 슬라이싱 — 한 입 크기로 쪼갠 TODO.md.

3부 · 만들기 (11~15강)

• 11강. 프론트엔드 기초 — 컴포넌트, 상태, 이벤트. 화면 조각 만들기.
• 12강. 백엔드 기초 — localStorage와 Supabase 데이터베이스에 저장.
• 13강. API 연동 — 서버 라우트로 AI API를 안전하게 연결 (키는 브라우저에 두지 않기).
• 14강. 인증 — 매직 링크 로그인과 RLS로 "내 데이터는 나만".
• 15강. 디버깅 — 에러 읽기, 버그 보고 형식, 버그 3개 잡기.

4부 · 세상에 내놓기 (16~20강)

• 16강. 배포 — 환경변수·빌드 점검, 공개 전 체크리스트.
• 17강. 피드백과 개선 — 사용자 3명 관찰, 우선순위 정하기.
• 18강. 디자인 레벨업 — 색·글꼴·간격 규칙(DESIGN.md)으로 "AI 티" 벗기기.
• 19강. 자동화 — 스크립트, 예약 작업, AI 스킬.
• 20강. 모바일 앱 — PWA로 폰 홈 화면에 설치. 20일 돌아보기.

실습 결과물

과정이 끝나면 손에 남는 것입니다.

결과물	만드는 강
내 서비스 한 줄	1강
GitHub 저장소 (my-first-app)	5강
PLAN.md 기획서	6강
PROMPT_TEMPLATE.md 요청문 템플릿	7강
인터넷 주소(.vercel.app)가 있는 첫 서비스	8강
CLAUDE.md 규칙 파일	9강
TODO.md 작업 목록	10강
화면 조각, 데이터 저장, AI 추천 기능	11~13강
이메일 로그인과 RLS 보안	14강
BUG_TEMPLATE.md	15강
공개 전 체크리스트를 통과한 배포본	16강
사용자 관찰 노트와 개선 목록	17강
DESIGN.md와 다듬은 화면	18강
npm run check, 스킬 파일	19강
폰에 설치된 앱 아이콘	20강

문서 파일(PLAN.md, CLAUDE.md, DESIGN.md, TODO.md, 템플릿들)은 다음 프로젝트에 그대로 복사해 쓰는 자산입니다.

준비물

• 컴퓨터 한 대 (Windows 또는 macOS)와 인터넷
• Claude 계정: Code 탭을 쓰려면 Pro 이상 구독이나 API 결제 등록이 필요합니다.
• 가입할 서비스(대부분 무료): GitHub, Vercel, Supabase
• 13강에서 AI 기능을 붙일 때 쓸 AI API 키 (소액 결제, 월 5달러 정도면 충분. 무료 공개 API로 대체 가능)
• 사용자 3명 (17강. 지인이면 충분)
• 폰 한 대 (배포 주소 확인과 20강 설치용)
• 노트 한 권 (또는 메모 앱)

끝나면 할 수 있는 것

• 아이디어를 한 장짜리 기획서로 정리하고, 기능을 "하루에 끝나는 조각"으로 쪼갤 수 있습니다.
• AI에게 구체적으로 요청하고, 비교 화면을 읽어 수락과 거절을 판단할 수 있습니다.
• Git으로 저장하고 망치면 되돌릴 수 있어서 AI에게 과감하게 시킬 수 있습니다.
• 화면, 데이터 저장, 외부 API, 로그인이 있는 서비스를 직접 만들어 배포할 수 있습니다.
• 에러 메시지에서 무슨 일 / 어디서 / 언제를 뽑아 AI에게 정확히 보고할 수 있습니다.
• 사용자에게 보여주고 피드백을 받아 우선순위를 정해 고칠 수 있습니다.
• 서비스를 폰 홈 화면에 설치되는 앱으로 만들 수 있습니다.

막힐 때 기억할 세 가지

1. 에러 메시지를 그대로 복사해서 AI에게 붙여넣는다.
2. 한 번에 하나만 바꾼다. 이상하면 "마지막 커밋 상태로 되돌려줘".
3. 세 번 실패하면 요청을 더 작게 쪼갠다.