0만 붙이면 끝난다! — 몇십 × 몇 곱셈의 자릿값 원리 완전 정복 웹앱
🍬 2022 개정 교육과정 초등학교 3학년 1학기 수학 연산 (곱셈) — 아이들이 두 자리 수 곱셈에 들어서며 가장 먼저 마주하는 '몇십 × 몇(예: 30 × 4 = 120)'을 직관적인 상황 카드와 CSS Grid 3열 세로식으로 체감합니다. 십의 자리 수끼리 곱셈구구를 한 뒤 일의 자리에 0을 붙이는 자릿값 원리를 원샷 네모 칸 입력으로 체화하는 인터랙티브 웹앱입니다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 |
초보자를 위한 쉬운 설명 |
이렇게 한번 써보세요! |
| 상황 카드 & 묶음 배지 시각화 |
"사탕 30개씩 4봉지 있어요" 문장과 함께 사탕 묶음 배지를 화면 상단에 띄워 곱셈의 본질인 동수누가(같은 수 여러 번 더하기)를 시각화합니다. |
30을 4번 더하는 것과 30×4가 같음을 그림으로 확인하게 하세요. |
| CSS Grid 3열 자릿수 표준 정렬 |
1열(백의 자리), 2열(십의 자리), 3열(일의 자리) 각 84px 규격으로 정렬하여 일의 자리 0 바로 아래에 한 자리 승수(몇)를 정확히 수직 배치합니다. |
오른쪽(일의 자리 0)부터 왼쪽으로 한 칸씩 채워나가는 올바른 세로식 필산 습관을 형성합니다. |
| 일의 자리 0 누락 & 덧셈 착각 오답 진단 |
일의 자리에 0을 빠뜨렸는지, 기호(×)를 보고도 30+4=34로 더했는지 학습 기록을 분석하여 아이 눈높이의 다정한 처방을 내립니다. |
결과 화면의 '맞춤 보충 연습' 버튼으로 취약했던 세 자리 곱 문제를 5개 집중 복습하세요. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 문제 수(5/10/20)나 상황 소재(사탕/과일 등)에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
몇십곱하기몇.html로 저장한 뒤 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
2022 개정교육과정 > 초등학교 > 3학년 1학기 > 수학 > 연산 > 곱셈 > 몇십 × 몇 곱셈 바이브 코딩 프롬프트
[유형 1] 몇십 × 몇 곱셈 연습 웹앱을 만들어줘.
목적·대상: 초등학교 3학년 1학기 학생이 몇십 × 몇의 곱셈(예: 30 × 4 = 120)을 세로식으로 직접 풀어보며 "십의 자리 수끼리 곱한 뒤 일의 자리에 0을 붙인다"는 원리를 익히는 인터랙티브 웹앱.
기술 조건:
- HTML+CSS+JavaScript를 전부 포함한 단일 index.html 파일.
- CDN 사용: 파티클은 canvas-confetti, 한글 폰트는 구글 폰트 CDN(Jua). 소리는 외부 오디오 파일 없이 Web Audio API로 직접 생성(정답=밝은 상승음과 축하 아르페지오, 오답=낮고 부드러운 톤).
- CDN이 로드되지 않는 오프라인 환경에서도 문제 풀기·채점은 동작하도록 폴백 처리(파티클은 CSS 애니메이션으로 대체).
문제 생성:
- 피승수는 몇십(20~90, 일의 자리가 0인 수), 승수는 몇(2~9의 한 자리 수)으로 무작위 생성.
- 곱은 40~810 (두 자리 또는 세 자리 수).
- 바로 직전 문제와 같은 수 조합은 나오지 않게.
- 문제 생성 규칙은 generateProblem() 함수 하나로 분리해서, 다른 유형 웹앱에서 그 함수만 바꿔 재사용하기 쉽게.
풀이 UI (세로식 + 네모 칸 입력):
- 문제를 항상 세로식으로: 윗줄에 피승수(몇십), 아랫줄에 승수(몇)와 곱셈 기호(×), 가로줄, 그 아래 자릿수별 정사각형 네모 답안 칸.
- CSS Grid 3열 자릿수 표준 정렬: 1열=백의 자리(84px), 2열=십의 자리(84px), 3열=일의 자리(84px).
- 1행 피승수: 2열에 십의 자리, 3열에 일의 자리 0. 2행 승수: 1열에 × 기호, 3열에 승수 한 자리(피승수 일의 자리 바로 아래 수직 일치 정렬). 3행 가로선(1열~3열). 4행 답안 칸.
- 학습자가 오른쪽(일의 자리)부터 한 칸씩 직접 숫자 입력: 일의 자리(항상 0) → 십의 자리 → 백의 자리(세 자리 곱일 때만, 두 자리 곱이면 백의 자리 칸은 빈 칸 표시).
- 원샷 입력(중요): 각 칸에 숫자는 딱 한 번만 입력 가능. 정답이든 오답이든 입력 즉시 다음 칸으로 자동 이동, 재입력·지우기 불가(시스템 게이밍 원천 차단).
- 칸별 반응: 맞으면 초록색 채움 + "딩" 소리(단계마다 음이 올라가면 더 좋음) / 틀리면 빨간색 + 좌우 shake 애니메이션 + 낮은 톤, 오답 숫자는 빨간 배경에 그대로 유지.
- 문제 완료: 모든 칸이 정답일 때만 canvas-confetti 파티클 + 축하 아르페지오 + "정답! 🎉". 오답이 있으면 축하 없이 "다음 문제로 넘어가요!" 메시지 후 자동 이동.
- 한 문제에서 2칸 이상 틀렸으면 다음 문제 전에 힌트 버튼이 깜빡이며 제안. 음소거/음량 버튼 제공.
상황 카드:
- 상단에 상황 문장(예: "사탕 30개씩 4봉지 있어요. 모두 몇 개일까요?")과 묶음 배지(예: 🍬×3묶음 배지 4개)를 표시해 곱셈의 의미(같은 수씩 여러 묶음)를 시각화.
힌트 모드:
- "힌트" 버튼: 누적 더하기 방식으로 묶음을 차례로 보여주고(1봉지 30, 누적 30 → 2봉지 60 …), 핵심 원리를 강조: "십의 자리끼리의 곱셈구구(3×4=12)를 먼저 계산하고, 일의 자리에 0을 붙이면 120!" 해당 자릿수 열이 노란색으로 플래시.
- 힌트를 쓴 문제는 결과 화면에서 "힌트 사용"으로 구분.
학습 기록 (분석용 데이터):
- 각 문제마다 자릿수별 입력(위치, 값, 정/오)과 힌트 사용 여부를 모두 기록. 이 기록이 결과 화면 분석의 재료.
진행:
- 문제 수 선택(5/10/20), 상단에 진행률 바 표시.
결과 화면 — 오답 분석:
- 요약 카드: 맞힌 문제, 틀린 문제, 힌트 사용 횟수, 정답률.
- 오답이 있으면 학습 기록을 분석해 틀린 유형/이유/해결 방법을 아이 눈높이 문장으로 출력:
- 일의 자리 0 누락(일의 자리에 0 이외의 숫자 입력) → 이유: "몇십을 곱할 때는 일의 자리에 항상 0이 와요" → 해결: "10이 몇 묶음인지 생각하고 마지막에 꼭 0을 쓰는 규칙 기억하기".
- 곱셈 대신 덧셈 계산(입력 조합이 피승수+승수와 일치, 예: 30+4=34) → 이유: "연산 기호(×)를 보고도 두 수를 더했어요" → 해결: "기호가 ×인지 +인지 먼저 눈으로 짚고 계산하는 습관".
- 구구단(십의 자리) 실수 2회 이상 → 이유: "몇십의 앞 숫자와 승수 사이의 곱셈구구에서 실수했어요" → 해결: "앞의 한 자리 수끼리 곱셈구구를 먼저 외운 뒤 0 붙이기".
- 백의 자리 놓침(세 자리 곱에서 백의 자리 오답) → 이유: "십의 자리 곱이 두 자리 수(예: 3×4=12)일 때 앞자리를 백의 자리로 옮겨 적는 게 헷갈렸어요" → 해결: "십의 자리 곱의 앞자리를 백의 자리로 옮겨 적는 연습".
- 어느 것도 해당 없으면 → 이유: "순간적인 계산 실수예요" → 해결: "답 쓰기 전 십의 자리와 일의 자리 0을 눈으로 검산".
- 각 진단은 [틀린 부분 요약] + [이유] + [해결 방법] 형식, 격려 톤("~가 조금 부족해요, 이렇게 해보자!").
- 맞춤 보충 연습 버튼: 분석 결과에 맞춘 문제 5개로 미니 세트 시작(예: 일의 자리 오류가 많으면 세 자리 곱 위주 출제).
- 오답 문제 목록: 각 문제의 정답과 "계산 과정 보기" 버튼(누적 더하기 과정 다시 보기).
- 전부 맞혔으면: 축하 파티클 + "다음 단계: 몇십 몇 × 몇(올림 없음)에 도전해볼까?" 추천 메시지. "다시 연습" 버튼.
스타일: 밝고 부드러운 색감, 동글동글한 한글 폰트, 세로식 숫자 최소 50px, 큰 터치 영역, 스마트폰 세로 화면 반응형.
완료 기준: index.html을 열면 바로 연습 시작; 세로식 네모 칸 원샷 입력·자릿수별 즉시 채점·정답 파티클+사운드·오답 shake+사운드(오답 칸 유지)·힌트·학습 기록·오답 분석 결과 화면·맞춤 보충 연습이 모두 동작; 문제 생성 규칙(몇십×몇, 곱 40~810)이 항상 지켜져야 함.
📚 기술·교육 참고 링크
- 2022 개정 교육과정 초등 3학년 1학기 수학 곱셈 단원 성취기준 [4수01-05]
- CSS Grid를 활용한 초등 수학 세로식 자릿수 정렬 가이드
- 초등 수학 자릿값(Place Value)과 0의 역할 지도 원리