정답을 찍는 대신 공정을 나눈다 — AI로 만드는 키보드형 분류 활동

10월 20, 2026

자료ID AA-20261020-INTL-CARDS · 자체 제작 예제 · 실제 수업 적용 전 교사 검토

Eric Curts는 2023년 공개 글에서 생성형 AI로 HTML·JavaScript 학습 활동을 만들고 Google Sites에 넣는 과정을 소개했습니다. 샘플 프롬프트와 여러 코드·데모 링크가 있습니다. 여기서는 그 제작 방식을 참고해 한국어 공정 분류 활동을 새로 설계합니다. 원저자의 코드나 실습 문항을 복사한 자료가 아닙니다.

학습목표

학습자는 절삭·주조·소성가공을 재료 변화 방식으로 구분하고, 분류한 이유를 한 문장으로 설명합니다. 교사는 드래그가 어려운 학생도 조작할 수 있는 단일 HTML 활동을 만듭니다.

준비물·계정·비용

텍스트 파일을 저장할 편집기와 브라우저가 필요합니다. 제공 예제는 계정·API·인터넷 없이 열립니다. AI로 다시 제작하려면 학교에서 허용한 코드 생성 도구 계정을 이용하고 현재 사용 한도는 별도로 확인합니다. Google Sites 게시와 계정 연결은 이번 실습에서 실행하지 않았습니다.

예제입력

카드1: 회전하는 봉의 바깥을 공구로 깎아 지름을 줄인다 → 절삭
카드2: 녹인 금속을 주형에 부어 굳힌다 → 주조
카드3: 금속판을 롤 사이로 눌러 두께를 줄인다 → 소성가공
학생에게는 화살표 뒤 정답을 숨기고 교사용 기준에만 보관한다.

번호별 제작 절차

예제 세 문장에서 재료 제거·용융·변형이라는 판정 근거를 찾고 교사가 정답을 먼저 확정합니다.
AI에 아래 최초 프롬프트와 예제입력을 주어 단일 HTML을 요청합니다.
코드를 UTF-8의 activity.html로 저장하고 브라우저에서 엽니다. 메모장이 .txt를 붙이지 않았는지 확인합니다.
Tab으로 버튼까지 이동한 뒤 Enter로 분류합니다. 오답 한 번과 정답 한 번을 각각 넣어 다른 피드백이 나오는지 봅니다.
다음 카드로 넘어갈 때 이전 피드백이 지워지는지, 마지막 카드 뒤 처음부터 버튼이 작동하는지 확인합니다.
학생은 정답 버튼만 누르지 말고 종이에 분류 근거를 기록합니다. 교사는 버튼 횟수를 성취 점수로 쓰지 않고 설명의 적합성을 평가합니다.

1. 교사 기준 확정2. 카드·버튼 생성3. 오답 재시도4. 정답 후 설명

AI오토마타 자체 제작 과정도. 외부 화면·그림 복제 아님.

복사해 쓰는 자체 한국어 응용 프롬프트

외부 원본 프롬프트의 전문 번역이 아닙니다. 아래 지시는 이 글의 예제를 위해 새로 작성했습니다. 최초 지시에 위 예제입력을 함께 붙여 넣으세요.

최초

공정 분류 활동을 단일 HTML로 만들어라. 제공한 세 카드와 정답만 사용하라. 절삭·주조·소성가공 버튼으로 답하며 드래그를 요구하지 마라. 오답이면 재시도하게 하고 정답이면 이유를 설명한 뒤 다음 카드 버튼을 활성화하라. 키보드 Tab·Enter와 상태 알림을 지원하라. 외부 라이브러리·로그인·점수 전송 없이 동작하고 처음부터 버튼을 넣어라. 학생 화면에 정답표를 미리 노출하지 마라.

점검

카드1에 주조를 선택한 경우와 절삭을 선택한 경우를 구분해 검토하라. 오답인데 다음 카드가 열리거나, 같은 정답을 여러 번 눌러 점수가 늘어나는 구현이 있는지 확인하라. 실제 열어 보지 못했으면 실행했다고 쓰지 마라. 화면뿐 아니라 버튼 이름과 키보드 이동도 점검하라.

수정

오답 피드백이 정답 이름을 바로 알려주는 문제만 고쳐라. 재료가 제거되는지, 녹는지, 눌려 변형되는지 다시 보라는 힌트를 제공하라. 입력 카드와 정답 매핑은 바꾸지 마라. 다음 카드로 이동할 때 이전 상태를 초기화하라.

확장

용접과 절삭을 혼동하는 네 번째 카드를 교사 검토용으로 제안하라. 적용할 분류 범주가 현재 세 개에 없으므로 무리하게 정답을 붙이지 말고 범주 추가안을 먼저 제출하라. 기존 세 카드의 정답과 동작은 보존하라.

기대결과

세 카드가 순서대로 제시되고 오답은 재시도, 정답은 다음 단계로 이동합니다. 모든 조작은 키보드로 가능해야 합니다.

실제결과와 검증 범위

자체 HTML에서 오답 후 다음 단계 차단, Enter 정답 선택, 세 카드 완료, 처음부터 초기화를 내부 브라우저로 확인했습니다. 전체 Tab 순환·모바일 폭은 미검증이며 원저자 데모와 Google Sites 게시도 미실시입니다.

오류해결

화면 대신 코드가 보이면 확장자를 확인합니다. 다음 카드가 열리지 않으면 정답 선택 후 상태를 확인합니다. 버튼은 눌리는데 피드백이 없다면 이벤트 연결을 점검합니다. 공정 이름을 외우게만 되는 경우 재료 변화 근거를 말하게 합니다.

연습·평가기준

카드3을 압연 대신 단조 상황으로 바꾸고 분류가 유지되는 이유를 쓰세요. 평가 10점: 세 분류 3점, 재료 변화 설명 3점, 오답·정답 동작 확인 2점, 키보드·초기화 확인 2점.

기존 글과의 차이

기존 객관식 문항 글과 달리 문항 생성보다 HTML 상태 전환·재시도·접근성을 제작합니다.

공식·원저자 출처

Coding with AI for Schools — Eric Curts. 게시일: 2023-07-21. 확인: 2026-10-20. 원문 본문과 샘플 프롬프트·코드/데모 링크 확인.

자체 제작 전체 실행 코드

아래 접힌 영역을 열어 코드 전체를 복사하고, UTF-8 텍스트 파일 activity.html로 저장한 뒤 브라우저로 여세요. 별도 계정이나 API가 필요 없습니다.

전체 HTML 코드 펼치기

<!doctype html><html lang="ko"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>공정 분류 활동</title><style>body{font:20px/1.7 system-ui;max-width:800px;margin:40px auto;padding:20px;color:#123}button{font:inherit;margin:8px;padding:12px;border-radius:8px}button:focus-visible{outline:4px solid #086}#card{padding:24px;background:#eaf1f6}#feedback{min-height:70px}</style><h1>재료가 어떻게 바뀌나요?</h1><p>자체 교육 예제 · 선택 뒤 분류 근거를 말해 보세요.</p><p id="progress"></p><p id="card"></p><div id="choices"><button>절삭</button><button>주조</button><button>소성가공</button></div><p id="feedback" role="status" aria-live="polite"></p><button id="next" disabled>다음 카드</button><button id="reset">처음부터</button><script>
const cards=[['회전하는 봉의 바깥을 공구로 깎아 지름을 줄인다','절삭','재료를 제거하여 형상을 바꿉니다.'],['녹인 금속을 주형에 부어 굳힌다','주조','녹인 재료를 주형 안에서 굳힙니다.'],['금속판을 롤 사이로 눌러 두께를 줄인다','소성가공','재료를 눌러 영구적으로 변형합니다.']];let i=0;const el=id=>document.getElementById(id);function render(){el('progress').textContent=`${i+1} / 3`;el('card').textContent=cards[i][0];el('feedback').textContent='';el('next').disabled=true;el('next').textContent=i===2?'활동 마침':'다음 카드';document.querySelectorAll('#choices button').forEach(b=>b.disabled=false)}document.querySelectorAll('#choices button').forEach(b=>b.onclick=()=>{if(b.textContent===cards[i][1]){el('feedback').textContent='맞았습니다. '+cards[i][2];el('next').disabled=false;document.querySelectorAll('#choices button').forEach(x=>x.disabled=true);el('next').focus()}else el('feedback').textContent='다시 살펴보세요. 재료가 제거되나요, 녹나요, 눌려 변형되나요?'});el('next').onclick=()=>{if(i<2){i++;render();document.querySelector('#choices button').focus()}else{el('feedback').textContent='세 카드 완료. 분류 근거를 자신의 말로 정리하세요.';el('next').disabled=true;el('reset').focus()}};el('reset').onclick=()=>{i=0;render()};render();
</script></html>

AI 오토마타