빗면 시뮬레이터 제작을 위한 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).
필수 기능:
높이 슬라이더: 빗면의 기울기를 실시간으로 변경.
실험 시작 버튼: 클릭 시 자동차가 빗면 하단에서 상단으로 스르륵 이동.
수치 표시: 직접 들기(120g 고정) 대비 빗면의 힘을 'g' 단위 숫자로 실시간 표시.
동적 게이지: 힘의 크기에 따라 색상이 변하는(초록-파랑-주황) 막대 그래프.
반응형 레이아웃: 모바일과 데스크톱에서 모두 잘 보이도록 설계
