초등 3학년 수학 완벽 대비! AI로 '시간 단위 변환 퀴즈 웹앱' 만들기 (COSTAR 프롬프트 공개)
안녕하세요! 오늘은 초등학교 3학년 자녀를 둔 학부모님, 혹은 초등학생을 가르치시는 선생님들을 위해 아주 유용한 팁을 가져왔습니다.
초등학교 3학년 1학기 수학 '길이와 시간' 단원에서 아이들이 처음으로 '초(second)'의 개념을 배우고, 1분 = 60초라는 60진법을 익히게 되는데요. 10진법에만 익숙하던 아이들에게는 이 변환 과정이 생각보다 까다롭게 느껴질 수 있습니다.
그래서 준비했습니다! 아이들이 교과서 문제를 무한으로, 그것도 재미있게 연습할 수 있는 '시간 단위 변환 퀴즈 웹앱'을 AI를 통해 만들어 보았어요.
먼저 완성된 결과물부터 확인해 볼까요?
🚀 완성된 퀴즈 웹앱 플레이해보기
👉
💡 어떻게 만들었을까요? (COSTAR 프롬프트)
이 웹앱은 생성형 AI에게 COSTAR 프롬프트 기법을 활용하여 명령을 내려 단 한 번에 만들어낸 결과물입니다. 제가 AI에게 입력한 프롬프트 전문을 공유해 드릴 테니, 여러분도 이 양식을 활용해 다양한 교육용 앱을 만들어 보세요!
1. 🎯 Context (배경)
초등학교 3학년 '길이와 시간' 단원에서는 시간의 단위인 '초'를 배우고, 1분=60초의 관계를 이해해야 합니다. 학생들은 분 단위를 초로, 초 단위를 분과 초로 변환하는 60진법 계산에 익숙해질 필요가 있습니다.
2. 🏁 Objective (목표)
교과서(73쪽 유형)의 문제를 무한히 연습할 수 있는 인터랙티브 퀴즈 웹앱을 제작합니다.
예시 문제 1: 1분 40초 = ( )초
예시 문제 2: 130초 = ( )분 ( )초
3. 🎨 Style (스타일)
비주얼: 따뜻한 오렌지 계열(#f97316)의 테마를 사용하여 수학 과목에 대한 친근감을 높여주세요.
UI (사용자 환경): Tailwind CSS를 활용하여 큼직한 숫자 입력창, 진행 바(Progress Bar), 부드러운 애니메이션 효과를 적용해 주세요.
구성: 단일 HTML 파일로 모든 로직을 포함하여 바로 실행할 수 있게 만들어주세요.
4. 🗣️ Tone (어조)
어린이 눈높이에 맞춘 다정한 응원 멘트("할 수 있어요!", "시간 박사님!")를 사용해 주세요.
오답 시에도 정답과 비교하며 원리를 친절하게 설명하는 다정한 어조를 유지해 주세요.
5. 👥 Audience (대상)
초등학교 3학년 학생
60진법 시간 계산 연습이 필요한 기초 학습자
6. 💻 Response (응답 형식 및 기술 요구사항)
하나의 HTML 파일 안에 모든 코드(HTML, CSS, JavaScript)를 작성해 주세요. 핵심 기능은 다음과 같습니다.
랜덤 문제 생성 (총 10문제)
유형 A (분/초 → 초): 1~3분 사이의 랜덤 '분'과 0~50초 사이의 10단위 '초'를 생성하여 합산하는 문제
유형 B (초 → 분/초): 61~210초 사이의 랜덤 '초'를 생성하여 60으로 나눈 몫과 나머지를 계산하는 문제
인터랙티브 UI
현재 진행 상황을 알려주는 상단 프로그레스 바 표시
문제 유형에 따라 입력 칸 개수 유동적 변화 (1개 또는 2개)
'Enter' 키 지원으로 마우스 없이 빠른 문제 풀이 가능
결과 및 피드백 기능
10문제 풀이 완료 후 최종 점수 공개
오답 노트 기능: 틀린 문제의 '내가 쓴 답'과 '실제 정답'을 한눈에 비교할 수 있는 리스트 제공
점수대별 맞춤형 격려 메시지 출력 (0~3점 / 4~7점 / 8~9점 / 10점)
접근성
스마트폰, 태블릿 등 모바일에서도 잘 보이도록 반응형 레이아웃 적용
터치 입력이 쉽도록 입력창 크기를 충분히 크게 확보
✍️ 마무리하며
이렇게 명확한 조건과 구조(COSTAR)를 갖춰 AI에게 요청하면, 코딩을 전혀 모르는 사람도 훌륭한 교육용 도구를 만들어낼 수 있습니다. 아이들이 지루한 문제집 대신, 통통 튀는 디자인의 웹앱으로 수학을 즐겁게 게임처럼 배울 수 있도록 지금 바로 활용해 보세요!
