Taehoon
b169176d57
- 작업 상태: 진행 중 (Work In Progress) - 주요 변경 사항: 1. CSS 파일 통합: HWModal, SWModal, ListFactory 등에서 인라인 스타일(style 속성) 전면 제거 및 클래스 기반으로 재작성 2. 폰트/타이포그래피 스케일업: 최소 폰트 14px 기준으로 전체 텍스트 크기 상향 및 굵기(font-weight) 상향 조정 3. GNB(상단바) 레이아웃 개편: 2단 구조(로고 라인 / 메뉴 라인)로 변경 및 카테고리 텍스트 라벨 생략을 통한 간결화 4. 로고 이미지 교체: image 92.png로 업데이트 및 경로 정리 5. 디자인 가이드 분리: README에서 design_rule.md로 디자인 정책 문서 독립 * 참고: 현재 디자인 검토를 위한 중간 반영 상태이며, 피드백에 따라 추가 수정 예정임.
2.7 KiB
2.7 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(전역 적용) - Letter Spacing:
-0.02em(약 -2%) 적용. 자간을 좁게 설정하여 밀도 있고 세련된 가독성을 확보합니다. - Weights: 400(Regular), 500(Medium), 600(SemiBold), 700(Bold), 800(ExtraBold).
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: 짙은 그린(