1을 올리고 더하는 것을 잊지 않아요! — 세 자리 수 덧셈(받아올림 1번) 인터랙티브 웹앱
🧮 2022 개정교육과정 초등학교 3학년 1학기 수학 연산 단원 — 일의 자리나 십의 자리 중 정확히 한 곳에서만 받아올림(carrying)이 일어나는 세 자리 수 덧셈(예: 248 + 135 = 383)을 세로식으로 정밀 훈련하는 웹앱입니다. 피가산수 윗줄에 배치된 작은 '받아올림 메모 칸(□)'과 받아올림 누락 및 이중 적용을 칼같이 짚어내는 지능형 오답 분석 엔진을 탑재했습니다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 받아올림 메모 칸(□) 제공 | 세로식 피가산수 윗줄(십의 자리와 백의 자리 위)에 작은 보조 메모 칸을 두어, 머릿속으로만 기억하다가 1을 잊어버리는 인지 과부하를 덜어줍니다. | 받아올림이 발생하면 작은 '1'이 시각적으로 떠오르며 다음 자리 계산과 합산되는 연결고리 시각화. |
| 받아올림 누락 vs 이중 적용 판별 | 정답보다 1이 작으면 '받아올림 누락', 정답보다 1이 크면 '받아올림이 없는 자리에 1을 더한 이중 적용'으로 학생의 생각 경로를 정확히 역추적합니다. | "합이 10 이상일 때만 1을 올리는 연습을 해보자!"는 핀셋 처방 제공. |
| 정확히 1회 발생 문제 생성 | 일의 자리에서 십의 자리로 넘어가거나, 십의 자리에서 백의 자리로 넘어가는 경우 중 '정확히 한 곳'에서만 받아올림이 발생하도록 수학 알고리즘을 제어합니다. | 난이도의 급격한 상승 없이 점진적이고 안정적인 연산 비계를 학생에게 제공. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 화면 UI와 터치패드 배치 방식에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
세자리덧셈_받아올림1번.html로 저장한 뒤 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
[역할 정의]
너는 초등학교 수학 교육과정 및 인터랙티브 웹앱 전문 프런트엔드 개발자야.
초등학교 3학년 1학기 학생들이 받아올림이 정확히 1번만 발생하는 세 자리 수 덧셈을 세로식으로 직접 풀어보는 단일 HTML 웹앱을 만들어줘.
[목적 및 대상]
- 대상: 초등학교 3학년 1학기 학생
- 연산 유형: 세 자리 수 덧셈 (예: 248 + 135 = 383, 받아올림이 일의 자리 또는 십의 자리 중 정확히 한 곳에서만 일어남, 합은 세 자리 수)
[기술 조건 및 안전장치]
1. 단일 index.html 파일 완결성: 외부 서버, DB 없이 브라우저에서 단일 파일로 100% 동작한다.
2. 무설치 Web Audio API: 오디오 파일 없이 내장 발진기로 정답 딩 소리와 오답 부드러운 톤을 합성한다.
3. 오프라인 폴백: 외부 CDN 미로드 시에도 시스템 폰트와 CSS 애니메이션으로 완벽 작동한다.
4. 학생 개인정보 0: 학생 이름 없이 세션 메모리로만 연산 기록을 처리한다.
[문제 생성 알고리즘]
- generateProblem() 함수로 분리: 두 수 모두 100~999 세 자리 수.
- 받아올림 발생 제어: (일의 자리 합 >= 10 AND 십의 자리 합+1 <= 9) 또는 (일의 자리 합 <= 9 AND 십의 자리 합 >= 10) 중 정확히 한 쪽만 만족하도록 생성.
- 백의 자리 합(또는 백의 자리 합+1)은 반드시 9 이하로 유지하여 합이 세 자리 수(999 이하)가 되도록 엄격 통제. 직전 문제 중복 배제.
[풀이 UI 및 원샷 인터랙션]
- 세로식 레이아웃: 피가산수 윗줄에 작은 받아올림 메모 칸(□) ➔ 피가산수 ➔ + 기호 ➔ 가로줄 ➔ 답안 칸(일·십·백 3개, 각 변 84px 이상).
- 자릿값 색상: 백=파랑, 십=초록, 일=빨강. 현재 입력 칸 노란 하이라이트.
- 원샷 입력: 일의 자리부터 입력. 한 번 입력 시 정/오 무관 즉시 다음 칸 이동(재입력 불가). 오답 시 빨간 배경+shake(오답 숫자 유지).
- 힌트 모드: 일의 자리부터 계산 과정 표시. 받아올림이 일어난 자리는 "8 + 5 = 13 ➔ 3을 쓰고 1을 받아올림!"처럼 시각 애니메이션으로 강조.
[결과 화면 및 오답 분석]
- 요약 카드: 맞힌 문제, 틀린 문제, 힌트 사용 횟수.
- 맞춤형 원인 진단:
* 받아올림 누락 오류 (입력값 = 정답 - 1): "받아올림한 1을 더하는 것을 잊었어요! 윗칸에 작은 1을 꼭 적어두세요." 안내
* 받아올림 이중 적용 (입력값 = 정답 + 1): "받아올림이 없는 자리까지 1을 더했어요. 합이 10 이상일 때만 1을 올려요!" 안내
* 특정 자릿수 오류 / 자릿수 어긋남 안내
- "맞춤 보충 연습(5문제)" 및 오답 다시 풀기 제공.
[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 기본 문제 수는 5문제, 10문제, 20문제 중 어떤 것을 기본값으로 할까요?
2. 윗줄 받아올림 메모 칸에 학생이 직접 1을 입력하게 할까요, 아니면 시각 안내용으로 둘까요?
3. 전체 정답 완료 시 "다음 단계: 받아올림 2번 덧셈 도전!" 버튼을 제공할까요?📚 기술·교육 참고 링크
- 2022 개정 초등학교 수학과 교육과정: 받아올림이 있는 덧셈의 원리와 계산 숙달
- Web Audio API 오실레이터 주파수 합성 표준
