네 자리 덧셈도 원샷으로 거침없이! — 네 자리 수 + 네 자리 수 덧셈 완성 웹앱
🧮 2022 개정교육과정 초등학교 3학년 1학기 수학 '덧셈과 뺄셈' 단원 — 네 자리 수끼리의 덧셈(예: 2345 + 1234 = 3579)을 천·백·십·일 자릿수에 정확히 맞추어 세로식(vertical format)으로 풀어보는 인터랙티브 웹앱입니다. 자릿수가 확장되어도 흔들리지 않는 4칸 균형 세로식 레이아웃과 찍기 방지 원샷(one-shot) 입력 시스템으로 자연수 덧셈의 마지막 기초를 완벽하게 다집니다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 4칸 균형 세로식 레이아웃 | 천·백·십·일 4개 자릿수가 완벽한 열 정렬을 이루어, 큰 수 연산에서도 아이들이 시각적 혼란 없이 각 자리 셈에 몰입합니다. | 천(보라), 백(파랑), 십(초록), 일(빨강) 4색 코딩으로 자릿값 위치를 직관적으로 판별. |
| 자릿수별 집중 오류 진단 | 천·백·십·일 중 학습자가 유독 자주 실수를 범하는 취약 자릿수를 정밀하게 추적하여 맞춤 피드백을 제공합니다. | "백의 자리 계산에서 실수가 반복되었어요. 백의 자리 숫자를 다시 한번 확인해보세요!" 처방. |
| 안정적인 기본형 확장 | 네 자리 수 덧셈 도입 단계에 맞추어 초기 설정은 받아올림 없는 문제로 구성하여 연산의 피로도 없이 큰 수 덧셈의 자신감을 키웁니다. | 합이 9999 이하인 네 자리 수 범위 내에서 안정적인 덧셈 규칙 체화. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 화면 구성과 기본 문제 수에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
네자리_덧셈완성.html로 저장한 뒤 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
[역할 정의]
너는 초등학교 수학 교육과정 및 인터랙티브 웹앱 전문 프런트엔드 개발자야.
초등학교 3학년 1학기 학생들이 네 자리 수끼리의 덧셈을 자릿수에 맞추어 세로식으로 직접 풀어보는 단일 HTML 웹앱을 만들어줘.
[목적 및 대상]
- 대상: 초등학교 3학년 1학기 학생
- 연산 유형: 네 자리 수 + 네 자리 수 (예: 2345 + 1234 = 3579, 자릿수 확장 기본 단계로 초기 설정은 받아올림 없음, 각 자리 합 9 이하, 합은 9999 이하 네 자리 수)
[기술 조건 및 안전장치]
1. 단일 index.html 파일 완결성: 외부 라이브러리 설치 없이 브라우저에서 단일 파일로 100% 동작한다.
2. 무설치 Web Audio API: 외부 음원 없이 내장 발진기로 정답 딩 소리와 오답 부드러운 저음을 직접 합성한다.
3. 오프라인 폴백: CDN 로드 실패 시에도 시스템 폰트와 CSS 애니메이션으로 완벽 구동된다.
4. 학생 개인정보 0: 학생 실명 없이 세션 메모리로만 연산 기록을 처리한다.
[문제 생성 알고리즘]
- generateProblem() 함수로 분리: 두 수 모두 1000~8999 범위의 네 자리 수.
- 천·백·십·일 모든 자리에서 각 자리 숫자의 합이 9 이하가 되도록 엄격 제어(받아올림 없음). 합은 9999 이하 네 자리 수.
- 직전 문제와 동일한 수 조합 배제.
[풀이 UI 및 4칸 세로식 인터랙션]
- 세로식 구성: 피가산수 ➔ + 기호 ➔ 가로줄 ➔ 4칸 답안 칸(천·백·십·일, 각 변 84px 이상).
- 자릿값 색상: 천=보라, 백=파랑, 십=초록, 일=빨강. 현재 입력 칸 노란 테두리 하이라이트.
- 일의 자리부터 천의 자리 순서로 입력. 화면 숫자판(0~9) 및 키보드 지원.
- 원샷 입력: 한 번 입력 시 정/오 무관 즉시 다음 칸으로 이동(재입력 불가). 오답 시 빨간 배경+shake(오답 숫자 유지). 전원 정답 시 confetti 축하 파티클.
- 힌트 모드: 일 ➔ 십 ➔ 백 ➔ 천 순서로 각 자리끼리 더하는 과정을 노란 플래시 애니메이션으로 표시.
[결과 화면 및 오답 분석]
- 요약 카드: 맞힌 문제, 틀린 문제, 힌트 사용 횟수.
- 맞춤형 원인 진단:
* 특정 자릿수 반복 오류: 천·백·십·일 중 자주 틀리는 자리를 짚어 해당 자릿수 덧셈 집중 연습 안내
* 자릿수 어긋남: 자릿값 색상을 확인하는 습관 안내
- "맞춤 보충 연습(5문제)" 및 오답 복습 제공.
[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 기본 문제 수는 5문제, 10문제, 20문제 중 어떤 것을 기본값으로 할까요?
2. 4칸 답안 칸의 크기를 화면 중앙에 큼직하게 배치할까요?
3. 전체 완료 시 "네 자리 수 덧셈 마스터! 다음은 뺄셈에 도전해볼까?" 축하 배너를 띄울까요?📚 기술·교육 참고 링크
- 2022 개정 초등학교 수학과 교육과정: 네 자리 수 덧셈의 원리와 계산 유창성
- Web Audio API 무설치 사운드 합성 표준 명세서
