[에듀테크] 구구단 패턴 암기는 그만! 초등 3학년 무한 나눗셈 학습기 웹앱 만들기 (ft. COSTAR 프롬프트)
교실에서 아이들과 수학 3학년 1학기 4단원 '나눗셈'을 시작할 때면 늘 비슷한 고민이 생깁니다. 구구단의 역연산 개념을 처음 접하는 아주 중요한 시기인데, 시중의 고정된 학습지 문항만 반복해서 풀다 보면 어느새 진정한 연산이 아니라 문제의 '패턴'만 외워버리는 경우가 많기 때문입니다.
요즘 교실 혁명은 정교한 프롬프트에서 시작된다는 말이 있죠. 학생들이 매일 완전히 새로운 문제로 완전 학습을 달성할 수 있도록, 2~9단 범위의 무작위 나눗셈 수식을 무제한 생성하는 웹앱을 기획해 보았습니다.
제가 AI에게 웹앱 개발을 지시할 때 사용한 COSTAR 프롬프트 전문과 설계 구조를 블로그에 공유합니다. 학급에서 바로 활용할 수 있는 개별화 학습 도구가 필요하셨던 분들께 도움이 되길 바랍니다!
💡 COSTAR 프롬프트 설계서
AI가 단번에 완벽한 결과물을 낼 수 있도록, COSTAR 프롬프트 프레임워크에 맞춰 구체적으로 지시했습니다.
1. Context (배경: 왜 필요한가?)
핵심 문제: 고정된 문항 세트는 학생들의 패턴 암기를 유발하여 진정한 연산 훈련을 방해합니다.
솔루션: 2~9단 곱셈구구 범위를 조합하여 무작위로 수식을 생성하는 도구를 통해 매일 색다른 수학 탐험을 제공합니다.
2. Objective (목표: 무엇을 만들 것인가?)
중복 없는 무작위 10문항: 시작할 때마다 $A \div B = C$ (단, $B, C \in [2, 9]$ 이며 $A = B \times C$) 조건에 맞는 새로운 수식을 생성합니다.
집중력 UP, 피로도 DOWN: 한 화면에 한 문제만 보여주어 학습 피로도를 최소화합니다.
실시간 내비게이션 동기화: 1~10번 이동 노드를 만들어 푼 문제와 안 푼 문제, 채점 후 정오답 상태를 한눈에 볼 수 있게 합니다.
고품질 해설 제공: 교사가 옆에서 알려주는 것처럼, 몫에 대응하는 나누기 이모지(●) 시각 자료와 상세한 힌트를 동적으로 제공합니다.
3. Style & Tone (디자인과 어조: 어떤 느낌으로?)
UI/UX 디자인: 아이들의 눈 피로를 덜어주는 산뜻한 민트와 테알(Teal) 컬러를 메인으로 하고, 둥근 모서리와 부드러운 그림자를 사용해 따뜻하고 안전한 느낌을 주었습니다.
단일 파일 구성: 복잡한 설치 없이 브라우저만 있으면 어디서든 열리도록 HTML, CSS(Tailwind CSS), JS를
index.html파일 하나에 묶었습니다.따뜻한 격려 중심: '시험'이나 '채점'이라는 딱딱한 말 대신 '탐험'이라는 친근한 단어를 쓰고, 점수에 따라 맞춤형 칭찬 문구와 💮 스탬프 이펙트가 나오도록 했습니다.
100점: "퍼펙트! 정말 최고예요! 나눗셈의 완벽한 박사이시군요!"
80점 이상: "참 잘했어요! 아쉽게 놓친 부분만 다시 읽어 보아요."
4. Audience (대상: 누가 사용할 것인가?)
주 사용층: 나눗셈 개념과 계산력 향상이 필요한 초등학교 3학년 학생
활용 대상: 스마트 기기를 활용해 형성평가나 개별화 학습을 진행하는 초등학교 교사, 자녀의 기초 연산을 돕는 학부모
⚙️ Response: 핵심 구조적 설계 명세
단일 페이지 애플리케이션(SPA)으로 부드럽게 작동하도록 아래와 같은 흐름으로 로직을 설계했습니다.
[ 인트로 화면 (홈) ]
│ (탐험 시작! ▶ 10문제 무작위 빌드)
▼
[ 학습 진행 화면 (SPA) ] ──────► 상단 네비게이션 도트 맵 실시간 갱신
│ - 활성 문제: 테알(Teal) 하이라이트
├─ 다음 문제 / 이전 문제 - 정답 입력 완료: 연한 하늘색
│ - 미입력 문항: 흰색
▼
[ 채점 및 평가 엔진 실행 ] ────► 정오답 시각 피드백
│ - 정답: 초록색 도트 / 오답: 빨간색 도트
▼
[ 결과 보고서 화면 노출 ] ────► 점수별 스탬프(💮) 및 맞춤형 피드백
- 오답 문항 클릭 시 개별 해설로 순간 이동
특히 generateRandomQuestions() 함수를 통해 나누는 수와 몫을 난수로 완벽히 조합하고, 초기화 시 브라우저 내의 기입 상태를 완벽히 청소하는 세밀한 세팅을 추가해 앱의 안정성을 높였습니다.
🔗 나눗셈 학습기 웹앱 바로가기
프롬프트를 통해 실제 구현된 웹앱의 작동 모습이 궁금하시다면 아래 링크를 클릭해 주세요. 웹 브라우저에서 바로 실행되므로 스마트 기기를 활용한 형성평가나 개별화 학습 시간에 우리 반 아이들에게 바로 적용해 보실 수 있습니다!
