COSTAR 프롬프트로 만들면서 배우는 바이브 코딩

2026년 4월 16일 목요일

실시간 음력 달력 & 달 위상 시각화 웹앱 만들기 (feat. CO-STAR 프롬프트)

요즘 달의 변화나 음력 일정을 챙기시는 분들 많으시죠? 오늘은 현재 날짜를 기준으로 실시간 음력 날짜와 달의 위상(Moon Phase)을 한눈에 볼 수 있는 매력적인 인터랙티브 웹앱 제작기를 공유해 보려고 합니다.

이번 프로젝트는 생성형 AI의 결과물을 극대화하기 위해 CO-STAR 프롬프트 프레임워크를 활용하여 기획했습니다. 제가 AI에게 어떻게 명령을 내렸는지, 그 세세한 과정을 공개합니다!

💡 CO-STAR 프롬프트 구성

1. Context (배경)

단순히 정지된 데이터가 아닌, 실시간성을 반영하는 것이 핵심입니다. 사용자가 앱을 켜자마자 현재 날짜를 기준으로 음력 날짜와 달의 위상을 즉시 확인할 수 있는 인터랙티브 환경을 구축하고자 했습니다.

2. Objective (목표)

자동 날짜 인식: 사용자의 현재 시스템 날짜(new Date())를 자동으로 읽어와 시작하는 반응형 음력 달력을 만듭니다.
정밀한 시각화: 보름달(음력 15일) 전후의 아주 미세한 위상 차이까지 SVG 그래픽을 통해 정밀하게 구현합니다.
자동 천문 브리핑: 현재 보고 있는 달의 주요 천문 일정(삭, 상현, 보름, 하현)을 자동으로 추출해 브리핑 섹션에 보여줍니다.

3. Style (스타일)

UI/UX: 밤하늘과 잘 어울리는 다크 모드 기반(Tailwind CSS 활용)의 세련된 카드 레이아웃을 채택합니다.
시각화 기법: 정현파(Cosine) 함수를 이용해 달의 그림자가 변하는 모습을 부드럽고 자연스럽게 표현합니다.
언어: 모든 UI 텍스트와 브리핑 내용은 자연스러운 한국어로 제공합니다.

4. Tone (어조)

정보를 명확하게 전달하면서도, 신뢰할 수 있는 전문 천문 가이드가 설명해 주는 듯한 차분하고 전문적인 어조를 유지합니다.

5. Audience (청중)

음력 절기를 챙겨야 하거나, 밤하늘 달의 모양 변화를 관찰하고 즐기는 모든 일반 사용자가 대상입니다.

6. Response (핵심 요구사항)

🛠️ [기술적 로직]

동적 날짜 로딩: 앱 실행 시 today 변수를 시스템 날짜로 자동 설정하여, 해당 월의 달력을 첫 화면에 즉시 렌더링합니다.
정밀한 SVG 렌더링: 보름달인 음력 15일은 완벽한 원으로, 14일과 16일은 아주 미세하게 깎인 모습으로 육안으로도 구분되도록 SVG 반경(rx) 로직을 세밀하게 보정합니다.
정확한 음력 계산: 천문학적 삭망월 주기인 29.53059일을 사용하여 월령을 계산하고, 특정 시점(예: 2026년 음력 윤달 및 특정 월 시작일)의 달 변화를 오차 없이 처리합니다.

✨ [기능 요구사항]

실시간 헤더: '오늘' 버튼을 배치하여, 달력을 넘겨보다가도 언제든 현재 날짜로 즉시 복귀할 수 있게 합니다.
메인 인포메이션: 화면 상단에 직관적으로 '음력 X월 X일'을 명시하고, 선택한 날짜의 달 모양을 큼직하게 보여줍니다.
자동 브리핑 기능: 달력 하단에 해당 월의 주요 음력 일자(1일, 8일, 15일, 23일)가 양력으로 며칠인지 자동으로 매칭하여 리스트 형태로 브리핑해 줍니다.

🔍 팩트 체크 및 개발 노트

음력 주기 산출: 프롬프트에 명시된 29.53059일은 실제 천문학에서 사용하는 삭망월(Synodic month)의 평균 주기로, 매우 정확한 접근 방식입니다.
SVG 시각화: 코사인 함수를 활용한 그림자 처리는 웹에서 달의 위상을 가볍고 부드럽게 그릴 수 있는 최적의 프론트엔드 최적화 기법입니다.

🚀 완성된 웹앱 확인하기

위의 체계적인 프롬프트를 통해 완성된 결과물은 아래 링크에서 바로 확인해 보실 수 있습니다!

👉 음력 중심 달력 및 위상 시각화 웹앱 보러 가기

2026년 4월 15일 수요일

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

마인크래프트 에듀케이션 에디션을 활용한 수업, 특히 픽셀아트나 개별 건축 수업을 진행해 보신 선생님이시라면 누구나 공감하실 고민이 있습니다. 바로 "학생들이 서로의 영역을 침범하거나, 실수로 바닥과 경계선을 부수는 문제"입니다.

오늘은 이런 고민을 한 번에 해결해 줄 '10x10 절대 파괴 불가 개인 캔버스' 자동 생성 자바스크립트 코드를 소개합니다. 채팅창에 명령어 하나만 입력하면 25명의 학생이 안전하게 작업할 수 있는 공간이 1초 만에 만들어집니다!

🎯 왜 이 코드가 필요한가요?

이 코드는 초등학교 중학년 학생들을 대상으로 한 코딩 및 미술 통합 수업을 위해 맞춤 제작되었습니다. 학급 관리 도구를 자동화하여 선생님의 수업 준비 시간을 획기적으로 줄여줍니다.

💡 주요 기능 및 특징

완벽한 물리적 보호 (Griefing 방지): * 경계선과 바닥 기초는 암반(ID 7)과 거부 블록(ID 211)으로 겹겹이 쌓여 있습니다. 서바이벌 모드의 학생들은 절대 친구의 영역이나 경계선을 파괴할 수 없습니다.
안전한 자유 편집 구역:
- 각 구역의 내부 바닥(-2 좌표)에는 허용 블록(ID 210)이 깔려 있습니다. 학생들은 이 블록 위(10x10 크기의 흰색 양털 캔버스)에서만 자유롭게 블록을 설치하고 부수며 픽셀아트를 즐길 수 있습니다.
직관적인 시각적 안내:
- 1번부터 25번까지의 자리 번호가 각 캔버스 바닥에 석탄 블록(ID 173)으로 명확하게 새겨져 있어, 학생들이 자신의 자리를 쉽게 찾을 수 있습니다.
안정성 최적화: * 버전 차이로 인한 명칭(Name) 오류를 방지하기 위해 가장 안정적인 숫자 ID 방식으로 작성되었습니다.

💻 메이크코드(MakeCode) 자바스크립트

마이크로소프트 메이크코드의 자바스크립트 탭에 아래 코드를 그대로 복사하여 붙여넣기만 하면 됩니다. 게임 내 채팅창에 grid라고 입력하면 즉시 5x5(총 25개) 형태의 캔버스가 생성됩니다.

JavaScript
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일 월요일

초등학교 3학년 '시간 단위' 학습, AI 웹앱으로 완벽하게 이해하기 (feat. COSTAR 프롬프트)

초등학교 3학년 수학, 아이들이 처음으로 '1분 = 60초', '1시간 = 60분'이라는 개념을 만나는 시기입니다. 하지만 텍스트와 숫자로만 배우면 단위가 넘어가는 '양감'을 느끼기 참 어렵죠.

그래서 오늘은 초바늘이 한 바퀴 돌 때 분바늘이 한 칸 움직이는 모습을 실시간으로 관찰할 수 있는 웹앱을 소개합니다. 복잡한 코딩 지식 없이, AI에게 전달한 잘 짜인 'COSTAR 프롬프트' 하나로 완성된 스마트한 교육 도구입니다.

🚀 완성된 웹앱 미리보기

가장 먼저, 아래 링크를 통해 완성된 웹앱의 작동 모습을 확인해 보세요! 시각적인 시뮬레이션을 통해 아이들이 시간의 흐름을 직관적으로 이해할 수 있습니다.

👉 시간 단위 시각화 웹앱 결과물 확인하기

📝 웹앱 생성을 위한 'COSTAR' 프롬프트 대공개

어떻게 이렇게 디테일한 맞춤형 교육 도구를 만들 수 있었을까요? AI의 답변 품질을 극대화하는 COSTAR 프레임워크로 작성된 기획안(프롬프트)을 그대로 공유합니다. 교육용 앱이나 자동화 도구를 기획 중이시라면 이 양식을 꼭 참고해 보세요!

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 레이아웃을 사용하세요.

💡 기획 노트 & 기술적 관전 포인트

이 프로젝트의 프롬프트에는 교육적 고민과 기술적 디테일이 아주 잘 녹아있습니다.

