2026년 9월 6일 일요일

[과학·실과] 우리 학교 생태 위키 - 교내 식물 관찰 카드를 모아 만드는 전교생 협업 도감



전교생이 함께 쌓아가는 우리 학교 식물 생태 관찰 위키(wiki)

🌿 초등 5~6학년 실과 '좋은 친구, 좋은 생활' 및 과학 생물 단원 — 학생들이 교내 화단의 식물 이름과 개화 상태를 관찰하고, 관찰 사진 카드를 파일 안에 심어두면 모둠별 필터 및 검색 기능으로 학교 전체의 식물 도감이 자동으로 쌓입니다. 외부 데이터베이스 없이, 학생들이 직접 꾸며가는 우리 학교만의 디지털 생태 백과사전입니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
계절별 개화 상태 카드 식물 이름, 관찰 일자, 개화 단계(봉오리/개화/수과), 모둠명 카드가 격자로 배치되어 학교 화단의 생태 변화를 1년 동안 지도처럼 보여줍니다. 캔바로 촬영한 식물 사진을 EMBED_PLANTS 상수에 Base64로 심기.
모둠별 관찰 필터 어떤 모둠이 언제 어떤 식물을 관찰했는지 필터 버튼 하나로 확인하며 협업 관찰 기록을 검증합니다. 화면 상단 해시태그(#봄 #수국) 클릭 시 해당 카드만 즉시 필터링.
학년 간 인수인계 도감 6학년이 졸업해도 화단 관찰 기록이 HTML 파일 안에 남아 다음 학년 선배들의 관찰 연구가 이어집니다. '우리 학교 식물 대표 종 12종'을 하단에 정리하여 사회과 및 실과 수업에서 상시 활용.

2. 핵심 아키텍처 해설

① 식물 관찰 데이터: PLANTS 상수

const PLANTS = [
  {
    id: 1,
    name: "백목향",
    season: "봄",
    stage: "개화",
    location: "교실 앞 화단 3구역",
    team: "4-1 발견 모둠",
    desc: "흰 꽃이 피어나서 향기가 진하다. 벌들이 왕왕 찾아온다.",
    imgData: "data:image/svg+xml;base64,..."
  }
];

식물의 관찰 단계(봉오리, 개화, 수과)와 모둠명은 학생 실명 대신 모둠 코드로 관리되어 외부 개인정보 노출이 일절 없습니다.

② 식물 썸네일 라이트박스(Lightbox) 뷰어

.thumbnail {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}
.lightbox {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.8);
}

관찰 카드를 클릭하면 화면 전체에 크게 확대되어 잎의 표면 질감이나 꽃잎 색채를 자세히 살펴볼 수 있습니다. 모바일에서는 핀치 줌(두 손가락 확대)이 적용됩니다.

③ 워드 클라우드 활용

하단에 우리 학교 식물 이름들로 구성된 워드 클라우드(단어 구름)를 시각화하여 어떤 식물이 가장 자주 관찰되었는지 통계적 대중성을 한눈에 보여줍니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 계절 단위(봄/여름/가을/겨울) 및 식물 종에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 생태관찰위키.html로 저장하여 모둠 노트북에 배포합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리(CDN), 백엔드 서버 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 심기 모드(데이터 임베딩): const PLANTS = [...] 상수에 8~10개 교내 식물 관찰 기록(이름, 계절, 위치, 모둠, 설명, 이미지 Base64)을 내장하여 즉시 렌더링한다.
3. 모둠·계절 필터: 상단에 [전체], [봄], [여름], [가을] 및 [4-1팀], [4-2팀] 해시태그 필터를 적용하고 선택 시 해당 카드만 부드럽게 나타나도록 한다.
4. 개인정보 보호: 관찰자는 학생 실명 대신 모둠명과 자치 닉네임만 표기하며, 데이터는 파일 내 상수에만 존재한다.
5. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 우리 학교 화단에 있는 대표 식물 3~4종은 무엇인가요? (예: 개나리, 진달래, 목련, 대추야자)
2. 계절 필터는 4계절 기준으로 구분할까요, 월 단위(3월~11월)로 구분할까요?
3. 관찰 카드 배경색을 파스텔 그린과 브라운 중 어떤 색으로 갈까요?

🎯 에디터 한줄평

"생명의 발달 과정을 교과서 그림으로 배우는 것과 우리 학교 화단의 목련 봉오리가 하루 하루 변해가는 것을 직접 기록하는 것, 그 차이는 학생의 생태 감수성에서 하늘과 땅만큼 차이를 만듭니다. 클릭 한 번으로 전교생의 관찰 결과가 모둠 도감으로 모이는 이 웹앱은, 교실 밖 생태 르포르타주를 가장 자연스럽게 가르쳐주는 진짜 시민 과학 첫걸음입니다."

📚 기술·교육 참고 링크

  • 국립수목원 식물 도감 : 국내 교내·외 화단용 관찰 식물 목록 및 병충해 안내
  • 교육과정 연계: 초등 5~6학년 과학(생물과 환경, 생물의 다양성), 실과(식물 재배), 미술(자연 관찰 그리기)
By 시간: