2026년 9월 8일 화요일

[사회·국어·실과] 5단계 서브에이전트 뉴스 분석기 - 지역 신문 기사로 만드는 여론 트렌드 리포트



우리 고장 뉴스를 분석하는 꼬마 기자단! — 5단계 서브에이전트 여론 분석 리포트 생성기

📰 초등 5~6학년 사회 '우리 지역의 대표 축제와 현안', 국어 '뉴스와 주장', 실과 '소프트웨어와 생활' 융합 — 학생들이 수집한 우리 고장 뉴스 기사 텍스트를 5단계 서브에이전트(기사 수집가 ➔ 키워드 분석가 ➔ 찬반 감정 분류가 ➔ 시각화 차트 디자이너 ➔ 1분 종합 리포터) 파이프라인으로 처리하여, 지역 사회의 여론 트렌드 보고서를 완성합니다. 파이썬이나 복잡한 서버 없이 브라우저 단일 HTML에서 순수 자바스크립트 규칙 엔진으로 완벽 구동됩니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
단일 프롬프트 vs 5단계 서브에이전트 "뉴스 요약해줘" 대신, 5개의 전문 역할(수집-키워드-감정-차트-종합)이 순차적으로 데이터를 넘겨주며 분석의 정밀도를 높입니다. 에이전트 1(기사 입력) ➔ 에이전트 2(빈도수 계산) ➔ 에이전트 3(긍정/부정 비율) 순서로 단계별 결과 검증.
외부 유료 LLM 의존 제거 외부 API 결제 없이 브라우저 내장 자바스크립트 형태소/키워드 추출 규칙 엔진으로 100% 무료 처리합니다. 우리 고장 기사 3편을 복사해 붙여넣으면 1초 만에 상위 5대 핵심 키워드 랭킹 도출.
순수 CSS 여론 감정 게이지 찬성/반대, 긍정/우려 감정 비율을 도넛 차트나 진행 바(progress bar)로 시각화하여 사회 참여 토론으로 연결합니다. '고장 개발 vs 환경 보전' 뉴스 토론 수업에서 객관적 여론 지표로 활용.

2. 핵심 아키텍처 해설

① 5단계 파이프라인 처리 흐름도

[Step 1. 뉴스 원문 주입] (INPUT)
       ▼
[Step 2. 불용어 제거 및 키워드 빈도 계수] (Frequency Analysis)
       ▼
[Step 3. 감정 사전 매칭 (긍정/우려/중립 점수화)] (Sentiment Score)
       ▼
[Step 4. 시각화 데이터 렌더링 (Canvas/CSS Bar)] (Data Viz)
       ▼
[Step 5. 3줄 핵심 요약 브리핑 리포트 출력] (Final Report)

서브에이전트 아키텍처의 핵심인 '역할 분담과 데이터 전달'을 자바스크립트 체이닝 함수로 단순화하여 초등학생도 소프트웨어 파이프라인의 구조를 한눈에 이해할 수 있습니다.

② 로컬 키워드 빈도 추출 함수

function analyzeKeywords(text) {
  const stopWords = ["은", "는", "이", "가", "을", "를", "에", "의", "했다", "있다", "에서"];
  const words = text.replace(/[^가-힣a-zA-Z0-9\s]/g, "").split(/\s+/);
  const freq = {};
  words.forEach(w => {
    if (w.length >= 2 && !stopWords.includes(w)) {
      freq[w] = (freq[w] || 0) + 1;
    }
  });
  return Object.entries(freq).sort((a, b) => b[1] - a[1]).slice(0, 5);
}

한글 조사와 불용어를 걸러내고 의미 있는 2글자 이상의 명사/단어 빈도를 계산하여 상위 키워드 랭킹을 산출합니다.

③ 감정 사전 기반 여론 신호등 계산

const SENTIMENT_DICT = {
  positive: ["발전", "성공", "기대", "도약", "환영", "개선", "활기", "협력"],
  negative: ["우려", "갈등", "반발", "위험", "피해", "손실", "부족", "논란"]
};

function scoreSentiment(text) {
  let pos = 0, neg = 0;
  SENTIMENT_DICT.positive.forEach(w => { if (text.includes(w)) pos++; });
  SENTIMENT_DICT.negative.forEach(w => { if (text.includes(w)) neg++; });
  const total = pos + neg || 1;
  return { posRate: Math.round((pos / total) * 100), negRate: Math.round((neg / total) * 100) };
}

복잡한 AI 서버 통신 없이도, 사전에 정의된 감정 어휘 사전을 대조하여 기사 내 여론 동향을 긍정/우려 백분율(%)로 즉시 도출합니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 분석 대상 지역과 뉴스 카테고리에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 뉴스여론분석기.html로 저장 후 더블클릭합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 AI API 호출(OpenAI, Claude 등) 없이, 순수 브라우저 자바스크립트로 5단계 서브에이전트 시뮬레이션을 구현한다.
2. 심기 모드(데이터 임베딩): const SAMPLE_NEWS = [...] 상수에 우리 고장 예시 기사 3건(지역 축제 개최, 전통시장 활성화, 도로 교통 개선)을 기본 내장하여 즉시 시연 가능하게 한다.
3. 5단계 시각적 진행 상태: 화면 상단에 '수집 ➔ 키워드 ➔ 감정분석 ➔ 차트 ➔ 브리핑' 5개 스텝 인디케이터를 두고, '분석 시작' 버튼 클릭 시 각 단계가 0.4초 간격으로 하이라이트되며 순차 완료되도록 한다.
4. 순수 CSS 여론 차트: 긍정(파랑) vs 우려(주황) 비율을 가로 막대 게이지(progress bar)로 시각화하고 상위 5대 키워드는 뱃지(Badge) 형태로 렌더링한다.
5. 학생 개인정보 0: 학생 이름이나 개인 메모를 수집하지 않으며, 공개 뉴스 기사 텍스트만 처리한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 주로 어떤 지역 현안(예: 문화관광 축제, 환경 생태 보전, 교통 및 안전 등) 기사를 다룰 예정인가요?
2. 5대 핵심 키워드 표시 시 단어 언급 횟수(빈도수)를 함께 배지에 표기할까요?
3. 분석 완료 후 보고서 인쇄(@media print) 기능도 함께 포함할까요?

🎯 에디터 한줄평

"뉴스를 읽고 무비판적으로 수용하는 소비자에 머물 것인가, 데이터를 분해하고 여론의 맥락을 짚어내는 능동적 분석가가 될 것인가? 5단계 에이전트 파이프라인을 따라 기사를 쪼개어보는 이 작은 실습은 미디어 리터러시와 인공지능 워크플로우를 동시에 가르치는 가장 현대적인 시민성 수업입니다."

📚 기술·교육 참고 링크

  • 에이전틱 워크플로우(Agentic Workflow) 기초 개념: 서브에이전트 역할 분담과 파이프라인 설계
  • 교육과정 연계: 초등 5~6학년 사회(우리 지역의 대표 축제와 현안), 국어(뉴스와 주장, 매체 자료를 비판적으로 수용해요), 실과(소프트웨어와 생활)
By 시간: