교실 자리 배치, 이제 AI와 데이터로 더 스마트하고 즐겁게 관리하세요.
ClassSeat Manager Pro는 선생님의 교육적 의도를 완벽하게 반영하며, 학생들에게는 즐거운 이벤트가 되는 최상의 자리 배치 솔루션입니다.
- 시트 데이터 연동: 구글 스프레드시트의
hidden시트 지시사항(앙숙, 단짝, 위치 고정 등)을 실시간 반영합니다. - 특이사항 자동 추출: 학생 명렬표의 '특이사항' 열에서
맨앞,앞자리,뒷자리,~와 짝등의 키워드를 AI가 분석하여 배치 알고리즘에 즉시 적용합니다. - 학생 수 자동 동기화 (Dynamic Count): 구글 시트의 학생 명단 수에 맞춰 책상 개수가 자동으로 생성 및 조절됩니다. 30명 고정이 아닌 실제 학급 인원형 시스템입니다.
- 거리 제한 세분화: '맨앞자리(1줄 고정)'와 '앞자리(1-2줄)'를 구분하여 더욱 정밀한 위치 선정이 가능합니다.
- 다중 선택 및 이동 (New): 마우스 드래그(라쏘 선택)를 통해 여러 책상을 묶어서 한꺼번에 이동할 수 있습니다.
- 맞춤형 배치 템플릿 (New): 3분단(6줄), 4분단(8줄), 5줄 일렬, 모둠 활동용 등 5가지 표준 템플릿을 제공합니다. 모든 템플릿은 현재 학생 수에 맞춰 줄 수와 배치가 자동 최적화됩니다.
- 광활한 캔버스: 최대 1600x1000px의 확장된 영역을 제공하며, 어느 기기에서나 짤림 없는 스크롤을 지원합니다.
- 성별 시각화: 배치가 끝난 후 남학생은 파란색, 여학생은 핑크색 테두리로 자동 표시되어 구분이 쉽습니다.
- 이벤트 연출: 자리 배치 시의 강력한 진동(Shake) 효과와 폭죽 애니메이션으로 발표 시간을 즐겁게 만듭니다.
- 덮개 효과 (Hide & Reveal): 학생 이름을 가려두고 클릭할 때마다 하나씩 공개하는 미션형 발표 기능을 지원합니다.
- 이전 자리 안 앉기: 지난번과 다른 새로운 위치에 학생을 배치합니다.
- 이전 짝꿍 안 만나기: 새로운 교우 관계 형성을 위해 이전 짝꿍을 자동으로 피합니다.
- 남녀 자동 배합: 학급 성비에 맞춰 최적의 남-여 교대 배치를 계산합니다.
npm install프로젝트 루트 디렉토리에 .env 파일을 생성하고 아래 내용을 입력합니다 (또는 .env.example을 복사하여 수정하세요).
# 1. 구글 앱스 스크립트 웹 앱 URL (배포 후 생성된 URL)
VITE_API_URL=https://script.google.com/macros/s/.../exec
# 2. 통합 구글 시트 ID
# (구글 시트 URL의 /d/ 와 /edit 사이의 문자열)
VITE_SHEET_ID=1Rjxf6jR_Dkp101iEeZ8xlYe_...- 구글 시트의 [확장 프로그램] -> [Apps Script] 로 이동합니다.
gas/Code.js의 내용을 복사하여 붙여넣습니다.- 상단의 [배포] -> [새 배포] 를 선택합니다.
- 종류를 '웹 앱'으로 선택하고, 액세스 권한을 '모든 사람(Anyone)' 으로 설정하여 배포합니다.
- 배포된 웹 앱 URL을 위 2단계의
VITE_API_URL에 저장합니다.
npm run devsrc/: React 프론트엔드 소스 코드gas/: Google Apps Script 백엔드 코드interim_reports/: 프로젝트 단계별 진행 상황 및 기술 문서scripts/: 보조 정합성 및 데이터 처리 스크립트primary_data/: 원본 데이터 보관 ( immutable )secondary_data/: 가공 및 유도 데이터셋intermediate_results/: 분석 중간 결과물visualizations/: 데이터 시각화 결과물
상세한 개발 이력과 구현 내용은 아래 보고서들을 참조해 주세요.
#01기초 기능 완성#02고급 옵션 및 최적화#03최종 시스템 완성#041단계 마일스톤 달성#05스프레드시트 통합 및 GAS 동적화#06프론트엔드 기반 정렬 기능 추가
made by yangphago
© 2026 ClassSeat Pro Dev Team.
Github: magicarrayseat