빌려오고 또 빌려와도 끄떡없어! — 세 자리 수 뺄셈 (받아내림 2번) 세로식 연산 웹앱
🧮 2022 개정교육과정 초등학교 3학년 1학기 수학 '덧셈과 뺄셈' 단원 — 일의 자리와 십의 자리 모두에서 연속 2번 받아내림(borrowing)이 일어나는 세 자리 수 뺄셈(예: 523 − 148 = 375)을 세로식(vertical format)으로 직접 풀어보는 인터랙티브 웹앱입니다. 일의 자리가 모자라 십의 자리에서 빌리고, 십의 자리도 모자라 백의 자리에서 다시 빌려오는 연속 받아내림 과정을 단계별 시각 효과와 함께 완벽히 정복합니다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 연속 받아내림 시각 안내 | 일의 자리 받아내림에 이어 십의 자리도 1 줄어든 상태에서 다시 백의 자리에서 10을 빌려오는 2단계 과정을 시각적으로 추적합니다. | 피감수 윗줄에 단계별 사선과 남은 수 표기가 연동되어 계산 실수 방지. |
| 연속 받아내림 누락 감지 | 십의 자리에서 1이 줄어든 것을 잊고 원래 숫자로 계산하거나, 백의 자리에서 1 줄어든 것을 빼먹은 오류를 정밀 분석합니다. | "빌려주고 남은 숫자가 얼마인지 윗칸 메모를 먼저 확인해요!" 맞춤 처방. |
| 원샷 입력 & 단계별 힌트 | 일의 자리부터 백의 자리까지 한 번에 하나씩 입력하며, 2칸 이상 오답 시 힌트 버튼이 깜빡이며 능동적 도움을 유도합니다. | 정답 시 confetti 축하 파티클, 오답 시 입력 숫자를 유지하며 올바른 복습 지원. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 화면 크기와 기본 문제 수에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
세자리수_뺄셈_연속받아내림.html로 저장한 뒤 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
[역할 정의]
너는 초등학교 수학 교육과정 및 인터랙티브 웹앱 전문 프런트엔드 개발자야.
초등학교 3학년 1학기 학생들이 연속 2번 받아내림이 일어나는 세 자리 수 뺄셈을 세로식으로 직접 풀어보는 단일 HTML 웹앱을 만들어줘.
[목적 및 대상]
- 대상: 초등학교 3학년 1학기 학생
- 연산 유형: 세 자리 수 뺄셈 (예: 523 − 148 = 375, 일의 자리와 십의 자리 모두에서 연속 2번 받아내림 발생, 첫 번째 수 > 두 번째 수)
[기술 조건 및 안전장치]
1. 단일 index.html 파일 완결성: 외부 서버, DB 없이 브라우저에서 단일 파일로 100% 동작한다.
2. 무설치 Web Audio API: 외부 음원 없이 내장 발진기로 정답 딩 소리와 오답 부드러운 저음을 직접 합성한다.
3. 오프라인 폴백: CDN 미로드 시에도 시스템 폰트와 CSS 애니메이션으로 완벽 구동된다.
4. 학생 개인정보 0: 학생 실명 없이 세션 메모리로만 연산 기록을 처리한다.
[문제 생성 알고리즘]
- generateProblem() 함수로 분리: 두 수 모두 100~999 세 자리 수, 첫 번째 수 > 두 번째 수.
- 일의 자리(피감수 일의 자리 < 감수 일의 자리) 및 십의 자리(1 줄어든 십의 자리 < 감수 십의 자리) 모두에서 연속 받아내림 발생.
- 직전 문제와 동일한 수 조합 배제.
[풀이 UI 및 세로식 뺄셈 인터랙션]
- 세로식 구성: 피감수 윗줄에 연속 받아내림 보조 표시 ➔ 피감수 ➔ − 기호 ➔ 감수 ➔ 가로줄 ➔ 답안 칸(일·십·백 3개, 각 변 84px 이상).
- 자릿값 색상: 백=파랑, 십=초록, 일=빨강. 현재 입력 칸 노란 테두리 하이라이트.
- 일의 자리부터 백의 자리 순서 입력. 화면 숫자판(0~9) 및 키보드 지원.
- 원샷 입력: 한 번 입력 시 정/오 무관 즉시 다음 칸으로 이동(재입력 불가). 오답 시 빨간 배경+shake(오답 숫자 유지). 전원 정답 시 confetti 축하 파티클.
- 힌트 모드: 일의 자리 받아내림 ➔ 십의 자리도 모자라 백의 자리에서 다시 빌려오는 연속 과정 단계별 애니메이션.
[결과 화면 및 오답 분석]
- 요약 카드: 맞힌 문제, 틀린 문제, 힌트 사용 횟수.
- 맞춤형 원인 진단:
* 연속 받아내림 누락: "빌려주고 줄어든 숫자를 반영하지 않았어요! 윗자리 메모를 꼭 확인해요." 처방
* 거꾸로 뺄셈: "아래에서 위를 빼면 안 돼요! 윗자리에서 10을 빌려와야 해요." 처방
- "맞춤 보충 연습(5문제)" 및 오답 복습 제공.
[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 기본 문제 수는 5문제, 10문제, 20문제 중 어떤 것을 기본값으로 할까요?
2. 연속 받아내림 메모 칸에 '줄어든 수'를 자동으로 적어줄까요, 학생이 직접 적게 할까요?
3. 전체 완료 시 "세 자리 뺄셈 마스터! 다음은 네 자리 수 뺄셈 도전!" 배너를 띄울까요?📚 기술·교육 참고 링크
- 2022 개정 초등학교 수학과 교육과정: 연속 받아내림이 있는 뺄셈 알고리즘 이해
- Web Audio API 무설치 사운드 합성 표준 명세서
