2026년 9월 8일 화요일

[창체·자치] 새 학기 학습 성향 & 의사소통 스타일 진단기 - 갈등 없는 모둠 편성의 비밀

너는 어떤 스타일이야? — 새 학기 학습 성향 & 의사소통 스타일 진단 퀴즈 웹앱

🤝 초등 3~6학년 창의적 체험활동 및 학급 자치 '새 학기 관계 맺기' 주간 — 학생들이 모둠 활동 시 나타나는 4대 학습 성향(아이디어 뱅크형, 꼼꼼 기록형, 열정 발표형, 묵묵 실천형)과 의사소통 스타일을 8개 상황 퀴즈로 진단합니다. 진단 결과는 아기자기한 캐릭터 카드와 함께 '나와 잘 맞는 협동 짝꿍' 조언을 제공하며, 담임교사는 이 데이터를 바탕으로 한쪽에 쏠리지 않는 조화로운 모둠을 1초 만에 자동 편성합니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
성격 검사 vs 교실 협동 스타일 일반 MBTI 대신 모둠 프로젝트 실전 상황(주제 정하기, 역할 나누기, 갈등 해결)에 맞춘 4대 행동 양식을 진단합니다. 3월 첫 주 스마트패드로 3분 진단 후 결과 카드를 환경판에 부착.
균형 모둠 자동 믹싱 엔진 특정 성향(예: 아이디어형만 4명)이 한 모둠에 쏠리지 않도록 4개 유형을 지그재그로 분배하는 라운드 로빈 알고리즘을 내장합니다. '모둠 편성하기' 버튼 클릭 시 4인 1조 황금 밸런스 모둠표 즉시 생성.
협동 가이드라인 카드 제공 단순 결과 통보를 넘어 "이 친구와 활동할 때는 이렇게 말해봐요"라는 구체적 대화 스킬 문장을 함께 제시합니다. 국어 '서로의 의견을 존중해요' 수업 토의 자료로 직접 연계.

2. 핵심 아키텍처 해설

① 8개 상황 문항 매트릭스: QUIZ_ITEMS 상수

const QUIZ_ITEMS = [
  {
    q: "모둠 발표 주제를 정할 때 나는?",
    options: [
      { text: "재미있고 엉뚱한 아이디어를 계속 던진다", type: "idea" },
      { text: "친구들의 의견을 칠판이나 공책에 정리한다", type: "record" },
      { text: "어떤 주제가 청중에게 좋을지 발표를 맡는다", type: "present" },
      { text: "결정된 주제에 맞춰 자료를 묵묵히 찾아온다", type: "action" }
    ]
  }
];

아이들의 실제 모둠 활동 상황을 반영한 문항과 선택지별 유형 매핑 데이터를 상수로 내장하는 심기 모드(데이터 임베딩) 구조입니다.

② 라운드 로빈 균형 모둠 편성 알고리즘

function makeBalancedTeams(students, teamSize = 4) {
  // 성향별로 버킷(bucket) 분리
  const buckets = { idea: [], record: [], present: [], action: [] };
  students.forEach(s => buckets[s.type].push(s));
  
  const numTeams = Math.ceil(students.length / teamSize);
  const teams = Array.from({ length: numTeams }, () => []);
  
  // 각 유형에서 모둠마다 골고루 1명씩 배분
  ["idea", "record", "present", "action"].forEach(type => {
    buckets[type].forEach((student, idx) => {
      teams[idx % numTeams].push(student);
    });
  });
  return teams;
}

한 모둠에 말하는 사람만 모이거나 기록할 사람이 없어 표류하는 현상을 방지하는 공학적 분배 로직입니다.

③ 개인정보 보호 세션 운영

학생 이름 대신 번호(1~25번)와 닉네임만 다루며, 진단 데이터는 브라우저 세션 메모리에서만 유지되어 외부 클라우드로 일절 전송되지 않습니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 학급 인원수(기본: 20~25명)와 모둠당 인원에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 학습성향진단.html로 저장 후 더블클릭합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리(CDN), CSS 프레임워크 없이 순수 바닐라 HTML/CSS/JS로 작성한다.
2. 심기 모드(데이터 임베딩): 8개 모둠 협동 상황 퀴즈와 4대 성향(아이디어, 기록, 발표, 실천) 결과를 상수로 내장한다.
3. 자동 모둠 편성 엔진: 진단 완료 후 교사용 탭에서 학생 목록을 입력하면 4개 성향이 골고루 섞이는 균형 모둠 테이블을 생성한다.
4. 학생 개인정보 0: 학생 실명 대신 학생 번호와 캐릭터 닉네임만 표시한다.
5. 모바일 반응형: 교실 크롬북과 태블릿 터치 화면에 최적화된 큰 선택 버튼(최소 48px)을 제공한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 학급 한 모둠의 기본 인원수는 몇 명(권장: 4명 또는 5명)으로 설정할까요?
2. 결과 카드에 표시할 캐릭터 테마(동물 탐험대, 우주 비행사, 판타지 직업)는 어느 것으로 할까요?
3. 모둠 편성 결과를 인쇄용 서식(@media print)으로도 출력할 수 있게 할까요?

🎯 에디터 한줄평

"모둠 활동이 망가지는 가장 큰 이유는 능력이 부족해서가 아니라 성향이 충돌하기 때문입니다. 아이디어만 쏟아내고 마무리를 못 하는 모둠, 다들 조용히 눈치만 보는 모둠을 미리 예방해 주는 이 작은 진단기는 새 학기 교실을 갈등의 전쟁터가 아닌 상호 보완의 협동 학습장으로 바꾸어 줍니다."

📚 기술·교육 참고 링크

  • 협동학습(Cooperative Learning) 이론: 긍정적 상호의존성과 역할 분담의 원리
  • 교육과정 연계: 초등 3~6학년 창의적 체험활동(자율·자치 활동, 관계 맺기), 국어(의견을 나누어요, 마음을 나누는 대화)
By 시간: