[바이브 코딩 교구] 제미나이로 만드는 초3 수학 '곱셈의 계산 원리' 4대 역량 진단평가 웹앱 (방사형 레이더 차트 & 무설치 캔버스 인증서)

🎯 단순 계산 반복은 그만! 초3 수학 '곱셈의 계산 원리' 4대 역량 진단평가 웹앱 (동적 레이더 차트 & 고해상도 인증서 탑재)

💡 이번 교구 바이브 코딩 30초 핵심 다이제스트:
초등학교 3학년 2학기 곱셈 단원에서 기계적인 연산 드릴(Drill) 학습지만 반복하면, 아이들은 "왜 올림수를 십의 자리에 적어야 하는지", "40×6과 4×6의 관계가 무엇인지" 같은 수학적 본질을 놓치기 쉽습니다.
2022 개정 수학과 성취기준 [4수01-07]을 바탕으로, 수학 4대 역량(정보처리, 추론, 의사소통, 문제해결)을 다면 평가하는 인터랙티브 진단 웹앱을 제미나이와 함께 단일 HTML 파일로 완성해 보세요!
실시간 역량 레벨업 게이지, 서술형 문장의 정규식 자동 판별, 동적 SVG 방사형 레이더 차트, 그리고 외부 라이브러리 없이 순수 HTML5 캔버스로 렌더링되는 고해상도 평가 인증서 PNG 다운로드까지 완벽히 탑재되었습니다.

📊 한눈에 보는 3대 핵심 평가 혁신 분석표

무엇이 바뀌었나요? (영역)	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
⚙️ 단순 연산 ➔ 4대 수학 교과 역량 다면 진단	단순 계산(정보처리) 외에 어림·분해(추론), 원리 서술(의사소통), 빈칸 추론(문제해결)을 20문항 44점으로 종합 평가합니다.	단원 마무리 시간에 학생의 취약 역량(계산은 빠르나 서술이 약한지 등)을 핀포인트로 진단하기
📊 획일적 점수 ➔ 동적 SVG 방사형 레이더 차트	평가 종료 시 4축 레이더 차트가 학생의 득점에 맞춰 실시간으로 그려지며 도달(상/중/하) 총평 리포트를 자동 발행합니다.	시각적 방사형 그래프를 보며 학생 스스로 자신의 수학적 강점과 보완점을 한눈에 확인
📸 외부 라이브러리 0개 ➔ 순수 Canvas 고해상도 인증서	외부 다운로드 라이브러리 없이 브라우저 내장 Canvas 2D API(DPR 2배율)로 선명한 리포트 카드 PNG 이미지를 즉시 생성합니다.	[리포트 이미지로 저장] 버튼을 눌러 학급 위두랑, 패들렛, 학부모 상담 포트폴리오 자료로 활용

🧩 초등 3학년 2학기 곱셈 원리 4대 역량 평가 설계도

• 1. 정보처리 (계산 알고리즘 8문항, 16P):
  (몇십)×(몇), 올림이 없는 곱셈, 십의 자리 올림, 백의 자리 올림, 올림이 2번 있는 곱셈, 세 자리 수 곱셈, 0이 포함된 세 자리 수 곱셈까지 단계별 계산 절차를 숙달했는지 확인합니다.
• 2. 추론 (원리 탐구 및 어림 6문항, 14P):
  24×3 = (20×3) + (4×3) 가르기 분해, 53×6이 50×6보다 18만큼 큰 이유, 69×5를 70×5 = 350으로 근사 어림하는 수 감각을 측정합니다.
• 3. 의사소통 (수학적 언어화 4문항, 10P):
  "40×6=240인 까닭"을 10배 원리로 설명하고, 올림수 1을 십의 자리 위에 적는 까닭이 "1이 아닌 10을 뜻하기 때문"임을 문장으로 작성하도록 유도하며 정규식(Regex) 키워드로 자동 채점합니다.
• 4. 문제해결 (원리 응용 및 퍼즐 2문항, 4P):
  2□ × 4 = 96에서 빈칸 □ 역추론하기, 수 카드(3, 5, 8) 중 두 장을 골라 가장 큰 (몇십)×(몇) 곱 만들기 등 조건 해결 능력을 검증합니다.

💡 초보자를 위한 바이브 코딩 실전 사용 예시

📌 따라하기 3단계 순서

1. 1단계 (거꾸로 프롬프트 복사): 아래 제공된 [제미나이 전용 곱셈 진단평가 웹앱 프롬프트]를 복사하여 구글 제미나이(https://gemini.google.com)에 입력합니다.
2. 2단계 (역질문 3가지 답변): 제미나이가 되묻는 질문(문항 난이도 조절, 서술형 키워드 판별 엄격도, 성취 배지 디자인)에 내 학급 수업 상황에 맞게 1줄로 답변합니다.
3. 3단계 (단일 index.html 실행): 제미나이가 출력한 완성형 코드를 메모장에 넣고 multiplication_assessment.html로 저장한 뒤 더블 클릭하면 외부 라이브러리 설치 없이 즉시 실행됩니다!

📋 복사해서 바로 쓰는 '제미나이 전용 곱셈 역량 진단평가 에러 제로 프롬프트'

당신은 초등 수학 교육과정 평가 전문가이자 프론트엔드 풀스택 엔지니어입니다.
2022 개정 초등학교 3학년 2학기 수학 성취기준: "[4수01-07] 곱하는 수가 한 자리 수 또는 두 자리 수인 곱셈의 계산 원리를 이해하고 그 계산을 할 수 있다."를 다면 평가하는 '곱셈 원리 4대 역량 진단평가 웹앱'을 단일 HTML5 파일로 제작해 주세요.

[🚨 에러 방지 및 수업 안심 필수 안전장치 (Zero-Error Baseline)]
1. 단일 파일 완결성: 외부 라이브러리 CDN(html2canvas, 외부 차트 라이브러리 등)이나 백엔드 서버 없이, 브라우저 순수 내장 기능(HTML5 Canvas 2D API, 인라인 SVG)과 바닐라 자바스크립트만으로 100% 동작하는 완전한 코드로 출력할 것. 생략 주석(// TODO, /* 생략 */ 등) 절대 금지.
2. 개인정보 원천 차단: 학생 실명 입력을 요구하지 말고 가상 동물 닉네임(계산의 달인 다람쥐 등)이나 번호를 입력하도록 유도할 것.
3. 4대 수학 역량 기반 20문항 체계:
   - 정보처리(8문항): 몇십×몇, 올림 1~2회 곱셈, 세 자리 수 곱셈 (단계별 정오 판별 및 힌트 제공)
   - 추론(6문항): 가르기 분해, 어림셈, 계산 결과 대소 비교
   - 의사소통(4문항): 곱셈의 원리와 올림수 표기 이유를 문장으로 서술 (정규식 regex 기반 핵심 키워드 자동 채점)
   - 문제해결(2문항): 빈칸 □ 추론, 수 카드 조합 최대 곱 퍼즐
4. 동적 SVG 방사형 레이더 차트: 최종 제출 시 4개 축(정보처리, 추론, 의사소통, 문제해결)의 득점 비율을 다각형으로 시각화하고, 종합 성취수준(도달-상/중/하) 및 맞춤형 총평을 제시할 것.
5. Canvas 기반 고해상도 인증서 PNG 저장: 외부 캡처 라이브러리 없이 순수 Canvas 2D 드로잉 함수(DPR 2배율)로 레이더 차트와 점수가 담긴 리포트 카드를 '곱셈원리_성취리포트.png'로 다운로드할 수 있게 할 것.

[❓ 역질문 유도 (Reverse Prompting)]
코드를 작성하기 전에, 나에게 아래 3가지 질문을 먼저 던져서 세부 구성을 확정해 줘:
1. 문항 수를 20문항 전체로 유지할까요, 아니면 차시별 10문항 약식 진단 모드를 옵션으로 둘까요?
2. 의사소통(서술형) 문항에서 정규식 채점 외에 '모범 답변 펼쳐보기' 버튼을 추가할까요?
3. 전체 디자인 테마를 차분한 그린/에메랄드 톤과 모던 네이비 톤 중 어떤 스타일로 맞출까요?

🎯 에디터 한줄평

"단순히 '몇 점 맞았는가'를 넘어 '어느 수학적 역량이 뛰어나고 어디에서 막히는가'를 레이더 차트로 투명하게 보여줍니다. 서술형 문장까지 정규식으로 자동 채점하는 진정한 과정 중심 평가의 교실 혁신입니다!"

🔗 교육과정 및 웹 표준 기술 레퍼런스:
• 2022 개정 초등학교 수학과 교육과정 (수와 연산 [4수01-07])
• HTML5 Canvas 2D Drawing Context (DPR 2배율 고해상도 렌더링)
• Inline SVG 동적 다각형(Polygon) 레이더 차트 렌더링