# 칠판 강의 화면 설계서 (v2.1 · 2026-10)

> 이 파일 하나를 AI에게 첨부하고 **주제만 적어 보내면** 칠판 강의 화면이 만들어지도록 쓴 규칙서입니다.
> 예: 「첨부한 설계서대로 만들어 줘. 주제: 중1 기체의 압력, 45분」
> 개념정리 학습지(PDF)를 함께 주면 그 빈칸 번호와 정답 그대로, 없으면 AI가 빈칸을 정하고 학생용 빈칸 학습지 글도 함께 만듭니다.
> 디자인 설계서(DESIGN.md, 예: apple)를 함께 받았다면 색·글꼴·여백의 세부는 그 설계서를 따르고, 아래 규칙이 그보다 먼저입니다. 없으면 5절의 값을 씁니다.
> 출처: 조승재(해누리중학교 과학) · 직렬·병렬 / 소비 전력 / 기체의 압력 강의 화면을 만들며 정리한 규칙

---

## 0. 이 파일을 받은 AI가 할 일 (한 번에 만들기)

**받는 것**: 주제(꼭) · 학년과 수업 시간(없으면 중학교, 45분으로 정한다) · 있으면 개념정리 학습지, 교사의 설명 순서(대본), 꼭 넣을 비유·실험, 오개념 주의 목록, 저작권 한 줄.
모르는 것은 되묻지 말고 알맞게 정해서 진행하고, 정한 것을 마지막 보고에 적는다.

**순서** — 사용자가 따로 말하지 않으면 아래를 한 번에 이어서 한다.
1. **빈칸 지도**: 표(번호 | 정답 | 빈칸이 든 문장 | 쪽).
   - 학습지가 있으면 4절대로 학습지의 번호와 정답을 그대로 옮긴다(정답이 없는 칸은 교과서 수준으로 채우고 «(추측)» 표시).
   - 학습지가 없으면 그 학년 교과서의 핵심 개념으로 빈칸 문장 8~16개를 만든다. 교과서 용어를 쓰고, 한 문장에 빈칸 1~2개.
2. **장면 목록**: 표(장면 | 면 색 | 제목 | 핵심 움직임 하나 | 단계마다 열리는 빈칸 번호 | 교사가 할 말 요약). 9절 구성대로. 그림에 쓸 «뜻마다 색 하나» 약속표도 함께.
3. **만들기**: 1~12절을 지켜 HTML 한 파일로 만든다.
4. **스스로 점검하고 고치기**: 12절 점검표를 실제로 확인하고, 틀린 곳은 고친 뒤에 보고한다.
5. **보고**: 빈칸 표(장면·단계·번호·정답), 점검 결과, 내가 정한 것(학년·장 수·추측한 정답·예시 숫자), 학습지가 없었으면 **학생용 빈칸 학습지 글**(같은 번호의 빈칸 문장 목록, 인쇄해서 나눠 줄 수 있게).

**도구에 따라**
- 폴더에서 일하는 AI(Claude Code, Codex 등): 파일을 폴더에 `index.html`로 저장하고, 브라우저로 열어 처음부터 끝까지 넘기고 ← 로 되돌아와 확인한 뒤 보고한다.
- 웹 채팅: 1·2의 표를 짧게 보여 준 뒤 이어서 코드를 `<!DOCTYPE html>`부터 `</html>`까지 한 번에 쓴다. 한 번에 받을 수 있는 길이가 짧으므로 장면은 10~12장으로 줄이고, 끊길 것 같으면 장면을 더 줄여서라도 끝까지 쓴다.
- 사용자가 «코드는 아직 쓰지 마»라고 하면 그 단계까지만 하고 멈춘다(빈칸 지도 → 장면 목록 → 만들기를 나눠 부탁하는 경우).

## 1. 무엇을 만드는가

- 한 차시의 개념을 교사가 설명하며 넘기는 **강의 화면 HTML 한 파일**. HTML·CSS·JavaScript를 한 파일에 넣는다. 외부 라이브러리는 쓰지 않는다(글꼴 Pretendard CDN 하나만 허용, 인터넷이 없으면 시스템 글꼴로 넘어가게).
- 교실 전자칠판·TV에 띄운다. 학생은 종이 개념정리 학습지를 들고 화면에서 열리는 빈칸을 **같은 번호** 칸에 받아 적는다.
- 같은 파일이 학생 복습판도 된다(주소 끝 `?s=1`).

## 2. 무대

- **1920 × 1080 고정 무대**를 창 크기에 맞춰 비율을 지키며 키운다(남는 곳은 검은 띠, 가운데 정렬). 모든 좌표·글자 크기는 이 무대의 px로 쓴다.
- 안전 여백: 좌우 120px, 머리말은 위에서 78px, 내용은 아래 960px까지. 1016px 줄은 저작권 한 줄 자리.
- 글자 최소 24px. 제목 60~70px, 본문 32~38px, 빈칸이 든 학습지 문장 36~40px. 교실 맨 뒤에서 읽혀야 한다.

## 3. 장면과 단계 (넘기기)

- 장면(slide) = **들어올 때 저절로 나오는 것** + **누를 때마다 하나씩 진행되는 단계**들.
- 다음: → · Space · Enter · PageDown · 화면 클릭 · 왼쪽으로 밀기. 장면의 마지막 단계에서 다음을 누르면 다음 장면.
- 이전: ← · PageUp · Backspace · 오른쪽 클릭 · 오른쪽으로 밀기 → **한 단계 전 모습**. 되돌리기는 «장면 처음 상태로 되돌린 뒤 그 단계까지 애니메이션 없이 순간 재생»으로 만든다. 그래서 언제 돌아와도 같은 모습이어야 한다.
- 애니메이션이 도는 중에 다음을 누르면 지금 움직임을 끝 상태로 마치고 다음 단계로 간다. 아무리 빨리 연타해도 화면이 깨지거나 빈칸이 건너뛰어지면 안 된다.
- 위치 기억: 주소 끝 `#장면.단계`(예 `#7.2`)를 갱신해 새로고침해도 그 자리에서 다시 열린다.
- 키: F 전체 화면 · T(또는 N) 대본 열고 닫기 · O 전체 장면 보기(썸네일, 누르면 그 장면으로) · R 지금 단계 다시 보기 · M 소리 켜고 끄기 · B 검은 화면 · W 흰 화면 · Home/End 처음/끝 · H 도움말.
- 아래 가운데에 작은 조작 막대(이전·쪽수·다음·소리·전체 화면)를 두고, 마우스를 움직일 때만 잠깐 보였다가 사라지게 한다.

## 4. 학습지 빈칸 (가장 중요)

- 학습지의 **번호 붙은 빈칸을 하나도 빠짐없이 한 번씩**, 학습지 순서대로, 정답 글자 그대로(띄어쓰기·단위·괄호까지) 넣는다.
- 빈칸 모양: 밑줄 + 왼쪽 위의 **번호 배지**(파란 원 안 흰 숫자). 처음에는 번호와 밑줄만 보이고 정답은 가려 둔다. 그 단계가 되면 정답이 톡 나타난다(짧게 커지며 등장 + 짧은 «띠링»).
- 한 단계에 빈칸 1~3개. 빈칸 앞뒤 문장은 학습지 문장 그대로 옮긴다(명백한 오타만 다듬기).
- 정답이 열리기 전에 그 답이 제목·그림 이름표·다른 문장에 먼저 보이면 안 된다(답 누설 금지 — 가장 잦은 실수).
- 번호 없는 학습지 표·그림 칸도 화면에서 단계마다 채워 준다(답 색은 빈칸 정답과 같은 파랑).
- 학습지에 «그려 보자» 활동이 있으면: 먼저 빈 그림을 보여 주고(학생이 그릴 시간) → 다음 단계에서 정답 그림.
- 정리 장에서는 번호 빈칸을 다시 쓰지 않는다.

## 5. 디자인

- **면 색으로 구획**한다: 흰 `#ffffff` · 밝은 회색 `#f5f5f7` · 검정 `#000000` · 짙은 회색 `#1d1d1f`. 장면마다 번갈아 쓴다. 정의·학습지 문장은 밝은 면, 움직이는 그림·시뮬레이션은 어두운 면이 잘 어울린다.
- **강조색은 파랑 하나**: 밝은 면 `#0066cc`, 어두운 면 `#2997ff`. 빈칸 정답·번호 배지·중요한 낱말에만.
- **뜻마다 색 하나** 약속표를 먼저 정하고 모든 장면에서 지킨다(예: 전기 (+)전하 붉은 주황 · (−)전하·전자 하늘 · 힘 보라 · 전류 앰버 · 면적·부피 앰버). 밝은 면에서는 같은 색의 짙은 판, 어두운 면에서는 밝은 판을 쓴다.
- 글꼴 Pretendard Variable. 제목은 굵기 600·자간 −0.02em 안팎, 제목 위에 회색 작은 꼬리표(28px). 본문 굵기 400.
- 카드: 모서리 둥글게 18px, 밝은 면에서는 `#f5f5f7` 바탕, 어두운 면에서는 흰색 6% 반투명. **그림자·테두리·그라데이션 장식 없음.**
- 한 장에 글을 적게: 꼬리표 + 제목 + 학습지 카드(빈칸 줄 2~4줄) + 그림 하나.
- 장면에 들어왔을 때(0단계) 제목만 덩그러니 있는 빈 화면이 되지 않게 한다. 그림 하나나 질문 한 줄은 처음부터 보이고, 단계마다 더해진다.
- 그림은 **코드로 그린 SVG**(도형·화살표·입자·회로·그래프). 사진·AI가 그린 그림·이모지 그림을 쓰지 않는다. 로고·브랜드 이름은 넣지 않는다.
- 디자인 설계서가 없을 때 쓰는 값: 글자 `#1d1d1f`(밝은 면) · `#f5f5f7`(어두운 면), 보조 글자 `#6e6e73` · `#a1a1a6`, 뜻 색 다섯 벌 — 어두운 면 `#FF6A3D` `#64D2FF` `#FFD60A` `#BF5AF2` `#30D158` / 밝은 면(짙은 판) `#C4391B` `#0077B6` `#9A7400` `#8A3FC0` `#1E8B3E`. 등장 곡선 `cubic-bezier(.2,.8,.2,1)`.

## 6. 움직임

- 장면마다 **핵심 움직임 하나**. 개념을 보여 주는 움직임만(장식용 움직임 금지).
- 등장은 0.5~0.9초, 부드럽게 감속. 같은 장면 안에서 시간차를 두고 하나씩.
- 시뮬레이션은 식대로 계산해 움직인다(입자 수를 실제로 세기, 빠르기·비례를 맞추기). 화면에 보이는 숫자는 계산한 값이어야 한다.
- 계속 도는 움직임(입자·흐름)은 장면을 떠나면 멈춘다. 무작위가 필요하면 씨앗이 정해진 난수로(다시 와도 같은 모습).
- 컴퓨터 설정이 «동작 줄이기»면 움직임을 줄인다.

## 7. 소리 (선택)

- 소리 파일 없이 WebAudio로 합성한다. 빈칸 정답 «띠링»(음높이를 조금씩 바꿔 단조롭지 않게), 등장 «톡», 정리 «차임», 그리고 주제 소리 몇 개(정전기 «탁», 스위치 «딸깍», 물체 떨어짐 «쿵» 등).
- 브라우저 정책상 첫 클릭 뒤부터 소리가 난다. M 키와 조작 막대 단추로 켜고 끈다. 학생 복습판(`?s=1`)은 처음에 꺼져 있다.
- 되돌리기·순간 재생·건너뛰기 때는 소리를 내지 않는다. 시끄러운 반복음은 쓰지 않는다.

## 8. 대본

- 장면마다 교사가 할 말 2~4문장을 넣는다. 교사가 준 설명 순서에서 옮기고 교사 말투를 살린다. 학생에게 던지는 질문은 그대로. 설명 순서를 받지 못했으면 중학생에게 말하듯 «~입니다 / ~해요 / ~볼까요?»로 쓴다.
- T 키를 누르면 화면 아래에 대본 패널이 열린다(장면 번호·제목·단계 n/m·다음 장면 제목 함께).
- 대본·학습지·교과서에 없는 숫자와 사실은 지어내지 않는다. 예시 숫자가 꼭 필요하면 «(예)»를 붙인다.

## 9. 구성

- 표지(질문을 던지는 움직이는 장면) → 궁금증 질문 → 학습지 순서대로 개념 장면 → 표·계산·그래프 → 생활 속 예 → 정리 카드(세 장 안팎) → 처음 질문의 답.
- 장 수는 학습지 빈칸 수와 수업 시간에 맞춘다: 45분 한 차시에 10~25장 안팎. 처음 설계를 크게 잡지 않는다.
- 첫 장 또는 표지에 «번호가 붙은 칸이 열리면 학습지의 같은 번호 칸에 적는다»를 한 줄로.
- 마지막 장 아래(1016px 줄)에 저작권 한 줄(교사가 준 문구).

## 10. 학생 복습판 (`?s=1`)

- 대본 단추와 T 키를 숨긴다. 소리는 처음에 꺼짐. 나머지(넘기기·빈칸)는 같다.
- 표지에 넘기는 법 한 줄(«화면을 누르거나 → 키로 넘겨요»).

## 11. 내용 정확성 (기능보다 먼저)

- 학생이 잘못 알게 되는 그림·문장(오개념)은 어떤 효과보다 먼저 고친다.
- 그림 속 개수, 화살표 방향·길이, 그래프의 점 좌표와 눈금을 계산해 앞뒤가 맞는지 확인한다. 과학이면 입자·전하 기호의 개수와 단위(N, Pa, A, V, Ω …)까지, 사회·역사면 연도·지명·인물, 국어·영어면 맞춤법과 인용한 원문을 교과서와 맞춰 본다.
- 비유를 쓰면 비유가 맞지 않는 곳을 대본에 한 줄 적는다.
- 교사가 준 «오개념 주의 목록»(헷갈리기 쉬운 점 목록)을 장면마다 점검한다. 목록을 받지 못했으면 그 주제에서 학생들이 흔히 헷갈리는 점 3~5개를 스스로 꼽아 장면마다 점검하고, 보고에 그 목록을 적는다.
- 그 학년이 아직 배우지 않은 개념·용어·공식은 쓰지 않는다.

## 12. 다 만든 뒤 스스로 점검하고 보고할 것

1. 빈칸 표: 장면 번호 | 단계 | 빈칸 번호 | 정답 — 번호 1부터 끝까지 한 번씩, 정답 글자 일치, 순서대로인지.
2. 처음→끝으로 넘기기, 끝→처음으로 되돌리기, 연타, 새로고침 뒤 같은 자리에서 열리는지.
3. 글자 겹침·잘림·화면 밖으로 나감·24px 미만 글자가 없는지.
4. 답 누설(열리기 전에 정답이 보이는 곳)이 없는지.
5. 내용이 틀렸거나 학생이 오해할 수 있는 곳(장면 번호와 함께).
6. 브라우저 콘솔 오류 0.