2026년 9월 6일 일요일

[국어·도덕] 한 학기 한 권 독서 마라톤 - 완독 D-Day 예측 트래커



나의 완독 D-Day는 언제일까? — '한 학기 한 권 독서 마라톤 & 완독 예측 트래커'

📚 초등 3~6학년 국어 '한 학기 한 권 읽기' 단원 — 아침 독서 시간마다 읽은 페이지 수를 입력하면, 내 독서 속도를 분석해 목표 책의 완독 예상 날짜(D-Day)를 자동 계산하고 학급 독서 마라톤 뱃지를 수여하는 수업 프로젝트입니다. 수기 독서 기록장의 번거로움 없이 지속적인 독서 동기를 부여합니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
완독 D-Day 자동 계산 총 페이지 수 ÷ 최근 7일 평균 읽은 페이지 수로 내 완독 예상 날짜를 매일 자동 갱신합니다. "목표 도착: 10월 28일 (D-45)" 타이머가 화면에 크게 표시됩니다.
독서 진도 시각화 마라톤 코스에 사각형 블록(페이지)이 하나씩 채워지는 진행률 그래프와 현재 위치 표시. 읽은 페이지 수 누적에 따라 색상이 변하는 마라톤 코스 트랙.
학급 뱃지 시스템 매주 50페이지 이상 읽으면 브론즈, 100페이지 이상이면 실버, 200페이지 이상이면 골드 뱃지를 획득합니다. '오늘 한 문장' 인상 깊은 구절 입력으로 인사이트 카드가 자동 생성.

2. 핵심 아키텍처 해설

① 독서 속도 분석 알고리즘

function calculateDDay(entries, totalPages) {
  if (entries.length === 0) return { dday: "-", days: 0 };
  const recent = entries.slice(-7);
  const pagesRead = recent.reduce((sum, e) => sum + Number(e.pages), 0);
  const avgPerDay = pagesRead / recent.length;
  const remaining = totalPages - entries.reduce((s, e) => s + Number(e.pages), 0);
  const daysLeft = Math.ceil(remaining / avg);
  return { dday: "D-" + daysLeft, days: daysLeft, avg: avg };
}

최근 7일간의 평균 독서 속도를 바탕으로 남은 페이지 수를 나누어 완독 예상 날짜를 동적으로 계산합니다.

② Canvas 독서 마라톤 트랙 시각화

function drawTrack(ctx, totalPages, readPages) {
  const blockW = 5;
  const filled = Math.floor((readPages / totalPages) * 200);
  for (let i = 0; i < 200; i++) {
    const x = 20 + i * 6;
    ctx.fillStyle = i < filled ? "#FF9800" : "#E0E0E0";
    ctx.fillRect(x, 100, 5, 40);
  }
  // 현재 위치 마커: 작은 달리기 아이콘
  const runnerX = 20 + filled * 6;
  ctx.fillText("🏃", runnerX, 150);
}

책 페이지 수를 200개의 트랙 블록으로 환산하고, 읽은 만큼 오렌지색으로 채워나가는 마라톤 코스 애니메이션을 제공합니다.

③ 인상 깊은 한 줄 서평 카드

오늘 읽은 구절 중 가장 마음에 와닿는 한 줄을 입력하면 배경색이 자동으로 변하는 '나만의 문장 카드'가 생성됩니다. 학기말 모으면 나만의 독서 감상 콜라주가 됩니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 목표 페이지 수(300~500p)와 진도 트랙 색상에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 독서마라톤.html로 저장하여 아침 독서 시간에 활용합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리, 서버 통신 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 완독 D-Day 예측: 최근 7일간의 일일 독서 페이지 수 평균을 계산하여 남은 페이지로 나누어 목표 완독일을 도출한다.
3. Canvas 마라톤 트랙: 읽은 페이지 비율에 따라 트랙 블록이 채워지는 시각적 진행률 막대를 Canvas로 그린다.
4. 로컬 기록 보관: 학생 번호와 닉네임만 사용하며, 데이터는 브라우저 localStorage에 안전하게 저장한다.
5. 학생 개인정보 0: 이름 이외에 연락처, 주소 등 민감 정보는 일절 취급하지 않는다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 목표 책의 총 페이지 수는 대략 몇 페이지 정도인가요? (기본값: 400p)
Q2. 학기말 보상 뱃지 기준을 주간 50p로 설정할까요?
Q3. 진행률 트랙 색상을 트랙 토너먼트(주황) 계열로 할까요, 스카이 블루 계열로 할까요?

🎯 에디터 한줄평

"완독이란 막연한 다짐이 아니라 수학적인 예측입니다. 내가 하루 평균 12.5쪽을 읽는다는 사실을 알고, 남은 300쪽을 계산해보면 'D-24'라는 날짜가 생깁니다. 막연한 다짐이 구체적인 목표로 바뀌는 순간, 아이들은 자기 속도를 이해하고 스스로 다독 계획을 세우게 됩니다."

📚 기술·교육 참고 링크

  • 독서 습관 형성 이론(독서 완독률 예측), 진도율 및 성취 추적 알고리즘
  • 교육과정 연계: 초등 국어(한 학기 한 권 읽기, 읽기 전략), 도덕(자기주도 학습과 인내)

[창체·자치] 아침 10분 독서 챌린지 - 오늘의 명문장 카드 뉴스 롤링 게시판



아침 첫 10분이 박사의 시간이 됩니다 — '아침 독서 챌린지 & 오늘의 명문장 카드 뉴스'

📖 초등 창체·아침 자율 독서 시간 — 아침 10분간 독서 후 마음에 와닿은 구절 한 줄을 입력하면, 전자칠판에 '우리 반 오늘의 명문장' 카드 뉴스가 실시간으로 롤링(Rolling)되며 슬라이드 넘김됩니다. 차분한 아침 분위기 속에서 친구들의 생각을 자연스럽게 공유하며 공감과 배려의 학급 풍토를 조성합니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
명문장 카드 뉴스 롤링 학생들이 입력한 감상 문구가 우아한 배경색 카드에 담겨 전자칠판에서 자동으로 슬라이드 전환됩니다. 5초 간격 오토플레이 버튼 및 수동 이동 화살표 지원.
독서 포인트 자동 누적 아침마다 입력하면 읽은 페이지와 함께 포인트가 쌓이고 주간 기준으로 '오늘의 사색가'에게 별모양 스탬프가 표시됩니다. 과거 입력 기록은 localStorage에 보존되며 학기말 통계에 활용됩니다.
부드러운 아침 분위기 조성 차분한 파스텔 색상 배경과 부드러운 화면 전환 효과로 아침 분위기를 조성합니다. 배경 색상은 요일마다 자동으로 조합되어 신선한 느낌을 유지합니다.

2. 핵심 아키텍처 해설

① 슬라이드 전환 카드 뉴스 엔진

