오답을 찍어서 맞추는 습관은 이제 그만! — 몇백 + 몇백 몇십(받아올림 없음) 세로식 연산 웹앱
🧮 2022 개정교육과정 초등학교 3학년 1학기 수학 연산 '덧셈과 뺄셈' 단원 — 받아올림(carrying)이 없는 "몇백 + 몇백 몇십(예: 300 + 250 = 550)"을 세로식(vertical format)으로 직접 풀어보는 인터랙티브 웹앱입니다. 자릿값(place value)별 고유 색상 구분과 찍기 방지 원샷(one-shot) 입력 시스템, 아이 눈높이 오답 원인 진단 처방까지 단일 HTML 파일로 완결됩니다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 원샷(One-shot) 입력 시스템 | 틀릴 때까지 숫자를 이것저것 눌러보며 찍어서 맞추는 요행을 방지합니다. 각 칸은 단 한 번만 입력되며 정오에 관계없이 다음 칸으로 즉시 이동합니다. | 오답 숫자가 빨간 배경에 그대로 남아 학습자가 자신의 실수를 직관적으로 눈으로 확인하도록 지도. |
| 자릿값(Place value) 시각화 | 일의 자리(빨강), 십의 자리(초록), 백의 자리(파랑)의 색상 코딩과 84px 이상의 큼직한 정사각형 터치 칸으로 공간적 자릿값을 체득합니다. | 일의 자리 0도 생략하지 않고 직접 입력하게 하여 빈 자릿값의 의미를 완벽하게 정립. |
| 맞춤형 오답 원인 진단 | 단순히 점수만 매기지 않고 학습 기록을 분석해 '특정 자릿수 반복 오류', '±1 착각', '일의 자리 0 실수' 등 아이 눈높이 처방을 내립니다. | 평가 종료 후 '맞춤 보충 연습(5문제 미니 세트)' 버튼을 눌러 취약 자릿수를 즉시 보충. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 화면 테마 색상과 기본 문제 수(5/10/20)에 답합니다.
- HTML 파일 실행 — 완성된 코드를 메모장에 붙여넣고
몇백덧셈.html로 저장한 뒤 브라우저에서 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
[역할 정의]
너는 초등학교 수학 교육과정 및 인터랙티브 웹앱 전문 프런트엔드 개발자야.
초등학교 3학년 1학기 학생들이 받아올림이 없는 "몇백 + 몇백 몇십" 덧셈을 세로식으로 직접 풀어보는 단일 HTML 웹앱을 만들어줘.
[목적 및 대상]
- 대상: 초등학교 3학년 1학기 학생
- 연산 유형: 몇백 + 몇백 몇십 (예: 300 + 250 = 550, 합은 990 이하 세 자리 수, 받아올림 없음)
[기술 조건 및 안전장치]
1. 단일 index.html 파일 완결성: 외부 서버, 데이터베이스, Node.js 없이 브라우저에서 더블클릭으로 즉시 실행되어야 한다.
2. 무설치 Web Audio API 사운드: 외부 오디오 파일 링크 없이 브라우저 내장 Web Audio API 발진기(Oscillator)로 정답("딩" 상승 화음)과 오답(부드러운 저음 톤)을 직접 합성한다.
3. CDN 및 오프라인 폴백: 파티클 효과는 canvas-confetti, 한글 글꼴은 구글 폰트(Jua)를 사용하되, 인터넷이 차단된 교실 환경에서도 CSS 애니메이션과 시스템 폰트로 100% 정상 구동되도록 폴백 처리한다.
4. 학생 개인정보 0: 학생 이름이나 식별 정보는 일절 입력받지 않으며, 모든 학습 기록은 브라우저 세션 메모리에서만 처리된다.
[문제 생성 규칙]
- generateProblem() 함수로 분리: 두 수 중 하나는 몇백(100~900 백 단위), 다른 하나는 몇백 몇십(110~990, 일의 자리가 0인 수)으로 무작위 생성.
- 순서는 뒤바뀔 수 있으며 합은 항상 990 이하 세 자리 수. 직전 문제와 동일한 수 조합 배제.
[풀이 UI 및 원샷 인터랙션]
- 세로식 구성: 피가산수 ➔ + 기호 ➔ 가로줄 ➔ 자릿수별 정사각형 네모 답안 칸(일·십·백 3개, 각 변 84px 이상).
- 자릿값 색상 구분: 백의 자리=파랑, 십의 자리=초록, 일의 자리=빨강. 현재 입력 칸은 노란색 테두리 하이라이트.
- 일의 자리부터 입력: 오른쪽(일의 자리)부터 한 칸씩 화면 숫자판(0~9) 또는 키보드로 입력. 답의 일의 자리 0도 직접 입력.
- 찍기 방지 원샷 입력: 숫자를 누르면 정답/오답 판정 후 즉시 다음 칸으로 자동 이동(재입력 불가). 맞으면 초록 채움, 틀리면 빨간 배경+좌우 흔들림(shake), 오답 숫자는 그대로 표시.
- 힌트 모드: 2칸 이상 오답 시 힌트 버튼 안내. 힌트 클릭 시 십의 자리 ➔ 백의 자리 순서로 계산 과정을 노란색 플래시 애니메이션으로 표시.
[결과 화면 및 오답 분석]
- 요약 카드: 맞힌 문제 수, 틀린 문제 수, 힌트 사용 횟수.
- 맞춤형 원인 진단:
* 특정 자릿수 반복 오류: 해당 자릿값 보충 연습 안내
* 자릿수 어긋남: 자릿값 색상을 짚어가며 읽는 습관 안내
* ±1 착각: "받아올림을 미리 반영한 착각이에요. 각 자리끼리만 더해보세요!" 안내
* 일의 자리 0 실수: 빈 자릿값 0 확인 습관 안내
- "맞춤 보충 연습(5문제)" 버튼 및 오답 복습 기능 탑재.
[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 기본 문제 수는 5문제, 10문제, 20문제 중 어떤 것을 기본 선택값으로 할까요?
2. 숫자판 버튼의 크기와 글자 크기를 태블릿 터치에 최적화하여 초대형으로 배치할까요?
3. 전체 정답 시 팡파르 효과음과 함께 축하 파티클을 3초간 지속할까요?📚 기술·교육 참고 링크
- 2022 개정 초등학교 수학과 교육과정: 3학년 1학기 '덧셈과 뺄셈' 성취기준 [4수01-05]
- Web Audio API 오실레이터 사운드 합성 표준 명세서