눈높이에 맞춘 10배속 시뮬레이션 실제 시간으로 1분을 기다리는 것은 초등학교 3학년 아이들에게 지루할 수 있습니다. 바늘의 속도를 10배 빠르게 설정하여, 짧은 집중 시간 안에 '단위가 변하는 순간'을 여러 번 관찰할 수 있게 한 것은 탁월한 학습 설계입니다.
CSS 애니메이션의 고질병, '역회전' 사전 차단 디지털 시계를 코딩해 본 사람이라면 누구나 겪는 버그가 있습니다. 시곗바늘이 360도를 돌아 다시 0도(12시 방향)가 될 때, 바늘이 반대 방향으로 확 돌아가 버리는 현상이죠. 기획 단계에서부터 "누적 시간 값에 기반한 각도를 사용하라"고 AI에게 명확히 지시하여 개발 오류를 사전에 완벽히 차단했습니다.

교실에서 아이들과 함께 이 웹앱을 화면에 띄워놓고 관찰해 보세요. "선생님, 초바늘이 다 도니까 분바늘이 진짜 움직였어요!" 하는 깨달음의 순간을 맞이할 수 있을 것입니다.

에듀테크와 AI의 만남, 기획력만 있다면 이렇게 누구나 멋진 도구를 만들어 낼 수 있습니다!

[AI 교육 활용] 초등학교 3학년 수학 '단위 변환(km ↔ m)' 웹앱 만들기 프롬프트

안녕하세요! 오늘은 초등학교 3학년 친구들이 많이 헷갈려하는 길이 단위 변환(km와 m)을 재미있게 연습할 수 있는 웹앱 제작 프롬프트를 공유합니다.

최근 유용하게 쓰이는 프롬프트 작성 기법인 COSTAR 프레임워크를 활용하여, AI에게 코딩을 맡길 수 있도록 구조화했습니다. 선생님이나 학부모님들께서 아이들을 위한 맞춤형 디지털 학습지를 만들 때 참고해 보세요!

🔗 완성된 웹앱(프롬프트 결과물) 미리보기 Gemini에서 완성된 결과 확인하기

1. Context (배경)

초등학교 3학년 학생들은 "1000m는 1km라고 쓰고, 1킬로미터라고 읽는다"는 개념을 학습합니다. 이 개념을 단단하게 다지기 위해, 학생들이 스스로 문제를 풀고 즉각적인 피드백을 받을 수 있는 상호작용형 '디지털 학습지'가 필요했습니다.

2. Objective (목표)

1km = 1000m의 관계를 활용한 단위 변환 문제를 무작위로 생성하고, 자동 채점 및 상세한 오답 풀이를 제공하는 단일 HTML 웹 애플리케이션을 제작하는 것이 목표입니다.

3. Style (스타일)

디자인: 초등학생이 친근감을 느낄 수 있도록 '거리', '길', '자연'을 상징하는 녹색(Green) 계열의 테마를 사용합니다. (Tailwind CSS 활용)
시각 요소: 딱딱한 텍스트 위주의 구성보다는 이모지(🌳, 📍, 🏃)를 적절히 배치하여 학습 동기를 부여합니다.
가독성: 저학년 학생들도 스마트폰이나 태블릿에서 쉽게 터치하고 조작할 수 있도록 큰 글자 크기와 넓은 입력창을 적용합니다.

4. Tone (어조)

"함께 풀어봐요!", "정말 멋져요!"와 같은 친절하고 격려하는 어조를 사용합니다.
오답 시에는 '틀렸다'는 부정적인 표현 대신, "다시 한번 원리를 살펴볼까요?"와 같이 부드럽게 재도전을 유도합니다.

5. Audience (대상)

주요 사용자: 초등학교 3학년 학생
특징 고려: 1000 단위의 큰 수 계산에 막 익숙해지는 단계입니다. 따라서 해설을 제공할 때 자릿수 구분을 명확하게 시각화해 주어야 합니다.

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

AI가 코드를 생성할 때 반드시 지켜야 할 기술적, 교육적 요구사항입니다.

💻 [기술적 세부사항]

Single File: 모든 HTML, CSS, JS 코드를 하나의 .html 파일 안에 포함하며, 외부 라이브러리는 Tailwind CSS(CDN)만 허용합니다.
Dynamic Quiz: '다시 풀기' 버튼을 클릭할 때마다 1~20 사이의 무작위 숫자를 조합하여 10문제를 새롭게 생성합니다.
Progress Tracking: 화면 상단에 현재 몇 번 문제를 풀고 있는지 보여주는 프로그레스 바(Progress Bar)를 구현합니다.

📚 [학습 콘텐츠 요구사항]

문제 유형 (5:5 비율로 혼합):
1. km와 m를 m로 바꾸기 (예: 1km 200m → 1200m)
2. m를 km와 m로 바꾸기 (예: 2500m → 2km 500m)
오답 풀이 로직:
- 틀린 문제에 대해서만 상세한 설명을 노출합니다.
- 설명란에는 반드시 "1000m가 모여 1km가 된다"는 핵심 원리 문장을 포함합니다.
결과 화면: 최종 점수에 따라 차별화된 격려 메시지를 출력합니다.
- (예: 10점 만점 → "거리 박사님!", 7점 이하 → "조금 더 힘내요!" 등)

이 프롬프트를 활용해 여러분만의 멋진 교육용 미니 앱을 만들어보시는 건 어떨까요?

[AI 활용 교육] 초등학교 3학년 수학 'cm와 mm' 변환 연습 웹앱 만들기 (COSTAR 프롬프트 공유)

안녕하세요! 오늘은 생성형 AI(챗GPT, 제미나이 등)를 활용해 우리 아이들을 위한 맞춤형 수학 연습 웹앱을 직접 만드는 방법을 소개합니다.

초등학교 3학년 1학기 수학 시간에 배우는 '길이와 시간 (cm와 mm의 관계)'는 아이들이 처음으로 단위 변환의 개념을 익히는 중요한 단원인데요. 아이들이 스마트폰이나 태블릿으로 재미있게 복습하고, 틀린 문제는 친절한 해설을 통해 다시 배울 수 있는 웹앱을 AI 프롬프트 하나로 뚝딱 만들어 보았습니다.

🌟 완성된 웹앱 먼저 보기

복잡한 코딩 없이 AI가 완성해 준 단원 평가 웹앱은 아래 링크에서 직접 확인해 보실 수 있습니다.
👉 cm 및 mm 단위 변환 연습 웹앱 실행해 보기

🛠️ 나만의 교육용 웹앱을 만드는 'COSTAR' 프롬프트

이 웹앱은 AI에게 COSTAR 프롬프트 기법을 사용하여 지시한 결과물입니다. 아래 프롬프트를 복사해서 여러분의 필요에 맞게 학년이나 단원을 자유롭게 수정해 보세요!

💡 COSTAR 프롬프트란? Context(배경), Objective(목표), Style(스타일), Tone(어조), Audience(대상), Response(응답 형식)의 앞 글자를 딴 프롬프트 작성 공식으로, AI에게 명확하고 구체적인 결과물을 얻어내는 데 효과적인 방법론입니다.

👇 [아래 영역을 복사해서 AI에게 입력해 보세요] 👇

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

선생님이나 학부모님들께서 이 프롬프트의 '입력 데이터' 부분만 수정하시면, 코딩을 전혀 몰라도 우리 아이를 위한 훌륭한 맞춤형 학습 도구를 무한대로 만드실 수 있습니다. 오늘 당장 AI와 함께 우리 아이만의 웹앱을 만들어 보는 것은 어떨까요?

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일 목요일

실시간 음력 달력 & 달 위상 시각화 웹앱 만들기 (feat. CO-STAR 프롬프트)

💡 CO-STAR 프롬프트 구성

1. Context (배경)

2. Objective (목표)

3. Style (스타일)

4. Tone (어조)

5. Audience (청중)

6. Response (핵심 요구사항)

🔍 팩트 체크 및 개발 노트

🚀 완성된 웹앱 확인하기

2026년 4월 15일 수요일

🎯 왜 이 코드가 필요한가요?

💡 주요 기능 및 특징

💻 메이크코드(MakeCode) 자바스크립트

🚀 실전 적용 및 웹앱 사용하기

2026년 4월 13일 월요일

초등학교 3학년 '시간 단위' 학습, AI 웹앱으로 완벽하게 이해하기 (feat. COSTAR 프롬프트)

🚀 완성된 웹앱 미리보기

📝 웹앱 생성을 위한 'COSTAR' 프롬프트 대공개

1. Context (배경)

2. Objective (목표)

3. Style (스타일)

4. Tone (어조)

5. Audience (대상)

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

💡 기획 노트 & 기술적 관전 포인트

[AI 교육 활용] 초등학교 3학년 수학 '단위 변환(km ↔ m)' 웹앱 만들기 프롬프트

1. Context (배경)

2. Objective (목표)

3. Style (스타일)

4. Tone (어조)

5. Audience (대상)

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

[AI 활용 교육] 초등학교 3학년 수학 'cm와 mm' 변환 연습 웹앱 만들기 (COSTAR 프롬프트 공유)

🌟 완성된 웹앱 먼저 보기

🛠️ 나만의 교육용 웹앱을 만드는 'COSTAR' 프롬프트

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