시흥은행중학교 AI 바이브코딩 수업 - 공부 타이머와 학급 시간표를 웹앱으로 만든 중학생들

사례 요약

시흥은행중학교는 학급 단위로 AI 바이브코딩 수업을 운영했습니다. 학생들은 만들고 싶은 화면과 기능을 AI에게 설명하고, 결과를 확인하며 고쳐 나가는 방식으로 웹앱을 만들었습니다. 결과물로는 공부 타이머와 학급 수업 시간표 같은 학교생활 웹앱과 게임형 화면이 나왔습니다.

수업 구성: 생성형 AI의 코딩 원리에서 서비스 제작까지

바이브코딩은 만들고 싶은 화면과 기능을 자연어로 설명하고, AI가 만든 코드와 결과를 확인하며 수정하는 방식입니다. 교풀에듀는 생성형 AI의 코딩 원리를 이해하는 단계에서 출발해 웹 페이지 구성, 상호작용, 서비스 제작으로 이어지도록 수업을 설계했습니다.

수업의 중심에는 ‘무엇을 만들 것인가’라는 질문이 있습니다. 수업에서는 필요한 화면과 사용할 사람, 버튼을 눌렀을 때의 기능을 구체화하는 과정을 디지털 제작과 함께 다뤘습니다. 학급별 수업을 전제로 기본 기능 학습과 프로젝트 실습을 연결했습니다.

학생 결과물: 학교생활에서 고른 웹앱

한 학생은 ‘스마트폰 잠그고 공부 시작’ 버튼과 타이머가 있는 공부 타이머 웹앱을 만들었습니다. 뒤쪽 노트북에 띄운 ‘[시흥은행중] AI 바이브코딩’ 게시판에는 학생들이 결과물을 올리는 칸이 있습니다.

다른 학생은 Figma Make로 ‘1학년 7반 수업 시간표’ 웹앱을 만들었습니다. AI 입력창에는 “1학년 7반으로 수정해줘”라는 요청이 남아 있어, 학생이 AI에게 고칠 내용을 자연어로 요청하며 화면을 다듬은 과정을 볼 수 있습니다.

학생들이 만든 결과물에는 게임형 화면도 있었습니다.

교풀에듀가 맡은 일

• 수업 설계: 생성형 AI의 코딩 원리에서 웹 페이지 구성, 상호작용, 서비스 제작으로 이어지는 바이브코딩 과정을 구성했습니다.

• 학급별 운영: 학급 단위로 기본 기능 학습과 프로젝트 실습을 연결해 수업을 진행했습니다.

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

• 창의적체험활동에 디지털 제작 경험을 담으려는 중학교

• 정보 교과와 다른 교과의 주제를 웹앱 제작으로 연결하려는 담당자

• 여러 학급에서 같은 제작형 AI 수업을 운영하려는 학교

함께 보면 좋은 사례

• AI 바이브코딩 교육 - 내촌중학교

• 군포중앙고등학교 AI 바이브코딩 교육 - 학생이 고른 주제를 웹 프로토타입과 발표 자료로 표현한 수업

• 정선정보공업고등학교 AI 진로 개척 프로그램 - 전교생 7개 분반이 하루 동안 만든 진로 웹·앱과 포트폴리오

교육 상담

학교·기관명, 대상과 인원, 희망 일정, 관심 주제를 알려 주시면 프로그램 구성과 운영 방식, 견적을 안내해 드립니다.

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

• 메일: biz@huemone.com

• 전화: 02-2059-1139