* 목차 *

2026년 4월 13일 월요일

초등학교 3학년 '시간 단위' 학습, AI 웹앱으로 완벽하게 이해하기 (feat. COSTAR 프롬프트)


 초등학교 3학년 '시간 단위' 학습, AI 웹앱으로 완벽하게 이해하기 (feat. COSTAR 프롬프트)

초등학교 3학년 수학, 아이들이 처음으로 '1분 = 60초', '1시간 = 60분'이라는 개념을 만나는 시기입니다. 하지만 텍스트와 숫자로만 배우면 단위가 넘어가는 '양감'을 느끼기 참 어렵죠.

그래서 오늘은 초바늘이 한 바퀴 돌 때 분바늘이 한 칸 움직이는 모습을 실시간으로 관찰할 수 있는 웹앱을 소개합니다. 복잡한 코딩 지식 없이, AI에게 전달한 잘 짜인 'COSTAR 프롬프트' 하나로 완성된 스마트한 교육 도구입니다.

🚀 완성된 웹앱 미리보기

가장 먼저, 아래 링크를 통해 완성된 웹앱의 작동 모습을 확인해 보세요! 시각적인 시뮬레이션을 통해 아이들이 시간의 흐름을 직관적으로 이해할 수 있습니다.

👉 시간 단위 시각화 웹앱 결과물 확인하기

📝 웹앱 생성을 위한 'COSTAR' 프롬프트 대공개

어떻게 이렇게 디테일한 맞춤형 교육 도구를 만들 수 있었을까요? AI의 답변 품질을 극대화하는 COSTAR 프레임워크로 작성된 기획안(프롬프트)을 그대로 공유합니다. 교육용 앱이나 자동화 도구를 기획 중이시라면 이 양식을 꼭 참고해 보세요!

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 파일로 코드를 작성하세요.

[핵심 기술 로직]

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

  • 더블 시뮬레이션:

    • 왼쪽 시계 아래에는 '00분 00초' 디지털 시각 표시

    • 오른쪽 시계 아래에는 '12시 00분' 디지털 시각 표시

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

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

💡 기획 노트 & 기술적 관전 포인트

이 프로젝트의 프롬프트에는 교육적 고민과 기술적 디테일이 아주 잘 녹아있습니다.

  1. 눈높이에 맞춘 10배속 시뮬레이션 실제 시간으로 1분을 기다리는 것은 초등학교 3학년 아이들에게 지루할 수 있습니다. 바늘의 속도를 10배 빠르게 설정하여, 짧은 집중 시간 안에 '단위가 변하는 순간'을 여러 번 관찰할 수 있게 한 것은 탁월한 학습 설계입니다.

  2. CSS 애니메이션의 고질병, '역회전' 사전 차단 디지털 시계를 코딩해 본 사람이라면 누구나 겪는 버그가 있습니다. 시곗바늘이 360도를 돌아 다시 0도(12시 방향)가 될 때, 바늘이 반대 방향으로 확 돌아가 버리는 현상이죠. 기획 단계에서부터 "누적 시간 값에 기반한 각도를 사용하라"고 AI에게 명확히 지시하여 개발 오류를 사전에 완벽히 차단했습니다.

교실에서 아이들과 함께 이 웹앱을 화면에 띄워놓고 관찰해 보세요. "선생님, 초바늘이 다 도니까 분바늘이 진짜 움직였어요!" 하는 깨달음의 순간을 맞이할 수 있을 것입니다.

에듀테크와 AI의 만남, 기획력만 있다면 이렇게 누구나 멋진 도구를 만들어 낼 수 있습니다!

By 시간: