2026년 9월 8일 화요일

[도덕·수학·SW] 모둠 알뜰 바자회 & 동네 상점 원페이지 홍보 - 내가 만든 가게를 열어요

내 가게를 열어요! — 모둠 알뜰 바자회 & 동네 상점 원페이지 홍보 웹사이트 제작 프로젝트

🏬 초등 5~6학년 도덕(나눔과 나눔살기), 수학(가격·거스름돈), 실과(SW 활용) 융합 — 학생들이 모둠별로 알뜰 바자회를 기획하며 상품 카드, 가격표, 판매 슬로건을 담은 원페이지 가게 홍보 웹사이트를 만드는 프로젝트입니다. 동네 상점을 방문하고 인터뷰하여 '우리 동네 아저씨·아주머니 가게'를 대신 홍보해주는 지역 사랑 활동까지 확장합니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
종이 가격표 ➔ 웹 상품 카드 바자회 물건마다 종이 가격표를 붙이는 대신, 사진과 설명, 가격이 담긴 카드 그리드로 나타냅니다. 2×3 Grid에 상품 카드 6장 배치, 가격 표시 + 재고 뱃지.
단순 소개 ➔ 가게 컨셉 디자인 가게 이름, 슬로건, 색상 톤을 직접 정하며 실제 브랜드(brand) 개념을 체험합니다. "우리 모둠 가게 이름: 깨끗 쓰레기 통 — 슬로건: 지구를 위한 한 걸음!
자기 것만 팔기 ➔ 동네 상점 대신 홍보 동네 노점이나 문방구 할아버지 가게를 방문해 인터뷰하고, 대신 원페이지 웹사이트로 홍보해줍니다. "영동 문방구 — 30년 전통 학교 옆 문구점" 카드로 친절하게 소개.

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

제미나이(Gemini)에 아래 프롬프트를 붙여넣으면 단일 HTML 파일로 즉시 완성됩니다.

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 가게 유형, 상품 목록, 색상 톤에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 우리가게.html로 저장 후 더블클릭합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리, 소셜 로그인, DB 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 상품 데이터 심기 모드: const ITEMS = [{ name: "...", price: 0, desc: "...", img: "Base64" }, ...] 상수에 바자회 상품 6~10개를 내장한다.
3. 카드 그리드 레이아웃: 2열 또는 3열 Grid로 상품 카드를 배치하고, 반응형으로 모바일에서는 1열로 전환한다.
4. 커머스(Commerce) 구조 학습: 가격 표시, 🛒 담기 버튼, 총 금액 자동 합산 기능을 구현한다.
5. 동네 상점 홍보 섹션: 인터뷰한 동네 상점 1곳의 사진·이야기·추천 상품을 별도 섹션으로 소개한다.
6. Web Audio 사운드: 카드 클릭 '똑', 담기 버튼 '똑똑'을 순수 Web Audio API로 합성한다.
7. 학생 개인정보 0: 학생 실명을 절대 저장하지 않으며, 모둠 번호 및 닉네임만 사용한다.
8. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 바자회에서 판매할 물건은 무엇인가요? (책, 장난감, 문구, 수공예품 등 6종 이상)
2. 가게 이름과 슬로건은 무엇으로 할까요?
3. 동네 상점 인터뷰 섹션도 포함할까요?

🎯 에디터 한줄평

"바자회는 아이들에게 가장 가까운 경제 체험입니다. 종이 가격표를 웹사이트의 상품 카드로 바꾸는 순간, 수학 시간에 배운 가격 계산과 도덕 시간의 나눔 마음이 하나의 디지털 창작물로 만나게 됩니다. 동네 상점을 대신 홍보하는 활동까지 연결되면, 배움이 교실을 넘어 지역으로 걸어 나갑니다."

📚 기술·교육 참고 링크

  • 지역 상점 디지털 홍보 및 커머스(Commerce) UI 개념 학습 가이드
  • 교육과정 연계: 초등 5~6학년 도덕(나눔과 협동), 수학(가격 계산), 실과(SW 활용)
By 시간: