# 개념 설명 화면 설계서 (concept-screen-spec.md)

> 판서 수업 중간에 띄우는 **개념 설명용 HTML 화면**을 만드는 설계서입니다. 이 파일을 AI에게 첨부하고, 실습 페이지의 프롬프트를 채워 보내 주세요.
> 만든 사람: 조승재(해누리중 과학) · 고쳐 쓰고 나누셔도 됩니다. 나누실 때 출처만 남겨 주세요.

---

## 첫째 부분 — 선생님이 읽을 곳

- 수업 전체를 HTML로 옮기는 화면이 아닙니다. 판서로 설명하시다가 **눈으로 봐야 이해되는 개념 하나**를 보여 줄 때 띄우는 6~12장면짜리 화면입니다.
- 장면 안에 움직이는 그림이나 값을 바꿔 보는 시뮬레이션을 넣을 수 있습니다. 그림은 이미지 생성이 아니라 SVG·캔버스로 그리기 때문에 개수·방향·비율이 틀어지지 않고, 틀린 곳은 한 줄만 고치면 됩니다.
- 받으시면 **그림부터 확인**해 주세요. 크기·빠르기의 비율, 보존되는 양, 단위가 맞는지 보는 것은 선생님 몫입니다.
- 디자인 설계서(DESIGN.md)를 함께 첨부하시면 그 색과 글꼴로 만듭니다.

---

## 둘째 부분 — AI가 읽을 곳

(여기부터는 AI에게 하는 말입니다.)

### 0. 맡을 일
사용자가 준 수업 정보로, 판서 수업 중간에 띄우는 **개념 설명 화면(HTML 파일 하나, 6~12장면)**을 만듭니다.

### 일하는 차례
1. **장면 목록을 표로 먼저** 보여 줍니다: 장면 번호 · 화면 제목 · 보일 그림이나 움직임 · 화면 문장(두 줄 이하) · 선생님이 할 말 한 줄. 사용자가 "바로 만들어 줘"라고 했으면 건너뜁니다.
2. 확인을 받으면 만들고, 넘기기 전에 아래 「건네기 전에 확인할 일곱 가지」를 하나씩 봅니다.

### 어기면 안 되는 규칙
1. 내용은 사용자가 준 것과 그 학년 교과서 범위 안에서만 씁니다. 수치·사례를 더하고 싶으면 장면 표에 「추가 제안」으로 따로 적습니다.
2. **그림은 이미지 생성 기능으로 만들지 않습니다.** 인라인 SVG나 캔버스로 직접 그리고, 그림 속 글자도 SVG 글자로 씁니다. 사진·AI 그림·캐릭터는 넣지 않습니다.
3. 한 장면에 메시지 하나. 화면 글은 두 줄 이하로 두고, 설명은 선생님이 말로 합니다.
4. 움직임은 설명을 도울 때만 넣습니다. 값을 바꿔 보는 장면은 슬라이더나 단추 하나로, 값은 식으로 계산하고 지금 값과 단위를 화면에 같이 보여 줍니다.
5. 그림이 오개념을 만들지 않게 합니다: 크기·빠르기·개수의 비율, 보존되는 양(질량·전하·입자 수 등), 화살표 방향을 본문 설명과 맞춥니다.
6. 생략하지 않습니다. `<!DOCTYPE html>`부터 `</html>`까지 전부 씁니다.

### 화면 짜임
- 16:9 무대(1920×1080 기준)를 화면 크기에 맞춰 줄입니다. 위쪽에 장면 제목, 가운데에 그림, 아래쪽에 문장.
- 넘기기: → 또는 스페이스로 다음, ← 로 앞, F 로 전체 화면. 오른쪽 아래에 장면 번호(예: 3 / 9).
- 글자: 제목 56px 이상, 화면 문장 34px 이상(1920 기준). 교실 뒤에서 읽혀야 합니다.
- 색: 첨부한 DESIGN.md가 있으면 그 색과 글꼴만 씁니다. 없으면 흰 바탕, 검정 글자, 강조색 하나(파랑 `#0066cc`), 주의 표시만 빨강(`#d64541`).
- 마지막 장면: 오늘 개념 한 문장 정리.

### 건네기 전에 확인할 일곱 가지
1. 장면이 6~12개이고, 장면마다 메시지가 하나인가?
2. 그림을 이미지 생성 없이 SVG·캔버스로 그렸고, 그림 속 글자가 글자로 되어 있는가?
3. 비율·보존량·화살표 방향이 설명과 맞는가?
4. 슬라이더가 있다면 양 끝 값에서도 결과가 말이 되고, 단위가 붙어 있는가?
5. 화면 글이 두 줄 이하이고 글자가 충분히 큰가?
6. 방향키·스페이스·F 키가 동작하는가?
7. 생략 없이 파일 전체가 있는가?