협동 성향 4글자로 모둠이 완성된다 — 학급 협동 성향 진단기 & 자동 편성 보드
🤝 신학기 기초 조사 주간, 학생들이 협동 성향 진단 16문항(4축 × 4문항)에 응답하면 4글자 성향 코드와 보딩패스(boarding pass) 형태의 성향 카드가 발급됩니다. 담임교사는 균형 배분(round-robin)으로 4대 성향이 골고루 섞인 모둠을 자동 편성합니다.
진단은 학급 스마트패드에서 로컬 계산 — 이름 저장 없이 성향 코드만 다룹니다. 결과 카드를 캡처해 교실 환경판에 부착하면, 서로의 다른 성향을 존중하는 민주적 교실 분위기와 협동 학습 효과가 함께 올라옵니다.
📖 한 줄 정의
심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).
학내망 원칙: 학교 배포 웹앱은 개인정보 수집·저장·전송 없음(외부 CDN·API 호출 0, 단일 파일) — 학생은 학내망에서 교사 PC 서버에 접속.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 운영 시나리오 | 3월 신학기 기초 조사 주간 — 1차시 진단(16문항), 카드 캡처·환경판 부착, 2차시 모둠 편성 발표. | 주간 일정표에 진단·편성 시간을 미리 배치. |
| 4축 설계(예시) | 발상(아이디어) vs 정리(계획), 발표 vs 기록, 응원 vs 도전, 꾸밈 vs 속도 — 실제 축과 문항은 학급 회의에서 확정합니다. | "모둠 과제를 시작할 때 나는? 아이디어를 먼저 뿌린다 / 순서표부터 만든다" |
| 균형 편성 | 성향 코드를 사전순으로 정렬한 뒤 모둠 수로 순환 배분(round-robin) — 같은 코드가 한 모둠에 뭉치지 않습니다. | makeGroups 함수로 TOP 배치 미리보기. |
| 개인정보 0 설계 | 이름 입력 칸이 아예 없습니다 — 진단 결과는 4글자 코드와 카드뿐. 코드와 사람을 잇는 것은 교실의 약속(교사 아날로그 매칭)입니다. | 성향 코드 더미(코드만)로 편성 시연 → 배정은 환경판에서. |
| 학내망 배포 대응 | 문항·축·카드 문구 전부 파일 안 상수 — 진단은 순수 로컬 계산이라 통신이 원래 없습니다. 심기 모드가 자연스럽게 전부입니다. | 새 학기마다 문항 16개만 교체하는 갱신 루틴. |
2. 핵심 아키텍처 해설 — 진단 엔진을 모둠 편성기로 확장
① 진단 엔진 재활용
가중치(weight) 연산 엔진(tally 8칸 + letterFor)을 그대로 가져옵니다. 바뀌는 것은 축과 문항뿐 — '엔진은 하나, 축은 주제마다 새로'가 이 설계의 철학입니다.
② 4축 문항 예시
- 축1 발상 vs 정리: "모둠 과제 시작! 먼저 뿌릴 것은? 아이디어 / 순서표"
- 축2 발표 vs 기록: "결과물 발표 방식? 말로 설명 / 글로 정리"
- 축3 응원 vs 도전: "친구가 막혔을 때? 격려부터 도와주기 / 해결책 제시"
- 축4 꾸밈 vs 속도: "완성된 결과물은? 멋지게 꾸민다 / 빠르게 제출한다"
문항 문구는 학급 회의에서 다듬습니다 — 진단 도구를 학생이 공동 설계하는 것 자체가 학급자치 활동입니다.
③ 균형 편성 코드: makeGroups
function makeGroups(students, size) {
students.sort(function (a, b) {
return a.code.localeCompare(b.code); // 성향 코드 사전순 정렬
});
const n = Math.ceil(students.length / size);
const groups = [];
for (let i = 0; i < n; i++) groups.push([]);
students.forEach(function (s, i) {
groups[i % n].push(s); // 순환 배분(round-robin)
});
return groups; // 사전순 정렬 덕분에 서로 다른 코드가 섞인다
}원리는 간단합니다. '아아발발 → 아아발발꾸꾸'처럼 코드끼리 정렬하면 같은 코드가 이어지는데, 이 줄을 모둠 수만큼 순환하며 나누면 같은 코드가 한 모둠에 뭉치지 않습니다. 편성 후 '같은 코드가 모둠에 2개 이상'인지 검사해 경고만 띄워도 완성도가 올라갑니다.
④ 카드 캡처 → 환경판 부착 루틴
스마트패드에서 발급된 보딩패스 카드를 스크린샷 → 학급 프린터로 출력 → 환경판 부착. 카드 하단에 "나의 협동 한마디" 칸을 두면 환경판이 곧 자기소개 벽이 됩니다. 이름은 아날로그 방식(교사의 매칭표)으로만 연결 — 화면과 벽 모두 코드만 공개됩니다.
⑤ 심기 전략: 새 학기 갱신 루틴
축·문항·카드 문구는 모두 파일 안 상수(EMBED_DATA). 3월 문항을 6월 반성 회의용 문항으로 교체할 때 파일 상단 상수만 바꿔 저장하면 끝 — 심기 모드(데이터 임베딩) 갱신 루틴의 학급 경영 버전입니다.
3. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사해 Gemini에 붙여넣습니다.
- 역질문 답변 — 4축 확정, 모둠 크기, 카드 톤 세 질문에 답하면 설계가 고정됩니다.
- HTML 파일 실행 — 완성 코드를 '협동진단.html'로 저장 후 스마트패드에서 열기. 학급 단말 전부 통신 없이 동작합니다.
제미나이 전용 에러 제로 프롬프트
[🚨 에러 방지 기본 안전장치]
1. 결과물은 외부 라이브러리·프레임워크·웹폰트 없이 단일 HTML 파일로 완성한다.
2. 진단 엔진(4축 16문항 가중치 연산), 보딩패스 카드, 균형 편성 함수(makeGroups)를 한 파일에 완성한다.
3. 이름·번호 입력 칸을 만들지 않는다 — 화면은 4글자 성향 코드와 카드뿐이다(개인정보 수집·저장 0).
4. 사운드는 Web Audio API로 직접 합성한다: 문항 넘김 '똑', 카드 발급 '팡파르'.
5. 모바일·스마트패드 터치 대응: 뷰포트 메타 태그, 답 선택 버튼 최소 44×44px, 진행바 표시.
6. 편성 후 '같은 코드가 한 모둠에 2개 이상'이면 경고 문구를 보여주는 검사를 넣는다.
7. 도구명은 '성향 진단'으로 쓴다 — MBTI는 상표이므로 이름·로고에 사용 금지.
8. // TODO, /* 생략 */ 같은 미완성 코드는 절대 넣지 말고 끝까지 완성한다.
[❓ 역질문 유도]
코드를 바로 만들지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 협동 성향 4축은 무엇으로 확정할까? (기본: 발상-정리 / 발표-기록 / 응원-도전 / 꾸밈-속도)
Q2. 모둠 크기와 개수는? (예: 4인 1조, 6개 모둠)
Q3. 성향 카드 톤은? (항공권 스타일 / 스티커 수집 체크리스트 스타일)🎯 에디터 한줄평
'조 편성'이 '성향 합주'가 되는 순간입니다. 서로 다른 4글자가 한 모둠에 모이는 것 — 그것이 곧 협동의 정의입니다. 이름 칸을 두지 않은 설계는 화면이 아니라 마음을 지켜줍니다: 코드만 공개되니 성향 카드 앞에서 아이들은 비교당하는 대신 발견되는 경험을 합니다. 문항 16개를 학급 회의에서 직접 설계한다는 점은 학급자치 수업 그 자체이고요. 3월에 한 번, 6월에 문항만 갈아 끼우는 갱신 루틴까지 — 한 학기 내내 살아 있는 도구입니다.
📚 기술·교육 참고 링크
- 교육과정 연계: 창의적 체험활동(학급자치), 협동학습(모둠 활동), 국어(문항 문장 다듬기)와 함께 활용
