1차시
Canva
발표자 뽑기 만들기
Vibe Studio · 교사 실습 과정
안양 교사 바이브코딩 · 만들고 배포하기
Canva·AI Studio로 만들고 게시하는 120분 연수 + Eduitit에 HTML 올리기 선택 실습 10분
- 120분 + 선택 10분
- 노트북 실습
- 공개 링크 완성
연수 전에 확인할 것
기존 52쪽·120분으로 발표자 뽑기와 퀴즈쇼를 만들고 두 곳에 게시합니다. 이후 선택 실습 53–56쪽에서 Gemini로 만든 HTML을 Eduitit에 올리고 학생 화면에서 실행합니다.
- 이런 분께
- 코딩과 앱 제작이 처음인 초등 교사
- 준비할 것
- 노트북, 인터넷, Canva·Google·GitHub·Vercel 계정, 원본 및 수정 HTML
- 만들 결과
- 동료 기기에서 실행되는 퀴즈쇼 공개 주소
6차시
과정 흐름
2차시
AI Studio
퀴즈쇼 만들기
3–4차시
게시
GitHub Pages와 Vercel에서 실행
5차시
수정
같은 주소에 새 내용 반영
6차시 · 선택 10분
Eduitit
HTML을 올리고 학생 화면에서 실행
6차시 자세히 보기
-
1
Canva로 발표자 뽑기
첫 뽑기를 만들고 디자인을 고친다
-
2
AI Studio로 퀴즈쇼
세 번의 요청으로 퀴즈쇼를 만들고 교사가 정답을 확인한다
-
3
HTML 파일과 GitHub Pages
index.html을 내려받아 첫 공개 주소에서 실행한다
-
4
Vercel로 같은 저장소 게시
같은 GitHub 저장소를 Vercel에서 가져와 두 번째 주소를 확인한다
-
5
수정하고 같은 주소에서 확인
첫 문제를 고쳐 두 공개 주소에서 새 버전을 확인한다
-
6
선택 · Eduitit에 HTML 올리기
만든 HTML을 Eduitit에 올리고 학생 화면에서 실행한다
실제 결과 예시
원본 퀴즈쇼 index.html
강사 시연을 보고 각자 Canva·AI Studio·GitHub Pages·Vercel을 직접 사용합니다.
실제 사례와 HTML 열기