[프롬프트 공유] 난산증 아동을 위한 맞춤형 수학 웹앱, AI로 뚝딱 만들기

안녕하세요! 교실에서 아이들을 만나다 보면, 유독 숫자를 두려워하고 연산을 힘들어하는 친구들을 보게 됩니다. 특히 '난산증(Dyscalculia)'을 겪는 아이들에게는 단순한 반복 학습이나 문제 풀이보다, 숫자의 크기를 눈으로 확인하는 시각적 직관과 끊임없는 격려가 훨씬 더 중요하죠.

오늘은 AI를 활용해 이런 아이들을 도울 수 있는 '맞춤형 덧셈 웹앱' 제작용 COSTAR 프롬프트를 공유해 보려고 합니다.

복잡한 코딩 지식이 없어도, 이 프롬프트를 챗GPT나 클로드 같은 AI에 복사해 붙여넣기만 하면 브라우저에서 즉시 실행되는 훌륭한 교육용 소프트웨어 코드를 얻으실 수 있습니다. 특수학급 선생님이나 학부모님, 그리고 에듀테크에 관심 있는 모든 분들께 유용한 자료가 되길 바랍니다.

💡 왜 이 프롬프트가 특별할까요?

단순히 "수학 게임을 만들어줘"라고 하는 대신, COSTAR 프롬프트 프레임워크를 사용하여 AI에게 명확한 역할과 제약 사항을 부여했습니다.

• 시각적 보조 수단: 수 모형(Base-10 Blocks)을 색상별로 구현해 양적 크기를 직관적으로 인지하도록 했습니다.

• 세심한 난이도 조절: 처음엔 받아올림이 없는 쉬운 문제로 성취감을 주고, 점진적으로 난이도를 높입니다.

• 따뜻한 피드백: "틀렸어"라는 말 대신, 우주 테마에 맞춘 긍정적인 은유(예: "우주선 연료가 조금 더 필요해!")를 사용하여 아이들의 수학 불안도를 낮춥니다.

📋 복사해서 바로 쓰는 COSTAR 프롬프트 템플릿

아래의 내용을 그대로 복사하여 AI 채팅창에 입력해 보세요. 필요에 따라 대상 학년이나 테마를 자유롭게 수정하셔도 좋습니다.

[Context]

• 대상 사용자는 초등학교 3학년 학생으로, 수학 학습 장애인 '난산증(Dyscalculia)'을 겪고 있습니다.

• 이 학생은 특히 '100의 자리 세 자릿수 덧셈'에서 큰 어려움을 겪고 있으며, 숫자의 크기를 직관적으로 인지하지 못하고 자릿수를 맞춰 더하는 세로셈 개념이 약합니다.

• 학생이 숫자에 대한 공포를 줄이고, 수의 양적 크기(수량)를 시각적으로 이해하며, 성취감을 느낄 수 있도록 돕는 연산 보조 소프트웨어가 필요합니다.

[Objective] 다음 기능들을 완벽하게 갖춘 인터랙티브 교육용 단일 파일 웹앱(HTML/JS)을 제작해 주세요.

1. 세션당 총 10문제를 제공하며, 매 세션마다 무작위로 새로운 문제가 생성되어야 합니다.

2. 난이도 조절:

   • 1~4번 문제: 받아올림이 전혀 없는 기초 100의 자리 덧셈 (예: 123 + 245)

   • 5~10번 문제: 일의 자리 혹은 십의 자리 중 '단 한 곳에서만' 받아올림이 발생하는 점진적 난이도 덧셈

3. 핵심 학습 보조 도구 (수 모형 시각화):

   • 문제로 출제된 두 숫자를 100의 판, 10의 막대, 1의 낱개 블록 모양(Base-10 Blocks)으로 시각화하여 보여줍니다.

   • 각 블록은 자릿수별로 명확히 다른 색상으로 구분되어야 합니다. (예: 100=파랑, 10=초록, 1=빨강)

4. 세로셈 입력 가이드:

   • 세로셈 판을 제공하고, 자릿수(백/십/일의 자리)를 세로선과 블록 색상에 맞춰 줄정렬하여 보여줍니다.

   • 사용자가 백/십/일의 자리 입력 칸에 각각 한 자릿수씩 정답을 입력할 수 있도록 독립된 입력 창을 제공합니다.

   • 숫자가 입력되면 일의 자리 -> 십의 자리 -> 백의 자리 순서로 포커스가 자연스럽게 이동하도록 돕습니다.

5. 게이밍 및 피드백 요소:

   • 친근한 가이드 캐릭터(예: 우주 요정 큐비)가 등장하여 따뜻하고 구체적인 피드백을 줍니다.

   • 정답 시에는 축하 효과음과 이펙트, 오답 시에는 틀린 자릿수 블록을 다시 세어보라는 구체적인 힌트(예: "빨간색 1의 자리 블록을 다시 세어볼까?")를 제공합니다.

   • 2회 이상 연속 오답 시에는 아이의 좌절을 막기 위해 정답과 해설(모형 매칭 설명)을 친절하게 보여줍니다.

6. 진행 상황바(Progress Bar)와 최종 결과 카드(미션 완료 및 맞춘 개수)를 구현해 주세요.

[Style]

• 디자인 테마: 아이들이 몰입하기 좋은 '우주 모험' 또는 '마법 판타지' 테마 (어두운 배경에 야광/네온 컬러 포인트 추천)

• UI/UX: 아주 직관적이고 여백이 넓어야 합니다. 텍스트 크기는 크게 하고 눈이 편안한 둥근 폰트 스타일을 적용하세요.

• 스타일 라이브러리: 외부 CSS 파일 없이 작동할 수 있도록 Tailwind CSS CDN을 사용하고, 아이콘은 Font Awesome CDN을 활용하세요.

• 기술 제한: HTML, CSS, JavaScript가 오직 하나의 파일(index.html) 안에 완벽히 통합되어 있어야 합니다. 외부 자바스크립트 모듈이나 별도의 CSS 파일은 생성하지 마세요.

[Tone]

• 어조: 초등학교 3학년 아동에게 맞춘 극도로 친근하고, 다정하며, 끊임없이 격려하는 어조.

• "틀렸어" 대신 "다시 한번 세어보자!", "우주선 연료가 조금 더 필요해!" 같은 긍정적이고 은유적인 표현을 사용해 주세요.

[Audience]

• 주 사용자는 수학에 극심한 불안감과 난산증을 겪는 10세 어린이입니다.

• 보조 사용자는 치료 놀이를 지도하는 특수학급 교사 또는 학부모입니다. 따라서 복잡한 설정 없이 브라우저에서 '더블클릭'만으로 실행 가능해야 합니다.

[Response]

• 완성도 높고 즉시 브라우저에서 실행 가능한 한 장의 HTML 코드로 응답해 주세요.

• 코드 내 가이드 텍스트와 모든 다이얼로그, 피드백 메시지는 한글로 정성스럽게 작성해 주세요.

• 코드 내부에는 각 연산 제어 로직과 난산증 보조 기법에 대한 주석을 상세하게 달아주세요.

업무 메신저 폭탄 속에서 '일정·할 일' 3초 만에 자동 정리하는 법 (feat. 제미나이 프롬프트)

 

업무 메신저 폭탄 속에서 '일정·할 일' 3초 만에 자동 정리하는 법 (feat. 제미나이 프롬프트)

아침에 출근하자마자 슬랙, 잔디, 카카오톡, 혹은 사내 메신저로 쏟아지는 장문의 공지사항과 업무 지시 때문에 정신없으신 적 많으시죠?

"ㅇㅇ 대리님, 이번 주 목요일 오후 2시까지 기획서 초안 공유해 주시고, 다음 주 월요일 미팅 일정 잡힌 것도 체크해 주세요. 아 참, 오늘 퇴근 전까지 지출 증빙 서류 제출하는 것도 잊지 마시고요!"

이런 메시지를 받으면 메모장 켜고, 구글 캘린더 열고, 할 일 목록에 일일이 받아 적느라 정작 중요한 업무는 시작도 못 하곤 합니다.

오늘은 메신저로 받은 복잡하고 긴 텍스트를 AI(제미나이)가 알아서 분석해 구글 캘린더(일정)와 구글 태스크(할 일)로 자동 분류 및 등록해 주는 마법 같은 프롬프트를 소개합니다!

한 번만 세팅해 두면 나만의 '스마트한 디지털 비서'를 고용한 효과를 누릴 수 있습니다.

🛠️ 3단계 초간단 세팅 방법

1단계. 제미나이에 '업무 비서' 영혼 불어넣기

구글 제미나이(Gemini)에 접속해 새 채팅을 열고, 아래의 프롬프트를 복사해서 그대로 붙여넣으세요. (일반 직장인 버전에 맞게 튜닝된 프롬프트입니다.)

Plaintext

O (Objective): 아래 붙여넣는 비정형 업무 메신저 텍스트를 분석해서, 특정 일시가 지정된 업무는 'Google Calendar'에 등록할 일정으로, 오늘이나 당장 처리해야 할 액션 플랜은 'Google Tasks'에 등록할 할 일로 정확히 분류해서 정리해 줘.
S (Style): 군더더기 없이 깔끔하고 명확한 프로 직장인의 업무 지시 스타일.
T (Tone): 철저하고 빠릿빠릿한 전문 비서 톤.
A (Audience): 효율적인 업무 처리가 필요한 직장인(나)
R (Response): 
1) [구글 캘린더 등록용] 일정/시간/내용 요약
2) [구글 태스크 등록용] 오늘 바로 처리해야 할 일 브리핑

2단계. 이 채팅창 '고정'하기 (가장 중요!)

매번 프롬프트를 복사하기 귀찮으시죠? 딱 한 번만 고정해 두면 됩니다.

• 제미나이 화면 왼쪽 사이드바(또는 채팅창 오른쪽 상단 점 3개 버튼)에서 [고정(Pin)]을 클릭합니다.

• 채팅방 이름은 '메신저 업무 자동 정리 비서' 정도로 바꿔두면 찾기 편합니다.

3단계. 실전 활용하기

이제 세팅은 끝났습니다! 앞으로 슬랙이나 카카오톡으로 장문의 업무 지시나 공지사항이 오면, 내용을 통째로 복사해서 방금 고정해 둔 제미나이 채팅창에 툭 던지듯 붙여넣기만 하세요.

실제로 사용하면 어떻게 나올까?

메신저로 온 두서없는 글을 넣으면, 제미나이가 다음과 같이 칼같이 정리해 줍니다.

🤖 제미나이 비서의 답변 예시:

1) 🗓️ Google Calendar 등록 내역 (일정)

• 일시: 2026년 O월 O일 (목) 14:00

• 내용: 기획서 초안 공유 및 피드백

• 일시: 2026년 O월 O일 (월) 시간 미정

• 내용: 팀 주간 정기 미팅

2) 📝 Google Tasks 등록 내역 (오늘의 할 일)

• [ ] 금일 퇴근 전까지 지출 증빙 서류 제출 완료하기

출근 후 메신저 텍스트 복사 ➡️ 제미나이 붙여넣기 ➡️ 정리된 내용을 구글 달력과 태스크에 슥슥 등록하기만 하면 오늘 업무 세팅 끝!

[에듀테크] 구구단 패턴 암기는 그만! 초등 3학년 무한 나눗셈 학습기 웹앱 만들기 (ft. COSTAR 프롬프트)

[에듀테크] 구구단 패턴 암기는 그만! 초등 3학년 무한 나눗셈 학습기 웹앱 만들기 (ft. COSTAR 프롬프트)

교실에서 아이들과 수학 3학년 1학기 4단원 '나눗셈'을 시작할 때면 늘 비슷한 고민이 생깁니다. 구구단의 역연산 개념을 처음 접하는 아주 중요한 시기인데, 시중의 고정된 학습지 문항만 반복해서 풀다 보면 어느새 진정한 연산이 아니라 문제의 '패턴'만 외워버리는 경우가 많기 때문입니다.

