# GUARDiA ITSM — Nifty 스타일 UI 가이드
> 참조: https://preview.themeon.net/nifty/
> 적용 버전: GUARDiA ITSM 2.0
---
## 1. 레이아웃 구조
```
┌─────────────────────────────────────────────────────┐
│ #topbar [로고] [검색] [알림] [사용자] [다크/라이트] │
├──────────┬──────────────────────────────────────────┤
│ │ #content-header (빵크럼 + 페이지 제목) │
│ #sidebar │──────────────────────────────────────────│
│ (250px) │ │
│ 계층형 │ #main-content │
│ 메뉴 │ (페이지별 뷰 컨텐츠) │
│ │ │
└──────────┴──────────────────────────────────────────┘
│ #footer Copyright © 2026 GUARDiA All Rights Reserved │
└─────────────────────────────────────────────────────┘
```
---
## 2. 사이드바 메뉴 계층 구조
```
GUARDiA ITSM
├── 📊 대시보드
│ ├── 운영 현황 (SR/SLA/인시던트)
│ ├── 인프라 현황 (서버/CMDB)
│ ├── 보안 현황
│ └── AI 인사이트
│
├── 🗂️ SR 관리 (서비스 요청)
│ ├── SR 목록
│ ├── 칸반 보드
│ ├── 대량 처리
│ └── SLA 위반 현황
│
├── 🏗️ PMS (프로젝트 관리) ← 신규 서브메뉴
│ ├── 프로젝트 목록
│ ├── WBS 관리
│ ├── 산출물 관리
│ ├── 이슈 관리
│ ├── 위험 관리
│ ├── 변경 요청
│ ├── 마일스톤
│ └── 보고서
│ ├── 일일 보고
│ ├── 주간 보고
│ └── 월간 보고
│
├── 🖥️ 인프라
│ ├── CMDB
│ ├── 서버 관리
│ └── 기관/사이트
│
├── 🔐 보안
│ ├── 취약점 스캔
│ ├── PAM (특권 접근)
│ ├── 감사 로그
│ └── 시큐어코딩 점검 ← 신규
│
├── 🤖 AI 운영
│ ├── 에이전트 현황
│ ├── 이상 탐지
│ ├── 예측 유지보수
│ └── 학습 루프
│
├── 📡 모니터링
│ ├── Scouter APM
│ ├── SSL 만료
│ └── 성능 테스트 (JMeter) ← 신규
│
├── ⚙️ 운영
│ ├── 배포 파이프라인
│ ├── 배치 작업
│ ├── On-Call 로테이션
│ └── 작업 타임테이블
│
├── 📚 지식관리
│ ├── KB 문서
│ └── 챗봇
│
└── 🔧 시스템 설정
├── 사용자 관리
├── LDAP/SSO
├── 라이선스
└── 공공기관 체크리스트 ← 신규
```
---
## 3. Nifty 스타일 핵심 CSS 변수
```css
/* 다크 테마 (기본) */
:root[data-theme="dark"] {
--sidebar-bg: #1a1f2e;
--sidebar-hover: rgba(255,255,255,.06);
--sidebar-active: #4f8ef7;
--accent: #818cf8;
--accent-hover: #6366f1;
--surface: #1e2333;
--surface-2: #252b3b;
--border: rgba(255,255,255,.08);
--text-bright: #f1f5f9;
--text-muted: #64748b;
--topbar-bg: #141824;
}
/* 라이트 테마 */
:root[data-theme="light"] {
--sidebar-bg: #1e2333; /* 사이드바는 다크 유지 */
--surface: #f8fafc;
--surface-2: #ffffff;
--border: #e2e8f0;
--text-bright: #1e293b;
--text-muted: #64748b;
--topbar-bg: #ffffff;
}
```
---
## 4. 서브메뉴 (아코디언) 구현
```html
```
```css
.nav-group-header {
display: flex; align-items: center; gap: 8px;
padding: 10px 16px; cursor: pointer;
color: var(--text-muted); font-size: 12px; font-weight: 600;
text-transform: uppercase; letter-spacing: .5px;
}
.nav-group-header:hover { color: var(--text-bright); }
.nav-group-body { display: none; padding: 0 0 4px 36px; }
.nav-group-body.open { display: block; }
.nav-sub-item {
display: block; padding: 7px 12px; font-size: 13px;
color: var(--text-muted); text-decoration: none; border-radius: 6px;
}
.nav-sub-item:hover, .nav-sub-item.active {
background: var(--sidebar-hover); color: var(--text-bright);
}
.nav-arrow { margin-left: auto; transition: transform .2s; }
.nav-group-header.open .nav-arrow { transform: rotate(180deg); }
```
---
## 5. 상단 탑바 구성
```html
```
---
## 6. 페이지 탭 (서브페이지 내부 탭)
```html
```
```css
.page-tabs {
display: flex; gap: 2px; border-bottom: 2px solid var(--border);
margin-bottom: 20px; overflow-x: auto;
}
.page-tab {
padding: 10px 20px; background: none; border: none;
color: var(--text-muted); font-size: 13px; font-weight: 600;
cursor: pointer; border-bottom: 3px solid transparent;
margin-bottom: -2px; white-space: nowrap;
}
.page-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
```
---
## 7. 카드 컴포넌트
```html
```
---
## 8. 반응형 브레이크포인트
| 해상도 | 사이드바 | 레이아웃 |
|--------|---------|---------|
| ≥1280px | 250px 고정 | 2열 그리드 가능 |
| 768~1280px | 60px (아이콘만) | 1열 |
| < 768px | 오버레이 (토글) | 모바일 전용 |
---
## 9. 적용 우선순위
1. **즉시 적용**: 탑바 + 사이드바 아코디언 메뉴 (`index.html` + `style.css`)
2. **1주일 내**: PMS 서브탭 페이지 (`si.html` 확장)
3. **2주 내**: 보안/모니터링 전용 페이지 UI 통일
---
## 10. Copyright 표기 위치
- **사이드바 하단**: `Copyright © 2026 GUARDiA All Rights Reserved.`
- **로그인 페이지**: 로고 이미지 + Copyright
- **출력 보고서**: 모든 Excel/PDF/PPTX 하단
- **API 응답 헤더**: `X-Powered-By: GUARDiA ITSM 2.0`
```python
# FastAPI 미들웨어로 응답 헤더 추가
@app.middleware("http")
async def add_copyright_header(request, call_next):
response = await call_next(request)
response.headers["X-Powered-By"] = "GUARDiA ITSM 2.0 | Copyright 2026"
return response
```