POLY KCMS Redesign

학생 등록 화면 리디자인 시안

동일한 '학생 등록' 화면을 세 가지 방향(A·B·C)으로 구현했습니다.
A·B는 전면 개편(새 디자인) 방향, C는 기존 레이아웃을 유지하고 색만 바꾼 안입니다.
A·B는 데이터 밀도를 높이고(콤팩트) 목록 텍스트 색을 단일 톤으로 통일해 가독성을 개선한 안으로 제공합니다.

A형

밀도형 업무 화면

한 화면에서 최대한 많은 정보를 빠르게 다루는 실무 집중형 레이아웃입니다.

정보 밀도가 높아 한 화면에서 많은 데이터를 빠르게 다룰 수 있고, 목록과 상세를 즉시 오가며 반복 입력에 유리합니다. 넓은 세로 공간을 확보해 데이터 입·출력이 잦은 데스크톱 업무 담당자에게 잘 맞습니다.

A형 열기 →

B형

대시보드형 화면

여백과 카드로 정돈한 모던 대시보드형 레이아웃입니다.

시각적 위계가 뚜렷해 가독성이 높고 메뉴 탐색이 직관적이며, 카드와 여백으로 정돈된 심미적 완성도가 돋보입니다. 관리자·대시보드 뷰나 브랜드 인상을 중시하는 화면에 잘 맞습니다.

B형 열기 →

C안

레거시 유지형

기존 KCMS 화면 구조·정보 밀도를 그대로 유지하고 색만 입힌 안입니다.

개편 전 학생관리 레이아웃과 폰트 크기를 그대로 쓰되, poly-dashboard 브랜드 컬러(Poly Blue)만 적용했습니다. 상단 메뉴·좌측 즐겨찾기 툴바·조밀한 폼/테이블 — 기존 사용자에게 가장 익숙하고 전환 비용이 낮습니다.

C안 열기 (원본) →

컬러 변형 · 톤다운 4종

잉크 네이비 → 그래파이트 · 스틸블루 → 슬레이트 · 틸 → 웜 그레이 · 브론즈 →

상세 비교 (A · B 신규안 · C 레거시안)

항목	A형	B형	C안
디자인 차이
내비게이션	상단 가로 탭 + 메가메뉴	좌측 접이식 사이드바	상단 가로 메뉴 + 좌측 즐겨찾기 툴바 (기존 구조)
브랜드 컬러	민트 / Teal (#4FD1C5)	인디고 / Indigo (#4318FF)	Poly Blue (#0066FF) · 톤다운 4종
정보 밀도	높음 (컴팩트·실무형)	중간 (여백·카드형)	매우 높음 (레거시 밀도 유지)
레이아웃	목록 + 상세 분할 (너비 조절)	카드 구획 + 슬라이드 상세	좌 목록 / 우 상세 동시 표시 (기존 화면 그대로)
세로 공간	넓음 (상단 바 1줄)	보통 (상단 바 + 여백)	조밀 (기존 밀도)
태블릿 대응	상세 패널 비율 자동 조정 · 터치 드래그 리사이즈	사이드바 자동 축소(≤1280px) · 필터 그리드 단수 조정	데스크톱 고정 (기존 레이아웃 유지)
구현 기능 · A·B 공통 / C 레거시 방식
입력 · 폼	검색 필터(상태·학번·레벨·학급) · 인라인 폼 입력·저장 · 커스텀 셀렉트·드롭다운		기존 등록 폼 유지 · 셀 병합 정리 · 상태변경 드롭다운 · 현금영수증 입력
목록 · 상세	학생 목록 ↔ 상세 연동 · 상세 탭(기본·배정·출결·성적·수납·메모)		좌 목록 / 우 상세 동시 표시 · 학급 배정 정보 테이블
데이터 시각화	성적 차트(반평균 비교) · 출결 캘린더		해당 없음 (폼·테이블 중심)
공통 UI	상태 배지 · 페이지네이션 · 커스텀 오버레이 스크롤바		기존 UI 유지 · 커스텀 셀렉트·드롭다운 통일 · Poly Blue 배지