주사위 & 계산기 웹앱 제작 프롬프트 (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 등)를 기본으로 설정하십시오.