쌓기 나무 수평 실험 시뮬레이터
https://gemini.google.com/share/e14b3e3bc170
프롬프트는 아래와 같습니다.
1. Context (문맥)
초등 과학 교육 과정의 '물체의 무게와 수평' 단원을 학습하기 위한 인터랙티브 시뮬레이터가 필요합니다. 사용자는 실제 교구처럼 나무 토막을 판자 위에 올리고 위치를 옮기며 지레의 원리를 실험해야 합니다.
2. Objective (목표)
React를 사용하여 사용자가 직접 나무 토막을 쌓고 이동시킬 수 있는 '수평 실험 시뮬레이터'를 제작하세요.
무게(나무 토막의 개수)와 거리(중앙으로부터의 눈금)의 곱이 양쪽에서 같을 때 수평이 이루어지는 물리 로직을 정확히 구현하세요.
3. Style (스타일)
디자인: 따뜻한 나무 재질 느낌(Wood Texture)의 톤과 파스텔 오렌지 계열의 UI를 사용하세요.
분위기: 교육용 앱다운 깔끔하고 직관적인 인터페이스, 부드러운 애니메이션 효과를 적용하세요.
4. Tone (어조)
친근하고 교육적인 어조를 사용하세요.
수평이 맞았을 때와 그렇지 않을 때 시각적인 피드백을 명확히 제공하세요.
5. Audience (대상)
초등학교 학생 및 과학 교사.
복잡한 설정 없이 직관적으로 조작할 수 있어야 합니다.
6. Response (반응/제약 사항)
핵심 기능:
단일 파일 React 컴포넌트로 구현 (Lucide-react 및 Tailwind CSS 활용).
나무 토막 시스템: 단위 무게(1)를 가진 쌓기 나무 토막만 제공. 특정 위치에 드롭하면 위로 차곡차곡 쌓여야 함.
받침점(Fulcrum): 판자 아래에 나무 질감의 삼각형 받침점 이미지를 SVG로 구현.
판자(Lever Board): -5부터 5까지의 눈금이 있는 나무 판자. 중앙(0)은 받침점 위에 고정.
물리 로직: 각 블록의 위치(pos) * 무게(1)를 합산하여 토크를 계산하고, 이에 따라 판자가 실시간으로 기울어져야 함 (최대 기울기 제한).
인터랙션: 드래그 앤 드롭으로 블록 위치 변경, 블록 개별 삭제, 새 블록 추가 기능 포함.
코드 구조: 모든 컴포넌트, 스타일, 상태 관리는 하나의 .jsx 파일 안에 포함되어야 함.
세부 구현 가이드 (AI 참조용)
State Management: blocks 배열에 각 토막의 id, position, stackIndex를 저장하고, useEffect를 통해 수평 상태를 계산할 것.
Visuals: Tailwind CSS의 transition-transform을 사용하여 판자의 기울어짐을 부드럽게 표현할 것.
Responsive: 모바일 터치 이벤트(onTouchStart, onTouchMove)를 지원하여 다양한 환경에서 작동하게 할 것.
