2026년 9월 9일 수요일

[초등 수학] 네 자리 수 − 네 자리 수 뺄셈 - 네 자릿값 완성 세로식 연산 웹앱

네 자리도 자리끼리 맞추면 척척! — 네 자리 수 − 네 자리 수 세로식 연산 웹앱

🧮 2022 개정교육과정 초등학교 3학년 1학기 수학 '덧셈과 뺄셈' 단원 — 네 자리 수끼리의 뺄셈(예: 3579 − 2345 = 1234)을 천·백·십·일 자릿수에 맞추어 세로식(vertical format)으로 직접 풀어보는 인터랙티브 웹앱입니다. 자릿수가 확장되어도 '오른쪽 일의 자리부터 같은 자리끼리 뺀다'는 연산의 절대 원리를 확인하고, 긴 수식을 침착하게 해결하는 계산 집중력을 기릅니다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
4칸 세로식 자릿값 레이아웃	천(보라), 백(파랑), 십(초록), 일(빨강) 4개의 답안 칸을 통해 큰 수의 뺄셈을 자릿수별로 안전하게 분할 정복합니다.	한 변 84px 이상의 큼직한 터치 칸으로 오타 없는 입력 보장.
특정 자릿수 뺄셈 오류 분석	천·백·십·일 중 유독 자주 틀리는 특정 자릿수를 정밀 스캔하여 맞춤형 보충 문제를 처방합니다.	결과 화면에서 "백의 자리 뺄셈에서 실수가 잦아요!" 약점 핀셋 안내.
원샷 입력 & 힌트 지원	정답·오답 관계없이 한 번 입력하면 즉시 다음 칸으로 이동하여 찍기 없는 정직한 풀이를 유도합니다.	일 ➔ 십 ➔ 백 ➔ 천 순서로 각 자리끼리 빼는 과정 노란 플래시 애니메이션.

2. 초보자를 위한 바이브 코딩 실전 사용 예시

프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
역질문 답변 — 제미나이가 묻는 화면 크기와 기본 문제 수에 답합니다.
HTML 파일 실행 — 메모장에 붙여넣고 네자리수_뺄셈_기본.html로 저장한 뒤 더블클릭합니다.

제미나이 전용 에러 제로 프롬프트

[역할 정의]
너는 초등학교 수학 교육과정 및 인터랙티브 웹앱 전문 프런트엔드 개발자야.
초등학교 3학년 1학기 학생들이 네 자리 수끼리의 뺄셈을 세로식으로 직접 풀어보는 단일 HTML 웹앱을 만들어줘.

[목적 및 대상]
- 대상: 초등학교 3학년 1학기 학생
- 연산 유형: 네 자리 수 − 네 자리 수 (예: 3579 − 2345 = 1234, 받아내림 없는 기본 뺄셈, 차는 네 자리 수)

[기술 조건 및 안전장치]
1. 단일 index.html 파일 완결성: 외부 서버, DB 없이 브라우저에서 단일 파일로 100% 동작한다.
2. 무설치 Web Audio API: 외부 음원 없이 내장 발진기로 정답 딩 소리와 오답 부드러운 저음을 직접 합성한다.
3. 오프라인 폴백: CDN 미로드 시에도 시스템 폰트와 CSS 애니메이션으로 완벽 구동된다.
4. 학생 개인정보 0: 학생 실명 없이 세션 메모리로만 연산 기록을 처리한다.

[문제 생성 알고리즘]
- generateProblem() 함수로 분리: 두 수 모두 1000~8999 네 자리 수, 첫 번째 수 > 두 번째 수.
- 초기 설정은 각 자리별 피감수 숫자 >= 감수 숫자인 받아내림 없는 문제. 차는 네 자리 수(9999 이하).
- 직전 문제와 동일한 수 조합 배제.

[풀이 UI 및 세로식 뺄셈 인터랙션]
- 세로식 구성: 피감수 ➔ − 기호 ➔ 감수 ➔ 가로줄 ➔ 답안 칸(천·백·십·일 4개, 각 변 84px 이상).
- 자릿값 색상: 천=보라, 백=파랑, 십=초록, 일=빨강. 현재 입력 칸 노란 테두리 하이라이트.
- 일의 자리부터 천의 자리 순서 입력. 화면 숫자판(0~9) 및 키보드 지원.
- 원샷 입력: 한 번 입력 시 정/오 무관 즉시 다음 칸으로 이동(재입력 불가). 오답 시 빨간 배경+shake(오답 숫자 유지). 전원 정답 시 confetti 축하 파티클.
- 힌트 모드: 일 ➔ 십 ➔ 백 ➔ 천 순서로 각 자리끼리 빼는 과정 표시.

[결과 화면 및 오답 분석]
- 요약 카드: 맞힌 문제, 틀린 문제, 힌트 사용 횟수.
- 맞춤형 원인 진단: 특정 자릿수 반복 오류 분석 및 뺄셈 부호 확인 처방.
- "맞춤 보충 연습(5문제)" 및 오답 복습 제공.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 기본 문제 수는 5문제, 10문제, 20문제 중 어떤 것을 기본값으로 할까요?
2. 4개의 자릿값 답안 칸에 천·백·십·일 한글 라벨을 작게 표시할까요?
3. 전체 완료 시 "네 자리 뺄셈 완벽! 다음은 종합 연습에 도전해볼까?" 배너를 띄울까요?

📚 기술·교육 참고 링크

2022 개정 초등학교 수학과 교육과정: 네 자리 수 뺄셈과 자릿값 체계 확립
Web Audio API 무설치 사운드 합성 표준 명세서

[초등 수학] 세 자리 수 덧셈 (받아올림 2번) - 연속 받아올림 극복 세로식 연산 웹앱

올리고 또 올린다! — 세 자리 수 덧셈(받아올림 2번) 연속 극복 인터랙티브 웹앱

🧮 2022 개정교육과정 초등학교 3학년 1학기 수학 연산 단원 — 일의 자리와 십의 자리에서 연속으로 두 번 받아올림(carrying)이 일어나는 세 자리 수 덧셈(예: 468 + 273 = 741)을 세로식으로 마스터하는 웹앱입니다. 연속 받아올림 누락 오류를 집중 분석하고, 백의 자리는 9 이하로 유지하여 합이 네 자리로 넘어가지 않는 정교한 연산 비계를 제공합니다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
연속 2회 받아올림 제어	일의 자리에서 십의 자리로 1이 올라가고, 그 1 때문에 십의 자리 합도 10 이상이 되어 백의 자리로 또 1이 올라가는 연쇄 반응을 학습합니다.	십의 자리 계산 시 '올라온 1을 먼저 더하고 시작하는' 전략을 세로식 윗줄 메모 칸으로 훈련.
연속 누락 vs 단일 누락 정밀 진단	십의 자리와 백의 자리 모두에서 1씩 부족한지, 아니면 두 번째 받아올림만 놓쳤는지를 정밀하게 감지하여 피드백을 세분화합니다.	"첫 번째 1은 잘 올렸는데, 두 번째 1을 올리는 것을 깜빡했어요!" 맞춤 안내.
합은 세 자리로 엄격 통제	받아올림이 2번 일어나더라도 백의 자리 합+1은 9 이하로 유지하여 결과값이 999 이하의 세 자리 수로 안전하게 머물도록 알고리즘을 설계합니다.	네 자리 수로 자릿수가 늘어나는 부담 없이 순수하게 '연속 받아올림' 개념에만 집중.

2. 초보자를 위한 바이브 코딩 실전 사용 예시

프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
역질문 답변 — 제미나이가 묻는 화면 구성과 피드백 사운드 스타일에 답합니다.
HTML 파일 실행 — 메모장에 붙여넣고 세자리덧셈_받아올림2번.html로 저장 후 더블클릭합니다.

제미나이 전용 에러 제로 프롬프트

[역할 정의]
너는 초등학교 수학 교육과정 및 인터랙티브 웹앱 전문 프런트엔드 개발자야.
초등학교 3학년 1학기 학생들이 받아올림이 연속으로 2번 발생하는 세 자리 수 덧셈을 세로식으로 직접 풀어보는 단일 HTML 웹앱을 만들어줘.

[목적 및 대상]
- 대상: 초등학교 3학년 1학기 학생
- 연산 유형: 세 자리 수 덧셈 (예: 468 + 273 = 741, 일의 자리와 십의 자리에서 연속 2회 받아올림 발생, 백의 자리 합+1은 9 이하로 합은 999 이하 세 자리 수)

[기술 조건 및 안전장치]
1. 단일 index.html 파일 완결성: 외부 라이브러리 설치 없이 브라우저에서 단일 파일로 완벽하게 실행된다.
2. 무설치 Web Audio API: 오디오 파일 없이 내장 발진기로 정답 화음과 오답 저음을 합성한다.
3. 오프라인 폴백: CDN 미로드 시에도 시스템 폰트와 CSS 애니메이션으로 완벽 구동된다.
4. 학생 개인정보 0: 학생 실명 없이 세션 메모리로만 연산 기록을 처리한다.

[문제 생성 알고리즘]
- generateProblem() 함수로 분리: 두 수 모두 100~999 세 자리 수.
- 일의 자리 합 >= 10 AND (십의 자리 합 + 1) >= 10 AND (백의 자리 합 + 1) <= 9 조건을 엄격히 만족하도록 생성.
- 직전 문제와 동일한 수 조합 배제.

[풀이 UI 및 원샷 인터랙션]
- 세로식 구성: 피가산수 윗줄에 십·백의 자리용 받아올림 메모 칸(□) ➔ 피가산수 ➔ + 기호 ➔ 가로줄 ➔ 답안 칸(일·십·백 3개, 각 변 84px 이상).
- 일의 자리부터 입력. 원샷 입력(한 번 입력 시 정/오 무관 즉시 다음 칸 이동, 재입력 불가).
- 정답 초록 채움+"딩", 오답 빨간 배경+shake+낮은 톤(오답 숫자 유지). 전원 정답 시 confetti 축하 파티클.
- 힌트 모드: 일 ➔ 십 ➔ 백 단계별로 받아올린 1이 더해지는 과정을 시각 애니메이션으로 강조.

[결과 화면 및 오답 분석]
- 요약 카드: 맞힌 문제, 틀린 문제, 힌트 사용 횟수.
- 맞춤형 원인 진단:
  * 연속 받아올림 누락 (십·백의 자리 모두 정답-1): "받아올림한 1을 연속으로 잊었어요! 올라온 1을 먼저 더하고 계산해보세요." 안내
  * 한 자리 받아올림 누락: 어느 자리에서 1을 놓쳤는지 콕 짚어 안내
- "맞춤 보충 연습(5문제)" 및 오답 복습 제공.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 기본 문제 수는 5문제, 10문제, 20문제 중 어떤 것을 기본값으로 할까요?
2. 십의 자리 계산 시 올라온 1이 더해지는 과정을 화살표 애니메이션으로 보여줄까요?
3. 전체 완료 시 "다음 단계: 합이 네 자리가 되는 덧셈 도전!" 버튼을 제공할까요?

📚 기술·교육 참고 링크

2022 개정 초등학교 수학과 교육과정: 연속 받아올림 연산의 원리와 지도
Web Audio API 무설치 사운드 합성 표준 명세서

[초등 수학] 네 자리 수 + 세 자리 수 덧셈 - 오른쪽(일의 자리) 맞춤 정렬 세로식 웹앱

오른쪽을 맞추지 않으면 큰일 나요! — 네 자리 수 + 세 자리 수 덧셈 정렬 인터랙티브 웹앱

🧮 2022 개정교육과정 초등학교 3학년 1학기 수학 '덧셈과 뺄셈' 단원 — 자릿수가 서로 다른 두 수(네 자리 수와 세 자리 수, 예: 2345 + 123 = 2468)를 세로식(vertical format)에서 일의 자리(오른쪽)에 정확히 맞추어 정렬하고 계산하는 연산 웹앱입니다. 학생들이 가장 자주 범하는 '왼쪽(천의 자리) 맞춤 오류'를 지능적으로 감지하고 교정하는 시각적 그리드 인터랙션을 제공합니다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
자릿수 오른쪽 정렬 시각화	세 자리 수의 천의 자리 칸을 점선 빈칸으로 비워두고, 일·십·백의 자리가 네 자리 수와 오른쪽으로 나란히 정렬되도록 격자를 구성합니다.	세 자리 수가 왼쪽으로 치우치지 않고 일의 자리에 자석처럼 붙는 시각적 가이드 제공.
자릿수 정렬 오류 감지	세 자리 수를 천의 자리부터 잘못 더한 흔적(예: 2345+123을 2345+1230처럼 계산)을 찾아내어 핵심 원인을 즉시 짚어냅니다.	"세로식에서는 항상 오른쪽(일의 자리)을 맞추어야 해요!"라는 핀셋 교정 안내.
천의 자리 그대로 내리기	천의 자리는 아래에 더할 수가 없으므로 네 자리 수의 천의 자리 숫자가 답으로 그대로 내려오는 과정을 직접 입력하게 합니다.	더할 수가 없을 때 빈칸은 0과 같다는 자릿값 원리를 자연스럽게 체득.

2. 초보자를 위한 바이브 코딩 실전 사용 예시

프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
역질문 답변 — 제미나이가 묻는 화면 구성과 피드백 사운드에 답합니다.
HTML 파일 실행 — 메모장에 붙여넣고 네자리_세자리_덧셈.html로 저장한 뒤 더블클릭합니다.

제미나이 전용 에러 제로 프롬프트

[역할 정의]
너는 초등학교 수학 교육과정 및 인터랙티브 웹앱 전문 프런트엔드 개발자야.
초등학교 3학년 1학기 학생들이 자릿수가 다른 두 수(네 자리 수 + 세 자리 수)를 세로식에서 오른쪽(일의 자리)을 맞추어 덧셈하는 원리를 익히는 단일 HTML 웹앱을 만들어줘.

[목적 및 대상]
- 대상: 초등학교 3학년 1학기 학생
- 연산 유형: 네 자리 수 + 세 자리 수 (예: 2345 + 123 = 2468, 자릿수 정렬 원리 학습을 위해 초기 설정은 받아올림 없음, 각 자리 합 9 이하, 합은 네 자리 수)

[기술 조건 및 안전장치]
1. 단일 index.html 파일 완결성: 외부 라이브러리 설치 없이 브라우저에서 단일 파일로 완벽하게 실행된다.
2. 무설치 Web Audio API: 외부 음원 파일 없이 내장 발진기로 정답 딩 소리와 오답 부드러운 저음을 직접 합성한다.
3. 오프라인 폴백: 외부 CDN 미로드 시에도 시스템 폰트와 CSS 애니메이션으로 완벽 구동된다.
4. 학생 개인정보 0: 학생 실명 없이 세션 메모리로만 연산 기록을 처리한다.

[문제 생성 알고리즘]
- generateProblem() 함수로 분리: 첫 번째 수는 1000~8999 네 자리 수, 두 번째 수는 100~999 세 자리 수.
- 일·십·백 모든 자리에서 합이 9 이하가 되도록 통제(받아올림 없음). 합은 9999 이하 네 자리 수. 직전 문제와 동일한 수 조합 배제.

[풀이 UI 및 오른쪽 정렬 세로식]
- 세로식 구성: 세 자리 수의 천의 자리 칸은 비워두고(은은한 점선 안내), 일·십·백의 자리가 네 자리 수와 정확히 오른쪽 정렬되도록 그리드 구성.
- 답안 칸: 4개(천·백·십·일, 각 변 84px 이상). 색상 구분: 천=보라, 백=파랑, 십=초록, 일=빨강.
- 일의 자리부터 천의 자리 순서로 입력: 천의 자리는 세 자리 수 쪽에 더할 수가 없으므로 네 자리 수 숫자가 그대로 내려옴(학생이 직접 입력).
- 원샷 입력: 한 번 입력 시 정/오 무관 즉시 다음 칸으로 이동(재입력 불가). 오답 시 빨간 배경+shake(오답 숫자 유지). 전원 정답 시 confetti 축하 파티클.
- 힌트 모드: 세 자리 수를 오른쪽에 맞추어 정렬하는 시각 가이드 ➔ 일 ➔ 십 ➔ 백 ➔ 천(그대로 내려옴) 순서 애니메이션.

[결과 화면 및 오답 분석]
- 요약 카드: 맞힌 문제, 틀린 문제, 힌트 사용 횟수.
- 맞춤형 원인 진단:
  * 자릿수 정렬 오류 (가장 중요한 진단): 세 자리 수를 왼쪽(천의 자리)에 맞추어 더한 흔적이 있으면 ➔ "세 자리 수를 천의 자리부터 더했어요! 세로식에서는 항상 오른쪽(일의 자리)을 맞추어야 해요!" 안내
  * 천의 자리 누락 오류: "천의 자리는 더할 수가 없으니 그대로 내려 적어요!" 안내
- "맞춤 보충 연습(5문제)" 및 오답 복습 제공.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 기본 문제 수는 5문제, 10문제, 20문제 중 어떤 것을 기본값으로 할까요?
2. 세 자리 수의 비어 있는 천의 자리 칸에 "비어 있음(0)" 점선 가이드를 은은하게 표시할까요?
3. 전체 완료 시 "다음 단계: 네 자리 수 + 네 자리 수 덧셈 도전!" 배너를 띄울까요?

📚 기술·교육 참고 링크

2022 개정 초등학교 수학과 교육과정: 자릿수가 다른 자연수의 덧셈 원리와 자릿값 이해
Web Audio API 무설치 사운드 합성 표준 명세서

[초등 수학] 세 수의 덧셈/뺄셈 (세 자리 수) - 앞에서부터 두 단계로 나누어 푸는 원리 웹앱

세 개의 수, 왼쪽부터 차례대로 두 묶음씩! — 세 수의 덧셈/뺄셈 (세 자리 수) 2단계 연산 웹앱

🧮 2022 개정교육과정 초등학교 3학년 1학기 수학 '덧셈과 뺄셈' 단원 — 세 개의 세 자리 수가 덧셈과 뺄셈으로 섞여 있는 식(예: 350 + 240 − 180 = □ 또는 670 − 230 + 150 = □)을 '앞에서부터 순서대로 2단계로 나누어 푸는 원리'를 익히는 인터랙티브 웹앱입니다. 뒤의 두 수를 먼저 계산하는 전형적인 순서 오류를 패턴 분석으로 감지하고, 중간 결과가 다음 연산의 첫 번째 수로 자연스럽게 연결되는 단계별 세로식 화면을 완성합니다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
2단계 단계별 연계 세로식	상단에 가로식 전체(350 + 240 − 180 = □) 표시 ➔ [1단계: 350 + 240] 세로식 ➔ 1단계 완료 시 중간 결과(590)가 자동으로 [2단계: 590 − 180]의 첫 번째 수로 진입 ➔ 2단계 세로식 입력 ➔ 최종 완료.	일 ➔ 십 ➔ 백 순서 원샷 입력, 정답 초록 채움, 오답 빨간 배경+shake, 2단계 완료 시 confetti 축하 파티클.
순서 오류 정밀 감지	뒤의 두 수(240 − 180)를 먼저 계산한 흔적을 발견하면, 즉시 "앞에서부터 순서대로 계산해야 해요!" 핵심 원칙을 처방합니다.	1단계(첫 번째 계산) 오류인지 2단계(중간 결과 이용) 오류인지 구분 진단.
핵심 원리 힌트 애니메이션	"세 수의 계산은 반드시 왼쪽(앞)에서부터 차례대로 두 수씩 묶어서 풀어요!" 라는 핵심 원리를 애니메이션으로 강조합니다.	2단계 완료 시 Web Audio 축하 아르페지오와 음소거/음량 버튼 제공.

2. 초보자를 위한 바이브 코딩 실전 사용 예시

프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
역질문 답변 — 제미나이가 묻는 화면 구성과 기본 문제 수에 답합니다.
HTML 파일 실행 — 메모장에 붙여넣고 세수_덧셈뺄셈_세자리.html로 저장한 뒤 더블클릭합니다.

제미나이 전용 에러 제로 프롬프트

[역할 정의]
너는 초등학교 수학 교육과정 및 인터랙티브 웹앱 전문 프런트엔드 개발자야.
초등학교 3학년 1학기 학생들이 세 개의 세 자리 수 혼합 계산을 앞에서부터 순서대로 2단계 세로식으로 풀어보는 단일 HTML 웹앱을 만들어줘.

[목적 및 대상]
- 대상: 초등학교 3학년 1학기 학생
- 연산 유형: 세 수의 덧셈/뺄셈 (예: 350 + 240 − 180 = □ 또는 670 − 230 + 150 = □, 앞에서부터 2단계 순차 계산)

[기술 조건 및 안전장치]
1. 단일 index.html 파일 완결성: 외부 서버, DB 없이 브라우저에서 단일 파일로 100% 동작한다.
2. 무설치 Web Audio API: 외부 음원 없이 내장 발진기로 정답 딩 소리와 오답 부드러운 저음을 직접 합성한다.
3. 오프라인 폴백: CDN 미로드 시에도 시스템 폰트와 CSS 애니메이션으로 완벽 구동된다.
4. 학생 개인정보 0: 학생 실명 없이 세션 메모리로만 연산 기록을 처리한다.

[문제 생성 알고리즘]
- generateProblem() 함수로 분리: 세 수 모두 100~900 세 자리 수. 연산자 조합은 (+, +), (+, −), (−, +), (−, −) 중 무작위.
- 앞에서부터 계산할 때 중간 결과와 최종 결과 모두 양수(세 자리 수) 제약.
- 초기 설정은 중간 및 최종 계산에서 받아올림/받아내림이 없거나 1회 이하인 적정 난이도 유지. 직전 문제 반복 금지.

[풀이 UI 및 2단계 연계 세로식]
- 상단에 전체 가로식 표시.
- 하단에 [1단계: 두 수 계산] 세로식 네모 칸 입력 ➔ 1단계 완료 시 중간 결과 자동 연결 ➔ [2단계: 중간 결과 − 세 번째 수] 세로식 네모 칸 순차 진행.
- 각 단계 일의 자리부터 원샷 입력(재입력 불가). 정답 초록 채움, 오답 빨간 배경+shake.
- 2단계 완료 시 confetti 파티클+축하 아르페지오. 음소거/음량 버튼.
- 힌트 모드: "앞에서부터 순서대로 두 수씩 묶어서 풀어요!" 원리 강조 애니메이션.

[결과 화면 및 오답 분석]
- 요약 카드: 맞힌 문제, 틀린 문제, 힌트 사용 횟수.
- 맞춤형 원인 진단: 1단계 vs 2단계 오답 구분 진단, 뒤의 두 수를 먼저 계산한 순서 오류 감지 시 원칙 처방.
- "맞춤 보충 연습(5문제)" 및 오답 복습 제공.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 기본 문제 수는 5문제, 10문제, 20문제 중 어떤 것을 기본값으로 할까요?
2. 1단계 완료 시 중간 결과를 하이라이트 색으로 강조할까요?
3. 전체 완료 시 "훌륭해요! 2단계 계산을 모두 마쳤어요!" 배너를 띄울까요?

📚 기술·교육 참고 링크

2022 개정 초등학교 수학과 교육과정: 세 수의 덧셈과 뺄셈의 계산 순서 원리
Web Audio API 무설치 사운드 합성 표준 명세서

[초등 수학] 몇백 몇십 − 몇백 (받아내림 없음) - 뺄셈의 첫걸음 세로식 연산 웹앱

뺄셈의 첫걸음, 0은 그대로 두고 백끼리 쏙! — 몇백 몇십 − 몇백 세로식 원샷 연산 웹앱

🧮 2022 개정교육과정 초등학교 3학년 1학기 수학 '덧셈과 뺄셈' 단원 — 받아내림(borrowing)이 없는 "몇백 몇십 − 몇백" 형태의 뺄셈(예: 750 − 300 = 450)을 세로식(vertical format)으로 직접 풀어보며 뺄셈의 기본 자릿값 원리를 익히는 인터랙티브 웹앱입니다. 일의 자리(0−0=0)를 직접 입력하며 자릿값을 체감하고, 덧셈으로 착각하여 계산하는 전형적인 부호 오류를 정밀하게 진단합니다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
일의 자리 '0'의 직접 입력	0−0=0을 자동으로 채워주지 않고 학생이 직접 입력하게 하여, 비어 있는 자릿값을 0으로 확인하는 기초 개념을 다집니다.	오른쪽 일의 자리부터 0 ➔ 십의 자리 ➔ 백의 자리 순서로 차분히 연산.
덧셈 착각 오류 감지	앞서 배운 덧셈의 잔상으로 뺄셈 기호(−)를 보지 못하고 더해버린 계산(예: 750−300을 1050으로 셈)을 감지합니다.	"가운데 연산 기호가 빼기(−)예요! 수가 더 작아져야 해요"라는 부호 확인 처방 안내.
원샷 입력 & 힌트 플래시	정답·오답 관계없이 한 번 입력 즉시 다음 칸으로 이동하여 찍기 없는 정직한 풀이를 유도하고, 취약 시 힌트가 깜빡입니다.	힌트 클릭 시 일(0−0=0) ➔ 십(그대로) ➔ 백(백끼리 뺌) 순서로 계산 과정이 노란색으로 시각화.

2. 초보자를 위한 바이브 코딩 실전 사용 예시

프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
역질문 답변 — 제미나이가 묻는 화면 구성과 기본 문제 수에 답합니다.
HTML 파일 실행 — 메모장에 붙여넣고 몇백몇십_빼기_몇백.html로 저장한 뒤 더블클릭합니다.

제미나이 전용 에러 제로 프롬프트

[역할 정의]
너는 초등학교 수학 교육과정 및 인터랙티브 웹앱 전문 프런트엔드 개발자야.
초등학교 3학년 1학기 학생들이 받아내림이 없는 "몇백 몇십 − 몇백" 뺄셈을 세로식으로 직접 풀어보는 단일 HTML 웹앱을 만들어줘.

[목적 및 대상]
- 대상: 초등학교 3학년 1학기 학생
- 연산 유형: 몇백 몇십 − 몇백 (예: 750 − 300 = 450, 받아내림 없음, 일의 자리는 둘 다 0, 차는 양수)

[기술 조건 및 안전장치]
1. 단일 index.html 파일 완결성: 외부 서버, DB 없이 브라우저에서 단일 파일로 100% 동작한다.
2. 무설치 Web Audio API: 외부 음원 없이 내장 발진기로 정답 딩 소리와 오답 부드러운 저음을 직접 합성한다.
3. 오프라인 폴백: CDN 미로드 시에도 시스템 폰트와 CSS 애니메이션으로 완벽 구동된다.
4. 학생 개인정보 0: 학생 실명 없이 세션 메모리로만 연산 기록을 처리한다.

[문제 생성 알고리즘]
- generateProblem() 함수로 분리: 첫 번째 수는 210~990(일의 자리는 0), 두 번째 수는 100~800(백 단위 수).
- 첫 번째 수 > 두 번째 수로 차는 항상 양수, 받아내림 없음. 직전 문제와 동일한 수 조합 배제.

[풀이 UI 및 세로식 뺄셈 인터랙션]
- 세로식 구성: 피감수 ➔ − 기호 ➔ 감수 ➔ 가로줄 ➔ 답안 칸(일·십·백 3개, 각 변 84px 이상).
- 자릿값 색상: 백=파랑, 십=초록, 일=빨강. 현재 입력 칸 노란 테두리 하이라이트.
- 일의 자리부터 백의 자리 순서 입력: 일의 자리(0−0=0)도 학생이 직접 0을 입력하여 자릿값 체감.
- 원샷 입력: 한 번 입력 시 정/오 무관 즉시 다음 칸으로 이동(재입력 불가). 오답 시 빨간 배경+shake(오답 숫자 유지). 전원 정답 시 confetti 축하 파티클.
- 힌트 모드: 일(0−0=0) ➔ 십(뺄 것이 없으니 그대로) ➔ 백(백끼리 뺌) 순서 애니메이션 표시.

[결과 화면 및 오답 분석]
- 요약 카드: 맞힌 문제, 틀린 문제, 힌트 사용 횟수.
- 맞춤형 원인 진단:
  * 뺄셈 대신 덧셈 실수: "빼기(−) 기호예요! 더하지 않고 빼야 수가 작아져요." 안내
  * 일의 자리 0 실수: "0에서 0을 빼면 0이 남아요. 빈자리에 0을 꼭 써주세요." 안내
- "맞춤 보충 연습(5문제)" 및 오답 복습 제공.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 기본 문제 수는 5문제, 10문제, 20문제 중 어떤 것을 기본값으로 할까요?
2. 뺄셈 기호(−)의 색상을 주황색 등으로 강조하여 덧셈과의 혼동을 줄일까요?
3. 전체 완료 시 "다음 단계: 세 자리 수 뺄셈 도전!" 배너를 띄울까요?

📚 기술·교육 참고 링크

2022 개정 초등학교 수학과 교육과정: 자연수의 뺄셈 개념과 자릿값 이해
Web Audio API 무설치 사운드 합성 표준 명세서

[초등 수학] 세 자리 수 뺄셈 (받아내림 없음) - 자릿값 원리와 원샷 세로식 연산 웹앱

뺄셈도 자리끼리 차분하게! — 세 자리 수 뺄셈 (받아내림 없음) 세로식 연산 웹앱

🧮 2022 개정교육과정 초등학교 3학년 1학기 수학 '덧셈과 뺄셈' 단원 — 받아내림(borrowing)이 전혀 없는 세 자리 수끼리의 뺄셈(예: 579 − 243 = 336)을 세로식(vertical format)으로 직접 해결하는 인터랙티브 웹앱입니다. 일의 자리부터 백의 자리까지 각 자릿값별로 빼는 원리를 명확히 익히고, 뺄셈 대신 덧셈으로 착각하는 전형적 연산 실수를 즉시 교정합니다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
세 자리 뺄셈 세로식 정렬	피감수와 감수의 백·십·일 자릿수를 정확히 나란히 배열하고, 3개의 답안 칸을 통해 각 자리의 뺄셈 결과를 차례로 입력합니다.	백(파랑), 십(초록), 일(빨강) 자릿값 색상 가이드로 자리 혼동 방지.
기호 착각 오류 집중 진단	뺄셈 기호(−)를 보고도 덧셈으로 계산해버리는 전형적 부호 혼동 실수를 지능적으로 판별합니다.	"빼기(−) 기호예요! 더하지 않고 빼야 결과가 작아져요"라는 맞춤 처방 안내.
자릿수별 단계적 힌트	일의 자리(9−3=6) ➔ 십의 자리(7−4=3) ➔ 백의 자리(5−2=3) 순서로 계산 과정을 해당 열 플래시 애니메이션으로 지원합니다.	2칸 이상 오답 시 힌트 버튼이 깜빡이며 다음 문제에서 능동적 복습 유도.

2. 초보자를 위한 바이브 코딩 실전 사용 예시

프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
역질문 답변 — 제미나이가 묻는 문제 수와 테마 색상에 답합니다.
HTML 파일 실행 — 메모장에 붙여넣고 세자리수_뺄셈_기본.html로 저장한 뒤 더블클릭합니다.

제미나이 전용 에러 제로 프롬프트

[역할 정의]
너는 초등학교 수학 교육과정 및 인터랙티브 웹앱 전문 프런트엔드 개발자야.
초등학교 3학년 1학기 학생들이 받아내림이 없는 세 자리 수끼리의 뺄셈을 세로식으로 직접 풀어보는 단일 HTML 웹앱을 만들어줘.

[목적 및 대상]
- 대상: 초등학교 3학년 1학기 학생
- 연산 유형: 세 자리 수 뺄셈 (예: 579 − 243 = 336, 첫 번째 수의 각 자리 숫자가 두 번째 수보다 크거나 같아 받아내림 전혀 없음, 차는 세 자리 수)

[기술 조건 및 안전장치]
1. 단일 index.html 파일 완결성: 외부 라이브러리 설치 없이 브라우저에서 단일 파일로 100% 동작한다.
2. 무설치 Web Audio API: 외부 음원 없이 내장 발진기로 정답 딩 소리와 오답 부드러운 저음을 직접 합성한다.
3. 오프라인 폴백: CDN 미로드 시에도 시스템 폰트와 CSS 애니메이션으로 완벽 구동된다.
4. 학생 개인정보 0: 학생 실명 없이 세션 메모리로만 연산 기록을 처리한다.

[문제 생성 알고리즘]
- generateProblem() 함수로 분리: 두 수 모두 100~999 세 자리 수.
- 백·십·일 모든 자리에서 피감수 숫자 >= 감수 숫자가 되도록 엄격 통제(받아내림 없음). 차는 항상 세 자리 수.
- 직전 문제와 동일한 수 조합 배제.

[풀이 UI 및 세로식 뺄셈 인터랙션]
- 세로식 구성: 피감수 ➔ − 기호 ➔ 감수 ➔ 가로줄 ➔ 답안 칸(일·십·백 3개, 각 변 84px 이상).
- 자릿값 색상: 백=파랑, 십=초록, 일=빨강. 현재 입력 칸 노란 테두리 하이라이트.
- 일의 자리부터 백의 자리 순서 입력. 화면 숫자판(0~9) 및 키보드 지원.
- 원샷 입력: 한 번 입력 시 정/오 무관 즉시 다음 칸으로 이동(재입력 불가). 오답 시 빨간 배경+shake(오답 숫자 유지). 전원 정답 시 confetti 축하 파티클.
- 힌트 모드: 일 ➔ 십 ➔ 백 순서로 각 자리끼리 빼는 과정을 노란 플래시 애니메이션으로 표시.

[결과 화면 및 오답 분석]
- 요약 카드: 맞힌 문제, 틀린 문제, 힌트 사용 횟수.
- 맞춤형 원인 진단:
  * 뺄셈 대신 덧셈 실수: "빼기(−) 기호예요! 더하지 않고 빼야 수가 작아져요." 안내
  * 특정 자릿수 뺄셈 오류: 취약 자릿수 집중 연습 처방
- "맞춤 보충 연습(5문제)" 및 오답 복습 제공.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 기본 문제 수는 5문제, 10문제, 20문제 중 어떤 것을 기본값으로 할까요?
2. 뺄셈 부호(−)를 크고 선명한 주황색으로 표시할까요?
3. 전체 완료 시 "다음 단계: 받아내림 1번 뺄셈 도전!" 배너를 띄울까요?

📚 기술·교육 참고 링크

2022 개정 초등학교 수학과 교육과정: 세 자리 수 뺄셈의 계산 원리와 계산 유창성
Web Audio API 무설치 사운드 합성 표준 명세서

[초등 수학] 세 자리 수 덧셈 종합 (받아올림 섞임) - 상황 판단력을 기르는 종합 연산 웹앱

받아올림이 있을까 없을까? 상황 판단력 UP! — 세 자리 수 덧셈 종합 (받아올림 섞임) 연산 웹앱

🧮 2022 개정교육과정 초등학교 3학년 1학기 수학 '덧셈과 뺄셈' 단원 — 받아올림(carrying)이 0회, 1회, 2회, 3회(합이 네 자리가 되는 경우) 일어나는 세 자리 수 덧셈 문제들을 무작위로 섞어 출제하는 종합 연산 웹앱입니다. 기계적으로 받아올림을 적용하던 습관을 깨고, 문제를 보자마자 "이 문제는 받아올림이 필요한가?"를 먼저 생각하는 상황 판단력과 메타인지를 극대화합니다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
받아올림 0~3회 무작위 혼합	받아올림 없는 문제부터 합이 1000이 넘는 네 자리 문제까지 골고루 섞여 나와 고정관념 없는 유연한 연산력을 평가합니다.	합의 자릿수에 따라 답안 칸이 3칸 또는 4칸으로 동적 반응.
받아올림 유형별 취약점 지목	오답 데이터를 분석하여 "받아올림 2번 문제에서 주로 틀려요!"처럼 아이의 취약 유형을 핀셋 지목합니다.	결과 화면에서 특정 받아올림 회차 보충 문제 세트 자동 생성.
동적 힌트 & 원샷 입력	문제마다 받아올림 발생 횟수에 맞추어 일 ➔ 십 ➔ 백 (➔ 천) 단계별 애니메이션 힌트가 유연하게 변경됩니다.	원샷 입력으로 찍기 차단, 오답 시 숫자 유지로 깊이 있는 오답 점검 지원.

2. 초보자를 위한 바이브 코딩 실전 사용 예시

프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
역질문 답변 — 제미나이가 묻는 혼합 비율과 기본 문제 수에 답합니다.
HTML 파일 실행 — 메모장에 붙여넣고 세자리수_덧셈_종합.html로 저장한 뒤 더블클릭합니다.

제미나이 전용 에러 제로 프롬프트

[역할 정의]
너는 초등학교 수학 교육과정 및 인터랙티브 웹앱 전문 프런트엔드 개발자야.
초등학교 3학년 1학기 학생들이 받아올림 0~3회가 섞여 있는 세 자리 수 덧셈 종합 문제를 세로식으로 풀어보는 단일 HTML 웹앱을 만들어줘.

[목적 및 대상]
- 대상: 초등학교 3학년 1학기 학생
- 연산 유형: 세 자리 수 덧셈 종합 (받아올림 0회, 1회, 2회, 3회 무작위 혼합, 합은 세 자리 또는 네 자리)

[기술 조건 및 안전장치]
1. 단일 index.html 파일 완결성: 외부 서버, DB 없이 브라우저에서 단일 파일로 100% 동작한다.
2. 무설치 Web Audio API: 외부 음원 없이 내장 발진기로 정답 딩 소리와 오답 부드러운 저음을 직접 합성한다.
3. 오프라인 폴백: CDN 미로드 시에도 시스템 폰트와 CSS 애니메이션으로 완벽 구동된다.
4. 학생 개인정보 0: 학생 실명 없이 세션 메모리로만 연산 기록을 처리한다.

[문제 생성 알고리즘]
- generateProblem() 함수로 분리: 두 수 모두 100~999 세 자리 수.
- 받아올림 0회(무받아올림), 1회, 2회, 3회(합 1000 이상 네 자리 수) 중 무작위로 골고루 생성.
- 직전 문제와 동일한 수 조합 배제.

[풀이 UI 및 세로식 덧셈 인터랙션]
- 합의 자릿수에 맞추어 답안 칸이 3칸 또는 4칸으로 동적 렌더링.
- 피가산수 윗줄에 받아올림 보조 칸(□) 제공.
- 일의 자리부터 입력. 원샷 입력: 한 번 입력 시 정/오 무관 즉시 다음 칸으로 이동(재입력 불가).
- 정답 초록 채움+"딩", 오답 빨간 배경+shake(오답 숫자 유지). 전원 정답 시 confetti 축하 파티클.
- 힌트 모드: 각 문제의 받아올림 횟수에 맞추어 일 ➔ 십 ➔ 백 (➔ 천) 단계별 애니메이션 동적 제공.

[결과 화면 및 오답 분석]
- 요약 카드: 맞힌 문제, 틀린 문제, 힌트 사용 횟수.
- 취약 유형 핀셋 분석(핵심): 오답이 발생한 문제들의 받아올림 횟수를 분류하여 "받아올림 2번 문제에서 자주 틀려요! 해당 유형을 다시 연습해 보세요" 맞춤 안내.
- "맞춤 보충 연습(5문제)" 및 오답 복습 제공.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 기본 문제 수는 5문제, 10문제, 20문제 중 어떤 것을 기본값으로 할까요?
2. 받아올림 3회(합이 네 자리가 되는 문제)의 출제 비중을 특별히 조절할까요?
3. 전체 완료 시 결과 카드에 덧셈 마스터 뱃지를 표시할까요?

📚 기술·교육 참고 링크

2022 개정 초등학교 수학과 교육과정: 덧셈의 상황 판단력과 연산 유창성 종합 평가
Web Audio API 무설치 사운드 합성 표준 명세서

[초등 수학] 네 자리 수 + 네 자리 수 덧셈 - 4칸 균형 세로식과 자릿값 완성 웹앱

네 자리 덧셈도 원샷으로 거침없이! — 네 자리 수 + 네 자리 수 덧셈 완성 웹앱

🧮 2022 개정교육과정 초등학교 3학년 1학기 수학 '덧셈과 뺄셈' 단원 — 네 자리 수끼리의 덧셈(예: 2345 + 1234 = 3579)을 천·백·십·일 자릿수에 정확히 맞추어 세로식(vertical format)으로 풀어보는 인터랙티브 웹앱입니다. 자릿수가 확장되어도 흔들리지 않는 4칸 균형 세로식 레이아웃과 찍기 방지 원샷(one-shot) 입력 시스템으로 자연수 덧셈의 마지막 기초를 완벽하게 다집니다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
4칸 균형 세로식 레이아웃	천·백·십·일 4개 자릿수가 완벽한 열 정렬을 이루어, 큰 수 연산에서도 아이들이 시각적 혼란 없이 각 자리 셈에 몰입합니다.	천(보라), 백(파랑), 십(초록), 일(빨강) 4색 코딩으로 자릿값 위치를 직관적으로 판별.
자릿수별 집중 오류 진단	천·백·십·일 중 학습자가 유독 자주 실수를 범하는 취약 자릿수를 정밀하게 추적하여 맞춤 피드백을 제공합니다.	"백의 자리 계산에서 실수가 반복되었어요. 백의 자리 숫자를 다시 한번 확인해보세요!" 처방.
안정적인 기본형 확장	네 자리 수 덧셈 도입 단계에 맞추어 초기 설정은 받아올림 없는 문제로 구성하여 연산의 피로도 없이 큰 수 덧셈의 자신감을 키웁니다.	합이 9999 이하인 네 자리 수 범위 내에서 안정적인 덧셈 규칙 체화.

2. 초보자를 위한 바이브 코딩 실전 사용 예시

프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
역질문 답변 — 제미나이가 묻는 화면 구성과 기본 문제 수에 답합니다.
HTML 파일 실행 — 메모장에 붙여넣고 네자리_덧셈완성.html로 저장한 뒤 더블클릭합니다.

제미나이 전용 에러 제로 프롬프트

[역할 정의]
너는 초등학교 수학 교육과정 및 인터랙티브 웹앱 전문 프런트엔드 개발자야.
초등학교 3학년 1학기 학생들이 네 자리 수끼리의 덧셈을 자릿수에 맞추어 세로식으로 직접 풀어보는 단일 HTML 웹앱을 만들어줘.

[목적 및 대상]
- 대상: 초등학교 3학년 1학기 학생
- 연산 유형: 네 자리 수 + 네 자리 수 (예: 2345 + 1234 = 3579, 자릿수 확장 기본 단계로 초기 설정은 받아올림 없음, 각 자리 합 9 이하, 합은 9999 이하 네 자리 수)

[기술 조건 및 안전장치]
1. 단일 index.html 파일 완결성: 외부 라이브러리 설치 없이 브라우저에서 단일 파일로 100% 동작한다.
2. 무설치 Web Audio API: 외부 음원 없이 내장 발진기로 정답 딩 소리와 오답 부드러운 저음을 직접 합성한다.
3. 오프라인 폴백: CDN 로드 실패 시에도 시스템 폰트와 CSS 애니메이션으로 완벽 구동된다.
4. 학생 개인정보 0: 학생 실명 없이 세션 메모리로만 연산 기록을 처리한다.

[문제 생성 알고리즘]
- generateProblem() 함수로 분리: 두 수 모두 1000~8999 범위의 네 자리 수.
- 천·백·십·일 모든 자리에서 각 자리 숫자의 합이 9 이하가 되도록 엄격 제어(받아올림 없음). 합은 9999 이하 네 자리 수.
- 직전 문제와 동일한 수 조합 배제.

[풀이 UI 및 4칸 세로식 인터랙션]
- 세로식 구성: 피가산수 ➔ + 기호 ➔ 가로줄 ➔ 4칸 답안 칸(천·백·십·일, 각 변 84px 이상).
- 자릿값 색상: 천=보라, 백=파랑, 십=초록, 일=빨강. 현재 입력 칸 노란 테두리 하이라이트.
- 일의 자리부터 천의 자리 순서로 입력. 화면 숫자판(0~9) 및 키보드 지원.
- 원샷 입력: 한 번 입력 시 정/오 무관 즉시 다음 칸으로 이동(재입력 불가). 오답 시 빨간 배경+shake(오답 숫자 유지). 전원 정답 시 confetti 축하 파티클.
- 힌트 모드: 일 ➔ 십 ➔ 백 ➔ 천 순서로 각 자리끼리 더하는 과정을 노란 플래시 애니메이션으로 표시.

[결과 화면 및 오답 분석]
- 요약 카드: 맞힌 문제, 틀린 문제, 힌트 사용 횟수.
- 맞춤형 원인 진단:
  * 특정 자릿수 반복 오류: 천·백·십·일 중 자주 틀리는 자리를 짚어 해당 자릿수 덧셈 집중 연습 안내
  * 자릿수 어긋남: 자릿값 색상을 확인하는 습관 안내
- "맞춤 보충 연습(5문제)" 및 오답 복습 제공.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 기본 문제 수는 5문제, 10문제, 20문제 중 어떤 것을 기본값으로 할까요?
2. 4칸 답안 칸의 크기를 화면 중앙에 큼직하게 배치할까요?
3. 전체 완료 시 "네 자리 수 덧셈 마스터! 다음은 뺄셈에 도전해볼까?" 축하 배너를 띄울까요?

📚 기술·교육 참고 링크

2022 개정 초등학교 수학과 교육과정: 네 자리 수 덧셈의 원리와 계산 유창성
Web Audio API 무설치 사운드 합성 표준 명세서

[초등 3-1 수학] 나눗셈의 기초 - 상황 그림과 세로식으로 배우는 똑같이 나누기

상황 그림과 세로식으로 체감하는 나눗셈의 기초 — 같은 수씩 묶어 나누기 웹앱

🍩 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 무설치 사운드 합성 규격

[초등 3-1 수학] 곱셈과 나눗셈의 관계 - 곱셈식으로 나눗셈 풀기 웹앱

곱셈식을 알면 나눗셈이 술술! — 곱셈과 나눗셈의 역연산 관계 정복 웹앱

✖️➗ 2022 개정 교육과정 초등학교 3학년 1학기 수학 연산 (나눗셈) — 아이들이 이미 완벽하게 익힌 곱셈구구(예: 3 × 4 = 12)를 직관적인 단서 카드로 제시하고, 나눗셈(12 ÷ 4 = 3 또는 12 ÷ 3 = 4)과의 상호 역연산 관계를 세로식과 화살표 애니메이션으로 체감하는 인터랙티브 웹앱입니다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
곱셈식 단서 카드 상단 제시	나눗셈 세로식 바로 위에 "3 × 4 = 12" 곱셈식을 선명하게 띄워주어, 나눗셈이 완전히 새로운 계산이 아니라 곱셈의 짝꿍 찾기임을 한눈에 보여줍니다.	곱셈의 두 인수가 나눗셈의 나누는 수와 몫으로 교환되는 규칙을 시각적으로 탐구하게 하세요.
곱셈-나눗셈 화살표 연결 힌트	힌트 버튼을 누르면 상단 곱셈식의 숫자들과 하단 나눗셈 세로식의 숫자들을 이어주는 동적 화살표 애니메이션이 재생됩니다.	"4 × [ 3 ] = 12 이므로 빈칸의 3이 바로 몫이 돼요!"라는 인과관계를 체화합니다.
나누는 수와 몫 혼동 정밀 진단	12 ÷ 4의 답자리에 실수로 나누는 수인 4를 적거나 전체 개수 12를 그대로 쓰는 초등 특유의 오개념을 정확히 짚어내 처방합니다.	풀이 후 '맞춤 보충 연습' 버튼으로 취약했던 곱셈-나눗셈 짝꿍 문제를 5개 집중 복습하세요.

2. 초보자를 위한 바이브 코딩 실전 사용 예시

프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
역질문 답변 — 제미나이가 묻는 문제 수(5/10/20) 및 글자 크기 설정에 답합니다.
HTML 파일 실행 — 메모장에 붙여넣고 곱셈나눗셈관계.html로 저장한 뒤 더블클릭합니다.

제미나이 전용 에러 제로 프롬프트

2022 개정교육과정 > 초등학교 > 3학년 1학기 > 수학 > 연산 > 나눗셈 > 곱셈과 나눗셈의 관계 바이브 코딩 프롬프트

[유형 2] 곱셈과 나눗셈의 관계 — 곱셈식으로 나눗셈 풀기 연습 웹앱을 만들어줘.

목적·대상:
초등학교 3학년 1학기 학생이 이미 알고 있는 곱셈식(예: 3 × 4 = 12)을 단서로 하여 관련된 나눗셈(12 ÷ 4 = 3 또는 12 ÷ 3 = 4)을 세로식으로 풀어보며 곱셈과 나눗셈의 상호 역연산 관계를 익히는 인터랙티브 웹앱.

기술 조건:
- HTML+CSS+JavaScript 단일 index.html 파일.
- CDN: canvas-confetti, 구글 폰트 Jua. Web Audio API 사운드 직접 합성. CDN 미연결 시 오프라인 폴백 처리.

문제 생성:
- 두 한 자리 수 a(2~9)와 b(2~9)를 무작위 선택하여 곱 T = a × b (4~81) 생성.
- 상단 곱셈식 카드에 "a × b = T"를 제시하고, 하단 나눗셈식은 T ÷ b(몫 a) 또는 T ÷ a(몫 b) 중 무작위 출제.
- 직전 문제 반복 금지, generateProblem() 함수 완전 분리.

풀이 UI:
- 상단 곱셈식 힌트 카드: "3 × 4 = 12"를 크고 선명한 카드로 표시.
- 하단 세로식 나눗셈 (CSS Grid 4열 정렬):
  * 1열(나누는 수, 44px) / 2열(')', 24px) / 3열(피제수 십의 자리, 84px) / 4열(피제수 일의 자리, 84px).
  * 몫 네모 칸(84px, 초록 테두리)은 피제수 **일의 자리 열(4열) 바로 위에 정확히 수직 정렬**.
- 원샷 입력: 몫을 1회 입력 시 즉시 채점 (재입력 불가).
  * 정답: 초록 채움 + "딩" + confetti + 아르페지오 + 자동 이동.
  * 오답: 빨간 채움 + shake + 낮은 톤(오답 숫자 유지) 후 이동.
- 연속 2문제 이상 오답 시 힌트 버튼 깜빡임. 음소거/음량 조절 제공.

힌트 모드:
- "힌트" 버튼: 상단 곱셈식의 숫자들과 하단 나눗셈식의 숫자들을 연결하는 화살표 이동 애니메이션 재생.
  * "4 × [  ] = 12 이므로, 빈칸에 들어갈 수는 3이에요! 곱셈식의 앞 숫자가 바로 나눗셈의 몫이 돼요." 시각화.
- 힌트 사용 문제는 결과에서 별도 기록.

학습 기록 및 진행:
- 입력값, 정오, 힌트 기록. 문제 수 선택(5/10/20), 진행률 바.

결과 화면 — 오답 분석:
- 요약 카드: 맞힌/틀린/힌트/정답률.
- 분석 진단:
  * 전체 개수를 몫에 입력한 오류: "곱셈의 결과(전체)를 나눗셈 몫에 그대로 썼어요. 나눗셈의 답은 곱하는 두 수 중 하나예요!"
  * 나누는 수와 몫 자리 바꿈(예: 12÷4의 답에 4를 입력): "나누는 수와 몫을 헷갈렸어요. 곱셈식의 다른 쪽 짝꿍 숫자를 찾아야 해요."
  * 곱셈식 결과 착각 / 단순 계산 착각 진단.
- 맞춤 보충 연습(5문제), 오답 문제 목록(대응 화살표 애니메이션 다시 보기), 만점 시 축하 연출 + 다음 유형 추천.

스타일:
- 밝은 테마, 큼직한 UI(몫 54px), 여백 축소 레이아웃, 모바일 반응형.

완료 기준:
- 곱셈식 단서 제시 및 세로식 4열 정렬 나눗셈 구현; 몫 원샷 입력; 곱셈-나눗셈 연결 화살표 힌트; 대응 관계 오개념 특화 진단 및 보충 연습 동작.

📚 기술·교육 참고 링크

2022 개정 교육과정 초등 3학년 1학기 수학 곱셈과 나눗셈의 관계 [4수01-08]
CSS Grid를 활용한 수직 정렬 나눗셈 세로식 인터페이스
초등 수학 연산 역연산(Inverse Operation) 개념 지도 가이드