2026년 9월 8일 화요일

[사회·실과·미술] 우리 고장 알리기 & 특산물 커머스 웹사이트 - 내 고장을 내 손으로 알린다

내 고장을 내 손으로 알린다! — 우리 고장 알리기 & 특산물 커머스 웹사이트 제작 프로젝트

🏪 초등 5~6학년 사회(지역 탐구), 미술(디자인), 실과(SW 활용) 융합 — 학생들이 조사한 우리 고장의 명소, 특산물, 맛집, 축제를 소개하는 홍보 웹사이트를 만들고, 특산물 소개 카드를 나만의 작은 온라인 상점처럼 꾸미는 지역 사랑 프로젝트입니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
종이 안내문 ➔ 내 고장 디지털 홍보관 우리 고장의 좋은 점을 A4 한 장에 다 담을 수 없습니다. 명소·특산물·축제를 각각 카드로 정리한 웹사이트가 훨씬 생동감 있습니다. 명소 카드 5장 + 특산물 카드 5장 + 축제 카드 3장 = 우리 고장 소개서 완성!
단순 소개 ➔ 커머스(Commerce) 구조 학습 특산물 카드에 가격, 수량, 구매 버튼을 추가하면 실제 쇼핑몰과 같은 구조를 배웁니다. "말과인 삼각김밥 — 800원 — 🛒 담기" 구조로 상품 카드 제작.
교사 제작 ➔ 학생 주도 큐레이션 담임이 만든 소개 자료 대신, 학생이 직접 조사하여 사진과 설명을 카드에 담는 학생 주도 큐레이션입니다. 캔바에서 특산물 사진을 디자인하고, 제미나이로 HTML 코드를 생성.

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

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 우리 고장 이름, 명소 5곳, 특산물 5종에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 우리고장.html로 저장 후 더블클릭합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리, 소셜 로그인, DB 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 명소·특산물 데이터 심기 모드: const PLACES = [{ name: "...", desc: "...", img: "Base64" }, ...] 및 const PRODUCTS = [{ name: "...", price: 0, desc: "..." }, ...] 상수에 우리 고장 정보를 내장한다.
3. 카드 그리드 레이아웃: 명소는 CSS Grid 3열로, 특산물은 2열로 배치하여 시각적으로 구분되게 한다.
4. 커머스(Commerce) 구조 학습: 특산물 카드에 가격과 🛒 담기 버튼을 넣어 실제 쇼핑몰 UI를 재현한다.
5. Web Audio 사운드: 카드 클릭 '똑', 담기 버튼 '똑똑'을 순수 Web Audio API로 합성한다.
6. 학생 개인정보 0: 학생 실명을 절대 저장하지 않으며, 모둠 번호 및 닉네임만 사용한다.
7. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 우리 고장 이름은 무엇인가요? (예: 강릉시, 전주시, 밀양시 등)
2. 소개할 명소 5곳과 특산물 5종은 무엇인가요?
3. 웹사이트 색상 톤은 우리 지역 상징색으로 할까요?

🎯 에디터 한줄평

"우리 고장을 알아보는 수업에서 끝나지 않고, 그 정보를 내 손으로 직접 웹사이트에 옮기는 것 — 그것이 지역 사랑을 지식에서 실천으로 바꾸는 가장 강력한 방법입니다. 아이들이 특산물 카드에 가격을 적고 담기 버튼을 만드는 순간, 지역 경제를 이해하는 사회 수업의 새로운 문이 열립니다."

📚 기술·교육 참고 링크

  • 지역 사랑 및 커머스(Commerce) UI 개념 학습 가이드
  • 교육과정 연계: 초등 5~6학년 사회(지역 탐구), 미술(디자인), 실과(SW 활용)
By 시간: