2026년 9월 7일 월요일

[사회·도덕] 우리 동네 안전 취약점 지도 & 모둠별 개선 제안 포털



학교 주변 위험 구역을 지도에 핀으로 찍는다 — '우리 동네 안전 취약점 지도 & 모둠별 개선 제안 포털'

🗺️ 초등 4~6학년 사회·도덕 융합 — 학생들이 학교 주변 통학로를 탐사하며 발견한 안전 취약점(신호등 없는 횡단보도, 파손된 보도블록) 사진을 지도에 핀으로 등록하고, 학급 전체가 투표를 통해 개선안을 도출하는 참여형 웹앱입니다. 교과서 속 지리 학습을 실생활 참여형 지역사회 문제 해결 프로젝트로 확장하여 능동적 시민성을 함양합니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
SVG 약도 지도 + 핀 마커 학교 주변 통학로 약도를 SVG 도형으로 그려두고, 학생이 터치한 위치에 주의 등급(빨강/노랑) 핀이 찍힙니다. 터치 시 핀을 클릭하면 현장 메모 팝업이 열립니다.
투표 기반 개선안 도출 등록된 위험 구역마다 '개선 제안' 버튼으로 의견을 모으고, 투표 수가 가장 많은 개선안이 상단에 표시됩니다. "신호등 설치" vs "횡단보도 재도색" 투표수 비교 그래프 자동 렌더링.
모둠별 제안 카드 모둠별로 제안한 개선 방안을 카드 블록으로 정리하면 전교생이 보는 안전 지도를 함께 완성합니다. CSV 내보내기로 교육청 안전신고용 목록 아카이빙.

2. 핵심 아키텍처 해설

① 위험 구역 데이터 구조: HAZARDS 상수

const HAZARDS = [
  { id: 1, x: 140, y: 90, level: "빨강", desc: "신호등 없는 횡단보도 — 출입 차량 많음", proposals: ["신호등 설치", "과속방지턱"] },
  { id: 2, x: 220, y: 130, level: "노랑", desc: "보도블록 파손 — 보행자 미끄럼 위험", proposals: ["보도블록 교체"] }
];

학생들이 조사한 위험 구역을 좌표(x, y), 주의 등급, 설명, 개선 제안 목록으로 상수에 심어둡니다.

② 투표 알고리즘 및 랭킹 렌더링

function voteProposal(hazardId, proposalText) {
  const h = HAZARDS.find(h => h.id === hazardId);
  if (!h.proposals.includes(proposalText)) h.proposals.push(proposalText);
  h.votes = h.proposals.map(p => ({
    text: p,
    count: HAZARDS.reduce((sum, x) =>
      sum + (x.id === hazardId ? 1 : 0), 0)
  }));
  renderProposals(h);
}

각 핀에 연결된 개선 제안 목록에 투표 수를 합산하고, 가장 많이 표를 받은 제안이 자동으로 상단에 표시됩니다.

③ SVG 지도 핀 마커 렌더링

function renderPins(svg) {
  HAZARDS.forEach(h => {
    const pin = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    pin.setAttribute("cx", h.x);
    pin.setAttribute("cy", h.y);
    pin.setAttribute("r", h.level === "빨강" ? 8 : 6);
    pin.setAttribute("fill", h.level === "빨강" ? "#e53e3e" : "#ecc94b");
    svg.appendChild(pin);
  });
}

SVG 문서 모델(SVG namespace)에 원(circle)을 추가하여 학생이 등록한 위치에 빨강/노랑 핀이 렌더링됩니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 학교 주변 통학로 지도 형식과 위험 구역 유형(신호등 부재, 도로 파손 등)에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 안전지도.html로 저장하여 학급 태블릿에서 투표합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리(CDN), 백엔드 서버 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 심기 모드(데이터 임베딩): const HAZARDS = [...] 상수에 학생이 발견한 위험 구역 3건 이상의 좌표·등급·설명·개선안을 내장하고 브라우저에서 즉시 렌더링되도록 한다.
3. SVG 지도 핀 마커: 학교 주변 약도를 SVG 도형으로 직접 그리고, 상수에 심어둔 좌표(x, y)에 빨강(위험)·노랑(주의) 원형 핀을 렌더링한다.
4. 투표 기반 개선안: 각 핀에 연결된 개선 제안 목록에 투표 수를 합산하고, 상위 개선안이 상단에 표시되도록 설계한다.
5. 학생 개인정보 최소 수집: 학생 실명 대신 모둠명과 닉네임만 취급하며, 세션 메모리로만 유지한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 학교 주변 약도(SVG)를 교실 화면에서 어떻게 그릴까요? (직접 도형으로 / 교사가 미리 그려서 심기)
Q2. 투표 시스템은 학급 태블릿에서 일괄 터치할까요, 아니면 개별 스마트폰에서 할까요?
Q3. 안전 지도 테마는 지도 앱 느낌의 회색 톤과 밝은 스카이 톤 중 어느 것으로 갈까요?

🎯 에디터 한줄평

"'내가 걸어온 길이 위험하다는 걸 내가 찾았어'라는 발견이 학생의 발언권을 조기에 부여합니다. 특히 투표로 개선안을 도출하는 과정은 지역사회 문제 해결의 핵심인 '시민적 합의'를 아주 자연스럽게 몸으로 배우는 경험입니다. 나중에 교육청에 실제 안전 신고를 넣을 때 데이터를 그대로 활용하면 더 큰 시민 과학으로 확장할 수 있습니다."

📚 기술·교육 참고 링크

  • 국토교통부 지역 안전시설 통계 및 도로교통안전 학생교육 표준 가이드라인
  • 교육과정 연계: 초등 4~6학년 사회(지역 문제 해결), 도덕(공동체적 삶), 과학(지역 환경 관찰)
By 시간: