2026년 6월 9일 화요일

초등 3학년 랜덤 나눗셈 학습기 웹앱 COSTAR 프롬프트

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

1. C - Context (배경)

단원 연계성: 초등 3학년 1학기 수학 4단원 '나눗셈'은 구구단(곱셈구구)의 역연산 개념을 처음 접하는 중요한 시기입니다.
문제점: 고정된 문항 세트만 풀 경우 학생들은 문제 패턴을 외우게 되어 진정한 의미의 연산 훈련이 이루어지지 않습니다.
솔루션: 2~9단 곱셈구구의 범위를 조합하여 무작위로 수식을 무제한 생성하는 웹 도구를 통해, 학생들이 매일 다른 문제로 완전 학습을 달성할 수 있도록 합니다.

2. O - Objective (목표)

중복 없는 무작위 10문항 생성: 매 회차 탐험을 시작할 때마다 중복되지 않는 $A \div B = C$ (단, $B, C \in [2, 9]$ 이며 $A = B \times C$) 수식을 생성합니다.
한 화면에 한 문제씩 집중 배치: 학습 피로도를 최소화하고 오답 및 입력 집중도를 향상합니다.
실시간 상단 내비게이션 동기화: 1~10번 이동 노드를 제공하여 내가 푼 문항과 안 푼 문항, 채점 후 정오답 상태를 실시간 시각화합니다.
안정적인 상태 초기화: '처음으로' 또는 '다시 풀기'를 작동 시 변수 및 입력창, 진척도를 완벽히 클리어하고 인트로 화면으로 복귀해야 합니다.
교사 수준의 고품질 해설 제공: 수식의 몫에 대응하는 나누기 이모지(●) 시각 자료와 힌트, 상세 설명을 동적으로 빌드합니다.

3. S - Style (디자인 및 기술 스택)

UI/UX 디자인 가이드:
- 컬러 스키마: 피로도가 낮고 산뜻한 민트/테알(Teal, Emerald)을 메인으로 사용하고 포인터 요소에 옐로/오렌지 사용.
- 컴포넌트 구성: 둥근 모서리(border-radius: 24px 이상)와 부드러운 그림자(shadow-md)를 적극 사용해 부드럽고 안전한 인상 부여.
- 반응형 레이아웃: 모바일 테블릿 화면 비율 및 가로폭에 최적화하여 가로 스크롤을 방지하고 터치 타겟(인풋 크기 16x16)을 넉넉하게 보장.
기술 사양:
- Single File Mandate: HTML, CSS(Tailwind CSS CDN), JS를 하나의 파일(index.html)에 배치하여 이식성 극대화.
- 외부 종속성 제거: 복잡한 LaTeX 렌더러 대신 가독성 높은 직관적인 유니코드 문자(÷, ×)를 직접 사용하여 빠른 로딩 보장.

4. T - Tone (어조)

칭찬과 격려 중심: 채점 결과에 따라 맞춤형 칭찬 문구와 스탬프(💮) 이펙트를 부여하여 성취 동기를 유발합니다.
- 100점: "퍼펙트! 정말 최고예요! 나눗셈의 완벽한 박사이시군요!"
- 80점 이상: "참 잘했어요! 아쉽게 놓친 부분만 다시 읽어 보아요."
어린이 친화적 용어 사용: '퀴즈', '채점'과 같은 딱딱한 단어보다 '탐험', '체크 완료'와 같은 친근한 언어를 배정합니다.

5. A - Audience (대상)

주요 대상: 나눗셈 개념과 계산력 향상이 필요한 초등학교 3학년 학생.
보조 대상: 초등학교 교사(수업 중 형성평가 또는 디바이스 활용 개별화 학습용) 및 자녀의 기초 연산을 봐주는 학부모.

6. R - Response (구조적 설계 명세)

웹앱의 핵심 로직 프로세스는 다음과 같이 도식화 및 명세화됩니다.

[ 인트로 화면 (홈) ] 
       │ (startQuiz() 실행 시 실시간 10문제 무작위 빌드)
       ▼
