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

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 형식을 사용해줘.

주사위 & 계산기 웹앱 제작 프롬프트 (CO-STAR 기법)

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

1. Context (배경)

초등학교 수학 수업 시간(3학년 1학기 덧셈과 뺄셈 단원)에 학생들이 게임판 위에서 주사위를 던져 이동하고, 그 과정에서 발생하는 복잡한 연산을 도와줄 수 있는 디지털 도구가 필요합니다. 교실의 스마트 패드 환경에서 학생들이 쉽고 재미있게 사용할 수 있어야 합니다.

2. Objective (목표)

화면이 왼쪽과 오른쪽으로 2분할된 단일 파일(HTML/JS/CSS) 기반 웹 애플리케이션을 제작하십시오. 왼쪽에는 인터렉티브한 주사위가, 오른쪽에는 사용하기 쉬운 계산기가 배치되어야 합니다.

3. Style (스타일)

UI 디자인: 깔끔하고 현대적인 스타일. Tailwind CSS를 사용하여 시각적 완성도를 높입니다.
색상 대비: 왼쪽(주사위)은 밝은 배경(White/Blue-50)을 사용하여 학습지의 느낌을 주고, 오른쪽(계산기)은 어두운 배경(Dark Slate/Black)을 사용하여 기계적인 계산기 느낌을 강조하십시오.
애니메이션: 주사위를 던질 때 실제 굴러가는 듯한 0.5초 내외의 부드러운 회전 효과를 적용하십시오.

4. Tone (어조)

친근하고 명확하며, 초등학생이 보기에 직관적이어야 합니다.
복잡한 텍스트보다는 아이콘(Emoji)과 큰 버튼을 활용하여 "도구"로서의 목적에 충실하십시오.

5. Audience (대상)

주 사용자: 초등학교 3학년 학생 (터치 조작이 미숙할 수 있음).
환경: 학교에서 사용하는 태블릿 PC 또는 스마트 패드 (반응형 레이아웃 필수).

6. Response (핵심 요구 사항)

[기술적 명세]

단일 파일: 모든 HTML, CSS, JavaScript 로직을 하나의 .html 파일 안에 포함하십시오.
2분할 레이아웃: flex를 사용하여 화면을 정확히 세로로 2분할합니다. (모바일/세로 모드 대응 포함)

[주사위 기능]

비주얼: 실제 주사위와 동일한 점(Dot) 배열(1~6)을 SVG 또는 CSS로 구현하십시오.
로직: Math.random()을 사용하여 1부터 6까지의 숫자가 균등한 확률로 나오게 설정하십시오.
상호작용: '던지기' 버튼은 누르기 쉽게 크게 배치하십시오.

[계산기 기능]

기본 연산: 사칙연산(+, -, ×, ÷)과 소수점 입력을 지원해야 합니다.
기록 기능: 현재 계산 중인 수식(예: 125 + 34)을 결과값 위에 작은 글씨로 표시하는 '히스토리' 영역을 만드십시오.
편의성: 큰 숫자 버튼, 'C'(초기화), 'DEL'(한 글자 삭제) 버튼을 포함하십시오.

[가이드라인]

외부 이미지 링크를 사용하지 말고, 아이콘은 이모지나 CSS로 대체하십시오.
가독성이 좋은 폰트(Pretendard 등)를 기본으로 설정하십시오.

2026년 4월 7일 화요일

COSTAR 기반 주간 일정 브리핑 최적화 프롬프트

[Context: 맥락]

당신은 최고 경영진이나 전문직 종사자를 보좌하는 15년 경력의 베테랑 수석 비서입니다. 당신의 상사(사용자)는 바쁜 비즈니스 일정, 개인적 자산 관리, 그리고 소중한 가족 및 개인 일정을 동시에 관리하고 있습니다. 당신의 임무는 흩어진 일정들을 하나로 모아 완벽한 우선순위를 제안하는 것입니다.

[Objective: 목표]

사용자의 연동된 모든 캘린더 데이터를 분석하여, 향후 7일간의 일정을 전략적으로 브리핑하십시오. 단순한 정보 전달을 넘어 자산 관리의 기회 포착, 업무 리스크 방지, 중요한 개인사(기념일 등) 챙기기를 위한 비서의 제언이 반드시 포함되어야 합니다.

[Style: 스타일]

격조 있고 정중한 말투: "사장님" 또는 사용자가 지정한 호칭을 사용하며, 격조 있는 비즈니스 화법을 구사하십시오.
분석적이고 세심한 시각: 일정 간의 이동 시간, 준비물, 마감 기한 등을 날카롭게 짚어내십시오.

[Tone: 톤]

신뢰감 있고 든든한 톤을 유지하십시오. 아침의 여유를 주는 따뜻한 인사와 더불어, 업무 보고 시에는 오차 없는 명확함을 유지하십시오.

[Audience: 대상]

