# 손글씨 단권화 설계서 (handnote-spec.md)

> 한 단원을 A4 여섯 쪽 손글씨 노트로 정리하는 설계서입니다. 이 파일을 AI에게 첨부하거나 끝까지 붙여 넣고, 단원 내용(교과서·내 수업 노트)을 함께 주면 같은 모양의 단권화가 나옵니다.
> 제가 만든 예: 전기와 자기 손글씨 단권화 6쪽 — https://scienceisjo.github.io/growing-teachers/subject/electricity-handnote.pdf
> 만든 사람: 조승재(해누리중 과학) · 고쳐 쓰고 나누셔도 됩니다. 나누실 때 출처만 남겨 주세요.

---

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

### 무엇이 나오나요
- A4 세로 여섯 쪽: 본문 다섯 쪽 + 맨 끝 「찐막 정리」 한 쪽
- 손글씨 글꼴, 두 단, 소제목마다 형광펜 밑줄
- 그림은 AI 그림(이미지 생성)이 아니라 **도형과 기호로 직접 그린 그림**입니다. 그래서 + 와 − 개수, 화살표 방향, 글자가 틀어지지 않고, 틀린 곳은 한 줄만 고치면 됩니다.

### 준비할 것
1. **단원 내용** — 교과서 해당 쪽, 내 수업 노트, 학습지 중 하나. AI는 여기 있는 내용만 씁니다. 붙여 넣거나 PDF·사진으로 첨부하세요.
2. **단원 차례** — 중단원·소단원 이름(예: 1. 전기의 발생 → 마찰 전기, 정전기 유도).
3. (PDF로 바로 받고 싶을 때만) **손글씨 글꼴 파일(.ttf)** — 네이버 나눔손글씨처럼 OFL로 나눠 주는 글꼴. 아래 「만드는 방법 나」를 쓸 때 첨부합니다.

### 쓰는 법
1. 이 파일과 단원 내용을 AI에게 주고 "손글씨 단권화 설계서대로 ○○ 단원을 만들어 줘"라고 말합니다.
2. AI가 먼저 **쪽 구성표**(쪽마다 소제목·그림·표)를 보여 줍니다. 빠진 내용, 시험에 꼭 나오는 것을 여기서 고쳐 주세요.
3. "좋아, 만들어 줘" 하면 만듭니다.
   - 웹 채팅(캔버스·아티팩트가 되는 곳): HTML 한 파일 → 브라우저에서 열고 [인쇄 → PDF로 저장]. 인쇄 설정에서 **배경 그래픽 켜기, 여백 없음**.
   - 코드를 돌릴 수 있는 AI(ChatGPT 파일 만들기, Claude 코드 실행 등): PDF를 바로 만들어 줍니다.
4. 받으면 **그림부터 확인**하세요. 부호, 화살표 방향, 개수, 단위가 맞는지 보는 것은 선생님 몫입니다.

---

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

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

### 0. 맡을 일
사용자가 준 단원 내용으로 **손글씨 단권화 A4 여섯 쪽**을 만듭니다. 본문 다섯 쪽은 단원 순서대로, 여섯째 쪽은 「찐막 정리」입니다.

### 일하는 차례
1. 단원 내용이 없으면 먼저 달라고 합니다. 학년·과목·단원 이름도 확인합니다.
2. **쪽 구성표를 먼저** 보여 줍니다: 쪽 | 큰 제목 | 소제목(번호) | 그림 | 표 | ★(시험에 자주 나오는 것). 사용자가 "바로 만들어 줘"라고 했으면 건너뜁니다.
3. 확인을 받으면 만들고, 넘기기 전에 아래 「건네기 전에 확인할 일곱 가지」를 하나씩 봅니다.

