목록으로
교육·학습을 위한 AI 활용
바이브 코딩 웹 앱을 엔트리로 구현하는 SW 역설계 교수법
강사가 AI 바이브 코딩으로 제작한 웹 앱을 학생들이 체험한 뒤, 동일한 알고리즘을 엔트리에서 구현하는 SW 역설계 교수법
🤖 활용 AI 도구
CanvaAI/Gemini/claude
① 어떤 상황에서 AI를 활용했나요?
*블록 코딩 수업의 고질적 한계 — '왜 만드는지 모르고 조립만 하는 학생들'
엔트리 블록 코딩 수업을 진행하면서 반복적으로 마주치는 문제가 있습니다. 학생들이 블록을 조립하는 방법은 익혀도, 그 안에 담긴 알고리즘의 흐름을 논리적으로 이해하지 못한다는 점이었습니다. "왜 이 블록이 여기 들어가야 하지?"라는 질문에 스스로 답하지 못하는 상황이 반복됐습니다.
*해결책으로서의 '역설계(Reverse Engineering) 수업' 구상:
이를 해결하기 위해 실제 완성된 소프트웨어를 먼저 경험하고 그 구조를 뜯어보며 배우는 '역설계 수업'을 구상했습니다. 학생들에게 바이브 코딩으로 구현된 웹 앱의 알고리즘을 설명하고 체험하도록 한 뒤, 블록코딩 프로그램 엔트리로 똑같이 재현해내는 방식입니다.
② 어떤 AI를 어떻게 활용했나요?
*수업 전 — 생성형AI를 활용한 바이브 코딩으로 웹 앱 제작 및 배포
생성형 AI(CanvaAI/Gemini/Claude 등)에게 자연어로 원하는 기능을 요청하는 '바이브 코딩' 방식을 활용했습니다.
바이브 코딩으로 구현된 웹 앱은 게시 또는 링크를 활용하여 웹에서 접속할 수 있으며 학급 패들렛에 URL링크를 공유하여 학생들이 쉽게 접속할 수 있는 환경을 구축했습니다.
*실사용 예
수업 대상: 초등 4~6학년, 40분 수업
수업 진행: 분석 → 체험 → 재현의 3단계 진행
1. 강사가 '클릭 스피드 테스트' 앱의 알고리즘 흐름과 논리적 구조를 먼저 설명합니다.
2. 학생들이 패들렛에 공유된 URL링크를 통해 PC에서 직접 체험합니다.
3. 웹 앱의 작동 원리를 바탕으로 엔트리 환경에서 동일한 알고리즘을 직접 구현하는 블록 코딩 실습을 진행합니다.
③ 활용 결과 어떤 변화가 있었나요?
*"이거 어떻게 만든 거예요?" — 호기심이 주도적 학습 동기가 되다
늘 보던 예제 대신, 강사가 직접 배포한 '클릭 스피드 테스트' 앱을 만나자 아이들의 눈빛이 달라졌습니다. 게임처럼 즐기면서 자연스럽게 "이 앱은 어떤 원리로 작동하는 걸까?"라는 질문을 스스로 던지기 시작했습니다.
*목적을 가진 코딩 태도로의 뚜렷한 변화:
직접 앱을 체험해본 학생들은 [첫 클릭 시 초시계 시작 -> 클릭한 수가 1씩 증가 -> 클릭한 수가 30이라면 초시계 정지, 초시계 값 말하기]이라는 보이지 않는 알고리즘 구조를 더 쉽게 이해했습니다. 이 흐름을 파악한 상태에서 엔트리 실습에 들어가자, 교사의 화면을 맹목적으로 복사하듯 따라 하던 과거의 모습에서 탈피하여 "내가 원하는 기능을 구현하기 위해 이 블록을 쓴다"는 목적 중심의 적극적인 코딩 태도로 변화했습니다.
④ 나만의 방식 또는 개선 포인트는 무엇인가요?
*AI를 '문서 생산 도구'가 아닌 '수업 교재 제작 도구'로 쓰다
기존의 많은 AI 교육 사례가 시험 문제 출제나 시나리오 작성 등 '텍스트 결과물'을 얻는 데 머물렀다면, 저는 AI를 교사의 아이디어를 실물로 띄워주는 '소프트웨어 프로토타이퍼'로 확장하여 사용했습니다.
*'바이브 코딩 -> 체험 -> 블록 역설계'라는 독창적 교육 패러다임 수립:
강사는 자연어(Vibe)로 웹 앱을 제작하고, 학생은 익숙한 블록(Block) 코딩으로 구현하는 교수-학습 루프를 만들었습니다. 강사의 아이디어가 교재로 실현되는 시간이 단축되었으며, 수업 준비의 부담은 줄고 수업의 몰입도와 질은 높아졌습니다.
⑤ 다른 사람도 따라 할 수 있나요?
*JavaScript를 몰라도 됩니다 — 아이디어만 있으면 누구나 가능합니다
이 수업 방식은 기술적 부담이 크지 않아 전국 어떤 교사나 강사라도 즉시 현장에 적용할 수 있습니다. AI에게 원하는 앱의 규칙을 말로 설명하기만 하면 배포 가능한 HTML 파일이 완성되기 때문입니다.
*기기 제약 없는 뛰어난 확산성과 무한한 확장성:
완성된 앱은 URL로 스마트폰, 태블릿, PC 등 기기 종류에 상관없이 실행되므로 인프라 환경을 타지 않습니다. 또한, 이번에 진행한 '클릭 스피드 테스트' 외에도 '사칙연산 퀴즈 앱', '시각 반응속도 측정기', '가위바위보 AI 게임' 등 교사의 상상력에 따라 어떤 아이디어든 동일한 프로세스로 다양하게 확장하여 수업할 수 있는 범용성을 지니고 있습니다.
*블록 코딩 수업의 고질적 한계 — '왜 만드는지 모르고 조립만 하는 학생들'
엔트리 블록 코딩 수업을 진행하면서 반복적으로 마주치는 문제가 있습니다. 학생들이 블록을 조립하는 방법은 익혀도, 그 안에 담긴 알고리즘의 흐름을 논리적으로 이해하지 못한다는 점이었습니다. "왜 이 블록이 여기 들어가야 하지?"라는 질문에 스스로 답하지 못하는 상황이 반복됐습니다.
*해결책으로서의 '역설계(Reverse Engineering) 수업' 구상:
이를 해결하기 위해 실제 완성된 소프트웨어를 먼저 경험하고 그 구조를 뜯어보며 배우는 '역설계 수업'을 구상했습니다. 학생들에게 바이브 코딩으로 구현된 웹 앱의 알고리즘을 설명하고 체험하도록 한 뒤, 블록코딩 프로그램 엔트리로 똑같이 재현해내는 방식입니다.
② 어떤 AI를 어떻게 활용했나요?
*수업 전 — 생성형AI를 활용한 바이브 코딩으로 웹 앱 제작 및 배포
생성형 AI(CanvaAI/Gemini/Claude 등)에게 자연어로 원하는 기능을 요청하는 '바이브 코딩' 방식을 활용했습니다.
바이브 코딩으로 구현된 웹 앱은 게시 또는 링크를 활용하여 웹에서 접속할 수 있으며 학급 패들렛에 URL링크를 공유하여 학생들이 쉽게 접속할 수 있는 환경을 구축했습니다.
*실사용 예
수업 대상: 초등 4~6학년, 40분 수업
수업 진행: 분석 → 체험 → 재현의 3단계 진행
1. 강사가 '클릭 스피드 테스트' 앱의 알고리즘 흐름과 논리적 구조를 먼저 설명합니다.
2. 학생들이 패들렛에 공유된 URL링크를 통해 PC에서 직접 체험합니다.
3. 웹 앱의 작동 원리를 바탕으로 엔트리 환경에서 동일한 알고리즘을 직접 구현하는 블록 코딩 실습을 진행합니다.
③ 활용 결과 어떤 변화가 있었나요?
*"이거 어떻게 만든 거예요?" — 호기심이 주도적 학습 동기가 되다
늘 보던 예제 대신, 강사가 직접 배포한 '클릭 스피드 테스트' 앱을 만나자 아이들의 눈빛이 달라졌습니다. 게임처럼 즐기면서 자연스럽게 "이 앱은 어떤 원리로 작동하는 걸까?"라는 질문을 스스로 던지기 시작했습니다.
*목적을 가진 코딩 태도로의 뚜렷한 변화:
직접 앱을 체험해본 학생들은 [첫 클릭 시 초시계 시작 -> 클릭한 수가 1씩 증가 -> 클릭한 수가 30이라면 초시계 정지, 초시계 값 말하기]이라는 보이지 않는 알고리즘 구조를 더 쉽게 이해했습니다. 이 흐름을 파악한 상태에서 엔트리 실습에 들어가자, 교사의 화면을 맹목적으로 복사하듯 따라 하던 과거의 모습에서 탈피하여 "내가 원하는 기능을 구현하기 위해 이 블록을 쓴다"는 목적 중심의 적극적인 코딩 태도로 변화했습니다.
④ 나만의 방식 또는 개선 포인트는 무엇인가요?
*AI를 '문서 생산 도구'가 아닌 '수업 교재 제작 도구'로 쓰다
기존의 많은 AI 교육 사례가 시험 문제 출제나 시나리오 작성 등 '텍스트 결과물'을 얻는 데 머물렀다면, 저는 AI를 교사의 아이디어를 실물로 띄워주는 '소프트웨어 프로토타이퍼'로 확장하여 사용했습니다.
*'바이브 코딩 -> 체험 -> 블록 역설계'라는 독창적 교육 패러다임 수립:
강사는 자연어(Vibe)로 웹 앱을 제작하고, 학생은 익숙한 블록(Block) 코딩으로 구현하는 교수-학습 루프를 만들었습니다. 강사의 아이디어가 교재로 실현되는 시간이 단축되었으며, 수업 준비의 부담은 줄고 수업의 몰입도와 질은 높아졌습니다.
⑤ 다른 사람도 따라 할 수 있나요?
*JavaScript를 몰라도 됩니다 — 아이디어만 있으면 누구나 가능합니다
이 수업 방식은 기술적 부담이 크지 않아 전국 어떤 교사나 강사라도 즉시 현장에 적용할 수 있습니다. AI에게 원하는 앱의 규칙을 말로 설명하기만 하면 배포 가능한 HTML 파일이 완성되기 때문입니다.
*기기 제약 없는 뛰어난 확산성과 무한한 확장성:
완성된 앱은 URL로 스마트폰, 태블릿, PC 등 기기 종류에 상관없이 실행되므로 인프라 환경을 타지 않습니다. 또한, 이번에 진행한 '클릭 스피드 테스트' 외에도 '사칙연산 퀴즈 앱', '시각 반응속도 측정기', '가위바위보 AI 게임' 등 교사의 상상력에 따라 어떤 아이디어든 동일한 프로세스로 다양하게 확장하여 수업할 수 있는 범용성을 지니고 있습니다.
