2026년 9월 6일 일요일

[정보·창체] AI 해커톤 창작물 전시 포털 - 학생 웹앱 카드 갤러리 & 응원 투표



우리 학생들의 창작물을 온라인 전시관에 — 'AI 해커톤 클라우드 전시 포털 & 응원 투표'

🎪 교내 SW·AI 동아리 및 메이커 축제 행사 — 학생들이 직접 만든 창작 웹앱과 게임 링크를 카드 그리드 형태의 디지털 갤러리에 모아 전시합니다. 학부모와 전교생이 QR코드로 접속하여 체험하고 응원 투표를 남기는 미래형 행사 포털입니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
작품 카드 그리드 전시 학생들의 창작 웹앱 주소를 앨범형 카드로 정리해 QR코드로 학부모·전교생에게 공개합니다. 모둠 코드 + 작품 제목 + 썸네일 아이콘으로 카드 구성.
응원 투표 시스템 마음에 드는 작품에 하트 이모지를 눌러 응원 점수를 올립니다. '최고 인기상' 자동 산정 기능으로 행사 마무리 연출.
학생 개인정보 완전 비식별 학생 실명 대신 모둠 코드(3반-1팀-탐험가)만 표기하므로 학부모가 봐도 안전합니다. 관리자 비밀번호로 투표 수치만 교사가 확인 가능.

2. 핵심 아키텍처 해설

① 작품 데이터: ENTRIES 상수

const ENTRIES = [
  {
    code: "3-1-탐험가",
    title: "우리 동네 안전 지도 앱",
    desc: "모둠별 위험 지역을 지도에 표시하는 게임",
    url: "https://학생웹앱주소1",
    icon: "🗺️",
    votes: 0
  },
  {
    code: "3-2-발명가",
    title: "창작 수학 퀴즈",
    desc: "테트리스로 도형 이동을 배우는 게임",
    url: "https://학생웹앱주소2",
    icon: "🧩",
    votes: 0
  }
];

모둠 코드, 작품명, 소개, 링크 주소, 이모지 아이콘을 미리 상수로 심으면 행사 당일 갤러리가 즉시 렌더링됩니다.

② 카드 그리드 렌더링 & QR 연결

function renderGallery() {
  const grid = document.getElementById("grid");
  ENTRIES.forEach((e, i) => {
    const card = document.createElement("div");
    card.className = "card";
    card.innerHTML = `
      ${e.icon}
      
${e.title}

      
${e.desc}

      
${e.code}

      
      
    `;
    grid.appendChild(card);
  });
}
function openApp(i) { window.open(ENTRIES[i].url, "_blank"); }

행사 전 날 교사가 학생들의 완성 URL을 상수에 붙여넣으면 행사 당일 1초 만에 전시관이 완성됩니다.

③ 응원 투표 시스템

function vote(i) {
  ENTRIES[i].votes++;
  sound("pop");
  renderGallery(); // 실시간 투표 수 반영
}

투표 데이터는 세션 메모리에만 존재하며 외부 서버로 전송되지 않으므로 개인정보 유출 우려가 전혀 없습니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 출품작 수와 카드 색상 테마에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 축제포털.html로 저장하여 학교 홈페이지나 행사 안내 QR코드에 연결합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 서버, 데이터베이스, CDN 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 작품 데이터 심기 모드: const ENTRIES = [...] 상수에 학생 작품명, 소개, 링크 주소, 이모지 아이콘을 미리 넣어둔다.
3. 카드 그리드 레이아웃: 화면 크기에 따라 2~4열로 자동 배치되는 CSS Grid 반응형 카드 목록을 제공한다.
4. 학생 실명 금지: 작품 표기는 '학년-모둠-역할명' 조합의 닉네임만 허용한다.
5. 응원 투표 버튼: 클릭 시 세션 메모리에 투표 수를 누적하고 실시간으로 카드에 반영한다. 외부 서버 저장 금지.
6. 효과음 합성: Web Audio API로 투표 클릭 시 톡! 소리를 합성한다.
7. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 출품작(모둠) 개수는 몇 개인가요?
Q2. 카드 배경 테마를 판타지 크림슨과 스페이스 다크 중 어느 것으로 할까요?
Q3. 투표 상위 3개 작품에 별도 왕관 아이콘을 표시할까요?

🎯 에디터 한줄평

"학생들이 만든 게임과 웹앱을 복도 게시판이 아닌 클라우드 전시관에 올리는 순간, 창작의 관객은 반 30명을 넘어 전교생과 학부모 수천 명으로 확장됩니다. QR코드 하나로 연결되는 이 무한 갤러리가 아이들에게 창조의 뿌듯함을 가르쳐 줄 것입니다."

📚 기술·교육 참고 링크

  • 학교 SW·AI 교육 및 창의융합 축전 운영 가이드
  • 교육과정 연계: 초등 실과(소프트웨어 활용), 창의적 체험활동(동아리 활동 및 행사 운영)
By 시간: