활동 가져다 쓰기 · 새로 만들기

아카이브의 활동을 내 수업에 쓰는 방법과, 새 활동을 만들어 넣는 방법을 정리했습니다.

먼저 알아 두면 좋은 것 — 모든 활동은 HTML 파일 하나로 끝납니다. 외부 라이브러리도, 인터넷 연결도, 로그인도 필요 없습니다. 파일을 내려받아 더블클릭하면 그대로 열립니다.

A. 원하는 활동을 내 수업에 쓰기

목적에 따라 네 가지 방법이 있습니다. 위쪽일수록 간단합니다.

방법	이럴 때	준비물
1. 링크 공유	수업 중 화면에 띄우거나, 학생에게 주소만 보낼 때	없음
2. 파일 내려받기	인터넷이 불안한 교실, USB로 옮길 때, 내용을 고쳐 쓸 때	없음
3. 내 LMS에 넣기	구글 클래스룸·e학습터 등에 링크나 파일로 올릴 때	해당 LMS 계정
4. 내 학습 플랫폼에 넣기	학생 진도·서술 답변까지 관리하고 싶을 때	이 저장소 배포

방법 1 · 링크 공유 (가장 간단)

활동 목록에서 원하는 활동을 열고, 주소창의 주소를 그대로 복사해 보내면 됩니다.

https://sced9120.github.io/math-platform/activities/gongtong2-01-segment-division.html

학생은 아무것도 설치하지 않고 휴대폰·태블릿·PC 어디서나 바로 조작할 수 있습니다.

방법 2 · 파일 내려받기 (오프라인·수정용)

활동을 연 다음 마우스 오른쪽 → 다른 이름으로 저장 (또는 Ctrl/⌘ + S)
저장한 .html 파일을 더블클릭하면 인터넷 없이도 열립니다.
내용을 바꾸고 싶으면 메모장·VS Code 등으로 열어 글자를 고치면 됩니다. 수식·문구는 파일 위쪽 HTML 부분에, 그래프 동작은 아래쪽 <script> 부분에 있습니다.

저장소를 통째로 받으려면:

git clone https://github.com/sced9120/math-platform
cd math-platform/docs/activities

이 폴더의 HTML 파일들이 전부 활동입니다.

방법 3 · 구글 클래스룸 등 LMS에 넣기

링크로 — 과제·자료에 위 주소를 붙여넣기 (가장 쉽고 항상 최신)
파일로 — 내려받은 .html 을 그대로 첨부 (오프라인에서도 열림)

활동 안의 ‘내 생각 적기’는 학습 플랫폼에서만 저장됩니다. LMS에 올릴 때는 LMS의 과제 제출 기능을 함께 쓰시면 됩니다.

방법 4 · 내 학습 플랫폼에 넣기 (진도·답변까지 관리)

이 저장소에는 활동뿐 아니라 학생 계정·진도·서술 답변·AI 도우미가 포함된 학습 플랫폼이 함께 있습니다. 배포한 뒤 아래처럼 활동을 넣습니다.

저장소를 배포합니다. (README의 ‘5분 만에 배포하기’ 참고) 배포 후 접속하면 관리자 계정 만들기 화면이 뜹니다.
교사 화면 → 교과 관리에서 교과를 만들고, 단원/활동 관리에서 단원을 만듭니다.
단원 안에서 활동 추가 → 유형 ‘HTML’ 선택
가져올 활동 HTML 파일을 텍스트 편집기로 열어 전체 복사(Ctrl/⌘ + A, C) 후 붙여넣기
학생 글 작성란에 서술 문항을 적으면, 활동 아래에 ‘내 생각 적기’가 생기고 답변이 저장됩니다.
저장 → 공개로 바꾸면 학생에게 보입니다.

활동이 많다면 하나씩 붙여넣는 대신 스크립트로 한 번에 넣을 수 있습니다. scripts/gongtong2-registry.mjs 에 목록을 적고 node --env-file=.env.local scripts/build-gongtong2.mjs --publish 를 실행하면 됩니다.

붙여넣은 활동은 sandbox="allow-scripts" 인 iframe 안에서 실행됩니다. 앱의 로그인 정보나 쿠키에는 접근할 수 없으니, 남이 만든 활동을 넣어도 계정이 위험해지지 않습니다. 다만 내용 자체는 직접 확인하고 넣으세요.

B. 새 활동을 만들어 아카이브에 넣기

저장소를 복사(fork)해서 자기 아카이브를 꾸리거나, 이 저장소에 활동을 보태고 싶을 때의 절차입니다.

1) 활동 파일 만들기

가장 빠른 방법은 비슷한 활동을 복사해 고치는 것입니다. 모든 활동이 같은 뼈대를 씁니다.

cd docs/activities
cp gongtong2-01-segment-division.html gongtong2-30-my-activity.html

파일 하나에 아래가 모두 들어 있습니다.

<style> — 디자인 (그대로 두면 다른 활동과 통일됩니다)
<section class="screen"> — 화면 하나. 여러 개 두면 위쪽 번호로 넘길 수 있습니다.
<script> — 그래프·조작 로직. Plane(svg, lo, hi) 헬퍼로 좌표평면을 그립니다.

자주 쓰는 도구

P.grid() 격자·축 · P.line(m,b,색) 직선 · P.circle(cx,cy,r,색) 원
P.plot(fn,색) 함수 그래프 · P.plotSeg(fn,색) 끊기는 그래프(점근선 등)
P.handle(x,y,색,"A") + P.onDrag(cb) — 드래그되는 점
<input type="range"> — 슬라이더

AI에게 맡기고 싶다면 docs/04_HTML_ACTIVITY_PROMPT.md 에 활동 생성용 프롬프트 틀이 있습니다.

2) 목록에 등록하기

scripts/gongtong2-registry.mjs 를 열고 REG 배열에 한 줄 추가합니다.

{ unit: "I", order: 10, title: "내가 만든 활동",
  desc: "한 줄 소개 (목록에 표시됩니다)",
  file: "gongtong2-30-my-activity.html", height: 980,
  rp: "학생이 답할 서술 문항" },

항목	뜻
`unit`	어느 단원인지 — `"I"`, `"II"`, `"III"`
`order`	그 단원 안에서의 순서 (0부터)
`desc`	아카이브 목록에 보일 한 줄 소개
`rp`	‘내 생각 적기’ 문항. 비우면 서술란이 안 생깁니다

3) 공통 요소 붙이고 목차 다시 만들기

# 확장 탐구 화면 (수평·수직 확장 + 도전 질문)
node scripts/add-extension-screens.mjs

# 활동 맨 위 "← 활동 목록" 링크
node scripts/add-archive-nav.mjs

# 아카이브 목차 다시 생성
node scripts/build-archive-index.mjs

# (플랫폼도 쓴다면) DB 에 반영
node --env-file=.env.local scripts/build-gongtong2.mjs --publish

모두 여러 번 실행해도 안전합니다. 이미 들어간 부분은 알아서 갈아끼웁니다. 확장 탐구 문구는 add-extension-screens.mjs 안의 EXT 목록에 파일명을 키로 적습니다.

4) 올리기

git add -A
git commit -m "활동 추가: 내가 만든 활동"
git push

GitHub Pages 를 켜 두었다면 1~2분 뒤 아카이브에 자동 반영됩니다.

내 것으로 만들기 — 다른 교과·학년으로 바꾸려면 scripts/gongtong2-registry.mjs 의 SUBJECT·UNITS 를 고치면 됩니다. 자세한 안내는 저장소의 docs/06_BUILD_FROM_SCRATCH.md 에 있습니다.

도움이 필요하면

소스와 이슈: github.com/sced9120/math-platform
플랫폼 구조 설명: 저장소의 docs/05_STRUCTURE_GUIDE.md
처음부터 만들기: 저장소의 docs/06_BUILD_FROM_SCRATCH.md

← 활동 목록으로 돌아가기