Taehoon
119c799d1d
- 주요 변경 사항: 1. 레이아웃 안정화: 서버 위치도 뷰의 2:1 비율 복원 및 가변형(Adaptive) 레이아웃 적용 2. 타이포그래피 표준화: 전역 폰트 스케일 도입 및 기본 폰트 사이즈 상향 (15px -> 16px) 3. 3-Way 토글 통합: [자산 위치] [운영 현황] [자산 목록] 간의 전환 오류 수정 및 UI 통일 4. 하드코딩 제거: 인라인 스타일을 CSS 클래스 및 변수 체계로 전면 리팩토링 5. 가이드 업데이트: 변경된 디자인 정책을 design_rule.md에 반영
3.2 KiB
3.2 KiB
🎨 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를 유지합니다.
- Standard Height: 입력창 및 선택창은 전역 표준인
- Modal (모달 공통 규칙):
- Header: 짙은 그린(
#1E5149) 배경에 화이트 텍스트를 사용하며, 우측 상단에 명확한 'X' 닫기 버튼을 배치합니다. - Interaction: 사용자의 오입력(실수로 바깥을 클릭하여 입력 내용이 날아가는 현상)을 방지하기 위해 모달 바깥 영역(Overlay) 클릭 시 모달이 닫히지 않도록 설정합니다. 닫기는 오직 'ESC' 키 또는 명시적인 'X' 및 '닫기' 버튼을 통해서만 가능합니다.
- Layout: 2열 그리드 시스템을 권장하며, 하단 우측에 액션 버튼(닫기, 저장 등)을 배치합니다.
- Header: 짙은 그린(