월요일 아침, 임원이 명언을 심는다 — 1일 1명언 플래시 카드 & 마음 챙김 완전 정복

☀️ 학급 자치 임원들이 매주 월요일 캔바(Canva)로 명언 카드의 문구와 디자인을 만들면, 제미나이 프롬프트가 그 데이터를 심은 단일 HTML 플래시 카드 앱으로 바꿉니다 — 학생들이 등교 후 크롬북에서 카드를 뒤집고 '오늘의 다짐'을 한 줄 적는 아침 5분 루틴.

다짐은 기록이 아니라 마음 — 입력하면 화면에 잠깐 떠올랐다가 부드럽게 사라지는 연출(저장 0). 이어지는 '숨 고르기 3회' 가이드가 마음 챙김(mindfulness)의 첫 5분을 완성합니다. 단일 HTML·외부 통신 0.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
자치 임원 제작 루틴	월요일 아침 회의에서 임원이 명언 5개를 선정하고 캔바(Canva)로 문구·색을 다듬습니다. '우리 반의 말'이 카드가 되는 자치 활동입니다.	임원 회의 → 명언 선정 → 상수 갱신(1분).
플래시 카드 뒤집기	CSS 회전(rotateY)으로 3D 카드가 뒤집힙니다 — 앞면은 명언, 뒷면은 출처와 의미. 터치 한 번으로.	카드 클릭 → 뒤집기 → 출처 확인.
오늘의 다짐	한 줄 다짐을 입력하면 화면에 큰 글씨로 잠깐 떠올랐다가 부드럽게 사라집니다. 저장은 하지 않습니다 — 다짐은 누구의 것인지 남기지 않는 시간이기 때문입니다.	입력 → 연출 8초 → 화면 초기화.
마음 챙김 3회 호흡	원이 커졌다 작아지는 시각 가이드와 부드러운 숨 사운드(Web Audio sine)로 아침 5분을 마무리합니다.	'숨 고르기' 버튼 → 원 크기에 맞춰 들쉬기.
원칙·정합	단일 HTML·외부 통신 0. 다짐·명언 데이터는 상수·세션으로만 존재(외부 전송 없음), 교실 앞 태블릿에 상시 대기 화면으로 띄워둡니다.	EMBED_QUOTES 명언 상수 + 대기 화면.

2. 핵심 아키텍처 해설

① 명언 상수

const QUOTES = [
  { text: "천 리 길도 한 걸음부터", src: "옛말" },
  { text: "작은 일도 최선으로", src: "우리 반 약속" }
];

임원이 갱신하는 부분은 이 상수뿐 — 매주 월요일 1분의 심기 루틴입니다.

② 3D 뒤집기

.card { perspective: 800px; }
.card-inner.flipped { transform: rotateY(180deg); }
.face { backface-visibility: hidden; }
.back { transform: rotateY(180deg); }

③ 다짐 사라짐 연출

function showResolution(text) {
  banner.textContent = text;
  banner.style.opacity = 1;
  setTimeout(function () {
    banner.style.opacity = 0;   // 8초 후 부드럽게 소멸 — 저장 0
  }, 8000);
}

다짐을 서버나 시트에 남기지 않는 설계 — '남기지 않아야' 아이들이 자기 마음을 진짜로 적을 수 있습니다.

④ 마음 챙김 호흡

function breathCycle() {
  circle.style.transform = "scale(1.5)";   // 4초 들숨
  setTimeout(function () {
    circle.style.transform = "scale(1)";   // 4초 날숨
  }, 4000);
}

⑤ 원칙·정합

단일 HTML·외부 통신 0. 학생 이름 칸 없음, 다짐 텍스트는 8초 후 화면에서 사라지고 어디에도 저장되지 않음 — 감성 루틴이면서 가장 엄격한 프라이버시 보호를 동시에 지킵니다.

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

프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사해 Gemini에 붙여넣습니다.
역질문 답변 — Gemini의 질문 3가지(명언 테마, 호흡 시간, 화면 톤)에 답하면 설계가 확정됩니다.
HTML 파일 실행 — 완성 코드를 '마음챙김.html'로 저장 후 교실 태블릿에 띄우기.

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

[🚨 에러 방지 기본 안전장치]
1. 결과물은 외부 라이브러리·폰트·이미지 없이 단일 HTML 파일로 완성한다.
2. 사운드는 Web Audio API로 직접 합성한다: 카드 뒤집기 소리('사각'), 다짐 등장 부드러운 피아노톤('사라라'), 숨 고르기 부드러운 sine파 숨소리('쉬으으', '하아아').
3. 모바일 터치 대응: 뷰포트 메타 태그 필수, 다짐 입력 필드 font-size 18px 이상, 360px 가로 스크롤 금지.
4. 파일 상단 QUOTES 상수에 명언 세트를 심는다: text(명언), src(출처). 데이터는 학내망 외부 호출 0.
5. 플래시 카드는 CSS transform(rotateY, perspective)으로 3D 뒤집기를 직접 구현한다.
6. 오늘의 다짐을 입력하면 8초간 큰 글씨로 표시했다가 부드럽게 사라지는 연출만 하고, 서버·localStorage·외부 저장소에 절대 저장하지 않는다.
7. 마음 챙김 호흡은 4초 들숨, 4초 날숨 3회 반복을 원 크기 애니메이션과 함께 보여준다.
8. // TODO, /* 생략 */ 같은 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 바로 만들지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 명언의 테마와 출처는? (옛말 / 우리 반 약속 / 유명 인물)
Q2. 숨 고르기 시간은? (기본 4초+4초, 3회 반복)
Q3. 화면 배경색 톤은? (부드러운 크림 / 학교 대표 색)

🎯 에디터 한줄평

'지시를 내리는 아침'이 '임원이 무대를 준비하는 아침'으로 바뀌었습니다. 명언을 골라 캔바로 다듬고 파일에 심는 임원의 1분이, 학급 자치의 가장 부드러운 시작이 됩니다. 다짐이 8초 후 사라지는 설계가 이 글의 꽃 — 기록되지 않아야만 진실하게 쓰는 마음이 있고, 마음 챙김 3회 호흡으로 그 진심이 아침의 첫 번째 문장이 됩니다.

📚 기술·교육 참고 링크

Canva 공식 사이트 : 명언 카드 디자인 도구 (디자인 제작 전용)
교육과정 연계: 창의적 체험활동(학급 자치·정서 교육)과 함께 활용

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

2026년 9월 6일 일요일

[학급 경영] 1일 1명언 플래시 카드 & 마음 챙김 - 자치 임원이 갱신하는 아침 루틴