초등학교 3학년 수학 단위 변환(km ↔ m) 연습 웹앱 생성 COSTAR Prompt
https://gemini.google.com/share/29d31cadf7ec
1. Context (배경)
초등학교 3학년 학생들은 "1000 m는 1 km라고 쓰고, 1 킬로미터라고 읽는다"는 개념을 학습했습니다. 이 개념을 공고히 하기 위해 학생들이 스스로 문제를 풀고 즉각적인 피드백을 받을 수 있는 디지털 학습지가 필요합니다.
2. Objective (목표)
$1\text{ km} = 1000\text{ m}$의 관계를 활용한 단위 변환 문제를 무작위로 생성하고, 채점 및 상세한 오답 풀이를 제공하는 단일 HTML 웹 애플리케이션을 제작합니다.
3. Style (스타일)
디자인: 초등학생이 친근감을 느낄 수 있도록 '거리', '길', '자연'을 상징하는 녹색(Green) 계열의 테마를 사용합니다. (Tailwind CSS 활용)
시각 요소: 텍스트 위주의 구성보다는 이모지(🌳, 📍, 🏃)를 적절히 배치하여 학습 동기를 부여합니다.
가독성: 큰 글자 크기와 넓은 입력창을 통해 저학년 학생들도 쉽게 조작할 수 있도록 합니다.
4. Tone (어조)
친절하고 격려하는 어조 ("함께 풀어봐요!", "정말 멋져요!")를 사용합니다.
오답 시에는 틀렸다는 부정적인 표현 대신 "다시 한번 원리를 살펴볼까요?"와 같은 부드러운 유도 문구를 사용합니다.
5. Audience (대상)
주요 사용자: 초등학교 3학년 학생.
특징:
$1000$ 단위의 큰 수 계산에 익숙해지는 단계이므로, 설명에서 자릿수 구분을 명확히 해주어야 합니다.
6. Response (응답 형식 및 요구사항)
반드시 아래의 기술적 조건을 충족하는 단일 .html 파일 코드를 제공하세요.
[기술적 세부사항]
Single File: 모든 HTML/CSS/JS를 포함하며, 외부 라이브러리는 Tailwind CSS(CDN)만 허용합니다.
Dynamic Quiz: '다시 풀기' 버튼을 클릭할 때마다
$1 \sim 20$ 사이의 무작위 수치를 사용하여 10문제를 새로 생성합니다.Progress Tracking: 상단에 진행 상태를 보여주는 Progress Bar를 구현합니다.
[학습 콘텐츠 요구사항]
문제 유형: 다음 두 가지 유형을 5:5 비율로 섞어 배치합니다.
몇 km 몇 m를몇 m로 바꾸기 (예:$1\text{ km } 200\text{ m} \rightarrow 1200\text{ m}$ )몇 m를몇 km 몇 m로 바꾸기 (예:$2500\text{ m} \rightarrow 2\text{ km } 500\text{ m}$ )
오답 풀이 로직:
틀린 문제에 대해서만 상세 설명을 노출합니다.
설명에는 반드시 "$1000\text{ m}$가 모여 $1\text{ km}$가 된다"는 핵심 문장을 포함합니다.
결과 화면: 점수에 따라 "거리 박사님(10점)", "조금 더 힘내요(7점 이하)" 등 차별화된 격려 메시지를 출력합니다.
