환경 세팅
- Cursor · Claude Code 설치
- 프로젝트 폴더와 실행 이해
- AI에게 요청하는 기본 문법
커리큘럼 폴더
입문 · 주 1회 3시간 · 총 12시간 · 실습 중심
바이브 코딩: 아이디어를 앱으로
코드를 외우지 않고, AI와 대화하며 아이디어를 실제 작동하는 앱으로 만드는 과정입니다. Cursor와 Claude Code로 화면을 만들고, 데이터를 붙이고, 실제 주소로 배포하는 전 과정을 손으로 경험합니다.
- Cursor
- Claude Code
- UI
- Deploy
- MVP
4주
주 1회 진행
12시간
총 학습 시간
60%
실습 비중
1개
배포된 웹앱
Overview
과정 개요
누구를 위한 과정인지, 무엇을 배우고 무엇을 남기는지 먼저 확인하세요.
01
교육 대상
- 코딩을 처음 시작하는 비전공자
- 아이디어는 있지만 만들 줄 몰랐던 사람
- 1인 창업 · 사이드 프로젝트 준비자
02
학습 목표
- AI 코딩 도구로 화면을 만든다
- 데이터를 저장하고 불러온다
- 오류를 읽고 스스로 고친다
- 실제 주소로 배포한다
03
운영 방식
- 4주 / 주 1회 / 회당 3시간
- 강의 30% · 실습 60% · 피드백 10%
- 각자 원하는 앱 주제로 진행
04
최종 산출물
- 실제 접속 가능한 웹앱 1개
- 제작 과정 기록
- 다음 기능 개선 계획
Roadmap
4주 학습 로드맵
환경 → 화면 → 데이터 → 배포 순서로 완성도를 높입니다.
- Week 01환경
도구와 첫 화면
개발 환경을 갖추고 AI와 대화하며 첫 화면을 띄웁니다.
- Week 02화면
움직이는 화면
버튼과 입력에 반응하는 인터랙션을 만듭니다.
- Week 03데이터
데이터를 기억하기
새로고침해도 남는 데이터와 간단한 로그인을 붙입니다.
- Week 04배포
세상에 내보내기
실제 주소로 배포하고 사람들에게 공유합니다.
Week01
도구와 첫 화면
개발 환경을 갖추고 AI와 대화하며 첫 화면을 띄웁니다.
- 입문
- UI
- 실습
화면 만들기
- 원하는 페이지를 말로 설명
- 레이아웃과 색 조정 요청
- 미리보기로 바로 확인
실습: 나의 랜딩 페이지
- 소개 페이지 구성
- 버튼과 링크 추가
- 모바일 화면 점검
결과물브라우저에서 열리는 첫 페이지
Week02
움직이는 화면
버튼과 입력에 반응하는 인터랙션을 만듭니다.
- Interaction
- 기능
- 실습
상호작용 이해
- 클릭 · 입력 · 표시의 흐름
- 상태라는 개념 감 잡기
- AI에게 동작 설명하기
기능 붙이기
- 목록 추가 · 삭제
- 검색 · 필터
- 간단한 계산 기능
실습: 미니 도구
- 할 일 목록 or 계산기
- 동작 확인과 수정
- 작은 오류 직접 고치기
결과물사용자 입력에 반응하는 미니 도구
Week03
데이터를 기억하기
새로고침해도 남는 데이터와 간단한 로그인을 붙입니다.
- Data
- 저장
- 실습
데이터 개념
- 저장한다는 것의 의미
- 표(테이블)로 데이터 상상하기
- 간단한 데이터베이스 연결
읽고 쓰기
- 글 작성 · 목록 표시
- 수정 · 삭제
- 내 데이터만 보기
실습: 저장되는 앱
- 방명록 or 메모 앱
- 데이터 확인
- 오류 재현과 수정
결과물데이터가 저장되는 웹앱
Week04
세상에 내보내기
실제 주소로 배포하고 사람들에게 공유합니다.
- Deploy
- MVP
- Present
배포 준비
- 환경 변수와 비밀 관리
- 빌드가 뭔지 이해
- 배포 서비스 선택
배포 실습
- 원클릭 배포
- 도메인 연결
- 접속 문제 해결
공유 & 발표
- 링크 공유와 피드백
- 다음 기능 계획
- 최종 발표
결과물실제 도메인으로 접속되는 앱
Core habit
말로 만드는 4단계
설명 → 확인 → 수정 → 배포. 코드를 외우지 않고 대화로 완성합니다.
설명01
원하는 걸 문장으로
예: 카드 3개 나열
확인02
미리보기로 검증
예: 모바일도 확인
수정03
오류를 AI와 해결
예: 에러 로그 붙이기
배포04
실제 주소로 공개
예: 도메인 연결
Before
“코딩을 몰라서 못 만들어요”
After
“AI와 대화해서 작동하는 앱을 배포”
Result
최종 산출물과 평가 기준
배포자료, 실습자료, 발표자료까지 한 번에 완성합니다.
최종 산출물
- 실제 접속 가능한 웹앱 1개
- 제작 과정 기록
- 다음 기능 개선 계획
평가 기준
- 실제로 접속되는가
- 핵심 기능이 동작하는가
- 오류를 스스로 고쳤는가
- 다음 개선 계획이 있는가
활용 예시
- 예약 신청 페이지
- 간단한 메모 앱
- 이벤트 랜딩
- 1인 포트폴리오
만들 줄 모르는 사람에서, 아이디어를 배포하는 사람으로 바뀝니다.
Join this course