요즘 교실 혁명은 정교한 프롬프트에서 시작된다는 말이 있죠. 학생들이 매일 완전히 새로운 문제로 완전 학습을 달성할 수 있도록, 2~9단 범위의 무작위 나눗셈 수식을 무제한 생성하는 웹앱을 기획해 보았습니다.

제가 AI에게 웹앱 개발을 지시할 때 사용한 COSTAR 프롬프트 전문과 설계 구조를 블로그에 공유합니다. 학급에서 바로 활용할 수 있는 개별화 학습 도구가 필요하셨던 분들께 도움이 되길 바랍니다!

💡 COSTAR 프롬프트 설계서

AI가 단번에 완벽한 결과물을 낼 수 있도록, COSTAR 프롬프트 프레임워크에 맞춰 구체적으로 지시했습니다.

1. Context (배경: 왜 필요한가?)

• 핵심 문제: 고정된 문항 세트는 학생들의 패턴 암기를 유발하여 진정한 연산 훈련을 방해합니다.

• 솔루션: 2~9단 곱셈구구 범위를 조합하여 무작위로 수식을 생성하는 도구를 통해 매일 색다른 수학 탐험을 제공합니다.

2. Objective (목표: 무엇을 만들 것인가?)

• 중복 없는 무작위 10문항: 시작할 때마다 $A \div B = C$ (단, $B, C \in [2, 9]$ 이며 $A = B \times C$) 조건에 맞는 새로운 수식을 생성합니다.

• 집중력 UP, 피로도 DOWN: 한 화면에 한 문제만 보여주어 학습 피로도를 최소화합니다.

• 실시간 내비게이션 동기화: 1~10번 이동 노드를 만들어 푼 문제와 안 푼 문제, 채점 후 정오답 상태를 한눈에 볼 수 있게 합니다.

• 고품질 해설 제공: 교사가 옆에서 알려주는 것처럼, 몫에 대응하는 나누기 이모지(●) 시각 자료와 상세한 힌트를 동적으로 제공합니다.

3. Style & Tone (디자인과 어조: 어떤 느낌으로?)

• UI/UX 디자인: 아이들의 눈 피로를 덜어주는 산뜻한 민트와 테알(Teal) 컬러를 메인으로 하고, 둥근 모서리와 부드러운 그림자를 사용해 따뜻하고 안전한 느낌을 주었습니다.

• 단일 파일 구성: 복잡한 설치 없이 브라우저만 있으면 어디서든 열리도록 HTML, CSS(Tailwind CSS), JS를 index.html 파일 하나에 묶었습니다.

• 따뜻한 격려 중심: '시험'이나 '채점'이라는 딱딱한 말 대신 '탐험'이라는 친근한 단어를 쓰고, 점수에 따라 맞춤형 칭찬 문구와 💮 스탬프 이펙트가 나오도록 했습니다.

  • 100점: "퍼펙트! 정말 최고예요! 나눗셈의 완벽한 박사이시군요!"

  • 80점 이상: "참 잘했어요! 아쉽게 놓친 부분만 다시 읽어 보아요."

4. Audience (대상: 누가 사용할 것인가?)

• 주 사용층: 나눗셈 개념과 계산력 향상이 필요한 초등학교 3학년 학생

• 활용 대상: 스마트 기기를 활용해 형성평가나 개별화 학습을 진행하는 초등학교 교사, 자녀의 기초 연산을 돕는 학부모

⚙️ Response: 핵심 구조적 설계 명세

단일 페이지 애플리케이션(SPA)으로 부드럽게 작동하도록 아래와 같은 흐름으로 로직을 설계했습니다.

Plaintext

[ 인트로 화면 (홈) ] 
       │ (탐험 시작! ▶ 10문제 무작위 빌드)
       ▼
[ 학습 진행 화면 (SPA) ] ──────► 상단 네비게이션 도트 맵 실시간 갱신
       │                             - 활성 문제: 테알(Teal) 하이라이트
       ├─ 다음 문제 / 이전 문제        - 정답 입력 완료: 연한 하늘색
       │                             - 미입력 문항: 흰색
       ▼
[ 채점 및 평가 엔진 실행 ] ────► 정오답 시각 피드백
       │                             - 정답: 초록색 도트 / 오답: 빨간색 도트
       ▼
[ 결과 보고서 화면 노출 ] ────► 점수별 스탬프(💮) 및 맞춤형 피드백
                                     - 오답 문항 클릭 시 개별 해설로 순간 이동

특히 generateRandomQuestions() 함수를 통해 나누는 수와 몫을 난수로 완벽히 조합하고, 초기화 시 브라우저 내의 기입 상태를 완벽히 청소하는 세밀한 세팅을 추가해 앱의 안정성을 높였습니다.

🔗 나눗셈 학습기 웹앱 바로가기 

프롬프트를 통해 실제 구현된 웹앱의 작동 모습이 궁금하시다면 아래 링크를 클릭해 주세요. 웹 브라우저에서 바로 실행되므로 스마트 기기를 활용한 형성평가나 개별화 학습 시간에 우리 반 아이들에게 바로 적용해 보실 수 있습니다! 

👉 초등 3학년 나눗셈 탐험 웹앱 실행하기

[에듀테크] 초등학생 눈높이에 딱! AI 프롬프트로 저작권 교육 퀴즈 웹앱 만들기 

"이 사진 제 블로그 숙제에 써도 돼요?", "이 음악 유튜브 브이로그에 그냥 올려도 되나요?"

교실에서 아이들과 지내다 보면 정말 자주 듣는 질문 중 하나입니다. 스마트폰, 유튜브, 카카오톡이 일상이 된 우리 아이들은 종종 자신도 모르게 다른 사람의 저작권을 침해하곤 합니다.

하지만 아이들에게 '저작권법 위반', '불법 다운로드', '손해 배상' 같은 딱딱한 단어로 가르치자니, 아이들이 지루해하거나 지레 겁을 먹기 일쑤입니다. 어떻게 하면 아이들이 스스로 올바른 인터넷 사용 습관을 기를 수 있게 도울 수 있을까요?

