나만의 항구 : 웹사이트로 월수익 만들기

PART 1 · 프론트엔드 + AI 이미지 - 소상공인 사이트 완성 (15교시 · Claude Code + Midjourney + Next.js)

• 환경 세팅
• 프롬프트 설계 기초
• 반응형 웹 제작
• AI 이미지 생성
• 카카오맵 연동
• SEO 메타태그
• Vercel 배포

PART 2 · 백엔드·결제·관리자 - 50만원짜리를 300만원짜리로 (15교시 · MySQL + JWT + 토스페이먼츠)

• MySQL 테이블 설계
• REST API 설계
• 예약 시스템 DB 연동
• JWT 인증
• 관리자 대시보드
• 토스페이먼츠 결제
• 이메일 자동 알림

PART 3 · 배포·수익화·사업 런칭 - 수료 = 사업 시작 (15교시 · AWS Lightsail + 크몽 등록 + 실전 시뮬레이션)

• AWS Lightsail 배포
• 도메인 연결·SSL
• PM2 서버 관리
• 가격 책정·견적서
• 크몽·숨고 등록
• 클라이언트 시뮬레이션
• 3개월 액션플랜

과정 소개

• 지금 이 순간, 누군가는
• AI로 홈페이지를 납품하고
• 월 150+만원을 법니다
• 당신은 아직 "언젠가 해봐야지" 하고 있지 않나요? 바이브 코딩으로 기획부터 납품까지, 3주 만에 실전 창업합니다.
• 45교시
• 총 강의 분량
• 330만
• 전국 소상공인 시장
• 150만원+
• 건당 납품 단가
• $5/월
• 서버 유지 비용

이런 고민을 하고 있다면

• 유튜브로 따라 했는데 에러에서 멈췄다
• AI 도구 써봤는데 수익은 안 난다
• 코딩 시작했다가 6개월 만에 포기했다
• AI 강의는 들었는데 수익 연결이 안 된다

해결 방식

• AI를
• 수익으로 연결하는
• 가장 빠른 방법
• 바이브 코딩은 AI와 대화하듯 지시만 하면 코드가 만들어지는 새로운 개발 방식으로, 비전공자도 풀스택 서비스를 만들 수 있는 시대가 열렸습니다.
• 전국 330만 소상공인은 홈페이지를 필요로 하고 있습니다. 이 과정은 도구 사용법에서 그치지 않고, 바로 사업을 시작할 수 있습니다.
• 기획
• 제작
• 배포
• 납품
• 수익화
• 1
• user
• 소상공인 홈페이지 만들어줘 갤러리, 예약 폼, 관리자 페이지 포함 핑크-베이지 톤, 모바일 반응형
• 0
• assistant
• 네, 요구사항 정리 후 바로 진행하겠습니다.
• 500
• 2
• ✓ Next.js 프로젝트 생성 완료 ✓ 반응형 레이아웃 구성 완료 ✓ 갤러리 컴포넌트 생성 완료 ✓ 예약 폼 + MySQL 연동 완료 ✓ 관리자 대시보드 완료
• 3
• ✓ AWS Lightsail 서버 배포 완료 ✓ 도메인 연결 · HTTPS 적용 완료
• 4
• 클라이언트에게 검수 요청 보내기
• 클라이언트
• 확인했습니다. 너무 맘에 들어요!
• 850000
• 입금이 완료되었습니다
• 홈페이지 제작 · 납품 완료 · 제작기간 2일

사용 도구

• Claude Code
• Midjourney / DALL·E
• Next.js
• MySQL
• 토스페이먼츠
• AWS Lightsail
• AI와 대화하듯 코드를 생성하는 바이브 코딩의 핵심 도구. 이 강의의 중심입니다.
• 맞춤 AI 이미지 생성 및 마케팅 소재 제작. 납품 단가를 20~50만원 올려주는 기술입니다.
• SEO에 강한 프론트엔드 프레임워크. 소상공인 납품에 최적화.
• 예약·문의 데이터 저장 및 관리자 시스템 구축. 백엔드의 핵심입니다.
• 실결제 연동으로 납품 사이트 가치를 높이는 기술. 단가를 대폭 올려줍니다.
• 월 $5로 클라이언트에게 납품 가능한 서버 구축 및 배포. 월 유지관리 수익의 기반.

