2026년 9월 6일 일요일

[창체·학급자치] 학급 주간 소식지 - 종이 전단지 없이 폰으로 보는 모바일 카드 웹사이트



종이 인쇄비 0원, 알림장 QR로 완성하는 '학급 주간 소식지 & 활동 갤러리'

🗞️ 초등 창체·자치 및 학부모 소통 — 매주 금요일마다 가정통신문으로 인쇄하던 주간학습안내와 학급 소식지를 반응형 모바일 카드 그리드(Card Grid) 웹사이트로 전환합니다. 학생들이 쓴 배움 한 줄과 모둠 활동 사진이 카드 뉴스로 펼쳐지며, 학부모는 알림장 QR코드 한 번으로 스마트폰에서 우리 반의 한 주를 생생하게 확인합니다.

📖 한 줄 정의

심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).

학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
스마트폰 최적화 카드 그리드 A4 종이 전단지가 아닌, 인스타그램이나 카드뉴스처럼 한 손으로 위아래 넘겨보는 모바일 웹 화면입니다. [월~금 시간표], [이주의 배움 포토], [준비물 알림]이 세로 카드로 정돈.
학생 배움 한 줄 갤러리 선생님이 다 쓰는 게 아니라, 학생들이 금요일 자치 시간에 작성한 한 줄 소감을 상수로 복사해 넣습니다. 학생 실명 대신 닉네임과 함께 활동 소감이 실시간 롤링.
종이 인쇄 예산 100% 절감 매주 수십 장씩 찍던 복사비와 종이 낭비가 완전히 사라지고, 분실 걱정 없이 학부모에게 안전하게 도달합니다. 완성된 HTML 파일을 학교 홈페이지나 하이클래스에 링크로 탑재.

2. 핵심 아키텍처 해설

① 주간 소식 데이터: WEEKLY_NEWS 상수

const WEEKLY_NEWS = {
  week: "2026년 4월 2주차",
  motto: "서로 배려하고 질문하는 우리 반",
  notices: [
    { title: "과학의 달 행사 안내", desc: "4월 15일 교내 에어로켓 및 탐구대회가 열립니다." },
    { title: "준비물", desc: "체육복, 미술 붓(수채화용)을 챙겨오세요." }
  ],
  gallery: [
    { title: "모둠 협동 뜀틀 수업", team: "햇살 모둠", photo: "data:image/svg+xml;base64,..." }
  ]
};

한 주의 안내 사항과 활동 사진을 하나의 객체 상수로 관리합니다. 매주 금요일 이 상수의 내용만 교체하면 새로운 소식지가 완성됩니다.

② 모바일 반응형 카드 CSS

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.card {
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  background: #ffffff;
}

스마트폰의 작은 화면에서는 1열로, PC나 태블릿에서는 2~3열로 자동 정렬되어 어떤 기기에서 열어도 가독성이 뛰어납니다.

③ 다크모드 및 글자 크기 조절

학부모님의 연령대와 가독성을 배려하여 상단에 글자 크기 확대(A+) 버튼을 기본 제공합니다. 부모님이 침대나 출퇴근길 지하철에서 편안하게 읽을 수 있도록 세심하게 설계되었습니다.

3. 초보자를 위한 바이브 코딩 실전 사용 예시

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 학급 소식 구성 항목(시간표, 준비물, 갤러리)에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 학급소식지.html로 저장하여 학부모 알림장에 배포합니다.

제미나이 전용 에러 제로 프롬프트

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리(CDN), 백엔드 서버 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 심기 모드(데이터 임베딩): const WEEKLY_NEWS = {...} 상수에 주간 소식 3개, 시간표, 활동 갤러리 2개를 내장하여 즉시 브라우저에서 실행되도록 한다.
3. 모바일 카드 그리드: 스마트폰 가로 폭(360px)에서도 좌우 스크롤 없이 카드들이 세로로 미려하게 흐르는 반응형 Flex/Grid를 적용한다.
4. 개인정보 보호: 학생 얼굴 사진과 실명은 사용하지 않으며, 모둠 활동 작품 사진(Base64)과 닉네임만 표시하여 학내망 원칙을 철저히 준수한다.
5. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 소식지 메인 상단에 강조할 이번 주의 학급 급훈이나 한 줄 약속이 있나요?
2. 갤러리 사진은 1장만 넣을까요, 아니면 좌우 슬라이드(캐러셀)로 넘기게 할까요?
3. 배경 색상을 따뜻한 크림 베이지와 산뜻한 민트 블루 중 어느 것으로 갈까요?

🎯 에디터 한줄평

"가방 바닥에 구겨진 채 학기말에야 발견되던 종이 주간학습안내문은 이제 안녕입니다. 스마트폰 화면에 아이들의 생생한 모둠 활동 사진과 배움 한 줄이 따뜻한 카드로 열리는 순간, 학교와 가정을 잇는 신뢰의 온도는 1도 더 올라갑니다. 종이 한 장 인쇄하지 않고도 부모님의 손안에 교실을 배달하는 스마트한 학급 경영입니다."

📚 기술·교육 참고 링크

  • 교육부 학교-가정 연계 학부모 소통 가이드라인
  • 교육과정 연계: 초등 1~6학년 창체(학급자치·적응 활동), 학교-가정 소통 연계
By 시간: