* 목차 *

2026년 5월 20일 수요일

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

 매체 판별 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 프롬프트

 

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



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

 

초등 수학: 시간 단위 변환(분-초) 퀴즈 웹앱 생성 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)를 작성하세요.

[핵심 기능 및 로직]

  1. 랜덤 문제 생성 (10문제):

    • 유형 A (분/초 → 초): 1~3분 사이의 랜덤 '분'과 0~50초 사이의 10단위 '초'를 생성하여 합산합니다.

    • 유형 B (초 → 분/초): 61~210초 사이의 랜덤 '초'를 생성하여 60으로 나눈 몫과 나머지를 계산합니다.

  2. 인터랙티브 UI:

    • 현재 진행 상황을 알려주는 상단 프로그레스 바.

    • 문제 유형에 따라 입력 칸 개수가 유동적으로 변함 (1개 또는 2개).

    • 'Enter' 키 지원으로 빠른 문제 풀이 가능.

  3. 결과 및 피드백:

    • 10문제 풀이 후 점수 공개.

    • 오답 노트 기능: 틀린 문제의 '내가 쓴 답'과 '실제 정답'을 한눈에 비교할 수 있는 리스트 제공.

    • 점수대별 맞춤형 격려 메시지 (0~3점/4~7점/8~9점/10점).

  4. 접근성: 모바일에서도 잘 보이도록 반응형 레이아웃을 적용하고, 터치 입력이 쉽도록 입력창 크기를 충분히 확보합니다.

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

 

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


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

2026년 4월 16일 목요일

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

 

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

 


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 프롬프트

 

마인크래프트 에듀케이션 픽셀아트를 위한 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년 4월 13일 월요일

바늘이 한 바퀴 돌면 무슨 일이 생길까? 아이들을 위한 시간 시뮬레이션 앱 만들기 COSTAR Prompt

 

시간 단위(초-분-시) 관계 시각화 웹앱 생성 COSTAR Prompt


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

1. Context (배경)

초등학교 3학년 학생들은 '1분=60초', '1시간=60분'이라는 개념을 처음 배웁니다. 하지만 숫자로만 배우면 단위가 넘어가는 양감을 느끼기 어렵습니다. 따라서 초바늘이 한 바퀴 돌 때 분바늘이 한 칸 움직이는 모습을 실시간 시뮬레이션으로 보여주는 학습 도구가 필요합니다.

2. Objective (목표)

두 개의 시계 시뮬레이션을 한 화면에 배치하여 시간의 단위를 시각적으로 대조하는 단일 HTML 웹앱을 제작합니다.

  • 왼쪽 시계: 초바늘과 분바늘의 관계 (1분 = 60초)

  • 오른쪽 시계: 분바늘과 시바늘의 관계 (1시간 = 60분)

3. Style (스타일)

  • UI/UX: Tailwind CSS를 사용하여 깔끔하고 현대적인 대시보드 스타일로 제작합니다. 슬레이트(Slate)와 블루(Blue) 톤을 사용하여 신뢰감을 줍니다.

  • 시각화: 시계에는 60개의 눈금(5단위는 굵게)이 반드시 있어야 하며, 숫자로 12, 3, 6, 9가 표시되어야 합니다.

  • 바늘 구분: 초바늘(빨강/가늘게), 분바늘(파랑/중간), 시바늘(검정/굵고 짧게)로 색상을 구분합니다.

4. Tone (어조)

학생들이 관찰에 집중할 수 있도록 설명 문구는 간결하고 명확하게 작성합니다. (예: "초바늘이 한 바퀴 돌면 분바늘이 한 칸 움직여요.")

5. Audience (대상)

초등학교 3학년 학생 및 초등 교사. 복잡한 설정 없이 브라우저에서 바로 실행되어야 합니다.

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

단일 .html 파일로 코드를 작성하세요.

[핵심 기술 로직]

  1. 역회전 방지: 바늘의 각도 계산 시 (time % 60) * 6 방식이 아닌, 누적 시간 값에 기반한 각도를 사용하여 12시 방향에서 바늘이 뒤로 튀는 현상을 방지하세요.

  2. 더블 시뮬레이션:

    • 왼쪽 시계 아래에는 '00분 00초' 디지털 시각을 표시합니다.

    • 오른쪽 시계 아래에는 '12시 00분' 디지털 시각을 표시합니다.

  3. 애니메이션: setInterval 또는 requestAnimationFrame을 사용하여 실제보다 약 10배 빠른 속도로 바늘이 전진하도록 설정하세요.

  4. 반응형 디자인: 모바일과 태블릿에서도 시계 두 개가 잘 보이도록 Flex 또는 Grid 레이아웃을 사용하세요.

초등학교 3학년 수학 단위 변환(km ↔ m) 연습 웹앱 생성 COSTAR Prompt

 

초등학교 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 비율로 섞어 배치합니다.

    1. 몇 km 몇 m몇 m로 바꾸기 (예: $1\text{ km } 200\text{ m} \rightarrow 1200\text{ m}$)

    2. 몇 m몇 km 몇 m로 바꾸기 (예: $2500\text{ m} \rightarrow 2\text{ km } 500\text{ m}$)

  • 오답 풀이 로직:

    • 틀린 문제에 대해서만 상세 설명을 노출합니다.

    • 설명에는 반드시 "$1000\text{ m}$가 모여 $1\text{ km}$가 된다"는 핵심 문장을 포함합니다.

  • 결과 화면: 점수에 따라 "거리 박사님(10점)", "조금 더 힘내요(7점 이하)" 등 차별화된 격려 메시지를 출력합니다.

초등학교 3학년 수학 cm와 mm 단위 변환 연습 웹앱 생성 COSTAR 프롬프트

 

초등학교 3학년 수학 cm와 mm 단위 변환 연습 웹앱 생성 COSTAR 프롬프트


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

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 사이의 자연수

2026년 4월 10일 금요일

Google Apps Script 비서 제작을 위한 COSTAR 프롬프트

 

Google Apps Script 비서 제작을 위한 COSTAR 프롬프트


Context (배경)

사용자는 바쁜 일정 속에서 여러 개의 구글 달력을 관리하고 있습니다. 매일 아침 전날의 피로를 잊고 새날의 일정을 한눈에 파악하기 위해, 구글 달력의 데이터를 정제하여 이메일로 발송해 주는 자동화 시스템이 필요합니다.

Objective (목표)

구글 앱스 스크립트(Google Apps Script)를 사용하여 다음 기능을 수행하는 코드를 작성하십시오.

  1. 사용자의 모든 구글 달력에서 오늘부터 향후 7일간의 일정을 가져옵니다.

  2. 일정을 '업무(Work)'와 '개인(Personal)' 카테고리로 자동 분류합니다. (분류 기준은 달력 ID 또는 이름에 특정 키워드 포함 여부로 설정 가능하게 할 것)

  3. 달력 제목에 포함된 불필요한 서술어, 중복된 날짜 정보, 긴 안내 문구를 제거하고 핵심 키워드 위주로 요약하는 정제 함수를 포함합니다.

  4. 정제된 데이터를 전문 비서가 작성한 보고서 형태의 HTML 이메일로 구성하여 매일 아침 지정된 시간에 발송합니다.

Style (스타일)

  • 문체: 정중하고 다정한 비서의 말투를 사용하십시오. (예: "좋은 아침입니다, 사용자님!")

  • 코드 품질: 주석을 상세히 달고, 가독성이 높으며 관리가 쉬운 클린 코드를 지향하십시오.

Tone (톤)

신뢰감 있고 체계적이며, 사용자의 하루를 응원하는 긍정적인 에너지가 느껴져야 합니다.

Audience (청중)

자신의 일상을 효율적으로 관리하고자 하는 전문직 종사자 또는 다수의 일정을 관리하는 사용자.

Response (응답 형태)

  1. Full Script: 복사하여 바로 붙여넣을 수 있는 전체 .gs 코드를 제공하십시오.

  2. HTML Layout: 이메일 본문은 모바일에서도 보기 편한 반응형 디자인(Inline CSS)을 사용하고, 날짜별로 박스 형태의 레이아웃을 적용하십시오.

  3. Setup Guide: 스크립트 실행을 위해 필요한 권한 승인 및 '시간 기반 트리거' 설정 방법을 단계별로 설명하십시오.