우리 반 1일 학생 감정 날씨 & 또래 관계망 관찰 대시보드

🌦️ 아침 등교 시 학생들이 교실 태블릿에 오늘의 감정 날씨(맑음·구름·비·천둥)와 한 줄 소감을 남기면, 교사 화면에는 감정 변화 추이와 관심 필요 학생이 색상별로 시각화되는 정서 케어 웹앱입니다.

학생용 간편 터치 모드와 교사용 비밀 통계 대시보드를 분리해 구동합니다 — 내 감정이 옆 친구 화면에 남지 않는 설계가 정직한 기록을 만듭니다. 모든 데이터는 교사 태블릿 안에서만 완결됩니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
10초 감정 체크인	아침 자리에 앉자마자 태블릿에서 감정 아이콘 하나, 한 줄 소감 하나 — 인사말 겸 정서 신호등이 매일 아침 켜집니다.	교실 입구 태블릿 스탠드에서 등교하며 순서대로 터치 체크인.
제출 즉시 초기화(프라이버시)	한 줄 소감을 제출하면 화면이 즉시 깨끗하게 지워집니다 — 다음 학생에게 내 감정과 문장이 보이지 않습니다.	입력 후 자동 초기화 루틴 확인 — 프라이버시가 곧 정직한 기록을 만듭니다.
교사용 비밀 대시보드	비밀번호 토글로만 열리는 통계 화면에서 감정 분포·추이·관심 필요 학생을 색상별로 확인합니다 — 학생 화면과 완전히 분리됩니다.	아침 인사 후 교탁 PC에서 대시보드 열어 오늘의 정서 지도 파악.

좌석 지도 감정 색 교실 좌석 지도(seat map) 위에 감정 색이 겹쳐 보이는 관찰 지도 — 또래 밀도와 분위기 흐름을 한눈에 읽습니다. 표기는 번호·닉네임만. 화·목요일에는 좌석 지도로 봐 — 특정 구역에 '비'가 몰리면 대화로 확인. 관심 필요 감지 '비·천둥'이 연속된 학생은 자동으로 관심 목록에 올라가 색이 진하게 표시됩니다 — 조기 발견이 상담의 첫 걸음. 연속 신호 학생에게는 아침 맞춤 개별 상담으로 연결(교사 수동 결정). 원칙·정합 단일 HTML·외부 통신 0, 실명 칸 없음(번호·닉네임), 소감 속 쉼표는 CSV 보호를 위해 가운뎃점(·)으로 자동 치환, 데이터는 세션 메모리 + 종료 시 CSV 내보내기(교사 보관). 금요일에 CSV 내보내기로 주간 정서 기록을 로컬 파일로 보관.

2. 핵심 아키텍처 해설

① 감정 날씨 상수

const MOODS = [
  { key: "맑음", color: "#ffe066", score: 2 },
  { key: "구름", color: "#c9d6df", score: 1 },
  { key: "비", color: "#8ab6d6", score: 0 },
  { key: "천둥", color: "#5c6b73", score: -1 }
];

감정을 날씨 말로 바꾼 이유는 간단합니다 — 날씨에는 맑음이 곧 '좋은 사람'이라는 뜻이 없습니다. 학생은 상태를, 교사는 흐름을 보게 됩니다.

② 학생 입력 + 즉시 초기화

function submitMood(no, moodKey, note) {
  LOG.push({ at: nowStamp(), no: no, mood: moodKey, note: note });
  document.getElementById("note").value = "";
  showThankYou();   // 제출 화면 3초 표시 후 홈으로
  sound("ding");
}

기록은 교사 태블릿 세션 안에만 쌓이고, 학생 화면은 남김없이 초기화됩니다 — '보였을 불안'이 없어야 진짜 감정이 나옵니다.

③ 교사용 비밀번호 토글

function openBoard(pin) {
  if (pin !== TEACHER_PIN) { sound("nope"); return false; }
  document.getElementById("board").classList.add("on");
  return true;
}
// TEACHER_PIN은 파일 상단 상수 — 학생 화면에는 절대 표시되지 않음

