Skip to content

DESIGN.md

Latest commit

 

History

History
111 lines (85 loc) · 5.89 KB

DESIGN.md

File metadata and controls

111 lines (85 loc) · 5.89 KB
Raw

EduManager 디자인 시스템

하나의 토큰·컴포넌트 셋(src/main/webapp/css/theme.css)으로 전 화면을 통일합니다. 네이비 브랜드 · 밝은 캔버스 · 카드 기반 레이아웃이 기본 톤입니다.

1. 디자인 원칙

원칙 의미
하나의 시스템 모든 색·간격·그림자·컴포넌트는 theme.css의 토큰/클래스에서. 페이지 CSS는 토큰만 참조(하드코딩 색·픽셀 금지).
네이비 액센트 브랜드/액션은 네이비(--brand), 본문은 잉크 그레이. 강조는 색이 아니라 굵기·여백으로.
카드와 여백 정보는 흰 카드(--surface) + 옅은 라인/그림자로 묶고, 넉넉한 여백으로 숨 쉬게.
차분한 모션 hover/focus에 작은 lift·링만. 0.12~0.2s ease. 과한 애니메이션 지양.
접근성 기본 입력 focus 링, 충분한 명도 대비, 사용자 입력은 항상 <c:out>으로 이스케이프.

2. 디자인 토큰 (:root)

색 — 브랜드 / 텍스트

토큰 값 용도
--brand #1e2a7c 기본 액션·강조(네이비)
--brand-strong / --brand-press #18215f / #141b50 hover / active
--brand-tint / --brand-tint-strong #eef1fb / #e0e5f6 옅은 배경 강조
--brand-line #d6ddf2 강조 테두리
--ring rgba(30,42,124,.16) focus 링
--ink / --ink-2 #111827 / #344054 제목 / 본문
--muted / --faint #667085 / #98a2b3 보조 / placeholder
--on-brand #ffffff 네이비 위 글자

색 — 면 / 라인 / 상태

토큰 값 용도
--canvas #f6f7f9 페이지 배경
--surface / --surface-2 / --surface-3 #fff / #fbfcfe / #f4f6fa 카드·입력 / 옅은 면
--line / --line-strong #e3e8ef / #d0d7e2 테두리
--success #047857 · --warning #b45309 · --danger #dc2626 + *-bg 상태색(성공/경고/위험)

반경 · 그림자 · 타이포 · 레이아웃

그룹 토큰
반경 --r-xs 10 · --r-sm 12 · --r-md 14 · --r-lg 20 · --r-xl 24 · --r-pill 999 (Toss 톤: 둥글게)
그림자 --shadow-xs/-sm/(기본)/-lg (옅은 입체) · --shadow-brand(네이비 버튼)
타이포 --font: 'Pretendard', system-ui … · 본문 15px / line-height 1.5
레이아웃 --page-max 1120px · --page-wide 1200px · --gutter 24px

타이포 스케일(권장): 페이지 제목 22px/800 · 카드 제목 1618px/700800 · 본문 1415px/500 · 라벨 1314px/700 · 캡션 12px.

3. 컴포넌트 (theme.css 클래스)

레이아웃 · 카드

  • .em-page / .em-page--wide — 공통 콘텐츠 폭(네비와 정렬).
  • .em-card (+ --flat 그림자 제거, --pad 패딩24) — 기본 카드.
  • .em-head (+ .em-eyebrow 작은 대문자 라벨, h1, p) — 페이지 제목 카드.

버튼 .em-btn

변형 용도
--primary 주 액션(네이비 + brand 그림자)
--secondary 보조(라인 버튼)
--subtle 옅은 네이비 틴트
--ghost 텍스트형
--danger 삭제/위험
크기: --sm 36 · 기본 44 · --lg 50 · --block 가로 100%

입력 · 뱃지 · 탭 · 기타

  • .em-field / .em-label / .em-input · .em-select · .em-textarea — focus 시 네이비 테두리 + --ring.
  • .em-badge (+ --neutral/--success/--warning/--danger) — pill 라벨.
  • .em-tab (+ .on) — segmented/탭.
  • .em-divider · .em-dots/.em-dot.active(온보딩) · .filebox(커스텀 파일 업로드).

4. 페이지 적용 규칙 (중요 — 함정 포함)

  1. 로드 순서: 모든 JSP <head>에서 theme.css를 페이지별 CSS보다 먼저 링크. 안 그러면 토큰 미정의로 깨짐.
  2. 토큰만 사용: 페이지 CSS에서 색·반경·그림자는 var(--token)으로. raw hex/px 강조 금지.
  3. 캐시 무효화: CSS/JSP 수정 시 링크에 ?v=YYYYMMDD-xxx를 갱신(브라우저 캐시 강제 새로고침).
  4. XSS 안전: JSP에서 사용자 입력 출력은 반드시 <c:out value="${...}"/>. 속성값은 홑따옴표 value='${...}'.
  5. 추가 폼 가로폭: 폭은 .form div가 아니라 <form> 요소(.main-container > form)에 지정. div에 % 폭을 주면 shrink-to-fit으로 무너짐.
  6. .js엔 옵셔널 체이닝(?.) 금지: Eclipse JSDT가 빨간 에러로 오탐 → 고전 가드 사용.

5. 화면별 톤 가이드

화면 구성
메인 캘린더(대시보드) 헤더 카드 + 월 그리드(이벤트 칩) + '오늘' 패널 + '선택한 날짜 상세' 4열(수업/일정/시험/과제, 상단 액센트).
강의/스터디 신청 헤더 카드(+검색) + 탭/만들기 버튼 + 카드 갤러리(커버·제목·카테고리 뱃지·강사). 카드 hover lift.
강의/스터디 상세 정보 카드(커버 + 제목·설명 세로중앙) + 후기 카드.
항목 상세 분류/일시/소속 테이블 + 상세 내용 + (과제) 제출 현황/제출 폼 + 마감 상태 박스.
폼(공지·과제·일정·만들기·수정) 중앙 카드 폼, 라벨 위·입력 아래, 2열 그리드(날짜·시간), 우하단 주 버튼.

6. 반응형 · 접근성

  • 반응형: 카드/그리드는 min()·fr·미디어쿼리(≤640/760/820px)로 1열 전환.
  • 포커스: 입력·버튼 focus 시 네이비 테두리 + --ring. 키보드 사용자 고려.
  • 대비: 본문 --ink-2/--muted는 흰 배경에서 WCAG AA 충족 범위.
  • 상태 피드백: 성공/실패는 공통 네비게이션의 flash 배너(녹색/빨강)로 1회 표시.

이 문서는 src/main/webapp/css/theme.css를 기준으로 작성되었습니다. 토큰/컴포넌트를 바꾸면 이 문서도 함께 갱신하세요.