그래서 AI 프롬프트 엔지니어링을 활용해, 아이들의 눈높이에 맞춘 '다정하고 재미있는 저작권 퀴즈 웹앱'을 만들어 보았습니다.

🛠️ 기획 의도: COSTAR 프레임워크로 정교해진 AI 프롬프트

단순히 AI에게 "초등학생용 저작권 퀴즈 내줘"라고 하면, 너무 어른스럽거나 교과서적인 문제만 나오게 됩니다. 원하는 교육적 결과물을 정확히 얻기 위해 COSTAR 프레임워크를 활용하여 프롬프트를 꼼꼼하게 설계했습니다.

제가 퀴즈 데이터를 생성하기 위해 사용한 프롬프트를 공유합니다.

[Context] (배경) 최근 초등학생들이 스마트폰, 유튜브, SNS를 일상적으로 사용하면서 자신도 모르게 다른 사람의 저작권을 침해하는 사례가 늘고 있습니다. 아이들이 일상 속에서 저작권의 중요성을 스스로 깨닫고 올바른 인터넷 사용 습관을 기를 수 있도록 돕는 쉽고 친근한 퀴즈 콘텐츠가 필요합니다.

[Objective] (목표) 초등학생들이 일상생활(유튜브 편집, 단톡방 공유, 학교 숙제, 캐릭터 그리기, 게임 다운로드 등)에서 겪을 수 있는 구체적인 상황을 예시로 든 4지선다형 퀴즈 10문제를 제작해 주세요.

[Style] (스타일)

• 대상 연령: 초등학교 3~6학년의 눈높이에 맞춘 친근한 구어체

• "피고소", "형사 처벌" 같은 딱딱한 법률 용어 대신 "원작자의 허락", "올바른 약속" 등 순화된 표현 사용

• 가상의 인물이 등장하는 스토리텔링 형식 (예: "지우는 유료 게임을...")

[Tone] (어조)

• 혼내는 어조가 아닌, 친절하게 타이르는 '다정하고 교훈적인 톤'

• 아이들이 "나도 앞으로 저작권을 잘 지켜야지!" 하고 긍정적인 도덕심을 가지도록 격려

[Audience] (대상)

• 주 청중: 초등학교 중·고학년(만 9세~12세)

• 법률 암기가 아닌, 일상적인 '도덕과 상식' 선에서 판단할 수 있는 난이도

[Response] (응답 형식)

• 웹앱 시스템에 바로 입력할 수 있도록 엄격한 JSON 구조로 출력할 것 (question, answerOptions, isCorrect, rationale, hint 포함)

✨ 프롬프트 설계의 3가지 핵심 포인트

1. 스토리텔링과 일상 예시: 가상의 친구들이 등장하여 게임 다운로드, 단톡방 밈 공유 등 아이들이 매일 겪는 상황을 문제로 만들었습니다.

2. 다정하고 따뜻한 피드백: 오답을 고르더라도 혼내지 않고, "왜 창작자에게 상처를 주는지", "왜 규칙을 지켜야 모두가 즐거운지" 따뜻하게 알려주는 해설과 힌트를 넣었습니다.

3. 웹앱 연동을 위한 JSON 출력: 교사가 데이터를 일일이 옮겨 적을 필요 없이, 생성된 데이터를 웹앱이나 퀴즈 프로그램에 즉시 적용할 수 있도록 개발 친화적인 JSON 형태로 지정했습니다.

🚀 완성된 결과물 확인하기

이렇게 잘 짜인 프롬프트를 통해 생성된 퀴즈 데이터와 웹앱 결과물은 아래 링크에서 바로 확인해 보실 수 있습니다!

🔗 초등학생 저작권 퀴즈 제작 프롬프트 및 결과 확인하기

프롬프트를 조금만 다듬어도 우리 교실에 꼭 필요한 맞춤형 에듀테크 도구가 탄생합니다. 아이들의 올바른 인터넷 습관을 길러주는 다정한 저작권 퀴즈, 여러분도 직접 활용해 보시는 건 어떨까요? 😊

초등 수학의 고비 '받아올림', 스마트한 세로셈 웹앱으로 해결하기! (CO-STAR 프롬프트 공유)

초등 수학의 고비 '받아올림', 스마트한 세로셈 웹앱으로 해결하기! (CO-STAR 프롬프트 공유)

안녕하세요! 오늘은 초등학교 수학 과정 중 아이들이 처음으로 어려움을 겪는 복병인 '세 자리 수 덧셈과 받아올림(Carry)'을 재미있게 마스터할 수 있는 인터랙티브 수학 학습 웹앱 제작기를 공유하려고 합니다.

기존의 디지털 문제집이나 덧셈기들은 대개 가로로 숫자를 입력하거나, 왼쪽에서 오른쪽 방향으로 타이핑하게 되어 있어 아이들이 실제 종이에 세로셈을 풀 때의 연산 흐름(일의 자리 → 십의 자리 → 백의 자리)과 맞지 않아 혼란을 주곤 했습니다.

이러한 문제를 해결하기 위해, 실제 교실과 가정에서 아이들이 직관적으로 연산 흐름을 익힐 수 있는 '세 자리 수 덧셈 모험' 웹앱을 기획했습니다. 생성형 AI를 활용해 단일 HTML 파일로 뚝딱 만들어낼 수 있는 완성형 프롬프트도 함께 공개하니 꼭 활용해 보세요!

💡 '세 자리 수 덧셈 모험' 앱의 핵심 기능 (기획 검증)

이 앱은 철저히 어린이의 인지 발달과 연산 습관에 맞추어 설계되었습니다.

1. 수학적 직관을 돕는 '우좌(오른쪽에서 왼쪽) 스마트 입력'

   • 하단의 일반적인 입력창 대신, 세로셈 정답 줄의 일의 자리부터 직접 터치하여 입력합니다.

   • 숫자가 입력되면 자동으로 왼쪽(상위 자릿수)으로 커서가 이동하고, 오타가 나서 백스페이스를 누르면 다시 우측(하위 자릿수)으로 포커스가 복귀하는 스마트 백트래킹 기능을 탑재했습니다.

2. 시각적 힌트 '받아올림 도우미 버튼'

   • 아이들이 받아올림 수 '1'을 머릿속으로만 기억하다가 자주 틀리곤 합니다. 십의 자리와 백의 자리 위에 점선 동그라미 토글 버튼을 배치해, 아이가 직접 터치하여 핑크색 불을 켜고 숫자 '1'을 표시할 수 있게 돕습니다.

3. 성취감을 자극하는 확실한 피드백

   • 문제를 맞힐 때마다 "딩동댕! 정말 멋져!" 같은 생생한 피드백과 함께 실시간으로 점수가 오릅니다.

   • 총 10문제를 완주하면 커다란 왕관 팝업과 함께 환호하는 연출로 학습 성취감을 극대화합니다.

4. 엄선된 받아올림 문제 생성 알고리즘

   • 무작위 숫자가 아니라, 일의 자리나 십의 자리 중 최소 한 곳 이상에서 반드시 받아올림이 발생하는 문제만 10개 골라 출제되므로 밀도 높은 훈련이 가능합니다.

🛠️ 개발자를 위한 프리미엄 디자인 & 안정성 설계

• 따뜻한 스케치 스타일 테마: 구글 'Gaegu' 폰트와 앰버(Amber), 핑크, 블루 계열을 믹스하여 딱딱한 공부 느낌이 아닌 친근한 놀이처럼 느껴지게 디자인했습니다.

• 완벽한 격자 정렬: 세로셈의 생명은 칼 같은 자릿수 정렬입니다. CSS Grid 시스템을 활용해 흐트러짐 없는 시각 구조를 유지합니다.

• 에러 없는 안정성: window.onload를 기점으로 자바스크립트가 실행되도록 하여 DOM 에러를 원천 차단하고 단 하나의 .html 파일로 구동되도록 제작했습니다.

🚀 완성된 웹앱 만나보기

위의 정밀한 기획 요소를 모두 반영하여 완성된 인터랙티브 웹앱을 아래 링크에서 바로 확인하고 체험해보실 수 있습니다. 아이들과 함께 혹은 학생들과 함께 수업 시간에 활용해보세요! 

📋 AI로 똑같이 만들 수 있는 'CO-STAR 프롬프트' 공유

나만의 교육용 앱을 직접 제작해보고 싶으신 분들을 위해, 제가 사용한 CO-STAR 프롬프트를 그대로 공유합니다. 생성형 AI(예: Gemini 등)에 아래 내용을 그대로 복사·붙여넣기 하시면 멋진 단일 HTML 파일 코드를 얻으실 수 있습니다.

Markdown

[Context]
학습 대상: 세 자리 수 덧셈과 받아올림(Carry) 개념을 한창 익히고 있는 초등학생 어린이
현상: 기존의 단순 텍스트 입력형 덧셈기는 실제 연산 흐름(우측에서 좌측 자릿수 순서로 풀기)과 맞지 않아 혼란을 줄 수 있음.
해결책: 가독성이 뛰어난 세로셈 그리드 판을 제공하고, 일의 자리부터 직접 탭하여 숫자를 적어나갈 수 있는 '직접 입력 그리드' 수학 학습 앱이 필요함.

[Objective]
세 자리 수 더하기 세 자리 수 연산을 수행할 수 있는 인터랙티브 웹앱 제작.
어린이가 계산할 때 받아올림 수(1)를 직접 켜고 끌 수 있는 '받아올림 도우미 버튼' 구현.
사용자가 하위 자릿수(일의 자리)부터 상위 자릿수(천의 자리) 순서로 답을 입력하면 포커스가 자동으로 왼쪽으로 이동하는 스마트 입력 인터페이스 제공.

[Style]
서체: 따뜻하고 친근한 분위기를 위해 구글 'Gaegu' 폰트를 우선 적용.
디자인 테마: 따뜻한 앰버(Amber)와 핑크, 블루 계열을 활용한 프리미엄 스케치 스타일.
자릿수 정렬: 세로셈의 기하학적 정렬이 자릿수별로 칼같이 맞아야 함 (Grid 시스템 사용 권장).
입력 박스: 일반 테두리가 아닌 예쁜 점선 및 그라데이션이 들어간 동글동글한 상자(Rounded corners) 적용.

[Tone]
친근함과 격려: 어린이가 한 문제를 해결할 때마다 "딩동댕! 정말 멋져!", "우와, 최고야!" 등의 즉각적이고 생생한 감정적 피드백 제공.
성취감: 점수가 오르는 모습을 실시간으로 보여주고, 10문제를 완주하면 커다란 팝업(왕관 이모지 포함)과 함께 환호하는 연출.

[Audience]
주요 사용자: 일의 자리, 십의 자리에서 일어나는 받아올림의 의미를 스스로 깨닫고 시각적 힌트를 필요로 하는 아동.
보조 사용자: 어린이의 학습 과정과 성취도(점수)를 실시간으로 간편하게 모니터링하려는 학부모 및 교사.

