2026년 9월 8일 화요일

[국어·과학] 6단계 에이전틱 글쓰기 봇 - 탐구 보고서부터 과학 동화까지

질문만 던지면 동화가 뚝딱? — 6단계 에이전틱 파이프라인 기반 탐구 보고서 및 과학 동화 창작 봇

📚 초등 5~6학년 국어 '작품을 감상하고 창작해요' 및 과학 '탐구 결과를 발표해요' 융합 — 한 번에 글을 써달라고 하면 엉뚱한 이야기를 지어내는 AI의 환각(Hallucination)을 막기 위해, 6단계 파이프라인(소재 발굴 ➔ 줄거리 뼈대 ➔ 등장인물 설정 ➔ 과학 원리 검증 ➔ 본문 집필 ➔ 제목 및 교훈 도출)을 거치며 아이가 감독이 되어 한 단계씩 승인하며 완성하는 에이전틱 창작 웹앱입니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
원샷 글쓰기 vs 6단계 순차 승인 "동화 한 편 써줘" 대신 개요 ➔ 인물 ➔ 검증 ➔ 본문 순서로 사람이 각 단계를 컨펌하며 통제권을 갖습니다. 3단계 '과학 원리 팩트체크' 통과 시에만 다음 단계 버튼 활성화.
과학적 사실과 문학적 상상력의 결합 예를 들어 '광합성' 원리를 배운 뒤, 엽록체 요정이 햇빛과 물로 포도당 빵을 굽는 과학 동화로 재창작합니다. 단원 학습 마무리 차시의 형성평가 대체 창작 과제로 활용.
완성작 전자책 뷰어 및 PDF 인쇄 완성된 4막 동화는 책 넘김 카드 UI로 감상하고, A4 반접이 소책자 서식으로 즉시 인쇄합니다. 학급 문고 코너에 모둠별 과학 동화책 실물 비치.

2. 핵심 아키텍처 해설

① 6단계 에이전틱 상태 머신 구조

const PIPELINE_STAGES = [
  { step: 1, name: "소재 탐색", role: "어떤 과학 원리를 다룰까요? (예: 모세관 현상, 중력)" },
  { step: 2, name: "기승전결 뼈대", role: "주인공이 겪을 갈등과 해결 사건 4막 개요 짜기" },
  { step: 3, name: "등장인물 설정", role: "원리를 의인화한 캐릭터 성격 및 이름 정의" },
  { step: 4, name: "과학 팩트체크", role: "동화 속 사건이 실제 과학 법칙에 맞는지 검증" },
  { step: 5, name: "본문 집필", role: "대화와 묘사를 살린 완성형 동화 본문 작성" },
  { step: 6, name: "제목 & 교훈", role: "독자에게 전하고 싶은 한 줄 메시지 도출" }
];

학생이 글을 쓸 때 막막해하지 않도록 글쓰기의 논리적 여정을 6개의 구체적 프롬프트 블록으로 표준화한 심기 모드(데이터 임베딩) 아키텍처입니다.

② 순차 승인 게이트 로직

let currentStep = 1;
const storyDraft = {};

function approveCurrentStep(content) {
  storyDraft[`step_${currentStep}`] = content;
  if (currentStep < 6) {
    currentStep++;
    renderNextPrompt(currentStep, storyDraft);
  } else {
    renderFinalBook(storyDraft);
  }
}

이전 단계의 결과물이 다음 단계의 입력 컨텍스트로 자동 전달되는 체인형(Chained) 에이전트 구조를 브라우저 로컬 자바스크립트 안에서 구현합니다.

③ 소책자 인쇄 서식 지원

브라우저의 @media print 규격을 적용하여, 화면에서 완성된 동화를 A4 용지에 2쪽씩 모아 찍어 반으로 접으면 손바닥 미니 동화책이 되도록 조판합니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 주제 과학 단원(빛과 렌즈, 지층과 화석 등)에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 과학동화봇.html로 저장 후 더블클릭합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리(CDN), 외부 API 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 심기 모드(데이터 임베딩): const SCIENCE_TOPICS = [...] 상수에 초등 5~6학년 핵심 과학 주제 10선과 단계별 가이드 질문을 내장한다.
3. 6단계 단계별 진행 UI: 상단에 1~6단계 인디케이터 바를 두고, '학생 수정 및 승인' 버튼을 눌러야만 다음 단계 질문 카드로 이동하도록 설계한다.
4. 전자책 뷰어 & 소책자 인쇄: 완성 후 좌우 화살표로 책장을 넘기는 뷰어 모드와 A4 인쇄용 서식(@media print)을 동시 제공한다.
5. 학생 개인정보 0: 학생 실명 대신 '꼬마 작가' 필명만 입력받는다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 기본으로 제공할 대표 과학 주제 3가지는 무엇으로 고를까요? (예: 화산 폭발, 물의 상태 변화, 생태계 먹이사슬)
2. 완성 동화의 분량은 4쪽 분량(단편)으로 맞출까요?
3. 책 표지에 들어갈 간단한 SVG 아이콘 선택기도 포함할까요?

🎯 에디터 한줄평

"AI에게 모든 것을 맡기면 글은 매끄러울지 몰라도 아이의 성장은 멈춥니다. 하지만 6단계의 문지기가 되어 AI의 글을 검토하고 고쳐 쓰는 과정에서, 아이는 단순한 소비자가 아니라 AI를 지휘하는 '총괄 디렉터'로 성장합니다. 그것이 바로 우리가 지향해야 할 생성형 AI 시대의 참된 문해력 교육입니다."

📚 기술·교육 참고 링크

  • 에이전틱 워크플로(Agentic Workflow) 개념: 순차적 계획 수립 및 자체 반성(Self-Reflection) 기법
  • 교육과정 연계: 초등 5~6학년 국어(창작의 즐거움, 생각을 표현해요), 과학(탐구 결과의 발표와 소통)
By 시간: