수업 웹앱 PRD 스튜디오
교사가 자기 수업에 쓸 웹앱을 기획하고, 개발 AI가 바로 읽을 수 있는 PRD(요구사항 문서)로 정리하는 도구 모음입니다. 외부 라이브러리와 빌드 없이 GitHub Pages에 배포되는 정적 웹앱입니다.
바로 쓰기
구성
| 구성 | 위치 | 특징 |
|---|
| 질문 폼 사이트 | 루트 index.html | 정해진 질문을 순서대로 선택·입력합니다. 기본 질문은 AI 없이 동작합니다. |
| PRD(AI) | PRD(AI)/ | 같은 질문 순서를 AI(Gemini)가 대화로 이끌고, 교사의 수업에 맞춘 선택지와 제안을 줍니다. |
| MCP 서버 | mcp/ | 성취기준 검색과 기획 질문을 Claude Code·Cursor 같은 AI 도구에서 씁니다. 설치와 사용 |
질문 흐름
학교급 → 학년 → 과목 → 교육과정 성취기준 → 수업의 기본 방향(이 성취기준으로 어떤 수업을 하고 싶은지) → 수업 단계 → 배움의 목표 → 앱의 형태 → 활동 설계 → 학생 참여 → 사용 상황 → 데이터와 공유 → 교사 화면 → 화면 디자인(교과 소재·첫 화면·기억에 남을 한 가지·색·글자·배치·화면 문구) → 마무리. 내보낸 PRD 끝에는 개발 AI가 흔한 AI 웹앱 모양을 피하고 내용을 빠짐없이 채우도록 하는 "개발 AI 작업 지침"이 자동으로 붙습니다. 오른쪽 계획 지도에서 어느 질문까지 왔는지 볼 수 있습니다.
- 성취기준은 2022 개정 교육과정 원문을 검색해 체크하면 채팅 입력란에 채워지고, 체크를 풀면 사라집니다. 고쳐서 전송합니다.
- 선택지는 눌러서 고르거나 ✎로 문구를 고쳐 답할 수 있습니다.
- PRD(AI)는 학교급·학년·성취기준·수업의 기본 방향까지 AI 호출 없이 묻고, 그 뒤부터 AI가 같은 순서로 이어 갑니다.
실행
프로젝트 폴더에서 python -m http.server 4173 --bind 127.0.0.1 실행 후 http://127.0.0.1:4173 (PRD(AI)는 /PRD(AI)/).
GitHub Pages
저장소 Settings → Pages → Deploy from a branch → 기본 브랜치의 / (root)를 선택합니다. 상대 경로를 사용하므로 하위 경로에서도 작동합니다. API 키를 저장소나 GitHub Secrets에 넣지 않습니다.
API 키와 저장
- 설정 → API KEY에서 개인 Gemini 키와 모델을 입력합니다. 키는 메모리에만 있고 새로고침하면 다시 연결해야 합니다.
- 대화와 기획서만 이 브라우저의 localStorage에 저장됩니다. 서버로 보내지 않으며 백업은 설정에서 내려받습니다.
- 모델 접근과 무료 한도는 사용자의 프로젝트에 따릅니다. 한도·네트워크 오류는 자동 반복 없이 수동으로 다시 시도합니다.
- 키를 쓰는 브라우저 코드에는 페이지 스크립트가 접근할 수 있습니다. 외부 스크립트 없이 구성했지만 서버 수준의 비밀 보관은 아닙니다.
확인
node --check app.js, node --check planning.js, mcp/에서 npm test. 실제 Gemini 호출에는 유효한 키가 필요합니다.
