[프롬프트 공유] 난산증 아동을 위한 맞춤형 수학 웹앱, AI로 뚝딱 만들기
안녕하세요! 교실에서 아이들을 만나다 보면, 유독 숫자를 두려워하고 연산을 힘들어하는 친구들을 보게 됩니다. 특히 '난산증(Dyscalculia)'을 겪는 아이들에게는 단순한 반복 학습이나 문제 풀이보다, 숫자의 크기를 눈으로 확인하는 시각적 직관과 끊임없는 격려가 훨씬 더 중요하죠.
오늘은 AI를 활용해 이런 아이들을 도울 수 있는 '맞춤형 덧셈 웹앱' 제작용 COSTAR 프롬프트를 공유해 보려고 합니다.
복잡한 코딩 지식이 없어도, 이 프롬프트를 챗GPT나 클로드 같은 AI에 복사해 붙여넣기만 하면 브라우저에서 즉시 실행되는 훌륭한 교육용 소프트웨어 코드를 얻으실 수 있습니다. 특수학급 선생님이나 학부모님, 그리고 에듀테크에 관심 있는 모든 분들께 유용한 자료가 되길 바랍니다.
💡 왜 이 프롬프트가 특별할까요?
단순히 "수학 게임을 만들어줘"라고 하는 대신, COSTAR 프롬프트 프레임워크를 사용하여 AI에게 명확한 역할과 제약 사항을 부여했습니다.
시각적 보조 수단: 수 모형(Base-10 Blocks)을 색상별로 구현해 양적 크기를 직관적으로 인지하도록 했습니다.
세심한 난이도 조절: 처음엔 받아올림이 없는 쉬운 문제로 성취감을 주고, 점진적으로 난이도를 높입니다.
따뜻한 피드백: "틀렸어"라는 말 대신, 우주 테마에 맞춘 긍정적인 은유(예: "우주선 연료가 조금 더 필요해!")를 사용하여 아이들의 수학 불안도를 낮춥니다.
📋 복사해서 바로 쓰는 COSTAR 프롬프트 템플릿
아래의 내용을 그대로 복사하여 AI 채팅창에 입력해 보세요. 필요에 따라 대상 학년이나 테마를 자유롭게 수정하셔도 좋습니다.
[Context]
대상 사용자는 초등학교 3학년 학생으로, 수학 학습 장애인 '난산증(Dyscalculia)'을 겪고 있습니다.
이 학생은 특히 '100의 자리 세 자릿수 덧셈'에서 큰 어려움을 겪고 있으며, 숫자의 크기를 직관적으로 인지하지 못하고 자릿수를 맞춰 더하는 세로셈 개념이 약합니다.
학생이 숫자에 대한 공포를 줄이고, 수의 양적 크기(수량)를 시각적으로 이해하며, 성취감을 느낄 수 있도록 돕는 연산 보조 소프트웨어가 필요합니다.
[Objective] 다음 기능들을 완벽하게 갖춘 인터랙티브 교육용 단일 파일 웹앱(HTML/JS)을 제작해 주세요.
세션당 총 10문제를 제공하며, 매 세션마다 무작위로 새로운 문제가 생성되어야 합니다.
난이도 조절:
1~4번 문제: 받아올림이 전혀 없는 기초 100의 자리 덧셈 (예: 123 + 245)
5~10번 문제: 일의 자리 혹은 십의 자리 중 '단 한 곳에서만' 받아올림이 발생하는 점진적 난이도 덧셈
핵심 학습 보조 도구 (수 모형 시각화):
문제로 출제된 두 숫자를 100의 판, 10의 막대, 1의 낱개 블록 모양(Base-10 Blocks)으로 시각화하여 보여줍니다.
각 블록은 자릿수별로 명확히 다른 색상으로 구분되어야 합니다. (예: 100=파랑, 10=초록, 1=빨강)
세로셈 입력 가이드:
세로셈 판을 제공하고, 자릿수(백/십/일의 자리)를 세로선과 블록 색상에 맞춰 줄정렬하여 보여줍니다.
사용자가 백/십/일의 자리 입력 칸에 각각 한 자릿수씩 정답을 입력할 수 있도록 독립된 입력 창을 제공합니다.
숫자가 입력되면 일의 자리 -> 십의 자리 -> 백의 자리 순서로 포커스가 자연스럽게 이동하도록 돕습니다.
게이밍 및 피드백 요소:
친근한 가이드 캐릭터(예: 우주 요정 큐비)가 등장하여 따뜻하고 구체적인 피드백을 줍니다.
정답 시에는 축하 효과음과 이펙트, 오답 시에는 틀린 자릿수 블록을 다시 세어보라는 구체적인 힌트(예: "빨간색 1의 자리 블록을 다시 세어볼까?")를 제공합니다.
2회 이상 연속 오답 시에는 아이의 좌절을 막기 위해 정답과 해설(모형 매칭 설명)을 친절하게 보여줍니다.
진행 상황바(Progress Bar)와 최종 결과 카드(미션 완료 및 맞춘 개수)를 구현해 주세요.
[Style]
디자인 테마: 아이들이 몰입하기 좋은 '우주 모험' 또는 '마법 판타지' 테마 (어두운 배경에 야광/네온 컬러 포인트 추천)
UI/UX: 아주 직관적이고 여백이 넓어야 합니다. 텍스트 크기는 크게 하고 눈이 편안한 둥근 폰트 스타일을 적용하세요.
스타일 라이브러리: 외부 CSS 파일 없이 작동할 수 있도록 Tailwind CSS CDN을 사용하고, 아이콘은 Font Awesome CDN을 활용하세요.
기술 제한: HTML, CSS, JavaScript가 오직 하나의 파일(
index.html) 안에 완벽히 통합되어 있어야 합니다. 외부 자바스크립트 모듈이나 별도의 CSS 파일은 생성하지 마세요.[Tone]
어조: 초등학교 3학년 아동에게 맞춘 극도로 친근하고, 다정하며, 끊임없이 격려하는 어조.
"틀렸어" 대신 "다시 한번 세어보자!", "우주선 연료가 조금 더 필요해!" 같은 긍정적이고 은유적인 표현을 사용해 주세요.
[Audience]
주 사용자는 수학에 극심한 불안감과 난산증을 겪는 10세 어린이입니다.
보조 사용자는 치료 놀이를 지도하는 특수학급 교사 또는 학부모입니다. 따라서 복잡한 설정 없이 브라우저에서 '더블클릭'만으로 실행 가능해야 합니다.
[Response]
완성도 높고 즉시 브라우저에서 실행 가능한 한 장의 HTML 코드로 응답해 주세요.
코드 내 가이드 텍스트와 모든 다이얼로그, 피드백 메시지는 한글로 정성스럽게 작성해 주세요.
코드 내부에는 각 연산 제어 로직과 난산증 보조 기법에 대한 주석을 상세하게 달아주세요.
