2026년 9월 7일 월요일

[창체·학급자치] 시력·청력 배려 및 짝꿍 연속 배정 방지 스마트 좌석 관리기



지난달에 같이 앉았는데 또? '시력·청력 배려 및 짝꿍 연속 배정 방지 스마트 좌석 관리기'

🪑 초등 창체·학급자치 — 안경을 착용하거나 청력 배려가 필요한 학생의 앞자리 고정 옵션과 함께, 지난달에 이미 짝꿍을 했던 학생과는 다음 달에 자동으로 짝꿍이 되지 않도록 과거 짝꿍 이력을 기억하는 고도화된 학급 경영 시스템입니다. 학생들의 건강권과 배려 요소를 세밀하게 보장하고 1년 동안 다양한 친구들과 골고루 교류하는 포용적 학급 문화를 조성합니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
시력·청력 앞자리 고정 배려 안경을 쓰거나 청력 배려가 필요한 학생은 앞 2열(앞자리 배려 코드)에 고정 배정됩니다. '앞자리 배려' 코드를 닉네임 옆에 입력하면 알고리즘이 자동 앞좌석 배치.
짝꿍 연속 배정 방지 (짝꿍 이력 기억) 최근 2개월간의 짝꿍 조합을 로컬 저장소에 기억하고, 다음 달에 자동으로 중복 배정을 배제합니다. 매월 초 자리 추첨 시 '지난달에 같이 했으니 다른 친구와!' 자동 배제.
CSV 이력 저장 & 편성 기록 매달의 짝꿍 조합을 CSV로 내보내서 1년간 다양한 조합을 시각적으로 확인할 수 있습니다. 월별 좌석도를 기록하여 학년말 학급 자치 자료로 아카이빙.

2. 핵심 아키텍처 해설

① 학생 배려 코드 및 짝꿍 이력 상수

const STUDENTS = [
  { no: 1, nick: "코알라", front: true }, // 앞자리 배려
  { no: 2, nick: "돌고래", front: false },
  { no: 3, nick: "여우", front: false },
  { no: 4, nick: "토끼", front: true } // 청력 배려
];

const PAIR_HISTORY = [
  { month: 8, pairs: [[1, 2], [3, 4]] },
  { month: 9, pairs: [[1, 3], [2, 4]] }
]; // 지난 2개월 짝꿍 조합 이력

학생별 앞자리 배려 코드와 최근 2개월간의 짝꿍 조합을 상수로 관리합니다.

② 짝꿍 이력 중복 방지 로직

function isRepeatPair(a, b, history, currentMonth) {
  return history.some(h => {
    // 현재 월 포함 최근 2개월 내 같은 조합이 있는지 검사
    if (h.month >= currentMonth - 2) {
      return h.pairs.some(([x, y]) =>
        (x === a && y === b) || (y === a && x === b)
      );
    }
    return false;
  });
}

한 학생이 짝꿍 후보로 추천될 때마다 과거 2개월 이력에서 이미 짝꿍이었던 조합인지 검사하여 자동 배제합니다.

③ 앞자리 고정 배려 알고리즘

function placeStudents(students, columns, pairHistory, month) {
  const seats = [];
  const frontFix = students.filter(s => s.front); // 앞자리 배려 대상
  const normal = students.filter(s => !s.front);
  // front 학생은 앞 2행에 고정 배치, 나머지는 셔플 후 순환 배분
  ...
}

'앞자리 배려' 코드를 가진 학생을 앞 2열에 우선 배치하고, 나머지 학생들은 셔플 알고리즘으로 배정합니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 학급 인원수(예: 26명)와 앞자리 배려 인원에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 좌석관리기.html로 저장하여 월초 자리 추첨 시 전자칠판에 띄웁니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리(CDN), 백엔드 서버 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 심기 모드(데이터 임베딩): const STUDENTS = [...] 상수에 학생 닉네임·앞자리 배려 코드와 const PAIR_HISTORY = [...] 상수에 최근 2개월 짝꿍 조합을 내장한다.
3. 앞자리 배려 알고리즘: 'front: true'인 학생을 앞 2행에 우선 고정 배치한다.
4. 짝꿍 중복 배정 방지: 최근 2개월간의 짝꿍 조합 이력을 상수에서 읽어 중복 배정을 자동 배제하는 가중치 로직을 구현한다.
5. 개인정보 최소 수집: 학생 실명을 사용하지 않고 닉네임과 번호만 취급하며, 짝꿍 이력은 로컬 CSV로 관리한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 학급 전체 인원수와 앞자리 배려가 필요한 학생은 몇 명인가요?
2. 짝꿍 이력을 몇 개월 동안 기억할까요? (2개월 기본 / 3개월 확장)
3. 좌석도를 화면에 격자 배치도로 띄울까요, 아니면 표 형태로 갈까요?

🎯 에디터 한줄평

"월초 자리 추첨에서 두려움에 떨던 것이 무엇이었을까요? ① '또 그 애랑 나랑 안되었으면 좋겠는데'라는 예민한 불안감과 ② '내가 눈이 안 좋은데 뒤에 앉으면 안 볼 텐데'라는 학습권의 소리였습니다. 이 알고리즘은 코드 안에서 그 두 속삭임을 동시에 접수해냅니다. 배려는 감정이 아니라 설계로 구현되는 것입니다."

📚 기술·교육 참고 링크

  • 학생 건강안전사업단 '학생 시력 보호 및 안내 지침' 및 협동학습 그룹 배정 표준안
  • 교육과정 연계: 초등 3~6학년 창체(학급자치), 도덕(친구 존중), 실과(데이터 정리)
By 시간: