[AI 교육 활용] 초등학교 3학년 수학 '단위 변환(km ↔ m)' 웹앱 만들기 프롬프트
안녕하세요! 오늘은 초등학교 3학년 친구들이 많이 헷갈려하는 길이 단위 변환(km와 m)을 재미있게 연습할 수 있는 웹앱 제작 프롬프트를 공유합니다.
최근 유용하게 쓰이는 프롬프트 작성 기법인 COSTAR 프레임워크를 활용하여, AI에게 코딩을 맡길 수 있도록 구조화했습니다. 선생님이나 학부모님들께서 아이들을 위한 맞춤형 디지털 학습지를 만들 때 참고해 보세요!
🔗 완성된 웹앱(프롬프트 결과물) 미리보기
Gemini에서 완성된 결과 확인하기
1. Context (배경)
초등학교 3학년 학생들은 "1000m는 1km라고 쓰고, 1킬로미터라고 읽는다"는 개념을 학습합니다. 이 개념을 단단하게 다지기 위해, 학생들이 스스로 문제를 풀고 즉각적인 피드백을 받을 수 있는 상호작용형 '디지털 학습지'가 필요했습니다.
2. Objective (목표)
1km = 1000m의 관계를 활용한 단위 변환 문제를 무작위로 생성하고, 자동 채점 및 상세한 오답 풀이를 제공하는 단일 HTML 웹 애플리케이션을 제작하는 것이 목표입니다.
3. Style (스타일)
디자인: 초등학생이 친근감을 느낄 수 있도록 '거리', '길', '자연'을 상징하는 녹색(Green) 계열의 테마를 사용합니다. (Tailwind CSS 활용)
시각 요소: 딱딱한 텍스트 위주의 구성보다는 이모지(🌳, 📍, 🏃)를 적절히 배치하여 학습 동기를 부여합니다.
가독성: 저학년 학생들도 스마트폰이나 태블릿에서 쉽게 터치하고 조작할 수 있도록 큰 글자 크기와 넓은 입력창을 적용합니다.
4. Tone (어조)
"함께 풀어봐요!", "정말 멋져요!"와 같은 친절하고 격려하는 어조를 사용합니다.
오답 시에는 '틀렸다'는 부정적인 표현 대신, "다시 한번 원리를 살펴볼까요?"와 같이 부드럽게 재도전을 유도합니다.
5. Audience (대상)
주요 사용자: 초등학교 3학년 학생
특징 고려: 1000 단위의 큰 수 계산에 막 익숙해지는 단계입니다. 따라서 해설을 제공할 때 자릿수 구분을 명확하게 시각화해 주어야 합니다.
6. Response (응답 형식 및 요구사항)
AI가 코드를 생성할 때 반드시 지켜야 할 기술적, 교육적 요구사항입니다.
💻 [기술적 세부사항]
Single File: 모든 HTML, CSS, JS 코드를 하나의
.html파일 안에 포함하며, 외부 라이브러리는 Tailwind CSS(CDN)만 허용합니다.Dynamic Quiz: '다시 풀기' 버튼을 클릭할 때마다 1~20 사이의 무작위 숫자를 조합하여 10문제를 새롭게 생성합니다.
Progress Tracking: 화면 상단에 현재 몇 번 문제를 풀고 있는지 보여주는 프로그레스 바(Progress Bar)를 구현합니다.
📚 [학습 콘텐츠 요구사항]
문제 유형 (5:5 비율로 혼합):
km와m를m로 바꾸기 (예: 1km 200m → 1200m)m를km와m로 바꾸기 (예: 2500m → 2km 500m)
오답 풀이 로직:
틀린 문제에 대해서만 상세한 설명을 노출합니다.
설명란에는 반드시 "1000m가 모여 1km가 된다"는 핵심 원리 문장을 포함합니다.
결과 화면: 최종 점수에 따라 차별화된 격려 메시지를 출력합니다.
(예: 10점 만점 → "거리 박사님!", 7점 이하 → "조금 더 힘내요!" 등)
이 프롬프트를 활용해 여러분만의 멋진 교육용 미니 앱을 만들어보시는 건 어떨까요?
