* 목차 *

2026년 4월 13일 월요일

바늘이 한 바퀴 돌면 무슨 일이 생길까? 아이들을 위한 시간 시뮬레이션 앱 만들기 COSTAR Prompt

 

시간 단위(초-분-시) 관계 시각화 웹앱 생성 COSTAR Prompt


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

1. Context (배경)

초등학교 3학년 학생들은 '1분=60초', '1시간=60분'이라는 개념을 처음 배웁니다. 하지만 숫자로만 배우면 단위가 넘어가는 양감을 느끼기 어렵습니다. 따라서 초바늘이 한 바퀴 돌 때 분바늘이 한 칸 움직이는 모습을 실시간 시뮬레이션으로 보여주는 학습 도구가 필요합니다.

2. Objective (목표)

두 개의 시계 시뮬레이션을 한 화면에 배치하여 시간의 단위를 시각적으로 대조하는 단일 HTML 웹앱을 제작합니다.

  • 왼쪽 시계: 초바늘과 분바늘의 관계 (1분 = 60초)

  • 오른쪽 시계: 분바늘과 시바늘의 관계 (1시간 = 60분)

3. Style (스타일)

  • UI/UX: Tailwind CSS를 사용하여 깔끔하고 현대적인 대시보드 스타일로 제작합니다. 슬레이트(Slate)와 블루(Blue) 톤을 사용하여 신뢰감을 줍니다.

  • 시각화: 시계에는 60개의 눈금(5단위는 굵게)이 반드시 있어야 하며, 숫자로 12, 3, 6, 9가 표시되어야 합니다.

  • 바늘 구분: 초바늘(빨강/가늘게), 분바늘(파랑/중간), 시바늘(검정/굵고 짧게)로 색상을 구분합니다.

4. Tone (어조)

학생들이 관찰에 집중할 수 있도록 설명 문구는 간결하고 명확하게 작성합니다. (예: "초바늘이 한 바퀴 돌면 분바늘이 한 칸 움직여요.")

5. Audience (대상)

초등학교 3학년 학생 및 초등 교사. 복잡한 설정 없이 브라우저에서 바로 실행되어야 합니다.

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

단일 .html 파일로 코드를 작성하세요.

[핵심 기술 로직]

  1. 역회전 방지: 바늘의 각도 계산 시 (time % 60) * 6 방식이 아닌, 누적 시간 값에 기반한 각도를 사용하여 12시 방향에서 바늘이 뒤로 튀는 현상을 방지하세요.

  2. 더블 시뮬레이션:

    • 왼쪽 시계 아래에는 '00분 00초' 디지털 시각을 표시합니다.

    • 오른쪽 시계 아래에는 '12시 00분' 디지털 시각을 표시합니다.

  3. 애니메이션: setInterval 또는 requestAnimationFrame을 사용하여 실제보다 약 10배 빠른 속도로 바늘이 전진하도록 설정하세요.

  4. 반응형 디자인: 모바일과 태블릿에서도 시계 두 개가 잘 보이도록 Flex 또는 Grid 레이아웃을 사용하세요.

By 시간: