올리고 또 올린다! — 세 자리 수 덧셈(받아올림 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 무설치 사운드 합성 표준 명세서
