📚 상상팩토리 통합관제 사용 설명서
학원 운영에 필요한 모든 기능을 한 화면에서 — 학생 관리, 출결, 진도, 원비, 차량, 상담까지
🆕 2026년 6월 업데이트 주요 변경 사항
progress_log_v1)에 즉시 동기화✅ 상담 현황판 리디자인 — 왼쪽 반 사이드바 + 학생 카드 그리드 UI
✅ 대시보드 상담 현황판 — 미니카드 그리드 + 큰 숫자 통계 UI
전체 구조 한눈에
이 프로그램은 하나의 HTML 파일(index.html)로 동작하는 학원 통합 관리 시스템입니다.
모든 데이터는 현재 기기의 브라우저(localStorage)에 저장됩니다. 다른 기기와 동기화하려면 설정 → 동기화/백업을 이용하세요.
📊 홈
👨🎓 학생·수업
👤 학생 관리 — 학생 등록·수정·상세보기
🚪 반 관리 — 반 생성 및 학생 배정
💬 상담 관리 — 상담 이력 기록 + ⚡ 빠른 입력
📖 학습 진도 — 출결+진도 카드 그리드
📚 교재 관리 — 교재 목록 관리
📂 포트폴리오 — 학부모 열람용
🚌 차량
🗺️ 노선 관리 — 정류장·시간 설정
💰 재무
📒 수입/지출 장부 — 원장 전용
⚙️ 운영
📦 재고/비품 — 소모품 재고
⚙️ 시스템 설정 — 계정·권한·학원정보
로그인 & 계정
| 역할 | 아이디 | 비밀번호 | 접근 범위 |
|---|---|---|---|
| 👑 원장 | admin | sf@2025! | 전체 메뉴 |
| 👔 부원장 | vice1 | vp@2025! | 학생·상담·재무·교사 |
| 👩🏫 영어 선생님 | teacher1 | eng@2025 | 내 수업·학생·진도 |
| 👨🏫 수학 선생님 | teacher2 | math@2025 | 내 수업·학생·진도 |
| 🚌 기사1 | car1 | drv@car1 | 차량 현황만 |
⚠️ 비밀번호는 반드시 변경하세요! 설정 → 전체 계정 탭에서 수정할 수 있습니다.
학부모 로그인은 "학부모/학생 탭"에서 학생 이름 또는 등록된 학부모 계정으로 접속합니다.
매일 진도 입력하는 곳 ← 이게 핵심!
매일 사용📌 진도를 입력하면 → 학습 평가서(리포트)에 자동으로 반영됩니다.
날짜별로 쌓인 기록이 그대로 평가서 표로 출력되므로, 매 수업마다 입력하는 것이 중요합니다.
보라색 배너가 있는 학습 진도 · 학생별 기록 현황 화면
반 이름 알약 버튼을 클릭합니다
오늘 날짜를 클릭하면 파란 테두리로 선택됩니다
오른쪽 상단 보라색 버튼을 누르면 입력 모달이 열립니다
출결 선택 + 교재 진도 입력 (예: 32p, Unit 5) + 숙제완료 체크
✅ 저장 완료 토스트 메시지 확인
반 선택 시 학생별 카드가 표시됩니다
해당 학생의 진도 입력 모달이 바로 열립니다
진도 입력칸에 타이핑하면 0.7초 후 자동저장도 됩니다
⚡ 인라인 자동저장: 진도 입력칸에 내용을 쓰면 입력 멈춘 후 0.7초 뒤 자동으로 저장됩니다. 초록 테두리가 뜨면 저장 완료!
초록색 배너의 현황판 페이지
[오늘] 버튼으로 바로 오늘로 이동 가능
각 학생 카드에서 교재 진도를 바로 입력하고 저장할 수 있습니다
| 항목 | 설명 | 평가서 반영 |
|---|---|---|
| 출결 | 출석 / 지각 / 조퇴 / 결석 / 공결 선택 | ✅ 반영 |
| 교재 진도 | 예: 32p / Unit 5 / 완료 (자유 텍스트) | ✅ 반영 |
| 숙제완료 | 교재 숙제 완료 여부 체크 | ✅ 반영 |
| 온라인완료 | 온라인 부교재 완료 여부 | ✅ 반영 |
| 메모 | 수업 특이사항, 전달사항 등 | ✅ 반영 |
| 포인트 | 지급/차감 포인트 및 사유 | ✅ 반영 |
학습 진도 탭
반을 선택하면 해당 반 학생만 카드로 표시됩니다
이달 날짜가 가로로 펼쳐집니다. 초록 점 = 출석 기록 있는 날, 클릭하면 해당 날 출결 현황이 카드에 표시됩니다
학생별로 이달 출결 히트맵 + 최근 교재 진도 타임라인이 한 카드에 표시됩니다
| 카드 영역 | 의미 |
|---|---|
| 이름 / 학년 | 기본 정보. 날짜 선택 시 출석=초록테두리, 결석=빨강테두리 |
| 히트맵 (작은 사각형들) | 이달 1일~말일 출결 색상 표시. 초록=출석, 빨강=결석, 노랑=지각 |
| 교재명 + pip 점들 | 최근 8회 수업 날짜별 진도 입력 여부. 점 위에 마우스 올리면 내용 확인 |
| 우측 진도값 (—) | 가장 최근 진도 내용 표시 |
| 🎓 이수 교재 | 이수 완료된 교재 배지. 초록 배경 |
| ⭐ pt / 이달 pt | 누적 포인트 및 이달 포인트 변동 |
| 👤 ✏️ 🖨️ 버튼 | 순서대로: 학생상세 / 진도입력 / 리포트출력 |
반별 통합 현황판
반 전체의 출결, 원비, 진도, 상담, 포인트, 차량을 한 화면에서 한 번에 볼 수 있습니다.
담임 선생님이 매일 수업 시작 전 확인하고 입력하기에 가장 좋은 화면입니다.
| 항목 | 설명 |
|---|---|
| 반 선택 | 전체 반 또는 특정 반만 표시 |
| 날짜 선택 | [오늘] [어제] 버튼으로 빠르게 이동 |
| 선생님 필터 | 특정 선생님 담당 반만 표시 |
| 카드 표시 항목 | ✅출결 💰원비 📖학습입력 ⭐포인트 💬상담 🚌차량 — 체크로 표시/숨김 |
| 전원 출석 버튼 | 현재 반 학생 전원을 출석으로 일괄 처리 |
| CSV 내보내기 | 현재 화면 데이터를 엑셀용 CSV로 다운로드 |
각 학생 카드를 클릭하면 해당 날짜의 상세 입력 팝업이 열립니다.
✅ 출결 선택
출석 / 지각 / 조퇴 / 결석 / 공결을 드롭다운으로 선택
📖 교재 진도
교재명 옆 칸에 오늘 진도 입력. 입력 후 0.7초 자동저장
⭐ 포인트
지급/차감 선택 후 점수와 사유 입력
📌 반별 통합 현황판에서 입력한 진도는 이제 progress_log_v1에 날짜별로 즉시 저장됩니다.
학습 평가서, 학습 진도 탭, 학생 상세보기 — 모든 화면에서 동일한 데이터를 확인할 수 있습니다.
| 입력 위치 | 저장 방식 | 평가서 반영 |
|---|---|---|
| 반별 현황판 → 교재 진도 칸 | 0.7초 debounce 자동저장 (노란 테두리 → 초록 테두리) | ✅ 즉시 |
| 반별 현황판 → 날짜 변경 | 해당 날짜의 기록을 progress_log_v1에서 읽어 표시 | ✅ 날짜별 |
| 반별 현황판 → 숙제완료 체크 | 체크 즉시 저장 | ✅ 즉시 |
이중 저장 구조: 날짜별 이력(progress_log_v1)이 메인 저장소이고, 반별 현황판 실시간 표시용(progress_v2)이 보조로 동기화됩니다. 두 데이터는 항상 일치합니다.
교재 완료 처리
교재를 다 마쳤을 때 [완료] 버튼을 눌러 이수 이력을 기록하고, 시험 성적표 발송 여부를 체크하며, 새 교재를 바로 배정할 수 있습니다.
학생 카드의 ✏️ 버튼 또는 [출결·진도 입력] 버튼
이미 이수한 교재는 ✅이수 배지로 표시됩니다
완료일 / 마지막 진도 / 시험성적표 발송 여부 / 다음 교재 배정
새 교재를 선택했다면 학생 배정 교재가 자동으로 교체됩니다
학습 진도 탭 학생 카드
카드 하단 초록 영역에 최근 이수 교재 3권 표시. 📨 아이콘은 성적표 발송 완료
학생 상세보기 → 수업/학습 탭
이수 교재 전체 목록 표시. 완료일, 발송여부, 새 교재 등 상세 확인 가능
학습 평가서 (리포트) 출력
학부모 발송용📌 매일 입력한 진도·출결·숙제·포인트가 모두 이 평가서에 표로 나옵니다.
월별로 한 학생씩 출력하여 학부모에게 발송하거나 프린트할 수 있습니다.
방법 ①
학습 진도 탭 상단 → [리포트 출력] 버튼
방법 ②
학생 카드 우측 하단 → 🖨️ 버튼
방법 ③
학생 상세보기 → 개요 탭 → [리포트 출력] 버튼
| 옵션 | 설명 |
|---|---|
| 연도 / 월 선택 | 출력할 기간 선택 (기본: 이번달) |
| ✅ 출결 포함 | 날짜별 출결 현황 표시 |
| 📖 학습 진도 포함 | 교재별 날짜별 진도 내용 표시 |
| ✏️ 숙제 현황 포함 | 숙제완료 / 온라인완료 체크 여부 |
| ⭐ 포인트 포함 | 날짜별 포인트 내역 |
| 💬 메모 포함 | 수업 메모 내용 |
| ✍️ 서명란 포함 | 담임 / 원장 / 학부모 서명란 |
로고를 업로드하면 모든 리포트 상단에 자동으로 삽입됩니다. PNG/JPG 파일 권장.
인쇄 팁: 리포트 모달에서 [인쇄] 버튼 클릭 → 브라우저 인쇄 창에서 용지 크기 A4, 여백 최소로 설정하면 깔끔하게 출력됩니다.
학생 관리
| 필수 입력 | 선택 입력 |
|---|---|
| 이름, 학년, 상태(재원/신입) | 학교명, 생년월일, 학부모 연락처, 배정 반, 교재, 원비 |
또는 학생 수정 모달에서 교재 항목 선택
교재 관리 탭에서 미리 등록된 교재 목록 중 선택
| 탭 | 내용 |
|---|---|
| 📊 종합 | 출결현황, 진도요약, 포인트, 이수교재, 상담 한눈에 |
| 🪪 기본정보 | 이름, 학년, 학교, 학부모 연락처 등 |
| 📖 수업/학습 | 배정 교재, 진도현황, 이수 이력, 수업일지 |
| 🚌 차량 | 탑승 정류장, 시간 |
| 💵 원비 | 납부 내역, 미납 청구서 |
| 📅 출결 | 전체 출결 이력 달력 |
| ⭐ 포인트 | 포인트 내역 전체 |
| 💬 상담 | 상담 이력 전체 |
| 📋 이력 | 상태 변경 이력 |
상담 관리
상담 관리 페이지는 세 가지 방식으로 구성됩니다.
① 반별 사이드바 + 학생 카드 그리드 보기 ② ⚡ 빠른 상담 기록 패널 ③ 통계 카드 + 주간 일정
| 영역 | 위치 | 역할 |
|---|---|---|
| 📊 통계 카드 바 | 상단 | 전체·예정·상담중·신입·재원·퇴원 건수. 클릭하면 해당 상태만 필터 |
| 🗓️ 이번 주 일정 | 통계 바 아래 | 요일별 상담 예정 학생 이름 표시. 이름 클릭 시 상담 편집 |
| ⚡ 빠른 상담 기록 패널 | 일정 아래 | 반 선택 → 학생 카드에서 모달 없이 바로 상담 입력 |
| 📋 반 사이드바 | 왼쪽 | 반 클릭 시 해당 반 학생의 상담 카드만 표시 |
| 👤 학생 상담 카드 | 오른쪽 메인 | 학생별 최근 상담 이력 + 상태 + 주기 배지 |
| 항목 | 설명 |
|---|---|
| 학생 선택 | 등록된 학생 드롭다운에서 선택 시 정보 자동 채움 |
| 상담일 | 실제 상담한 날짜 |
| 요일 | 자동 계산, 수정 가능 |
| 상담 상태 | 예정 / 상담중 / 신입대기 / 재원 / 퇴원 |
| 경로 | 전화문의 / 방문 / 지인소개 / 온라인 등 |
| 상담 내용 | 자유 텍스트 (학부모 요청, 학습 피드백 등) |
| 담당 선생님 | 상담 진행 선생님 |
⚡ 반별 빠른 상담 기록 NEW
상담 관리 페이지 최상단의 ⚡ 반별 빠른 상담 기록 패널을 이용하면
모달을 열지 않고도 학생 카드에서 바로 상담 내용을 입력하고 저장할 수 있습니다.
보라·파란 그라데이션 헤더의 패널이 자동으로 펼쳐져 있습니다
등록된 반이 알약 버튼으로 표시됩니다. 클릭하면 해당 반 학생들이 카드로 나타납니다
카드 하단에 인라인 입력 폼이 펼쳐집니다
날짜(기본값: 오늘), 상태(상담중/예정 등), 상담 내용 textarea, 메모 입력
카드 테두리가 초록색으로 바뀌며 저장 완료. 아래 학생 카드 목록에도 즉시 반영됩니다
| 색상 | 의미 |
|---|---|
| 🟢 초록 | 30일 이내 상담 완료 |
| ⚠️ 노랑 | 30일 초과 — 상담 필요 |
| 🔴 빨강 | 한 번도 상담 없음 |
| [↗ 상세 편집] | 기존 상담 기록이 있을 때 표시. 상담 모달을 열어 전체 내용 수정 |
| [+ 신규] | 상담 기록이 없을 때 표시. 상담 모달을 열어 처음부터 입력 |
| [접기 ▲] | 패널 전체를 접어 화면 공간 절약 가능 |
대시보드에서 연동: 대시보드 상담 현황판의 학생 미니카드를 클릭하면 상담 관리 페이지로 이동하면서 해당 학생이 속한 반이 자동 선택되고, 학생 카드의 입력 폼이 자동으로 펼쳐집니다.
🔴 미상담
한 번도 상담 기록이 없는 재원생. 빠른 기록 패널에서 빨간 테두리 카드로 표시
⚠️ 주기 초과
마지막 상담일로부터 30일이 지난 학생. 노란 테두리 + ⚠️ N일 전 배지
🟢 정상
30일 이내 상담 완료. 초록 테두리 + ✅ N일 전 배지
🔔 대시보드 알림
메뉴 상담 아이콘에 빨간 뱃지 숫자로 미상담·초과 학생 수 표시
대시보드 상담 현황판 개선
| 영역 | 내용 |
|---|---|
| 🔢 통계 3분할 | 🔴 미상담 / 🟡 주기초과 / 🟢 정상 학생 수를 큰 숫자로 강조 |
| 반 탭 버튼 | 전체 / 각 반 알약 버튼으로 필터링 |
| 🃏 미니카드 그리드 | 학생별 미니카드 — 이름·반·상태·날짜 표시. 클릭 시 상담 관리로 이동 |
대시보드에서 바로 상담이 필요한 학생을 확인하고, 클릭 한 번으로 상담 기록 입력 화면까지 이동할 수 있습니다.
대시보드 오른쪽에는 날짜별로 그룹화된 상담 예정·진행 일정이 카드 형태로 표시됩니다.
📅 오늘 상담
오늘 날짜의 상담 예정 건. 상태 색상 도트(●)와 배지로 구분
📆 예정 상담
미래 날짜의 상담 예약. 날짜별로 묶어서 표시
포인트 관리
📖 진도 입력 모달에서
출결·진도 입력 모달 하단 ⭐ 포인트 영역에서 +지급 / -차감 선택 후 점수와 사유 입력
👤 학생 상세보기에서
학생 상세 → 포인트 탭 → [포인트 지급/차감] 버튼
포인트가 일정 기준에 도달하면 장학카드(현금 환산)로 전환할 수 있습니다. 설정 → 포인트 설정에서 환산 기준을 조정하세요.
포트폴리오 (학부모 열람)
학부모가 자녀의 학습 현황을 열람할 수 있는 뷰입니다.
학부모 탭으로 로그인하면 자동으로 포트폴리오 화면이 열립니다.
출결 현황
이달 출결 달력 및 통계
학습 진도
교재별 최근 진도 타임라인
포인트 잔액
누적 포인트 및 내역
상담 이력
최근 상담 내용 요약
차량 관제
| 기능 | 설명 | 사용자 |
|---|---|---|
| 탑승 현황 | 오늘 등원/하원 탑승 예정·완료 학생 현황 | 원장·부원장·선생님 |
| 탑승 처리 | 학생별 탑승 완료 버튼 클릭 | 기사 |
| 운행 일지 | 호차별 운행 기록 확인 | 원장·기사 |
| 노선 관리 | 정류장·시간·학생 배정 설정 | 원장 |
| 내 호차 현황 | 기사 로그인 시 자신의 호차만 표시 | 기사 |
대시보드에서도 오늘의 탑승 완료 / 미탑승 학생 수를 실시간으로 확인할 수 있습니다.
원비 관리
| 기능 | 경로 |
|---|---|
| 납부 처리 | 원비 관리 → 학생 클릭 → [납부 처리] |
| 청구서 발행 | 원비 관리 → [청구서 발행] |
| 미납 현황 | 대시보드 미납 현황 카드 또는 원비 → 미납 탭 |
| 반별 원비 현황 | 원비 → 반별 현황 탭 |
| 일괄 청구 | 반별 통합 현황판 → [원비 일괄] 버튼 |
시스템 설정
| 탭 | 주요 기능 |
|---|---|
| 👩🏫 선생님 관리 | 선생님 추가, 출근 현황, 정보 수정 |
| 👥 전체 계정 | 모든 계정 목록 확인 및 비밀번호 변경 |
| 🛡️ 메뉴 권한 | 선생님별 접근 가능 메뉴 개별 설정 |
| 🏫 학원 정보 | 학원명, 연락처, 로고 이미지 업로드 |
| ☁️ 동기화/백업 | 데이터 내보내기/가져오기, 기기 간 동기화 |
| 💵 원비 설정 | 수강 과목별 기본 원비 설정 |
| 🚌 차량 노선 | 노선 생성 및 정류장 관리 |
| ⭐ 포인트 설정 | 포인트 → 장학 전환 기준 설정 |
🔄 동기화/백업 사용법: 태블릿에서 입력한 데이터를 PC에서 보려면
1) 태블릿: 설정 → 동기화/백업 → [내보내기] → 파일 저장
2) PC: 설정 → 동기화/백업 → [가져오기] → 파일 선택
또는 QR코드/링크 동기화를 이용하면 더 빠릅니다.
자주 묻는 질문 (FAQ)
A. 아래 사항을 확인해 주세요:
① 리포트 설정에서 "학습 진도 포함"이 체크되어 있는지
② 리포트의 연도/월이 입력한 날짜와 일치하는지
③ 진도 입력 후 반드시 [저장] 버튼을 눌렀는지 (자동저장은 0.7초 후 동작)
A. 교재 완료 후 새 교재를 직접 입력했을 때 내부 ID가 노출되는 문제입니다.
로그아웃 후 다시 로그인하면 자동으로 정리됩니다. (로그인 시 자동 데이터 복구 실행)
A. 기본 비밀번호: sf@2025!
만약 비밀번호를 변경했다면 새 비밀번호를 사용하세요.
비밀번호를 잊었다면 브라우저 개발자 도구에서 localStorage.removeItem('accs_v1') 실행 후 재시도.
A. 브라우저 캐시/쿠키를 삭제하면 localStorage도 같이 지워집니다.
정기적으로 설정 → 동기화/백업 → [내보내기]로 백업해 두세요.
시크릿 모드에서는 데이터가 저장되지 않습니다.
A. 설정 → 메뉴 권한 탭에서 선생님별로 접근 가능한 메뉴를 체크/해제하면 됩니다.
변경 즉시 적용되며, 해당 선생님이 다음 로그인 시 반영됩니다.
A. 설정 → 학원 정보 탭에서 학원명을 입력하고 저장하세요.
저장 후 리포트를 다시 열면 올바른 학원명이 표시됩니다.
A. 최근 업데이트로 반별 현황판 입력이 progress_log_v1에 자동 동기화됩니다.
① 입력 후 노란 테두리(저장 중) → 초록 테두리(저장 완료)가 뜨는지 확인
② 리포트의 연도·월이 입력 날짜와 일치하는지 확인
구버전에서 입력한 데이터는 학습 진도 탭 → 진도 입력 모달에서 다시 저장하면 반영됩니다.
A. ⚡ 빠른 상담 기록 패널은 빠른 입력에 최적화되어 담당 선생님 필드가 생략됩니다.
저장 후 카드 우측 [↗ 상세 편집] 버튼을 눌러 모달에서 담당 선생님을 추가로 입력할 수 있습니다.
A. 해당 학생이 반에 배정되어 있어야 빠른 상담 패널에서 자동 이동이 동작합니다.
학생 관리 또는 반 관리에서 반 배정 여부를 확인해 주세요.
반 배정이 없어도 상담 관리 페이지는 정상적으로 열립니다.
데이터 저장 구조 (기술 참고용)
| 키 이름 | 저장 내용 |
|---|---|
| accs_v1 | 계정 목록 (선생님·기사·학부모) |
| academy_name | 학원명 |
| academy_logo | 로고 이미지 (base64) |
| school_settings | 학원 기본 정보 JSON |
| stu_data_v1 | 학생 전체 데이터 |
| class_data_v1 | 반 목록 및 학생 배정 |
| progress_log_v1 | 📌 날짜별 진도 누적 이력 (평가서 원본 데이터) |
| progress_v2 | 반별 현황판용 최신 진도 스냅샷 |
| attendance_v1 | 출결 기록 |
| completed_books_v1 | 이수 교재 이력 |
| counsel_data_v1 | 상담 이력 (id, name, stuId, date, status, channel, content, memo, lastCounselDate 등) |
| points_v1 | 포인트 내역 |
| tuition_log_v1 | 원비 납부 이력 |
💡 progress_log_v1이 핵심입니다.
구조: { 학생ID: { 날짜: { books:[{name, lesson}], hwDone, hwOnline, memo } } }
매일 진도 입력 시 이 키에 날짜별로 쌓이고, 학습 평가서는 이 데이터를 읽어 표로 출력합니다.