자리끼리 더하면 끝! — 세 자리 수 덧셈(받아올림 없음) 세로식 원샷 연산 웹앱
🧮 2022 개정교육과정 초등학교 3학년 1학기 수학 '덧셈과 뺄셈' 단원 — 받아올림(carrying)이 없는 순수한 세 자리 수끼리의 덧셈(예: 234 + 152 = 386)을 세로식(vertical format)으로 풀어보는 인터랙티브 웹앱입니다. 일·십·백의 자리 각 열이 독립적으로 계산되는 원리를 직관화하고, 한 번 입력하면 재입력이 불가능한 원샷(one-shot) 시스템으로 연산의 정확성을 체득합니다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 각 자리의 독립적 덧셈 | 일·십·백의 모든 자리에서 합이 9 이하로 유지되므로, 다른 자리로 넘어가는 수 없이 각 열끼리만 더하는 기본 원리를 학습합니다. | 일의 자리(4+2=6), 십의 자리(3+5=8), 백의 자리(2+1=3)를 오른쪽부터 차례대로 완성. |
| ±1 착각 오답 진단 | 학생들이 덧셈을 할 때 미리 받아올림을 의식하여 정답보다 1 크게 적는 습관(예: 3+5=8인데 9로 적음)을 감지합니다. | "받아올림이 없는 문제예요! 각 자리끼리만 정직하게 더해보세요"라는 맞춤형 교정 문장 제공. |
| 자릿수 플래시 힌트 | 2칸 이상 오답 시 힌트 버튼이 깜빡이며, 일의 자리부터 노란색 열 플래시와 함께 계산 과정을 시각적으로 펼쳐 보여줍니다. | 힌트를 사용한 문제는 결과표에 별도 마킹되어 스스로 푼 문제와 명확히 구분. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 화면 구성과 기본 문제 수에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
세자리덧셈_무받아올림.html로 저장한 뒤 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
[역할 정의]
너는 초등학교 수학 교육과정 및 인터랙티브 웹앱 전문 프런트엔드 개발자야.
초등학교 3학년 1학기 학생들이 받아올림이 전혀 없는 "세 자리 수 + 세 자리 수" 덧셈을 세로식으로 직접 풀어보는 단일 HTML 웹앱을 만들어줘.
[목적 및 대상]
- 대상: 초등학교 3학년 1학기 학생
- 연산 유형: 세 자리 수 덧셈 (예: 234 + 152 = 386, 모든 자릿수의 합이 9 이하, 받아올림 없음, 합은 세 자리 수)
[기술 조건 및 안전장치]
1. 단일 index.html 파일 완결성: 외부 서버, 데이터베이스, Node.js 없이 브라우저에서 더블클릭으로 즉시 실행된다.
2. 무설치 Web Audio API 사운드: 외부 음원 링크 없이 내장 Web Audio API로 정답 딩 소리와 오답 부드러운 저음을 직접 합성한다.
3. 오프라인 폴백: 구글 폰트와 파티클 CDN 로드 실패 시에도 시스템 기본 글꼴과 CSS 애니메이션으로 100% 정상 구동된다.
4. 학생 개인정보 0: 학생 이름 없이 세션 메모리로만 연산 기록을 처리한다.
[문제 생성 규칙]
- generateProblem() 함수로 분리: 두 수 모두 100~999 범위의 세 자리 수로 생성.
- 일·십·백 모든 자리에서 각 자리 숫자의 합이 9 이하가 되도록 엄격히 제어(받아올림 0회). 직전 문제와 동일한 수 조합 배제.
[풀이 UI 및 상호작용]
- 세로식 표시: 피가산수 ➔ + 기호 ➔ 가로줄 ➔ 답안 칸(일·십·백 3개, 각 변 84px 이상).
- 색상 구분: 백=파랑, 십=초록, 일=빨강. 현재 입력 칸은 노란 테두리 하이라이트.
- 원샷 입력: 오른쪽(일의 자리)부터 한 칸씩 화면 숫자판(0~9) 또는 키보드로 입력. 한 번 입력 시 정/오 무관 즉시 다음 칸으로 이동(재입력 불가).
- 피드백: 정답 시 초록 채움+"딩", 오답 시 빨간 배경+shake+낮은 톤(오답 숫자 유지). 전원 정답 시 confetti 축하 파티클.
[결과 화면 및 오답 분석]
- 요약 카드: 맞힌 문제, 틀린 문제, 힌트 사용 횟수.
- 맞춤형 원인 진단:
* ±1 착각: "받아올림이 없는 자리예요. 각 자리끼리만 차분히 더해보세요!" 안내
* 특정 자릿수 반복 오류: 해당 자릿값 집중 연습 안내
* 자릿수 어긋남: 색깔별 자릿값을 확인하는 습관 안내
- "맞춤 보충 연습(5문제)" 및 오답 다시 풀기 제공.
[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 기본 문제 수는 5문제, 10문제, 20문제 중 어떤 것을 기본값으로 할까요?
2. 숫자 입력판을 화면 하단 고정으로 배치할까요?
3. 전체 완료 시 "다음 단계: 받아올림 1번 덧셈 도전!" 버튼을 띄울까요?📚 기술·교육 참고 링크
- 2022 개정 초등학교 수학과 교육과정: 세 자리 수의 덧셈과 뺄셈 지도 방법
- Web Audio API 무설치 사운드 합성 원리 및 가이드
