zioinfo-mail/.claude/skills/ui-overhaul-orchestrator/SKILL.md

name	description
ui-overhaul-orchestrator	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
• "색상 하나만 바꿔줘" → 직접 편집