[Response - 핵심 요구사항 & 구현 기능]
1. 문제 생성 알고리즘:
- n1, n2는 (100~899) 범위 내의 세 자리 수 무작위 추출.
- 단, 어린이가 받아올림 개념을 충분히 훈련할 수 있도록 일의 자리 또는 십의 자리 중 적어도 한 곳 이상에서 반드시 받아올림이 발생하는 문제만 10개 엄선하여 출제할 것.
2. 자릿수 입력 장치:
- 하단 입력 창을 완전히 없애고, 세로셈 판 정답 줄의 일의 자리(inp-one), 십의 자리(inp-ten), 백의 자리(inp-hundred), 천의 자리(inp-thousand) 빈칸에 직접 타이핑하도록 설계.
- 숫자가 한 글자 입력되면 자동으로 왼쪽(상위 자릿수) 입력칸으로 커서가 넘어가는 oninput 체인 로직 구현.
- 오타 수정을 위해 백스페이스(Backspace)를 누르면 자동으로 우측(하위 자릿수) 입력칸으로 포커스가 복귀하는 스마트 백트래킹 기능 탑재.
3. 받아올림 가이드:
- 십의 자리 위, 백의 자리 위에 점선 모양의 동그라미 토글 버튼 배치. 터치하면 핑크색 불이 켜지며 숫자 '1'이 활성화되어 계산을 보조함.
4. 예외 처리 및 안전성:
- window.onload를 기점으로 자바스크립트가 실행되어 DOM null 포인터 예외를 원천 차단할 것.
- 정답 확인을 누르면 각 자릿수 칸이 맞았는지 검증하여 맞으면 '초록색 테두리 및 팝 애니메이션', 틀리면 '빨간색 테두리 및 흔들기(Shake) 애니메이션'을 개별 부여할 것.

[Constraint]
- 무조건 HTML, CSS, JavaScript가 한 개의 파일 안에 담긴 단일 .html 파일로 완성할 것.
- 외부 이미지 소스 주소(URL)를 절대 사용하지 말고, 아이콘 및 시각적 장치는 Tailwind CSS 클래스, 자체 SVG 또는 이모지(🎉, 🏆, ☀️)로 대체할 것.

디지털 기술이 교육 환경에 자연스럽게 스며들 때 아이들의 학습 효율은 배가 됩니다. 오늘 소개해 드린 프롬프트 구조를 활용해 여러분만의 개성 넘치는 교육 도구를 만들어보시는 건 어떨까요?  

AI로 하루 만에 만드는 초등 수학 교구: "구구단 딸기 모험" 웹앱 제작기 (프롬프트 공유)

 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 등)에 그대로 입력하시면, 별도의 서버나 이미지 호스팅 없이 브라우저에서 즉시 실행 가능한 나만의 구구단 웹앱 코드를 얻으실 수 있습니다.

Plaintext

[구구단 딸기 모험 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 기술을 활용해 아이들을 위한 나만의 교육용 도구를 손쉽게 만들어 보는 경험, 지금 바로 시작해 보세요!

프롬프트 하나로 교육용 웹앱 뚝딱! : 매체 판별 OX 퀴즈 만들기 (CO-STAR 기법)

안녕하세요! 오늘은 프롬프트 엔지니어링의 대표적인 프롬프트 작성 기법인 CO-STAR 프롬프트를 활용하여, 교육 현장에서 바로 쓸 수 있는 '매체 판별 OX 퀴즈 웹앱'을 만드는 방법을 공유하려고 합니다.

국어 시간이나 미디어 리터러시 수업을 하다 보면, 학생들이 '매체(Media)'의 개념을 헷갈려하는 경우가 많죠? 단순한 '자연물'이나 매체를 통해 전달되는 '내용(콘텐츠)'을 매체 자체와 혼동하곤 합니다.

이러한 문제를 해결하기 위해, 학생들이 게임처럼 재미있게 매체의 개념을 익힐 수 있는 웹앱 생성 프롬프트를 기획해 보았습니다. 복잡한 코딩 지식 없이도 AI에게 아래의 프롬프트를 입력하면 멋진 웹앱이 탄생합니다!

💡 미리 보기 AI가 이 프롬프트를 바탕으로 만들어낸 완성된 결과물은 아래 링크에서 확인하실 수 있습니다.

👉 완성된 매체 판별 OX 퀴즈 결과물 확인하기

📝 매체 판별 OX 퀴즈 생성용 CO-STAR 프롬프트

AI에게 정확하고 퀄리티 높은 결과물을 얻기 위해 Context(맥락), Objective(목표), Style(스타일), Tone(어조), Audience(대상), Response(응답 형식)의 6가지 요소로 프롬프트를 구성했습니다.

그대로 복사해서 사용해 보셔도 좋습니다!

1. Context (맥락 : 배경 및 문제 상황)

국어 교과서 및 미디어 리터러시 수업에서는 생각이나 정보를 전달하고 소통을 도와주는 도구인 '매체(Media)'의 개념을 배웁니다. 하지만 학생들은 단순한 '자연물'이나 전달되는 '내용(콘텐츠)'을 '매체' 자체와 혼동하는 경우가 많습니다. 학생들이 재미있는 게임 형식을 통해 진짜 '매체'와 '매체가 아닌 것'을 쉽고 직관적으로 구별할 수 있도록 돕는 학습용 웹앱이 필요합니다.

2. Objective (목표 : 구체적인 요구 사항)

사용자가 헷갈리기 쉬운 매체 개념을 완벽하게 마스터할 수 있는 단일 파일(Single-File) 형태의 '매체 판별 OX 퀴즈 웹앱'을 제작해 주세요. 이 웹앱은 다음 3가지 화면으로 구성되어야 합니다.

• 시작 화면: 매체의 정의와 헷갈림 방지 꿀팁(예: 책/신문은 매체 O, 일기예보/바람소리는 매체 X) 제공

• 퀴즈 화면: 총 15개의 문항 은행 중 랜덤으로 10문제를 추출하여 진행. 실시간 점수, 진행률 게이지 바, 정/오답 판정 시 시각적 애니메이션 효과 및 상세한 해설 피드백 창 포함

• 결과 화면: 최종 점수와 점수대별 격려 코멘트 제공. '다시 풀기' 버튼과 '오답노트(문항별 정답/선택지/해설 정리)' 토글 기능 포함

3. Style (스타일 : 디자인 및 기술적 특징)

• 레이아웃: 현대적이고 감각적인 모바일 친화형 카드 레이아웃 (최대 너비 max-w-lg 정도의 콤팩트한 스타일)

• 디자인: Tailwind CSS를 사용한 파스텔톤 그라데이션 배경(예: indigo에서 purple로 이어지는 톤)과 부드러운 곡선(rounded-3xl) 디자인 적용

• 폰트: 가독성이 뛰어난 한국어 웹폰트(예: Noto Sans KR) 적용

• 효과음 (중요!): 외부 사운드 파일 링크 없이, 브라우저 내장 Web Audio API(Synthesizer 방식)를 활용해 정답(맑은 고음 딩동댕)과 오답(경고음 우웅) 소리가 나도록 순수 자바스크립트로 구현

4. Tone (어조)

• 학습 의욕을 북돋아 주는 따뜻하고 친근하며 격려하는 어조 (예: "훌륭합니다!", "아쉬워요! 틀렸습니다. 해설을 읽어보세요!")

• 학생들의 눈높이에 맞춘 쉽고 명쾌한 설명 톤

5. Audience (타겟 독자)

• 미디어 리터러시와 국어 교과를 공부하는 초·중·고등학생 및 일반 학습자

• 복잡한 UI보다는 한눈에 들어오는 버튼과 직관적인 터치 조작이 필요한 사용자

6. Response (응답 방식 및 데이터)

모든 HTML, CSS, JavaScript 로직이 하나로 통합된 단일 .html 파일로 응답해 주세요. 외부 라이브러리는 Tailwind CSS CDN 링크만 사용해야 하며, 별도의 자산(이미지, 사운드 파일) 다운로드 없이 브라우저에서 독립적으로 완벽하게 실행되어야 합니다.

[기본 문제 은행 데이터(15문항) 예시] 반드시 아래와 같은 실생활 맥락의 엄선된 15문항과 구체적인 해설을 스크립트에 포함해 주세요.

• Q: 기록되어 눈으로 보거나 만질 수 있는 '사진'은 매체일까요?

  • 정답: O

  • 해설: 사진은 시각적 이미지를 통해 생각이나 정보를 전달하는 훌륭한 매체입니다.

• Q: 텔레비전이나 인터넷 앱을 통해 듣는 '일기예보' 정보 자체는 매체일까요?

  • 정답: X

  • 해설: 일기예보는 전달되는 '정보 내용'입니다. 이를 전하는 '라디오'나 '날씨 앱'이 매체입니다.

💡 마치며

위의 프롬프트를 AI(Gemini, ChatGPT, Claude 등)에게 입력하면, 복잡한 서버 설정이나 파일 관리 없이 브라우저에서 바로 실행되는 훌륭한 퀴즈 앱을 얻을 수 있습니다. 특히 Web Audio API를 활용해 외부 파일 없이 소리를 구현하도록 요청한 점이 단일 파일 배포를 훨씬 쉽게 만들어줍니다.

교육 현장에 계신 분들이라면, 문제 은행 데이터 부분만 수업 내용에 맞게 살짝 수정해서 나만의 퀴즈 앱을 만들어보시는 것을 추천합니다! 

 [프롬프트 엔지니어링] CO-STAR 기법으로 초등 수학 덧셈 웹앱 뚝딱 만들기

AI를 활용해 코딩을 몰라도 나만의 맞춤형 교육용 웹앱을 만들 수 있다는 사실, 알고 계셨나요?

오늘은 프롬프트 작성의 정석이라고 불리는 CO-STAR 프롬프트 기법을 활용하여, 초등학교 저학년 아이들을 위한 '두 자리 수 덧셈 연산 웹앱'을 만든 과정을 공유합니다.

단 하나의 HTML 파일로 완벽하게 구동되는 웹앱을 만들기 위해 AI에게 어떤 구체적인 지시를 내렸는지 확인해 보세요!

🎯 완성된 웹앱 먼저 보기

AI가 아래의 프롬프트를 바탕으로 작성한 실제 결과물입니다. 링크를 클릭해 직접 연산 문제를 풀어보세요. 👉 두 자리 수 덧셈 웹앱 결과물 확인하기

💡 웹앱 제작을 위한 CO-STAR 프롬프트 전문

이 프롬프트는 생성형 AI가 정확히 내가 원하는 결과물을 만들 수 있도록 배경, 목표, 스타일, 어조, 타겟, 출력 형식을 꼼꼼하게 정의했습니다.

1. 🏢 Context (배경 및 환경 설정)

• 목적: 초등학생들이 두 자리 수 덧셈과 받아올림(Carry) 자릿수 개념을 쉽게 이해할 수 있도록 돕는 개별 교구 웹앱 제작.

• 개발 환경: 별도의 외부 라이브러리 설치나 분할 파일 없이, HTML / CSS / JS가 하나로 통합된 단일 웹 페이지(.html)로 동작해야 함.

2. 🎯 Objective (수행 목표와 핵심 기능)

• 문제 출제 로직: 총 10문제 출제. 정확히 '5문제'는 일의 자리에서 받아올림이 있고, '5문제'는 받아올림이 없게 생성하여 랜덤 셔플. (결과값은 100을 넘지 않도록 제어)

• 완벽한 레이아웃: 초등학교 수학 교과서 규격의 '세로셈' 레이아웃 구현. CSS Grid나 고정 너비를 사용해 백/십/일의 자리 열이 한 치의 오차도 없이 수직 정렬되게 할 것. 더하기 기호(+)는 아랫줄 숫자의 왼쪽(백의 자리 열)에 정밀하게 배치.

• 입력창(Input) 설정: 가상 키패드 대신 기기 고유의 숫자 패드가 뜨도록 <input inputmode="numeric"> 적용. 결과선 아래에 3개의 입력창(백, 십, 일의 자리)을 각각 배치.

• ✨ 핵심 자릿수 UX 시나리오 (매우 중요):

  • 문제 시작 시 가장 우측 '일의 자리'에 자동 포커스.

  • 숫자 입력 시 일의 자리 ➡️ 십의 자리 ➡️ 백의 자리 순으로 포커스가 자동 이동 (오른쪽에서 왼쪽으로 역방향 이동).

  • 클릭/터치로 개별 수정 가능.

  • 빈칸에서 Backspace 누르면 이전 자릿수(우측)로 이동하며 글자 삭제. 좌우 방향키 이동 지원.

  • 입력 완료 후 Enter 누르면 즉시 정답 제출.

• 시각/청각 피드백: 정답 제출 시 Web Audio API로 맑은 효과음(딩동댕/땡) 재생 및 정답 시 Confetti(폭죽) 효과 발생. (외부 사운드 링크 사용 금지)

• 상세 해설 기능: 문제 종료 시 반드시 '단계별 해설' 화면 제공. (일의 자리 합산 및 받아올림 ➡️ 십의 자리 합산 ➡️ 최종 정답 시각화). Enter를 누르면 다음 문제로 자동 전환.

3. 🎨 Style (디자인 및 인터페이스)

• Tailwind CSS를 활용한 현대적이고 사랑스러운 파스텔톤 어린이 친화적 디자인.

• 둥글둥글한 모서리, 부드러운 그림자 효과, 귀여운 이모지 적극 활용.

• 숫자 입력 상자는 연산 상태에 따라 테두리 색상(포커스 피드백)이 부드럽게 강조되도록 디자인.

4. 🗣️ Tone (어조)

• 친절하고, 격려를 아끼지 않으며, 초등학교 저학년 어린이들의 학습 동기를 자극할 수 있는 긍정적인 메시지와 톤앤매너 유지.

5. 👥 Audience (타겟 고객군)

• 받아올림 개념을 처음 배우는 만 7~9세 초등학교 저학년 어린이.

• 조작 피로도가 전혀 없어야 하며, 레이아웃에 흔들림이나 깨짐이 없어야 함.

6. 📝 Response (최종 출력 양식)

• 모든 로직, 스타일, 오디오 처리, 정답 피드백 시스템이 하나의 파일 안에서 빈틈없이 작동하는 단일 완성형 HTML 코드만 출력할 것.

📌 블로거의 코멘트: 이 프롬프트가 훌륭한 이유!

이 프롬프트에서 가장 돋보이는 부분은 단순한 코딩 지시를 넘어 '사용자 경험(UX)'을 깊이 고민했다는 점입니다. 특히 덧셈을 할 때 일의 자리부터 계산하는 아이들의 사고방식에 맞춰, 입력 커서가 우측(일의 자리)에서 좌측(십의 자리)으로 자동 이동하게 만든 디테일과 모바일 환경을 고려한 inputmode="numeric" 속성 지정은 AI에게 꼭 명시해주어야 할 아주 훌륭한 지침입니다.

교육용 앱이나 간단한 유틸리티가 필요하시다면, 위 프롬프트를 참고하여 여러분만의 아이디어를 AI와 함께 실현해 보세요!

이 블로그 글이 도움 되셨나요? 여러분은 AI로 어떤 앱을 만들어보고 싶으신가요?  

초등 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에게 요청하면, 코딩을 전혀 모르는 사람도 훌륭한 교육용 도구를 만들어낼 수 있습니다. 아이들이 지루한 문제집 대신, 통통 튀는 디자인의 웹앱으로 수학을 즐겁게 게임처럼 배울 수 있도록 지금 바로 활용해 보세요! 

 

초등 수학: 랜덤 시계 시각 읽기 퀴즈 웹앱 생성 COSTAR Prompt

https://gemini.google.com/share/e94af68770c5

1. Context (배경)

초등학교 3학년 '길이와 시간' 단원에서는 시, 분, 초 단위까지 시각을 정확히 읽는 법을 배웁니다. 학생들은 시계의 세 바늘(시, 분, 초)의 위치를 보고 숫자로 변환하는 연습이 필요합니다.

2. Objective (목표)

사용자가 시계 이미지를 보고 시, 분, 초를 입력하여 정답을 맞히는 10문제 구성의 인터랙티브 웹앱을 제작합니다.

• 문제를 풀 때마다 랜덤한 시각이 생성되어야 합니다.

• 10문제를 모두 풀면 결과 화면이 나타나야 합니다.

3. Style (스타일)

• 비주얼: HTML5 Canvas를 사용하여 교과서 스타일의 깔끔한 아날로그 시계를 직접 그립니다.

• 바늘 구분: 시바늘(검정/굵고 짧음), 분바늘(파랑/중간), 초바늘(빨강/가늘고 김)로 명확히 구분합니다.

• UI: Tailwind CSS를 활용하여 둥근 모서리, 부드러운 그림자, 파스텔 톤 배경의 친근한 디자인을 적용합니다.

4. Tone (어조)

• 어린이 학습자를 위해 격려하고 칭찬하는 어조를 유지합니다.

• 점수에 따라 결과 메시지를 다르게 보여주어 동기를 부여합니다.

5. Audience (대상)

초등학교 3학년 학생 및 지도 교사.

6. Response (응답 형식 및 기술 요구사항)

단일 .html 파일로 모든 코드(HTML, CSS, JS)를 통합하여 작성하세요.

[핵심 기능 및 로직]

1. 문제 생성: 1~12시, 0~59분, 0~59초 사이의 랜덤한 시각 10개를 생성합니다.

2. 시계 드로잉(Canvas):

   • 60개의 작은 눈금과 5분 단위의 굵은 눈금을 표시합니다.

   • 숫자 1부터 12까지 시계 방향으로 배치합니다.

   • 시바늘은 분의 진행 상태에 따라 조금씩 이동하게 계산합니다 (예: 1시 30분이면 시바늘은 1과 2의 정중앙).

3. 입력 시스템: 시, 분, 초를 각각 입력할 수 있는 3개의 숫자 입력 칸을 제공합니다.

4. 결과 처리:

   • 0~3점: "아쉬워요! 다시 도전해 볼까요?" (빨간색 테마)

   • 4~7점: "조금만 더 힘내요!" (주황색 테마)

   • 8~9점: "참 잘했어요!" (초록색 테마)

   • 10점: "당신은 시계 박사!" (파란색 테마 + 애니메이션 효과)

5. 오답 노트: 결과 화면에서 틀린 문제 번호와 함께 '내가 쓴 답'과 '실제 정답'을 대조해서 보여줍니다.

6. 사용성: 엔터 키를 누르면 다음 문제로 넘어가고, 첫 번째 입력 칸에 자동으로 포커스가 가도록 설정합니다.