[ 학습 진행 화면 (SPA) ] ──────► 상단 네비게이션 도트 맵 실시간 갱신
       │                             - 활성 문제: 테알 하이라이트
       ├─ showQuestion(index)        - 정답 입력 완료: 연한 하늘색
       ├─ prevQuestion()             - 미입력 문항: 흰색
       └─ nextQuestion() 
       │ (10번 문항 도달 시 '채점하고 결과 보기' 버튼 활성화)
       ▼
[ 채점 및 평가 엔진 실행 ] ────► 정오답 시각 피드백 (O/X 도트맵 반영)
       │                             - 정답 문항: 초록색 도트
       │                             - 오답 문항: 빨간색 도트
       ▼
[ 결과 보고서 화면 노출 ] ────► 점수별 스탬프(💮) 및 맞춤형 피드백 제공
                                     - '틀린 문제 해설 보기' 클릭 시 
                                       1번 문항으로 순간 이동하여 개별 해설 복습 유도

핵심 데이터 및 메서드 명세

generateRandomQuestions(): 나누는 수, 몫을 난수 범위 [2, 9]에서 조합해 고유 수식을 만들고, 시각 보조 이모지 문자열 및 해설 템플릿을 생성합니다.
resetApp(): 메모리상 변수 및 브라우저 DOM 컴포넌트의 기입 상태를 완벽히 청소하고 인트로 화면으로 화면 가시성(hidden 클래스)을 스위칭합니다.
window 객체 전역 바인딩: window.resetApp = resetApp; 형태로 최상위 스코프에 연결해 브라우저 샌드박스 또는 Iframe 구동 환경에서도 완벽한 핸들러 상호작용을 확보합니다.

2026년 5월 28일 목요일

초등학생 저작권 퀴즈 제작 웹앱 COSTAR 프롬프트

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

[Context]

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

[Objective]

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

각 문제에는 다음 항목들이 필수로 포함되어야 합니다:

1. 문제 번호 및 문제 내용 (구체적인 상황 제시)

2. 보기 4개

3. 정답 여부 (true / false)

4. 오답과 정답에 대한 구체적이고 쉬운 해설 (Rationale)

5. 정답을 유추할 수 있는 가벼운 힌트 (Hint)

[Style]

- 대상 연령: 초등학교 3~6학년의 눈높이에 맞춰 친근하고 이해하기 쉬운 구어체를 사용해 주세요.

- "피고소", "형사 처벌", "민사 소송" 같은 딱딱하고 겁을 주는 법률 용어 대신 "원작자의 허락", "올바른 약속", "정직한 행동" 등 순화되고 교육적인 표현을 사용해 주세요.

- 각 문제 상황은 가상의 인물이 겪는 구체적인 행동 스토리텔링 형식으로 구성해 주세요. (예: "지우는 새로 나온 유료 게임을 돈이 부족해서 인터넷에서 무료 링크로 다운받으려고 합니다...")

[Tone]

- 잘못된 행동을 일방적으로 다그치거나 혼내는 어조가 절대 아니어야 합니다.

- "왜 그 행동이 창작자에게 상처를 주는지", "왜 이런 규칙을 지켜야 서로 즐거울 수 있는지" 친절하게 타이르는 '다정하고 교훈적인 톤'을 유지해 주세요.

- 문제를 푼 아이들이 "나도 앞으로 저작권을 잘 지켜야지!" 하고 긍정적인 도덕심을 가질 수 있도록 격려하는 분위기를 만들어 주세요.

[Audience]

- 주 청중은 초등학교 중·고학년(만 9세~12세) 어린이들입니다.

- 어려운 법률 조항을 암기하는 시험이 아니라, 일상적인 '도덕과 상식' 선에서 옳고 그름을 스스로 판단할 수 있는 난이도로 조절해 주세요.

[Response]

사용자가 퀴즈 시스템이나 교육 자료에 바로 입력하여 가공하기 편리하도록, 반드시 아래와 같이 일관되고 정밀한 JSON 구조로 응답해 주세요.