function renderCardNews(entries, idx) {
  const card = document.getElementById("card-news");
  card.innerHTML = `
    

${entries[idx].sentence}

${entries[idx].nick} ${entries[idx].book}
`; card.style.animation = "slideIn 0.6s ease"; }

학생들이 입력한 인상 깊은 구절과 책 제목을 슬라이드 애니메이션으로 자동 순환시킵니다. 인라인 템플릿 리터럴 문법의 백틱(`) 문자를 사용하지 않도록 주의합니다.

② 자동 롤링 setInterval 폴링

let cardIdx = 0;
setInterval(function () {
  if (entries.length === 0) return;
  cardIdx = (cardIdx + 1) % entries.length;
  renderCardNews(entries, cardIdx);
}, 5000); // 5초 간격 자동 롤링

입력이 없을 때도 빈 화면 대신 최근 명문장이 순환하는 '아침 분위기'를 유지합니다.

③ 파스텔 배경 자동 변화

const PASTELS = ["#FFF3E0", "#E3F2FD", "#E8F5E9", "#F3E5F5", "#FFEBEE"];
document.body.style.background = PASTELS[new Date().getDay() % PASTELS.length];

오늘의 요일에 따라 하늘색, 초록, 노란 계열의 파스텔 배경이 자동으로 바뀌어 아침마다 새로운 느낌을 줍니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 슬라이드 간격(5초/8초)과 카드 색상 테마에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 아침독서.html로 저장하여 전자칠판에 상시 고정합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리, 웹폰트(CDN) 없이 시스템 폰트를 활용한 가벼운 HTML/CSS/JS로 완성한다.
2. 카드 뉴스 롤링: 학생들이 입력한 인상 깊은 구절을 5초 간격으로 슬라이드 전환하며 화면 중앙에 크게 표시한다.
3. localStorage 보관: 작성된 독서 기록은 로컬 저장소에 보존되어 다시 켜도 유지된다.
4. 학생 개인정보 0: 학생 실명 대신 '닉네임'만 표기하고, 외부 서버 전송은 일절 없다.
5. @media print 지원: '오늘의 명문장' 카드 뉴스를 인쇄용 요약 화면으로 출력할 수 있도록 한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 카드 뉴스에 표시될 문구 글자 크기를 32px로 할까요, 40px로 할까요?
Q2. 파스텔 배경 색상을 요일별로 자동 바꿀까요, 랜덤으로 바꿀까요?
Q3. 입력 화면을 별도 탭으로 분리할까요, 메인 화면 하단에 배치할까요?

🎯 에디터 한줄평

"아침에 책을 읽고 그 문장이 나를 조용히 공감하게 만들었다는 것은 이미 '마음의 어른'이 되었다는 증거입니다. 익명 입력으로 친구들의 서로 다른 시선을 모은 카드 뉴스는 언어 문해력뿐 아니라 '다른 사람의 감상을 존중하는 태도'까지 자연스럽게 훈련시킵니다."

📚 기술·교육 참고 링크

  • 창의적 글쓰기 및 한 줄 독서감상 이론
  • 교육과정 연계: 초등 국어(독서 감상문 쓰기), 창체(아침 자율 활동, 독서 교육), 도덕(존중과 공감)

[도서·행정] 도서관 다독 학급 선정 - 학급별 독서 랭킹 & 보고서 통계 대시보드



우리 학교에서 누가 제일 많이 읽었나요? — '도서관 다독 학급 선정 & 독서 이력 통계 관리기'

📊 초등 도서관·독서의 달(9월) 축제 행정 — 학년별·학급별 누적 독서 페이지 수와 월간 완독 권수를 실시간 랭킹 차트로 집계하고, 도서관 소식지용 요약 리포트를 자동 생성합니다. 도서관 담당 교사의 수기 통계 집계 부담을 90% 이상 줄이고, 학교 전체의 독서 문화를 시각화합니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
학급별 독서 랭킹 차트 학년 반별로 누적 페이지 수와 완독 권수를 내림차순 랭킹 목록으로 자동 정렬합니다. 1위부터 N위까지 순위가 매겨진 막대 그래프와 총 통계.
독서의 달 우수 다독자 선정 각 학급 상위 3명의 닉네임과 권수를 표시하여 우수 다독자 시상식에 그대로 활용할 수 있습니다. 학급 랭킹 클릭 시 해당 학급 학생들의 상세 통계가 드릴다운됩니다.
소식지용 요약 리포트 생성 '독서의 달 우수반 소식지 출력' 버튼을 누르면 A4 규격 요약 리포트를 @media print 서식으로 인쇄합니다. 교내 인트라넷 게시판이나 학부모 소식지에 바로 활용 가능.

2. 핵심 아키텍처 해설

① 학급 통계 데이터: BOOK_LOG 상수

const BOOK_LOG = [
  { grade: 3, class: 1, pages: 12400, books: 48, topReader: { no: 5, nick: "돌고래", books: 12 } },
  { grade: 3, class: 2, pages: 11800, books: 45, topReader: { no: 2, nick: "코알라", books: 10 } },
  { grade: 4, class: 1, pages: 14200, books: 52, topReader: { no: 8, nick: "해달", books: 15 } }
];

교사가 한 학기 동안 모은 데이터를 미리 심어두면 브라우저에서 즉시 집계되며, 학기말 갱신만으로 재사용 가능합니다.

② 랭킹 알고리즘과 렌더링

function sortRanking(logs) {
  return logs.slice().sort((a, b) => b.pages - a.pages);
}
function drawRankingBars(ctx, ranked) {
  const maxPages = ranked[0].pages;
  ranked.forEach((r, i) => {
    const barH = 40;
    const w = (r.pages / maxPages) * 500;
    ctx.fillStyle = i === 0 ? "#FFD700" : i === 1 ? "#C0C0C0" : "#CD7F32";
    ctx.fillRect(180, 40 + i * 50, w, 32);
    ctx.fillStyle = "#2d3748";
    ctx.fillText(r.grade + "학년 " + r.class + "반", 30, 65 + i * 50);
  });
}

금·은·동 메달 색상이 자동으로 부여되는 랭킹 막대 차트를 Canvas로 직접 렌더링합니다.

③ 도서관 소식지 @media print 출력

'독서 소식지 인쇄' 버튼을 누르면 브라우저 인쇄 화면이 열리며, A4 세로 규격의 깔끔한 도서관 소식지 서식이 출력됩니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 학년·학급 수와 상위 우수 다독자 기준에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 도서통계.html로 저장하여 도서관 행사에 활용합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리, 서버 통신 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 학급별 독서 랭킹: 누적 페이지 수와 완독 권수를 내림차순 정렬하여 금·은·동 메달 색상으로 Canvas 랭킹 차트를 렌더링한다.
3. 학생 개인정보 0: 학급명과 모둠·닉네임만 표기하며, 개인 실명은 일절 취급하지 않는다.
4. @media print 소식지: 독서의 달 우수 학급 목록 및 통계 요약을 A4 세로 규격 인쇄용 소식지로 출력한다.
5. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 학년별로 몇 개 반씩 통계에 포함할까요? (기본: 1~6학년 × 4반 = 24학급)
Q2. 우수 다독자는 학급별 상위 1명으로 선정할까요, 상위 3명으로 늘릴까요?
Q3. 랭킹 차트의 막대 색상을 오렌지 블록으로 할까요, 금은동 메달 계열로 할까요?

🎯 에디터 한줄평

"독서는 개인의 여정이지만, 학교 차원에서 누가 얼마나 읽었는지 그래프로 시각화하면 한 사람의 성취가 학교 전체의 챌린지가 됩니다. 데이터로 순위를 매기되, 모든 아이들이 각자의 속도로 진도를 나가고 있음을 동시에 확인시켜주는 것이 균형 잡힌 독서 문화 지향점입니다."

📚 기술·교육 참고 링크

  • 학교 도서관 통계 분석 및 다독 활성화 프로그램 이론
  • 교육과정 연계: 초등 국어(독서 습관 형성), 도서관 활용 교육, 학교 행정 자동화

[창체·자치] 학급 실시간 신문고 - 시설 불편 & 칭찬 건의함 대시보드



교실 벽에 신문고가 달린다 — '학급 시설 불편 사항 및 칭찬 건의함 실시간 신문고'

🔔 초등 창체·학급자치 — 교실 내 고장 난 교구, 청소 사각지대, 친구 칭찬 제보를 학생들이 태블릿으로 익명/실명(선택) 등록하면 교탁 전자칠판 대시보드에 실시간으로 접수되어 주간 학급 자치 회의 안건으로 자동 상정되는 스마트 학급 신문고입니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
5대 카테고리 자동 분류 '시설 고장', '청소 사각지대', '친구 칭찬', '급식 의견', '기타 제안' 5개 태그를 선택하면 자동으로 분류되어 랭킹화됩니다. 가장 많은 건의가 접수된 태그에 우선순위 배지가 표시됩니다.
익명/실명 선택 모드 익명으로 쓰면 누가 제출했는지 표시되지 않으며, 실명으로 쓰면 감사장 카드가 발급됩니다. 담임교사 비밀번호 입력 시에만 전체 목록이 열리는 이중 잠금 구조.
주간 자치 회의 안건 자동 상정 일주일 동안 접수된 건의를 좋아요 수 순으로 자동 정렬하여 다음 주 학급 회의 안건 목록을 생성합니다. @media print 회의록 서식으로 건의 처리 결과를 함께 인쇄.

2. 핵심 아키텍처 해설

① 카테고리 자동 분류 엔진

const TAGS = ["시설 고장", "청소 사각지대", "친구 칭찬", "급식 의견", "기타 제안"];
function classify(text) {
  for (const tag of TAGS) {
    if (text.includes(tag)) return tag;
  }
  if (text.includes("고장") || text.includes("부서") || text.includes("망가")) return "시설 고장";
  if (text.includes("고마") || text.includes("대단") || text.includes("감사")) return "친구 칭찬";
  return "기타 제안";
}

사용자가 태그를 직접 선택하거나, 입력 텍스트의 키워드를 자동으로 스캔하여 최적 카테고리를 분류합니다.

② 담임 전용 비밀번호 잠금 구조

let unlocked = false;
function unlockDashboard(pin) {
  if (pin === "2817") {
    unlocked = true;
    renderAll();
    return true;
  }
  sound("nope");
  return false;
}

학생이 볼 수 있는 화면에서는 건의 수만 표시되며, 담임교사가 PIN을 입력해야 세부 내용이 렌더링되는 2단계 접근 제어 구조입니다.

③ 주간 자치 회의 안건 상정 알고리즘

function meetingAgenda(items) {
  const withLikes = items.map(i => ({ ...i, likes: 0 }));
  const sorted = withLikes.sort((a, b) => b.likes - a.likes);
  return sorted.slice(0, 5); // 상위 5개 안건 자동 추출
}

일주일간 누적된 건의 중 투표(좋아요) 수가 가장 많은 상위 5개 건의를 다음 주 학급 회의 의제로 자동 상정합니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 학급 인원(20~25명)과 건의 카테고리 수(5개)에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 학급신문고.html로 저장하여 뒷벽 태블릿에 고정합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리, 서버 통신 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 5대 카테고리 자동 분류: 입력 텍스트의 키워드를 스캐닝하여 시설 고장·청소 사각지대·친구 칭찬·급식 의견·기타 제안으로 자동 분류한다.
3. 이중 비밀번호 잠금: 학생 화면에서는 건의 수만 표시되며, 담임교사가 PIN을 입력해야 세부 내용이 열리는 2단계 접근 제어를 내장한다.
4. 주간 안건 상정: 좋아요 수 순으로 상위 5개 건의를 다음 주 학급 회의 안건 목록으로 자동 정렬한다.
5. 학생 개인정보 0: 익명 입력이 기본이며, 실명 선택 시에도 닉네임과 번호만 사용한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 건의사항 텍스트 글자 수 제한을 100자로 할까요, 200자로 늘릴까요?
Q2. 카테고리 배지 색상을 파스텔 5색 계열로 할까요, 강한 고채도 계열로 할까요?
Q3. 주간 회의 안건 상정 시간을 매주 금요일 방과 전으로 고정할까요?

🎯 에디터 한줄평

"아이들이 '착한 말'로 건의할 기회가 학교에서만큼은 상대적으로 부족합니다. 이 작은 신문고는 칭찬(초록)과 제안(주황)을 나란히 놓아 교실을 '고치고 싶은 공간'에서 '우리가 지키고자 하는 공간'으로 전환시킵니다. 분쟁의 조기 경보 시스템은 교사의 관찰력이 아니라, 아이들의 손끝에서 출발합니다."

📚 기술·교육 참고 링크

  • 학급자치 회의 운영 이론 및 키워드 분류 알고리즘
  • 교육과정 연계: 초등 도덕(민주적 대화와 협력), 창체(학급자치, 소통 활동)

[안전·행정] 교내 시설물 하자 보수 원클릭 접수·처리 포털 - 사진 촬영→상태 추적



타일이 부서졌다면 카메라를 들어주세요 — '교내 시설물 하자 보수 실시간 원클릭 접수 포털'

🔧 학교안전행정·교무 — 파손된 타일, 고장 난 냉난방기, 창문 파손 등을 교직원이 스마트폰으로 촬영하면 행정실 담당자에게 접수 알림이 표시되고, 보수 진행 상황(접수 → 처리 중 → 완료)이 실시간으로 투명하게 공유되는 원클릭 시설물 관리 포털입니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
시설물 위치 코드 자동 분류 교실·복도·운동장·특별실 등 위치 코드를 선택하면 파손 종류(문·창문·냉난방기·타일)와 긴급도(긴급/일반)가 자동 분류됩니다. 긴급(빨강)으로 접수하면 관리자 대시보드 상단에 즉시 고정됩니다.
3단계 진행 상태 표시 "접수됨 → 처리 중 → 완료" 3단계 상태 라벨이 실시간 트래킹되어 보수 예정 시간을 투명하게 안내합니다. 완료 처리 시 파랑 표식이 자동으로 덮어써져 인정을 확인.
월간 보수 통계 요약 한 달간 접수 건수와 처리 완료율을 막대 차트로 집계하여 학교 안전 점검 보고서로 그대로 제출합니다. @media print 월간 하자 보수 통계 요약지 A4 인쇄 지원.

2. 핵심 아키텍처 해설

① 시설물 접수 및 상태 라벨링 엔진

const AREAS = ["교실", "복도", "운동장", "특별실", "급식실", "기타"];
const STATUS_LABELS = { pending: "🟡 접수", processing: "🔵 처리 중", done: "🟢 완료" };

function registerFix(area, detail, urgency) {
  const id = "FIX-" + String(FIX_LOG.length + 1).padStart(4, "0");
  FIX_LOG.push({ id, area, detail, urgency, status: "pending", at: nowStamp() });
  if (urgency === "긴급") moveTop(id);
  return id;
}

위치 코드와 긴급도(긴급/일반)를 선택하면 자동으로 ID가 부여되고, 긴급 건은 최상단으로 이동시켜 관리자가 즉시 인지하도록 합니다.

② 3단계 상태 전환 & 투명한 공유

function updateStatus(id, newStatus) {
  const item = FIX_LOG.find(f => f.id === id);
  if (!item) return false;
  item.status = newStatus;
  item.updatedAt = nowStamp();
  renderBoard();
  return true;
}

행정실 관리자가 보수 상태를 한 단계씩 업데이트하면 접수자(교사)의 화면에도 실시간으로 반영되어 "어디까지 처리됐는지" 투명하게 공유됩니다.

③ 월간 보수 통계 요약 리포트

function monthlyReport(logs) {
  const done = logs.filter(l => l.status === "done").length;
  const total = logs.length;
  const rate = Math.round(done / total * 100);
  return { done, total, rate };
}

월별 접수 건수, 처리 완료율(%), 미처리 긴급 건 등을 자동 집계하여 학교 안전 점검 보고서 양식으로 제출합니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 관리 위치 코드(교실/특별실 등)에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 시설보수.html로 저장하여 교무실 태블릿에 고정합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리, 서버 통신 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 시설물 위치 코드 선택: 교실·복도·운동장·특별실·급식실 등을 드롭다운으로 선택하고 상세 내용을 입력한다.
3. 3단계 진행 상태 라벨: 🟡 접수 → 🔵 처리 중 → 🟢 완료의 3단계 상태 표시 및 관리자 클릭 전환이 실시간 반영된다.
4. 긴급도 분류: 긴급 건은 대시보드 최상단에 붉은 배경으로 고정되어 즉시 관리자가 인지하도록 한다.
5. 학생 개인정보 0: 학생 정보는 취급하지 않으며, 교사 제보자 표기는 닉네임·부서만 사용한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 시설물 유형 드롭다운에 냉난방기·화장실·특별실험실까지 포함할까요?
Q2. 긴급 건 접수 시 화면 알림 사운드를 Web Audio로 합성할까요?
Q3. 월간 통계 요약을 인쇄용 A4 가로 보고서 양식으로 출력할까요?

🎯 에디터 한줄평

"'어제 행정실에 말했는데요'라는 아쉬움은 학교 안전사고의 뿌리입니다. 이 포털은 그 채찍질을 코드 라벨 하나로 명확하게 바꿔줍니다. 교사는 접수 시각과 상태 확인만으로 자신이 한 일을 증명하고, 행정 담당자는 '미처 못 본 것'을 미처 '완료해야 할 것'으로 변환하는 객관적 원장 연구의 일환이라 하겠습니다."

📚 기술·교육 참고 링크

  • 학교 시설물 안전 관리 지침 및 하자 보수 절차 표준화 이론
  • 교육과정 연계: 교무 행정 자동화, 학교 안전 점검, 시설 관리

[과학·영어·미술] 멸종위기 생태 지킴이 - 캔바 일러스트와 퀴즈로 엮는 인터랙티브 게임북



동물 구출 퀴즈와 카드가 살아 숨 쉬는 '멸종위기 생태 지킴이 게임북' 만들기

🐾 초등 5학년 과학 '생물과 환경' 단원 — 교과서 속 멸종위기 동물을 단순히 암기하는 대신, 학생들이 캔바(Canva)로 생태 카드뉴스를 디자인하고 동물 구출 퀴즈가 결합된 단일 HTML 인터랙티브 게임북을 직접 코딩합니다. 복도 게시판 QR코드를 통해 저학년 동생들에게 생태 보호 메시지를 나누는 참여형 융합 프로젝트입니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
디자인과 코드의 2단 분업 그림 그리기는 캔바 AI(Canva)로, 퀴즈 로직과 페이지 전환은 제미나이(Gemini)로 코딩합니다. 외부 웹사이트 호스팅 없이 단일 HTML 파일로 완결됩니다. 캔바에서 동물 일러스트 카드 4장을 PNG로 내려받아 EMBED_PAGES 상수에 Base64(베이스64)로 심기.
게임북(Gamebook) 인터랙션 일방적인 전자책이 아닙니다. 퀴즈 정답을 맞혀야 다음 서식지로 이동하고 멸종위기 동물을 구출하는 선택형 분기 스토리텔링입니다. 정답 클릭 시 부드러운 '구출 성공 팡파르(Web Audio API)'와 함께 생태 해설 팝업 띄우기.
복도 생태 게시판 QR 배포 완성된 HTML 파일을 학교 로컬 서버에 올리고 QR코드를 인쇄해 복도에 부착합니다. 1~2학년 동생들이 태블릿으로 태그해 플레이합니다. 화면 상단에 '쉬운 말 모드(동생들을 위한 큰 글씨)' 토글 버튼 제공.

2. 핵심 아키텍처 해설

① 게임북 분기 데이터: PAGES 상수

const PAGES = [
  {
    id: 1,
    animal: "반달가슴곰",
    habitat: "지리산 생태계",
    threat: "서식지 파괴와 밀렵",
    quiz: {
      q: "반달가슴곰의 가슴에 있는 흰 털의 모양은?",
      options: ["반달 모양", "별 모양", "동그라미"],
      answer: 0,
      rescueMsg: "구출 성공! 지리산 국립공원 보호 구역으로 이동합니다."
    },
    nextId: 2
  }
];

동물별 서식지 정보, 위협 요인, 구출 퀴즈를 하나의 구조화된 상수로 관리합니다. 학생들이 조사한 모둠별 멸종위기 동물을 JSON 객체로 추가하기만 하면 페이지가 무한히 확장됩니다.

② 순수 CSS 책장 넘김 효과

.book-container { perspective: 1000px; }
.page {
  transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
  transform-origin: left center;
}
.page.flipped { transform: rotateY(-180deg); }

외부 자바스크립트 라이브러리 없이 CSS 3D 변환(perspective, rotateY)만으로 실제 양장본 책장을 넘기는 듯한 입체감을 연출합니다.

③ Web Audio 효과음 & 완전 오프라인

구출 성공 시 브라우저 내장 Web Audio API로 상승하는 경쾌한 멜로디(도-미-솔-도)를 직접 합성하여 오디오 파일 다운로드 0을 실현합니다. 외부 통신이 전혀 없어 학내망 방화벽 속에서도 즉시 실행됩니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 던지는 동물 종류, 퀴즈 난이도 질문에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 생태게임북.html로 저장하여 더블클릭합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리, 외부 CSS 프레임워크(CDN), 외부 이미지 URL 링크를 일절 쓰지 않는다. 순수 HTML5, 바닐라 CSS, 바닐라 JS로만 단일 파일로 작성한다.
2. Web Audio API 무설치 사운드: 퀴즈 정답 시 상승하는 도-미-솔-도 팡파르, 오답 시 낮은 부저음을 브라우저 내장 오실레이터로 직접 합성한다. mp3/wav 오디오 파일 사용 금지.
3. 반응형 뷰포트 & 터치 대응: 교실 태블릿 및 스마트폰 세로/가로 모드 모두에서 책 레이아웃이 화면 중앙에 정렬되도록 CSS Flexbox/Grid를 적용하고, 버튼 최소 터치 영역을 48×48px로 보장한다.
4. 오프라인 심기 모드(데이터 임베딩): 파일 상단 const PAGES = [...] 상수에 멸종위기 동물 4종(반달가슴곰, 수달, 점박이물범, 사향노루)의 데이터와 퀴즈를 내장하여 외부 통신 0으로 구동한다.
5. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성된 코드를 출력한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 기획 질문을 먼저 나에게 던져줘:
1. 우리 모둠이 중점적으로 다룰 멸종위기 동물 3~4종은 무엇인가요?
2. 저학년 동생들이 풀 수 있는 2지선다형 쉬운 퀴즈로 구성할까요, 3지선다형으로 할까요?
3. 동물 이미지는 캔바에서 만든 그림을 붙여넣을 수 있도록 Base64 자리표시자 구조로 비워둘까요?

🎯 에디터 한줄평

"배운 것을 남에게 가르칠 때 가장 깊은 학습이 일어납니다. 고학년 학생들이 캔바로 생태 카드를 그리고 제미나이로 퀴즈 게임북을 엮어 복도에 게시할 때, 교실은 작은 게임 스튜디오가 되고 학생들은 환경 교육 전문가가 됩니다. 클릭 한 번으로 책장이 사르르 넘어가며 동물을 구출하는 경험은 저학년 동생들에게도 잊지 못할 생태 감수성을 심어줍니다."

📚 기술·교육 참고 링크

  • Canva 공식 웹사이트 : 카드뉴스 및 동물 일러스트 템플릿 제작
  • 국립생태원 멸종위기 야생생물 포털 : 국내 멸종위기 야생생물 I급·II급 공식 도감
  • 교육과정 연계: 5학년 과학(생물과 환경), 실과(소프트웨어와 프로그래밍, 융합 표현)

[창체·학급경영] 1인 1역 실천 다짐 - 나만의 퍼스널 로고와 디지털 자치 뱃지 보드 만들기



우리 반 자치 책임감이 쑥쑥 자라는 '1인 1역 퍼스널 로고 & 자치 뱃지 보드'

🌟 새 학기 학급 자치 및 창체 시간 — 학생들이 캔바(Canva)로 자신만의 정체성과 1인 1역 책임을 상징하는 퍼스널 로고(personal logo)를 디자인합니다. 교사는 이를 원형 라벨지에 인쇄해 책상에 붙여주고, 교실 전자칠판에는 터치 한 번으로 실천 스탬프가 찍히는 디지털 자치 뱃지 보드(badge board)를 띄워 즐거운 학급 자치 문화를 만듭니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
나만의 퍼스널 로고 디자인 캔바(Canva)의 도형과 아이콘을 이용해 '나를 나타내는 키워드 3가지'로 단순하고 직관적인 원형 심볼 마크를 디자인합니다. '빛나는 환경 지킴이(전등 담당)'처럼 자신의 역할과 성격을 융합한 로고를 SVG/PNG로 내보내기.
책상 스티커와 웹 뱃지 연동 원형 라벨지 인쇄로 아날로그 책상 명패를 만들고, 웹 대시보드에서는 해당 로고가 회전하며 실천 점수가 쌓입니다. 매일 하교 전 전자칠판에서 자신의 뱃지를 터치해 '오늘의 실천 불빛' 켜기.
개인정보 0 원칙 준수 학생 실명을 서버에 올리지 않습니다. 번호와 자치 닉네임, 그리고 로고 이미지 코드로만 화면을 구성합니다. 실천 기록은 브라우저 세션 메모리로 유지되고, 학기말에 교사용 CSV로 안전하게 아카이빙.

2. 핵심 아키텍처 해설

① 자치 역할 및 로고 데이터 구조

const ROLES = [
  {
    no: 1,
    nickname: "푸른 지구",
    roleName: "분리수거 대장",
    logoColor: "#10b981",
    logoIcon: "🌱",
    count: 0
  },
  {
    no: 2,
    nickname: "빛의 수호자",
    roleName: "에너지 지킴이",
    logoColor: "#f59e0b",
    logoIcon: "💡",
    count: 0
  }
];

학생들의 실명 대신 학급 번호와 자율 닉네임, 1인 1역 명칭, 로고 상징색 및 아이콘(또는 Base64 텍스트)을 상수로 관리합니다. 학생 개인정보가 외부로 나가지 않는 완전한 안전망입니다.

② 터치 시 회전하는 3D 뱃지 인터랙션

.badge-card {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
}
.badge-card:active {
  transform: scale(0.95) rotate(5deg);
}
.badge-card.active {
  border-color: #3b82f6;
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.5);
}

학생이 전자칠판이나 태블릿에서 자신의 뱃지를 터치하면 부드러운 스케일 축소와 미세 회전 애니메이션이 일어나며, 오늘 실천이 완료되었음을 알리는 네온 글로우 테두리가 활성화됩니다.

③ Web Audio 경쾌한 도장 찍는 사운드

뱃지 터치 순간 브라우저 오실레이터가 523Hz(도)에서 659Hz(미)로 빠르게 글리산도(주파수 이동)되는 명쾌한 '통!' 효과음을 합성하여 실천에 대한 즉각적 보상 감각을 제공합니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 학급 학생 수와 1인 1역 대표 역할 목록에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 자치뱃지보드.html로 저장 후 교실 전자칠판에서 엽니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 CSS/JS 라이브러리(CDN), 외부 폰트, 서버 통신 없이 단일 HTML 파일로 작성한다.
2. Web Audio API 무설치 사운드: 뱃지 터치 시 경쾌한 '통!' 도장 소리, 전체 학생 완료 시 축하 팡파르음을 내장 오디오 합성으로 구현한다. mp3 파일 사용 금지.
3. 전자칠판 최적화 반응형 그리드: 가로형 대형 디스플레이와 10인치 태블릿 모두에서 25~30개의 뱃지 카드가 시원하게 정렬되도록 CSS Grid(반응형 repeat, minmax 140px)를 적용한다.
4. 개인정보 보호 & 심기 모드(데이터 임베딩): 학생 실명 칸을 만들지 말고, 번호(1~25번), 자치 닉네임, 역할명, 로고 색상 상수로만 데이터를 구성한다.
5. 당일 실천 토글 & 리셋: 각 카드를 터치하면 실천 횟수가 +1 되고 '오늘 완료' 표시가 켜지며, 상단에 '내일 아침 자동 초기화(자정 기준)' 또는 '수동 전체 리셋' 버튼을 둔다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성된 코드를 출력한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 우리 반 학생 수는 총 몇 명인가요?
2. 1인 1역 대표 역할(예: 칠판 청소, 우유 당번, 도서 정리, 식물 돌봄 등) 기본 세트 5~6가지를 추천해 드릴까요?
3. 뱃지 카드를 둥근 원형 스티커 모양으로 디자인할까요, 방패 모양 뱃지로 디자인할까요?

🎯 에디터 한줄평

"역할은 주어지는 것이 아니라 내가 부여하는 의미에서 시작됩니다. 캔바로 나만의 로고를 그리고 교실 화면에서 내 뱃지가 환하게 빛나는 순간, 1인 1역은 '귀찮은 당번'에서 '나의 소중한 기여'로 승화됩니다. 아날로그 책상 라벨지와 디지털 웹 뱃지가 만나는 이 작은 장치가 학급 자치 문화를 바꾸는 가장 강력한 시작점이 됩니다."

📚 기술·교육 참고 링크

  • Canva 로고 메이커 : 원형 라벨지용 심플 벡터 로고 디자인
  • 교육부 인성교육종합계획 : 학급 자치 활동 및 배려·책임 실천 프로그램 가이드
  • 교육과정 연계: 초등 3~6학년 창의적 체험활동(자율·자치 활동, 봉사 활동)

[학부모상담·행정] 공개수업 포트폴리오 - 종이 바인더 대신 단 한 장의 디지털 성장 웹사이트 만들기



종이 바인더 없는 학부모 공개수업 — '1인 1학생 디지털 성장 포트폴리오 웹사이트'

📱 학기말 학부모 상담 및 수업 공개 주간 — 1년간 차곡차곡 쌓인 학생들의 미술 작품, 독서록 글쓰기, 바이브 코딩 웹앱, 발표 영상을 스마트폰 친화적 단일 HTML 성장 포트폴리오(portfolio)로 엮어냅니다. 두꺼운 종이 화일을 인쇄하고 제본하던 막대한 예산과 행정 부담을 제로화하고, 학부모 알림장 QR코드로 생동감 넘치는 배움의 여정을 투명하게 나눕니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
종이 바인더 제본 탈피 수십 페이지짜리 종이 포트폴리오를 인쇄·가위질·바인더 철하는 교사의 중노동을 없앱니다. 단일 HTML 웹 문서 하나로 전교생/전학급 포털 완결. 학부모 총회 및 공개수업 등록부에 QR코드를 비치하여 부모님 스마트폰으로 바로 열기.
모둠·영역별 탭 갤러리 미술 작품(그림), 글쓰기(국어), 코딩 프로젝트(실과), 활동 소감 4대 영역을 원클릭 필터 탭(tab)으로 매끄럽게 전환합니다. 학생이 만든 코딩 게임 실행 버튼을 누르면 해당 단일 파일 앱이 팝업 창으로 즉시 구동.
프라이버시 안전장치 외부 상용 호스팅(Vercel, Wix 등)에 민감한 아이들의 활동 기록을 올리지 않고, 파일 자체를 학교 홈페이지 공지나 알림장 첨부로 안전 배포합니다. 학생 얼굴 사진 대신 캔바로 디자인한 캐릭터 아바타나 작품 위주 큐레이션 적용.

2. 핵심 아키텍처 해설

① 학생 포트폴리오 메타데이터: PROJECTS 상수

const PORTFOLIO = [
  {
    studentNo: 1,
    category: "art", // art, writing, coding, speech
    title: "가을 풍경 수채화",
    date: "2026.10.15",
    desc: "우리 고장의 단풍나무를 관찰하여 원근감 있게 표현한 수채화 작품입니다.",
    media: "data:image/svg+xml;base64,...",
    reflection: "나무 기둥의 명암을 칠할 때 갈색과 검은색을 섞는 법을 배웠어요."
  }
];

학생별 작품 제목, 날짜, 교과 영역, 작품 소개, 학생의 메타인지 성찰(reflection) 한 줄을 상수로 관리합니다. 이미지는 파일 안에 Base64로 심어두어 인터넷 연결이 불안정한 교실에서도 사진이 끊김 없이 열립니다.

② 모바일 반응형 카드 그리드 & 모달 뷰어

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
}

스마트폰 화면에서는 1열 카드, 태블릿과 PC에서는 3~4열 격자로 자동 재배치됩니다. 카드를 탭하면 모달(modal) 팝업 창이 뜨며 작품 설명과 학생의 다짐을 큰 글씨로 보여줍니다.

③ 칭찬 한 줄 남기기 (세션 메모리)

학부모님이 자녀의 작품 밑에 "우리 딸 정말 수고 많았어!"라고 적을 수 있는 응원 댓글 창을 제공합니다. 이 글은 외부 서버로 나가지 않고 브라우저 세션 메모리에 머물며, 교사가 '응원 메시지 모아보기' 버튼으로 인쇄할 수 있습니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 전시 영역(미술, 글쓰기, 코딩 등)과 학급 번호 범위에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 성장포트폴리오.html로 저장하여 학부모 알림장에 링크합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리(Bootstrap, Tailwind 등 CDN), 서버 통신 없이 순수 바닐라 HTML/CSS/JS 단일 파일로 작성한다.
2. 모바일 퍼스트 반응형 레이아웃: 학부모 스마트폰 세로 화면에서 글자가 깨지지 않도록 메타 뷰포트를 설정하고 카드 썸네일 비율을 16:9로 일정하게 유지한다.
3. 영역별 필터 탭: 상단에 [전체보기], [미술 갤러리], [국어 글쓰기], [코딩 산출물], [성장 소감] 버튼을 두고 누를 때마다 해당 카테고리 카드만 부드럽게 필터링 렌더링한다.
4. 심기 모드(데이터 임베딩) 샘플: 파일 상단 const PORTFOLIO = [...]에 6~8개의 대표 샘플 데이터를 기본 내장하여 브라우저에서 열자마자 즉시 멋진 전시회가 보이도록 구현한다.
5. 학생 프라이버시 보호: 학생 실명 대신 번호와 자칭 닉네임만 표시하며, 얼굴 사진 대신 작품 사진과 텍스트 중심으로 레이아웃한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성된 코드를 출력한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 포트폴리오에 전시할 주요 교과 영역 3~4가지는 무엇인가요? (예: 미술, 국어, 실과 코딩, 자치 활동)
2. 학부모님이 스마트폰으로 열었을 때 따뜻한 파스텔 톤(아이보리/민트)과 깔끔한 모던 톤(화이트/블루) 중 어떤 테마를 선호하시나요?
3. 작품 카드 하단에 학부모 응원 한마디(댓글) 입력창을 포함할까요?

🎯 에디터 한줄평

"두꺼운 종이 바인더는 학년이 끝나면 먼지가 쌓이지만, 학생의 목소리와 작품이 살아 있는 웹 포트폴리오는 평생 간직하는 디지털 타임캡슐이 됩니다. 미술 수채화 옆에 바이브 코딩 실행 링크가 나란히 걸릴 때, 학부모는 우리 아이가 지난 1년간 경험한 미래 교육의 깊이를 한눈에 실감하게 됩니다."

📚 기술·교육 참고 링크

  • Canva 웹사이트 포털 : 작품 캡처 썸네일 프레임 및 포트폴리오 디자인
  • 교육부 초등 교육과정 총론 : 자기주도적 학습력 및 과정 중심 평가 기록 가이드라인
  • 교육과정 연계: 초등 전교과 과정 중심 평가 포트폴리오 및 학부모 공개수업

[학교 행사·행정] 창의융합 축전 & 해커톤 - 바이브 코딩 완성작 온라인 갤러리와 원스톱 심사 포털



30분 만에 띄우는 전교생 축전 포털 — 창의융합 축전 및 해커톤 온라인 갤러리 & 심사 시스템

🏆 교내 창의융합 축전 및 해커톤(hackathon) 행사 시즌 — 전교생 모둠별로 제출한 기획서와 바이브 코딩 완성작(단일 HTML 앱)을 한 페이지에 모아 투표 심사하고 온라인 갤러리에 전시하는 행사 포털을 구축합니다. 대형 간판 인쇄비 없이, 참가자 전원이 출품작 링크를 클릭하는 것만으로 무대가 열립니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
30분 만에 완성되는 전교 포털 복잡한 콘테스트 플랫폼에 가입할 필요 없이, 미리 만들어둔 단일 HTML 템플릿에 구글 폼으로 수합한 작품 정보를 심기 모드(EMBED_ENTRIES)로 박아넣기만 하면 됩니다. 행사 개최 아침에 학급별 링크 붙여넣기 → 오후에는 심사 대기 상태로 진열.
원클릭 미리보기 & 심사 참가작(HTML 앱)을 iframe 태그로 내장하여 실제 구동 화면을 확인하고, 온라인 투표 버튼을 클릭해 점수를 득점합니다. 심사원 교사 및 학부모 대표 투표 카드(3점 만점 자평 및 방식) 체크리스트 포함.
학생 저작권 & 프라이버시 출품작 소유자는 모둠 코드(예: 3반-1팀-하늘팀)입니다. 실명이나 학생 얼굴 사진은 포털에 일절 노출되지 않으며, 작품 캡처 이미지와 소개글로만 구성됩니다. 심사 결과는 브라우저 세션 메모리로 즉시 출력, 교사만 CSV 내보내기로 수령.

2. 핵심 아키텍처 해설

① 행사 출품작 마스터 데이터: ENTRIES 상수

const ENTRIES = [
  {
    entryNo: 1,
    team: "3-1 탐험가 모둠",
    title: "우리 동네 안심 등굣길 안전 지도",
    desc: "학교 주변 위험 구역을 핀으로 표시하는 안전 제보 웹앱입니다.",
    htmlContent: "<!DOCTYPE html>...", // 심기 모드: 출품작 단일 파일 소스
    coverColor: "#3b82f6"
  }
];

참가 모둠 번호, 작품 제목, 소개글, 그리고 학생이 직접 제작한 바이브 코딩 앱의 HTML 소스 코드 전체를 상수에 박아둡니다. 심사자는 팝업 창에서 실제 그 앱을 구동하여 관람할 수 있습니다.

② 내장된 자기 앱 즉시 구동 (Sandboxed iframe)

function runEntry(entryNo) {
  const target = ENTRIES.find(e => e.entryNo === entryNo);
  const frame = document.getElementById("preview-frame");
  const blob = new Blob([target.htmlContent], { type: "text/html" });
  frame.src = URL.createObjectURL(blob);
}

외부 서버에 올릴 필요 없이 Blob URL로 학생들이 직접 만든 앱을 관람자 컴퓨터에서 즉시 구동시킵니다. 제출된 학생의 작품이 각 영역에서 안전하게 분리 실행됩니다.

③ 실시간 투표 & 랭킹 산출 (세션 메모리)

포털에 접속한 학부모나 친구들이 마음에 드는 작품 옆의 '좋아요' 하트를 클릭하면 진동하는 Web Audio 사운드와 함께 점수가 즉시 합산됩니다. 순위 보드는 우승 후보가 변할 때마다 대기열 방식으로 자동 정렬되어 행사 중간중간 전자칠판에 크게 띄워지고, 행사 후 교사는 전체 투표 수를 CSV 파일로 받아 시상 세무를 간소화합니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 참가 팀 수, 심사 요소(창의성, 완성도)에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 축전포털.html로 저장하여 학교 홈페이지나 교내 메신저에 배포합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리, 외부 서버 통신 없이 단일 파일로 작성한다.
2. 카드 갤러리 & 팝업 실행기: 참가작 썸네일 그리드를 먼저 보여주고, 클릭 시 블러 처리된 배경 위에 해당 팀의 출품작을 iframe 형식으로 즉시 구동한다.
3. 색상 반응형 & 접근성: 시각적으로 화려한 그라디언트를 피하고 명도 대비가 높은 다크/화이트 토글을 지원한다.
4. 심기 모드(데이터 임베딩) 샘플: const ENTRIES = [...]에 3~5개 팀의 가상 예시 프로젝트(제목, 소개, 실행 코드)를 미리 심어 시연 화면이 바로 보이도록 구현한다.
5. 모둠 코드 익명화: 모든 참가자는 '반-번호-별칭' 형식으로 표시하며, 개인 실명 및 학생 인식 가능 얼굴 사진 절대 금지.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 행사 유형은 무엇인가요? (창의융합 축전 / SW 해커톤 / 온라인 박람회)
2. 심사 요소는 무엇으로 구성할까요? (창의성 40%, 완성도 40%, 발표력 20% 등)
3. 포털 상단에 학교 로고와 행사 주제 슬로건을 삽입할까요?

🎯 에디터 한줄평

"해커톤의 낭만은 밤샘 코딩이 아니라, 내가 만든 작은 프로그램이 우리 학교 대회장에서 수백 명의 관심을 받는 순간입니다. 일일이 실물 전시대를 옮기고 종이 점수지를 걷던 마라톤 같은 행사행정에서 벗어나, 원클릭 미리보기와 투표 랭킹으로 누구나 참여 가능한 열린 대회를 진행하세요. 심사 원칙도 아이들이 정하는 진정한 민주적 창의융합 문화가 여기서 태어납니다."

📚 기술·교육 참고 링크

  • Google Sites (구글 사이트) : 행사 공지 페이지 및 연계 서식 임베드 참고 자료
  • 교육부 창의인재교육 중심단체 : 초등 창의융합 해커톤 활동 운영 매뉴얼 및 우수 교육 사례
  • 교육과정 연계: 초등 5~6학년 SW·인공지능 교육 및 창의융합 연계 교육과정

[국어·사회] 노션 스타일 배움노트 - 사이드바 트리로 만드는 모둠 디지털 역사 백과사전



우리 모둠이 직접 만드는 노션(Notion) 스타일 주제별 탐구 배움노트 & 모둠 디지털 백과사전

📝 초등 5~6학년 국어 '정보 요약하기' 및 사회 '우리 역사의 발전' 단원 — 학생들이 역사 인물과 사건을 노션(Notion) 스타일의 사이드바 트리 구조로 정리하고 핵심 내용을 카드 블록(block)으로 정리하여 모둠별 디지털 역사 도감을 만듭니다. 외부 계정 가입 없이 단일 HTML 파일로 완결되는 참여형 지식 구조화 프로젝트입니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
노션 스타일 사이드바 트리 주제(조선시대) → 소주제(신분제) → 세부내용(탕평책) 계층 구조로 좌측 사이드바가 폴더처럼 펼쳐집니다. ▶ 클릭 시 서브 트리 펼침 애니메이션 + 이모지 아이콘으로 시각적 분류.
블록 단위 정보 카드 하나의 사건을 '제목 + 3줄 요약 + 태그' 카드 블록으로 정리하며 정보 요약력을 훈련합니다. 모둠원이 작성한 카드는 왼쪽 사이드바와 양방향 연결되어 클릭 시 자동으로 해당 위치로 이동.
가볍게 공유하는 링크 배포 외부 클라우드 계정 가입 없이 완성된 HTML 파일을 그대로 학급 패들릿이나 공유 폴더에 넣으면 다른 모둠도 곧바로 열람 가능합니다. 다른 모둠 도감의 '칭찬 스탬프' 버튼으로 정보의 신뢰도 투표.

2. 핵심 아키텍처 해설

① 트리 데이터: TREE 상수

const TREE = [
  {
    id: "root-1",
    emoji: "🏰",
    title: "조선 시대의 성립",
    children: [
      { id: "sub-1", title: "훈민정음 반포", content: "세종대왕이 백성을 위해 창제한 문자..." },
      { id: "sub-2", title: "과거 제도 정착", content: "학문을 통한 관료 선발 체계..." }
    ]
  }
];

사이드바는 이 재귀(recurse) 트리 상수를 순회하며 자동 렌더링됩니다. 학생이 추가한 정보 카드는 특정 소주제 아래에 바로 연결됩니다.

② 카드 블록 정보 정리 UI

.block-card {
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 12px;
}
.block-card:hover { background: #f9fafb; }

노션의 블록 개념을 재현한 카드 UI입니다. 학생들이 쓴 요약본에 태그(인물, 사건, 제도)를 부여하면 자동으로 카테고리 필터가 생성됩니다.

③ 모둠 배포용 CSV/HTML 링크 출력

완성된 트리 데이터는 '모둠 도감 공유 버튼' 클릭 한 번으로 별도 JSON 텍스트로 추출됩니다. 이를 학급 홈페이지나 패들릿에 게시하면 다른 모둠들이 서로의 백과사전을 방문하며 피드백을 나눌 수 있습니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 주제 계층(연대별/인물별/사건별)에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 모둠도감.html로 저장합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리(CDN), 서버 통신 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 심기 모드(데이터 임베딩): const TREE = [...] 상수에 역사 주제 트리와 4~6개의 소주제 콘텐츠를 내장하여 브라우저에서 즉시 실행되도록 한다.
3. 노션 스타일 UI 재현: 좌측 고정 사이드바(트리 뷰) + 우측 본문(카드 블록 그리드)의 2분할 레이아웃을 CSS Flexbox로 구현한다.
4. 학생 개인정보 0: 학생 실명 대신 모둠명과 닉네임만 사용하며, 입력 데이터는 브라우저 세션 메모리로만 유지한다.
5. 모바일 반응형: 모바일에서는 사이드바가 숨김 햄버거 메뉴로 전환되도록 미디어 쿼리 적용.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 우리 모둠이 탐구할 역사 시대 단위는 무엇인가요? (예: 선사시대, 삼국시대, 조선시대, 근현대)
2. 각 카드에 표시할 키워드 태그(인물, 사건, 유물, 제도) 4종 이상을 지정할까요?
3. 사이드바 폰트 크기와 카드 그리드 밀도는 기본값으로 할까요?

🎯 에디터 한줄평

"정보를 요약한다는 것은 남의 글을 복사하는 것이 아니라 나만의 지도를 그리는 행위입니다. 학생들이 노션 스타일 트리에 역사 인물을 배치하고 태그를 다는 과정에서 뜻밖에 발견하게 되는 것은 역사 지식이 아니라 '내 사고의 틀' 자체입니다. 언젠가 직장인들이 사용하는 업무 도구와 똑같은 구조를 초등학교 교실에서 다룬다는 것, 그것이 가장 자연스러운 미래 교육의 실감입니다."

📚 기술·교육 참고 링크

  • Notion 공식 홈페이지 : 블록 기반 지식 정리 UI 참고 자료
  • 교육과정 연계: 5~6학년 국어(정보 요약하기, 토론과 소통), 사회(우리 역사의 발전), 실과(정보처리 기초)