난산증 보조: 두 자리 수 - 한 자리 수 받아내림 뺄셈 학습 앱 생성 프롬프트

 

난산증 보조: 받아내림 뺄셈 학습 앱 생성 프롬프트

https://gemini.google.com/share/1b90a0903a98

1. Context (배경)

나는 '두 자리 수 - 한 자리 수'의 뺄셈에서 받아내림(내림) 개념을 어려워하는 초등학교 3학년 난산증 학생을 돕고 싶어. 이 학생은 십의 자리에서 빌려온다는 추상적인 개념을 이해하기 힘들어하므로, '묶음 상자를 뜯어서 낱개로 만드는 과정'을 시각적으로 보여줘야 해.

2. Objective (목표)

학생이 직접 10개들이 묶음을 해체하고, 사과를 하나씩 버리며 남은 개수를 확인하는 단일 HTML 파일 웹앱을 제작해줘.

3. Style (스타일)

• 디자인: 따뜻하고 부드러운 오렌지/옐로우 톤 UI. 아이들의 시력을 보호하고 집중력을 높이는 깔끔한 레이아웃.

• 기술 스택: Tailwind CSS (UI), Vanilla JavaScript (Drag & Drop 및 상태 관리).

4. Tone (어조)

• 사용자 경험: 아이가 어려워하지 않도록 단계별로 친절하게 안내하는 어조.

• 피드백: 사과를 버릴 때마다 남은 개수를 알려주며 성취감을 느끼게 함.

5. Audience (청중)

• 주 사용층: 숫자의 크기 비교와 받아내림 원리 이해에 도움이 필요한 학생 및 특수교육 학부모/교사.

• UI 고려사항: 드래그 영역이 충분히 넓어야 하며, 버튼은 직관적이고 커야 함.

6. Response (핵심 요구사항)

• 문제 생성:

  • (11~18) 사이의 숫자에서 (일의 자리보다 큰 한 자리 수)를 빼는, 반드시 받아내림이 필요한 문제를 무작위 생성.

• 시각적 조작 및 로직:

  • 묶음 상자: 10개 묶음은 처음에는 드래그할 수 없으며, 클릭하여 '해체(Unpack)'해야만 낱개 사과로 변하고 드래그가 가능해짐.

  • 낱개 상자: 처음부터 있던 낱개 사과들을 보여줌.

  • 드래그 앤 드롭: 사과를 화면 하단의 '휴지통'이나 '버리는 구역'으로 옮기면 삭제됨.

• 진행 단계:

  • 1단계: 문제 확인.

  • 2단계: 낱개만으로 뺄 수 없음을 인지하고 10개 묶음 클릭하여 해체.

  • 3단계: 목표 숫자만큼 사과를 드래그해서 버리기.

  • 4단계: '정답 확인' 버튼을 눌러 남은 사과 개수와 수식의 결과 비교.

• 호환성: 마우스 드래그와 모바일 터치(Touch Events)를 모두 완벽히 지원.

7. Constraint (제약 사항)

• 외부 이미지 파일 없이 이모지(🍎, 🗑️)나 SVG만 사용하여 단일 파일로 구성할 것.

• alert() 대신 화면 내 텍스트 메시지 영역(Message Box)을 활용할 것.

• 드래그 중인 사과는 다른 요소보다 위에 보이도록 z-index를 관리할 것.