목록으로
교육·학습을 위한 AI 활용
바이브코딩으로 수업용 웹앱(웹사이트) 제작하기
코딩을 모르는 가정 교사가 AI와 '대화'만으로 학생 참여형 디지털 워크북을 만들어 수업과 동료 교사에게 나누기까지.
🤖 활용 AI 도구
클로드
코딩을 모르는 가정 교사가 AI와 '대화'만으로 학생 참여형 디지털 워크북을 만들어 수업과 동료 교사에게 나누기까지.
① 어떤 상황에서 AI를 활용했나요?
가정과 소비생활 단원은 학생들의 일상과 가장 가까운 내용인데도, 개념과 용어 중심으로 가르치다 보면 아이들이 쉽게 지루해했습니다. 학생들이 크롬북으로 직접 진단하고, 고르고, 써 보면서 스스로 개념에 닿는 활동이 필요했습니다. 하지만 저는 코딩을 전혀 할 줄 몰랐고, 시중의 에듀테크 도구는 로그인이나 유료 결제가 필요해 수업에 바로 쓰기 어려웠습니다. 그래서 '원하는 것을 말로 설명하면 AI가 만들어 주는' 바이브 코딩에 도전했습니다.
② 어떤 AI를 어떻게 활용했나요?
생성형 AI인 Claude와 대화하며 웹앱을 만들었습니다. 처음 건넨 말은 "중학생 소비자 교육 사이트를 만들어 가정 수업에 활용하고 싶어. 가능할까?"였습니다. 이어서 "로그인 없이, 돈이 들지 않게, 45분 수업, 크롬북 사용"이라는 조건과 2022 개정 교육과정 성취기준 문장을 그대로 붙여 넣었더니, 바로 수업에 쓸 수 있는 첫 시안이 나왔습니다.
그 뒤로는 시안을 보고 고치는 과정을 반복했습니다. AI에게 성취기준 해설과 대조해 빠진 내용을 찾게 했고, 그 결과 처음 구상한 5개 장이 성취기준을 빠짐없이 다루는 6개 장으로 늘어났습니다. 디자인은 "너무 지루해 보여"라는 한마디로 시작해, 가격표·스티커·’참 잘했어요' 도장처럼 학생들이 일상에서 보는 소재를 활용한 화면으로 바뀌었습니다. 완성된 웹앱은 무료 호스팅 서비스(Netlify)에 올려 QR 코드로 공유했고, 같은 방식으로 A4 활동지, 수업 도입 PPT, 지도안, 복습용 게임까지 만들었습니다.
③ 활용 결과 어떤 변화가 있었나요?
가장 큰 변화는 수업 자료를 '찾아 쓰는' 교사에서 '직접 설계해 만드는' 교사가 되었다는 점입니다. 소비 성향 진단, 장면 매칭, 광고 분석, 내용증명 쓰기, 삶의 질 제안서처럼 머릿속에만 있던 활동이 실제로 학생이 누르고 쓸 수 있는 화면이 되었습니다.
[학생들의 반응이나 수업 장면 한두 문장. 예: 학생들이 어떤 활동에 가장 몰입했는지, 어떤 말을 했는지]
또한 이 워크북을 블로그로 다른 가정 선생님들과 나누기 시작하면서, 제 수업 자료가 다른 교실에서도 쓰이는 경험을 하고 있습니다.
④ 나만의 방식 또는 개선 포인트는 무엇인가요?
AI가 기능을 만들어 주어도, 수업을 아는 것은 교사라는 점을 끝까지 붙잡았습니다.
'생각 먼저' 설계: 처음 버전은 버튼을 누르면 바로 정답이 나왔습니다. "학생들이 생각할 여유 없이 답을 보게 된다"는 판단에서, 자기 생각을 먼저 써야 설명이 열리고 쓰기 어려운 학생에게는 답이 아닌 '생각의 방향'만 주는 힌트를 넣었습니다.
교사의 판단으로 덜어 내기: AI가 제안한 방식이 학생들에게 너무 복잡하다고 판단될 때는 과감히 원래 방식으로 되돌렸습니다.
검증은 교사의 몫: 청약철회, 소비자 권리 같은 법·제도 내용은 공식 자료와 대조했고, 모든 버튼을 직접 눌러 보며 오류를 찾았습니다. 학생 개인정보는 아예 저장하지 않는 구조로 만들었습니다.
⑤ 다른 사람도 따라 할 수 있나요?
네, 코딩을 몰라도 충분히 따라 할 수 있습니다. 제가 해 보며 정리한 방법은 이렇습니다.
첫 요청에 학년, 수업 시간, 사용 기기, 조건(로그인 없음, 무료)을 구체적으로 적습니다.
성취기준 문장을 그대로 붙여 넣고, 빠진 내용이 없는지 AI에게 점검을 맡깁니다.
한 번에 다 만들려 하지 말고, 시안을 보고 "지루해", "복잡해"처럼 느낌 그대로 고쳐 달라고 합니다.
완성되면 모든 기능을 직접 눌러 확인하고, 사실 정보는 공식 자료로 검증합니다.
무료 호스팅에 올려 QR 코드로 학생들과 공유합니다.
제 과정을 블로그에 단계별로 정리해 두었으니, 처음 시작하시는 선생님들도 그대로 따라 하실 수 있습니다.
1편 https://blog.naver.com/kookoo_95/224446339558
2편 https://blog.naver.com/kookoo_95/224446687916
3편 https://blog.naver.com/kookoo_95/224447388021
4편 https://blog.naver.com/kookoo_95/224447388021
5편 https://blog.naver.com/kookoo_95/224447396134
결과물 사이트 주소 https://consumer-workbook-gajeong.netlify.app/
① 어떤 상황에서 AI를 활용했나요?
가정과 소비생활 단원은 학생들의 일상과 가장 가까운 내용인데도, 개념과 용어 중심으로 가르치다 보면 아이들이 쉽게 지루해했습니다. 학생들이 크롬북으로 직접 진단하고, 고르고, 써 보면서 스스로 개념에 닿는 활동이 필요했습니다. 하지만 저는 코딩을 전혀 할 줄 몰랐고, 시중의 에듀테크 도구는 로그인이나 유료 결제가 필요해 수업에 바로 쓰기 어려웠습니다. 그래서 '원하는 것을 말로 설명하면 AI가 만들어 주는' 바이브 코딩에 도전했습니다.
② 어떤 AI를 어떻게 활용했나요?
생성형 AI인 Claude와 대화하며 웹앱을 만들었습니다. 처음 건넨 말은 "중학생 소비자 교육 사이트를 만들어 가정 수업에 활용하고 싶어. 가능할까?"였습니다. 이어서 "로그인 없이, 돈이 들지 않게, 45분 수업, 크롬북 사용"이라는 조건과 2022 개정 교육과정 성취기준 문장을 그대로 붙여 넣었더니, 바로 수업에 쓸 수 있는 첫 시안이 나왔습니다.
그 뒤로는 시안을 보고 고치는 과정을 반복했습니다. AI에게 성취기준 해설과 대조해 빠진 내용을 찾게 했고, 그 결과 처음 구상한 5개 장이 성취기준을 빠짐없이 다루는 6개 장으로 늘어났습니다. 디자인은 "너무 지루해 보여"라는 한마디로 시작해, 가격표·스티커·’참 잘했어요' 도장처럼 학생들이 일상에서 보는 소재를 활용한 화면으로 바뀌었습니다. 완성된 웹앱은 무료 호스팅 서비스(Netlify)에 올려 QR 코드로 공유했고, 같은 방식으로 A4 활동지, 수업 도입 PPT, 지도안, 복습용 게임까지 만들었습니다.
③ 활용 결과 어떤 변화가 있었나요?
가장 큰 변화는 수업 자료를 '찾아 쓰는' 교사에서 '직접 설계해 만드는' 교사가 되었다는 점입니다. 소비 성향 진단, 장면 매칭, 광고 분석, 내용증명 쓰기, 삶의 질 제안서처럼 머릿속에만 있던 활동이 실제로 학생이 누르고 쓸 수 있는 화면이 되었습니다.
[학생들의 반응이나 수업 장면 한두 문장. 예: 학생들이 어떤 활동에 가장 몰입했는지, 어떤 말을 했는지]
또한 이 워크북을 블로그로 다른 가정 선생님들과 나누기 시작하면서, 제 수업 자료가 다른 교실에서도 쓰이는 경험을 하고 있습니다.
④ 나만의 방식 또는 개선 포인트는 무엇인가요?
AI가 기능을 만들어 주어도, 수업을 아는 것은 교사라는 점을 끝까지 붙잡았습니다.
'생각 먼저' 설계: 처음 버전은 버튼을 누르면 바로 정답이 나왔습니다. "학생들이 생각할 여유 없이 답을 보게 된다"는 판단에서, 자기 생각을 먼저 써야 설명이 열리고 쓰기 어려운 학생에게는 답이 아닌 '생각의 방향'만 주는 힌트를 넣었습니다.
교사의 판단으로 덜어 내기: AI가 제안한 방식이 학생들에게 너무 복잡하다고 판단될 때는 과감히 원래 방식으로 되돌렸습니다.
검증은 교사의 몫: 청약철회, 소비자 권리 같은 법·제도 내용은 공식 자료와 대조했고, 모든 버튼을 직접 눌러 보며 오류를 찾았습니다. 학생 개인정보는 아예 저장하지 않는 구조로 만들었습니다.
⑤ 다른 사람도 따라 할 수 있나요?
네, 코딩을 몰라도 충분히 따라 할 수 있습니다. 제가 해 보며 정리한 방법은 이렇습니다.
첫 요청에 학년, 수업 시간, 사용 기기, 조건(로그인 없음, 무료)을 구체적으로 적습니다.
성취기준 문장을 그대로 붙여 넣고, 빠진 내용이 없는지 AI에게 점검을 맡깁니다.
한 번에 다 만들려 하지 말고, 시안을 보고 "지루해", "복잡해"처럼 느낌 그대로 고쳐 달라고 합니다.
완성되면 모든 기능을 직접 눌러 확인하고, 사실 정보는 공식 자료로 검증합니다.
무료 호스팅에 올려 QR 코드로 학생들과 공유합니다.
제 과정을 블로그에 단계별로 정리해 두었으니, 처음 시작하시는 선생님들도 그대로 따라 하실 수 있습니다.
1편 https://blog.naver.com/kookoo_95/224446339558
2편 https://blog.naver.com/kookoo_95/224446687916
3편 https://blog.naver.com/kookoo_95/224447388021
4편 https://blog.naver.com/kookoo_95/224447388021
5편 https://blog.naver.com/kookoo_95/224447396134
결과물 사이트 주소 https://consumer-workbook-gajeong.netlify.app/
