Taehoon
119c799d1d
- 주요 변경 사항: 1. 레이아웃 안정화: 서버 위치도 뷰의 2:1 비율 복원 및 가변형(Adaptive) 레이아웃 적용 2. 타이포그래피 표준화: 전역 폰트 스케일 도입 및 기본 폰트 사이즈 상향 (15px -> 16px) 3. 3-Way 토글 통합: [자산 위치] [운영 현황] [자산 목록] 간의 전환 오류 수정 및 UI 통일 4. 하드코딩 제거: 인라인 스타일을 CSS 클래스 및 변수 체계로 전면 리팩토링 5. 가이드 업데이트: 변경된 디자인 정책을 design_rule.md에 반영
41 lines
3.2 KiB
Markdown
41 lines
3.2 KiB
Markdown
# 🎨 ITAM 시스템 디자인 가이드 (Design Guide)
|
|
|
|
본 문서는 ITAM(IT Asset Management System)의 시각적 일관성과 사용자 경험을 유지하기 위한 핵심 디자인 원칙을 정의합니다.
|
|
|
|
---
|
|
|
|
### 1. 디자인 철학 (Design Philosophy)
|
|
* **Minimalist & Border-based**: 불필요한 박스(Card) 사용을 최소화하고, 정보의 구분은 간결한 라인(Border/Divider)을 활용하여 시각적 피로도를 낮춥니다.
|
|
* **Professional Achromatic**: 무채색(Black, White, Grey)을 기본으로 하여 정돈된 업무 환경을 제공합니다.
|
|
* **Green Accent**: 블루 대신 짙은 그린(`#1E5149`)을 포인트 컬러로 사용하여 차분한 전문성을 강조합니다.
|
|
|
|
### 2. 타이포그래피 (Typography)
|
|
* **Font Family**: `Pretendard Variable`, `Pretendard` (전역 적용)
|
|
* **Base Font Size**: 기본 텍스트 크기는 **16px**로 설정합니다.
|
|
* **Letter Spacing**: `-0.02em` (약 -2%) 적용. 자간을 좁게 설정하여 밀도 있고 세련된 가독성을 확보합니다.
|
|
* **Weights**: 400(Regular), 500(Medium), 600(SemiBold), 700(Bold), 800(ExtraBold), 900(Black).
|
|
* **Standard Scale**:
|
|
* **XS (12px)**: 보조 텍스트, 작은 라벨
|
|
* **SM (14px)**: 일반 항목 라벨, 필터 텍스트
|
|
* **Base (16px)**: 메인 데이터 내용, 테이블 셀, 상세 정보 값
|
|
* **MD (19px)**: 섹션 제목, 강조 문구
|
|
* **LG (23px)**: 주요 페이지 타이틀
|
|
* **XL (29px)**: 핵심 통계 수치 (KPI)
|
|
|
|
### 3. 컬러 팔레트 (Color Palette)
|
|
* **Point Color**: `#1E5149` (Deep Green) - 강조, 활성화 상태, 주요 액션 버튼.
|
|
* **Text**: Main(`#111827` - Near Black), Muted(`#6B7280` - Grey).
|
|
* **Border/Divider**: `#E5E7EB` (Light Grey) - 정보 구분을 위한 얇은 실선.
|
|
* **Background**: `#FFFFFF` (White) / `#F9FAFB` (Off White).
|
|
|
|
### 4. 레이아웃 및 컴포넌트 규칙 (Layout Rules)
|
|
* **Box-less Design**: 꼭 필요한 정보 묶음(데이터 그룹화 등)이 아니면 박스 형태의 테두리나 배경 사용을 지양합니다.
|
|
* **Line-based Division**: 섹션 간의 구분은 1px 두께의 얇은 실선(Border)을 통해 명확히 합니다.
|
|
* **Table**: 배경색이나 화려한 효과 없이 행(Row) 간의 얇은 구분선만 사용하여 데이터 본연에 집중하게 합니다.
|
|
* **Input/Button**: 입력 필드와 버튼은 최소한의 보더와 포인트 컬러만 사용하여 정갈하게 표현합니다.
|
|
* **Standard Height**: 입력창 및 선택창은 전역 표준인 `38px`를 유지합니다.
|
|
* **Modal (모달 공통 규칙)**:
|
|
* **Header**: 짙은 그린(`#1E5149`) 배경에 화이트 텍스트를 사용하며, 우측 상단에 명확한 'X' 닫기 버튼을 배치합니다.
|
|
* **Interaction**: 사용자의 오입력(실수로 바깥을 클릭하여 입력 내용이 날아가는 현상)을 방지하기 위해 **모달 바깥 영역(Overlay) 클릭 시 모달이 닫히지 않도록** 설정합니다. 닫기는 오직 'ESC' 키 또는 명시적인 'X' 및 '닫기' 버튼을 통해서만 가능합니다.
|
|
* **Layout**: 2열 그리드 시스템을 권장하며, 하단 우측에 액션 버튼(닫기, 저장 등)을 배치합니다.
|