난산증 보조 교육용 웹앱 생성 프롬프트

https://gemini.google.com/share/57d1533d7579

1. Context (배경)

나는 받아올림이 있는 한 자리 수 덧셈에 어려움을 겪는 초등학교 3학년 난산증(Dyscalculia) 학생을 돕고 싶어. 이 학생은 추상적인 숫자만으로는 계산 원리를 이해하기 어려워하므로, 시각적이고 구체적인 조작물(사과)을 통해 '10개 묶음 만들기' 원리를 익혀야 해.

2. Objective (목표)

학생이 직접 사과를 드래그 앤 드랍으로 옮기며 10을 만드는 과정을 체험할 수 있는 인터랙티브한 단일 HTML 파일 웹앱을 제작해줘.

3. Style (스타일)

• 디자인: 초등학생 수준에 맞게 밝고 친근한 분위기 (파스텔톤, 둥근 모서리, 큰 폰트).

• 기술 스택: Tailwind CSS를 사용한 현대적인 UI, 바닐라 자바스크립트로 구현된 드래그 앤 드랍 로직.

4. Tone (어조)

• 사용자 경험: 아이가 성공할 때마다 칭찬하는 긍정적이고 격려하는 어조.

• 안내: 명확하고 쉬운 한국어 설명 제공.

5. Audience (청중)

• 주 사용층: 난산증이 있는 초등학교 저학년 학생 및 특수 교육 교사.

• UI 고려사항: 복잡한 메뉴 없이 한눈에 들어오는 직관적인 구조.

6. Response (핵심 요구사항)

• 문제 생성: 합이 11~18 사이인 (받아올림이 있는) 한 자리 수 덧셈 문제를 무작위로 생성.

• 시각적 조작:

  • 첫 번째 상자(10칸)와 두 번째 상자를 배치.

  • 두 번째 상자의 사과를 드래그하여 첫 번째 상자의 빈 슬롯에 '정확히' 놓았을 때만 이동 성공.

  • 엉뚱한 곳에 놓으면 원래 자리로 돌아가는 스냅 기능.

• 학습 로직:

  • 10칸이 모두 차면 "10개 한 묶음이 완성되었어요!"라는 메시지와 함께 나머지 낱개를 확인하도록 유도.

  • '정답 확인' 버튼을 눌러야 최종 결과 숫자가 노출되도록 구현.

• 호환성: 모바일/태블릿 터치 조작과 PC 마우스 조작을 모두 지원.

7. Constraint (제약 사항)

• 모든 코드는 외부 라이브러리(CDN 제외) 없이 단 하나의 .html 파일에 포함될 것.

• alert() 창을 사용하지 말고 화면 내 메시지 영역을 활용할 것.

• 접근성을 위해 사과 이미지는 SVG나 Emoji(🍎)를 사용할 것.