투박한 인쇄물 대신 QR코드 한 장으로! — 학급 교육과정 설명회 & 학부모 총회 원클릭 모바일 랜딩 페이지
📱 초등 1~6학년 학급자치 및 가정-학교 협력 융합 — 학기 초 설명회 자료를 몇 장씩 인쇄해서 나누어 주던 시대는 끝났습니다. 학급 교육과정, 1인 1역, 급식 알레르기 유의 사항, 수업 자료 요청 등을 단일 HTML 파일로 구축하여 QR코드를 붙여넣는 방식으로 학부모 스마트폰에 즉시 전달합니다.
📖 한 줄 정의
심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).
학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 인쇄물 배부 ➔ 모바일 랜딩 페이지 | 종이로 40장 인쇄하던 자료를 단일 HTML 파일로 압축하여 QR코드 붙여 가정통신문에 삽입합니다. | 학부모가 QR코드 스캔만으로 곧바로 스마트폰에서 최신 정보를 열람합니다. |
| 일방 전달 ➔ 쉽게 넘기는 아코디언 FAQ | 교육과정(창체·수업과정), 급식 알레르기, 준비물, 1인 1역 등을 7~8개의 아코디언 카드로 구성하여 한눈에 볼 수 있게 합니다. | 질문 아코디언 펼침 시 상하 여백이 살아 있는 시각적 층위 구현. |
| 비상 연락망 개인 노출 ➔ 익명 연락처 보호 | 개인 실명 및 전화번호 노출 없이 교사 닉네임 및 공식 오피스 연락처만을 기재합니다. | 가정통신문 링크, 도서 대여, 학생 관련 공지를 원클릭 분류. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
제미나이(Gemini)에 아래 프롬프트를 붙여넣으면 복잡한 서버 없이 완성됩니다.
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 학급 운영 주요 항목과 QR 배포 방식에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
학급설명회.html로 저장 후 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리, 소셜 로그인, DB 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 학급 교육과정 심기 모드: const CLASS_INFO = { grade: "3학년", mainGoals: [...], roles: [...], notices: [...] } 상수에 주요 학급 운영 정보를 내장한다.
3. 아코디언(Accordion) UI: FAQ 항목(예: 급식 알레르기, 준비물, 연락 방법 등)을 클릭 시 자연스럽게 펼쳐지고 닫히는 CSS 트랜지션 애니메이션을 구현한다.
4. 학생 개인정보 0: 학생 실명, 학번 등의 개인정보를 일절 포함하지 않으며, 담임 선생님 공식 직함 및 학급 공용 이메일만 게시한다.
5. 모바일 최적화 반응형: 360px 너비의 스마트폰 화면에서 가로 스크롤 없이 모든 아코디언이 세로로 늘어나도록 설계한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.
[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 학급 교육과정 설명 시 강조할 핵심 키워드(예: 협동, 공감, 창의) 3가지는 무엇인가요?
2. 학급 1인 1역은 몇 가지로 구성할까요? (기본: 8~12개)
3. 배포 시에는 QR코드가 포함된 가정통신문 인쇄물 또는 학교 홈페이지 링크 중 어느 방식으로 제공할까요?🎯 에디터 한줄평
"인쇄물 40장이 교실 책상 위에 시들시들 쌓이는 대신, 학부모의 스마트폰 홈 화면 바로가기에 우리 학급 페이지가 고정됩니다. 행사 때마다 잃어버리기 쉬운 통지서 대신, 학기 내내 업데이트되는 살아 있는 안내판이 되는 것입니다."
📚 기술·교육 참고 링크
- CSS 아코디언(Accordion) UI 설계 및 QR코드 통합 배포 가이드
- 교육과정 연계: 초등 1~6학년 학급 교육과정 운영 계획, 가정과 학교의 협력 관계 구축 활동
