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년 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 파일로 코드를 작성하세요.

[핵심 기술 로직]

역회전 방지: 바늘의 각도 계산 시 (time % 60) * 6 방식이 아닌, 누적 시간 값에 기반한 각도를 사용하여 12시 방향에서 바늘이 뒤로 튀는 현상을 방지하세요.
더블 시뮬레이션:
- 왼쪽 시계 아래에는 '00분 00초' 디지털 시각을 표시합니다.
- 오른쪽 시계 아래에는 '12시 00분' 디지털 시각을 표시합니다.
애니메이션: setInterval 또는 requestAnimationFrame을 사용하여 실제보다 약 10배 빠른 속도로 바늘이 전진하도록 설정하세요.
반응형 디자인: 모바일과 태블릿에서도 시계 두 개가 잘 보이도록 Flex 또는 Grid 레이아웃을 사용하세요.

초등학교 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 프롬프트

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

Context (배경)

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

Objective (목표)

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

사용자의 모든 구글 달력에서 오늘부터 향후 7일간의 일정을 가져옵니다.
일정을 '업무(Work)'와 '개인(Personal)' 카테고리로 자동 분류합니다. (분류 기준은 달력 ID 또는 이름에 특정 키워드 포함 여부로 설정 가능하게 할 것)
달력 제목에 포함된 불필요한 서술어, 중복된 날짜 정보, 긴 안내 문구를 제거하고 핵심 키워드 위주로 요약하는 정제 함수를 포함합니다.
정제된 데이터를 전문 비서가 작성한 보고서 형태의 HTML 이메일로 구성하여 매일 아침 지정된 시간에 발송합니다.

Style (스타일)

문체: 정중하고 다정한 비서의 말투를 사용하십시오. (예: "좋은 아침입니다, 사용자님!")
코드 품질: 주석을 상세히 달고, 가독성이 높으며 관리가 쉬운 클린 코드를 지향하십시오.

Tone (톤)

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

Audience (청중)

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

Response (응답 형태)

Full Script: 복사하여 바로 붙여넣을 수 있는 전체 .gs 코드를 제공하십시오.
HTML Layout: 이메일 본문은 모바일에서도 보기 편한 반응형 디자인(Inline CSS)을 사용하고, 날짜별로 박스 형태의 레이아웃을 적용하십시오.
Setup Guide: 스크립트 실행을 위해 필요한 권한 승인 및 '시간 기반 트리거' 설정 방법을 단계별로 설명하십시오.

웹앱 개발에서 프론트엔드와 백엔드를 분리해야 하는 3가지 이유

간단한 웹앱을 만들 때, HTML 파일 하나에 모든 기능을 넣으려는 유혹에 빠지기 쉽습니다. 하지만 실무적인 관점과 보안 측면에서 볼 때, 프론트엔드(UI)와 백엔드(Server)의 분리는 선택이 아닌 필수입니다. 그 이유를 정리합니다.

1. 보안의 핵심: "금고 열쇠를 길거리에 두지 마라" (Security)

가장 결정적인 이유는 API Key(자격 증명)의 노출입니다.

단일 파일의 문제: 유튜브 API를 사용하려면 고유의 API 키가 필요합니다. 이를 HTML/JS 파일 하나에 다 넣으면, 브라우저의 '소스 보기'만으로도 누구나 사장님의 키를 훔쳐갈 수 있습니다. 타인이 내 키를 도용해 할당량을 다 써버리거나 부정 사용을 할 경우 그 책임은 고스란히 주인에게 돌아옵니다.
분리 시 장점: 백엔드(Code.gs)는 구글 서버 내부에서만 실행됩니다. API 키를 서버라는 '금고' 안에 숨겨두고 결과값만 화면에 던져주기 때문에 외부에서는 절대 키를 알 수 없습니다.

2. 통신의 장벽: "CORS(교차 출처 리소스 공유) 문제" (Connectivity)

브라우저는 보안상 자신이 접속한 도메인이 아닌 다른 곳(유튜브 서버 등)으로 직접 데이터를 요청하는 것을 엄격히 제한합니다.

단일 파일의 문제: 일반 HTML 파일에서 유튜브 API를 직접 호출하면 브라우저가 "위험한 요청"이라며 차단해 버리는 경우가 허다합니다.
분리 시 장점: 백엔드(GAS)는 서버 대 서버로 통신합니다. 구글 서버가 직접 유튜브 서버에 "사장님이 요청하신 데이터 좀 줘"라고 말하는 방식이라 브라우저의 제약에서 자유롭고 훨씬 안정적입니다.

3. 유지보수와 확장성: "공장 라인과 전시장 분리" (Scalability)

단일 파일의 문제: 기능이 늘어날수록 코드가 수천 줄로 불어나 스파게티처럼 꼬이게 됩니다. 디자인 수정하려다 핵심 로직을 건드리는 사고가 빈번해집니다.
분리 시 장점: * 프론트엔드: '어떻게 보여줄 것인가(UI/UX)'에만 집중합니다. (디자인 수정이 자유로움)
- 백엔드: '어떻게 데이터를 처리할 것인가(Logic)'에만 집중합니다. (기능 추가가 용이함)
- 나중에 데이터베이스(구글 시트) 연동이나 AI 분석 기능을 추가할 때도 백엔드만 톡 건드리면 되므로 훨씬 전문적인 관리가 가능합니다.

2026년 4월 9일 목요일

[COSTAR] 초등 국어 '문장의 짜임' 수수께끼 생성 프롬프트

https://gemini.google.com/share/3f11332a27ae

이 프롬프트는 초등학생의 문해력 향상과 문장의 구조(어찌하다, 어떠하다, 무엇이다)를 학습시키기 위한 전용 도구입니다.

1. Context (배경)

당신은 초등학교 저학년 국어 교육 전문가이자 창의적 사고를 돕는 퀴즈 설계자입니다.
현재 학생들은 '누가/무엇이' + '어찌하다(동작)', '어떠하다(상태)', '무엇이다(정체)'라는 세 가지 문장 틀을 배우고 있습니다.

2. Objective (목표)

학생들이 세 문장의 설명을 듣고 사물이나 생물의 정체를 유추할 수 있는 수수께끼를 생성합니다.
각 수수께끼는 반드시 지정된 3단계 문장 구조를 엄격히 따라야 합니다.

3. Style (스타일)

문장 1 (어찌하다): 동작과 움직임을 생생한 동사로 표현 (예: 하늘을 날아다닙니다, 꼬리를 흔듭니다).
문장 2 (어떠하다): 성질과 상태를 묘사하는 형용사 위주 표현 (예: 털이 보들보들합니다, 색깔이 아주 화려합니다).
문장 3 (무엇이다): 정체나 범주를 정의하는 명사형 표현 (예: 사람의 친구인 동물입니다, 겨울에 쓰는 방한 도구입니다).

4. Tone (톤앤매너)

친절하고 따뜻하며, 학생들의 호기심을 자극하는 교육적인 어조를 유지합니다.
설명(e) 부분은 학생이 정답을 맞혔을 때 칭찬해주거나 추가적인 지식을 전달하는 다정한 선생님의 목소리로 작성합니다.

5. Audience (타겟)

초등학교 1~3학년 학생들 (어휘 수준을 이에 맞춤).

6. Response (응답 형식)

결과물은 웹 애플리케이션의 데이터 배열에 즉시 추가할 수 있도록 아래의 JSON 객체 리스트 형식으로만 출력하세요.

[출력 예시]

[
  { 
    "s": "밤하늘에서 밝게 빛납니다. 모양이 동그랗고 노랗습니다. 밤을 비춰 주는 자연 위성입니다.", 
    "t": "달", 
    "e": "지구 주위를 도는 유일한 위성인 달을 잘 맞혔어요!" 
  }
]

7. 요청 사항

위의 모든 규칙을 준수하여 새로운 수수께끼 **[숫자 입력, 예: 20]**개를 생성해 주세요.
일상 속 사물, 곤충, 과일, 자연물 등 아이들이 친숙해하는 소재를 골고루 섞어주세요.

문장의 짜임 학습 웹앱 제작 프롬프트 (COSTAR Framework)

https://gemini.google.com/share/050f53e2ed3b

1. Context (배경)

초등학생들이 국어 시간에 배우는 '문장의 짜임(어찌하다, 어떠하다, 무엇이다)'을 재미있게 복습할 수 있는 교육용 도구가 필요합니다. 학생들은 문장의 마지막 서술어의 성격에 따라 세 가지 유형을 구분하는 법을 배워야 합니다.

2. Objective (목표)

사용자가 접속할 때마다 전체 문제 은행(약 100개 권장)에서 무작위로 10문제를 추출하여 출제하는 퀴즈 앱을 제작합니다.
10문제를 모두 풀면 즉시 점수를 산출합니다.
마지막 화면에서는 모든 문제에 대한 정답 여부와 상세 해설을 보여주는 '오답 풀이' 기능을 포함합니다.
'다시 시작' 버튼을 누르면 새로운 10문제 세트가 무작위로 생성되어야 합니다.

3. Style (스타일)

현대적인 웹 UI/UX: Tailwind CSS를 사용하여 깔끔하고 부드러운 디자인(라운드 코너, 그림자 효과 등)을 적용하세요.
반응형 디자인: 모바일, 태블릿, PC 어디서든 최적화된 화면을 보여주세요.
시각적 요소: Lucide-React 같은 아이콘 라이브러리를 사용하여 직관적인 인터페이스를 만드세요.

4. Tone (어조)

초등학생이 대상이므로 친절하고 격려하는 어조를 사용하세요. (예: "와우! 문장의 달인이시네요!")
퀴즈 진행 중에는 긴장감보다는 즐거움을 줄 수 있는 밝은 톤을 유지하세요.

5. Audience (대상)

주 타겟은 초등학교 저학년 및 중학년 학생입니다.
글자 크기는 충분히 커야 하며, 복잡한 메뉴 대신 직관적인 버튼 위주로 구성하세요.

6. Response (응답 형식)

단일 파일 React 컴포넌트(One-file Component)로 작성하세요.
데이터 구조는 masterData라는 이름의 배열 안에 객체 형태 { s: "문장", t: "유형", e: "해설" }로 포함하세요.
모든 주석과 화면 표시 텍스트는 한국어로 작성하세요.

핵심 기능 요구사항

상태 관리: 시작 화면, 퀴즈 진행 화면, 결과 화면(오답 풀이 포함)의 3단계 상태를 관리할 것.
랜덤 로직: sort(() => Math.random() - 0.5) 등을 활용하여 문제 은행에서 10개를 무작위로 추출할 것.
오답 풀이: 사용자가 선택한 답과 실제 정답을 비교하여 시각적으로 구분(초록/빨강)해 보여줄 것.
해설 데이터: 각 문제 객체에 포함된 해설(e 필드)을 결과 화면에서 팁 형태로 노출할 것.

2026년 4월 8일 수요일

3학년 1학기 1단원 평가 웹앱 제작을 위한 CO-STAR 프롬프트

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

Context (배경) 너는 초등학교 3학년 과학 교육 전문가이자 웹 개발자야. 현재 3학년 1학기 과학 1단원 학습을 마친 학생들이 자신의 실력을 점검할 수 있는 재미있고 직관적인 단원평가 웹 애플리케이션을 만들려고 해.

