하교 전 3분, 감사와 배움을 나누는 '1일 1성찰 일기 & 칭찬 다이어리'
💌 초등 창체·자치 및 인성 교육 — 학생들이 매일 하교 전 교실 태블릿이나 스마트폰으로 오늘 배운 핵심 지식 1가지와 친구에게 고마웠던 점을 기록합니다. 작성된 일기는 외부 클라우드 데이터베이스 없이 카카오톡 공유 링크(Web Share API)를 통해 부모님께 직접 전송되어 따뜻한 가정 연계 소통을 완성합니다.
📖 한 줄 정의
심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).
학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 하교 전 3문항 성찰 루틴 | 긴 일기 대신 ① 오늘 배운 배움 한 줄, ② 친구 칭찬 한 줄, ③ 오늘의 감정 이모지 3가지만 터치로 3분 만에 작성합니다. | 하교 10분 전 교실 전자칠판에 카운트다운 타이머 띄우고 일괄 작성. |
| Web Share API 원클릭 전송 | 복잡한 서버 연동 없이 브라우저 표준 공유 기능(navigator.share)으로 카카오톡, 문자메시지를 바로 호출해 부모님께 전달합니다. | "엄마! 오늘 나 이거 배웠어요" 텍스트와 함께 예쁜 카드 형태로 카카오톡 채팅방에 전송. |
| 로컬 스토리지 1년 누적 | 학생의 일기는 외부 서버에 저장되지 않고 학생 태블릿의 브라우저 로컬 저장소(localStorage)에만 보관됩니다. | 학기말에 '나만의 1년 배움 앨범' 인쇄 버튼으로 한 번에 PDF 출력. |
2. 핵심 아키텍처 해설
① 브라우저 표준 공유: Web Share API
async function shareDiary(title, text) {
if (navigator.share) {
await navigator.share({
title: title,
text: text,
url: window.location.href
});
} else {
// 미지원 브라우저 클립보드 복사 폴백(fallback)
navigator.clipboard.writeText(text);
alert("일기 내용이 복사되었습니다. 카카오톡에 붙여넣으세요!");
}
}외부 카카오 API 키나 개발자 등록 없이도, 브라우저가 기본 제공하는 navigator.share를 호출하면 스마트폰의 카카오톡 공유 창이 즉시 열립니다.
② 학생 기기 로컬 저장 (localStorage)
function saveDiary(entry) {
const history = JSON.parse(localStorage.getItem("my_diaries") || "[]");
history.push(entry);
localStorage.setItem("my_diaries", JSON.stringify(history));
}학생의 글이 어떤 중앙 서버로도 날아가지 않으므로 학내망 원칙을 철저히 지키며, 학생 개인 기기에서만 열람할 수 있는 프라이버시 금고가 됩니다.
3. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 질문 3가지(성찰 항목, 감정 이모지 종류)에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
성찰일기.html로 저장하여 태블릿에 배포합니다.
제미나이 전용 에러 제로 프롬프트
[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리(CDN), 백엔드 서버 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. Web Share API 연동: '카카오톡/가정으로 보내기' 버튼 클릭 시 navigator.share를 호출하고, 미지원 브라우저에서는 클립보드 복사 폴백(fallback)을 제공한다.
3. 로컬 저장소(localStorage) CRUD: 작성한 일기를 로컬에 저장하고, 하단에 최근 7일간의 성찰 카드 목록을 조회/삭제할 수 있는 UI를 제공한다.
4. 개인정보 보호: 학생 실명 대신 자치 닉네임만 쓰며, 일기 내용은 브라우저 내부 로컬에만 저장되어 외부 통신 0을 보장한다.
5. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.
[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 일기 작성 항목으로 [배운 점], [감사한 일], [내일의 다짐] 3가지를 기본으로 설정할까요?
2. 감정 선택 아이콘(기쁨, 뿌듯, 평온, 아쉬움, 피곤) 5종을 이모지로 제공할까요?
3. 모바일 화면에서 한 손 터치에 편하도록 입력 영역을 큼직하게 배치할까요?🎯 에디터 한줄평
"하교 전 3분, 오늘 하루를 스스로 돌아보고 친구의 이름을 부르며 고마움을 전하는 아이들의 마음은 어떤 평가 점수보다 값집니다. 카카오톡으로 전송된 짧은 세 줄 일기를 본 학부모님은 '오늘 학교에서 뭐 배웠니?'라고 묻는 대신 '오늘 ○○이 도와줬구나, 정말 멋지다'라는 따뜻한 대화로 저녁 식탁을 채우게 됩니다."
📚 기술·교육 참고 링크
- MDN Web Share API 명세 : 브라우저 네이티브 공유 인터페이스
- 교육과정 연계: 초등 3~6학년 창의적 체험활동(자율·인성 교육), 국어(쓰기·성찰 표현)
