2026년 9월 6일 일요일

[학교 행사·행정] 창의융합 축전 & 해커톤 - 바이브 코딩 완성작 온라인 갤러리와 원스톱 심사 포털



30분 만에 띄우는 전교생 축전 포털 — 창의융합 축전 및 해커톤 온라인 갤러리 & 심사 시스템

🏆 교내 창의융합 축전 및 해커톤(hackathon) 행사 시즌 — 전교생 모둠별로 제출한 기획서와 바이브 코딩 완성작(단일 HTML 앱)을 한 페이지에 모아 투표 심사하고 온라인 갤러리에 전시하는 행사 포털을 구축합니다. 대형 간판 인쇄비 없이, 참가자 전원이 출품작 링크를 클릭하는 것만으로 무대가 열립니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
30분 만에 완성되는 전교 포털 복잡한 콘테스트 플랫폼에 가입할 필요 없이, 미리 만들어둔 단일 HTML 템플릿에 구글 폼으로 수합한 작품 정보를 심기 모드(EMBED_ENTRIES)로 박아넣기만 하면 됩니다. 행사 개최 아침에 학급별 링크 붙여넣기 → 오후에는 심사 대기 상태로 진열.
원클릭 미리보기 & 심사 참가작(HTML 앱)을 iframe 태그로 내장하여 실제 구동 화면을 확인하고, 온라인 투표 버튼을 클릭해 점수를 득점합니다. 심사원 교사 및 학부모 대표 투표 카드(3점 만점 자평 및 방식) 체크리스트 포함.
학생 저작권 & 프라이버시 출품작 소유자는 모둠 코드(예: 3반-1팀-하늘팀)입니다. 실명이나 학생 얼굴 사진은 포털에 일절 노출되지 않으며, 작품 캡처 이미지와 소개글로만 구성됩니다. 심사 결과는 브라우저 세션 메모리로 즉시 출력, 교사만 CSV 내보내기로 수령.

2. 핵심 아키텍처 해설

① 행사 출품작 마스터 데이터: ENTRIES 상수

const ENTRIES = [
  {
    entryNo: 1,
    team: "3-1 탐험가 모둠",
    title: "우리 동네 안심 등굣길 안전 지도",
    desc: "학교 주변 위험 구역을 핀으로 표시하는 안전 제보 웹앱입니다.",
    htmlContent: "<!DOCTYPE html>...", // 심기 모드: 출품작 단일 파일 소스
    coverColor: "#3b82f6"
  }
];

참가 모둠 번호, 작품 제목, 소개글, 그리고 학생이 직접 제작한 바이브 코딩 앱의 HTML 소스 코드 전체를 상수에 박아둡니다. 심사자는 팝업 창에서 실제 그 앱을 구동하여 관람할 수 있습니다.

② 내장된 자기 앱 즉시 구동 (Sandboxed iframe)

function runEntry(entryNo) {
  const target = ENTRIES.find(e => e.entryNo === entryNo);
  const frame = document.getElementById("preview-frame");
  const blob = new Blob([target.htmlContent], { type: "text/html" });
  frame.src = URL.createObjectURL(blob);
}

외부 서버에 올릴 필요 없이 Blob URL로 학생들이 직접 만든 앱을 관람자 컴퓨터에서 즉시 구동시킵니다. 제출된 학생의 작품이 각 영역에서 안전하게 분리 실행됩니다.

③ 실시간 투표 & 랭킹 산출 (세션 메모리)

포털에 접속한 학부모나 친구들이 마음에 드는 작품 옆의 '좋아요' 하트를 클릭하면 진동하는 Web Audio 사운드와 함께 점수가 즉시 합산됩니다. 순위 보드는 우승 후보가 변할 때마다 대기열 방식으로 자동 정렬되어 행사 중간중간 전자칠판에 크게 띄워지고, 행사 후 교사는 전체 투표 수를 CSV 파일로 받아 시상 세무를 간소화합니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 참가 팀 수, 심사 요소(창의성, 완성도)에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 축전포털.html로 저장하여 학교 홈페이지나 교내 메신저에 배포합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리, 외부 서버 통신 없이 단일 파일로 작성한다.
2. 카드 갤러리 & 팝업 실행기: 참가작 썸네일 그리드를 먼저 보여주고, 클릭 시 블러 처리된 배경 위에 해당 팀의 출품작을 iframe 형식으로 즉시 구동한다.
3. 색상 반응형 & 접근성: 시각적으로 화려한 그라디언트를 피하고 명도 대비가 높은 다크/화이트 토글을 지원한다.
4. 심기 모드(데이터 임베딩) 샘플: const ENTRIES = [...]에 3~5개 팀의 가상 예시 프로젝트(제목, 소개, 실행 코드)를 미리 심어 시연 화면이 바로 보이도록 구현한다.
5. 모둠 코드 익명화: 모든 참가자는 '반-번호-별칭' 형식으로 표시하며, 개인 실명 및 학생 인식 가능 얼굴 사진 절대 금지.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 행사 유형은 무엇인가요? (창의융합 축전 / SW 해커톤 / 온라인 박람회)
2. 심사 요소는 무엇으로 구성할까요? (창의성 40%, 완성도 40%, 발표력 20% 등)
3. 포털 상단에 학교 로고와 행사 주제 슬로건을 삽입할까요?

🎯 에디터 한줄평

"해커톤의 낭만은 밤샘 코딩이 아니라, 내가 만든 작은 프로그램이 우리 학교 대회장에서 수백 명의 관심을 받는 순간입니다. 일일이 실물 전시대를 옮기고 종이 점수지를 걷던 마라톤 같은 행사행정에서 벗어나, 원클릭 미리보기와 투표 랭킹으로 누구나 참여 가능한 열린 대회를 진행하세요. 심사 원칙도 아이들이 정하는 진정한 민주적 창의융합 문화가 여기서 태어납니다."

📚 기술·교육 참고 링크

  • Google Sites (구글 사이트) : 행사 공지 페이지 및 연계 서식 임베드 참고 자료
  • 교육부 창의인재교육 중심단체 : 초등 창의융합 해커톤 활동 운영 매뉴얼 및 우수 교육 사례
  • 교육과정 연계: 초등 5~6학년 SW·인공지능 교육 및 창의융합 연계 교육과정
By 시간: