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