2026년 9월 6일 일요일

[학급 경영] 조건 맞춤 자리 배치기 - 배려 조건·짝 분리·1인 1역까지 3초



배려 조건을 지키는 자리 배치가 3초에 끝난다 — 조건 만족 자리 배치 & 1인 1역 매칭 완전 정복

🪑 매월 초 자리 바꾸기 — '앞자리가 필요한 학생', '짝을 분리해 달라는 요청'을 조건 코드로 입력하면 조건 만족(constraint satisfaction) 알고리즘이 배치도를 3초 만에 완성하고, 1인 1역 당번까지 자동 배정합니다.

개인정보 설계가 핵심입니다: 시력·키·성별 같은 민감 정보를 저장하지 않고 '앞자리 필요''짝 분리' 같은 배려 조건 코드만 다룹니다(정보의 최소 수집). 기록은 CSV 내보내기(로컬 파일) — 자동 외부 전송 없음, 학급 시트 관리는 교사 수동.

📖 한 줄 정의

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

학내망 원칙: 학교 배포 웹앱은 개인정보 수집·저장·전송 없음(외부 CDN·API 호출 0, 단일 파일) — 학생은 학내망에서 교사 PC 서버에 접속.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
월간 운영 리듬 매월 초 — 조건 입력(5분) → 배치 실행(3초) → 배치도·당번 확인 → CSV 기록. 담임의 머리 아픈 일이 한 자리에 끝납니다. 월간 리듬표 3단으로 운영.
조건 만족 알고리즘 조건이 많은 학생부터 배정하고, 앞자리 필요는 앞 2열, 짝 분리는 인접 금지를 검사합니다. 조건을 못 만족하면 '회의 제안' 안내를 표시합니다. canSit 함수로 조건 검사 원리 이해.
배려 조건 코드 건강·신체 정보를 저장하지 않고 '앞자리 필요''짝 분리' 코드만 — 조건은 학생 제안으로 모둠 회의에서 정합니다(학급자치). 조건 코드 3종으로 시작해 확장.
3D 배치도 CSS 원근(perspective)으로 살짝 기울어진 3D 격자로 그립니다 — 전자칠판에서 옆 반 학생도 한눈에 봅니다. chart3d 클래스 3줄.
1인 1역 매칭 누적 횟수가 가장 적은 학생부터 역할을 배정해 매월 공평해집니다 — 배정 기록은 CSV로 누적(외부 전송 없음). assignRoles 함수로 공평 배분.

2. 핵심 아키텍처 해설

① 데이터: 번호·닉네임과 조건 코드

const STUDENTS = [
  { no: 1, nick: "코알라",  front: true,  apart: 0 },
  { no: 2, nick: "돌고래", front: false, apart: 7 }
];

front는 '앞자리 필요', apart는 '분리할 짝의 번호(0이면 없음)'. 시력·키·성별 같은 건강·신체 정보는 저장하지 않습니다 — 배려는 조건 코드로만 표현되고, 어떤 코드가 누구에게 붙었는지는 학생·교사만 아는 아날로그 영역입니다.

② 조건 검사: canSit

function canSit(p, seat, placed) {
  if (p.front && seat.col > 2) return false;   // 앞자리 필요 → 앞 2열만
  if (p.apart > 0) {
    for (const o of placed) {
      if (o.no === p.apart && isNeighbor(o.seat, seat)) return false;
    }
  }
  return true;
}

배정할 자리가 모든 조건을 통과하는지 검사하는 함수 — 조건 만족(constraint satisfaction)의 가장 작은 단위입니다.

③ 배치 실행: 조건 많은 학생부터

function placeAll() {
  const report = [];
  for (const p of byPriority(STUDENTS)) {   // 조건 많은 순
    const ok = SEATS.find(function (s) {
      return !occupied(s) && canSit(p, s, placed);
    });
    if (ok) place(p, ok);
    else report.push(p.nick + " 조건 미충족 — 모둠 회의 제안");
  }
  return report;
}

조건이 까다로운 학생부터 자리를 줍니다. 조건을 다 못 만족하면 실패를 숨기지 않고 '회의 제안'으로 표시 — 배치가 협상의 출발점이 됩니다.

