curriculum-write

Curriculum Write — 교육 자료 작성 가이드

독자 수준별 작성 기준

수준	대상	설명 방식	코드 노출 수준
🟢 입문	중1~3	비유 중심, 단계 쪼개기	최소 (붙여넣기 위주)
🟡 기본	고1~2	개념 + 실습	부분 이해 후 수정
🔴 심화	고3	원리 + 응용	직접 작성 + 디버깅

모든 교안에 레벨 표시 포함:

🟢 중학생도 할 수 있어요  
🟡 고등학생 도전!  
🔴 심화: 직접 수정해보기

---

00_개념교안.md 작성 패턴

# [단계 이름] — 오늘 배울 내용

## 🤔 생각해보기
[일상 비유로 시작하는 질문]
예: "카카오톡 메시지는 어디에 저장될까요?"

## 핵심 개념: [개념 이름]

[ASCII 다이어그램 또는 텍스트 그림]

### 비유로 이해하기
[구체적 비유 — 도서관, 식당, 우편함 등]

## 오늘 만들 것
[완성 화면 텍스트 묘사]

## 학습 목표
□ [목표 1] — 🟢
□ [목표 2] — 🟡
□ [목표 3] — 🔴

좋은 비유 예시

개념	비유
데이터베이스	도서관 대출 장부
서버	식당 주방 (주문받아 처리)
API	식당 주문서 (메뉴 항목 = 엔드포인트)
HTTP 요청	손님이 종업원에게 주문
JSON	받아적은 주문서 형식
API 키	식당 회원카드 (없으면 주문 못 함)
SQLite	학교 출석부 파일
클라우드 DB	학교 서버실에 있는 중앙 출석부

---

02_수업지도안.md 작성 패턴

# [단계] 수업 지도안

**대상:** 중학교 [학년] / 고등학교 [학년]  
**시간:** [N]차시 × 45분  
**준비물:** 노트북, 인터넷, [계정 목록]

---

## 차시별 계획

### 1차시 — 개념 이해 (45분)
| 시간 | 활동 | 교사 행동 | 비고 |
|------|------|---------|------|
| 0~5분 | 도입: 비유 질문 | 질문 던지기 | |
| 5~20분 | 개념 설명 | 다이어그램 설명 | |
| 20~40분 | 시범 시연 | 교사 화면 보여주기 | |
| 40~45분 | 정리 | 오늘 배운 것 3줄 | |

### 2차시 — 실습 (45분)
...

## 💡 교사 메모
> - [학생이 자주 막히는 부분]
> - [미리 준비할 것]
> - [시간 부족 시 생략 가능 파트]

---

03_학생실습지침서.md 작성 패턴

핵심 원칙: 순서대로 따라하면 반드시 동작해야 한다.

# [단계] 실습 지침서

## 시작 전 체크리스트
□ 노트북 충전 상태 확인
□ [필요한 계정] 로그인 완료
□ VS Code 설치 완료

---

## Step A: [환경 준비]

### A-1. 폴더 만들기
1. 바탕화면에 `edu-padlet` 폴더 생성
2. VS Code 열기 → File → Open Folder → `edu-padlet` 선택

### A-2. 터미널 열기
VS Code 상단 메뉴 → Terminal → New Terminal

> ✅ 여기까지 완료되면 검은 창이 열립니다

---

## Step B: [코드 준비]

### B-1. 파일 만들기
터미널에 입력:
\`\`\`
mkdir step1-notion
cd step1-notion
\`\`\`

> 🆘 막혔나요? → [05_트러블슈팅.md] 참조

---

## 동작 확인 ✅

아래 순서로 확인:
1. `node server.js` 입력
2. "✅ 서버 시작!" 메시지 확인
3. 브라우저에서 http://localhost:3000 접속
4. 카드 추가 버튼 클릭 → 카드 생성 확인

---

04_바이브코딩프롬프트집.md 작성 패턴

바이브코딩 = AI에게 한국어로 요청해서 코드 만들기. 학생이 Bolt.new 또는 Claude.ai에 그대로 붙여넣는 프롬프트 제공.

# 바이브코딩 프롬프트 모음 — [단계]

## 이 단계에서 바이브코딩으로 할 수 있는 것

---

### 🟢 기본 프롬프트 — 앱 뼈대 만들기

**Bolt.new 또는 Claude.ai에 아래를 붙여넣으세요:**

\`\`\`
교육용 보드 앱을 만들어주세요.

요구사항:
- Express.js 서버 (Node.js)
- 카드를 추가하고 삭제할 수 있는 보드 UI
- HTML/CSS/JavaScript로 만든 프론트엔드
- 카드에는 제목, 내용, 색상(노랑/파랑/초록/분홍) 선택 가능
- Notion API를 사용해서 데이터 저장
- 한국어 주석 포함

파일 구조:
- server.js (Express 서버)
- db.js (Notion 연동)
- public/index.html
- public/style.css  
- public/app.js
- .env.example
- package.json
\`\`\`

---

### 🟡 수정 프롬프트 — 기능 추가

**카드 수정 기능 추가:**
\`\`\`
위 코드에 카드 수정 기능을 추가해주세요.
카드를 더블클릭하면 수정 모드가 되고,
제목과 내용을 수정한 후 Enter 키를 누르면 저장됩니다.
서버에 PATCH /api/cards/:id 엔드포인트를 추가해주세요.
\`\`\`

---

### 🔴 심화 프롬프트 — 직접 도전

**아래 기능 중 하나를 직접 프롬프트로 만들어보세요:**
1. 카드 드래그로 위치 이동
2. 보드 여러 개 만들기
3. 카드 검색 기능

💡 팁: 원하는 기능을 한 문장으로 정확히 설명하고,
어떤 기술을 쓸지(HTML/CSS/JS)도 함께 적어주면 좋아요.

---

## AI가 만든 코드 이해하기

AI가 코드를 만들어줬다면, 이걸 Claude.ai에 물어보세요:

\`\`\`
이 코드에서 fetch('/api/cards')가 하는 일을 중학생이 이해할 수 있게 설명해줘:
[코드 붙여넣기]
\`\`\`

---

05_트러블슈팅.md 작성 패턴

# 자주 막히는 문제 해결법

## 🔴 서버가 시작 안 돼요

### 증상
터미널에 빨간 글씨 에러, 서버 실행 안 됨

### 원인별 해결법

**"Cannot find module 'express'"**
→ npm install을 안 했거나 다른 폴더에서 실행 중
\`\`\`
npm install
\`\`\`

**"NOTION_API_KEY is not defined"**
→ .env 파일이 없거나 잘못 작성됨
→ .env.example을 .env로 복사하고 키를 채웠는지 확인

**"Error: listen EADDRINUSE: address already in use :::3000"**
→ 이미 다른 서버가 3000번 포트 사용 중
→ 터미널에서 Ctrl+C로 기존 서버 종료 후 재시작

---

## 🟡 Notion에 데이터가 안 가요

### 확인 순서
1. Integration이 DB에 연결되어 있는지 확인 (Notion DB 페이지 → ... → Connections)
2. NOTION_DATABASE_ID가 올바른지 확인 (32자리, 하이픈 없음)
3. 브라우저 개발자 도구 (F12) → Network 탭 → 요청 상태 확인

---

## 🟢 화면이 안 나와요 (흰 화면)

→ 브라우저 주소창에 http://localhost:3000 정확히 입력했는지 확인  
→ 서버가 실행 중인지 터미널 확인

---

단계 전환 교안 추가 섹션

Step 2, 3 교안에는 반드시 포함:

## 이번 단계에서 바뀐 것

| 파일 | 변경 내용 |
|------|---------|
| db.js | Notion → SQLite (이것만 바뀌었어요!) |
| .env | 다른 환경변수 사용 |
| server.js | 변경 없음 ✅ |
| public/ | 변경 없음 ✅ |

## 왜 server.js는 안 바꿔도 될까요?

[db.js 인터페이스 표준화 개념 설명]
비유: "주방 도구가 바뀌어도 주문서 양식은 같아요"