{ "questions": [

{

"questionNumber": 1,

"question": "[구체적인 일상 사례가 담긴 질문]",

"answerOptions": [

{ "text": "[보기 1]", "isCorrect": false, "rationale": "[이 보기가 오답인 이유 설명]" },

{ "text": "[보기 2]", "isCorrect": true, "rationale": "[이 보기가 정답인 이유 설명]" },

{ "text": "[보기 3]", "isCorrect": false, "rationale": "[이 보기가 오답인 이유 설명]" },

{ "text": "[보기 4]", "isCorrect": false, "rationale": "[이 보기가 오답인 이유 설명]" }

"hint": "[정답을 유추할 수 있도록 돕는 따뜻하고 가벼운 힌트]"

}

]

}

2026년 5월 26일 화요일

세 자리 수 덧셈 모험 (CO-STAR 프롬프트)

https://gemini.google.com/share/983c9affa3e7

1. Context (배경)

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

2. Objective (목표)

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

3. Style (스타일)

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

4. Tone (어조)

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

5. Audience (청중)

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

6. Response (핵심 요구사항 & 구현 기능)

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

7. Constraint (제약 사항)

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

구구단 딸기 모험 (CO-STAR 프롬프트)

https://gemini.google.com/share/7441b1188fd3

1. Context (배경)

학습 대상: 구구단 2단에서 9단까지의 기초 암기와 곱셈의 기본 원리인 "동수누가(같은 수 여러 번 더하기)"를 익히고 있는 초등학생 어린이
현상: 단순 주입식 암기는 구구단 뒤에 숨겨진 곱하기의 원리(묶음과 총합)를 이해하기 어렵게 만듦.
해결책: 곱셈의 개념인 $N1 \times N2$(바구니 $N1$개에 딸기 $N2$개씩)를 깔끔한 시각 자료로 화면에 즉시 보여주고, 어린이가 머릿속으로 계산하거나 눈으로 보면서 바로 정답을 입력할 수 있도록 구성함. (딸기를 일일이 터치해서 세는 번거로운 단계는 생략)

2. Objective (목표)

구구단 2단에서 9단($2 \le N1, N2 \le 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 \times N2$ 수식이 주어지면, 화면에 바구니 $N1$개를 그리고 각 바구니마다 딸기 $N2$개를 정렬하여 배치할 것.
- 딸기는 사용자가 터치하여 지우는 동작 없이 고정된 시각적 참조(Scaffolding) 자료로만 제공됨.
입력 흐름:
- 문제 로드와 동시에 입력 박스(ans-input)에 자동 포커스 처리.
- 모바일 수월성을 위해 inputmode="numeric" 및 확인 버튼 구성.
채점 및 에러 핸들링:
- window.onload 이벤트를 포함하여 DOM 요소가 완벽히 로드된 후 스크립트가 로딩되도록 null 포인터 예외 원천 차단.
- 정답 시 녹색 스타일 적용 및 다음 문제 자동 로드, 오답 시 빨간색 흔들기(Shake) 효과 및 유도 힌트 텍스트 제공.

7. Constraint (제약 사항)

모든 HTML, CSS(Tailwind CSS 내장), JavaScript가 반드시 단 한 개의 .html 파일에 구현되어야 함.
외부 이미지 URL을 일절 사용하지 않고, 이모지(🍓, 🧺) 및 Tailwind CSS 디자인만으로 시각적 풍부함을 연출할 것.

2026년 5월 20일 수요일

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

https://gemini.google.com/share/4da21bb290e4

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문항) 예시:

"기록되어 눈으로 보거나 만질 수 있는 '사진'은 매체일까요?" (정답: O / 해설: 사진은 시각적 이미지를 통해 생각이나 정보를 전달하는 훌륭한 매체입니다.)
"텔레비전이나 인터넷 앱을 통해 듣는 '일기예보' 정보 자체는 매체일까요?" (정답: X / 해설: 일기예보는 전달되는 '정보 내용'입니다. 이를 전하는 '라디오'나 '날씨 앱'이 매체입니다.)
(이와 같은 방식으로 실생활 맥락과 개념이 확실히 구분되는 엄선된 15문항과 구체적인 해설을 스크립트에 반드시 포함해 주세요.)

2026년 5월 19일 화요일

'두 자리 수 덧셈 웹앱' CO-STAR 프롬프트

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

Context (배경 및 환경 설정)

초등학생들이 두 자리 수 덧셈과 받아올림(Carry) 자릿수 개념을 원활하게 이해할 수 있도록 돕는 개별 교구 웹앱이 필요해.
이 앱은 별도의 외부 라이브러리 설치나 분할 파일 없이, HTML / CSS / JS가 하나로 통합된 단일 웹 페이지 (.html) 파일로 동작해야 해.

Objective (수행해야 할 목표와 기능 상세)

기능 1: 총 10문제를 출제하며, 정확히 '5문제'는 일의 자리에서 받아올림이 있는 연산이고, 나머지 '5문제'는 받아올림이 없어야 해. (두 종류를 균등하게 생성 후 랜덤 셔플) 덧셈 결과값은 100을 넘지 않게 제어해줘.
기능 2: 초등학교 수학 교과서 규격의 완벽한 '세로셈' 레이아웃을 제공해줘. 백의 자리, 십의 자리, 일의 자리 열이 수직으로 한 치의 오차도 없이 완벽하게 정렬되도록 CSS Grid 또는 고정 너비를 설정해줘.
기능 3: 더하기 기호(+)는 아랫줄 숫자의 왼쪽(백의 자리 열)에 오도록 정밀 배치해줘.
기능 4: 사용자가 직접 입력할 수 있는 실제 입력창(<input>) 3개를 결과선 아래 백/십/일의 자리에 각각 배치해줘.
기능 5: 가상 키패드는 절대 만들지 마. 기기 고유의 숫자 패드가 뜨도록 <input inputmode="numeric">을 적용해줘.
기능 6 (자릿수 UX 시나리오):
- 문제 시작 시 자동으로 가장 우측의 '일의 자리' 입력창에 자동 포커스(autofocus)되게 해줘.
- 일의 자리에 숫자를 쓰면 자동으로 왼쪽의 '십의 자리'로 포커스를 넘기고, 십의 자리에 쓰면 자동으로 '백의 자리'로 포커스를 넘겨줘.
- 사용자가 마우스나 터치로 특정 자릿수를 클릭하여 개별 수정할 수 있어야 해.
- 빈 칸에서 Backspace를 누르면 자동으로 우측(이전 단계) 자릿수로 넘어가며 기존 글자를 지우게 해줘. 좌우 방향키로도 자릿수 칸 이동이 가능해야 해.
- 숫자를 다 채운 상태에서 Enter를 누르면 정답이 즉시 제출되어야 해.
기능 7: 정답 제출 시 Web Audio API를 사용해 맑은 자체 효과음(딩동댕/땡)을 재생하고, 정답일 땐 confetti 폭죽 효과를 터뜨려줘. (외부 사운드 주소 연동 금지)
기능 8: 한 문제가 끝날 때마다 '상세 단계별 해설' 화면을 반드시 보여줘. 해설은 1) 일의 자리 합산 및 받아올림 설명, 2) 십의 자리 합산 설명, 3) 최종 정답 시각화로 구성되어야 하며, 해설 화면에서 Enter를 누르면 다음 문제로 자동 전환되게 해줘.

Style (디자인 및 인터페이스 스타일)

Tailwind CSS를 사용해 현대적이고 사랑스러운 파스텔톤 어린이 친화적 디자인(둥글둥글한 모서리, 부드러운 그림자 효과, 귀여운 이모지 적극 활용)을 입혀줘.
모든 숫자 입력 상자는 연산 상태에 따라 테두리 색상(포커스 피드백)이 부드럽게 강조되도록 꾸며줘.

Tone (전체적인 어조)

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

Audience (타겟 고객군)

이 앱을 주로 사용하는 대상은 받아올림 개념을 처음 배우는 만 7~9세 초등학교 저학년 어린이들이야. 따라서 조작 피로도가 전혀 없어야 하고, 레이아웃에 흔들림이 없어야 해.

Response (최종 출력 양식)

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

2026년 4월 17일 금요일

초등 수학: 시간 단위 변환(분-초) 퀴즈 웹앱 생성 COSTAR Prompt

https://gemini.google.com/share/052a407972d8

1. Context (배경)

초등학교 3학년 '길이와 시간' 단원에서는 시간의 단위인 '초'를 배우고, 1분=60초의 관계를 이해해야 합니다. 학생들은 분 단위를 초로, 초 단위를 분과 초로 변환하는 60진법 계산에 익숙해질 필요가 있습니다.

2. Objective (목표)

교과서 73쪽 유형의 문제를 무한히 연습할 수 있는 인터랙티브 퀴즈 웹앱을 제작합니다.

예시 문제 1: 1분 40초 = ( )초
예시 문제 2: 130초 = ( )분 ( )초

3. Style (스타일)

비주얼: 따뜻한 오렌지 계열(#f97316)의 테마를 사용하여 수학 과목에 대한 친근감을 높입니다.
UI: Tailwind CSS를 활용합니다. 큼직한 숫자 입력창(Input), 진행 바(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 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~12시, 0~59분, 0~59초 사이의 랜덤한 시각 10개를 생성합니다.
시계 드로잉(Canvas):
- 60개의 작은 눈금과 5분 단위의 굵은 눈금을 표시합니다.
- 숫자 1부터 12까지 시계 방향으로 배치합니다.
- 시바늘은 분의 진행 상태에 따라 조금씩 이동하게 계산합니다 (예: 1시 30분이면 시바늘은 1과 2의 정중앙).
입력 시스템: 시, 분, 초를 각각 입력할 수 있는 3개의 숫자 입력 칸을 제공합니다.
결과 처리:
- 0~3점: "아쉬워요! 다시 도전해 볼까요?" (빨간색 테마)
- 4~7점: "조금만 더 힘내요!" (주황색 테마)
- 8~9점: "참 잘했어요!" (초록색 테마)
- 10점: "당신은 시계 박사!" (파란색 테마 + 애니메이션 효과)
오답 노트: 결과 화면에서 틀린 문제 번호와 함께 '내가 쓴 답'과 '실제 정답'을 대조해서 보여줍니다.
사용성: 엔터 키를 누르면 다음 문제로 넘어가고, 첫 번째 입력 칸에 자동으로 포커스가 가도록 설정합니다.

2026년 4월 16일 목요일

음력 중심 달력 및 위상 시각화 웹앱 제작 CO-STAR 프롬프트

https://gemini.google.com/share/5646a63bfd28

1. Context (배경)

사용자가 현재 날짜를 기준으로 음력 날짜와 달의 위상(Moon Phase)을 즉시 확인할 수 있는 인터랙티브 웹 앱을 제작해야 합니다. 정지된 데이터가 아니라 실시간성을 반영하는 것이 중요합니다.

2. Objective (목표)

사용자의 현재 시스템 날짜(new Date())를 자동으로 인식하여 시작하는 반응형 음력 달력 제작.
보름달(음력 15일) 전후의 미세한 위상 차이를 SVG로 정밀하게 시각화.
현재 보고 있는 달의 주요 천문 일정(삭, 상현, 보름, 하현)을 자동으로 추출하여 브리핑 섹션에 표시.

3. Style (스타일)

UI/UX: 다크 모드 기반 (Tailwind CSS 활용), 세련된 카드 레이아웃.
시각화: 정현파(Cosine) 함수를 이용한 부드러운 달의 그림자 변화.
언어: UI 텍스트 및 브리핑 내용은 한국어로 작성.

4. Tone (어조)

정보 전달이 명확하며, 신뢰감 있는 천문 가이드의 느낌을 주는 어조.

5. Audience (청중)

음력 절기를 챙기거나 달의 모양 변화를 관찰하고자 하는 일반 사용자.

6. Response (핵심 요구사항)

[기술적 로직]

동적 날짜 로딩: 앱 실행 시 today 변수를 시스템 날짜로 설정하고, 해당 월의 달력을 첫 화면에 렌더링.
정밀 시각화: 보름달인 음력 15일은 완벽한 원으로, 14일과 16일은 아주 미세하게 깎인 모습으로 구분되도록 SVG 반경(rx) 로직 보정.
음력 계산: 29.53059일 주기를 사용하여 월령을 계산하고, 특정 시점(예: 2026년 4월 17일 음력 3월 시작)의 월 변화를 정확히 처리.

[기능 요구사항]

실시간 헤더: '오늘' 버튼을 포함하여 현재 날짜로 즉시 복귀하는 기능 제공.
메인 인포: 상단에 '음력 X월 X일' 형식을 명시하고 선택한 날짜의 달 모양을 크게 표시.
자동 브리핑: 달력 하단에 해당 월의 음력 1일, 8일, 15일, 23일이 양력 며칠인지 자동으로 리스트업하여 브리핑.

2026년 4월 15일 수요일

마인크래프트 에듀케이션 픽셀아트를 위한 10 by 10 구획 생성 CO-STAR 프롬프트

1. Context (배경)

초등학교 중학년 학생들을 대상으로 마인크래프트 교육용 월드에서 코딩 및 미술 통합 수업을 진행하고 있습니다. 학생들이 서로의 영역을 침범하지 않고 1인당 하나의 캔버스를 가질 수 있도록 개인별 작업 공간을 자동으로 생성하려고 합니다.

2. Objective (목표)

가로 5개, 세로 5개로 구성된 총 25개의 구역을 생성하는 자바스크립트 코드를 작성해 주세요. 각 구역의 크기는 10x10이어야 하며, 바닥에는 구역 번호(1~25)가 명확하게 새겨져야 합니다. 특히 학생들이 실수로 구획 선을 파괴하지 못하도록 보호 기능을 포함해야 합니다.

3. Style (스타일)

마이크로소프트 메이크코드(MakeCode) 자바스크립트 엔진에 최적화된 코드로 작성해 주세요. 블록의 명칭(예: WHITE_WOOL)을 직접 사용하는 대신, 버전 차이로 인한 에러를 방지하기 위해 가장 안정적인 숫자 ID 방식을 사용해 작성해 주세요.

4. Tone (어조)

친절하면서도, 기술적인 설명은 군더더기 없이 명확하고 전문적인 어조를 유지해 주세요.

5. Audience (청중)

마인크래프트 에듀케이션 에디션을 수업에 활용하며, 자바스크립트를 이용해 학급 관리 도구를 자동화하고 싶어 하는 사람이 읽을 것입니다.

6. Response (결과물 요건)

명령어: 채팅창에 grid를 입력하면 실행되어야 합니다.
물리적 보호: 경계선은 **암반(ID 7)**과 **거부 블록(ID 211)**의 조합으로 만들어 서바이벌 모드의 학생들이 절대 파괴할 수 없게 하세요.
자유 편집: 각 구역의 내부 바닥에는 **허용 블록(ID 210)**을 배치하여 학생들이 그 위에서 자유롭게 블록을 쌓거나 부수며 픽셀 아트를 할 수 있도록 하세요.
시각적 안내: 바닥에 1부터 25까지의 아라비아 숫자 모양이 석탄 블록(ID 173)을 이용한 픽셀 형태로 그려지게 하세요.

-----------------------------------

7. 생성된 자바 스크립트

player.onChat("grid", function () {

let size = 10;

let count = 5;

let totalSize = count * (size + 1) + 1;

// 1. 구획 선 및 바닥 기초 공사

for (let i = 0; i <= count; i++) {

let offset = i * (size + 1);

// [구획 선] 암반(7) 아래에 거부 블록(211)을 깔아 절대 파괴 방지

blocks.fill(211, pos(offset, -2, 0), pos(offset, -2, totalSize - 1), FillOperation.Replace);

blocks.fill(7, pos(offset, -1, 0), pos(offset, -1, totalSize - 1), FillOperation.Replace);

blocks.fill(211, pos(0, -2, offset), pos(totalSize - 1, -2, offset), FillOperation.Replace);

blocks.fill(7, pos(0, -1, offset), pos(totalSize - 1, -1, offset), FillOperation.Replace);

}

// 2. 학생 작업 공간 (허용 블록 설치)

let num = 1;

for (let z = 0; z < count; z++) {

for (let x = 0; x < count; x++) {

let startX = x * (size + 1) + 1;

let startZ = z * (size + 1) + 1;

// [핵심] 구획 안쪽 바닥에 허용 블록(210)을 설치

// 이 블록이 깔린 곳 위에서는 학생들이 자유롭게 블록을 추가/삭제할 수 있습니다.

blocks.fill(210, pos(startX, -2, startZ), pos(startX + 9, -2, startZ + 9), FillOperation.Replace);

// 캔버스용 흰색 양털 (ID: 35)

blocks.fill(35, pos(startX, -1, startZ), pos(startX + 9, -1, startZ + 9), FillOperation.Replace);

// 숫자 그리기 (석탄 블록 ID: 173)

drawRealNumber(startX + 2, startZ + 2, num);

num++;

}

player.say("구획은 무적! 안쪽은 자유! 격자 생성이 완료되었습니다.");

});

// 숫자 그리기 함수는 이전과 동일하게 유지됩니다.

function drawRealNumber(x: number, z: number, n: number) {

let b = 173;

if (n >= 10) {

let ten = Math.floor(n / 10);

if (ten == 1) { for(let i=0; i<5; i++) blocks.place(b, pos(x, -1, z+i)); }

else if (ten == 2) {

blocks.fill(b, pos(x, -1, z), pos(x+2, -1, z), FillOperation.Replace);

blocks.place(b, pos(x+2, -1, z+1));

blocks.fill(b, pos(x, -1, z+2), pos(x+2, -1, z+2), FillOperation.Replace);

blocks.place(b, pos(x, -1, z+3));

blocks.fill(b, pos(x, -1, z+4), pos(x+2, -1, z+4), FillOperation.Replace);

}

x += 4;

}

let digit = n % 10;

if (digit == 1) { for(let i=0; i<5; i++) blocks.place(b, pos(x+1, -1, z+i)); }

else if (digit == 2) {

blocks.fill(b, pos(x, -1, z), pos(x+2, -1, z), FillOperation.Replace);

blocks.place(b, pos(x+2, -1, z+1));

blocks.fill(b, pos(x, -1, z+2), pos(x+2, -1, z+2), FillOperation.Replace);

blocks.place(b, pos(x, -1, z+3));

blocks.fill(b, pos(x, -1, z+4), pos(x+2, -1, z+4), FillOperation.Replace);

} else if (digit == 3) {

blocks.fill(b, pos(x, -1, z), pos(x+2, -1, z), FillOperation.Replace);

blocks.place(b, pos(x+2, -1, z+1));

blocks.fill(b, pos(x, -1, z+2), pos(x+2, -1, z+2), FillOperation.Replace);

blocks.place(b, pos(x+2, -1, z+3));

blocks.fill(b, pos(x, -1, z+4), pos(x+2, -1, z+4), FillOperation.Replace);

} else if (digit == 4) {

blocks.fill(b, pos(x, -1, z), pos(x, -1, z+2), FillOperation.Replace);

blocks.place(b, pos(x+1, -1, z+2));

blocks.fill(b, pos(x+2, -1, z), pos(x+2, -1, z+4), FillOperation.Replace);

} else if (digit == 5) {

blocks.fill(b, pos(x, -1, z), pos(x+2, -1, z), FillOperation.Replace);

blocks.place(b, pos(x, -1, z+1));

blocks.fill(b, pos(x, -1, z+2), pos(x+2, -1, z+2), FillOperation.Replace);

blocks.place(b, pos(x+2, -1, z+3));

blocks.fill(b, pos(x, -1, z+4), pos(x+2, -1, z+4), FillOperation.Replace);

} else if (digit == 6) {

blocks.fill(b, pos(x, -1, z), pos(x+2, -1, z), FillOperation.Replace);

blocks.place(b, pos(x, -1, z+1));

blocks.fill(b, pos(x, -1, z+2), pos(x+2, -1, z+2), FillOperation.Replace);

blocks.place(b, pos(x, -1, z+3)); blocks.place(b, pos(x+2, -1, z+3));

blocks.fill(b, pos(x, -1, z+4), pos(x+2, -1, z+4), FillOperation.Replace);

} else if (digit == 7) {

blocks.fill(b, pos(x, -1, z), pos(x+2, -1, z), FillOperation.Replace);

for(let i=1; i<5; i++) blocks.place(b, pos(x+2, -1, z+i));

} else if (digit == 8) {

blocks.fill(b, pos(x, -1, z), pos(x+2, -1, z), FillOperation.Replace);

blocks.place(b, pos(x, -1, z+1)); blocks.place(b, pos(x+2, -1, z+1));

blocks.fill(b, pos(x, -1, z+2), pos(x+2, -1, z+2), FillOperation.Replace);

blocks.place(b, pos(x, -1, z+3)); blocks.place(b, pos(x+2, -1, z+3));

blocks.fill(b, pos(x, -1, z+4), pos(x+2, -1, z+4), FillOperation.Replace);

} else if (digit == 9) {

blocks.fill(b, pos(x, -1, z), pos(x+2, -1, z), FillOperation.Replace);

blocks.place(b, pos(x, -1, z+1)); blocks.place(b, pos(x+2, -1, z+1));

blocks.fill(b, pos(x, -1, z+2), pos(x+2, -1, z+2), FillOperation.Replace);

blocks.place(b, pos(x+2, -1, z+3));

blocks.fill(b, pos(x, -1, z+4), pos(x+2, -1, z+4), FillOperation.Replace);

} else if (digit == 0) {

blocks.fill(b, pos(x, -1, z), pos(x+2, -1, z+4), FillOperation.Outline);

}

* 목차 *

2026년 6월 9일 화요일

1. C - Context (배경)

2. O - Objective (목표)

3. S - Style (디자인 및 기술 스택)

4. T - Tone (어조)

5. A - Audience (대상)

6. R - Response (구조적 설계 명세)

핵심 데이터 및 메서드 명세

2026년 5월 28일 목요일

2026년 5월 26일 화요일

세 자리 수 덧셈 모험 (CO-STAR 프롬프트)

1. Context (배경)

2. Objective (목표)

3. Style (스타일)

4. Tone (어조)

5. Audience (청중)

6. Response (핵심 요구사항 & 구현 기능)

7. Constraint (제약 사항)

구구단 딸기 모험 (CO-STAR 프롬프트)

1. Context (배경)

2. Objective (목표)

3. Style (스타일)

4. Tone (어조)

5. Audience (청중)

6. Response (핵심 요구사항 & 기능 사양)

7. Constraint (제약 사항)

2026년 5월 20일 수요일

1. Context (맥락)

2. Objective (목표)

3. Style (스타일)

4. Tone (어조)

5. Audience (타겟 독자)

6. Response (응답 방식)

2026년 5월 19일 화요일

'두 자리 수 덧셈 웹앱' CO-STAR 프롬프트

Context (배경 및 환경 설정)

Objective (수행해야 할 목표와 기능 상세)

Style (디자인 및 인터페이스 스타일)

Tone (전체적인 어조)

Audience (타겟 고객군)

Response (최종 출력 양식)

2026년 4월 17일 금요일

초등 수학: 시간 단위 변환(분-초) 퀴즈 웹앱 생성 COSTAR Prompt

1. Context (배경)

2. Objective (목표)

3. Style (스타일)

4. Tone (어조)

5. Audience (대상)

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

[핵심 기능 및 로직]

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

1. Context (배경)

2. Objective (목표)

3. Style (스타일)

4. Tone (어조)

5. Audience (대상)

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

[핵심 기능 및 로직]

2026년 4월 16일 목요일

음력 중심 달력 및 위상 시각화 웹앱 제작 CO-STAR 프롬프트

1. Context (배경)

2. Objective (목표)

3. Style (스타일)

4. Tone (어조)

5. Audience (청중)

6. Response (핵심 요구사항)

[기술적 로직]

[기능 요구사항]

2026년 4월 15일 수요일

마인크래프트 에듀케이션 픽셀아트를 위한 10 by 10 구획 생성 CO-STAR 프롬프트

1. Context (배경)

2. Objective (목표)

3. Style (스타일)

4. Tone (어조)

5. Audience (청중)

6. Response (결과물 요건)

7. 생성된 자바 스크립트