세 자리 수 덧셈 모험 (CO-STAR 프롬프트)
1. Context (배경)
학습 대상: 세 자리 수 덧셈과 받아올림(Carry) 개념을 한창 익히고 있는 초등학생 어린이
현상: 기존의 단순 텍스트 입력형 덧셈기는 실제 연산 흐름(우측에서 좌측 자릿수 순서로 풀기)과 맞지 않아 혼란을 줄 수 있음.
해결책: 가독성이 뛰어난 세로셈 그리드 판을 제공하고, 일의 자리부터 직접 탭하여 숫자를 적어나갈 수 있는 '직접 입력 그리드' 수학 학습 앱이 필요함.
2. Objective (목표)
세 자리 수 더하기 세 자리 수 연산을 수행할 수 있는 인터랙티브 웹앱 제작.
어이가 계산할 때 받아올림 수(1)를 직접 켜고 끌 수 있는 '받아올림 도우미 버튼' 구현.
사용자가 하위 자릿수(일의 자리)부터 상위 자릿수(천의 자리) 순서로 답을 입력하면 포커스가 자동으로 왼쪽으로 이동하는 스마트 입력 인터페이스 제공.
3. Style (스타일)
서체: 따뜻하고 친근한 분위기를 위해 구글 'Gaegu' 폰트를 우선 적용.
디자인 테마: 따뜻한 앰버(Amber)와 핑크, 블루 계열을 활용한 프리미엄 스케치 스타일.
자릿수 정렬: 세로셈의 기하학적 정렬이 자릿수별로 칼같이 맞아야 함 (Grid 시스템 사용 권장).
입력 박스: 일반 테두리가 아닌 예쁜 점선 및 그라데이션이 들어간 동글동글한 상자(Rounded corners) 적용.
4. Tone (어조)
친근함과 격려: 어린이가 한 문제를 해결할 때마다 "딩동댕! 정말 멋져!", "우와, 최고야!" 등의 즉각적이고 생생한 감정적 피드백 제공.
성취감: 점수가 오르는 모습을 실시간으로 보여주고, 10문제를 완주하면 커다란 팝업(왕관 이모지 포함)과 함께 환호하는 연출.
5. Audience (청중)
주요 사용자: 일의 자리, 십의 자리에서 일어나는 받아올림의 의미를 스스로 깨닫고 시각적 힌트를 필요로 하는 아동.
보조 사용자: 어린이의 학습 과정과 성취도(점수)를 실시간으로 간편하게 모니터링하려는 학부모 및 교사.
6. Response (핵심 요구사항 & 구현 기능)
문제 생성 알고리즘:
n1,n2는 (100~899) 범위 내의 세 자리 수 무작위 추출.단, 어린이가 받아올림 개념을 충분히 훈련할 수 있도록 일의 자리 또는 십의 자리 중 적어도 한 곳 이상에서 반드시 받아올림이 발생하는 문제만 10개 엄선하여 출제할 것.
자릿수 입력 장치:
하단 입력 창을 완전히 없애고, 세로셈 판 정답 줄의 일의 자리(
inp-one), 십의 자리(inp-ten), 백의 자리(inp-hundred), 천의 자리(inp-thousand) 빈칸에 직접 타이핑하도록 설계.숫자가 한 글자 입력되면 자동으로 왼쪽(상위 자릿수) 입력칸으로 커서가 넘어가는
oninput체인 로직 구현.오타 수정을 위해 백스페이스(
Backspace)를 누르면 자동으로 우측(하위 자릿수) 입력칸으로 포커스가 복귀하는 스마트 백트래킹 기능 탑재.
받아올림 가이드:
십의 자리 위, 백의 자리 위에 점선 모양의 동그라미 토글 버튼 배치. 터치하면 핑크색 불이 켜지며 숫자 '1'이 활성화되어 계산을 보조함.
예외 처리 및 안전성:
window.onload를 기점으로 자바스크립트가 실행되어 DOM null 포인터 예외를 원천 차단할 것.정답 확인을 누르면 각 자릿수 칸이 맞았는지 검증하여 맞으면 '초록색 테두리 및 팝 애니메이션', 틀리면 '빨간색 테두리 및 흔들기(Shake) 애니메이션'을 개별 부여할 것.
7. Constraint (제약 사항)
무조건 HTML, CSS, JavaScript가 한 개의 파일 안에 담긴 단일
.html파일로 완성할 것.외부 이미지 소스 주소(URL)를 절대 사용하지 말고, 아이콘 및 시각적 장치는 Tailwind CSS 클래스, 자체 SVG 또는 이모지(🎉, 🏆, ☀️)로 대체할 것.
