다면적 자리 배치 & 모둠 협력 점수 대시보드
🪑 짝꿍 대형, 4인 분단 모둠, 전원 참여 'ㄷ'자 토의 대형. 수업 형태에 따라 교실 배치를 1초 만에 바꾸고, 당일 모둠 협력 점수까지 실시간으로 합산하는 다면적 자리 배치(flexible seating) 대시보드를 소개합니다.
시력 배려와 관계 분리 등 복잡한 조건을 알고리즘으로 자동 만족하며, 모든 데이터는 외부 전송 없이 교탁 전자칠판 안에서 안전하게 완결됩니다.
📖 한 줄 정의
심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).
학내망 원칙: 학교 배포 웹앱은 개인정보 수집·저장·전송 없음(외부 CDN·API 호출 0, 단일 파일) — 학생은 학내망에서 교사 PC 서버에 접속.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 3대 대형 원클릭 전환 | 강의식 2인 짝꿍, 협동학습 4~6인 분단 모둠, 전체 토의 'ㄷ'자 대형을 버튼 하나로 즉시 재배치합니다. 좌석 카드가 부드러운 애니메이션으로 이동해 학생들의 흥미를 끕니다. | 국어 토론 시간에는 'ㄷ'자 모드, 과학 실험 시간에는 4인 모둠 모드로 전환하여 수업 전환 시간 단축. |
| 조건 만족 자동 배정 | 앞자리 배려(시력), 짝 분리(관계) 등 민감한 배치 조건을 우선순위 알고리즘으로 먼저 처리한 뒤, 나머지 좌석을 무작위 셔플하여 공정성을 보장합니다. | 학생들이 보는 앞에서 '자리 바꾸기' 버튼을 눌러 불만 없는 투명한 학급 자치 실현. |
| 모둠 협력 점수판 | 자리 배치도 상단에 각 모둠의 협력 점수 카운터(+1, -1)를 결합하여, 수업 중 배려 행동과 협동 미션 성공 시 즉각적으로 점수를 누적합니다. | 하루 1회 학급 다모임 시간에 당일 협력 점수를 결산하고 CSV 파일로 안전하게 백업. |
2. 핵심 아키텍처 해설
① 학생 데이터 상수: 배려 조건 코드
const STUDENTS = [
{ no: 1, nick: "곰", front: true, apart: 5 },
{ no: 2, nick: "여우", front: false, apart: 0 },
{ no: 3, nick: "토끼", front: false, apart: 0 }
];시력·키·성별 등 민감 정보를 따로 저장하지 않고 '앞자리 필요(front)', '분리 상대(apart)'라는 배려 조건 코드만 파일 안에 심습니다(정보의 최소 수집 원칙). 실명 대신 모둠 친구들만 아는 닉네임을 쓰면 웃픈 개인정보 사고가 아예 발생하지 않습니다.
② 조건 만족 셔플 알고리즘
function canSit(p, seat, placed) {
if (p.front && seat.col > 2) return false; // 앞자리 필요 → 앞 2열만
for (const o of placed) {
if (o.no === p.apart && isNeighbor(o.seat, seat)) return false; // 인접 금지
}
return true;
}
function placeAll() {
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 + ": 조건 미충족 — 모둠 회의 제안");
}
}조건이 많은 학생부터 배정하고, 만족 못 하는 학생이 생기면 화면에 '모둠 회의 제안' 문구로 남깁니다 — 알고리즘의 한계를 학급 자치 논의로 연결하는 설계입니다.
③ CSS 애니메이션 자리 이동
.desk {
transition: all .6s cubic-bezier(.2, .8, .2, 1);
left: var(--x); top: var(--y);
}
.dae-mode .chart { transform: rotate(-90deg); }좌석 카드 위치를 CSS 변수로 두고 대형 변경 시 변수만 바꾸면, 학생들이 보는 앞에서 교실이 자연스럽게 재배열됩니다. 'ㄷ'자 대형은 격자를 회전하는 트릭으로 처리합니다.
④ 모둠 점수 세션 메모리
const GROUP_SCORES = [0, 0, 0, 0];
function bump(groupIndex, delta) {
GROUP_SCORES[groupIndex] += delta;
sound(delta > 0 ? "coin" : "boop"); // Web Audio 합성
drawScores();
}모둠 점수는 세션 메모리(종료 시 소멸)로 관리하여 개인 식별 정보 저장을 방지하고, 하루 종료 시 CSV 내보내기 버튼으로 학급 점수 장부를 로컬 파일로 확보합니다.
⑤ 원칙·정합
단일 HTML·외부 통신 0, Apps Script·구글 시트 API 미사용. 배치도·모둠 점수 기록은 CSV 내보내기로 로컬 파일 저장 — 학급 시트 정리는 교사 수동으로 처리하며, 학생 개인 데이터는 학내망 밖으로 나가지 않습니다.
3. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사해 Gemini에 붙여넣습니다.
- 역질문 답변 — Gemini가 던지는 질문 3가지(교실 격자, 대형 종류, 점수 규칙)에 답하면 설계가 확정됩니다.
- HTML 파일 실행 — 완성 코드를 '자리배치.html'로 저장 후 더블클릭으로 실행합니다.
제미나이 전용 에러 제로 프롬프트
[🚨 에러 방지 기본 안전장치]
1. 결과물은 외부 라이브러리·폰트·이미지 없이 단일 HTML 파일 — 더블클릭 즉시 실행(서버·설치·회원가입·구글 시트 API·Apps Script 금지).
2. 학생 데이터는 파일 상단 STUDENTS 상수에 번호·닉네임만 담는다(실명·시력·키·성별 저장 금지). 배려 조건은 '앞자리 필요(front)'와 '분리 상대 번호(apart)' 코드만 사용한다.
3. 3가지 대형 모드(2인 짝꿍 / 4인 분단 모둠 / 'ㄷ'자 토의 대형)를 버튼으로 전환하며, 좌석 카드 이동에는 CSS transition 애니메이션을 적용한다.
4. 조건 만족 배정: 조건 많은 학생부터 우선 배정하고, 미충족자는 '모둠 회의 제안' 문구로 표시한다. 무작위 셔플은 모든 순서가 같은 확률이 되도록 한다.
5. 모둠 협력 점수판: 모둠별 +1/-1 버튼, 세션 메모리(새로고침 시 소멸) 기본값, 점수 변화에 Web Audio 합성 효과음.
6. 하루 종료 'CSV 내보내기' 버튼으로 배치도·모둠 점수를 로컬 파일 저장 — 자동 외부 전송 없음(학급 시트는 교사 수동).
7. 전자칠판 대형 터치 대응: 좌석 카드 64px 이상, 조작 버튼 88px 이상.
8. // TODO, /* 생략 */ 금지 — 끝까지 완성한다.
[❓ 역질문 유도]
코드를 바로 만들지 말고, 아래 3가지를 먼저 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 교실 격자 크기는 몇 행 × 몇 열인가? (예: 5행 × 6열)
Q2. 분단 모둠은 몇 인으로 나눌까? (4인 / 6인)
Q3. 모둠 협력 점수의 가점·감점 규칙은 무엇인가? (예: 배려 +1, 잡담 -1)🎯 에디터 한줄평
"자리 바꾸기 10분이 화면 클릭 3초로 줄어드는 순간, 그 시간은 순수하게 수업으로 돌아옵니다. 더 큰 가치는 '시력 배려'와 '관계 분리'를 코드 안에 조용히 심어두는 설계 — 민감한 정보를 저장하지 않고도 배려가 작동하는 것은 공정함의 가장 아름다운 형태입니다. 좌석 이동 애니메이션은 학생들에게 새 수업의 신호등이 되어, 물리적 재배치 자체가 즐거운 의식으로 변합니다."
📚 기술·교육 참고 링크
- CSS transition & transform : 좌석 이동 애니메이션의 핵심 기술
- 정보의 최소 수집 원칙 : 배려 조건 코드 설계 시 반드시 참고
- 교육과정 연계 : 창의적 체험활동(학급 자치)·협동학습·수학(알고리즘 사고) 확장
