2026년 9월 9일 수요일

[초등 수학] 네 자리 수 − 세 자리 수 뺄셈 - 오른쪽 일의 자리 맞춤 정렬 연산 웹앱



자릿수가 달라도 당황하지 마! 오른쪽을 맞춰요 — 네 자리 수 − 세 자리 수 세로식 연산 웹앱

🧮 2022 개정교육과정 초등학교 3학년 1학기 수학 '덧셈과 뺄셈' 단원 — 자릿수가 다른 두 수(네 자리 수와 세 자리 수, 예: 2345 − 123 = 2222)의 뺄셈을 세로식(vertical format)에서 오른쪽(일의 자리)에 맞추어 정확하게 정렬하고 푸는 원리를 익히는 인터랙티브 웹앱입니다. 세 자리 수를 왼쪽(천의 자리)에 맞추어 빼버리는 대표적 자릿수 정렬 오류를 시각적 그리드로 완벽히 교정하고, 뺄 것이 없는 천의 자리는 그대로 내려 적는 자릿값 체계를 마스터합니다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
자릿수 오른쪽 정렬 세로식 세 자리 감수의 천의 자리를 점선이나 비움으로 표시하여, 일·십·백의 자리가 네 자리 피감수와 일치하도록 안내합니다. 천(보라), 백(파랑), 십(초록), 일(빨강) 4색 자릿값 가이드.
자릿수 정렬 오류 정밀 감지 세 자리 수를 왼쪽(천의 자리)부터 맞추어 빼버린 계산을 감지하여 즉시 직관적인 처방을 제시합니다. "세로식에서는 항상 오른쪽(일의 자리)을 맞추어야 해요!" 정렬 원칙 안내.
천의 자리 그대로 내리기 천의 자리는 뺄 수가 없으므로 첫 번째 수의 천의 자리 숫자를 그대로 내려 적는 연산 과정을 직접 입력합니다. 일 ➔ 십 ➔ 백 ➔ 천 순서의 4칸 원샷 입력으로 자릿값 체감.

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

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

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

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

[목적 및 대상]
- 대상: 초등학교 3학년 1학기 학생
- 연산 유형: 네 자리 수 − 세 자리 수 (예: 2345 − 123 = 2222, 자릿수가 다른 두 수의 정렬 원리 학습, 초기 설정은 받아내림 없는 문제)

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

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

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

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

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

📚 기술·교육 참고 링크

  • 2022 개정 초등학교 수학과 교육과정: 자릿수가 다른 자연수의 뺄셈 정렬 원리
  • Web Audio API 무설치 사운드 합성 표준 명세서
By 시간: