각 자릿수를 따로따로 곱해서 그 자리에 적는다! — 세 자리 × 한 자리 곱셈 웹앱
🔢 2022 개정 교육과정 초등학교 3학년 2학기 수학 연산 (곱셈) — 받아올림 없는 세 자리 수 × 한 자리 수 곱셈(예: 213 × 3 = 639)을 세로식으로 직접 풀어보며 "각 자릿수를 따로따로 곱해 그 자리에 적는다"는 원리를 체화하는 인터랙티브 웹앱입니다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 3학년 1학기 곱셈(두 자리)에서 자릿수 확장 | 1학기에 배운 두 자리 × 한 자리 곱셈 원리(각 자릿수끼리 따로 곱하기)를 그대로 유지하되, 피승수가 세 자리로 늘어나 백·십·일 3칸을 모두 다루게 됩니다. | 각 자릿수 곱이 9 이하로만 나오므로(예: 2×3=6, 1×3=3, 3×3=9) 받아올림 없이 순수하게 자릿수 확장 감각을 훈련합니다. |
| 승수 수직 정렬 원리 체감 | 승수(3)를 피승수의 일의 자리 바로 아래에 수직으로 정렬하는 것의 중요성을 색깔별 자릿수 그리드로 시각화합니다. | "일의 자리 아래에 곱하는 수를 맞춰 놓으면, 각 자릿수끼리 따로따로 곱해도 순서가 안 헷갈려요." |
| 자릿수 어긋남 특화 진단 | 세 자리로 늘어나면서 자릿수가 어긋날 확률이 높아지므로, 입력값이 옆 자리 정답과 일치하는 자릿수 어긋남 패턴을 우선 감지하여 진단합니다. | 자릿값별 색 구분(백=파랑, 십=초록, 일=빨강)을 짚어가며 읽는 습관을 만듭니다. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 기본 문제 수 설정에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
세자리곱셈.html로 저장한 뒤 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
2022 개정교육과정 > 초등학교 > 3학년 2학기 > 수학 > 연산 > 곱셈 > 세 자리 수 × 한 자리 수 (올림 없음) 바이브 코딩 프롬프트
[유형 1] 세 자리 수 × 한 자리 수(올림 없음) 곱셈 연습 웹앱을 만들어줘.
목적·대상: 초등학교 3학년 2학기 학생이 받아올림 없는 세 자리 수 × 한 자리 수 곱셈(예: 213 × 3 = 639)을 세로식으로 직접 풀어보며 "각 자릿수를 따로따로 곱해 그 자리에 적는다"는 원리를 익히는 인터랙티브 웹앱.
기술 조건:
- HTML+CSS+JavaScript를 전부 포함한 단일 index.html 파일.
- CDN: 파티클은 canvas-confetti, 한글 폰트는 구글 폰트 CDN(Jua). 소리는 Web Audio API로 직접 생성(정답=밝은 상승음과 축하 아르페지오, 오답=낮은 톤).
- CDN이 로드되지 않아도 문제 풀기·채점은 동작하도록 폴백 처리(파티클은 CSS 애니메이션 대체).
문제 생성:
- 피승수는 세 자리 수(100~999), 승수는 한 자리 수(2~9).
- 받아올림 없음 제약: 피승수의 백·십·일 각 자릿수 × 승수가 모두 9 이하가 되도록 생성. 곱은 항상 세 자리 수.
- 직전 문제와 같은 수 조합은 나오지 않게. 문제 생성 규칙은 generateProblem() 함수 하나로 분리해 다른 유형에서 재사용하기 쉽게.
상황 카드:
- 상단에 상황 문장(예: "연필 213개씩 3묶음 있어요. 모두 몇 개일까요?")과 묶음 배지(아이콘 + 개수)를 표시해 곱셈의 의미를 시각화.
풀이 UI (세로식 + 네모 칸 입력):
- CSS Grid 4열 자릿수 표준 정렬: 1열=천의 자리(84px), 2열=백의 자리(84px), 3열=십의 자리(84px), 4열=일의 자리(84px).
- 1행 피승수: 2열 백(파랑), 3열 십(초록), 4열 일(빨강) 자릿값 색 구분. 2행 승수: 3열에 × 기호, 4열에 승수 한 자리(피승수 일의 자리 바로 아래 수직 일치 정렬). 3행 가로선(1열~4열). 4행 답안 칸.
- 답은 항상 세 자리 수이므로 천의 자리 칸(1열)은 비어 있는 칸으로 표시하고 입력받지 않음.
- 학습자가 오른쪽(일의 자리)부터 한 칸씩 직접 입력: 일의 자리 → 십의 자리 → 백의 자리.
- 원샷 입력(중요): 각 칸에 숫자는 딱 한 번만 입력 가능. 정답이든 오답이든 입력 즉시 다음 칸으로 자동 이동, 재입력·지우기 불가(시스템 게이밍 차단).
- 칸별 반응: 맞으면 초록 채움 + "딩" 소리 / 틀리면 빨간색 + shake + 낮은 톤, 오답 숫자는 빨간 배경에 그대로 유지.
- 문제 완료: 모든 칸이 정답일 때만 confetti 파티클 + 축하 아르페지오 + "정답! 🎉". 오답이 있으면 축하 없이 "다음 문제로 넘어가요!" 후 자동 이동. 2칸 이상 오답이면 다음 문제 전에 힌트 버튼 깜빡임 제안. 음소거/음량 버튼.
힌트 모드:
- "힌트" 버튼: 자릿수별 곱셈구구 단계 설명 + 해당 자릿수 열 플래시. (예: 213×3 → 백의 자리: 2×3=6, 십의 자리: 1×3=3, 일의 자리: 3×3=9 → 그대로 적으면 639! 받아올림이 없으니 각 자리를 그대로 적으면 돼요)
- 힌트를 쓴 문제는 결과 화면에서 "힌트 사용"으로 구분.
학습 기록 (분석용 데이터):
- 각 문제마다 자릿수별 입력(위치, 값, 정/오)과 힌트 사용 여부를 모두 기록.
진행: 문제 수 선택(5/10/20), 상단에 진행률 바.
결과 화면 — 오답 분석:
- 요약 카드: 맞힌 문제, 틀린 문제, 힌트 사용 횟수, 정답률.
- 오답이 있으면 학습 기록을 분석해 틀린 유형/이유/해결 방법을 아이 눈높이 문장으로 출력:
- 자릿수 어긋남(입력한 값이 옆 자리의 정답과 동일) → 이유: "자릿수를 어긋나게 읽었어요" → 해결: 색으로 구분된 자릿값을 손으로 짚어가며 읽는 습관.
- 곱하기 대신 더하기(입력 조합이 피승수+승수와 일치) → 이유: "연산 기호(×)를 보고도 두 수를 더했어요" → 해결: 기호를 먼저 눈으로 짚는 습관.
- 구구단 자릿수 실수 2회 이상 → 이유: "각 자릿수 곱셈구구에서 실수했어요" → 해결: 자릿수별로 소리 내어 구구 외우기.
- 어느 것도 해당 없으면 → 이유: "순간적인 실수예요" → 해결: 답 쓰기 전 각 자릿수 곱을 다시 확인하는 검산 습관.
- 각 진단은 [틀린 부분 요약] + [이유] + [해결 방법] 형식, 격려 톤.
- 맞춤 보충 연습 버튼(5문제), 오답 문제 목록("계산 과정 보기"로 자릿수별 구구 과정 다시 보기), 전부 정답 시 축하 파티클 + "다음 단계: 세 자리 수 × 한 자리 수(올림 있음) 도전!" 추천, "다시 연습" 버튼.
스타일: 밝고 부드러운 색감, 동글동글한 한글 폰트, 세로식 숫자 최소 50px, 큰 터치 영역, 여백 절제, 스마트폰 세로 반응형.
완료 기준: index.html을 열면 바로 연습 시작; 승수가 피승수 일의 자리 바로 아래 정렬된 세로식, 일→십→백 원샷 입력, 자릿수별 즉시 채점, 정답 파티클+사운드, 오답 shake+사운드(오답 칸 유지), 힌트, 오답 분석 결과 화면, 맞춤 보충 연습이 모두 동작; 문제 생성 규칙(각 자릿수 곱 ≤ 9)이 항상 지켜져야 함.📚 기술·교육 참고 링크
- 2022 개정 교육과정 초등 3학년 2학기 수학 곱셈(세 자리 수 × 한 자리 수) 단원 [4수01-04]
- 세 자리 수 × 한 자리 수 받아올림 없는 곱셈 자릿수 확장 지도 전략
