중학교 창의적체험활동 AI 교육 사례 - 시흥은행중 바이브코딩으로 만든 학생 웹앱

중학교 창의적체험활동에 AI 교육을 넣으려는 담당 선생님이 자주 겪는 문제가 있습니다. 업체 제안서는 "생성형 AI 이해", "AI 윤리", "AI 도구 체험"으로 채워져 있는데, 막상 수업이 끝나면 학생 손에 남는 것이 없다는 점입니다. 강의를 듣고 끝나는 프로그램은 학급 수가 많을수록 만족도 편차도 커집니다.

이 글은 휴몬랩 교풀에듀가 시흥은행중학교에서 학급 단위로 운영한 AI 바이브코딩 교육 사례입니다. 학생이 만들고 싶은 화면을 말로 설명하고, AI가 생성한 코드를 실행해 보며 고쳐 나가는 제작형 수업으로, 수업이 끝나면 각자의 노트북에 직접 만든 웹 화면이 남습니다. 창체·동아리·정보 교과융합 프로그램을 검토하는 분께 구성과 운영 방식을 정리해 드립니다.

프로그램 개요

바이브코딩이 중학교 AI 교육에 맞는 이유

바이브코딩은 "이런 화면을 만들고 싶다"를 자연어로 설명하면 AI가 코드를 만들어 주고, 학생은 실행 결과를 보며 요청을 다듬어 가는 제작 방식입니다. 문법을 먼저 외우지 않아도 되기 때문에 코딩 경험이 없는 학생도 한 차시 안에 동작하는 화면을 볼 수 있습니다.

휴몬랩은 이 방식을 중학교에 적용할 때 두 가지를 고정합니다. 첫째, AI 사용법 강의가 아니라 기획에서 출발합니다. 누가 쓸 화면인지, 어떤 버튼이 필요한지, 눌렀을 때 무슨 일이 일어나야 하는지를 학생이 먼저 정리합니다. 둘째, 학생의 일상에서 소재를 가져옵니다. 막연한 미래 기술 대신 시간표, 시계, 간단한 게임처럼 학생이 결과를 스스로 판단할 수 있는 주제를 다룹니다.

수업 흐름 - 원리 이해에서 서비스 제작까지

프로그램은 생성형 AI가 코드를 만드는 원리를 이해하는 단계에서 시작해, 웹 페이지 구성 → 버튼·입력 같은 상호작용 추가 → 하나의 작은 서비스 완성 순서로 이어지도록 설계했습니다. 각 단계에서 학생은 요청 문장을 쓰고, 결과를 실행하고, 원하는 것과 다른 부분을 찾아 다시 요청합니다.

위 화면은 한 학생이 만든 시계 기능 웹앱입니다. 시각을 표시하는 단순한 기능이지만, 학생이 자기 기기에서 실행 결과를 확인하고 다시 요청하는 순환이 여기서 시작됩니다. AI 도구 소개 화면을 보는 것과 직접 만든 화면을 다루는 것의 차이가 이 장면에 있습니다.

'수업 시간표' 웹 페이지는 학생에게 가장 익숙한 소재를 디지털 결과물로 옮긴 예입니다. 요일과 교시를 표로 배치하는 요청, 과목별 색을 다르게 하는 요청처럼 학생 스스로 필요를 정의하고 AI에게 설명하는 연습이 자연스럽게 들어갑니다.

게임형 화면을 만든 학생도 있었습니다. 같은 수업, 같은 도구를 썼지만 결과물은 학생마다 다릅니다. 이 차이가 창의적체험활동 기록에 쓸 수 있는 관찰 근거가 됩니다.

휴몬랩이 준비해 간 것

• 학급 단위 교안: 기본 기능 학습과 프로젝트 실습을 한 흐름으로 묶어, 학급마다 같은 수준의 결과가 나오도록 차시를 구성했습니다.

• 기획 단계: 필요한 화면, 사용할 사람, 버튼을 눌렀을 때의 기능을 먼저 정리한 뒤 제작에 들어가도록 하여, "무엇을 만들 것인가"가 수업의 중심이 되게 했습니다.

• 설명과 표현 훈련: 원하는 결과를 말로 설명하고 결과물을 살펴보는 과정을 반복해, 문제 정의와 디지털 구현이 한 수업 안에 함께 들어가도록 했습니다.

휴몬랩은 사우고등학교, 금산고등학교, 군포중앙고등학교, 내촌중학교 등 여러 학교에서 바이브코딩 프로그램을 운영해 왔습니다. 시흥은행중학교 프로그램은 그 경험을 중학교 학급 단위에 맞게 조정한 구성입니다. 같은 학교에서는 앞서 전교생 대상 AI 윤리 수업도 교풀AI로 진행한 바 있습니다.

이런 학교·기관에 맞습니다

• 창의적체험활동이나 자유학기 활동에 학생 결과물이 남는 AI 교육을 넣고 싶은 중학교

• 정보 교과와 다른 교과(진로, 사회, 미술 등)의 주제를 연결하는 교과융합 프로젝트를 계획하는 담당자

• 여러 학급을 같은 기간에 운영해야 해서 학급별 균질한 진행이 필요한 학교

• 청소년 대상 디지털 제작 교육을 기획하는 교육청·지자체·청소년기관

교육 상담 안내

학교·기관명, 대상 학년, 학급 수와 참여 규모, 희망 일정과 교육 시간, 연결하고 싶은 주제를 알려주시면 교육 구성과 운영 방식, 견적을 안내해 드립니다. 학급 수와 차시에 따라 프로젝트 범위를 조정할 수 있습니다.

• 교육 상담 신청: 상담 신청 폼 작성하기

• 메일 문의: biz@huemone.com

• 전화: 02-2059-1139

함께 보면 좋은 사례: 사우고 AI 바이브코딩 교육 · 시흥은행중 전교생 AI 윤리 수업 · 내촌중 바이브코딩 AI 교육

#중학교AI교육 #창의적체험활동 #바이브코딩 #AI융합교육 #SW교육 #중학교AI교육사례 #교과융합 #교풀에듀