2026년 9월 6일 일요일

[창체·자치] 초경량 학급 알림판 - 로딩 0초, 1인 1역 & 일일 시간표 오프라인 대시보드



부팅 렉 0초, 저사양 태블릿에서도 쌩쌩 — '초경량 학급 1인 1역 & 일일 알림판'

📋 초등 창체·학급자치 — 교실 TV나 구형 크롬북에 띄울 오늘의 시간표, 1인 1역 당번, 준비물 알림판을 무거운 프레임워크 없이 순수 단일 HTML과 LocalStorage로 초경량화했습니다. 인터넷이 끊겨도 1초 만에 켜지는 완전 오프라인 학급 알림 보드입니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
용량 50KB 미만 초경량 외부 폰트, 무거운 자바스크립트 라이브러리가 전혀 없어 구형 기기에서도 더블클릭 1초 만에 켜집니다. 아침 등교 시간 교실 전면 TV에 상시 고정.
1인 1역 체크리스트 토글 칠판 닦기, 우유 급식, 환기 담당 학생이 실천 완료를 터치하면 초록색 체크와 함께 완료 표시됩니다. 오늘의 실천 완료율(%)이 게이지 바에 실시간 반영.
LocalStorage 로컬 영구 보존 담임교사가 입력한 오늘의 준비물과 알림장이 브라우저 로컬에 저장되어 내일 켜도 유지됩니다. 인터넷 선을 뽑아도 완벽하게 구동되는 100% 오프라인.

2. 핵심 아키텍처 해설

① 알림 데이터 구조: NOTICE 상수

const NOTICE = {
  date: "2026-09-07 (월)",
  schedule: ["국어(글 요약)", "수학(각도)", "체육(뜀틀)", "음악(리코더)", "실과(코딩)"],
  supplies: ["수학 익힘책 42쪽", "리코더", "개인 물병"],
  roles: [
    { role: "칠판 닦기", nick: "토끼대장", done: false },
    { role: "우유 당번", nick: "치타선수", done: false },
    { role: "환기 대장", nick: "바람요정", done: false }
  ]
};

시간표, 준비물, 1인 1역을 단일 상수에 정리해 두어 코드 한 곳만 수정하면 전체 보드가 정돈됩니다.

② 로컬스토리지 실천 상태 동기화

function toggleRole(idx) {
  const data = JSON.parse(localStorage.getItem("board_data") || JSON.stringify(NOTICE));
  data.roles[idx].done = !data.roles[idx].done;
  localStorage.setItem("board_data", JSON.stringify(data));
  renderBoard();
}

학생이 화면을 터치할 때마다 LocalStorage에 실천 여부가 즉시 저장되어 브라우저를 새로고침해도 상태가 풀리지 않습니다.

③ 초경량 CSS 다이어트

body { font-family: system-ui, sans-serif; margin: 0; padding: 20px; background: #f8fafc; }
.card { background: white; border-radius: 12px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

외부 웹폰트(웹폰트 파일 2~3MB)를 전혀 불러오지 않고 시스템 폰트만 사용하여 로딩 속도를 극대화했습니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 학급 시간표 교시 수(5~6교시)와 1인 1역 목록에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 학급알림판.html로 저장하여 교실 TV에 띄웁니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 CDN(웹폰트, CSS 라이브러리)을 일절 쓰지 말고 시스템 기본 폰트와 순수 CSS로 초경량(50KB 미만) 완성한다.
2. 3분할 대시보드 레이아웃: 좌측(오늘의 시간표 5~6교시) + 중앙(1인 1역 실천 체크리스트) + 우측(준비물 & 알림장)으로 화면을 분할한다.
3. 실천 체크 토글: 1인 1역 항목 클릭 시 LocalStorage에 저장되어 브라우저를 다시 켜도 완료 상태가 유지되도록 한다.
4. 효과음 합성: Web Audio API로 체크 클릭 시 맑은 '띵' 사운드를 합성한다.
5. 학생 개인정보 0: 학생 실명 대신 동물 닉네임이나 번호만 사용한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 시간표 교시 수는 5교시와 6교시 중 무엇을 기본으로 할까요?
Q2. 1인 1역 항목 수는 8개와 12개 중 몇 개로 할까요?
Q3. 알림판 배경 색상을 칠판 초록색과 모던 화이트 중 어느 것으로 갈까요?

🎯 에디터 한줄평

"가장 좋은 기술은 기술이 느껴지지 않는 기술입니다. 3초 동안 로딩되는 무거운 플랫폼보다, 더블클릭하자마자 1초 만에 켜져서 오늘 하루 우리가 무엇을 해야 하는지 말해주는 가벼운 HTML 한 장이 교실의 일상을 훨씬 단단하게 지탱해 줍니다."

📚 기술·교육 참고 링크

  • 웹 성능 최적화(Web Performance Optimization) 및 브라우저 로컬스토리지 활용법
  • 교육과정 연계: 초등 창체(자율활동, 학급자치, 일과 운영)
By 시간: