너는 어떤 스타일이야? — '새 학기 학급 친구 관계 & 협동 학습 성향(학습 MBTI) 진단기'
🤝 초등 3월 신학기 기초 조사 주간 — 모둠 활동을 시작하기 전, 학생들이 12문항의 가벼운 질문을 통해 자신의 협동 학습 성향(리더형, 아이디어형, 조율형, 실천형)을 스스로 진단합니다. 담임교사는 이 결과를 바탕으로 편중되지 않고 조화로운 모둠 편성과 1인 1역 배정을 1초 만에 완료합니다.
📖 한 줄 정의
심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).
학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 4대 협동 학습 성향 분류 | 진행을 이끄는 '리더', 참신한 '아이디어', 분위기를 다독이는 '조율', 묵묵히 완성하는 '실천' 4가지 카드로 분류됩니다. | 각 유형별 귀여운 동물 캐릭터 일러스트와 강점 문구가 결과 카드에 출력됩니다. |
| 조화로운 모둠 자동 믹싱 | 한 모둠에 리더만 몰리거나 아이디어형만 모이지 않도록 4대 유형이 골고루 1명씩 섞이는 균형 모둠표를 생성합니다. | 모둠 번호 클릭 시 유형별 밸런스 레이더 차트가 시각화됩니다. |
| 학생 개인정보 0 안전망 | 이름 칸 없이 번호와 닉네임만으로 진단하며 결과는 로컬 세션 메모리로 유지되어 외부 전송이 없습니다. | 진단 결과는 인쇄용 결과표(@media print)나 로컬 CSV 다운로드로만 보관. |
2. 핵심 아키텍처 해설
① 진단 문항 및 가중치 상수: QUESTIONS
const QUESTIONS = [
{
q: "모둠 과제를 시작할 때 나는 주로 어떤 역할을 맡나요?",
answers: [
{ text: "역할을 나누고 전체 일정을 챙겨요.", type: "leader" },
{ text: "새롭고 재미있는 아이디어를 쏟아내요.", type: "idea" },
{ text: "친구들의 의견 차이를 조율하고 응원해요.", type: "mediator" },
{ text: "결정된 내용을 묵묵하고 꼼꼼하게 만들어요.", type: "maker" }
]
}
];12문항의 선택지마다 4대 유형(leader, idea, mediator, maker)의 카운트가 1씩 누적되는 직관적인 가중치 연산 구조입니다.
② 균형 모둠 배정 알고리즘
function mixBalancedGroups(students, groupCount) {
const groups = Array.from({ length: groupCount }, () => []);
const types = ["leader", "idea", "mediator", "maker"];
types.forEach((t) => {
const pool = students.filter(s => s.type === t);
pool.forEach((s, idx) => {
groups[idx % groupCount].push(s);
});
});
return groups;
}유형별로 분류된 학생들을 라운드 로빈(Round-Robin) 방식으로 각 모둠에 순차 배분하여 성향 편중을 원천 차단합니다.
③ 세션 메모리 & CSV 내보내기
진단 완료된 학생들의 결과는 브라우저 메모리에만 임시 적재되며, 교사가 '모둠 편성표 CSV 내려받기'를 누르면 로컬 파일로 저장되어 나이스나 학급 일지에 안전하게 부착할 수 있습니다.
3. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 학급 인원수(20~25명)와 모둠 수(4~6모둠)에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
학습MBTI.html로 저장하여 태블릿에 띄웁니다.
제미나이 전용 에러 제로 프롬프트
[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리(CDN), 서버 통신 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 4대 성향 진단 로직: 12개 4지선다 문항 응답에 따라 리더형, 아이디어형, 조율형, 실천형 중 최다 득점 유형을 결과 카드로 도출한다.
3. 균형 모둠 자동 편성기: 학생 번호별 진단 결과를 바탕으로 4대 유형이 골고루 섞이는 N개 모둠 테이블을 1초 만에 렌더링한다.
4. 학생 개인정보 0: 학생 실명 대신 '번호 + 닉네임'만 취급하며, 서버 전송 없이 브라우저 세션 메모리로만 관리한다.
5. @media print 지원: 모둠 편성 결과표를 A4 가로 1장으로 깔끔하게 인쇄할 수 있도록 인쇄 스타일을 내장한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.
[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 학급 총 학생 수는 몇 명인가요? (기본값: 24명)
Q2. 편성할 모둠 수는 몇 개로 나눌까요? (기본값: 6모둠, 모둠당 4명)
Q3. 결과 카드의 캐릭터 테마를 숲속 동물(사자·돌고래·코알라·개미)과 탐험대 중 어느 것으로 할까요?🎯 에디터 한줄평
"모둠 활동에서 일어나는 갈등의 90%는 실력의 차이가 아니라 '서로의 일하는 방식'이 다르기 때문입니다. 내가 아이디어를 낼 때 친구가 묵묵히 자료를 만들어주는 파트너라는 사실을 유형 카드로 확인하는 순간, 모둠은 경쟁의 공간이 아니라 상호 보완의 작은 사회가 됩니다."
📚 기술·교육 참고 링크
- 협동학습 성향 진단 이론 및 라운드 로빈 모둠 편성 알고리즘
- 교육과정 연계: 초등 창체(자율활동, 학급자치, 진로 탐색), 도덕(존중과 배려)