④ 3D 배치도: CSS 원근

.chart3d { perspective: 900px; }
.chart   { transform: rotateX(45deg); transform-style: preserve-3d; }
.desk    { transform: translateZ(8px); }

교실 격자를 살짝 기울여 보면 자리 사이 간격이 공간처럼 보입니다 — '3D 배치도'가 라이브러리 없이 CSS 세 줄로 완성됩니다.

⑤ 1인 1역 매칭 + 기록

function assignRoles(roles, history) {
  return shuffle(roles.slice()).sort(function (a, b) {
    return count(history, a) - count(history, b);
  });
}
// 배치도·당번표는 CSV 내보내기로 로컬 파일 저장 — 외부 전송 없음

역할별 누적 횟수가 적은 순으로 배정해 매월 공평해집니다. 배치도와 당번표는 CSV 내보내기로 로컬 파일로 남기고, 학급 시트로 옮기는 것은 교사의 수동 관리입니다(자동 외부 전송 없음).

3. 따라하기 3단계

  1. 제미나이 전용 에러 제로 프롬프트를 복사해 Gemini에 붙여넣습니다.
  2. AI가 던지는 역질문 3가지(교실 격자, 조건 코드 종류, 역할 목록)에 답하면 단일 HTML 코드가 완성됩니다.
  3. 코드를 자리배치.html로 저장 후 더블클릭 — 조건 입력 → 배치 실행 → 당번 확인의 월간 리듬이 시작됩니다.

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

[🚨 에러 방지 기본 안전장치]
1. 결과물은 외부 라이브러리·폰트·이미지 없이 단일 HTML 파일로 완성한다 — 더블클릭 즉시 실행(서버·설치·회원가입·구글 시트 API·Apps Script 금지).
2. 학생 표기는 번호·닉네임만 다룬다(실명·시력·키·성별 저장 금지) — 배려 조건은 '앞자리 필요''짝 분리' 코드만(정보의 최소 수집).
3. 조건 만족 알고리즘: 조건 많은 학생부터 배정, 앞자리는 앞 2열, 짝 분리는 인접 금지. 미충족 시 실패를 숨기지 말고 '모둠 회의 제안' 문구로 표시.
4. 배치도는 CSS 원근(perspective)으로 살짝 기울어진 3D 격자 — 전자칠판에서도 잘 보이게.
5. 1인 1역은 역할별 누적 횟수 최소 우선으로 자동 배정 — 매월 기록이 쌓여 공평해진다.
6. 배치도·당번표는 CSV 내보내기로 로컬 파일 저장 — 자동 외부 전송 없음(학급 시트는 교사 수동).
7. 조건·명단은 파일 상단 상수로 심기(학내망 배포용 외부 통신 0), 전자칠판 터치 대응(버튼 88px 이상).
8. // TODO, /* 생략 */ 금지 — 끝까지 완성한다.

[❓ 역질문 유도]
코드를 바로 만들지 말고, 아래 3가지를 먼저 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 교실 격자는? (행×열 — 예: 5행×6열)
Q2. 배려 조건 코드는 몇 종? (기본 3: 앞자리 필요 / 짝 분리 / 자리 고정)
Q3. 1인 1역 목록은? (우리 반 역할 12개 — 학급 회의에서 확정)

🎯 에디터 한줄평

자리 배치는 담임 교사의 월간 최대 고민거리입니다. 조건을 코드로 명시하는 순간, 배치는 협상이 아니라 연산이 됩니다 — 그리고 코드에 담긴 조건은 모두 학생들이 제안한 것들입니다. 교실 복지의 민주화가 한 파일 안에서 일어나는 셈이죠. '저장하지 않는 배려'(건강 정보를 아예 다루지 않는 설계)는 정보의 최소 수집을 몸으로 가르치는 교과서입니다.

📚 기술·교육 참고 링크

  • MDN — CSS 변형(transforms) : 3D 격자 배치도의 원리
  • 교육과정 연계: 창의적 체험활동(학급자치), 수학(알고리즘과 조건 판단 사고)으로 확장
By 시간: