<head>
<meta charset="UTF-8" />
<title> 구글 시트 연동 스마트 자리 배치 시스템: 진실의 자리바꿈 가이드 | 양파고 </title>
<meta
name="description" content="구글 스프레드시트 연동으로 학생 명렬표 관리부터 맞춤형 자리 배치까지 한 번에 해결함. 이전 자리 중복 방지, 남녀 구분, 특정 학생 고정 등 교사의 교육적 의도를 완벽히 반영하는 시스템 구축법과 소스 코드를 제공함." />
<meta name="keywords" content="스마트 자리 배치, 자리 바꾸기 프로그램, 구글 스프레드시트 연동, 교실 관리 도구, 구글 앱스 스크립트, 안티그래비티, 학급 운영 팁, 양파고, Yang Phago, 노션, 양파고 노션, notion" />
<meta property="og:title" content="구글 시트 연동 스마트 자리 배치 시스템: 진실의 자리바꿈 가이드" />
<meta property="og:description" content="지루하고 번거로운 자리 바꾸기는 이제 그만! 교사의 진심과 교육적 의도까지 반영하는 '진실의 자리바꿈' 시스템으로 더 스마트한 교실을 만들어보세요., 양파고, Yang Phago, 노션, 양파고 노션" />
<meta property="og:image" content="<https://oopy.lazyrockets.com/api/v2/notion/image?src=attachment%3A3396eb83-d8cb-4c6b-8c3e-352b2f66c5e9%3Aimage.png&blockId=2f562b09-b72b-808c-ab10-cb9a380a9259>" />
<meta property="og:url" content="<https://yangphago.oopy.io/2f362b09-b72b-8011-8538-dd2850fc7bd4>" />
<meta property="og:type" content="website" />
</head>
<aside> 💡 안티그래비티로 모든 선생님들의 로망: 진실의 자리바꿈을 구현해보자!
진실의 자리 바꿈이란? ➡️ 같이 앉으면 안되는 학생들을 미리 셋팅하여 원활한 자리배치가 만들어지는 시스템
</aside>
[깃허브 페이지]
https://github.com/roughkyo/magicarrayseat
[시작전 주의사항]
자리바꾸기 5.3 공개- 모둠별 자리 배치, 남녀자동 자리 배치 가능
파일 업로드
해당 설명서를 면밀히 분석해보고, 업그레이드 할 부분, 내 입맛에 맞게 수정할 부분을 취사선택하기
생성형AI를 활용해 해당pdf파일을 넣고 특장점을 먼저 분석하기
[이유]안티그래비티는 pdf파일 업로드 기능이 현재는 없음
이후 안티그래비티에 전달할 제작 명세서 요청하기
명세서 예시
** 자리바꾸기 웹 애플리케이션 개발 명세서**
📌 프로젝트 개요
- 프로젝트명: ClassSeat Manager (가칭) - 스마트 자리 배치 시스템
-개발 목적: 기존 데스크톱 기반 "자리바꾸기 5.0" 프로그램을 웹 기반으로 재구현하여, 구글 스프레드시트 연동을 통한 실시간 학생 데이터 관리 및 자리 배치 자동화를 구현
- 개발 의뢰자: 광양고등학교 AI교육 담당교사 (yangPhago)
- 참고 자료: 자리바꾸기 5.0 (이천중학교 김정식 수석교사 제작)
-설명서: 첨부된 PDF 문서
🎯 핵심 요구사항
1. 구글 생태계 완전 연동
데이터 입력: 구글 스프레드시트에서 학생 정보 가져오기
데이터 출력: 배치 결과를 구글 스프레드시트에 자동 저장
인증: Google OAuth 2.0 기반 로그인
백엔드: Google Apps Script (GAS) 활용
2. 웹 기반 반응형 UI
PC, 태블릿, 모바일 모두 지원
실시간 미리보기
직관적인 드래그 앤 드롭 인터페이스
3. 교육 현장 특화 기능
학생들과 함께 화면을 보며 실시간 자리 배치
다양한 화면 효과로 공정성 인식 강화
교사의 교육적 의도 반영 가능한 고급 기능
📊 데이터 구조
구글 스프레드시트 입력 형식
Sheet 1: 학생 기본정보
| 번호 | 이름 | 성별 | 특이사항 | 비고 |
|------|--------|------|-----------------|------|
| 1 | 김철수 | 남 | 시력약함 | |
| 2 | 이영희 | 여 | | |
| 3 | 박민수 | 남 | 휠체어 사용 | |
| 4 | 최지우 | 여 | ADHD, 앞자리 필요 | |
필드 설명:
번호 (필수): 학생 번호 (정수)
이름 (필수): 학생 이름 (문자열)
성별 (필수): "남" 또는 "여" (문자열)
특이사항 (선택): 자리 배치 시 고려사항 (문자열)
비고 (선택): 기타 메모 (문자열)
Sheet 2: 자리 배치 이력 (자동 생성)
| 날짜 | 시간 | 좌석번호 | 학생번호 | 학생이름 | 고정여부 |
|------------|-------|----------|----------|----------|----------|
| 2025-01-26 | 09:00 | A1 | 1 | 김철수 | N |
| 2025-01-26 | 09:00 | A2 | 2 | 이영희 | Y |
Sheet 3: 레이아웃 설정 (자동 생성/수정)
| 레이아웃명 | 좌석배치JSON | 생성일 |
|------------|--------------|------------|
| 기본6x5 | {...} | 2025-01-26 |
| 모둠4x4 | {...} | 2025-01-26 |
🎨 UI/UX 설계
메인 화면 구성
┌─────────────────────────────────────────────────────────┐
│ ClassSeat Manager [구글 계정] [설정] [도움말] │
├─────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ ┌──────────────────────────────────┐ │
│ │ 컨트롤 패널 │ │ 자리 배치 영역 │ │
│ │ │ │ │ │
│ │ 📊 학생정보 │ │ [교탁] │ │
│ │ 🎲 자리배치 │ │ │ │
│ │ ⚙️ 레이아웃 │ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │
│ │ 💾 저장/불러오기│ │ │김철수│ │이영희│ │박민수│ │최지우│ │ │
│ │ 🖨️ 출력 │ │ │ 1 │ │ 2 │ │ 3 │ │ 4 │ │ │
│ │ 🎬 화면효과 │ │ └────┘ └────┘ └────┘ └────┘ │ │
│ │ │ │ │ │
│ └─────────────┘ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │
│ │ │최수민│ │박지성│ │김나영│ │이하은│ │ │
│ │ │ 5 │ │ 6 │ │ 7 │ │ 8 │ │ │
│ │ └────┘ └────┘ └────┘ └────┘ │ │
│ │ │ │
│ └──────────────────────────────────┘ │
│ │
│ [상태바] 총 30명 | 남 15명, 여 15명 | 고정 2명 │
└─────────────────────────────────────────────────────────┘
좌석 카드 디자인
┌──────────────┐
│ 김철수 👨 │ ← 성별 아이콘
│ 1번 │ ← 학생번호
│ [🔒/○] │ ← 고정 토글 버튼
└──────────────┘
↑
클릭 시 선택 (검정 테두리)
좌석 상태 표시:
일반 상태: 연두색 배경
선택 상태: 빨간색 테두리
고정 상태: 자물쇠 아이콘 + 붉은색 버튼
남학생 지정 좌석: 파란색 테두리 (M 표시)
여학생 지정 좌석: 핑크색 테두리 (F 표시)
빈 좌석: 회색 점선 테두리
🔧 기능 명세
Phase 1: 필수 기능 (MVP)
1.1 구글 연동
javascript기능: 구글 스프레드시트 연동
- 사용자 Google OAuth 인증
- 스프레드시트 URL 입력 및 연결
- 학생 데이터 실시간 가져오기 (Fetch)
- 배치 결과 자동 저장 (Update)
API 엔드포인트 (Google Apps Script):
- GET /students : 학생 목록 조회
- POST /save-arrangement : 배치 결과 저장
- GET /layouts : 저장된 레이아웃 조회
- POST /save-layout : 레이아웃 저장
1.2 기본 자리 배치
javascript기능: 무작위 자리 배치
- [자리배치] 버튼 클릭 시 랜덤 배치
- Fisher-Yates 셔플 알고리즘 사용
- 애니메이션 효과 (카드 섞기)
- 배치 완료 후 상태 표시
입력: 학생 목록, 좌석 수
출력: 학생-좌석 매핑 객체
1.3 수동 자리 조정
javascript기능: 드래그 앤 드롭 자리 변경
- 학생 카드 드래그
- 다른 학생 카드에 드롭하여 위치 교환
- 실시간 미리보기
- Undo/Redo 기능 (최대 10단계)
라이브러리: react-beautiful-dnd 또는 dnd-kit
1.4 자리 고정
javascript기능: 특정 학생 좌석 고정
- 학생 카드의 고정 버튼 클릭
- 고정된 학생은 랜덤 배치 시 제외
- 시각적 표시 (자물쇠 아이콘)
- 고정 해제 가능
상태 관리:
- students 배열에 isFixed: boolean 플래그 추가
1.5 남녀 구분 배치
javascript기능: 성별 기반 자리 배치
- [남학생자리표시] 모드 활성화
- 원하는 좌석 클릭하여 남학생 좌석 지정
- 자동 남녀 배치 또는 수동 배치 선택
- 남학생 수 ≠ 남학생 좌석 수 시 경고
로직:
1. 남학생 좌석 선택 (파란 테두리)
2. 남학생 수 === 선택된 좌석 수 → [남녀자동배치] 옵션 활성화
3. 자동 배치: 남학생 → 남학생 좌석, 여학생 → 여학생 좌석
4. 수동 배치: 성별 불일치 시 고정 불가 처리
1.6 구글 시트 저장
javascript기능: 배치 결과 자동 저장
- [저장] 버튼 클릭 시 Google Sheets에 기록
- 저장 내용: 날짜, 시간, 좌석-학생 매핑, 고정 여부
- 저장 완료 알림
- 실패 시 재시도 옵션
Google Apps Script 함수:
function saveArrangement(data) {
const sheet = SpreadsheetApp.getActiveSpreadsheet()
.getSheetByName('자리배치이력');
// 데이터 삽입 로직
}
Phase 2: 고급 기능
2.1 책상 레이아웃 커스터마이징
javascript기능: 자유로운 책상 배치
- [책상배치하기] 모드 진입
- 드래그로 책상 위치 이동
- 책상 추가/삭제
- 레이아웃 프리셋 (6x5 기본형, 4x4 모둠형, ㄷ자형 등)
- 책상배치모드 페이지에서 마우스 드래그를 통해 2개 이상의 책상을 한꺼번에 이동할 수 있도록 기능
- 커스텀 레이아웃 저장
데이터 구조:
{
layoutName: "모둠형",
desks: [
{ id: 1, x: 100, y: 50, width: 80, height: 60 },
{ id: 2, x: 200, y: 50, width: 80, height: 60 },
...
]
}
2.2 화면 효과
javascript// 효과 1: 카운트다운
기능: 자리 배치 전 카운트다운
- "3... 2... 1... 배치!" 애니메이션
- 긴장감 조성 및 공정성 인식
- 효과 ON/OFF 토글
// 효과 2: 덮개 효과
기능: 제비뽑기 스타일 공개
- 배치 완료 후 모든 학생 카드에 덮개 표시
- 클릭 시 하나씩 공개
- 뒤집기 애니메이션
- 전체 공개 버튼
2.3 이전 배치 중복 방지
javascript// 기능 1: 이전 자리 안앉기
- 바로 직전 배치와 비교
- 같은 좌석에 배치 시 재배치
- 최대 재시도 횟수 설정
// 기능 2: 이전 짝꿍 안앉기
- 최근 N회 짝꿍 이력 조회
- 같은 짝꿍 배치 시 재배치
- 짝꿍 정의: 좌우 인접 좌석
알고리즘:
function avoidPreviousSeat(currentArrangement, history) {
// 이력에서 충돌 검사
// 충돌 시 스왑 후 재검사 (최대 10회)
}
2.4 의도적 배치 (CTRL+배치)
javascript기능: 교사가 미리 정한 순서대로 배치
- UI에서 원하는 배치 수동 작성
- [CTRL+C] 기능: 현재 배치를 저장
- [의도적배치] 버튼: 저장된 순서로 배치
- 학생들에게는 "랜덤"으로 보임
사용 시나리오:
1. 교무실에서 미리 배치 작성
2. 저장 (CTRL+C 대체 기능)
3. 교실에서 몇 번 랜덤 배치 시연
4. "이번엔 진짜다!" → [의도적배치] 클릭
5. 미리 정한 순서로 배치 (우연 가장)
여기까지 이해했다면, 아직 작업을 시작하지 말고 , ok해봐