시간 효율성을 최우선으로 하며, 다방면의 일정을 한눈에 파악하여 전략적 의사결정을 내리고자 하는 바쁜 현대인.

[Response: 응답 형식 및 규칙]

품격 있는 인사: 요일, 계절, 날씨에 어울리는 정중한 첫 마디.
주간 흐름 요약: 이번 주의 성격을 정의하는 한 문장(예: "중요 계약이 집중된 결실의 주간입니다").
데일리 상세 브리핑: (오늘부터 7일간) 요일별 일정을 비서가 보고하듯 대화체로 정리.
전략적 비서의 조언:
- 비즈니스/금융: 회의 준비물, 마감 기한, 투자 관련 이슈 등.
- 개인/가족: 기념일, 건강 관리, 가족 행사 등 비서의 센스 있는 제언.
응원의 마무리: 활기찬 성취를 기원하는 마무리 인사.
주의사항: 가독성을 위해 굵게 표시와 불렛 포인트를 적극 활용할 것.

[실행 명령]

"위 가이드라인에 따라 연결된 내 모든 달력 정보를 분석하여 오늘부터 1주일간의 주간 브리핑을 시작해 주세요."

2026년 4월 3일 금요일

용수철저울 눈금 읽기 시뮬레이터 제작을 위한 COSTAR 프롬프트

https://gemini.google.com/share/67442dc3d3d3

1. 개요 (Context)

대상: 초등학교 3학년 과학 '1. 힘과 우리 생활' 단원 학습자
학습 목표: 1. 물체의 무게에 따라 용수철이 일정하게 늘어나는 규칙성을 관찰한다. 2. 용수철저울의 작은 눈금 한 칸이 의미하는 무게(20g)를 이해하고 정확히 읽는다.
핵심 교구: 500g 용수철저울, 120g 장난감 자동차

2. 시각적 요구사항 (Visuals)

디자인: 파스텔톤의 부드러운 실험실 느낌 (Tailwind CSS 활용).
저울 구조: - 0g~500g 범위의 눈금.
- 100g 단위마다 숫자가 써진 큰 눈금.
- 큰 눈금 사이를 5등분하는 작은 눈금 (즉, 한 칸 = 20g).
애니메이션: 물체를 고리에 거는 순간 용수철이 반동을 주며 부드럽게 늘어나는 물리 효과 적용.
눈금 확대경: 바늘이 멈춘 위치를 우측에 크게 보여주어 학생들이 작은 눈금 칸수를 직접 셀 수 있게 함.

3. 기능적 요구사항 (Functionality)

인터랙티브 드래그: 하단의 실험 물체들을 드래그하여 저울 고리에 도킹(Docking)하는 기능.
눈금 계산 가이드: - 예: 장난감 자동차(120g) 측정 시 -> "100g(큰 눈금)에서 한 칸(20g) 더 내려왔어요!"라고 단계별로 안내.
원리 설명창: "100g을 5칸으로 나누었으므로 한 칸은 20g입니다"라는 설명을 시각적(나눗셈 도식)으로 제시.
영점 조절: 실제 저울처럼 사용 전 영점을 맞추는 듯한 인터랙션 포함.

4. 기술적 사양 (Technical)

단일 HTML 파일 (JS 기반 SVG 동적 생성).
터치 환경(태블릿)에서도 원활한 드래그 앤 드롭 지원.
모든 텍스트는 초등학교 3학년 수준의 쉬운 용어 사용.

2026년 4월 2일 목요일

빗면 시뮬레이터 제작을 위한 COSTAR 프롬프트

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

1. Context (맥락)

대상: 초등학교 3학년 학생 (과학 '힘과 우리 생활' 단원 학습 중)
주제: 빗면을 이용할 때의 이점 (힘의 크기 변화)
배경 지식: 직접 들어 올리는 것보다 빗면을 이용하면 더 적은 힘이 든다는 원리를 실험으로 증명해야 함.

2. Objective (목표)

사용자가 빗면의 높이를 조절함에 따라 변화하는 힘의 크기를 시각적·수치적으로 보여주는 시뮬레이터 제작.
'직접 들어 올리기'와 '빗면 이용하기'의 힘(g)을 실시간으로 비교함.
자동차가 아래에서 위로 이동하는 애니메이션을 통해 실험의 과정을 생생하게 재현함.

3. Style (스타일)

비주얼: 'Jua' 폰트를 사용한 귀엽고 친근한 디자인. 장난감 자동차(🚗)와 용수철저울 이모지 및 그래픽 활용.
물리적 사실성: 실제 실험처럼 용수철저울이 자동차의 진행 방향(빗면과 평행)으로 배치되어야 하며, 힘이 클수록 용수철이 더 길게 늘어나는 애니메이션 포함.

4. Tone (톤)

호기심을 자극하고 실험 결과를 명확하게 칭찬해주는 긍정적인 톤.
"와! 힘이 아주 조금 들어요!", "경사가 가파르면 힘이 더 필요해요!" 등의 구어체 피드백.

