디자인 가이드

1. GNB — 1단 주 메뉴·세션·사용자, 2단 배정된 시험. 모든 서브 페이지 공통 (04)
2. LNB — 시험 카드(회차 선택) + 업무 메뉴. 접어서 아이콘 레일로 쓸 수 있음 (05)
3. 콘텐츠 — 제목 카드 → 검색 카드 → 대시보드 → 목록 카드 순서를 고정 (07)

Primary · 브랜드 블루

연한 블루 · 선택 상태

Text

Surface · Border

상태 칩

테두리 1px 알약형. 상태의 "무게"에 따라 다섯 가지만 씁니다. 같은 의미면 메뉴가 달라도 같은 칩을 씁니다.

점수 칩

알림 · 오버레이

그라데이션

서비스 색 (메인 전용)

서브 페이지(나의 검사 관리)는 시험 종류와 관계없이 Primary 파랑과 브랜드 그라데이션만 씁니다.

구성 요소

전체 메뉴(메가 메뉴)

• 3열검사 안내 · 나의 검사 관리 · 기술지원(공지사항, 진단검사 기술지원, 1:1 문의). 열 사이 1px #F0F2F4, 아이콘 없음
• 나의 검사 관리배정된 시험 이름을 메뉴로 표시 · 현재 메뉴 표시(#E9F3FF 칩) · 현재 시험은 #E9F3FF 배경 700
• 오른쪽 300px검사 안내 배너(연한 배너 그라데이션, radius 16) + 기술 지원 카드(브랜드 그라데이션, 전화번호 22/800)
• 딤아래 화면 rgba(14,24,44,.28) · 열림 애니메이션 0.18s

1. 제목 카드 — 왼쪽 페이지 제목(22/700) + 안내문(13, 1~2줄). 오른쪽 아래 경로(홈 › 나의 검사 관리 › 채움AI › 채점 관리 › 디지털 평가, 단계마다 드롭다운) + 화면 확대 버튼. 아래 1px 선 밑에 탭 + 시험 선택을 한 줄로: 왼쪽 탭(번호 없음, 선택은 파란 글씨 + 3px 밑줄, 탭 사이 1px 세로선), 오른쪽 "시험 선택" 라벨 + 시험명(잠금·회색 고정) → 시험 구분 → 시험명(파란 테두리 #B9D6FB, 파란 글씨). 시험 구분에 따라 마지막 칸이 회차 / 캠프명 / 연도·학기·시험명으로 바뀝니다.
2. 검색 카드 — 한 줄 고정 순서: 학교구분 → 학교명(권한이 없으면 회색 고정) → 학년 → 학급 → 과목 → 문항 → 채점 상태 → [검색] → [초기화]. 셀렉트 폭은 내용 길이에 맞춤. 값을 바꾸면 파란 테두리로 표시되고, [검색]을 눌러야 표에 반영됩니다.
3. 대시보드 — 카드 분리형 한 줄(5~7개, 간격 8). 첫 카드는 "전체"(선택 상태 #F3F8FF + 파란 테두리 + 3px 링, 숫자 파랑). 상태 카드는 상태 칩 + 큰 숫자 + 단위. 비율 카드(%)는 누를 수 없는 고정 카드이고 숫자가 파랑. 카드를 누르면 표가 해당 상태로 걸러집니다.
4. 목록 카드 — 왼쪽 "총 n건", 오른쪽 버튼. 보조 버튼(파란 라인)을 먼저, 주요 버튼(파랑)은 맨 오른쪽에 하나만. 표 위에 안내 박스(#F5F8FD). 표는 radius 14 컨테이너, 헤더 #F5F7FA 13/700, 행 55px 14/400, 구분선 #F0F2F4, 상세로 가는 값은 파란 밑줄 링크, 빈 값은 "-"(#C1CAD4).

시험 구분별 탭 · 표 규칙

• 학생 정보공정 채점이 필요한 탭은 이름 대신 학년 + 학생관리번호만 표시하고 표 위 안내 박스로 알림
• 보조 버튼 순서문항카드 → 문항 → 채점기준표(수정) → 채점교육자료/수업자료 → 주요 버튼
• 종이 기반 평가디지털 평가와 같은 화면 + [답안 PDF 업로드]는 채점 연수·채점 기준 설정 탭에만
• 오래 걸리는 작업AI 재채점처럼 시간이 걸리면 확인 팝업 → 표 위 진행 박스(회전 아이콘 + [새로 고침]) → 새로 고침해야 결과 반영

1. 제목 카드 — 제목 왼쪽에 [‹ 목록] 버튼(H32, 파란 라인). 제목은 "탭 이름 · 학생관리번호(· 문항)". 경로 마지막 단계에 현재 답안 표시.
2. 정보 줄 — 한 줄 카드. 라벨 11.5 #8A949E + 값 12.5/600, 항목 사이 1px 세로선. 상태는 칩, 점수는 점수 칩.
3. 문항 탭 + 보조 버튼 — 왼쪽 알약 탭(H38, 선택 파랑), 오른쪽 문항카드·문항·채점기준표·자료 버튼. 문항 단위 목록에서 들어온 경우 탭 없이 정보 줄에 문항번호 표시.
4. 학생 답안 — 문항 번호별 박스. 종이 기반 평가는 왼쪽 스캔 원본 | 오른쪽 OCR 변환 텍스트(같은 줄 함께 강조, OCR 수정 가능).
5. 판단 2열 — 왼쪽 결과 카드(정규: 1차·2차·AI 비교 / 시범·형성: AI 결과만, 없으면 "이 답안 AI 채점 진행"), 오른쪽 최종 확정 채점기준표(행을 눌러 선택, 선택 행 #E9F3FF + 점수 파랑 + 라디오). 합계는 오른쪽 아래.
6. 기록 2열 — 왼쪽 AI 채점 결과 설명(#F5F8FD 박스, 항목별 근거 + 검토 등급 칩과 사유), 오른쪽 학생 피드백(내용 길이에 맞춘 높이, [초기화] 오른쪽 위) + 채점 특이사항 메모(없음 / 답안 인식 오류 / AI 채점 오류 / 문항·채점기준 보완 필요 / 기타). 두 열 높이를 맞춥니다.
7. 하단 고정 바 — 화면 아래 sticky, 흰색 97% + 블러, 위 1px 선 + 그림자. 왼쪽 "학생관리번호 · n / 전체", 오른쪽 목록으로 · 이전 답안 · 다음 답안 · 임시저장 · [확정 후 다음 답안 →](파랑). 버튼 H40.

라운드

그림자

간격