1차시 · 25분
첫 요청으로 발표자 뽑기
무엇·동작·모습·형태를 넣어 작동하는 뽑기를 만든다
Vibe Studio · 교사 실습 과정
바이브코딩 4시간 · 첫 앱부터 로그인까지
6개 강의 PPT를 따라 뽑기·면접 연습부터 내 자료를 저장하는 할 일 앱까지 만듭니다. 실습 220분 + 휴식 20분.
- 6차시 · 총 240분
- 노트북 실습
- 공개 링크 완성
연수 전에 확인할 것
제공된 1–6강 발표자료 186쪽을 단계별로 연결한 교사 연수입니다. 첫 요청과 한 가지 수정, Antigravity·PRD, GitHub·Vercel 배포, Supabase 연결, 로그인과 사용자별 권한을 순서대로 실습합니다. DB 단계는 표와 연결을 준비하고 로그인·소유자 정책 뒤 실제 저장을 확인합니다.
- 이런 분께
- 코딩이 처음인 교사 · 노트북 실습
- 준비할 것
- 노트북, Noto Sans KR, Antigravity, Gemini·GitHub·Vercel·Supabase 계정, 테스트 A/B 계정
- 만들 결과
- 로그인하면 내 할 일이 저장되는 공개 앱 주소와 사용 장면
6차시
과정 흐름
2차시 · 30분
한 가지씩 수정하는 면접 연습 앱
어디를·어떻게·유지할 것을 지정해 기존 앱을 고친다
3차시 · 50분
Antigravity와 PRD로 할 일 앱 만들기
PRD.md와 index.html이 있는 로컬 앱을 실행한다
4차시 · 50분
GitHub와 Vercel에 공개하기
같은 저장소와 공개 주소로 첫 게시와 수정 반영을 확인한다
5차시 · 40분
Supabase 표와 앱 연결 준비
연수용 todos 표와 공개 클라이언트 설정을 준비한다
6차시 · 45분
로그인과 내 자료 권한 완성
로그인 후 저장과 두 계정의 자료 분리를 확인하고 공개 주소를 공유한다
6차시 자세히 보기
-
1
첫 요청으로 발표자 뽑기
무엇·동작·모습·형태를 넣어 작동하는 뽑기를 만든다
-
2
한 가지씩 수정하는 면접 연습 앱
어디를·어떻게·유지할 것을 지정해 기존 앱을 고친다
-
3
Antigravity와 PRD로 할 일 앱 만들기
PRD.md와 index.html이 있는 로컬 앱을 실행한다
-
4
GitHub와 Vercel에 공개하기
같은 저장소와 공개 주소로 첫 게시와 수정 반영을 확인한다
-
5
Supabase 표와 앱 연결 준비
연수용 todos 표와 공개 클라이언트 설정을 준비한다
-
6
로그인과 내 자료 권한 완성
로그인 후 저장과 두 계정의 자료 분리를 확인하고 공개 주소를 공유한다
실제 결과 예시
로컬 할 일 앱 · DB 연결 전
6개 PPT의 186쪽을 따라 만들기·수정·로컬 구현·배포·DB·로그인을 연결합니다. 실습 220분, 휴식 20분입니다.
실제 사례와 HTML 열기