### 어기면 안 되는 규칙
1. **내용은 사용자가 준 자료 안에서만** 씁니다. 자료에 없는 사실·수치·예시를 더하고 싶으면 구성표에 「추가 제안」으로 따로 적어 허락을 받습니다.
2. **그림은 이미지 생성 기능으로 만들지 않습니다.** HTML이면 인라인 SVG로, PDF면 그리기 명령(선·원·사각형·화살표·글자)으로 직접 그립니다. 사진·AI 그림·캐릭터는 넣지 않습니다.
3. 그림 속 글자는 SVG `<text>`(또는 PDF 글자)로 씁니다. 글자를 그림으로 만들지 않습니다.
4. 과학 내용이 그림에서 틀리지 않게 합니다: 보존되는 양(전하 개수, 질량, 원자 수 등)은 그림 전후에 같게, 화살표 방향은 본문 설명과 같게, 크기 비율은 실제 관계와 어긋나지 않게.
5. 한 쪽이 넘치면 글자를 줄이지 말고 문장을 줄이거나 다음 쪽으로 넘깁니다. **쪽 수는 여섯 쪽으로 고정**합니다.
6. 생략하지 않습니다. "(이하 생략)", "..." 없이 여섯 쪽 전부를 만듭니다.

### 1. 쪽 짜임
- A4 세로(210×297mm), 안쪽 여백 위아래 14mm·좌우 13mm.
- **위 띠**: 왼쪽에 대단원 이름(예: VII. 전기와 자기), 오른쪽에 만든 사람 표시와 쪽 번호(예: @계정 / 01). 아래로 얇은 회색 선.
- **큰 제목**: 중단원 이름을 크게(28~32pt), 오른쪽 끝에 그 쪽 키워드를 작게(예: 마찰 전기 · 정전기 유도).
- **두 단**: 왼쪽 단을 다 채운 뒤 오른쪽 단. 한 쪽에 소제목 2~4개.
- **소제목**: "1. 마찰 전기와 대전"처럼 번호를 붙이고, 글자 아래쪽 절반에 형광펜 밑줄.
- **아래 띠**: 왼쪽에 과목과 짧은 한 줄(예: 중2 과학 · 과학은 세상을 보는 또 다른 눈입니다), 오른쪽에 쪽/전체(예: 1 / 6).

### 2. 색 약속 (이 색만 씁니다)
| 이름 | 값 | 쓰는 곳 |
|---|---|---|
| 먹 | `#222222` | 본문 글자 |
| 빨강 | `#d64541` | 양(+), 꼭 기억할 결론, ★ |
| 파랑 | `#2f6fd0` | 음(−), 보충 설명 |
| 연두 형광 | `rgba(150,220,110,.45)` | 소제목 밑줄 |
| 노랑 형광 | `rgba(255,222,70,.6)` | 외워야 할 한 문장 밑줄 |
| 연회색 | `#a0a0a0` | 그림 테두리, 보조선, 위·아래 띠 선 |

과목에 따라 빨강·파랑의 뜻을 바꿔도 되지만(예: 산·염기), 한 단권화 안에서는 같은 뜻으로만 씁니다.

### 3. 글 쓰는 법
- 노트체로 짧게: "~이다", "~한다" 또는 명사로 끝내기. 한 줄에 한 생각.
- 순서: 정의 → 예 → 그림 → 비교(표). 원인과 결과는 "→"로 잇습니다.
- 헷갈리는 두 개념은 반드시 **비교 표**로(예: 마찰 전기와 정전기 유도 — 접촉·전자 이동·결과).
- 시험에 자주 나오는 것은 문장 끝에 ★, 외울 문장은 노랑 형광.
- 학생 이름·학교 이름은 넣지 않습니다.

### 4. 그림 규칙
- 그림은 연회색 얇은 테두리 상자 안에, 단 너비를 넘지 않게.
- 기호는 동그라미 안 + / − 처럼 단순한 도형으로. 같은 뜻은 같은 모양·같은 색.
- 이름표는 그림 바로 옆에, 선과 겹치지 않게. 그림 아래에 한 줄 설명.
- 전후 비교 그림은 왼쪽(전) → 오른쪽(후)으로, 사이에 화살표와 변화 이름.

### 5. 「찐막 정리」 쪽 (여섯째 쪽)
- 큰 제목 「찐막 정리」 + 단원 이름.
- 단원 전체의 핵심 문장 10~15개(번호 목록), 헷갈리는 짝 비교 표 1~2개, 식·단위 상자(있을 때).
- 새 내용은 넣지 않고 앞 다섯 쪽에서만 뽑습니다.

### 6. 만드는 방법 (둘 중 하나)

**가. HTML 한 파일 → 인쇄해서 PDF (기본)**
- 글꼴: Google Fonts의 손글씨 글꼴 하나(예: Gaegu, Nanum Pen Script)를 본문·제목에 같이 씁니다.
- 쪽마다 `<section class="page">` 하나, 여섯 개.
- 아래 뼈대를 그대로 씁니다.

```html
<link href="https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&display=swap" rel="stylesheet">
<style>
@page{size:A4;margin:0}
*{box-sizing:border-box}
body{margin:0;background:#e9e9e9;font-family:'Gaegu',cursive;color:#222;-webkit-print-color-adjust:exact;print-color-adjust:exact;word-break:keep-all}
.page{width:210mm;height:297mm;margin:8mm auto;background:#fff;padding:14mm 13mm;position:relative;overflow:hidden;display:flex;flex-direction:column}
@media print{body{background:#fff}.page{margin:0;break-after:page}}
.band{display:flex;justify-content:space-between;font-size:11pt;color:#555;border-bottom:1px solid #a0a0a0;padding-bottom:2mm}
.title{display:flex;align-items:baseline;justify-content:space-between;margin:4mm 0 3mm}
.title h1{font-size:30pt;margin:0}
.title small{font-size:11pt;color:#555}
.cols{flex:1;column-count:2;column-gap:8mm;font-size:12.5pt;line-height:1.55}
h2{font-size:16pt;margin:0 0 2mm;display:inline;background:linear-gradient(transparent 55%,rgba(150,220,110,.45) 55%)}
.hl{background:linear-gradient(transparent 55%,rgba(255,222,70,.6) 55%)}
.r{color:#d64541}.b{color:#2f6fd0}
.fig{break-inside:avoid;border:1px solid #a0a0a0;border-radius:2mm;padding:2mm;margin:2mm 0}
.fig svg{width:100%;height:auto;display:block}
table{border-collapse:collapse;width:100%;font-size:11.5pt;break-inside:avoid}
td,th{border-bottom:1px solid #ccc;padding:1mm 1.5mm;text-align:left}
.foot{display:flex;justify-content:space-between;font-size:10.5pt;color:#555;border-top:1px solid #a0a0a0;padding-top:2mm}
</style>
```

**나. 코드를 돌릴 수 있을 때 → PDF 바로 만들기**
- 사용자가 첨부한 손글씨 글꼴(.ttf)을 등록해 씁니다(예: Python ReportLab). 글꼴이 없으면 HTML 방법으로 바꿉니다.
- 그림은 선·원·사각형·화살표·글자 그리기 명령으로 그립니다.
- 쪽 짜임·색·글 쓰는 법은 위와 같습니다. 만든 PDF는 파일로 건넵니다.

### 7. 건네기 전에 확인할 일곱 가지 (하나라도 걸리면 고친 뒤 건네기)
1. 여섯 쪽인가? 다섯째 쪽까지 본문, 여섯째 쪽이 찐막 정리인가?
2. 사용자가 준 자료에 없는 내용을 넣지 않았는가?
3. 그림에 이미지 생성·사진을 쓰지 않았는가? 그림 속 글자가 글자로 되어 있는가?
4. 그림 전후에 보존되는 양이 같고, 화살표 방향이 본문 설명과 같은가?
5. 색 약속 밖의 색을 쓰지 않았는가? 빨강·파랑의 뜻이 처음부터 끝까지 같은가?
6. 넘친 쪽이 없는가? 위 띠·아래 띠·쪽 번호가 모든 쪽에 있는가?
7. 생략 없이 여섯 쪽 전부 들어 있는가?