세 개의 수, 왼쪽부터 차례대로 두 묶음씩! — 세 수의 덧셈/뺄셈 (세 자리 수) 2단계 연산 웹앱
🧮 2022 개정교육과정 초등학교 3학년 1학기 수학 '덧셈과 뺄셈' 단원 — 세 개의 세 자리 수가 덧셈과 뺄셈으로 섞여 있는 식(예: 350 + 240 − 180 = □ 또는 670 − 230 + 150 = □)을 '앞에서부터 순서대로 2단계로 나누어 푸는 원리'를 익히는 인터랙티브 웹앱입니다. 뒤의 두 수를 먼저 계산하는 전형적인 순서 오류를 패턴 분석으로 감지하고, 중간 결과가 다음 연산의 첫 번째 수로 자연스럽게 연결되는 단계별 세로식 화면을 완성합니다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 2단계 단계별 연계 세로식 | 상단에 가로식 전체(350 + 240 − 180 = □) 표시 ➔ [1단계: 350 + 240] 세로식 ➔ 1단계 완료 시 중간 결과(590)가 자동으로 [2단계: 590 − 180]의 첫 번째 수로 진입 ➔ 2단계 세로식 입력 ➔ 최종 완료. | 일 ➔ 십 ➔ 백 순서 원샷 입력, 정답 초록 채움, 오답 빨간 배경+shake, 2단계 완료 시 confetti 축하 파티클. |
| 순서 오류 정밀 감지 | 뒤의 두 수(240 − 180)를 먼저 계산한 흔적을 발견하면, 즉시 "앞에서부터 순서대로 계산해야 해요!" 핵심 원칙을 처방합니다. | 1단계(첫 번째 계산) 오류인지 2단계(중간 결과 이용) 오류인지 구분 진단. |
| 핵심 원리 힌트 애니메이션 | "세 수의 계산은 반드시 왼쪽(앞)에서부터 차례대로 두 수씩 묶어서 풀어요!" 라는 핵심 원리를 애니메이션으로 강조합니다. | 2단계 완료 시 Web Audio 축하 아르페지오와 음소거/음량 버튼 제공. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 화면 구성과 기본 문제 수에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
세수_덧셈뺄셈_세자리.html로 저장한 뒤 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
[역할 정의]
너는 초등학교 수학 교육과정 및 인터랙티브 웹앱 전문 프런트엔드 개발자야.
초등학교 3학년 1학기 학생들이 세 개의 세 자리 수 혼합 계산을 앞에서부터 순서대로 2단계 세로식으로 풀어보는 단일 HTML 웹앱을 만들어줘.
[목적 및 대상]
- 대상: 초등학교 3학년 1학기 학생
- 연산 유형: 세 수의 덧셈/뺄셈 (예: 350 + 240 − 180 = □ 또는 670 − 230 + 150 = □, 앞에서부터 2단계 순차 계산)
[기술 조건 및 안전장치]
1. 단일 index.html 파일 완결성: 외부 서버, DB 없이 브라우저에서 단일 파일로 100% 동작한다.
2. 무설치 Web Audio API: 외부 음원 없이 내장 발진기로 정답 딩 소리와 오답 부드러운 저음을 직접 합성한다.
3. 오프라인 폴백: CDN 미로드 시에도 시스템 폰트와 CSS 애니메이션으로 완벽 구동된다.
4. 학생 개인정보 0: 학생 실명 없이 세션 메모리로만 연산 기록을 처리한다.
[문제 생성 알고리즘]
- generateProblem() 함수로 분리: 세 수 모두 100~900 세 자리 수. 연산자 조합은 (+, +), (+, −), (−, +), (−, −) 중 무작위.
- 앞에서부터 계산할 때 중간 결과와 최종 결과 모두 양수(세 자리 수) 제약.
- 초기 설정은 중간 및 최종 계산에서 받아올림/받아내림이 없거나 1회 이하인 적정 난이도 유지. 직전 문제 반복 금지.
[풀이 UI 및 2단계 연계 세로식]
- 상단에 전체 가로식 표시.
- 하단에 [1단계: 두 수 계산] 세로식 네모 칸 입력 ➔ 1단계 완료 시 중간 결과 자동 연결 ➔ [2단계: 중간 결과 − 세 번째 수] 세로식 네모 칸 순차 진행.
- 각 단계 일의 자리부터 원샷 입력(재입력 불가). 정답 초록 채움, 오답 빨간 배경+shake.
- 2단계 완료 시 confetti 파티클+축하 아르페지오. 음소거/음량 버튼.
- 힌트 모드: "앞에서부터 순서대로 두 수씩 묶어서 풀어요!" 원리 강조 애니메이션.
[결과 화면 및 오답 분석]
- 요약 카드: 맞힌 문제, 틀린 문제, 힌트 사용 횟수.
- 맞춤형 원인 진단: 1단계 vs 2단계 오답 구분 진단, 뒤의 두 수를 먼저 계산한 순서 오류 감지 시 원칙 처방.
- "맞춤 보충 연습(5문제)" 및 오답 복습 제공.
[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 기본 문제 수는 5문제, 10문제, 20문제 중 어떤 것을 기본값으로 할까요?
2. 1단계 완료 시 중간 결과를 하이라이트 색으로 강조할까요?
3. 전체 완료 시 "훌륭해요! 2단계 계산을 모두 마쳤어요!" 배너를 띄울까요?📚 기술·교육 참고 링크
- 2022 개정 초등학교 수학과 교육과정: 세 수의 덧셈과 뺄셈의 계산 순서 원리
- Web Audio API 무설치 사운드 합성 표준 명세서
