2026년 9월 6일 일요일

[학급 경영] 일일 성찰 일기 & 감정 키워드 트래커 - 내 기기에만 남는 나의 성장 앨범



하루 3분의 성찰이 1년의 앨범이 된다 — 성찰 일기 & 감정 키워드 트래커 완전 정복

📔 매일 하교 전, 1인 1기기로 오늘의 감사한 일과 뿌듯한 순간, 감정 키워드(성취·우정·도전)를 2~3줄로 적어 저장(생성)하고 — 필요하면 다시 읽고(조회) 고치고(수정) 지우며(삭제) 1년간의 정서 성장 앨범을 스스로 구축합니다.

모든 일기는 내 기기 브라우저의 로컬 저장소(localStorage)에만 담깁니다 — 서버·클라우드 전송 일절 없음(학내망 원칙), 이름 칸 없음, 그리고 '검사'라는 개념도 없습니다. 감정 키워드별 필터링과 학기말 인쇄용 앨범 출력까지 단일 파일로 완결됩니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
하루 3분 루틴 하교 전 2~3줄 — 감사한 일, 뿌듯한 순간, 감정 이모지 고르기. 3분 타이머와 부드러운 저장음(Web Audio)으로 하루를 닫습니다. 3분 타이머 루틴.
CRUD 4동작 저장(생성)·읽기(조회)·고치기(수정)·지우기(삭제) — 어제 쓴 나를 다시 보고 다듬을 권리가 데이터로 구현됩니다. save·update·delete 함수.
감정 키워드 필터 성취·우정·도전 태그별 조회 — 나의 감정 패턴이 색으로 보입니다. '도전'만 골라보면 올 한 해 나의 성장 이야기가 정리됩니다. filterBy(tag) 함수.
성장 앨범 출력 학기말 인쇄용 서식(@media print) — 나의 1년 정서 성장 앨범을 인쇄 대화상자 'PDF로 저장'으로 출력(로컬 문서). album 서식.
원칙·정합 일기는 내 기기 로컬 저장소에만(외부 전송·클라우드·Firebase 금지), 이름·학번 칸 없음, 그리고 검사 개념 금지 — 일기는 교사가 읽지 않는 자기성찰 도구임을 명시. EMBED_KEYWORDS.

2. 핵심 아키텍처 해설

① 일기 데이터 구조와 저장

const KEYWORDS = ["성취", "우정", "도전"];

function saveEntry(date, mood, tags, text) {
  const all = loadAll();
  all.push({ date: date, mood: mood, tags: tags, text: text });
  localStorage.setItem("diary", JSON.stringify(all));
}

로컬 저장소는 내 기기 브라우저 안의 서랍 — 데이터는 네트워크를 지나지 않고 내 화면에서만 살아갑니다.

② 조회·수정·삭제

function loadAll() {
  return JSON.parse(localStorage.getItem("diary") || "[]");
}

function updateEntry(id, patch) {
  const all = loadAll();
  all[id] = Object.assign(all[id], patch);
  localStorage.setItem("diary", JSON.stringify(all));
}

function deleteEntry(id) {
  const all = loadAll();
  all.splice(id, 1);
  localStorage.setItem("diary", JSON.stringify(all));
}

③ 감정 키워드 필터

function filterBy(tag) {
  return loadAll().filter(function (e) {
    return e.tags.indexOf(tag) > -1;
  });
}

④ 성장 앨범 인쇄

@media print {
  body > *:not(#album) { display: none; }
  #album { display: block; }
}

⑤ 원칙·정합

데이터는 내 기기 브라우저에만 존재하고, 화면에는 이름·학번 칸이 처음부터 없습니다. 교사용 대시보드·검사 기능도 만들지 않습니다 — '쓰는 사람만 보는 일기'라는 설계 원칙이 정서 안전의 기술적 토대입니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사해 Gemini에 붙여넣습니다.
  2. 역질문 답변 — Gemini의 질문 3가지(감정 키워드 3종, 이모지 세트, 앨범 서식 톤)에 답하면 설계가 확정됩니다.
  3. HTML 파일 실행 — 완성 코드를 '성찰일기.html'로 저장 후 더블클릭 — 1인 1기기로 배포해 하교 전 3분 루틴을 시작합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 결과물은 외부 라이브러리·폰트·이미지 없이 단일 HTML 파일로 완성한다.
2. 사운드는 Web Audio API로 직접 합성한다: 저장 '똑', 필터 전환 '틱', 앨범 준비 '팡파르'. 오디오 파일·CDN 금지.
3. 모바일 터치 대응: 뷰포트 메타 태그 필수, 감정 이모지 버튼 최소 44px, 360px 가로 스크롤 금지.
4. 일기 저장은 브라우저 로컬 저장소(localStorage)만 사용 — 서버·클라우드·Firebase 등 외부 전송 일절 금지.
5. CRUD 4동작 완성: 저장(생성)·목록 조회·수정·삭제. 수정·삭제는 본인 확인 간단 확인 창 뒤에 실행.
6. 감정 키워드(성취·우정·도전)는 파일 상단 상수로 관리하고 키워드별 필터링 조회를 지원한다.
7. 이름·학번·학급 입력 칸을 만들지 않는다 — 일기는 쓰는 사람만 보는 것. 교사용 검사·대시보드 기능도 일절 만들지 않는다.
8. 학기말 '성장 앨범'은 @media print 인쇄용 서식으로 — 나의 날짜·키워드·문장을 앨범형으로 정리해 'PDF로 저장' 지원.
9. // TODO, /* 생략 */ 같은 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 바로 만들지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 감정 키워드 3종은 무엇으로 확정할까? (성취·우정·도전 기본)
Q2. 감정 이모지 세트는? (맑음·구름·비·천둥 4종 기본)
Q3. 성장 앨범 서식 톤은? (파스텔 앨범 / 학교 대표 색 토큰)

🎯 에디터 한줄평

일기장 검사라는 어색한 관습을 없애면서 성찰은 오히려 진실해집니다 — '나를 보는 것'은 교사가 아니라 나 자신이라는 설계의 뼈대가 보입니다. 감정 키워드 필터가 1년을 색으로 요약해 줄 때, 성찰은 감상이 아니라 나만의 데이터가 됩니다. 쓰는 사람만 보는 일기라는 원칙이 정서 안전의 가장 단단한 기술적 토대입니다.

📚 기술·교육 참고 링크

  • MDN — localStorage : 브라우저 로컬 저장소 사용법
  • 교육과정 연계: 창의적 체험활동(정서·성찰), 국어(일기 쓰기 표현)와 함께 확장
By 시간:
라벨: ,