④ 관심 필요 감지

function careList() {
  return LOG.filter(function (m) {
    return m.mood === "비" || m.mood === "천둥";
  });
}
// 연속 저기분 번호는 대시보드에서 진한 색으로 표시

⑤ CSV 아카이빙과 원칙

function moodCSV() {
  return LOG.map(function (m) {
    return [m.at, m.no, m.mood, m.note.replace(",", "·")].join(",");
  }).join(";");
}
// 소감 속 쉼표는 가운뎃점으로 치환해 CSV 칸을 보호

주간 기록은 로컬 파일로 보관(자동 외부 전송 없음), 상담 연계는 교사의 수동 결정으로 남깁니다 — 감정 데이터는 도구가 판단하는 것이 아니라 사람이 확인하는 것입니다.

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

프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사해 Gemini에 붙여넣습니다.
역질문 답변 — Gemini의 질문 3가지(감정 아이콘 종류, 대시보드 열림 방식, CSV 서식)에 답하면 설계가 확정됩니다.
HTML 파일 실행 — 완성 코드를 '감정날씨.html'로 저장 후 더블클릭. 학생 모드와 교사 모드가 한 파일 안에서 전환됩니다.

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

[🚨 에러 방지 기본 안전장치]
1. 결과물은 외부 라이브러리·폰트·이미지 없이 단일 HTML 파일 — 더블클릭 즉시 실행(서버·설치·회원가입·외부 클라우드 금지).
2. 학생 표기는 번호·닉네임만(실명·연락처 저장 금지) — 감정 데이터는 민감 정보이므로 화면 표시를 최소화한다.
3. 학생 모드: 감정 아이콘 4종 터치 + 한 줄 소감 입력 → 제출 즉시 화면 완전 초기화(다음 학생에게 표시 안 됨).
4. 교사 모드: 파일 상단 TEACHER_PIN 상수로 비밀번호 토글 — 학생 화면에는 절대 표시되지 않는 통계 대시보드.
5. 대시보드: 감정 분포(색상별), 좌석 지도(seat map) 위 감정 색, 연속 저기분 관심 목록(진한 색 표시).
6. 소감 속 쉼표는 가운뎃점(·)으로 자동 치환 — CSV 칸 보호. 'CSV 내보내기'로 로컬 파일 저장(자동 외부 전송 없음).
7. 태블릿 터치 대응: 감정 아이콘 최소 88px, 360px 가로 스크롤 금지. 사운드는 Web Audio 합성(제출 '딩', 오류 '삑').
8. // TODO, /* 생략 */ 금지 — 끝까지 완성.

[❓ 역질문 유도]
Q1. 감정 아이콘은 몇 종? (기본 4: 맑음·구름·비·천둥 — 학급 회의로 조정)
Q2. 대시보드 열림 방식은? (비밀번호 토글 / 이중 버튼 길게 누르기)
Q3. 주간 기록 CSV 서식은? (날짜,번호,감정,소감 기본)

🎯 에디터 한줄평

'오늘 기분 어때?'라는 물음이 '10초 체크인'이 되는 교실 아침 — 정서 케어의 시작은 대화이고, 이 도구는 대화가 필요한 학생의 조기 신호를 놓치지 않게 해줍니다. 제출 즉시 초기화와 비밀 대시보드의 이중 설계가 백미입니다. 도구가 학생을 판단하는 게 아니라, 교사가 신호를 확인하는 구조라는 점이 정서 교육의 올바른 자세입니다.

📚 기술·교육 참고 링크

MDN — Element.classList : 학생 모드·교사 모드 화면 전환
교육과정 연계: 창의적 체험활동(정서·배려), 사회(공동체)와 함께 활용 — 상담 연계는 학교 전문 상담 체계에 따름

인문학과 바이브 코딩의 만남

2026년 9월 6일 일요일

[바이브 코딩] 감정 날씨 체크인 & 관찰 대시보드 - 우리 반 정서 케어 단일 파일 앱