2026년 9월 6일 일요일

[행정·홍보] 학교 축제 디지털 팜플렛 - 인쇄비 0원, 반응형 행사 안내 웹사이트



인쇄비 0원으로 축제를 열자 — '학교 축제 & 방과후학교 전시회 모바일 디지털 팜플렛'

🎪 초등 행사 행정 — 학교 축제, 방과후학교 전시회, 체육대회 등 학부모가 참여하는 행사 안내장을 종이에서 반응형 디지털 웹사이트로 전환합니다. 학급별 공연 순서, 부스 위치, 전시 작품 소개, 화장실 위치까지 한 화면에서 확인할 수 있으며, 행사 당일 실시간으로 일정 변경도 반영할 수 있습니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
인쇄비 100% 절감 매년 수십만 원이 드는 종이 안내장을 디지털 웹사이트로 대체합니다. 학부모 스마트폰에서 QR코드 스캔으로 즉시 접속.
실시간 일정 수정 비가 와서 실내로 옮기거나 공연 시간이 늦춰지면, 파일의 상수를 바꿔 다시 배포하면 즉시 반영됩니다. "3반 공연 → 실내 체육관으로 이동" 알림 배너 상단 고정.
모바일 최적화 반응형 360px 화면에서도 가로 스크롤 없이 세로 카드 그리드로 자동 배치되어 학부모가 편하게 확인합니다. 부스 위치는 SVG 약도 위 핀 마커로 시각화.

2. 핵심 아키텍처 해설

① 행사 일정 상수: EVENT 상수

const EVENT = {
  name: "제 42회 교육의 날 축제",
  date: "2026-09-06",
  notice: "비 예보 — 실내 체육관에서 진행됩니다.",
  stages: [
    { time: "10:00", act: "개회식 — 체육관", emoji: "🎤" },
    { time: "10:30", act: "3반 합창단 — 체육관 무대", emoji: "🎵" },
    { time: "11:00", act: "미술 전시 — 도서관 1층", emoji: "🎨" },
    { time: "12:00", act: "방과후 무용 발표 — 체육관", emoji: "💃" }
  ],
  booths: [
    { name: "과학 실험 부스", loc: "과학실", emoji: "🔬" },
    { name: "독서 감상 부스", loc: "도서관", emoji: "📖" },
    { name: "만들기 워크숍", loc: "실과실", emoji: "✂️" }
  ]
};

행사 전 일정과 부스 정보를 상수에 정리하면 파일 하나만 수정해도 즉시 전체 팜플렛이 갱신됩니다.

② 반응형 카드 그리드 & 부스 약도 핀

function renderStages() {
  const list = document.getElementById("stages");
  EVENT.stages.forEach((s) => {
    const card = document.createElement("div");
    card.className = "stage-card";
    card.innerHTML = `${s.time} ${s.emoji} ${s.act}`;
    list.appendChild(card);
  });
}

행사 순서는 세로 타임라인 카드로, 부스 위치는 SVG 약도 위 핀 마커로 렌더링되어 학부모가 스마트폰으로 한눈에 찾아갈 수 있습니다.

③ QR코드 배포 루틴

팜플렛 HTML을 교사 PC에서 로컬로 열거나 학내망 링크로 배포하는 것만으로 QR코드(무료 생성기 사용)를 인쇄하여 학부모 안내장에 첨부할 수 있습니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 행사 종류(축제/전시회/체육대회)와 공연 개수에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 축제팜플렛.html로 저장하여 QR코드를 인쇄합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 서버, CDN 없이 순수 HTML/CSS/JS로 완성한다. 학부모 스마트폰에서 열면 즉시 확인 가능.
2. 행사 정보 심기 모드: const EVENT = {...} 상수에 행사명, 날짜, 공연 일정, 부스 위치, 알림 배너를 미리 넣어둔다.
3. 반응형 카드 그리드: 360px 화면에서도 가로 스크롤 없이 세로 카드 뷰로 배치되어 학부모가 편하게 읽는다.
4. 부스 위치 표시: 학교 건물 SVG 약도 위에 핀(마커) 이모지를 배치하여 위치를 시각화한다.
5. 학생 개인정보 0: 학생 실명 대신 '학급명 + 출품작명'만 표기하며 얼굴 사진은 일절 사용하지 않는다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 행사 종류는 무엇인가요? (축제 / 전시회 / 체육대회 / 방과후 발표회)
Q2. 공연 및 부스 총 개수는 몇 개인가요?
Q3. 상단 배너 색상 톤을 판타지 핑크와 우드 브라운 중 어느 것으로 할까요?

🎯 에디터 한줄평

"수십만 원의 인쇄비와 몇 시간의 전단지 배포 노동력을 학부모 휴대폰 화면으로 대체하는 것은 단순한 절약이 아닙니다. 비가 와도 공연이 옮겨졌다는 것을 순간적으로 알려주는 시스템이 학부모 신뢰를 만들고, 교사에게는 행사 당일 소통 피로를 획기적으로 줄여줍니다."

📚 기술·교육 참고 링크

  • 학교 행사 전산화 및 디지털 홍보 가이드
  • 교육과정 연계: 초등 창체(행사 운영 참여), 실과(정보통신기기 활용)
By 시간: