VOD 강의 · AI 코딩툴

비개발자도 클로드 코드로 만드는 예약 웹앱: 기획부터 출시까지

코딩 없이 플랜디로 기획하고 클로드 코드로 동네 필라테스 예약 앱을 만들어 실제 주소로 공개하는 입문 강의예요.

강의 목록

난이도 입문
총 43강
총 4시간 10분
미리보기 4개

미리보기 영상

결제 전에 강의를 직접 보고 고르세요.

이런 걸 배워요

내 아이디어를 기획서(PRD)·메뉴 구조(IA)·화면설계로 정리하는 방법
회원가입·카카오 로그인·예약·회원권·관리자 화면이 있는 예약 웹앱 완성

이런 분께 추천해요

앱 아이디어는 있는데 개발자를 구하기 어려운 가게 사장님·강사·1인 창업 준비생
AI 코딩 도구를 써 봤지만 중간에 코드가 뒤엉켜 포기한 비개발자

강의 소개

코딩을 몰라도, 예약 웹앱을 직접 만들어 인터넷에 올립니다

동네 필라테스 센터의 수업 예약 앱을 처음부터 끝까지 만듭니다. 아이디어를 플랜디로 기획서·메뉴 구조·화면설계까지 정리하고, 그 결과물인 개발용 기획 키트를 클로드 코드(웹)에 맡겨 앱을 만든 뒤, 카카오 로그인까지 붙여 실제 주소로 공개합니다.

AI 코딩 도구를 써 보다가 중간에 뒤엉켜 포기한 적이 있다면, 이 강의의 순서가 답이 됩니다. 기획 먼저, 개발은 그다음. 무엇을 만들지 정해 두면 AI에게 정확히 맡길 수 있어요.

듣기 편한 강의를 위해 AI를 썼어요

또렷한 AI 음성 나레이션 — 잡음·발음 흔들림 없이 끝까지 같은 목소리, 같은 속도로 들려요. 쉬운 말로 쓴 대본을 그대로 읽어서 한 문장도 놓치지 않게 했어요.
화면은 실제 작업 그대로 — 클로드 코드가 일하는 모습, 실제로 난 오류와 고치는 과정까지 보여 드려요.
강의도 AI와 함께 만들었어요 — 이 강의 자체가 "AI에게 일을 잘 맡기는 법"의 예시예요.

이런 분께 추천해요

앱 아이디어는 있는데 개발자를 구하기 어려운 가게 사장님·강사·1인 창업 준비생
AI 코딩 도구를 써 봤지만 코드가 뒤엉켜 포기한 비개발자
기획부터 출시까지 한 번에 경험해 보고 싶은 기획자·마케터

이 강의에서 만드는 앱

회원 화면: 이번 주 수업 시간표, 수업 상세(강사·남은 자리), 예약하기·예약 취소, 남은 횟수와 이력, 마이페이지
로그인: 이메일 회원가입 + 카카오로 시작하기
관리자 화면: 수업 등록·수정·삭제, 예약 현황, 회원 목록과 회원권 넣기
공개: 실제 주소로 배포하고, 무료로 주소를 짧게 바꾸기

이렇게 진행해요

가입부터 함께 — 클로드·플랜디·GitHub·Supabase·Vercel·카카오 개발자 가입을 진짜 사이트 찾는 법부터 따라 해요.
플랜디로 기획 — 인터뷰에 답하면 기획서(PRD)·메뉴 구조(IA)·화면설계가 만들어지고, 개발용 기획 키트로 받아요.
클로드 코드 웹으로 개발 — 키트를 GitHub에 올리고, 메뉴 하나씩 클로드에게 맡겨 만들어요.
클로드 코드 제대로 쓰기 — 규칙집(CLAUDE.md), 플랜 모드, 되돌리기, 스킬·후크·MCP, 사용량 아끼기.
연결하고 내놓기 — 수용 기준 확인, 실제 주소 공개, 카카오 로그인 연결, 마지막 점검.

수강생 혜택

플랜디 기획권 8개(화면 160장 분량)를 무료로 드려요. 강의 0-5에서 쿠폰 받는 법을 안내해요.

준비물과 비용

컴퓨터와 인터넷 브라우저(설치할 프로그램 없음)
Claude 유료 요금제(Pro 이상) — 클로드 코드 웹을 쓰려면 필요해요.
GitHub·Supabase·Vercel·카카오 개발자는 무료 범위로 충분해요.

알려 드려요

2026년 10월 화면 기준이에요. 서비스 화면이 조금 바뀌어도 따라 할 수 있도록 무엇을 찾는지 함께 설명해요.

커리큘럼

전체 43개 · 4시간 10분

1 시작하기 — 가입까지 함께 8개 · 31분

0-1 이 강의로 무엇을 만드나요 02:47
0-2 전체 지도 - 기획 → 키트 → 개발 → 공개 02:18
0-3 준비물과 비용 한눈에 02:41
0-4 진짜 사이트 찾기와 클로드 가입 06:07
0-5 플랜디 가입하고 쿠폰 받기 05:00
0-6 GitHub 가입하기 03:49
0-7 Supabase·Vercel 가입하기 04:56
0-8 카카오 개발자 가입하기 03:15

2 플랜디로 기획하기 7개 · 33분

1-1 아이디어 인터뷰 시작하기 06:51
1-2 인터뷰 결과 문서 7종 만들고 읽기 04:50
1-3 기획서(PRD)에서 꼭 볼 곳 04:16
1-4 메뉴 구조(IA) 만들고 범위 정하기 06:34
1-5 화면설계 만들고 둘러보기 04:54
1-6 개발용 기획 키트 받기 05:28
섹션 2 퀴즈

3 개발 준비 5개 · 20분

2-1 GitHub는 작업 보관함 04:18
2-2 키트를 저장소에 올리기 04:00
2-3 클로드 코드 웹 열기 05:33
2-4 첫 명령 - 둘러보기와 기획 점검 05:51
섹션 3 퀴즈

4 클로드 코드 웹으로 만들기 11개 · 1시간 13분

3-1 점검 결과 반영 범위 정하기 06:24
3-2 디자인 시안 3종 받고 고르기 07:44
3-3 뼈대와 메인 화면 07:37
3-4 Supabase·Vercel 연결과 이메일 회원가입 12:20
3-5 수업 시간표와 수업 상세 06:33
3-6 예약하기와 예약 취소 07:53
3-7 회원권과 횟수 차감 07:22
3-8 마이페이지 04:46
3-9 관리자 화면 06:42
3-10 막혔을 때 이렇게 05:33
섹션 4 퀴즈

5 클로드 코드 제대로 쓰기 8개 · 47분

4-1 우리 프로젝트 규칙집 CLAUDE.md 06:48
4-2 모드와 명령 08:06
4-3 바뀐 것 읽기와 되돌리기 06:26
4-4 자주 하는 일 저장하기 - 명령과 스킬 06:55
4-5 자동 안전장치 - 후크 07:17
4-6 화면 확인을 맡기기 - MCP 05:58
4-7 휴대폰으로 이어 하기와 사용량 아끼기 05:22
섹션 5 퀴즈

6 연결하고 세상에 내놓기 6개 · 32분

5-1 다 됐는지 확인하기(수용 기준) 05:27
5-2 실제 주소로 공개하기 06:27
5-3 카카오 개발자 사이트에 앱 등록 07:16
5-4 카카오 로그인 연결 07:36
5-5 주소 짧게 하기와 마지막 점검 05:28
섹션 6 퀴즈

7 마무리 4개 · 14분

6-1 받은 자료 3종 쓰는 법 04:44
6-2 고치고 기능 더할 때 05:55
6-3 다음 단계 03:25
섹션 7 퀴즈

들으려면 이것만 있으면 돼요

코딩 지식은 필요 없어요. 가입부터 함께 따라 해요.
수업에서 Claude 유료 요금제(Pro 이상)를 사용합니다.

자주 묻는 질문

코딩을 전혀 몰라도 따라 할 수 있나요?

네. 코드는 클로드가 쓰고, 우리는 무엇을 만들지 말로 정하고 결과를 눌러 보며 확인해요. 가입부터 배포까지 화면을 그대로 따라 하면 돼요.

따로 드는 비용이 있나요?

클로드 유료 요금제(Pro 이상)만 있으면 돼요. 깃허브·수파베이스·버셀은 무료 요금으로 충분하고, 도메인 구입처럼 돈이 드는 단계는 강의에서 말로만 설명해요.

윈도우 컴퓨터에서도 되나요?

네. 강의는 맥 화면으로 찍었지만 모든 작업을 웹 브라우저에서 해서 윈도우에서도 똑같이 따라 할 수 있어요. 단축키가 나올 때는 맥과 윈도우를 함께 알려 드려요.

88,000원선착순 10명까지 무료