2026년 9월 6일 일요일

[교과 연계] 우리 동네 안심 등굣길 안전 지도 - 손끝으로 그리는 크라우드소싱 안전망



골목의 위험을 발견하고 함께 지킨다 — 안심 등굣길 안전 지도 웹앱 완전 정복

🚶 3~4학년 사회 '우리 고장의 환경과 안전' 단원. 학생들이 학교 주변을 직접 현장 답사하며 발견한 공사 현장, 횡단보도 파손, 시야 차단 구역을 지도 위에 핀(마커, marker)으로 꽂으면 — 학급 전체의 지혜가 모인 안심 등굣길 안전 지도가 완성됩니다.

주의 등급(노랑·주황·빨강) 터치 마커와 현장 설명 팝업, 제보 목록 로컬 CSV 내보내기까지. 외부 API 키 없이도 즉시 열리는 약도 캔버스 기반 심기 모드(데이터 임베딩)로 학내망 원칙을 철저히 지키며 크라우드소싱(crowdsourcing) 안전 교육을 실현합니다.

📖 한 줄 정의

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

학내망 원칙: 학교 배포 웹앱은 개인정보 수집·저장·전송 없음(외부 CDN·API 호출 0, 단일 파일) — 학생은 학내망에서 교사 PC 서버에 접속.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
참여형 안전 교육 교과서 삽화를 눈으로만 보던 수업에서, 학생들이 직접 발로 걸으며 발견한 실제 통학로 위험 요소를 지도에 제보하는 살아있는 수업으로 전환됩니다. 모둠별 답사 구역 지정 후 핀 등록.
주의 3등급 마커 위험도에 따라 노랑(주의)·주황(경고)·빨강(위험) 색상 핀을 터치 위치에 즉시 렌더링하고, 클릭 시 현장 메모 팝업이 뜹니다. addPin(x, y, level, memo) 함수.
무API 약도 캔버스 외부 지도 API 키 발급이나 인터넷 연결 없이도 학교 주변의 고유 약도(스트리트 라인)를 파일 안에 그려 실행. 학내망 배포의 100% 준수 기반이며, 카카오맵 API 확장은 교사 PC 시연 모드로 선택 진행합니다. drawStreets() 캔버스.
제보 CSV 내보내기 날짜, 위치 좌표, 등급, 메모를 세션 메모리에서 CSV로 내려받아 학급 안전 보고서 기초 자료로 활용합니다 (자동 외부 전송 0). exportReport() 버튼.

2. 핵심 아키텍처 해설

① 약도 캔버스와 좌표 변환

function mapXY(event) {
  const rect = canvas.getBoundingClientRect();
  return {
    x: Math.round((event.clientX - rect.left) / rect.width * 1000),
    y: Math.round((event.clientY - rect.top) / rect.height * 1000)
  };
}

터치 위치를 1000×1000의 논리 좌표로 변환해 저장하면, 창 크기가 바뀌어도 모든 핀이 정확한 위치에 다시 그려집니다.

② 주의 등급 핀 렌더링

const PINS = [
  { x: 420, y: 310, level: "red", memo: "차량 속도 과다" },
  { x: 610, y: 500, level: "yellow", memo: "야간 조명 부족" }
];

function drawPin(p) {
  ctx.beginPath();
  ctx.fillStyle = p.level === "red" ? "#e11d48"
    : (p.level === "orange" ? "#f59e0b" : "#fde047");
  ctx.arc(p.x, p.y, 14, 0, Math.PI * 2);
  ctx.fill();
  sound("pin");
}

터치 좌표마다 등급별 색 원을 그리고, Web Audio 합성으로 찍히는 소리를 함께 냅니다.

③ 제보 팝업(사진 대체 설명 카드)

canvas.addEventListener("click", function (e) {
  const pos = mapXY(e);
  const found = PINS.find(function (p) {
    return Math.abs(p.x - pos.x) < 30 && Math.abs(p.y - pos.y) < 30;
  });
  if (found) showMemo(found);   // 현장 메모 팝업
});

④ 제보 CSV 내보내기

function exportReport() {
  return PINS.map(function (p, i) {
    return [i + 1, p.x, p.y, p.level, p.memo].join(",");
  }).join("\n");
}

⑤ 원칙·정합

단일 HTML·외부 통신 0. 제보자 표기는 모둠 번호·닉네임만(실명 저장 금지), 사진 대신 현장 텍스트 메모와 도면 표기 방식을 기본으로 하여 민감한 위상 데이터가 외부로 나가지 않게 합니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사해 Gemini에 붙여넣습니다.
  2. 역질문 답변 — Gemini의 질문 3가지(지도 범위, 마커 등급 수, 팝업 메모 항목)에 답하면 설계가 확정됩니다.
  3. HTML 파일 실행 — 완성 코드를 '안전지도.html'로 저장 후 더블클릭 — 전자칠판에 띄우고 답사 결과를 즉시 기록합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 결과물은 외부 라이브러리·폰트·이미지 파일 없이 단일 HTML 파일로 완성한다.
2. 사운드는 Web Audio API로 직접 합성한다: 핀 등록 '똑', 경고 등급 등록 '삑', 지도 저장 '팡파르'.
3. 모바일 터치 대응: 뷰포트 메타 태그 필수, 마커 버튼 최소 44px, 360px 가로 스크롤 금지.
4. 파일 상단 SCHOOL_MAP 상수에 학교 주변 약도(도로 라인, 학교·집 위치 도형)를 캔버스 그리기 명령으로 심는다. 외부 지도 API·키 금지.
5. 터치 위치에 주의 3등급(노랑=주의, 주황=경고, 빨강=위험) 핀 마커를 생성하고, 등급별 색상을 변수로 관리한다.
6. 핀을 클릭하면 현장 메모 팝업이 뜨고, 수정·삭제는 관찰 모드(교사 PIN 토글)에서만 허용한다.
7. 제보 데이터(위치 좌표·등급·메모·닉네임)는 세션 메모리 + 'CSV 내보내기' 버튼으로 로컬 파일 저장(자동 외부 전송 금지).
8. // TODO, /* 생략 */ 같은 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 바로 만들지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 지도 범위는 어떻게 될까? (학교 반경 500m 약도 기본)
Q2. 위험 등급은 3종으로 확정할까? (노랑·주황·빨강 기본)
Q3. 팝업 메모 항목은? (날짜·등급·내용·제보 닉네임 기본)

🎯 에디터 한줄평

'안전하게 다녀오렴'이라는 말은 모호하지만, 빨간 핀 하나는 구체적인 행동 지침이 됩니다. 학생들이 발견하고 기록한 안전 지도는 방과 후 저녁 안내 안내서로 바뀌어 학부모와 나누어지는 학급의 백서가 됩니다. 위험을 피하는 안내가 아니라 위험을 설명하는 지도를 만들었다는 점에서 이 수업의 위격이 자연스럽게 정착됩니다.

📚 기술·교육 참고 링크

  • MDN — Canvas API : 약도 그리기와 좌표 이벤트
  • 교육과정 연계: 사회(우리 고장 환경과 안전), 지리(공간 위치 표기), 도덕(공동체 안전 협력) 단원과 함께 확장
By 시간:
라벨: ,