어려운 탐구 보고서를 4컷 만화로 요약한다! — 리서치 보고서 & 4컷 삽화 자동 생성기
🔬 초등 5~6학년 사회·과학 자유탐구 및 국어 '요약하여 표현해요' 단원 — 학생들이 탐구 주제 키워드를 입력하면, 핵심 리서치 요약문(도입-탐구-결과-제언)과 함께 이를 직관적으로 설명하는 4컷 만화 컷 구성(스토리보드) 및 CSS 캔버스 삽화를 즉시 조판해 줍니다. 텍스트 위주의 지루한 보고서 대신 A4 1장에 글과 그림이 완벽히 조화된 시각적 탐구 포트폴리오를 완성합니다.
📖 한 줄 정의
심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).
학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 줄글 보고서 vs 4컷 만화 요약 | 학생들이 가장 어려워하는 '핵심 요약'을 4개의 칸(기-승-전-결)에 나누어 시각적으로 스토리텔링합니다. | 1컷(동기) → 2컷(실험) → 3컷(발견) → 4컷(결론) 템플릿으로 과학 전람회 보고서 작성. |
| 순수 CSS 컷 만화 렌더링 | 무거운 외부 이미지 생성 API 없이, 말풍선·말머리 이모지·CSS 격자로 가벼운 만화 컷을 브라우저가 직접 그립니다. | 키워드 선택 시 각 컷의 대사와 배경색이 실시간 반응하여 변경. |
| 인쇄 최적화 A4 원클릭 출력 | 화면에서 완성된 보고서와 4컷 만화를 브라우저 인쇄(Ctrl+P) 시 A4 1장에 여백 없이 딱 맞게 출력합니다. | '보고서 인쇄' 버튼 클릭으로 PDF 저장 및 교실 게시판 부착. |
2. 핵심 아키텍처 해설
① 4컷 만화 템플릿 데이터: COMIC_TEMPLATES 상수
const COMIC_TEMPLATES = {
"환경오염": [
{ cut: 1, title: "발견", emoji: "🏭", speech: "우리 동네 하천에 거품이 왜 이렇게 많지?" },
{ cut: 2, title: "탐구", emoji: "🧪", speech: "간이 수질 검사 키트로 pH를 측정해보자!" },
{ cut: 3, title: "결과", emoji: "📈", speech: "공장 폐수 유입 지점에서 오염도가 3배 높았어." },
{ cut: 4, title: "실천", emoji: "🌱", speech: "주민 알림판을 세우고 친환경 세제를 쓰자!" }
]
};주요 과학·사회 탐구 주제별로 4컷 만화 시나리오를 심기 모드(데이터 임베딩) 상수로 내장하여, 외부 통신 없이 즉시 시각적 뼈대를 제공합니다.
② 순수 CSS 2×2 만화 컷 그리드 & 말풍선 UI
.comic-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
background: #000;
padding: 8px;
border-radius: 8px;
}
.comic-cut {
background: #fff;
border-radius: 4px;
padding: 12px;
min-height: 140px;
position: relative;
}
.bubble {
border: 2px solid #333;
border-radius: 12px;
padding: 8px 12px;
font-size: 13px;
background: #fdfefe;
}2×2 만화 그리드 레이아웃과 CSS 가상 요소를 활용한 말풍선 꼬리표로 웹툰 같은 시각적 생동감을 브라우저 자체 렌더링으로 구현합니다.
③ A4 가로/세로 자동 인쇄 미디어 쿼리
@media print {
body { background: #fff; padding: 0; }
.no-print { display: none !important; }
.report-page {
width: 210mm;
min-height: 297mm;
padding: 15mm;
box-shadow: none;
page-break-after: always;
}
}버튼이나 입력창은 숨기고, 탐구 보고서 본문과 4컷 만화 삽화 영역만 종이 A4 규격에 완벽히 인쇄되도록 가드레일을 둡니다.
3. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 탐구 교과(과학/사회)와 주제에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
탐구만화보고서.html로 저장 후 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리(CDN), 이미지 생성 API 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 심기 모드(데이터 임베딩): 과학/사회 대표 탐구 주제 5종(수질오염, 빛의 굴절, 분리수거, 우리 문화재, 생태계 먹이사슬)에 대한 4컷 만화 시나리오(이모지, 말풍선 대사, 해설)를 상수로 기본 내장한다.
3. 2×2 만화 그리드 레이아웃: CSS Grid로 신문 만화 스타일의 4컷 프레임을 구현하고, 학생이 직접 컷별 대사를 클릭하여 수정할 수 있도록 contenteditable 속성을 적용한다.
4. 인쇄 지원: @media print 스타일을 적용하여 '인쇄하기' 버튼 클릭 시 불필요한 컨트롤을 숨기고 A4 1장 규격으로 깔끔하게 출력한다.
5. 학생 개인정보 0: 학생 실명 입력 칸을 배제하고 탐구자 번호와 모둠 닉네임만 표시한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.
[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 주로 어떤 교과 탐구(과학 자유탐구, 사회 지역문제 탐구 등)에 적용할 예정인가요?
2. 기본으로 내장할 추천 탐구 주제 3가지를 미리 정해둘까요?
3. 만화 컷 디자인 스타일은 클래식 신문 흑백 톤과 컬러 카툰 톤 중 어느 것을 선호하시나요?🎯 에디터 한줄평
"과학자가 논문을 쓸 때 그래피컬 앱스트랙트(Graphical Abstract, 시각적 초록)를 함께 제출하듯, 초등학생에게도 연구 결과를 직관적인 4컷 그림으로 요약해보는 경험은 가장 강력한 메타인지 훈련입니다. 글과 그림이 만나는 자리에서 아이들의 탐구력은 비로소 살아 숨 쉽니다."
📚 기술·교육 참고 링크
- 그래피컬 앱스트랙트(Graphical Abstract) 연구 가이드: 학술 논문의 시각적 요약 기법
- 교육과정 연계: 초등 5~6학년 사회(지역 문제 해결), 과학(자유 탐구와 실험), 국어(자료를 올바르게 활용해요, 사실과 관점)
