구구단 딸기 모험 (CO-STAR 프롬프트)

1. Context (배경)

학습 대상: 구구단 2단에서 9단까지의 기초 암기와 곱셈의 기본 원리인 "동수누가(같은 수 여러 번 더하기)"를 익히고 있는 초등학생 어린이
현상: 단순 주입식 암기는 구구단 뒤에 숨겨진 곱하기의 원리(묶음과 총합)를 이해하기 어렵게 만듦.
해결책: 곱셈의 개념인 $N1 \times N2$(바구니 $N1$개에 딸기 $N2$개씩)를 깔끔한 시각 자료로 화면에 즉시 보여주고, 어린이가 머릿속으로 계산하거나 눈으로 보면서 바로 정답을 입력할 수 있도록 구성함. (딸기를 일일이 터치해서 세는 번거로운 단계는 생략)

구구단 2단에서 9단($2 \le N1, N2 \le 9$) 범위의 10문제를 랜덤하게 중복 없이 생성하는 반응형 웹앱 제작.
어린이가 문제의 수식을 직관적으로 이해할 수 있도록 바구니(묶음)와 바구니 속 딸기(개수)의 이미지를 static(비대화형) 시각 자료로 즉시 렌더링.
처음부터 정답을 바로 입력할 수 있도록 하단 입력 인터페이스를 항상 활성화하며, 모바일 터치 조작이 원활하게 작동해야 함.

서체: 아동 친화적인 맑고 둥글둥글한 구글 'Gaegu' 손글씨 폰트를 적극 활용.
디자인 테마: 로즈 핑크(Rose Pink)와 옐로우(Warm Amber) 테마의 스케치북 북아트 아트 스타일.
정렬 및 레이아웃:
- 바구니들은 flex-wrap 혹은 grid를 활용해 화면 너비에 맞게 흐트러짐 없이 정돈되어 나열되어야 함.
- 바구니 내부의 딸기(🍓)들 역시 격자(Grid) 구조로 엉키지 않고 가독성 있게 배치될 것.

감성 피드백: "딩동댕! 아주 멋지게 해결했어! 🎉"와 같은 즉각적이고 밝은 피드백으로 어린이의 수학 효능감 극대화.
최종 환호: 10문제를 무사히 완주하면 커다란 🏆(왕관) 이모지와 함께 "친구야, 최고야!"라며 성취감을 크게 북돋아 주는 동적 팝업창 연출.

문제 생성 알고리즘:
- 구구단 2단~9단 범위에서 중복되지 않는 10문제 자동 엄선.
- 상단 진행도 표시(Dot 10개) 및 실시간 점수(Score) 대시보드 연동.
비개입형 시각 교구 기능:
- $N1 \times N2$ 수식이 주어지면, 화면에 바구니 $N1$개를 그리고 각 바구니마다 딸기 $N2$개를 정렬하여 배치할 것.
- 딸기는 사용자가 터치하여 지우는 동작 없이 고정된 시각적 참조(Scaffolding) 자료로만 제공됨.
입력 흐름:
- 문제 로드와 동시에 입력 박스(ans-input)에 자동 포커스 처리.
- 모바일 수월성을 위해 inputmode="numeric" 및 확인 버튼 구성.
채점 및 에러 핸들링:
- window.onload 이벤트를 포함하여 DOM 요소가 완벽히 로드된 후 스크립트가 로딩되도록 null 포인터 예외 원천 차단.
- 정답 시 녹색 스타일 적용 및 다음 문제 자동 로드, 오답 시 빨간색 흔들기(Shake) 효과 및 유도 힌트 텍스트 제공.