* 목차 *

2026년 4월 13일 월요일

[AI 활용 교육] 초등학교 3학년 수학 'cm와 mm' 변환 연습 웹앱 만들기 (COSTAR 프롬프트 공유)

[AI 활용 교육] 초등학교 3학년 수학 'cm와 mm' 변환 연습 웹앱 만들기 (COSTAR 프롬프트 공유)

안녕하세요! 오늘은 생성형 AI(챗GPT, 제미나이 등)를 활용해 우리 아이들을 위한 맞춤형 수학 연습 웹앱을 직접 만드는 방법을 소개합니다.

초등학교 3학년 1학기 수학 시간에 배우는 '길이와 시간 (cm와 mm의 관계)'는 아이들이 처음으로 단위 변환의 개념을 익히는 중요한 단원인데요. 아이들이 스마트폰이나 태블릿으로 재미있게 복습하고, 틀린 문제는 친절한 해설을 통해 다시 배울 수 있는 웹앱을 AI 프롬프트 하나로 뚝딱 만들어 보았습니다.

🌟 완성된 웹앱 먼저 보기

복잡한 코딩 없이 AI가 완성해 준 단원 평가 웹앱은 아래 링크에서 직접 확인해 보실 수 있습니다.
👉 cm 및 mm 단위 변환 연습 웹앱 실행해 보기

🛠️ 나만의 교육용 웹앱을 만드는 'COSTAR' 프롬프트

이 웹앱은 AI에게 COSTAR 프롬프트 기법을 사용하여 지시한 결과물입니다. 아래 프롬프트를 복사해서 여러분의 필요에 맞게 학년이나 단원을 자유롭게 수정해 보세요!

💡 COSTAR 프롬프트란? Context(배경), Objective(목표), Style(스타일), Tone(어조), Audience(대상), Response(응답 형식)의 앞 글자를 딴 프롬프트 작성 공식으로, AI에게 명확하고 구체적인 결과물을 얻어내는 데 효과적인 방법론입니다.

👇 [아래 영역을 복사해서 AI에게 입력해 보세요] 👇

1. Context (배경)

  • 학생들이 특정 수학 개념을 학습한 후 스스로 연습할 수 있는 디지털 도구를 만들려고 합니다.

  • 현재 학습 주제는 [3학년 1학기 '길이와 시간' - cm와 mm의 관계]입니다.

2. Objective (목표)

  • 학생들이 학습한 개념을 무작위 문제 풀이를 통해 복습할 수 있게 합니다.

  • 즉각적인 피드백(오답 풀이)을 받을 수 있는 '단일 파일(Single File) HTML 웹앱'을 생성하는 것이 목표입니다.

3. Style (스타일)

  • 디자인: 초등학생의 눈높이에 맞춘 밝고 친절한 UI (Tailwind CSS 활용)

  • 톤앤매너: 격려하는 말투, 직관적인 아이콘 사용, 가독성이 좋은 폰트 크기

  • 피드백: 정답일 때는 축하 메시지, 오답일 때는 학습 원리를 차근차근 설명하는 교육적 접근

4. Tone (어조)

  • 친절하고 다정한 선생님 같은 어조를 유지해 주세요.

  • "정말 대단해요!", "원리를 다시 살펴볼까요?" 등 긍정적인 강화 표현을 적극적으로 사용해 주세요.

5. Audience (대상)

  • 주요 사용자: 초등학교 3학년 학생들

  • 특징: 복잡한 설정 없이 바로 시작할 수 있어야 하며, 모바일 및 태블릿의 터치 입력이 쉬워야 합니다.

6. Response (응답 형식 및 요구사항) 반드시 아래의 기술적, 내용적 조건을 포함하여 단일 HTML 파일을 생성하세요.

[기술적 요구사항]

  • Single File: 모든 HTML, CSS(Tailwind), JavaScript를 하나의 파일에 포함할 것.

  • Dynamic Content: '다시 풀기' 클릭 시 JavaScript로 10문제를 무작위 생성할 것 (중복 최소화).

  • Responsive: PC, 태블릿, 스마트폰 화면에서 모두 잘 보이도록 반응형으로 제작할 것.

  • No External Assets: 외부 이미지 파일 대신 이모지(Emoji)나 인라인 SVG를 사용할 것.

[기능적 요구사항]

  • 문제 구성: [cm/mm ➡️ mm] 변환과 [mm ➡️ cm/mm] 변환을 5:5 비율로 섞어서 출제.

  • 진행 표시: 상단에 진행 표시줄(Progress Bar) 노출.

  • 채점 및 결과: 최종 점수를 시각적으로 표시할 것.

  • 오답 풀이 세션: 틀린 문제에 대해 [1 cm = 10 mm]와 같은 핵심 원리를 적용한 상세 설명 제공.

  • 다시 풀기: 데이터 초기화 및 새로운 문제 세트 생성 기능 포함.

[입력 데이터 (가변)]

  • 학년/단원: 3학년 1학기 3단원 '길이와 시간'

  • 핵심 원리: 1 cm = 10 mm

  • 수치 범위: 1 ~ 30 사이의 자연수

선생님이나 학부모님들께서 이 프롬프트의 '입력 데이터' 부분만 수정하시면, 코딩을 전혀 몰라도 우리 아이를 위한 훌륭한 맞춤형 학습 도구를 무한대로 만드실 수 있습니다. 오늘 당장 AI와 함께 우리 아이만의 웹앱을 만들어 보는 것은 어떨까요?