'두 자리 수 덧셈 웹앱' CO-STAR 프롬프트
Context (배경 및 환경 설정)
초등학생들이 두 자리 수 덧셈과 받아올림(Carry) 자릿수 개념을 원활하게 이해할 수 있도록 돕는 개별 교구 웹앱이 필요해.
이 앱은 별도의 외부 라이브러리 설치나 분할 파일 없이, HTML / CSS / JS가 하나로 통합된 단일 웹 페이지 (.html) 파일로 동작해야 해.
Objective (수행해야 할 목표와 기능 상세)
기능 1: 총 10문제를 출제하며, 정확히 '5문제'는 일의 자리에서 받아올림이 있는 연산이고, 나머지 '5문제'는 받아올림이 없어야 해. (두 종류를 균등하게 생성 후 랜덤 셔플) 덧셈 결과값은 100을 넘지 않게 제어해줘.
기능 2: 초등학교 수학 교과서 규격의 완벽한 '세로셈' 레이아웃을 제공해줘. 백의 자리, 십의 자리, 일의 자리 열이 수직으로 한 치의 오차도 없이 완벽하게 정렬되도록 CSS Grid 또는 고정 너비를 설정해줘.
기능 3: 더하기 기호(+)는 아랫줄 숫자의 왼쪽(백의 자리 열)에 오도록 정밀 배치해줘.
기능 4: 사용자가 직접 입력할 수 있는 실제 입력창(
<input>) 3개를 결과선 아래 백/십/일의 자리에 각각 배치해줘.기능 5: 가상 키패드는 절대 만들지 마. 기기 고유의 숫자 패드가 뜨도록
<input inputmode="numeric">을 적용해줘.기능 6 (자릿수 UX 시나리오):
문제 시작 시 자동으로 가장 우측의 '일의 자리' 입력창에 자동 포커스(autofocus)되게 해줘.
일의 자리에 숫자를 쓰면 자동으로 왼쪽의 '십의 자리'로 포커스를 넘기고, 십의 자리에 쓰면 자동으로 '백의 자리'로 포커스를 넘겨줘.
사용자가 마우스나 터치로 특정 자릿수를 클릭하여 개별 수정할 수 있어야 해.
빈 칸에서 Backspace를 누르면 자동으로 우측(이전 단계) 자릿수로 넘어가며 기존 글자를 지우게 해줘. 좌우 방향키로도 자릿수 칸 이동이 가능해야 해.
숫자를 다 채운 상태에서 Enter를 누르면 정답이 즉시 제출되어야 해.
기능 7: 정답 제출 시 Web Audio API를 사용해 맑은 자체 효과음(딩동댕/땡)을 재생하고, 정답일 땐 confetti 폭죽 효과를 터뜨려줘. (외부 사운드 주소 연동 금지)
기능 8: 한 문제가 끝날 때마다 '상세 단계별 해설' 화면을 반드시 보여줘. 해설은 1) 일의 자리 합산 및 받아올림 설명, 2) 십의 자리 합산 설명, 3) 최종 정답 시각화로 구성되어야 하며, 해설 화면에서 Enter를 누르면 다음 문제로 자동 전환되게 해줘.
Style (디자인 및 인터페이스 스타일)
Tailwind CSS를 사용해 현대적이고 사랑스러운 파스텔톤 어린이 친화적 디자인(둥글둥글한 모서리, 부드러운 그림자 효과, 귀여운 이모지 적극 활용)을 입혀줘.
모든 숫자 입력 상자는 연산 상태에 따라 테두리 색상(포커스 피드백)이 부드럽게 강조되도록 꾸며줘.
Tone (전체적인 어조)
친절하고, 격려를 아끼지 않으며, 초등학교 저학년 어린이들의 학습 동기를 자극할 수 있는 긍정적인 메시지 톤앤매너를 유지해줘.
Audience (타겟 고객군)
이 앱을 주로 사용하는 대상은 받아올림 개념을 처음 배우는 만 7~9세 초등학교 저학년 어린이들이야. 따라서 조작 피로도가 전혀 없어야 하고, 레이아웃에 흔들림이 없어야 해.
Response (최종 출력 양식)
모든 로직, 스타일, 오디오 처리, 그리고 정답 피드백 시스템이 하나의 파일 안에서 빈틈없이 작동하는 단일 완성형 HTML 코드만 출력해줘.
