일의 자리 곱하고, 십의 자리 곱하고, 더한다! — 두 자리 × 두 자리 곱셈 웹앱
✖️ 2022 개정 교육과정 초등학교 3학년 2학기 수학 연산 (곱셈) — 두 자리 수 × 두 자리 수 곱셈(예: 24 × 13 = 312)을 세로식의 두 단계 부분곱 과정으로 직접 풀어보며 "일의 자리 곱 + 십의 자리 곱(한 자리씩 왼쪽으로 당겨 적기)을 더한다"는 원리를 체화하는 인터랙티브 웹앱입니다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 두 단계 부분곱 과정 체감 | 승수의 일의 자리로 1차 부분곱(24×3=72)을 구하고, 승수의 십의 자리로 2차 부분곱(24×10=240 → 한 자리씩 왼쪽으로 당겨 24)을 구한 뒤 두 값을 더하는(72+240=312) 3단계 과정을 순서대로 직접 입력합니다. | 부분곱 행마다 밝은 배경으로 구분하여 학생이 "지금 몇 단계인지" 항상 인지하며 입력합니다. |
| 자릿수 당김 착각 특화 진단 | 십의 자리 곱을 왼쪽으로 당겨 적어야 하는데(2차 부분곱 뒤에 0이 생략됨) 그대로 일의 자리에 적는 오류를 정확히 감지합니다. | "십의 자리 곱은 왼쪽으로 한 칸 당겨 적어요(0을 안 쓴 것과 같아요)" 원리를 아이 눈높이 문장으로 제공합니다. |
| 곱이 세 자리 또는 네 자리 (동적 전환) | 두 자리 수끼리 곱한 결과가 세 자리(예: 24×13=312) 또는 네 자리(예: 87×68=5916) 수가 되어 최종 합 단계의 천의 자리 칸이 동적으로 활성화됩니다. | 3학년 2학기 곱셈 전 과정의 완성 단계로, 학생이 두 단계를 모두 완주하면 축하 연출과 함께 수료 메시지가 표시됩니다. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 기본 문제 수 설정에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
두자리두자리곱셈.html로 저장한 뒤 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
2022 개정교육과정 > 초등학교 > 3학년 2학기 > 수학 > 연산 > 곱셈 > 두 자리 수 × 두 자리 수 바이브 코딩 프롬프트
[유형 5] 두 자리 수 × 두 자리 수 곱셈 연습 웹앱을 만들어줘.
목적·대상: 초등학교 3학년 2학기 학생이 두 자리 수 × 두 자리 수 곱셈(예: 24 × 13 = 312)을 세로식의 두 단계 부분곱 과정으로 직접 풀어보며 "일의 자리 곱 + 십의 자리 곱(한 자리씩 왼쪽으로 당겨 적기)을 더한다"는 원리를 익히는 인터랙티브 웹앱.
기술 조건: [유형 1과 동일 — 단일 index.html, canvas-confetti + 구글 폰트 Jua CDN, Web Audio API 사운드 합성, 오프라인 폴백, 상황 카드, 음소거/음량 버튼]
문제 생성:
- 두 수 모두 두 자리 수(10~99, 십의 자리 1~9).
- 곱은 세 자리(예: 24×13=312) 또는 네 자리(예: 87×68=5916) 수.
- 직전 문제 반복 금지. generateProblem() 함수 하나로 분리.
풀이 UI (두 단계 부분곱 세로식):
- CSS Grid 자릿수 표준 정렬(천/백/십/일 각 84px)을 기본으로, 부분곱 행을 포함한 다단 구성:
- 1행: 피승수 두 자리(십/일). 2행: × 기호(2열) + 승수 두 자리(십/일, 피승수와 일의 자리 수직 정렬). 3행: 가로선.
- 4행: 1차 부분곱(승수 일의 자리 × 피승수, 예: 24×3=72) — 일의 자리 칸부터 입력.
- 5행: 2차 부분곱(승수 십의 자리 × 피승수, 예: 24×10=240 → 한 자리씩 왼쪽으로 당겨 적어 24를 십·백 칸에) — 표기상 뒤에 0이 붙는다는 안내 표시(예: 작은 0 표시).
- 6행: 가로선. 7행: 최종 합(1차 부분곱 + 2차 부분곱, 예: 72+240=312).
- 자릿값 색 구분(백=파랑, 십=초록, 일=빨강, 천=보라), 부분곱 행은 밝은 배경으로 구분.
- 입력 단계(원샷, 각 칸 한 번만 입력, 정/오 무관 즉시 다음 칸):
1) 1차 부분곱: 일의 자리 → 십의 자리(→백의 자리, 세 자리 부분곱이면).
2) 2차 부분곱: 당겨진 위치의 가장 오른쪽 칸부터 왼쪽으로.
3) 최종 합: 일의 자리 → 십의 자리 → 백의 자리 → 천의 자리(곱이 네 자리일 때만).
- 칸별 반응(초록 채움+"딩" / 빨강+shake+낮은 톤, 오답 유지), 최종 합이 모두 정답일 때만 파티클+축하 아르페지오, 부분곱에서 2칸 이상 오답 시 힌트 제안: [유형 1과 동일].
힌트 모드:
- 두 단계 과정 단계 설명 + 해당 행/열 플래시. (예: 24×13 → 1단계: 24×3=72! 2단계: 24×10=240이니 한 자리씩 당겨 24를 적어요! 3단계: 72+240=312!)
- 힌트 사용 문제는 결과에서 구분.
학습 기록: 각 단계(1차 부분곱/2차 부분곱/합)별 자릿수 입력(위치, 값, 정/오)과 힌트 사용 여부를 모두 기록.
진행: [유형 1과 동일]
결과 화면 — 오답 분석:
- 요약 카드: [유형 1과 동일]
- 오답 분석 (유형 5 특화):
- 1차 부분곱 구구 실수 → 이유: "일의 자리 곱셈에서 실수했어요" → 해결: 한 자리 곱 먼저 확실히.
- 2차 부분곱 자릿수 당김 착각(십의 자리 곱을 당기지 않고 일의 자리에 적음) → 이유: "십의 자리 곱은 왼쪽으로 한 칸 당겨 적어야 해요(0을 안 쓴 것과 같아요)" → 해결: 당겨 적기 연습.
- 부분곱 합산 덧셈 실수(합의 특정 자릿수 오답이 부분곱 덧셈 결과와 일치하지 않음) → 이유: "부분곱을 더할 때 받아올림이 헷갈렸어요" → 해결: 부분곱을 세로식 덧셈으로 다시 더하기 연습.
- 부분곱을 건너뛰고 합을 먼저 입력(입력값이 부분곱이 아닌 최종 곱 구조) → 이유: "두 단계를 건너뛰고 답을 바로 구하려 했어요" → 해결: 순서대로 단계별 계산 습관.
- 구구단 실수 2회 이상 / 일회성 실수 → [유형 1과 동일 처방].
- 맞춤 보충 연습(5문제), 다시 볼 문제들(두 단계 과정 다시 보기), 전부 정답 시 축하 파티클 + "3학년 2학기 곱셈 완성! 축하해요 🎉" 메시지, "다시 연습" 버튼.
스타일: [유형 1과 동일]
완료 기준: 두 단계 부분곱 세로식(1차 부분곱 → 2차 부분곱 당겨 적기 → 합) 입력 흐름 동작, 곱 세 자리/네 자리 모두 지원, 자릿수 당김 착각·합산 실수 진단, 원샷 입력·힌트·오답 분석·보충 연습 동작.📚 기술·교육 참고 링크
- 2022 개정 교육과정 초등 3학년 2학기 수학 곱셈(두 자리 수 × 두 자리 수) 단원 [4수01-08]
- 두 자리 수 × 두 자리 수 곱셈 부분곱(Partial Product) 전략 지도법
