교육용 Padlet 클론 프로젝트의 교안, 수업 지도안, 바이브코딩 프롬프트집, 실습 지침서를 작성하는 가이드. 중등~고등 수준의 교육 자료 생성 시 이 스킬을 사용할 것. '교안 만들어줘', '수업 자료 작성', '학생 가이드' 요청 시 반드시 사용.
| 수준 | 대상 | 설명 방식 | 코드 노출 수준 |
|---|---|---|---|
| 🟢 입문 | 중1~3 | 비유 중심, 단계 쪼개기 | 최소 (붙여넣기 위주) |
| 🟡 기본 | 고1~2 | 개념 + 실습 | 부분 이해 후 수정 |
| 🔴 심화 | 고3 | 원리 + 응용 | 직접 작성 + 디버깅 |
모든 교안에 레벨 표시 포함:
🟢 중학생도 할 수 있어요
🟡 고등학생 도전!
🔴 심화: 직접 수정해보기
# [단계 이름] — 오늘 배울 내용
## 🤔 생각해보기
[일상 비유로 시작하는 질문]
예: "카카오톡 메시지는 어디에 저장될까요?"
## 핵심 개념: [개념 이름]
[ASCII 다이어그램 또는 텍스트 그림]
### 비유로 이해하기
[구체적 비유 — 도서관, 식당, 우편함 등]
## 오늘 만들 것
[완성 화면 텍스트 묘사]
## 학습 목표
□ [목표 1] — 🟢
□ [목표 2] — 🟡
□ [목표 3] — 🔴
| 개념 | 비유 |
|---|---|
| 데이터베이스 | 도서관 대출 장부 |
| 서버 | 식당 주방 (주문받아 처리) |
| API | 식당 주문서 (메뉴 항목 = 엔드포인트) |
| HTTP 요청 | 손님이 종업원에게 주문 |
| JSON | 받아적은 주문서 형식 |
| API 키 | 식당 회원카드 (없으면 주문 못 함) |
| SQLite | 학교 출석부 파일 |
| 클라우드 DB | 학교 서버실에 있는 중앙 출석부 |
# [단계] 수업 지도안
**대상:** 중학교 [학년] / 고등학교 [학년]
**시간:** [N]차시 × 45분
**준비물:** 노트북, 인터넷, [계정 목록]
---
## 차시별 계획
### 1차시 — 개념 이해 (45분)
| 시간 | 활동 | 교사 행동 | 비고 |
|------|------|---------|------|
| 0~5분 | 도입: 비유 질문 | 질문 던지기 | |
| 5~20분 | 개념 설명 | 다이어그램 설명 | |
| 20~40분 | 시범 시연 | 교사 화면 보여주기 | |
| 40~45분 | 정리 | 오늘 배운 것 3줄 | |
### 2차시 — 실습 (45분)
...
## 💡 교사 메모
> - [학생이 자주 막히는 부분]
> - [미리 준비할 것]
> - [시간 부족 시 생략 가능 파트]
핵심 원칙: 순서대로 따라하면 반드시 동작해야 한다.
# [단계] 실습 지침서
## 시작 전 체크리스트
□ 노트북 충전 상태 확인
□ [필요한 계정] 로그인 완료
□ 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. 카드 추가 버튼 클릭 → 카드 생성 확인
바이브코딩 = 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')가 하는 일을 중학생이 이해할 수 있게 설명해줘:
[코드 붙여넣기]
\`\`\`
# 자주 막히는 문제 해결법
## 🔴 서버가 시작 안 돼요
### 증상
터미널에 빨간 글씨 에러, 서버 실행 안 됨
### 원인별 해결법
**"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 인터페이스 표준화 개념 설명]
비유: "주방 도구가 바뀌어도 주문서 양식은 같아요"