5. Audience (청중)

복잡한 삼각함수(sin, cos)를 모르는 10세 어린이.
따라서 물리 법칙은 내부 로직으로만 처리하고, 겉으로는 '높이'와 '힘(g)'의 상관관계만 직관적으로 노출함.

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

기술적 사양: 단일 HTML 파일 (Tailwind CSS, SVG 애니메이션, Vanilla JS).
필수 기능:
1. 높이 슬라이더: 빗면의 기울기를 실시간으로 변경.
2. 실험 시작 버튼: 클릭 시 자동차가 빗면 하단에서 상단으로 스르륵 이동.
3. 수치 표시: 직접 들기(120g 고정) 대비 빗면의 힘을 'g' 단위 숫자로 실시간 표시.
4. 동적 게이지: 힘의 크기에 따라 색상이 변하는(초록-파랑-주황) 막대 그래프.
5. 반응형 레이아웃: 모바일과 데스크톱에서 모두 잘 보이도록 설계

지레 시뮬레이터 제작을 위한 COSTAR 프롬프트

https://gemini.google.com/share/4358e34b34d4

1. Context (맥락)

대상: 초등학교 3학년 학생 (과학 '힘과 우리 생활' 단원 학습 중)
상황: 학생들이 지레의 원리(받침점의 위치에 따른 힘의 크기 변화)를 실험실 밖에서도 직관적으로 체험할 수 있는 디지털 학습 도구가 필요함.
기존 배경: 수평 잡기 원리는 이미 학습했으나, 받침대를 움직여 물체를 들어 올리는 도구로서의 '지레' 개념에 집중해야 함.

2. Objective (목표)

사용자가 받침대의 위치를 자유롭게 조절할 수 있는 인터랙티브 시뮬레이터를 제작함.
받침대가 물체에 가까워질수록 필요한 힘이 줄어든다는 핵심 원리를 시각적으로 증명함.

3. Style (스타일)

디자인: 초등학생 눈높이에 맞춘 밝고 친근한 테마. (예: Jua 폰트, 파스텔톤 배경, 이모지 활용)
어조: 친절하고 격려하는 말투. (예: "와! 아주 가벼워요!", "조금 더 힘을 내봐요!")
시각화: 수치보다는 직관적인 '게이지'와 '아이콘 크기 변화'를 우선시함.

4. Tone (톤)

재미있고 탐구 중심적인 분위기.
복잡한 물리 공식보다는 "움직이면 변한다"는 현상에 집중하게 함.

5. Audience (청중)

과학적 용어(작용점, 힘점 등)가 아직 낯선 10세 어린이.
따라서 '물체', '받침점', '누를 때 드는 힘'과 같은 쉬운 용어를 사용함.

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

기술 스택: 단일 HTML 파일 (Tailwind CSS, Vanilla JS 포함).
핵심 UI 요소:
- 삼각형 모양의 명확한 '받침점'.
- 무게를 나타내는 '물체(📦)'와 힘을 나타내는 '손(✋)'.
- 실시간으로 변하는 '힘 게이지'와 큰 숫자 표시.
인터랙션 규칙:
- 슬라이더로 받침대 위치 조절.
- 필요한 힘의 크기에 따라 '손(✋)' 아이콘의 크기를 비례적으로 확대/축소.
- 힘의 크기에 따라 게이지 색상 변경 (초록-노랑-빨강).
- 학습 효과를 높이는 실시간 메시지 창 포함.

* 목차 *

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

주사위 & 계산기 웹앱 제작 프롬프트 (CO-STAR 기법)

1. Context (배경)

2. Objective (목표)

3. Style (스타일)

4. Tone (어조)

5. Audience (대상)

6. Response (핵심 요구 사항)

[기술적 명세]

[주사위 기능]

[계산기 기능]

[가이드라인]

2026년 4월 7일 화요일

COSTAR 기반 주간 일정 브리핑 최적화 프롬프트

[Context: 맥락]

[Objective: 목표]

[Style: 스타일]

[Tone: 톤]

[Audience: 대상]

[Response: 응답 형식 및 규칙]

[실행 명령]

2026년 4월 3일 금요일

용수철저울 눈금 읽기 시뮬레이터 제작을 위한 COSTAR 프롬프트

1. 개요 (Context)

2. 시각적 요구사항 (Visuals)

3. 기능적 요구사항 (Functionality)

4. 기술적 사양 (Technical)

2026년 4월 2일 목요일

빗면 시뮬레이터 제작을 위한 COSTAR 프롬프트

1. Context (맥락)

2. Objective (목표)

3. Style (스타일)

4. Tone (톤)

5. Audience (청중)

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

지레 시뮬레이터 제작을 위한 COSTAR 프롬프트

1. Context (맥락)

2. Objective (목표)

3. Style (스타일)

4. Tone (톤)

5. Audience (청중)

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