🎬 "아이들이 머릿속으로만 헤매던 알고리즘, 눈앞에서 직접 움직여준다면?"
순서도에서 가장 까다로운 개념은 바로 '조건에 따른 분기(If-Else)'와 '반복 루프(Loop)'입니다. 성인 개발자에게는 익숙한 코드 추적(Dry-run)이 초등학생에게는 너무나 추상적이라, 화살표가 어디로 가는지 손가락으로 짚다가 길을 잃기 일쑤죠. 하지만 순서도를 완성하고 [실행] 버튼을 누르면 노드가 노란빛으로 두근두근(Pulse) 살아나며 1초마다 다음 단계로 건너뛰는 시각적 시뮬레이터가 있다면 수업의 풍경이 완전히 달라집니다!
⏱️ 30초 바이브 코딩 요약
자바스크립트의async/await와 CSS@keyframes펄스 효과를 결합하여, 현재 실행 중인 순서도 상자가 1초 동안 환하게 빛나며 화살표를 따라 다음 상자로 이동하는 시각적 알고리즘 시뮬레이션 엔진을 만들어 보세요. 동시에 우측 로그창에 [STEP 1: 라면 끓이기 시작] -> [STEP 2: 물 붓기] -> [STEP 3: 물이 끓는가?]가 차례대로 기록되어, 아이들이 루프와 분기의 흐름을 직관적으로 검증할 수 있습니다.
📊 정적인 종이 순서도 vs 살아 움직이는 시각적 시뮬레이터
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 단계별 펄스 조명 (Pulsing Step Indicator) |
지금 컴퓨터가 순서도의 어느 상자를 처리하고 있는지 샛노란 테두리 확대 애니메이션으로 강조해요. | "지금 컴퓨터가 몇 번째 상자에 불이 켜졌는지 다 같이 눈으로 쫓아가 볼까요?" |
| 반복 루프의 체감 (Loop Visualization) |
조건이 맞지 않아 뒤로 되돌아가는 화살표를 타고 상자가 다시 번쩍이는 과정을 통해 '반복'을 눈으로 확인해요. | '물이 안 끓으면 1분 기다리고 다시 물이 끓는지 확인'하는 반복 루프를 직접 체험하게 해보세요. |
| 실시간 실행 로그 (Step-by-step Log) |
불이 켜질 때마다 우측 로그창에 기호 종류(처리, 조건, 입출력)와 내용이 순차적으로 기록되어 오류를 찾아내요. | 실행이 엉뚱한 곳에서 멈췄을 때 로그를 보며 "화살표가 끊긴 곳"을 스스로 디버깅하게 합니다. |
💡 초보자를 위한 바이브 코딩 실전 사용 예시
아래 프롬프트를 복사하여 제미나이에 넣어보세요. 외부 설치 없이 브라우저에서 바로 순서도가 1초 간격으로 움직이는 애니메이션 시뮬레이터를 코딩해 줍니다.
[역할 정의]
당신은 에듀테크 인터랙션 디자이너이자 자바스크립트 알고리즘 엔지니어입니다.
초등학생이 만든 순서도를 눈앞에서 1단계씩 살아 움직이듯 시뮬레이션해 주는 '시각적 드라이런(Visual Dry-run) 시뮬레이터' 웹앱을 단일 HTML 파일로 작성해 주세요.
[1. 에러 방지 기본 안전장치 (Zero-Error Baseline)]
- 외부 라이브러리 없이 순수 HTML5, CSS3, Vanilla JavaScript로 작성하세요.
- 반복문(루프)이 포함된 순서도 실행 시 브라우저 탭이 먹통이 되지 않도록, 최대 실행 단계(visitedCount < 20)를 제한하는 '무한루프 방지 안전 퓨즈'를 반드시 내장하세요.
- 실행 중 사용자가 중복으로 버튼을 연타하지 못하도록 비동기 실행 락 플래그(isSimulating = true/false)를 걸어 오작동을 차단하세요.
- 누락(// TODO) 없는 100% 완전한 단일 HTML 코드를 출력하세요.
[2. 시뮬레이션 엔진 및 인터랙션 스펙 (Core Logic)]
1. 펄스 하이라이트 애니메이션 (@keyframes):
- 현재 실행 중인 노드에
- 1000ms(1초) 비동기 지연(Promise setTimeout) 후 하이라이트를 해제하고 연결된 다음 노드로 바통을 넘깁니다.
2. 조건 분기 자동 선택 로직:
- 조건 판단 노드에 도달하면 '예(YES)' 경로 화살표를 우선 탐색하여 분기 흐름을 시연하고, 루프백(되돌아가기) 화살표를 타고 다시 검사하는 과정을 보여줍니다.
3. 실시간 실행 로그 서랍:
- 노드가 펄스를 뿜을 때마다 우측 로그 서랍에 [STEP 번호 | 노드 명칭 | 기호 타입 배지]가 부드러운 페이드인으로 추가되고 자동으로 스크롤됩니다.
- 최종 [끝] 노드에 도달하면 초록색 축하 배너("알고리즘 실행 정상 종료!")를 띄웁니다.
[3. 거꾸로 질문하기 (Reverse Prompting)]
코드를 작성하기 전에 먼저 아래 3가지 사항을 저에게 질문해 주세요:
1. 시뮬레이션 실행 속도를 학생 수준에 맞춰 '느리게(1.5초)', '보통(1초)', '빠르게(0.5초)'로 조절하는 슬라이더를 추가할까요?
2. 노드가 한 단계씩 넘어갈 때마다 경쾌한 효과음(Web Audio API 띡/동 소리)을 함께 재생해 드릴까요?
3. 조건 판단 노드에서 멈추어 학생이 직접 '예' 또는 '아니오' 버튼을 눌러 다음 길을 선택하게 하는 '인터랙티브 모드'도 지원할까요?
당신은 에듀테크 인터랙션 디자이너이자 자바스크립트 알고리즘 엔지니어입니다.
초등학생이 만든 순서도를 눈앞에서 1단계씩 살아 움직이듯 시뮬레이션해 주는 '시각적 드라이런(Visual Dry-run) 시뮬레이터' 웹앱을 단일 HTML 파일로 작성해 주세요.
[1. 에러 방지 기본 안전장치 (Zero-Error Baseline)]
- 외부 라이브러리 없이 순수 HTML5, CSS3, Vanilla JavaScript로 작성하세요.
- 반복문(루프)이 포함된 순서도 실행 시 브라우저 탭이 먹통이 되지 않도록, 최대 실행 단계(visitedCount < 20)를 제한하는 '무한루프 방지 안전 퓨즈'를 반드시 내장하세요.
- 실행 중 사용자가 중복으로 버튼을 연타하지 못하도록 비동기 실행 락 플래그(isSimulating = true/false)를 걸어 오작동을 차단하세요.
- 누락(// TODO) 없는 100% 완전한 단일 HTML 코드를 출력하세요.
[2. 시뮬레이션 엔진 및 인터랙션 스펙 (Core Logic)]
1. 펄스 하이라이트 애니메이션 (@keyframes):
- 현재 실행 중인 노드에
.active-step 클래스를 붙여 scale(1.05) 확대와 함께 강렬한 앰버(#f59e0b) 광원 글로우 효과를 부여합니다.- 1000ms(1초) 비동기 지연(Promise setTimeout) 후 하이라이트를 해제하고 연결된 다음 노드로 바통을 넘깁니다.
2. 조건 분기 자동 선택 로직:
- 조건 판단 노드에 도달하면 '예(YES)' 경로 화살표를 우선 탐색하여 분기 흐름을 시연하고, 루프백(되돌아가기) 화살표를 타고 다시 검사하는 과정을 보여줍니다.
3. 실시간 실행 로그 서랍:
- 노드가 펄스를 뿜을 때마다 우측 로그 서랍에 [STEP 번호 | 노드 명칭 | 기호 타입 배지]가 부드러운 페이드인으로 추가되고 자동으로 스크롤됩니다.
- 최종 [끝] 노드에 도달하면 초록색 축하 배너("알고리즘 실행 정상 종료!")를 띄웁니다.
[3. 거꾸로 질문하기 (Reverse Prompting)]
코드를 작성하기 전에 먼저 아래 3가지 사항을 저에게 질문해 주세요:
1. 시뮬레이션 실행 속도를 학생 수준에 맞춰 '느리게(1.5초)', '보통(1초)', '빠르게(0.5초)'로 조절하는 슬라이더를 추가할까요?
2. 노드가 한 단계씩 넘어갈 때마다 경쾌한 효과음(Web Audio API 띡/동 소리)을 함께 재생해 드릴까요?
3. 조건 판단 노드에서 멈추어 학생이 직접 '예' 또는 '아니오' 버튼을 눌러 다음 길을 선택하게 하는 '인터랙티브 모드'도 지원할까요?
🚀 선생님을 위한 3단계 수업 적용 가이드
- 1단계 (순서도 설계): 라면 끓이기나 줄넘기 타이머처럼 조건과 반복이 들어간 순서도를 학생들이 직접 구성하게 합니다.
- 2단계 (알고리즘 실행 클릭): [알고리즘 실행] 버튼을 누르고 전자칠판 화면을 보며, 노란 불빛이 화살표를 따라 흘러가는 모습을 전교생이 숨죽여 관찰합니다.
- 3단계 (디버깅 토의): "선생님, 물이 안 끓었을 때 1분 기다렸다가 다시 '물이 끓는가?'로 불빛이 돌아가요!"라며 반복문의 본질을 스스로 발견하게 유도합니다.
🎯 에디터 한줄평
"프로그래밍에서 가장 어려운 것은 보이지 않는 논리의 흐름을 상상하는 일입니다. 1초 간격의 펄스 불빛이 순서도를 훑고 지나갈 때, 아이들의 눈동자 속에서도 알고리즘의 길이 환하게 켜집니다."
📌 참고 안내: 본 기사는 비동기 웹 기술을 활용한 소프트웨어 알고리즘 시각화 교육 방법론을 다룹니다. 더 많은 초등 실과 및 에듀테크 바이브 코딩 예제는 교육 블로그(21-edu.blogspot.com)에서 확인하실 수 있습니다.
