harang-ai
5e6c7085d3
- DESIGN-SYSTEM.md: 색상/타이포/컴포넌트/반응형 규칙 - 6개 페이지 디자인 문서 재작성 (대시/프로젝트/자매/설정/활동로그/조직도) - 관리자 페이지 디자인 가이드 - 원본 HTML 참조 파일 6개 - glassmorphism → 미니멀 터미널 UI - 모바일 breakpoint: 768px/767px
151 lines
5.0 KiB
Markdown
151 lines
5.0 KiB
Markdown
# 하나랑 대시보드 — 디자인 시스템 v2
|
||
|
||
## 디자인 철학
|
||
미니멀 터미널 UI. 장식 최소화, 정보 밀도 최대화.
|
||
glassmorphism 제거 → 1px 보더 카드 + 모노스페이스 라벨.
|
||
|
||
---
|
||
|
||
## 색상 (Color Tokens)
|
||
|
||
| Token | Value | 용도 |
|
||
|-------|-------|------|
|
||
| `--bg-main` | `#151515` | 전체 배경 |
|
||
| `--bg-surface` | `#151515` | 카드/패널 배경 (배경과 동일, 보더로 구분) |
|
||
| `--bg-input` | `#1a1a1a` | 인풋/검색 배경 |
|
||
| `--bg-code` | `#0d0d0d` | 로그 테이블/코드 블록 배경 |
|
||
| `--text-primary` | `#F5F5F5` | 주 텍스트 |
|
||
| `--text-secondary` | `#8A8A8A` | 보조 텍스트, 라벨 |
|
||
| `--border-color` | `#333333` | 카드 보더, 구분선 |
|
||
| `--border-hover` | `#555555` | hover 시 보더 |
|
||
| `--accent-hover` | `#FFFFFF` | 네비 active, 강조 |
|
||
|
||
### 상태 색상 (조직도 전용)
|
||
| Token | Value | 용도 |
|
||
|-------|-------|------|
|
||
| `--level-high` | `#f43f5e` | 최상위/긴급 |
|
||
| `--level-mid` | `#3b82f6` | 중간/R&D |
|
||
| `--level-low` | `#10b981` | 하위/운영 |
|
||
| `--level-none` | `#525252` | 비활성 |
|
||
|
||
### 로그 태그 색상
|
||
| Tag | Color |
|
||
|-----|-------|
|
||
| SYSTEM | `#888` |
|
||
| SECURITY | `#ff5f5f` |
|
||
| ORG | `#5fafff` |
|
||
| BACKUP | `#5fff8a` |
|
||
|
||
### 상태 표시 색상
|
||
| Status | Color |
|
||
|--------|-------|
|
||
| PASS / 성공 | `#00FF00` |
|
||
| ACTIVE dot | `#FFF` + `box-shadow: 0 0 8px rgba(255,255,255,0.3)` |
|
||
| INACTIVE dot | `#555` |
|
||
|
||
---
|
||
|
||
## 타이포그래피
|
||
|
||
| 용도 | Font | Size | Weight |
|
||
|------|------|------|--------|
|
||
| 본문 | `--font-sans` | 14px | 400 |
|
||
| 페이지 제목 | `--font-sans` | 28px | 600 |
|
||
| 섹션 제목 | `--font-sans` | 14px | 600 |
|
||
| 라벨 (label-meta) | `--font-sans` | 11px | 700, uppercase |
|
||
| 브라켓 값 | `--font-sans` | 32px | 600 |
|
||
| 타임스탬프 | `--font-mono` | 11px | 400 |
|
||
| 로그 텍스트 | `--font-mono` | 12px | 400 |
|
||
| 브라켓 인풋 | `--font-mono` | 14px | 400 |
|
||
| 뱃지 | `--font-mono` | 9px | 400, uppercase |
|
||
|
||
**폰트 스택:**
|
||
- `--font-sans`: `-apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif`
|
||
- `--font-mono`: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace`
|
||
|
||
---
|
||
|
||
## 스페이싱
|
||
|
||
| Token | Value |
|
||
|-------|-------|
|
||
| `--space-xs` | 4px |
|
||
| `--space-sm` | 8px |
|
||
| `--space-md` | 16px |
|
||
| `--space-lg` | 24px |
|
||
| `--space-xl` | 40px |
|
||
| `--space-xxl` | 64px |
|
||
|
||
---
|
||
|
||
## 컴포넌트
|
||
|
||
### Sidebar
|
||
- 너비: 240px (데스크톱), 64px (모바일 아이콘 모드)
|
||
- `border-right: 1px solid var(--border-color)`
|
||
- `position: sticky; top: 0; height: 100vh`
|
||
- 로고: ● + ◗ (circle-full + circle-half)
|
||
- 네비 active: `[대시]` 브라켓 표기 + 흰색 텍스트
|
||
- 네비 inactive: `#8A8A8A`
|
||
- 메뉴: 대시, 활동, 프로, 자매, 조직, 설정, 관리
|
||
|
||
### Card (상태 카드)
|
||
- `border: 1px solid var(--border-color)`
|
||
- `background: var(--bg-surface)`
|
||
- `padding: var(--space-lg)`
|
||
- hover: `border-color: #555`
|
||
- 내부: header(SYS:이름) + bracket-value([ON]) + label + tech-bar
|
||
|
||
### Tech Bar (진행 바)
|
||
- `height: 2px; background: var(--border-color)`
|
||
- fill: `background: var(--text-primary)`
|
||
|
||
### Timeline
|
||
- 왼쪽 세로선: `left: 3px; width: 1px; background: var(--border-color)`
|
||
- 도트: `width: 7px; height: 7px; border: 1px solid var(--text-primary); border-radius: 50%`
|
||
|
||
### Toggle Switch
|
||
- 34x18px, border 1px
|
||
- checked: border `var(--text-primary)`, dot 흰색
|
||
|
||
### Bracket Input
|
||
- `[ value ]` 형태, mono font
|
||
- 투명 배경, 포커스 시 흰색 텍스트
|
||
|
||
### Button
|
||
- 기본: 투명 + 보더, uppercase 12px
|
||
- primary: 흰색 배경 + 검정 텍스트, hover 반전
|
||
- toggle: fit-content, 11px, active 시 흰색 배경
|
||
|
||
### Log Table
|
||
- 배경: `#0d0d0d`, border 1px
|
||
- th: 11px uppercase, `--text-secondary`
|
||
- td: 12px mono, hover 배경 `#1a1a1a`
|
||
|
||
### Terminal Card (조직도)
|
||
- `border-left: 3px solid` (레벨별 색상)
|
||
- `box-shadow: 0 10px 30px rgba(0,0,0,0.5)`
|
||
- 뱃지: 9px mono, `#1a1a1a` 배경
|
||
|
||
---
|
||
|
||
## 반응형 (Breakpoints)
|
||
|
||
| Breakpoint | 화면 | 변경 사항 |
|
||
|------------|------|-----------|
|
||
| `≥1200px` | Desktop | 기본 레이아웃 |
|
||
| `768–1199px` | Tablet | 사이드바 64px 아이콘 모드, 카드 2열, 2열 그리드→1열 |
|
||
| `≤767px` | Mobile | 사이드바 하단 탭바, 카드 1열, 노드 엔트리 수직 스택, 테이블 카드 변환 |
|
||
|
||
### Mobile 세부 규칙
|
||
1. **사이드바 → 하단 탭바**: 고정 하단, 아이콘+짧은 라벨, `height: 56px`
|
||
2. **상태 카드 그리드**: `grid-template-columns: repeat(2, 1fr)` → `1fr` (모바일)
|
||
3. **data-columns (대시 하단)**: `1.5fr 1fr` → `1fr` 수직 스택
|
||
4. **project-grid (프로젝트 상세)**: `1fr 320px` → `1fr` 수직 스택
|
||
5. **node-entry (자매 관리)**: 3열 가로 → 수직 스택
|
||
6. **settings-grid**: 2열 → 1열
|
||
7. **log-table**: 가로 스크롤 또는 카드 형태 변환
|
||
8. **조직도 tree**: 수평 스크롤 + 핀치 줌
|
||
9. **padding 축소**: `--space-xxl` → `--space-lg`, `--space-xl` → `--space-md`
|
||
10. **bracket-value 크기**: 32px → 24px (모바일)
|