2026년 9월 8일 화요일

[사회·국어·미술] 우리 고장 자랑거리 웹 그림책 - 캔바 삽화와 단일 HTML로 만드는 모바일 동화책



교실에서 뚝딱 출판하는 우리 고장 모바일 웹 그림책 — 캔바 삽화 & 단일 HTML 연동

📖 초등 3~4학년 사회 '우리 고장의 자랑거리' 및 국어 '작품을 감상해요' 단원 — 학생들이 직접 조사한 고장의 역사·명소·특산물 이야기를 캔바(Canva)로 그린 따뜻한 삽화와 결합하여, 모바일 스마트폰에서 책장을 넘기듯 읽을 수 있는 단일 HTML 모바일 웹 그림책을 완성합니다. 복잡한 앱 배포 없이 완성된 파일 하나를 학부모 알림장에 공유하는 것만으로 학급 출판 기념회가 열립니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
종이 책 vs 모바일 인터랙티브 웹북 종이 인쇄비나 스캔 과정 없이, 화면 터치와 스와이프로 책장이 넘어가는 모바일 전용 그림책 뷰어(viewer)를 구현합니다. 좌우 넘김 버튼 및 화면 스와이프로 1~2학년 동생들에게 읽어주는 그림책 수업.
캔바(Canva)와 제미나이의 분업 디자인은 캔바의 쉬운 일러스트 템플릿으로 그리고, 동작하는 페이지 전환 앱 코드는 제미나이가 단일 HTML로 작성합니다. 캔바에서 내보낸 이미지(Base64)를 코드 상단 상수에 붙여넣는 완전 오프라인 배포.
내장 TTS 발음 읽어주기 글을 읽기 어려워하는 저학년이나 다문화 학생을 위해, 웹 브라우저 로컬 음성(TTS)으로 본문을 구연동화처럼 읽어줍니다. '소리 듣기' 버튼으로 외부 전송 없는 localService 음성 자동 재생.

2. 핵심 아키텍처 해설

① 그림책 페이지 데이터: PAGES 상수

const PAGES = [
  {
    page: 1,
    title: "우리 고장의 푸른 호수",
    image: "data:image/svg+xml;utf8,...",
    text: "우리 마을 중심에는 사계절 내내 반짝이는 아름다운 호수가 있어요. 철새들이 쉬어가는 따뜻한 보금자리랍니다.",
    soundText: "우리 마을 중심에는 사계절 내내 반짝이는 아름다운 호수가 있어요."
  }
];

모든 페이지의 글과 그림 데이터를 PAGES 상수에 심어두는 심기 모드(데이터 임베딩) 구조입니다. 외부 서버 호출이 전혀 발생하지 않아 학교 방화벽 안에서도 완벽히 돌아갑니다.

② 순수 CSS 터치 스와이프 & 페이드 전환

.book-container {
  display: flex;
  transition: transform 0.4s ease-in-out;
  touch-action: pan-y;
}
.page-view {
  min-width: 100%;
  box-sizing: border-box;
  padding: 20px;
}

외부 자바스크립트 라이브러리 없이 순수 CSS Flexbox와 transform: translateX() 연산으로 책장이 부드럽게 넘어가는 반응형 인터랙션을 완성합니다.

③ 로컬 전용 구연동화 TTS 음성

function readPage(text) {
  if (!window.speechSynthesis) return;
  window.speechSynthesis.cancel();
  const utter = new SpeechSynthesisUtterance(text);
  utter.rate = 0.9; // 저학년을 위한 차분한 낭독 속도
  const voices = window.speechSynthesis.getVoices();
  const koVoice = voices.find(v => v.lang.startsWith("ko") && v.localService);
  if (koVoice) utter.voice = koVoice;
  window.speechSynthesis.speak(utter);
}

localService: true 플래그를 확인하여 학생 텍스트가 외부 서버로 나가지 않는 완전한 로컬 합성 음성을 재생합니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 고장 명소와 페이지 수(4~6쪽)에 답합니다.
  3. HTML 파일 실행 — 코드를 메모장에 붙여넣고 고장그림책.html로 저장 후 더블클릭합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리(CDN), 외부 폰트 없이 순수 바닐라 HTML/CSS/JS로만 작성한다.
2. 심기 모드(데이터 임베딩): const PAGES = [...] 배열 상수에 최소 4페이지 분량의 우리 고장 이야기(제목, SVG 임베드 삽화, 줄거리 텍스트)를 기본 내장한다.
3. 반응형 책장 넘김: 모바일 스마트폰 화면(360px)과 태블릿 가로 화면 모두에 최적화된 좌우 슬라이드(이전/다음 버튼 + 키보드 좌우 화살표 지원)를 구현한다.
4. 로컬 TTS 지원: '구연동화 듣기' 버튼 클릭 시 Web Speech API의 localService 한국어 음성으로 본문을 읽어주며, 외부 서버 음성은 차단한다.
5. 학생 개인정보 0: 학생 실명 대신 모둠명(예: '3반 2모둠 탐험대')만 표기한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 우리 고장의 어떤 자랑거리(유적지, 자연명소, 특산물, 축제 등)를 중심으로 이야기를 구성할까요?
2. 기본 그림책 분량은 몇 페이지(권장: 4~6페이지)로 설정할까요?
3. 전체적인 디자인 색상 톤은 따뜻한 파스텔(오렌지/그린)과 산뜻한 스카이블루 중 어느 것을 선호하시나요?

🎯 에디터 한줄평

"아이들이 직접 쓴 글과 그림이 손안의 스마트폰에서 실제 '넘겨지는 책'으로 변할 때, 교실의 공기가 달라집니다. 고장의 옛이야기를 조사하는 수업이 단순한 지식 암기에 머물지 않고, 후배와 부모님께 선물하는 한 권의 디지털 동화책으로 완성되는 경험은 평생 남는 자부심이 됩니다."

📚 기술·교육 참고 링크

  • Canva 교육용 템플릿 공식 가이드: 동화책 일러스트 및 레이아웃 제작 참고
  • 교육과정 연계: 초등 3~4학년 사회(우리 고장의 자랑거리, 문화유산), 국어(작품을 감상해요, 생각을 나누어요), 미술(시각 문화와 디지털 표현)
By 시간: