오른쪽을 맞추지 않으면 큰일 나요! — 네 자리 수 + 세 자리 수 덧셈 정렬 인터랙티브 웹앱
🧮 2022 개정교육과정 초등학교 3학년 1학기 수학 '덧셈과 뺄셈' 단원 — 자릿수가 서로 다른 두 수(네 자리 수와 세 자리 수, 예: 2345 + 123 = 2468)를 세로식(vertical format)에서 일의 자리(오른쪽)에 정확히 맞추어 정렬하고 계산하는 연산 웹앱입니다. 학생들이 가장 자주 범하는 '왼쪽(천의 자리) 맞춤 오류'를 지능적으로 감지하고 교정하는 시각적 그리드 인터랙션을 제공합니다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 자릿수 오른쪽 정렬 시각화 | 세 자리 수의 천의 자리 칸을 점선 빈칸으로 비워두고, 일·십·백의 자리가 네 자리 수와 오른쪽으로 나란히 정렬되도록 격자를 구성합니다. | 세 자리 수가 왼쪽으로 치우치지 않고 일의 자리에 자석처럼 붙는 시각적 가이드 제공. |
| 자릿수 정렬 오류 감지 | 세 자리 수를 천의 자리부터 잘못 더한 흔적(예: 2345+123을 2345+1230처럼 계산)을 찾아내어 핵심 원인을 즉시 짚어냅니다. | "세로식에서는 항상 오른쪽(일의 자리)을 맞추어야 해요!"라는 핀셋 교정 안내. |
| 천의 자리 그대로 내리기 | 천의 자리는 아래에 더할 수가 없으므로 네 자리 수의 천의 자리 숫자가 답으로 그대로 내려오는 과정을 직접 입력하게 합니다. | 더할 수가 없을 때 빈칸은 0과 같다는 자릿값 원리를 자연스럽게 체득. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 화면 구성과 피드백 사운드에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
네자리_세자리_덧셈.html로 저장한 뒤 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
[역할 정의]
너는 초등학교 수학 교육과정 및 인터랙티브 웹앱 전문 프런트엔드 개발자야.
초등학교 3학년 1학기 학생들이 자릿수가 다른 두 수(네 자리 수 + 세 자리 수)를 세로식에서 오른쪽(일의 자리)을 맞추어 덧셈하는 원리를 익히는 단일 HTML 웹앱을 만들어줘.
[목적 및 대상]
- 대상: 초등학교 3학년 1학기 학생
- 연산 유형: 네 자리 수 + 세 자리 수 (예: 2345 + 123 = 2468, 자릿수 정렬 원리 학습을 위해 초기 설정은 받아올림 없음, 각 자리 합 9 이하, 합은 네 자리 수)
[기술 조건 및 안전장치]
1. 단일 index.html 파일 완결성: 외부 라이브러리 설치 없이 브라우저에서 단일 파일로 완벽하게 실행된다.
2. 무설치 Web Audio API: 외부 음원 파일 없이 내장 발진기로 정답 딩 소리와 오답 부드러운 저음을 직접 합성한다.
3. 오프라인 폴백: 외부 CDN 미로드 시에도 시스템 폰트와 CSS 애니메이션으로 완벽 구동된다.
4. 학생 개인정보 0: 학생 실명 없이 세션 메모리로만 연산 기록을 처리한다.
[문제 생성 알고리즘]
- generateProblem() 함수로 분리: 첫 번째 수는 1000~8999 네 자리 수, 두 번째 수는 100~999 세 자리 수.
- 일·십·백 모든 자리에서 합이 9 이하가 되도록 통제(받아올림 없음). 합은 9999 이하 네 자리 수. 직전 문제와 동일한 수 조합 배제.
[풀이 UI 및 오른쪽 정렬 세로식]
- 세로식 구성: 세 자리 수의 천의 자리 칸은 비워두고(은은한 점선 안내), 일·십·백의 자리가 네 자리 수와 정확히 오른쪽 정렬되도록 그리드 구성.
- 답안 칸: 4개(천·백·십·일, 각 변 84px 이상). 색상 구분: 천=보라, 백=파랑, 십=초록, 일=빨강.
- 일의 자리부터 천의 자리 순서로 입력: 천의 자리는 세 자리 수 쪽에 더할 수가 없으므로 네 자리 수 숫자가 그대로 내려옴(학생이 직접 입력).
- 원샷 입력: 한 번 입력 시 정/오 무관 즉시 다음 칸으로 이동(재입력 불가). 오답 시 빨간 배경+shake(오답 숫자 유지). 전원 정답 시 confetti 축하 파티클.
- 힌트 모드: 세 자리 수를 오른쪽에 맞추어 정렬하는 시각 가이드 ➔ 일 ➔ 십 ➔ 백 ➔ 천(그대로 내려옴) 순서 애니메이션.
[결과 화면 및 오답 분석]
- 요약 카드: 맞힌 문제, 틀린 문제, 힌트 사용 횟수.
- 맞춤형 원인 진단:
* 자릿수 정렬 오류 (가장 중요한 진단): 세 자리 수를 왼쪽(천의 자리)에 맞추어 더한 흔적이 있으면 ➔ "세 자리 수를 천의 자리부터 더했어요! 세로식에서는 항상 오른쪽(일의 자리)을 맞추어야 해요!" 안내
* 천의 자리 누락 오류: "천의 자리는 더할 수가 없으니 그대로 내려 적어요!" 안내
- "맞춤 보충 연습(5문제)" 및 오답 복습 제공.
[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 기본 문제 수는 5문제, 10문제, 20문제 중 어떤 것을 기본값으로 할까요?
2. 세 자리 수의 비어 있는 천의 자리 칸에 "비어 있음(0)" 점선 가이드를 은은하게 표시할까요?
3. 전체 완료 시 "다음 단계: 네 자리 수 + 네 자리 수 덧셈 도전!" 배너를 띄울까요?📚 기술·교육 참고 링크
- 2022 개정 초등학교 수학과 교육과정: 자릿수가 다른 자연수의 덧셈 원리와 자릿값 이해
- Web Audio API 무설치 사운드 합성 표준 명세서
