Taehoon
af578a63bc
- 미사용 목업 파일(dummyData.ts, realServerData.ts, server_data.json) 및 중복 기획서 제거 - excelHandler.ts 내 미사용 대용량 엑셀 처리 함수들을 삭제하여 xlsx 의존성 제거 및 클라이언트 빌드 크기 최적화 - ListFactory.ts와 utils.ts 간에 중복으로 존재하던 calculatePcScoreDeductive 함수를 하나로 일원화 - 기획서 및 계획 문서들을 docs/plans/ 하위 폴더로 이동하여 프로젝트 루트 정리 - 정적 이미지 폴더(img/)를 public/img/로 이동하여 프로덕션 빌드 시 로고 및 장비 사진 엑박 오류 해결
3.4 KiB
3.4 KiB
🎨 ITAM 시스템 디자인 가이드 (Design Guide)
본 문서는 ITAM(IT Asset Management System)의 시각적 일관성과 사용자 경험을 유지하기 위한 핵심 디자인 원칙을 정의합니다.
1. 디자인 철학 (Design Philosophy)
- Minimalist & Stark: Vercel 스타일의 극도로 간결하고 현대적인 디자인을 지향합니다.
- Achromatic Base: 블랙(#171717)과 화이트를 기본으로 하며, 정보의 구분은 얇은 헤어라인(#ebebeb)을 사용합니다.
- Fluid & Responsive: 고정된 픽셀 대신 화면 크기에 비례하여 UI 밀도가 변하는 유동적 스케일링 시스템을 적용합니다.
2. 타이포그래피 및 자간 (Typography & Letter-spacing)
- Font Family:
Pretendard단일 폰트를 사용합니다. - Letter-spacing: 모든 텍스트에
-0.02em(-2%) 자간을 적용하여 밀도 있는 가독성을 확보합니다. - Typography Scale:
- XS:
clamp(10px, 1.2vmin + 0.2vw, 15px)- 보조 텍스트 - SM:
clamp(12px, 1.4vmin + 0.3vw, 18px)- 필터, 일반 라벨, 테이블 헤더 - Base:
clamp(14px, 1.6vmin + 0.4vw, 22px)- 본문, 테이블 데이터 - MD:
clamp(18px, 2.5vmin + 0.5vw, 30px)- 섹션 소제목 - LG:
clamp(24px, 4vmin + 0.6vw, 48px)- 페이지 대제목 - XL:
clamp(32px, 6vmin + 0.8vw, 72px)- 핵심 통계 지표
- XS:
- Layout Units:
- Header Height:
clamp(50px, 8vmin, 90px) - Base Spacing:
clamp(0.75rem, 3vmin, 3rem) - Radius:
clamp(6px, 1.5vmin, 16px)
- Header Height:
3. 컬러 팔레트 (Vercel Stark Palette)
- Primary:
#171717(Stark Black) - 텍스트, 주요 버튼, 강조 요소. - Secondary:
#888888(Mute) - 보조 텍스트, 비활성 아이콘. - Border:
#ebebeb(Hairline) - 정보 구분선. - Background:
#ffffff(Canvas),#fafafa(Soft),#f5f5f5(Soft 2). - Accents: Blue(
#0070f3), Orange(#f5a623), Danger(#ee0000).
4. 컴포넌트 및 레이아웃 규칙 (Component Rules)
- Header & Navigation:
- 상단 1열 통합 바 형태를 유지하며, GNB와 LNB를 동일 라인에 배치하여 공간을 효율적으로 사용합니다.
- Unified Filter Bar:
- 검색창과 필터는 상단 타이틀 바로 아래(기존 액션 버튼 라인)까지 올려서 배치합니다.
- Action Group: '자산 추가', '부품 마스터' 등의 주요 액션 버튼은 검색창과 같은 라인의 최우측에 정렬합니다.
- Dashboard:
- Single-Screen View: 19201080(또는 1920919) 해상도에서 스크롤 없이 한 화면에 핵심 정보가 모두 보이도록 최적화합니다.
- Fixed Charts: 차트 내부 숫자나 요소에 애니메이션(
animation: false) 및 플로팅 레이블을 배제하여 정적인 안정성을 확보합니다.
- Footer:
- 화면 최하단에 위치하며, 텍스트는 **우측 정렬(Right-aligned)**합니다.
- 상단에 1px 헤어라인 구분선을 가집니다.
- Security & UX:
- Text Selection: 사용자의 실수에 의한 UI 드래그 방지를 위해 입력창(
input,textarea)을 제외한 전체 영역의 텍스트 선택을 차단합니다. - View Toggle: '서버' 탭 등 특정 탭에서만 '목록보기' 체크박스를 통해 뷰를 전환하며, 그 외 화면은 리스트 중심의 UI를 제공합니다.
- Text Selection: 사용자의 실수에 의한 UI 드래그 방지를 위해 입력창(