2026년 9월 6일 일요일

[창체·자치] 아침 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. 입력 화면을 별도 탭으로 분리할까요, 메인 화면 하단에 배치할까요?

🎯 에디터 한줄평

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

📚 기술·교육 참고 링크

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