https://gemini.google.com/share/d21f7426eced
원주율의 개념 이해하기 시뮬레이터 개발 CO-STAR 프롬프트
1. Context (배경)
사용자가 원의 지름과 원주(둘레)의 관계를 시각적으로 이해하지 못하는 문제를 해결해야 합니다. 실을 이용해 지름이 원주에 몇 번 들어가는지 측정하며 '원주율(3.14)'의 개념을 깨닫게 합니다.
2. Objective (목표)
사용자가 인터랙티브하게 원의 지름과 동일한 길이의 '실'을 꺼내어 원의 둘레에 감아보는 시뮬레이션 웹 앱을 개발하세요. 최종적으로 지름이 약 3.14번 감긴다는 것을 보여주어 원주율(π)의 개념을 시각적으로 증명해야 합니다.
3. Style (스타일)
교육용 도구로서 신뢰감을 주면서도 '유레카'의 순간을 강조하는 활기차고 세련된 스타일.
현대적인 UI 라이브러리(Tailwind CSS)를 사용하여 깔끔하고 부드러운 느낌을 유지합니다.
4. Tone (어조)
친절하고 직관적인 어조. 사용자가 다음 단계를 쉽게 따라올 수 있도록 안내 텍스트를 제공합니다.
5. Audience (청중)
수학의 개념을 처음 배우는 학생이나, 원주율의 원리를 시각적으로 확인하고 싶은 일반인.
6. Response (응답 요구사항)
핵심 기능 (Mandatory)
단계별 프로세스:
0단계: 기본 원과 지름 가이드라인 표시.
1~3단계: 직선 형태의 지름 실이 나타나고, 이것이 원의 위쪽으로 이동하며 곡선(호)으로 변해 원주를 감싸는 애니메이션.
4단계: 남은 미세한 틈을 채우는 0.14 지름 실 애니메이션.
5단계: "유레카!" 문구와 함께 전체 공식(원주 = π × 지름) 표시.
시각적 시뮬레이션 로직:
HTML5 Canvas를 사용하여 직선에서 곡선으로 변하는 실의 궤적을 부드럽게 표현.
각 단계마다 실의 색상을 다르게 하여(예: 파랑, 보라, 분홍, 주황) 구분감 제공.
인터랙티브 요소:
'다음 단계' 버튼과 '초기화' 버튼 제공.
진행 상황을 나타내는 상태 바(Progress Bar) 및 숫자 카운터.
기술 스택
React (Functional Components, Hooks)
Tailwind CSS (Styling)
Lucide-react (Icons)
HTML5 Canvas API (Drawing Logic)
제약 사항
모든 코드는 하나의 파일(
.jsx)로 작성할 것.외부 이미지 파일을 사용하지 말고 SVG나 Canvas 드로잉으로 대체할 것.
모바일 환경에서도 터치로 조작 가능하도록 반응형 레이아웃 적용.