일반 부트캠프와의 차이

• 다른 강의와
• 무엇이 다른가요
• AI 도구 사용법을 가르치는 강의는 많습니다. 이 과정은 수익화까지 연결합니다.
• AI 홈페이지 제작 대행 창업 과정
• 코딩 강의
• AI 도구 강의
• 시작까지 시간
• partial
• 6개월~1년
• text
• 즉시
• 첫 강의부터 결과물
• 풀스택 (프론트+백엔드)
• 별도 수강
• no
• 프론트·백엔드 동시
• AI 이미지 제작 포함
• 마케팅 이미지 제작
• 실제 배포 (AWS)
• 일부만
• AWS 실전 배포
• 견적서·계약서 포함
• 템플릿 제공
• 크몽·숨고 등록 가이드
• 수주 전략 포함
• 수익화 연결
• 첫 수주까지 지원
• Q&A 지원
• Slack 온라인 지원

추천 대상

• 부업으로 월 100만원+ 원하는 직장인
• 퇴근 후 홈페이지 납품으로 월급 외 수입을 만들고 싶은 분
• 1인 창업 준비 중인 비전공자
• 개발자 없이 혼자 서비스를 만들고 사업을 시작하고 싶은 분
• 프리랜서 전환 준비 중인 디자이너·기획자
• 기존 스킬에 개발 능력을 더해 단가를 올리고 싶은 분
• AI 도구는 쓰는데 수익 연결이 안 되는 분
• ChatGPT·Claude는 쓰지만 어떻게 돈을 버는지 모르는 분
• 크몽·숨고에서 실전 납품 해보고 싶은 분
• 플랫폼 등록부터 첫 수주까지 가이드를 받고 싶은 분
• 코딩 배우고 싶었지만 시작 못 했던 분
• 문법부터 배우기 막막했던 분께, 이제 AI가 코드를 짜드립니다
• AI 시대의 1인 에이전시 창업을 노리는 분
• 개발·AI를 수익으로 연결하고 싶은 분
• 기존 프리랜서로 수익 구조를 체계화하려는 분

지원 방법

• 스크린샷 하나로 "이게 가능해요"라고 하지 않습니다. 실제 브리프에서 완성까지, 어떤 프롬프트로 어떻게 만들었는지 전부 보여드립니다.
• 클라이언트 브리프 수령
• 강원도 글램핑장 운영 클라이언트로부터 요청사항을 받습니다.
• 클라이언트 요청 원문
• quote
• "캘린더로 예약 받고 싶어요. 객실이 3개(기본/디럭스/프리미엄)고 성수기엔 요금이 다르게 받고 싶어요. 예약 들어오면 문자도 받고 싶고, 관리자 페이지에서 예약 현황 보고 싶습니다."
• 기획 단계 - 기능 목록 & 구조 설계
• 요청사항을 분해해 구현할 기능 목록과 DB 구조를 먼저 정리합니다. (이 기획 능력이 이 강의의 핵심입니다)
• 기획 노트
• list
• 캘린더 UI (날짜 선택 → 잔여 객실 표시)
• 객실 3종 + 성수기/비수기 요금 분리
• 예약자 정보 입력 → MySQL 저장
• 관리자 페이지 (예약 현황 + 월별 통계)
• 이메일 자동 알림 (Resend)
• 1차 프롬프트 - 프론트엔드 + DB 구조
• 기획을 바탕으로 Claude Code에 첫 번째 프롬프트를 입력합니다.
• 실제 사용 프롬프트
• Next.js + Tailwind CSS + MySQL로 글램핑장 예약 사이트 만들어줘. [기능 요구사항] - 메인 페이지: 히어로 배너, 객실 카드 3종, 시설 소개 - 예약 페이지: 달력 UI (react-calendar), 날짜 선택 시 해당 날짜의 객실별 잔여 확인 - 객실: 기본(평일 8만/주말 12만), 디럭스(평일 12만/주말 18만), 프리미엄(평일 18만/주말 25만) - 성수기(7~8월, 12/24~1/2) 전 객실 1.3배 요금 [DB 테이블] - rooms: id, name, weekday_price, weekend_price - reservations: id, room_id, check_in, check_out, guest_name, phone, total_price, status - blocked_dates: id, room_id, date (관리자 차단용) 컬러: 숲 그린 계열 (#2d6a4f 메인), 베이지 배경
• 1차 결과물
• 메인 페이지 완성
• 객실 카드 3종 렌더링
• 캘린더 날짜 선택 UI
• DB 테이블 생성 완료
• 2차 프롬프트 - 예약 로직 + 관리자 페이지
• 1차 결과물을 확인 후, 비즈니스 로직과 관리자 기능을 추가 지시합니다.
• 예약 완료 처리 로직 추가해줘. 1. 날짜 중복 예약 방지 (같은 방, 같은 날짜 이미 confirmed면 차단) 2. 예약 완료 시 Resend로 이메일 자동 발송 - 고객용: 예약 확인서 (날짜/객실/금액/취소 안내) - 관리자용: 새 예약 알림 3. 관리자 대시보드 추가: - JWT 로그인 - 예약 목록 (날짜 필터, 상태별 탭: 대기/확정/취소) - 월별 매출 막대 차트 (recharts) - 객실별 예약률 도넛 차트
• 최종 완성
• 중복 예약 방지 완료
• 이메일 자동 발송 연동
• 관리자 대시보드 (JWT)
• 매출 통계 차트
• AWS 배포 완료
• 서울 마포구 피부과 원장으로부터 온라인 예약 시스템 요청이 들어왔습니다.
• "진료 종류(여드름/레이저/피부관리)별로 예약받고 싶고, 담당 원장님도 선택할 수 있으면 좋겠어요. 예약 확인 문자도 보내주고, 원장님들이 당일 예약 현황 볼 수 있는 화면도 필요해요."
• 기획 - 예약 플로우 설계
• 단계별 예약 플로우를 스텝으로 쪼개고, 각 스텝의 UI와 데이터 구조를 정리합니다.
• 예약 플로우
• ① 진료 선택
• ② 담당의 선택
• ③ 날짜·시간 선택
• ④ 환자 정보 입력
• ⑤ 예약 확인 발송
• 프롬프트 - 단계별 예약 시스템
• 피부과 온라인 예약 시스템 만들어줘. [예약 플로우 - 4단계 스텝 UI] Step 1: 진료 선택 - 여드름 치료 / 레이저 / 피부관리 / 기타 - 각 진료별 소요시간, 가격 안내 카드로 표시 Step 2: 담당의 선택 - 의사 목록 (프로필 사진, 전문 분야, 경력) - 선택한 진료 가능한 의사만 필터링 Step 3: 날짜·시간 선택 - 달력 UI - 선택한 의사의 예약 가능 시간 슬롯 표시 - 이미 예약된 슬롯은 비활성화 Step 4: 환자 정보 - 이름, 연락처, 생년월일, 증상 메모 [DB] - services: 진료 종류 - doctors: id, name, photo, specialties[] - doctor_schedules: 요일별 근무 시간 - appointments: 예약 정보 전체
• 20년 농사 경력의 사과 농가 사장님. 중간 유통업자 없이 소비자에게 직접 팔고 싶지만 방법을 몰랐습니다.
• "예산에서 사과 농사 20년 했는데 중간 상인한테만 팔았어요. 직접 소비자한테 팔고 싶은데 어떻게 해야 할지 몰라서요. 상품 올리고 주문이랑 결제 받을 수 있는 사이트 하나 만들어주세요."
• AI 이미지 프롬프트 - Midjourney로 농장 비주얼 제작
• 클라이언트 사진이 없어도 AI 이미지로 신뢰감 있는 농장 이미지를 만듭니다. 상품 사진까지 납품하면 단가를 30만원 이상 올릴 수 있습니다.
• Midjourney 프롬프트
• fresh apple orchard in autumn, korean countryside, golden hour sunlight, natural organic farming, warm earthy tones, professional food photography, fresh produce direct from farm aesthetic, --ar 16:9 --v 6.1 --style raw
• 생성 결과
• 농장 전경 히어로 이미지
• 상품별 감성 사진 4종 (사과·딸기·고구마·쌀)
• 농부 스토리 섹션 배경
• 추가 단가: +20~30만원
• Claude Code 프롬프트 - 농가 직판 쇼핑몰 제작
• 결제·주문·재고 관리까지 한 번에. 단순 소개 페이지가 아닌 실제로 매출이 나오는 쇼핑몰을 납품합니다.
• 충남 예산 사과 농가 직판 쇼핑몰 만들어줘. [페이지 구성] - 히어로: 농장 배경 + "산지직송" 신뢰 배지 + 주문 CTA - 상품 목록: 카드형 진열 (사진/중량/가격/담기 버튼) - 농장 스토리: 농부 소개 + 무농약 재배 방식 섹션 - 주문·결제: 카카오페이 / 무통장입금 선택 가능 - 신뢰 요소: 무농약 인증 배지, 구매 후기, 당일 발송 보장 - 주문 알림: 결제 완료 시 사장님 카카오톡 알림 자동 발송 [디자인] - 컬러: #f0fdf4 (민트그린 배경), #1b4332 (딥그린 텍스트) - 폰트: Noto Sans KR - 모바일 완전 반응형 (스마트폰 주문 최적화)

학습 지원

• Slack Q&A 온라인 지원
• 수강 기간 중 막히는 지점은 슬랙 채널에서 담당 리더가 직접 응답합니다. 에러 스크린샷 올리면 해결해드립니다.
• 견적서·계약서 템플릿 제공
• 실제 수주에서 사용할 수 있는 견적서와 계약서 템플릿을 제공합니다. 수료 즉시 바로 사용 가능합니다.
• 3개월 액션플랜
• 수료 후 3개월 동안 무엇을 해야 하는지, 크몽 등록부터 첫 수주까지의 로드맵을 함께 만듭니다.

참여 전 확인사항

• 개강 전 환경 세팅 가이드를 발송해드립니다. 어렵지 않습니다.
• 필수
• 노트북
• Windows/Mac 모두 가능. RAM 8GB 이상 권장. 태블릿·크롬북은 사용 불가.
• Gmail 계정
• GitHub, AWS, Vercel 등 무료 가입에 사용. 계정이 없으면 새로 만들면 됩니다.
• 해외 결제 카드
• AWS Lightsail 월 $5 결제용. 신용카드 또는 체크카드. 과정 중 최소 금액만 발생.
• Claude Pro (월 $20)
• Claude Code 사용을 위해 필요. 수강 기간(3주) 동안 $20 한 번만 발생.
• 선택
• Midjourney (월 $10~)
• 미구독 시 Ideogram·DALL·E 등 무료 대안으로 실습 가능.
• AWS Lightsail ($5/월)
• 배포 실습 시 발생. 해외 결제 가능 카드 필요. 과정 중 $5 이하로 최소 비용만 발생합니다.

수강료·수료 혜택

• 실제 납품 수준 프로젝트 3종 포함
• 프롬프트 설계 가이드북 제공
• 견적서·계약서 템플릿 제공
• 크몽·숨고 프로필 작성 가이드
• Slack Q&A 온라인 지원
• 수료 후 3개월 액션플랜

마무리

• 330만 소상공인 시장에서 AI 납품 대행은 지금이 가장 빠른 진입 시점입니다. 얼리버드 특가는 선착순으로 마감됩니다.
• 무이자 5개월 할부 · 결제 후 즉시 수강 시작