df375c83c0
Agents: - ui-scout: Playwright MCP + Variant(variant.com/community) visual capture - design-system-architect: unified design tokens (CSS vars / RN StyleSheet) - component-refactor-engineer: per-system component refactoring - visual-qa-tester: before/after screenshot comparison Skills: - ui-overhaul-orchestrator: E2E pipeline (capture->tokens->refactor->QA) - playwright-visual-capture: Playwright MCP + Variant workflow - design-token-system: tokens.css with Pretendard, 4px grid, brand colors - component-refactor: Button/Card/Badge patterns for 4 systems Bot: /design capture|variant|tokens|homepage|itsm|manager|app|qa|ab Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
171 lines
5.2 KiB
Markdown
171 lines
5.2 KiB
Markdown
---
|
||
name: ui-overhaul-orchestrator
|
||
description: "zio 전체 시스템(홈페이지·ITSM·Manager·Messenger) UI 전면 개편 오케스트레이터. Playwright MCP로 현재 UI 캡처 → Variant에서 디자인 레퍼런스 수집 → 통합 디자인 토큰 설계 → 시스템별 컴포넌트 리팩토링 → Before/After 시각적 QA를 파이프라인으로 조율한다. 다음 상황에서 반드시 사용: (1) 'UI 전면 개편', '디자인 개편', '전체 디자인 바꿔줘'; (2) 'Variant에서 디자인 찾아서 적용', 'tokens.css 만들어줘'; (3) '홈페이지/ITSM/Manager/Messenger 디자인 현대화'; (4) 'Before/After 비교', '시각적 QA'; (5) 다시 실행, 업데이트, 수정, 보완."
|
||
---
|
||
|
||
# zio UI 전면 개편 오케스트레이터
|
||
|
||
**문서 참조:** `manual/99. 디자인 전면 개편.md`
|
||
**실행 모드:** 파이프라인 — ui-scout → design-system-architect → component-refactor-engineer → visual-qa-tester
|
||
|
||
---
|
||
|
||
## Phase 0: 컨텍스트 확인
|
||
|
||
```
|
||
design-overhaul/ 폴더 존재 여부 확인
|
||
├── before/ 있음 → Phase 2부터 (캡처 완료)
|
||
├── tokens/ 있음 → Phase 3부터 (토큰 완료)
|
||
├── after/ 있음 → Phase 4만 (QA 단계)
|
||
└── 없음 → Phase 1부터 전체 실행
|
||
```
|
||
|
||
---
|
||
|
||
## Phase 1: 현황 캡처 (ui-scout + playwright-visual-capture 스킬)
|
||
|
||
**실행 모드: 서브 에이전트**
|
||
|
||
```
|
||
[ui-scout]
|
||
1. Playwright MCP → 4개 시스템 Before 스크린샷
|
||
- https://zioinfo.co.kr (홈페이지 6개 페이지)
|
||
- https://zioinfo.co.kr:8443 (ITSM 5개 화면)
|
||
- https://zioinfo.co.kr:8090 (Manager 4개 화면)
|
||
- 모바일: 375px 반응형
|
||
|
||
2. Playwright MCP → Variant 탐색
|
||
- navigate: https://variant.com/community (이미 로그인)
|
||
- 키워드별 디자인 옵션 캡처:
|
||
· "enterprise dashboard modern"
|
||
· "corporate IT landing page"
|
||
· "admin console sidebar"
|
||
· "mobile monitoring app"
|
||
|
||
3. 개편 방향 도출 → design-system-architect에게 전달
|
||
```
|
||
|
||
저장: `C:\GUARDiA\design-overhaul\before\` + `variant\`
|
||
|
||
---
|
||
|
||
## Phase 2: 디자인 토큰 설계 (design-system-architect + design-token-system 스킬)
|
||
|
||
**실행 모드: 서브 에이전트**
|
||
|
||
```
|
||
[design-system-architect]
|
||
1. Variant 레퍼런스에서 색상·타이포·간격 추출
|
||
2. zio 브랜드 색상 (#0051A2, #00A3E0) 반영
|
||
3. tokens.css 생성 → 4개 시스템 공통
|
||
|
||
산출물:
|
||
- workspace/zioinfo-web/frontend/src/styles/tokens.css
|
||
- itsm/static/tokens.css
|
||
- manager/frontend/src/styles/tokens.css
|
||
- app/constants/tokens.ts
|
||
```
|
||
|
||
---
|
||
|
||
## Phase 3: 컴포넌트 리팩토링 (component-refactor-engineer + component-refactor 스킬)
|
||
|
||
**실행 모드: 에이전트 팀 (4개 시스템 병렬)**
|
||
|
||
```
|
||
[component-refactor-engineer × 4 — 병렬]
|
||
|
||
홈페이지 담당:
|
||
- tokens.css import 추가 (global.css)
|
||
- Header.jsx 현대화 (고정 헤더 + 블러 배경)
|
||
- Hero 섹션 재설계 (그라디언트 + 애니메이션)
|
||
- 카드·버튼·폼 토큰 적용
|
||
- Company.jsx 타임라인 개선
|
||
|
||
ITSM 담당:
|
||
- tokens.css → style.css @import
|
||
- 사이드바 아이콘+텍스트 슬라이드 애니메이션
|
||
- 대시보드 카드 그림자·반경 토큰 적용
|
||
- 테이블 호버·정렬 UX 개선
|
||
|
||
Manager 담당:
|
||
- tokens.css 통합
|
||
- Sidebar.tsx 활성 상태 + 그룹 헤더
|
||
- StatCard.tsx 변화율·아이콘 추가
|
||
- Dashboard.tsx 차트 색상 토큰화
|
||
|
||
Messenger 담당:
|
||
- tokens.ts 생성
|
||
- components/ui/ 폴더: Button, Card, Badge
|
||
- 탭바 아이콘 filled/outlined 교체
|
||
- 대시보드 카드 레이아웃
|
||
```
|
||
|
||
---
|
||
|
||
## Phase 4: 시각적 QA (visual-qa-tester + playwright-visual-capture 스킬)
|
||
|
||
**실행 모드: 서브 에이전트**
|
||
|
||
```
|
||
[visual-qa-tester]
|
||
1. After 스크린샷 캡처 (Playwright MCP)
|
||
- 1440px / 768px / 375px 반응형 3단계
|
||
2. Before vs After 나란히 비교 이미지 생성
|
||
3. 디자인 토큰 준수 검증
|
||
4. 이슈 발견 → component-refactor-engineer에게 수정 요청
|
||
5. QA 리포트 생성 → manual/ 폴더 저장
|
||
```
|
||
|
||
저장: `C:\GUARDiA\design-overhaul\after\` + `compare\`
|
||
|
||
---
|
||
|
||
## Phase 5: 배포
|
||
|
||
```
|
||
홈페이지:
|
||
python C:\GUARDiA\deploy_full.py
|
||
|
||
ITSM:
|
||
paramiko SSH → rsync itsm/static/ → systemctl restart guardia
|
||
|
||
Manager:
|
||
npm run build → sftp upload → systemctl restart guardia-manager
|
||
```
|
||
|
||
---
|
||
|
||
## 시스템별 개편 우선순위
|
||
|
||
| 순위 | 시스템 | 핵심 페이지 | 예상 공수 |
|
||
|------|--------|------------|---------|
|
||
| 1 | 홈페이지 | 메인·GUARDiA 소개·연혁 | 1일 |
|
||
| 2 | ITSM | 대시보드·사이드바·SR목록 | 1일 |
|
||
| 3 | Manager | 대시보드·사이드바 | 0.5일 |
|
||
| 4 | Messenger | 탭바·대시보드·카드 | 1일 |
|
||
|
||
---
|
||
|
||
## 테스트 시나리오
|
||
|
||
**정상:** Variant 탐색 → 토큰 확정 → 홈페이지 Before/After 비교 → 배포
|
||
**에러:** 개편 후 반응형 깨짐 → 375px 스크린샷 확인 → CSS 수정 → 재캡처
|
||
|
||
---
|
||
|
||
## should-trigger
|
||
|
||
- "홈페이지 UI 전면 개편해줘"
|
||
- "Variant에서 디자인 찾아서 적용해줘"
|
||
- "4개 시스템 디자인 통일해줘"
|
||
- "tokens.css 만들고 전체 적용해줘"
|
||
- "Before After 비교 스크린샷 찍어줘"
|
||
- "버튼/카드 스타일 통일해줘"
|
||
|
||
## should-NOT-trigger
|
||
|
||
- "새 기능 추가" → guardia-orchestrator
|
||
- "배포만 해줘" → deploy-pipeline
|
||
- "색상 하나만 바꿔줘" → 직접 편집
|