Objective (목표) 학생들이 10개의 문제를 풀고, 즉시 점수를 확인하며, 틀린 문제를 다시 복습할 수 있는 단일 파일(HTML/JS/Tailwind CSS) 기반의 웹앱을 제작해줘.

Style (스타일)

디자인: 초등학생의 눈높이에 맞춰 파스텔 톤의 밝은 색상(주황, 하늘색)을 사용하고, 둥근 모서리와 큰 버튼을 배치해줘.
말투: "안녕 친구들!", "정말 잘했어!"와 같이 친근하고 격려하는 한국어 어조를 사용해줘.

Tone (어조) 학습 동기를 유발하는 긍정적이고 활기찬 분위기여야 해. 틀렸을 때도 "다시 한번 생각해보자!"와 같이 부드럽게 안내해줘.

Audience (청중) 태블릿이나 PC를 사용하는 초등학교 3학년 학생들과 이를 지도하는 교사.

Response (응답 형식 및 요구사항)

파일 구조: 모든 HTML, CSS(Tailwind CSS 라이브러리 사용), JavaScript를 하나의 .html 파일에 담아줘.
문제 구성: 교과서 및 실험 관찰 내용과 유사한 4지 선다형 객관식 10문제 (힘의 작용, 지레의 원리, 과학적 관찰/분류/측정, 지구의 모습 등 포함).
기능:
1. 인트로 화면: 시작 버튼과 단원명이 보임.
2. 퀴즈 화면: 한 번에 한 문제씩 보여주며, 진행 바(Progress Bar)를 상단에 배치.
3. 결과 화면: 100점 만점 기준 점수 표시, "참 잘했어요!" 등 점수별 칭찬 문구.
4. 복습 기능: '틀린 문제 다시 보기' 버튼을 통해 틀린 문제의 지문과 정답, 해설(Rationale)만 모아서 보여줌.
에셋: 아이콘은 이모지(Emoji)를 적극 활용하고, 수식이나 과학 기호가 필요하면 LaTeX 형식을 사용해줘.

* 목차 *

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. 생성된 자바 스크립트

2026년 4월 13일 월요일

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

1. Context (배경)

2. Objective (목표)

3. Style (스타일)

4. Tone (어조)

5. Audience (대상)

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

[핵심 기술 로직]

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

1. Context (배경)

2. Objective (목표)

3. Style (스타일)

4. Tone (어조)

5. Audience (대상)

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

[기술적 세부사항]

[학습 콘텐츠 요구사항]

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

1. Context (배경)

2. Objective (목표)

3. Style (스타일)

4. Tone (어조)

5. Audience (대상)

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

[기술적 요구사항]

[기능적 요구사항]

[입력 데이터 (가변)]

2026년 4월 10일 금요일

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

Context (배경)

Objective (목표)

Style (스타일)

Tone (톤)

Audience (청중)

Response (응답 형태)

웹앱 개발에서 프론트엔드와 백엔드를 분리해야 하는 3가지 이유

1. 보안의 핵심: "금고 열쇠를 길거리에 두지 마라" (Security)

2. 통신의 장벽: "CORS(교차 출처 리소스 공유) 문제" (Connectivity)

3. 유지보수와 확장성: "공장 라인과 전시장 분리" (Scalability)

2026년 4월 9일 목요일

[COSTAR] 초등 국어 '문장의 짜임' 수수께끼 생성 프롬프트

1. Context (배경)

2. Objective (목표)

3. Style (스타일)

4. Tone (톤앤매너)

5. Audience (타겟)

6. Response (응답 형식)

7. 요청 사항

문장의 짜임 학습 웹앱 제작 프롬프트 (COSTAR Framework)

1. Context (배경)

2. Objective (목표)

3. Style (스타일)

4. Tone (어조)

5. Audience (대상)

6. Response (응답 형식)

핵심 기능 요구사항

2026년 4월 8일 수요일

3학년 1학기 1단원 평가 웹앱 제작을 위한 CO-STAR 프롬프트