Html Anything

예시 체험

중2 과학 — 물의 온도에 따른 설탕 용해 시간 데이터 보고서 만들기

꾸민 수업 예시 직접 생성 — 에이전트 제작 새 창에서 크게 보기

선생님이 입력한 내용

중학교 2학년 과학 '용해와 용액' 단원 도입. 물의 온도에 따라 설탕이 녹는 시간이 어떻게 달라지는지 모둠 측정 자료를 한 장의 웹 보고서로 정리해, 수업에서 함께 보며 경향을 이야기하려는 상황이다.

중학교 2학년 과학 '용해와 용액' 단원에서 물의 온도에 따른 설탕의 용해 시간을 잰 자료를 '데이터 시각화 보고서' 모양(data-report)으로 만들어 주세요. 핵심 지표 카드, 그래프 두 개(온도별 평균, 회차별 측정값), 원자료 표, 수업에서 함께 읽을 관찰 포인트 3개를 넣어 주세요. 글은 모두 한국어로 써 주세요. 물의온도(℃),1회(초),2회(초),3회(초) 10,150,140,136 20,102,95,91 30,66,62,61 40,43,40,40 50,29,26,26

나온 결과

온도별 평균 용해 시간 — 10℃ 142.0초 · 20℃ 96.0초 · 30℃ 63.0초 · 40℃ 41.0초 · 50℃ 27.0초 관찰 포인트: 온도를 높이면 설탕이 물에 더 빨리 퍼진다. 10℃→20℃에서는 시간이 크게 줄지만 40℃→50℃에서는 줄어드는 폭이 작다. 탐구 방법: 물 200 mL를 정한 온도로 맞춘 뒤 설탕 100 g을 넣고, 모두 녹을 때까지 초시계로 3회 반복 측정.

직접 해 보기 — 3단계

1. AI 에이전트(Claude Code·opencode 등)에 저장소 안내대로 이 스킬을 설치한다. 명령줄에서는 `html-anything convert 자료.csv -t data-report` 처럼 템플릿을 지정해 쓴다.
2. 학년·단원·넣을 요소를 적은 문장과 측정 자료(CSV)를 붙여 넣는다. 위 문장을 바꿔 써도 된다.
3. 만들어진 HTML 파일을 브라우저로 열어 숫자·표·그래프가 넣은 자료와 맞는지 확인하고, 필요하면 다시 생성한다.

수업 상황은 이해를 돕기 위해 꾸민 예시입니다. 만든 방법: opencode (DeepSeek) + 이 스킬 (data-report 템플릿) · 확인일 2026-10-16. 그림은 이 스킬이 만든 단일 HTML 문서를 헤드리스 브라우저로 그대로 찍은 화면이다(내용은 고치지 않았다). 이 스킬은 문서 작성을 설치된 AI CLI에 맡기므로, 이 예시는 같은 전역 디자인 지침과 data-report 템플릿 규칙을 opencode(DeepSeek)가 그대로 따라 만들어 에뮬레이션한 결과다. 그래프는 Chart.js와 글꼴을 인터넷 CDN에서 불러오므로 인터넷이 되는 곳에서 열어야 한다. 화면에 넣은 수치는 실제로 측정한 값이 아니라 수업 시연을 위해 꾸민 수업용 예시 값이니, 실제 수업에서는 모둠이 직접 잰 값으로 바꿔야 한다. 회차별 값의 편차나 통계적 유의성은 계산하지 않았으므로 경향은 방향성으로만 다룬다. 만들어진 HTML의 숫자·표·그래프가 넣은 자료와 맞는지, 성취기준과 수업 흐름에 맞는지는 교사가 직접 확인해야 한다.

써 보려면

1. 저장소 nexu-io/html-anything를 엽니다.
2. 설치가 필요합니다. 절차는 저장소 안내를 따릅니다.
3. 이 기록에는 API 키가 필요하지 않다고 되어 있습니다.

출처

스타 수와 라이선스는 공식 저장소 기준이며, 일일 검증이 다시 확인합니다. 정보 정정 요청

라이선스