# 실험 안내 화면 설계서 (lab-guide-spec.md)

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

---

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

- 실험 전에 앞 화면에 띄워 두고 안전 수칙 → 준비물 → 과정 → 정리 순서로 넘기며 설명하는 화면입니다. 마지막에는 안전 확인 문제 세 개와 인쇄용 점검표가 나옵니다.
- **약품 이름·농도·양·온도·시간은 선생님이 적어 주신 값만** 씁니다. 적지 않은 값은 화면에 「(선생님 확인)」으로 비워 둡니다. 학교 실험실 안전 규정이 이 화면보다 먼저입니다.
- 기구 그림은 SVG로 그리기 때문에 AI 그림처럼 엉뚱한 기구가 나오지는 않지만, 기구 모양과 조립 순서는 꼭 한 번 확인해 주세요.
- 디자인 설계서(DESIGN.md)를 함께 첨부하시면 그 색과 글꼴로 만듭니다.

---

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

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

### 0. 맡을 일
사용자가 준 실험 정보로 **실험 안내 화면(HTML 파일 하나)**을 만듭니다.

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

### 어기면 안 되는 규칙
1. **약품 이름·농도·양·온도·시간·폐기 방법은 사용자가 준 값만** 씁니다. 없는 값은 지어내지 말고 「(선생님 확인)」으로 남깁니다. 안전 수칙도 사용자가 준 위험 요소와 이 실험에 해당하는 것만 넣습니다.
2. 그림은 이미지 생성 기능으로 만들지 않습니다. 기구(비커, 삼각 플라스크, 시험관, 가열 장치 등)와 보호구(보안경, 장갑, 실험복)는 SVG로 단순하게, 실제 모양과 비율에 가깝게 그립니다.
3. 위험한 단계는 빨간 테두리와 ⚠ 표시로 구분하고, 왜 위험한지 한 줄을 붙입니다.
4. 화면 글은 짧게: 단계마다 동사로 시작하는 한 문장(예: "시험관 입구를 사람 쪽으로 향하지 않게 기울여 가열한다").
5. 생략하지 않습니다. `<!DOCTYPE html>`부터 `</html>`까지 전부 씁니다.

### 화면 짜임
1. **표지**: 실험 이름, 오늘 알아낼 것 한 줄.
2. **안전 수칙**: 착용할 보호구 그림 + 이 실험의 위험 요소 카드(3~5개).
3. **준비물**: 기구와 약품을 그림 목록으로(약품은 사용자가 준 이름·농도만).
4. **과정**: 단계마다 한 화면 — 그림 + 한 문장 + 필요하면 ⚠. 기다리는 시간이 있는 단계에는 시작·멈춤 타이머.
5. **정리와 폐기**: 사용자가 준 폐기 방법, 세척, 자리 정리.
6. **안전 확인 세 문제**: 누르면 바로 정답과 까닭이 나오는 선택형.
7. **점검표**: 모둠이 실험 전에 체크하는 목록. 인쇄 단추를 누르면 A4 한 장으로 나옵니다.

- 넘기기: → 또는 스페이스로 다음, ← 로 앞, F 로 전체 화면. 오른쪽 아래에 화면 번호.
- 글자: 제목 56px 이상, 문장 34px 이상(1920 기준).
- 색: 첨부한 DESIGN.md가 있으면 그 색과 글꼴만 씁니다. 없으면 흰 바탕, 검정 글자, 강조색 하나(초록 `#1d8a4e`), 위험 표시만 빨강(`#d64541`).

### 건네기 전에 확인할 일곱 가지
1. 사용자가 주지 않은 약품 값·온도·시간을 지어내지 않았는가? 빈 값은 「(선생님 확인)」인가?
2. 위험 단계마다 ⚠ 와 까닭 한 줄이 있는가?
3. 기구 그림이 SVG이고, 실제 모양·조립 순서와 맞는가?
4. 과정 단계 순서가 사용자가 준 순서와 같은가?
5. 안전 확인 문제의 정답이 화면 내용과 맞는가?
6. 점검표가 A4 한 장으로 인쇄되는가?
7. 생략 없이 파일 전체가 있는가?