교사와 학부모를 위한 바이브코딩

AI에게 자연어로 지시해 소프트웨어를 만드는 바이브코딩을, 교사와 학부모가 코딩 경험 없이 실습으로 익히는 워크숍 자료다. 도구는 Gemini 하나이며, 곱셈 웹앱부터 임시정부 이동경로 지도, 학습지·챗봇까지 수업에 바로 쓰는 결과물을 직접 만든다. 슬라이드 28장 전체를 아래 PDF로 내려받을 수 있고, 주요 슬라이드는 그 아래 갤러리에서 바로 넘겨볼 수 있다.

강의 개요

항목	내용
원작 워크숍	math-tong — 「교사와 학부모를 위한 바이브코딩」
도구	Gemini(제미나이) — 자연어 대화로 웹앱 생성·수정
기반	책 《교사와 학부모를 위한 바이브 코딩》 (황건호·신종환·김형규·김명휘, 씨마스21)
대상	교사 · 학부모 · 비전공 입문자 (코딩 경험 불필요)
분량	슬라이드 28장 · 3부 실습 구성
큐레이션	김진관 (닷커넥터)

자료 내려받기

슬라이드 전체 내려받기 (PDF · 28장 · 약 2MB)
편집용 파워포인트 내려받기 (PPTX · 28장 · 약 0.5MB) — 학교·수업에 맞게 자유롭게 수정

도입 — 말이 결과를 만든다

바이브코딩의 핵심은 감이 아니라 지시의 구체성이다. 몰라서 못 만드는 것이 아니라 정확히 말하지 못해서 못 만든다. 무엇을 만들지 학년·범위·방식으로 구체화하고, 결과를 보며 증상을 말해 고치고, 색·타이포·톤을 시스템으로 넘기는 세 가지 문법이 전부다. 실습 전에는 Gemini 한도에 대비해 구글 계정을 여유 있게 준비하고, 창 전환·새 채팅 요령은 joo.is/vibe0707 규칙을 따른다.

Part 1 — 곱셈 웹앱

같은 곱셈 앱이라도 대화의 결이 결과물의 격을 가른다. 1단계는 학년·범위·계산 방식을 명시해 기능을 세우고, 2단계는 쓰는 사람을 묘사해 디자인을 맞추며, 3단계는 색상코드·타이포·톤을 표로 정리해 넘겨 완성도를 올린다. 프롬프트를 구조로 다루는 감각을 여기서 익힌다.

Part 2 — 임시정부 이동경로 지도 웹앱

leaflet.js로 만드는 인터랙티브 역사 지도다. 성취기준 [10한사2-01-05]에서 출발해 상하이부터 충칭까지 여덟 도시를 마커와 빨간 점선으로 잇는다. 지도가 안 나타나면 증상을 그대로 말해 고치고, 반응형으로 다듬은 뒤에는 세 단계 퀴즈로 게임화하고 활동지·루브릭까지 확장한다. 마지막에는 빈칸만 바꾸면 어떤 주제에도 쓰는 재사용 템플릿 프롬프트로 정리한다.

Part 3 — 확장: 학습지·GEMS·튜터·챗봇

한 번 익힌 문법으로 과목과 형식을 넓힌다. 영단어 방탈출 웹앱에 손글씨 노트 디자인을 입히고, 서버 없이 구글 시트로 기록을 저장한다. 정보 교과에서는 설명·체험 두 모드를 갖춘 알고리즘 시각화 튜터를, 이어서 페르소나·모드·시각 피드백·고정 버튼 네 요소로 나만의 재귀함수 챗봇을 만든다. Notion 디자인 프롬프트 갤러리에서 원하는 분위기를 골라 붙이면 톤이 잡힌다.