우리 반을 우리 손으로 띄운다! — 학급 공식 브랜드 홈페이지 & 커뮤니티 포털 제작 프로젝트
🌈 초등 5~6학년 창체(학급 자치), 미술(디자인), 실과(SW 활용) 융합 — 학생들이 우리 반의 이름, 상징색, 마스코트, 규칙, 추억 사진을 모아 우리 반만의 공식 브랜드 홈페이지를 만드는 학년 말 프로젝트입니다. 프로덕트헌트(Product Hunt) 스타일의 앱 소개 카드와 상호 추천 버튼으로 마무리하는 1년간의 바이브 코딩 성과 총정리 플랫폼입니다.
📖 한 줄 정의
심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).
학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 교사가 만든 학급 홈페이지 ➔ 학생이 만든 학급 브랜드 사이트 | 담임이 대신 만들어주는 것이 아니라, 학생들이 우리 반의 정체성(이름, 마스코트, 색, 규칙)을 정하고 직접 홈페이지로 조판합니다. | 모둠별로 상징색·마스코트 아이콘·슬로건을 정하고 제미나이 프롬프트로 HTML 생성. |
| 일방적 소식 전달 ➔ 프로덕트헌트형 소통 플랫폼 | 1년간 만든 앱, 게임, 그림, 보고서를 각각 카드로 올리고 👍 추천 버튼을 누르는 상호 응원 플랫폼을 구현합니다. | 1년간 제작한 10개 이상의 작품이 카드 그리드에 모이고, 추천 수 순위가 실시간 정렬됩니다. |
| 졸업 시 사라지는 기억 ➔ 학급의 디지털 유산 | 1년간의 성장 여정을 하나의 단일 HTML 파일에 모아 저장하여 학년 말 선물로 남깁니다. | '우리 반 1년의 타임라인' 스크롤 섹션 + 기억할 만한 사진 갤러리 + 각 앱 다운로드 링크. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
제미나이(Gemini)에 아래 프롬프트를 붙여넣으면 단일 HTML 파일로 즉시 완성됩니다.
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 학급 이름, 마스코트, 상징색, 주요 활동에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
우리반.html로 저장 후 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리, 소셜 로그인, DB 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 학급 브랜드 데이터 심기 모드: const BRAND = { name: "...", color: "#...", mascot: "🦊", slogan: "..." } 및 const PROJECTS = [{ title: "...", desc: "...", type: "webapp", votes: 0 }, ...] 상수에 학급 정보와 1년간 제작한 창작물을 내장한다.
3. 브랜드 홈페이지 섹션: 히어로 배너(학급 이름 + 슬로건 + 마스코트), 1인 1역 안내, 학급 규칙(자치 헌법) 섹션을 포함한다.
4. 프로덕트헌트(Product Hunt) 스타일 갤러리: 1년간 제작한 웹앱·게임·카드뉴스 등을 카드 그리드로 배치하고, 👍 추천 버튼 클릭 시 실시간 정렬 및 Web Audio '똑' 사운드 합성.
5. 추억 타임라인: 3월부터 12월까지 월별 주요 활동 사진과 한 줄 소감을 세로 타임라인으로 배치한다.
6. 학생 개인정보 0: 학생 실명을 절대 저장하지 않으며, 번호 및 닉네임만 사용한다.
7. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.
[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 학급 이름과 마스코트는 무엇인가요? (예: 5-3반 코알라 반, 슬로건: '함께 도약하자!')
2. 1년간 제작한 웹앱·게임·창작물은 몇 개인가요? (상수에 카드로 등록)
3. 홈페이지 색상 톤은 학급 상징색으로 할까요?🎯 에디터 한줄평
"우리 반을 우리 손으로 직접 웹사이트에 조판한다는 것은, '우리 반은 누구의 것인가'라는 질문에 아이들이 스스로 답을 쓰는 자치의 완성입니다. 1년간 만들었던 모든 작품이 하나의 포털에 모이고, 서로 추천하는 순간 — 교실이 학급이 아니라 하나의 스타트업 팀처럼 느껴집니다."
📚 기술·교육 참고 링크
- 학급 브랜드(Brand) 홈페이지 및 커뮤니티 포털 제작 가이드
- 교육과정 연계: 초등 5~6학년 창체(학급 자치), 미술(디자인), 실과(SW 활용), 진로(프로젝트 정리)
