상황 그림과 세로식으로 체감하는 나눗셈의 기초 — 같은 수씩 묶어 나누기 웹앱
🍩 2022 개정 교육과정 초등학교 3학년 1학기 수학 연산 (나눗셈) — 아이들이 나눗셈 기호(÷)를 처음 마주할 때 겪는 막막함을 도넛, 사과, 쿠키 등 친근한 상황 그림과 세로식 Grid 정렬로 단번에 해소합니다. 전체를 똑같이 묶어 나누어 주는 조작 활동을 거쳐 몫이 한 자리 수인 기본 나눗셈을 원샷으로 풀어보는 완성형 교구입니다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 상황 그림 ➔ 세로식 직관 연계 | "도넛 12개를 바구니 3개에 똑같이 나누어요"처럼 문장과 그림을 세로식 나눗셈 바로 위에 배치하여 연산의 구체적 의미를 시각화합니다. | 그림 속 아이콘을 보며 나눗셈이 '똑같이 나누어 담기'라는 본질을 몸으로 익히게 합니다. |
| 4열 Grid 자릿수 정렬 (일의 자리 위 몫) | 초등학생들이 가장 많이 헷갈리는 '몫을 십의 자리 위에 쓸까, 일의 자리 위에 쓸까'를 4열 그리드로 잡아 일의 자리 열 바로 위에 몫 네모 칸을 수직 고정합니다. | 한 자리 몫은 반드시 피제수의 일의 자리 위에 쓴다는 나눗셈 자릿값 규칙을 시각적으로 체득합니다. |
| 찍기 방지 원샷 입력 & 6종 오답 처방 | 답을 여러 번 찍어 맞추는 행위를 원천 차단(1회 입력 즉시 판정)하고, 나눗셈을 뺄셈으로 착각했는지, 전체 개수를 그대로 썼는지 세밀하게 진단합니다. | 풀이 후 '맞춤 보충 연습' 버튼을 눌러 학생이 헷갈려 한 나눔수 단의 문제를 5개 다시 풀려보세요. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 문제 수나 등장 소재(사과/도넛 등)에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
나눗셈기초.html로 저장한 뒤 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
2022 개정교육과정 > 초등학교 > 3학년 1학기 > 수학 > 연산 > 나눗셈 > 나눗셈의 기초 바이브 코딩 프롬프트
[유형 1] 나눗셈의 기초 — 같은 수씩 묶어 나누기 연습 웹앱을 만들어줘.
목적·대상:
초등학교 3학년 1학기 학생이 나눗셈의 의미(전체를 같은 수씩 묶기, 똑같이 나누어 주기)를 상황 그림으로 체감하고, 몫이 한 자리 수인 간단한 나눗셈(예: 12 ÷ 3 = 4)을 세로식으로 직접 풀어보는 인터랙티브 웹앱.
기술 조건:
- HTML+CSS+JavaScript를 전부 포함한 단일 index.html 파일.
- 외부 CDN: canvas-confetti(https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js), 구글 폰트 Jua(https://fonts.googleapis.com/css2?family=Jua&display=swap).
- 효과음: 외부 오디오 파일 없이 Web Audio API로 자체 합성(정답=밝은 상승 '딩' 및 축하 아르페지오, 오답=낮고 부드러운 단음).
- 오프라인 폴백: 인터넷 미연결 시에도 CSS 파티클 대체 및 기본 한글 글꼴 적용으로 모든 풀이/채점 기능 정상 작동.
문제 생성:
- 나눔수 g(2~9, 한 자리)와 몫 q(2~9, 한 자리)를 무작위로 정하고, 전체 개수 T = g × q (6~81)로 생성 — 나머지가 없는 나눗셈만 출제.
- 문제마다 상황 소재(도넛, 사과, 쿠키, 구슬, 사탕)를 무작위로 바꾸고, "도넛 12개를 바구니 3개에 똑같이 나누어요" 형태의 문장과 함께 상황 그림(아이콘 T개)을 표시.
- 직전 문제와 동일한 수 조합은 연속 출제 금지.
- 문제 출제 로직은 반드시 generateProblem() 함수 하나로 완전히 격리하여 구현.
풀이 UI (세로식 자릿수 Grid 정렬 + 몫 네모 칸 원샷 입력):
- 상단: 상황 문장과 함께 전체 개수만큼의 아이콘을 보여주는 카드 영역.
- 세로식 나눗셈 카드 (중요 자릿수 정렬):
* CSS Grid 4열 구조: 1열(나누는 수, 44px) / 2열(나눗셈 괄호 기호 ')', 24px) / 3열(피제수 십의 자리, 84px) / 4열(피제수 일의 자리, 84px).
* 몫 네모 칸(84px 정사각형, 초록 테두리)은 피제수의 **일의 자리 열(4열) 바로 위에 정확히 수직 정렬**.
* 가로선은 나눗셈 기호(2열)부터 일의 자리(4열)까지 걸쳐지도록 정렬.
* 피제수가 한 자리 수인 경우 3열(십의 자리)은 빈칸으로 비워둠.
- 원샷 입력 (System Gaming 차단):
* 몫은 딱 한 번만 화면 숫자판(1~0) 또는 키보드로 입력.
* 정답/오답 여부에 관계없이 입력 즉시 채점되고 재입력이나 지우기는 불가능.
* 맞으면 초록색 배경 + "딩" 소리 + confetti 파티클 + 축하 아르페지오 + "정답! 🎉" 표시 후 2초 뒤 자동 이동.
* 틀리면 빨간색 배경 + 좌우 shake + 낮은 소리, 오답 숫자는 빨간 칸에 그대로 유지되고 축하 없이 "다음 문제로 넘어가요!" 후 1.5초 뒤 이동.
- 연속 2문제 이상 오답 시 다음 문제 전에 힌트 버튼이 깜빡이며 도움 제안. 음소거/음량 조절 슬라이더 제공.
힌트 모드:
- "힌트" 버튼: 전체 아이콘을 바구니 개수(나누는 수)만큼 돌아가며 하나씩 옮겨 담는 애니메이션 재생 → "각 바구니에 4개씩 들어갔어요!"로 몫을 시각적으로 도출.
- 힌트 사용 문제는 결과 화면에서 '힌트 사용'으로 별도 표시.
학습 기록:
- 문제별 피제수, 나눔수, 정답 몫, 학생 입력값, 정오 여부, 힌트 사용 여부를 배열에 기록.
진행:
- 문제 수 선택(5/10/20), 상단에 진행률 바 표시.
결과 화면 — 오답 분석 프레임워크:
- 요약 지표: 맞힌 문제 수, 틀린 문제 수, 힌트 사용 횟수, 정답률.
- 오답 분석 카드: 풀이 기록을 분석하여 [틀린 유형] + [이유] + [해결 방법]을 다정한 격려 톤으로 제시.
* 나눗셈을 뺄셈으로 계산한 오류(입력값 = 전체 − 나눔수): "나누기를 빼기로 계산했어요! 나누기는 똑같이 묶는 것이에요." 처방.
* 몫 ±1 착각(입력값이 몫+1 또는 몫-1): "곱셈구구를 한 칸 착각했어요. 구구를 1단부터 불러보며 찾아보세요!" 처방.
* 전체 개수를 그대로 쓴 오류(입력값 = 피제수): "나눗셈의 답자리에 전체 개수를 썼어요. 답은 바구니 하나에 들어가는 개수예요!" 처방.
* 나누는 수를 답에 쓴 오류(입력값 = 나눔수): "바구니 개수를 답에 썼어요. 답은 바구니 속 개수랍니다." 처방.
* 특정 나눔수 빈발 오답: "○로 나누는 문제에서 자주 틀렸어요. ○단 구구를 다시 연습해봐요!" 처방.
* 단순 실수: 검산 습관 안내.
- 맞춤 보충 연습: 오답 분석 결과에 맞춘 취약 형태 5문제를 즉시 다시 푸는 '맞춤 보충 연습' 버튼.
- 오답 다시 보기: 틀린 문제들과 함께 '나누어 주기 애니메이션 다시 보기' 버튼 제공.
- 만점 시: 축하 파티클과 함께 "다음 단계: 곱셈과 나눗셈의 관계에 도전해볼까?" 추천.
스타일:
- 따뜻하고 밝은 톤(#FAF8F5 배경), 큼직한 글자(몫 54px, 식 50px, 숫자판 30px)와 터치 영역, 여백을 줄여 화면을 꽉 채운 반응형 레이아웃(#app 최대 640px).
완료 기준:
- index.html을 열면 바로 연습 시작; 자릿수 4열 Grid 세로식(일의 자리 위 몫 상자 정렬) 준수; 몫 원샷 입력 및 오답 칸 유지; 나누어 주기 힌트 애니메이션; 6종 오답 분석 및 맞춤 보충 연습 정상 작동.📚 기술·교육 참고 링크
- 2022 개정 교육과정 초등 3학년 1학기 수학 나눗셈 단원 성취기준 [4수01-07]
- CSS Grid를 활용한 초등 수학 세로식 자릿수 정렬 가이드
- Web Audio API 무설치 사운드 합성 규격
