인터랙티브 시뮬레이션 교구 무료 HTML | 슬라이더로 그래프 움직이는 수업 도구 + 프롬프트
📌 이 글 요약
- 슬라이더로 값을 조절하면 그래프가 실시간으로 변하는 시뮬레이션 HTML 교구
- 경제(수요·공급), 과학(변인 통제), 수학(함수 그래프) 등 "변화를 시각화"하는 모든 수업에 활용
- 코딩 몰라도 프롬프트만으로 제작 + 커스터마이징 가이드
🎮 바로 써보기 + 다운로드
교과서 그래프가 "움직이면" 학생들이 이해합니다
경제 시간에 수요 곡선, 공급 곡선 그리면서 "가격이 오르면 수요량이 줄어들죠?" 하면 학생들 표정이 멍해집니다. 근데 슬라이더를 움직이면서 그래프가 실시간으로 반응하는 걸 보여주면 "아~" 소리가 나옵니다.
이 교구는 기본으로 수요·공급 시뮬레이터지만, 프롬프트만 바꾸면 어떤 종류의 "변수→결과" 시각화든 만들 수 있습니다.
📋 과목별 활용 예시
사회(경제) — 수요·공급 균형
가격 슬라이더 → 수요량/공급량 변화 → 균형가격 표시. 수요 곡선 이동(소득 증가), 공급 곡선 이동(원자재 가격) 시뮬레이션.
과학 — 변인 통제 실험
온도 슬라이더 → 용해도 변화 그래프. "온도가 올라가면 고체 용해도는?" 학생이 직접 확인.
수학 — 함수 그래프 변환
y = ax² + bx + c에서 a, b, c 슬라이더 → 포물선 모양 실시간 변화. 꼭짓점, 대칭축 자동 표시.
과학(물리) — 속도·시간·거리
속력 슬라이더 + 시간 슬라이더 → 이동 거리 계산 + 그래프 표시.
사회(지리) — 인구 피라미드
출생률/사망률 슬라이더 → 30년 후 인구 구조 예측 시각화.
🔧 제작 프롬프트
// Claude 프롬프트
인터랙티브 시뮬레이션 교구를 HTML 단일 파일로 만들어줘.
주제: 【수요·공급 균형 시뮬레이션】
과목: 【통합사회 / 경제】
기능:
- 좌표 평면에 수요 곡선(우하향)과 공급 곡선(우상향) 표시
- 슬라이더 3개: ① 소비자 소득 수준 ② 원자재 가격 ③ 세금
- 슬라이더 조절 시 곡선이 실시간 이동 + 균형점 자동 계산
- 균형 가격과 균형 거래량 숫자로 표시
- 그래프는 Canvas 또는 SVG로 구현
- 각 슬라이더 옆에 "이 변수가 뭔지" 짧은 설명 표시
- "초기화" 버튼 (모든 슬라이더 기본값으로)
- 모바일 반응형, 한국어 UI, Noto Sans KR
변형 프롬프트 예시 (과학):
"온도에 따른 고체/기체 용해도 변화 시뮬레이션. X축: 온도(0~100°C), Y축: 용해도(g/100mL). 슬라이더로 온도 조절, 그래프에서 현재 용해도 표시."
변형 프롬프트 예시 (수학):
"이차함수 y=ax²+bx+c 그래프 탐색기. 슬라이더 3개(a,b,c). 실시간으로 포물선 변화, 꼭짓점 좌표, 대칭축, x절편 자동 표시."
💡 핵심: 프롬프트 패턴
시뮬레이션 교구의 프롬프트는 항상 이 구조입니다:
- 입력 변수 — 슬라이더로 조절할 것 (2~4개)
- 출력 시각화 — 그래프/숫자/애니메이션으로 보여줄 것
- 관계 공식 — 입력이 출력에 어떤 영향을 주는지
이 3가지만 명확하면 어떤 시뮬레이션이든 Claude가 만들어줍니다.
🖼️ 그래프에 이미지/아이콘 넣기
그래프 위에 설명 이미지를 넣으려면:
💡 커스터마이징
- 슬라이더 범위: min/max/step 값 코드에서 직접 수정
- 색상: 수요 곡선(빨강), 공급 곡선(파랑) 등 CSS에서 변경
- 애니메이션: 프롬프트에 "곡선 이동 시 부드러운 애니메이션" 추가
- 시나리오 프리셋: "코로나 상황", "유가 급등" 등 버튼 한 번으로 여러 변수 동시 변경
- 퀴즈 연동: "균형가격이 X일 때 정답 확인" 버튼 추가 가능
대화 참여하기