AI로 하루 만에 만드는 초등 수학 교구: "구구단 딸기 모험" 웹앱 제작기 (프롬프트 공유)
안녕하세요! 오늘은 초등학생 아이들이 구구단의 원리를 시각적으로 자연스럽게 이해할 수 있도록 돕는 반응형 교육 웹앱, '구구단 딸기 모험'의 기획 및 개발 과정을 공유합니다.
복잡한 코딩 지식 없이도 생성형 AI(Gemini 등)를 활용해 단번에 완성도 높은 결과물을 도출해낼 수 있는 CO-STAR 프롬프트 작성 사례를 함께 살펴보겠습니다.
1. 단순 암기를 넘어 '원리'로 접근하는 구구단
초등학교 수학 과정에서 구구단은 종종 단순 주입식 암기로 이어지기 쉽습니다. 하지만 구구단의 진짜 핵심은 같은 수를 여러 번 더하는 '동수누가(同數累加)'의 개념과 묶음의 원리를 깨닫는 데 있습니다.
이번 프로젝트는 수학 수식을 만났을 때, 이를 '바구니(묶음) N1개에 각각 딸기(개수) N2개씩 들어있는 구조'로 화면에 즉시 시각화하여, 아이들이 눈으로 수량 감각을 확인하며 바로 정답을 입력할 수 있도록 설계했습니다. 딸기를 하나하나 터치하며 세는 번거로운 단계는 과감히 생략하고 직관적인 사고를 돕는 데 집중했습니다.
2. 완벽한 웹앱을 위한 'CO-STAR' 프롬프트 설계
AI에게 무작정 "구구단 앱 만들어줘"라고 요청하면 기획 의도와 맞지 않거나 모바일에서 화면이 깨지는 코드가 나오기 십상입니다. 이를 방지하기 위해 6가지 구조로 정교하게 작성한 프롬프트의 핵심 기획 사양은 다음과 같습니다.
Context (배경): 구구단 기초 암기와 동수누가 원리를 학습 중인 초등학생을 타겟으로 명확한 문제점과 해결책 제시.
Objective (목표): 2단~9단 범위의 무작위 10문제 생성, 비대화형(Static) 시각 자료 즉시 렌더링, 상시 활성화된 모바일 터치 인터페이스 구현.
Style (스타일): 아동 친화적인 구글 'Gaegu' 폰트 및 로즈 핑크(Rose Pink)·옐로우(Warm Amber) 테마의 스케치북 아트 스타일 적용.
Tone (어조): 성취감을 자극하는 즉각적이고 밝은 피드백("딩동댕! 아주 멋지게 해결했어!") 및 완주 시 왕관(🏆) 동적 팝업 연출.
Response (핵심 기능):
inputmode="numeric"을 통한 모바일 키보드 최적화 및window.onload이벤트를 사용한 Null 포인터 예외 원천 차단.Constraint (제약 사항): 외부 이미지 링크 없이 이모지(🍓, 🧺)와 Tailwind CSS만 사용하여 단 1개의 HTML 파일로 모든 로직 구현.
💡 개발 팁: 특히 DOM 요소가 완벽히 로드된 후 스크립트가 실행되도록 한 에러 핸들링과, 입력창 자동 포커스 처리는 모바일 UX를 획기적으로 높여주는 핵심 엔지니어링 조건입니다.
3. 프롬프트 원문 공유 (바로 복사해서 사용해 보세요!)
아래 프롬프트를 복사하여 AI(Gemini, ChatGPT 등)에 그대로 입력하시면, 별도의 서버나 이미지 호스팅 없이 브라우저에서 즉시 실행 가능한 나만의 구구단 웹앱 코드를 얻으실 수 있습니다.
[구구단 딸기 모험 CO-STAR 프롬프트]
1. Context (배경)
- 학습 대상: 구구단 2단에서 9단까지의 기초 암기와 곱셈의 기본 원리인 "동수누가(같은 수 여러 번 더하기)"를 익히고 있는 초등학생 어린이
- 현상: 단순 주입식 암기는 구구단 뒤에 숨겨진 곱하기의 원리(묶음과 총합)를 이해하기 어렵게 만듦.
- 해결책: 곱셈의 개념인 N1 * N2 (바구니 N1개에 딸기 N2개씩)를 깔끔한 시각 자료로 화면에 즉시 보여주고, 어린이가 머릿속으로 계산하거나 눈으로 보면서 바로 정답을 입력할 수 있도록 구성함. (딸기를 일일이 터치해서 세는 번거로운 단계는 생략)
2. Objective (목표)
- 구구단 2단에서 9단(2 <= N1, N2 <= 9) 범위의 10문제를 랜덤하게 중복 없이 생성하는 반응형 웹앱 제작.
- 어린이가 문제의 수식을 직관적으로 이해할 수 있도록 바구니(묶음)와 바구니 속 딸기(개수)의 이미지를 static(비대화형) 시각 자료로 즉시 렌더링.
- 처음부터 정답을 바로 입력할 수 있도록 하단 입력 인터페이스를 항상 활성화하며, 모바일 터치 조작이 원활하게 작동해야 함.
3. Style (스타일)
- 서체: 아동 친화적인 맑고 둥글둥글한 구글 'Gaegu' 손글씨 폰트를 적극 활용.
- 디자인 테마: 로즈 핑크(Rose Pink)와 옐로우(Warm Amber) 테마의 스케치북 북아트 아트 스타일.
- 정렬 및 레이아웃: 바구니들은 flex-wrap 혹은 grid를 활용해 화면 너비에 맞게 흐트러짐 없이 정돈되어 나열되어야 함. 바구니 내부의 딸기(🍓)들 역시 격자(Grid) 구조로 엉키지 않고 가독성 있게 배치될 것.
4. Tone (어조)
- 감성 피드백: "딩동댕! 아주 멋지게 해결했어! 🎉"와 같은 즉각적이고 밝은 피드백으로 어린이의 수학 효능감 극대화.
- 최종 환호: 10문제를 무사히 완주하면 커다란 🏆(왕관) 이모지와 함께 "친구야, 최고야!"라며 성취감을 크게 북돋아 주는 동적 팝업창 연출.
5. Audience (청중)
- 주요 사용자: 곱하기 수식을 바구니 묶음과 딸기의 시각적 수량 구조를 통해 직관적으로 받아들이고 싶어 하는 아동.
- 보조 사용자: 어린이의 구구단 복습 활동을 실시간 점수(0~100점) 및 진행 상태(상단 Dots)로 모니터링하려는 학부모 및 교사.
6. Response (핵심 요구사항 & 기능 사양)
- 문제 생성 알고리즘: 구구단 2단~9단 범위에서 중복되지 않는 10문제 자동 엄선. 상단 진행도 표시(Dot 10개) 및 실시간 점수(Score) 대시보드 연동.
- 비개입형 시각 교구 기능: N1 * N2 수식이 주어지면, 화면에 바구니 N1개를 그리고 각 바구니마다 딸기 N2개를 정렬하여 배치할 것. 딸기는 사용자가 터치하여 지우는 동작 없이 고정된 시각적 참조(Scaffolding) 자료로만 제공됨.
- 입력 흐름: 문제 로드와 동시에 입력 박스(ans-input)에 자동 포커스 처리. 모바일 수월성을 위해 inputmode="numeric" 및 확인 버튼 구성.
- 채점 및 에러 핸들링: window.onload 이벤트를 포함하여 DOM 요소가 완벽히 로드된 후 스크립트가 로딩되도록 null 포인터 예외 원천 차단. 정답 시 녹색 스타일 적용 및 다음 문제 자동 로드, 오답 시 빨간색 흔들기(Shake) 효과 및 유도 힌트 텍스트 제공.
7. Constraint (제약 사항)
- 모든 HTML, CSS(Tailwind CSS 내장), JavaScript가 반드시 단 한 개의 .html 파일에 구현되어야 함.
- 외부 이미지 URL을 일절 사용하지 않고, 이모지(🍓, 🧺) 및 Tailwind CSS 디자인만으로 시각적 풍부함을 연출할 것.
AI 기술을 활용해 아이들을 위한 나만의 교육용 도구를 손쉽게 만들어 보는 경험, 지금 바로 시작해 보세요!
