두 번 곱해서 더하는 순간! — 세 자리 수 × 두 자리 수 곱셈 연습 웹앱
🧩 2022 개정 교육과정 초등학교 4학년 1학기 수학 연산 (곱셈과 나눗셈) — 세 자리 수 × 두 자리 수 곱셈(예: 342 × 23 = 7866)을 두 단계 부분곱(partial products) 세로식으로 직접 풀며 "승수의 일의 자리로 곱하고, 십의 자리로 곱할 때는 한 자리씩 왼쪽으로 당겨 적고, 두 부분곱을 더한다"는 핵심 절차를 몸으로 익히는 인터랙티브 웹앱입니다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 7행 5열 두 단계 부분곱 Grid | [만|천|백|십|일] 5열 Grid에 1차 부분곱(일의 자리 곱) 행, 2차 부분곱(십의 자리 곱, 밝은 배경 구분) 행, 최종 곱 행이 순서대로 배치됩니다. | 2차 부분곱 행의 "한 자리씩 왼쪽 당겨 적기" 원리를 직접 입력하며 자릿값 이동을 체감합니다. |
| 당김 착각 & 합산 실수 정밀 진단 | 2차 부분곱을 일의 자리에 그대로 적는(당김 누락) 오류와, 두 부분곱을 더하는 세로 덧셈에서의 받아올림 실수를 별도로 분리 진단합니다. | "십의 자리로 곱하면 한 칸씩 왼쪽으로!"과 "두 부분곱을 정확히 더한다"가 각각 처방됩니다. |
| 모든 칸 채우면 진행 + 첫 시도 기록 | 클릭 선택과 ⌫ 삭제로 자유 수정이 가능하며, 모든 칸을 채우면 오답이 있어도 다음 문제로 넘어갑니다. | 첫 시도 답안(firstAnswers)을 바탕으로 단계별(1차/2차/합산) 오답 분석 리포트를 제공합니다. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 기본 문제 수 설정에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
세자리두자리곱셈.html로 저장한 뒤 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
2022 개정교육과정 > 초등학교 > 4학년 1학기 > 수학 > 연산 > 곱셈과 나눗셈 > 세 자리 수 × 두 자리 수 바이브 코딩 프롬프트
[유형 3] 세 자리 수 × 두 자리 수 곱셈 연습 웹앱을 만들어줘.
목적·대상: 초등학교 4학년 1학기 학생이 세 자리 수 × 두 자리 수 곱셈(예: 342 × 23 = 7866)을 두 단계 부분곱 세로식으로 직접 풀어보는 인터랙티브 웹앱.
기술 조건: 단일 index.html, canvas-confetti + Jua CDN, Web Audio API, 폴백.
문제 생성:
- 피승수는 세 자리 수(100~999, 백의 자리 1~9), 승수는 두 자리 수(11~99, 십의 자리 1~9).
- 곱은 만의 자리까지(99,999 이하)가 되도록만 생성.
- 직전 반복 금지, generateProblem() 분리.
풀이 UI (두 단계 부분곱 세로식, CSS Grid 5열 [만|천|백|십|일] 각 84px):
- 1행 피승수(백/십/일 열), 2행 승수(십/일 열, × 기호는 승수 왼쪽 열), 3행 가로선.
- 4행 1차 부분곱(승수의 일의 자리 × 피승수): 일→십→백→천 순서 입력.
- 5행 2차 부분곱(승수의 십의 자리 × 피승수): 한 자리씩 왼쪽으로 당겨 적기 — 십→백→천 순서 입력(일의 자리는 비워 둠, 2차 부분곱 행은 밝은 배경으로 구분).
- 6행 가로선, 7행 최종 곱: 일→십→백→천 순서 입력.
- 네모칸 클릭 선택 + ⌫ 삭제 버튼(숫자판+Backspace, 풀이 중에만 수정).
- 문제 완료 조건: 모든 칸(부분곱 1·2, 최종 곱)을 채우면 오답이 있어도 다음 문제 진행; 전부 정답일 때만 confetti + 축하 아르페지오 + "정답! 🎉", 오답 포함이면 "다음 문제로 넘어가요! 힘내자 💪".
- 칸별 반응(초록+딩/빨강+shake, 오답 숫자 유지), 2칸 이상 오답 시 다음 문제 전 힌트 제안, 음소거/음량.
힌트 모드: 단계별 — "① 342 × 3 = 1026 (일의 자리부터 각 자리 곱+받아올림) ② 342 × 20 = 6840 → 한 칸 당겨 684로 적어요 ③ 1026 + 6840 = 7866". 해당 행 플래시.
학습 기록: 모든 입력 칸의 첫 시도(firstAnswers)·오답 시도(wrongAttempts)·힌트 사용 기록.
진행: 5/10/20 선택, 진행률 바.
결과 화면 — 오답 분석:
- 요약: 바로 맞힌/실수한 문제/힌트/정답률.
- 오답 분석(이유+해결 방법): ① 1차 부분곱 실수 → 승수 일의 자리 곱셈 다시 연습 ② 2차 부분곱 당김 착각(일의 자리에 적음) → "십의 자리로 곱하면 한 칸씩 왼쪽으로!" ③ 부분곱 합산(덧셈) 실수 → 세로 덧셈 받아올림 연습 ④ 최종 곱만 풀고 부분곱 건너뜀 ⑤ 순간 실수 → 검산.
- 맞춤 보충 연습(5문제), 오답 문제 목록("계산 과정 보기"), 전부 정답 시 축하 파티클 + "다음 단계: 네 자리 수 × 두 자리 수 도전!" 추천.
스타일: 유형 1과 동일.
완료 기준: 부분곱 2단계 + 당겨 적기 + 합 입력 흐름 동작, 클릭 선택/삭제, 오답도 진행, 단계별 오답 분석(당김 착각·합산 실수 진단)·보충 연습.📚 기술·교육 참고 링크
- 2022 개정 교육과정 초등 4학년 1학기 수학 두 자리 수 곱셈의 알고리즘 [4수01-08]
- 부분곱(Partial Product) 분해 및 한 자리 당김 원리 시각화 모델
- 초등 수학 다단계 곱셈 오류 패턴 진단 알고리즘 설계
