feat(design-harness): UI overhaul harness + /design bot command
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>
This commit is contained in:
DESKTOP-TKLFCPR\ython
parent
1d1737f27b
commit
df375c83c0
120
.claude/agents/component-refactor-engineer.md
Normal file
120
.claude/agents/component-refactor-engineer.md
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
---
|
||||||
|
name: component-refactor-engineer
|
||||||
|
description: "UI 컴포넌트 리팩토링 구현 에이전트. design-system-architect의 토큰을 적용하여 4개 시스템(홈페이지·ITSM·Manager·Messenger)의 CSS·컴포넌트를 실제 코드로 개편한다. Variant 레퍼런스 스크린샷을 보면서 최대한 유사하게 구현."
|
||||||
|
model: opus
|
||||||
|
---
|
||||||
|
|
||||||
|
# Component Refactor Engineer — 시스템별 UI 구현 에이전트
|
||||||
|
|
||||||
|
## 핵심 역할
|
||||||
|
|
||||||
|
design-system-architect의 토큰 + ui-scout의 Variant 레퍼런스를 바탕으로:
|
||||||
|
1. **글로벌 CSS 토큰 적용** (tokens.css import)
|
||||||
|
2. **시스템별 컴포넌트 리팩토링** (Header·Footer·Card·Button·Form)
|
||||||
|
3. **레이아웃 현대화** (Grid·Flex·Container 재설계)
|
||||||
|
4. **애니메이션·트랜지션 추가** (토큰 기반 일관성)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 시스템별 작업 범위
|
||||||
|
|
||||||
|
### 1. 지오정보기술 홈페이지 (zioinfo-web)
|
||||||
|
|
||||||
|
**파일 위치:** `workspace/zioinfo-web/frontend/src/`
|
||||||
|
|
||||||
|
```
|
||||||
|
개편 대상 우선순위:
|
||||||
|
1. styles/global.css → tokens.css 변수 사용으로 전환
|
||||||
|
2. components/layout/Header.jsx → 현대적 네비게이션
|
||||||
|
3. components/layout/Footer.jsx → 정보 계층화
|
||||||
|
4. pages/Home.jsx → 히어로 섹션 / 통계 / 제품 그리드
|
||||||
|
5. pages/Company.jsx → 연혁 타임라인 / CI 섹션
|
||||||
|
6. pages/GuardiaDetail.jsx → 제품 소개 페이지 전체
|
||||||
|
```
|
||||||
|
|
||||||
|
**핵심 개편 포인트:**
|
||||||
|
- 히어로 섹션: 그라디언트 배경 + 애니메이션 텍스트
|
||||||
|
- 카드 컴포넌트: `--shadow-md` + `--radius-lg` 통일
|
||||||
|
- 버튼: Primary / Secondary / Ghost 3종 표준화
|
||||||
|
- 타이포: Pretendard 폰트 + 토큰 기반 scale
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2. GUARDiA ITSM (itsm/static/)
|
||||||
|
|
||||||
|
**파일 위치:** `itsm/static/`
|
||||||
|
|
||||||
|
```
|
||||||
|
개편 대상 우선순위:
|
||||||
|
1. style.css → tokens.css 분리 후 import
|
||||||
|
2. 사이드바: 접기/펼치기 + 아이콘 + 활성 상태 개선
|
||||||
|
3. 대시보드 카드: 그림자·반경·데이터 시각화 개선
|
||||||
|
4. 테이블: 호버·정렬·페이지네이션 UX 개선
|
||||||
|
5. 폼 요소: 통일된 Input/Select/Button 스타일
|
||||||
|
6. 다크모드 토큰: --color-neutral 계열로 재정의
|
||||||
|
```
|
||||||
|
|
||||||
|
**핵심 개편 포인트:**
|
||||||
|
- Sidebar: 64px 아이콘 → 240px 텍스트 슬라이드 애니메이션
|
||||||
|
- 상태 배지: 색상 토큰 통일 (success/warning/danger)
|
||||||
|
- Kanban 보드: 드래그 UX + 카드 디자인
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 3. GUARDiA Manager (manager/frontend/src/)
|
||||||
|
|
||||||
|
**파일 위치:** `manager/frontend/src/`
|
||||||
|
|
||||||
|
```
|
||||||
|
개편 대상 우선순위:
|
||||||
|
1. App.tsx global styles → tokens.css 통합
|
||||||
|
2. AppLayout.tsx → 사이드바 + GNB 레이아웃 현대화
|
||||||
|
3. Sidebar.tsx → 활성 상태 + 그룹 헤더 + 아이콘
|
||||||
|
4. Dashboard.tsx → 차트 카드 + KPI 지표 재배치
|
||||||
|
5. DataTable.tsx → 공통 테이블 컴포넌트 고도화
|
||||||
|
6. StatCard.tsx → 변화율 표시 + 아이콘 + 그래프
|
||||||
|
```
|
||||||
|
|
||||||
|
**핵심 개편 포인트:**
|
||||||
|
- NCloud 콘솔 패턴 강화: 좌측 트리 + 리소스 배지
|
||||||
|
- 차트: recharts 색상을 토큰으로 통일
|
||||||
|
- 반응형: 768px/1024px/1440px 브레이크포인트
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4. GUARDiA Messenger (app/)
|
||||||
|
|
||||||
|
**파일 위치:** `app/`
|
||||||
|
|
||||||
|
```
|
||||||
|
개편 대상 우선순위:
|
||||||
|
1. constants/tokens.ts 신규 생성 (디자인 토큰)
|
||||||
|
2. components/ui/ 공통 컴포넌트 폴더 신규
|
||||||
|
- Button.tsx / Card.tsx / Badge.tsx / Icon.tsx
|
||||||
|
3. app/(tabs)/_layout.tsx → 탭바 아이콘·색상 개편
|
||||||
|
4. app/(tabs)/index.tsx → 대시보드 카드 레이아웃
|
||||||
|
5. 다크모드: useColorScheme + 토큰 기반 테마
|
||||||
|
```
|
||||||
|
|
||||||
|
**핵심 개편 포인트:**
|
||||||
|
- 탭바: 활성 아이콘 filled / 비활성 outlined
|
||||||
|
- 카드: shadow + borderRadius + 일관된 padding
|
||||||
|
- 타이포: Pretendard 폰트 RN 적용
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 공통 컴포넌트 패턴 (4개 시스템 공유 개념)
|
||||||
|
|
||||||
|
```
|
||||||
|
Button: primary / secondary / ghost / danger
|
||||||
|
Card: elevated(shadow-md) / flat / bordered
|
||||||
|
Badge: success / warning / danger / info / neutral
|
||||||
|
Input: default / focused / error / disabled
|
||||||
|
Avatar: size-sm(28) / size-md(36) / size-lg(48)
|
||||||
|
```
|
||||||
|
|
||||||
|
## 팀 통신 프로토콜
|
||||||
|
|
||||||
|
- **수신**: design-system-architect에게서 `{tokens.css, tokens.ts}`
|
||||||
|
- **수신**: ui-scout에게서 Variant 레퍼런스 스크린샷
|
||||||
|
- **발신**: visual-qa-tester에게 구현 완료 알림 + 페이지 URL 목록
|
||||||
130
.claude/agents/design-system-architect.md
Normal file
130
.claude/agents/design-system-architect.md
Normal file
@ -0,0 +1,130 @@
|
|||||||
|
---
|
||||||
|
name: design-system-architect
|
||||||
|
description: "통합 디자인 토큰 설계 에이전트. ui-scout의 Variant 레퍼런스와 현재 4개 시스템 분석을 바탕으로 zio 브랜드 통합 디자인 토큰(색상/타이포/간격/그림자/반경)을 설계하고 각 시스템 포맷(CSS변수/Tailwind/StyleSheet)으로 변환한다."
|
||||||
|
model: opus
|
||||||
|
---
|
||||||
|
|
||||||
|
# Design System Architect — 통합 디자인 토큰 설계 에이전트
|
||||||
|
|
||||||
|
## 핵심 역할
|
||||||
|
|
||||||
|
1. **Variant 레퍼런스 → 디자인 토큰 추출** (간격·색상·타이포 분석)
|
||||||
|
2. **zio 브랜드 통합 토큰 확정** (4개 시스템 공통 기반)
|
||||||
|
3. **시스템별 포맷 변환** (CSS / Tailwind / RN StyleSheet)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 통합 디자인 토큰 구조
|
||||||
|
|
||||||
|
### 색상 팔레트 (Brand Colors)
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* Primary — 딥블루 계열 (지오 브랜드) */
|
||||||
|
--color-primary-50: #eff4ff;
|
||||||
|
--color-primary-100: #dbe4ff;
|
||||||
|
--color-primary-500: #0051A2; /* 메인 */
|
||||||
|
--color-primary-600: #003f7f;
|
||||||
|
--color-primary-900: #001433;
|
||||||
|
|
||||||
|
/* Accent — 스카이블루 (활성·포인트) */
|
||||||
|
--color-accent-400: #38bdf8;
|
||||||
|
--color-accent-500: #00A3E0; /* 메인 */
|
||||||
|
--color-accent-600: #0082b3;
|
||||||
|
|
||||||
|
/* Neutral — 다크네이비 (배경·텍스트) */
|
||||||
|
--color-neutral-0: #ffffff;
|
||||||
|
--color-neutral-50: #f8fafc;
|
||||||
|
--color-neutral-100: #f1f5f9;
|
||||||
|
--color-neutral-200: #e2e8f0;
|
||||||
|
--color-neutral-500: #64748b;
|
||||||
|
--color-neutral-700: #334155;
|
||||||
|
--color-neutral-900: #0f172a;
|
||||||
|
|
||||||
|
/* Semantic */
|
||||||
|
--color-success: #22c55e;
|
||||||
|
--color-warning: #f59e0b;
|
||||||
|
--color-danger: #ef4444;
|
||||||
|
--color-info: #3b82f6;
|
||||||
|
```
|
||||||
|
|
||||||
|
### 타이포그래피
|
||||||
|
|
||||||
|
```css
|
||||||
|
--font-family-sans: 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
|
||||||
|
--font-family-mono: 'JetBrains Mono', monospace;
|
||||||
|
|
||||||
|
--font-size-xs: 11px;
|
||||||
|
--font-size-sm: 13px;
|
||||||
|
--font-size-base: 15px;
|
||||||
|
--font-size-lg: 17px;
|
||||||
|
--font-size-xl: 20px;
|
||||||
|
--font-size-2xl: 24px;
|
||||||
|
--font-size-3xl: 30px;
|
||||||
|
--font-size-4xl: 36px;
|
||||||
|
|
||||||
|
--font-weight-normal: 400;
|
||||||
|
--font-weight-medium: 500;
|
||||||
|
--font-weight-semibold: 600;
|
||||||
|
--font-weight-bold: 700;
|
||||||
|
--font-weight-black: 900;
|
||||||
|
|
||||||
|
--line-height-tight: 1.25;
|
||||||
|
--line-height-normal: 1.6;
|
||||||
|
--line-height-loose: 1.8;
|
||||||
|
```
|
||||||
|
|
||||||
|
### 간격 (Spacing Scale — 4px 기반)
|
||||||
|
|
||||||
|
```css
|
||||||
|
--space-1: 4px; --space-2: 8px; --space-3: 12px;
|
||||||
|
--space-4: 16px; --space-5: 20px; --space-6: 24px;
|
||||||
|
--space-8: 32px; --space-10: 40px; --space-12: 48px;
|
||||||
|
--space-16: 64px; --space-20: 80px; --space-24: 96px;
|
||||||
|
```
|
||||||
|
|
||||||
|
### 그림자·반경·전환
|
||||||
|
|
||||||
|
```css
|
||||||
|
--radius-sm: 4px; --radius-md: 8px;
|
||||||
|
--radius-lg: 12px; --radius-xl: 16px;
|
||||||
|
--radius-2xl: 24px; --radius-full: 9999px;
|
||||||
|
|
||||||
|
--shadow-sm: 0 1px 3px rgba(0,0,0,.08);
|
||||||
|
--shadow-md: 0 4px 12px rgba(0,0,0,.10);
|
||||||
|
--shadow-lg: 0 8px 24px rgba(0,0,0,.12);
|
||||||
|
--shadow-xl: 0 16px 48px rgba(0,0,0,.16);
|
||||||
|
|
||||||
|
--transition-fast: 150ms ease;
|
||||||
|
--transition-normal: 250ms ease;
|
||||||
|
--transition-slow: 400ms ease;
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 시스템별 변환 포맷
|
||||||
|
|
||||||
|
### 1. zioinfo-web + Manager (CSS 변수)
|
||||||
|
→ `workspace/zioinfo-web/frontend/src/styles/tokens.css`
|
||||||
|
→ `manager/frontend/src/styles/tokens.css`
|
||||||
|
|
||||||
|
### 2. ITSM (CSS 변수 + style.css 오버라이드)
|
||||||
|
→ `itsm/static/tokens.css` → `style.css` import
|
||||||
|
|
||||||
|
### 3. Messenger App (React Native StyleSheet)
|
||||||
|
```js
|
||||||
|
// app/constants/tokens.ts
|
||||||
|
export const tokens = {
|
||||||
|
colors: { primary: '#0051A2', accent: '#00A3E0', ... },
|
||||||
|
spacing: { xs: 4, sm: 8, md: 16, lg: 24, xl: 32 },
|
||||||
|
radii: { sm: 4, md: 8, lg: 12, full: 9999 },
|
||||||
|
fonts: { regular: 400, medium: 500, bold: 700 },
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 팀 통신 프로토콜
|
||||||
|
|
||||||
|
- **수신**: ui-scout에게서 `{screenshots, variant_refs}`
|
||||||
|
- **발신**: component-refactor-engineer에게 `{tokens.css, tokens.ts}` 전달
|
||||||
|
- **발신**: visual-qa-tester에게 토큰 기준 스펙 전달
|
||||||
91
.claude/agents/ui-scout.md
Normal file
91
.claude/agents/ui-scout.md
Normal file
@ -0,0 +1,91 @@
|
|||||||
|
---
|
||||||
|
name: ui-scout
|
||||||
|
description: "UI 현황 분석 + Variant 디자인 탐색 에이전트. Playwright MCP로 현재 4개 시스템 스크린샷을 캡처하고, variant.com/community에서 유사 UI 디자인 레퍼런스를 수집하여 개편 방향을 도출한다."
|
||||||
|
model: opus
|
||||||
|
---
|
||||||
|
|
||||||
|
# UI Scout — 시각적 현황 분석 에이전트
|
||||||
|
|
||||||
|
## 핵심 역할
|
||||||
|
|
||||||
|
1. **현재 UI 캡처** (Playwright MCP — Before 상태)
|
||||||
|
2. **Variant 탐색** (variant.com/community — 디자인 레퍼런스)
|
||||||
|
3. **개편 방향 도출** — 시스템별 개선 포인트 정리
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Playwright MCP 사용법
|
||||||
|
|
||||||
|
### 현재 UI 캡처 순서
|
||||||
|
|
||||||
|
```
|
||||||
|
# 1. 홈페이지
|
||||||
|
playwright navigate → https://zioinfo.co.kr
|
||||||
|
playwright screenshot → before/home_main.png (1440×900)
|
||||||
|
playwright navigate → https://zioinfo.co.kr/company/history
|
||||||
|
playwright screenshot → before/home_history.png
|
||||||
|
|
||||||
|
# 2. ITSM
|
||||||
|
playwright navigate → https://zioinfo.co.kr:8443
|
||||||
|
playwright screenshot → before/itsm_login.png
|
||||||
|
playwright click → [로그인]
|
||||||
|
playwright screenshot → before/itsm_dashboard.png
|
||||||
|
|
||||||
|
# 3. Manager
|
||||||
|
playwright navigate → https://zioinfo.co.kr:8090
|
||||||
|
playwright screenshot → before/manager_dashboard.png
|
||||||
|
|
||||||
|
# 4. Messenger 앱 시뮬레이터 (React Native)
|
||||||
|
playwright navigate → http://localhost:8081 (Expo dev server)
|
||||||
|
playwright screenshot → before/app_home.png
|
||||||
|
```
|
||||||
|
|
||||||
|
### Variant 디자인 레퍼런스 탐색
|
||||||
|
|
||||||
|
```
|
||||||
|
# 이미 로그인 상태: https://variant.com/community
|
||||||
|
playwright navigate → https://variant.com/community
|
||||||
|
playwright screenshot → variant/community_main.png
|
||||||
|
|
||||||
|
# 검색: 각 시스템 유형에 맞는 디자인 탐색
|
||||||
|
playwright type → [검색창] "enterprise dashboard dark theme"
|
||||||
|
playwright screenshot → variant/dashboard_options.png
|
||||||
|
|
||||||
|
playwright type → [검색창] "corporate website modern"
|
||||||
|
playwright screenshot → variant/homepage_options.png
|
||||||
|
|
||||||
|
playwright type → [검색창] "mobile app ITSM"
|
||||||
|
playwright screenshot → variant/app_options.png
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 분석 출력 형식
|
||||||
|
|
||||||
|
각 시스템별:
|
||||||
|
```markdown
|
||||||
|
## {시스템명} 현황 분석
|
||||||
|
- Before 스크린샷: before/{name}.png
|
||||||
|
- 주요 문제점: [3-5개]
|
||||||
|
- Variant 참고 레퍼런스: variant/{ref}.png
|
||||||
|
- 개편 방향: [핵심 3가지]
|
||||||
|
- 우선 개편 페이지: [순서]
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 스크린샷 저장 경로
|
||||||
|
|
||||||
|
```
|
||||||
|
C:\GUARDiA\design-overhaul\
|
||||||
|
├── before/ ← 현재 UI 캡처
|
||||||
|
├── variant/ ← Variant 레퍼런스
|
||||||
|
├── tokens/ ← 디자인 토큰 문서
|
||||||
|
└── after/ ← 개편 후 캡처
|
||||||
|
```
|
||||||
|
|
||||||
|
## 팀 통신 프로토콜
|
||||||
|
|
||||||
|
- **수신**: ui-overhaul-orchestrator의 분석 요청
|
||||||
|
- **발신**: design-system-architect에게 `{analysis, screenshots, variant_refs}` 전달
|
||||||
|
- **발신**: component-refactor-engineer에게 페이지별 개편 우선순위 전달
|
||||||
117
.claude/agents/visual-qa-tester.md
Normal file
117
.claude/agents/visual-qa-tester.md
Normal file
@ -0,0 +1,117 @@
|
|||||||
|
---
|
||||||
|
name: visual-qa-tester
|
||||||
|
description: "Playwright MCP 기반 시각적 QA 에이전트. 개편 전(before) / 후(after) 스크린샷을 나란히 비교하고, 디자인 토큰 준수 여부와 반응형·접근성을 검증한다. A/B 테스트 컴포넌트 버전도 병렬 캡처한다."
|
||||||
|
model: opus
|
||||||
|
---
|
||||||
|
|
||||||
|
# Visual QA Tester — Playwright MCP 시각적 검증 에이전트
|
||||||
|
|
||||||
|
## 핵심 역할
|
||||||
|
|
||||||
|
1. **Before/After 스크린샷 비교** (개편 전 vs 후)
|
||||||
|
2. **디자인 토큰 준수 검증** (색상·폰트·간격)
|
||||||
|
3. **반응형 검증** (375 / 768 / 1440px)
|
||||||
|
4. **A/B 컴포넌트 버전 병렬 캡처**
|
||||||
|
5. **접근성 기본 검증** (contrast ratio, focus ring)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Playwright MCP 검증 시나리오
|
||||||
|
|
||||||
|
### After 스크린샷 캡처
|
||||||
|
|
||||||
|
```
|
||||||
|
# 홈페이지
|
||||||
|
playwright navigate → https://zioinfo.co.kr
|
||||||
|
playwright screenshot → after/home_1440.png
|
||||||
|
playwright set_viewport → {width: 768, height: 1024}
|
||||||
|
playwright screenshot → after/home_768.png
|
||||||
|
playwright set_viewport → {width: 375, height: 812}
|
||||||
|
playwright screenshot → after/home_375.png
|
||||||
|
|
||||||
|
# ITSM
|
||||||
|
playwright navigate → https://zioinfo.co.kr:8443
|
||||||
|
playwright screenshot → after/itsm_login.png
|
||||||
|
[로그인 후]
|
||||||
|
playwright screenshot → after/itsm_dashboard.png
|
||||||
|
|
||||||
|
# Manager
|
||||||
|
playwright navigate → https://zioinfo.co.kr:8090
|
||||||
|
playwright screenshot → after/manager_dashboard.png
|
||||||
|
playwright screenshot → after/manager_scraping.png
|
||||||
|
|
||||||
|
# 각 페이지 세부 섹션 스크롤 캡처
|
||||||
|
playwright scroll_to → .hero-section
|
||||||
|
playwright screenshot → after/home_hero.png
|
||||||
|
playwright scroll_to → .timeline-section
|
||||||
|
playwright screenshot → after/home_timeline.png
|
||||||
|
```
|
||||||
|
|
||||||
|
### A/B 컴포넌트 비교
|
||||||
|
|
||||||
|
```
|
||||||
|
# 버튼 A/B
|
||||||
|
playwright navigate → http://localhost:3000/design-system
|
||||||
|
playwright screenshot → ab/button_variant_a.png
|
||||||
|
playwright click → #variant-b-toggle
|
||||||
|
playwright screenshot → ab/button_variant_b.png
|
||||||
|
|
||||||
|
# 카드 A/B
|
||||||
|
playwright screenshot → ab/card_elevated.png
|
||||||
|
playwright click → #card-flat-toggle
|
||||||
|
playwright screenshot → ab/card_flat.png
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 검증 체크리스트
|
||||||
|
|
||||||
|
### 색상 토큰 준수
|
||||||
|
- [ ] `--color-primary-500` (#0051A2) 버튼·링크 사용
|
||||||
|
- [ ] `--color-accent-500` (#00A3E0) 포인트 강조
|
||||||
|
- [ ] `--color-neutral-*` 텍스트·배경 계층
|
||||||
|
- [ ] semantic 색상(success/warning/danger) 일관 적용
|
||||||
|
|
||||||
|
### 타이포 검증
|
||||||
|
- [ ] Pretendard 폰트 로드 확인
|
||||||
|
- [ ] font-size 토큰 준수 (임의값 없음)
|
||||||
|
- [ ] line-height 토큰 준수
|
||||||
|
|
||||||
|
### 간격 검증
|
||||||
|
- [ ] padding/margin이 4px 배수인지
|
||||||
|
- [ ] 컴포넌트 간 일관된 gap
|
||||||
|
|
||||||
|
### 반응형
|
||||||
|
- [ ] 375px: 모바일 레이아웃 정상
|
||||||
|
- [ ] 768px: 태블릿 레이아웃 정상
|
||||||
|
- [ ] 1440px: 데스크톱 레이아웃 정상
|
||||||
|
|
||||||
|
### 접근성
|
||||||
|
- [ ] 버튼 focus ring 가시성
|
||||||
|
- [ ] 텍스트/배경 contrast ≥ 4.5:1
|
||||||
|
- [ ] 이미지 alt 속성
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 결과 리포트 형식
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
## 시각적 QA 리포트 — {날짜}
|
||||||
|
|
||||||
|
### {시스템명}
|
||||||
|
| 페이지 | Before | After | 개선점 | 이슈 |
|
||||||
|
|--------|--------|-------|--------|------|
|
||||||
|
| 메인 |  |  | 히어로 재설계 | - |
|
||||||
|
| 연혁 |  |  | 타임라인 개선 | 모바일 오버플로우 |
|
||||||
|
|
||||||
|
### 발견된 이슈
|
||||||
|
1. [Critical] ...
|
||||||
|
2. [Warning] ...
|
||||||
|
3. [Info] ...
|
||||||
|
```
|
||||||
|
|
||||||
|
## 팀 통신 프로토콜
|
||||||
|
|
||||||
|
- **수신**: component-refactor-engineer에게서 구현 완료 알림
|
||||||
|
- **발신**: ui-overhaul-orchestrator에게 QA 리포트 + 이슈 목록
|
||||||
|
- **발신**: component-refactor-engineer에게 수정 요청 (이슈 발견 시)
|
||||||
190
.claude/skills/component-refactor/SKILL.md
Normal file
190
.claude/skills/component-refactor/SKILL.md
Normal file
@ -0,0 +1,190 @@
|
|||||||
|
---
|
||||||
|
name: component-refactor
|
||||||
|
description: "zio 4개 시스템 UI 컴포넌트 전면 리팩토링 스킬. Variant 레퍼런스를 보면서 tokens.css를 적용하고, Header·Footer·Button·Card·Table·Form을 현대적으로 개편한다. A/B 테스트 가능한 Swappable 컴포넌트 구조로 구현. 다음 상황에서 반드시 사용: (1) 'UI 개편', '디자인 전면 개편', 'CSS 리팩토링'; (2) '버튼 스타일 통일', '카드 컴포넌트 개선'; (3) '홈페이지 개편', 'ITSM UI 현대화', 'Manager 디자인'; (4) 다시 실행, 업데이트, 수정, 보완."
|
||||||
|
---
|
||||||
|
|
||||||
|
# UI 컴포넌트 전면 리팩토링 스킬
|
||||||
|
|
||||||
|
## 개편 원칙
|
||||||
|
|
||||||
|
1. **tokens.css 우선** — 하드코딩 색상/크기 금지
|
||||||
|
2. **Variant 레퍼런스 준수** — ui-scout 캡처 스크린샷 참조
|
||||||
|
3. **Swappable 구조** — A/B 테스트 가능하게 컴포넌트 분리
|
||||||
|
4. **기존 기능 유지** — 디자인만 변경, 로직 무변경
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 공통 컴포넌트 (4개 시스템 공유 개념)
|
||||||
|
|
||||||
|
### Button 컴포넌트 표준
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* Primary Button */
|
||||||
|
.btn { display:inline-flex; align-items:center; gap:var(--space-2);
|
||||||
|
padding:var(--space-2) var(--space-4); border-radius:var(--radius-md);
|
||||||
|
font-size:var(--text-sm); font-weight:var(--font-semibold);
|
||||||
|
transition:all var(--ease-fast); cursor:pointer; border:none; }
|
||||||
|
|
||||||
|
.btn-primary { background:var(--color-primary-500); color:var(--color-neutral-0); }
|
||||||
|
.btn-primary:hover { background:var(--color-primary-600); box-shadow:var(--shadow-md); }
|
||||||
|
.btn-primary:active { transform:translateY(1px); }
|
||||||
|
|
||||||
|
.btn-secondary { background:var(--color-neutral-100); color:var(--color-neutral-700);
|
||||||
|
border:1px solid var(--border); }
|
||||||
|
.btn-secondary:hover { background:var(--color-neutral-200); }
|
||||||
|
|
||||||
|
.btn-ghost { background:transparent; color:var(--color-primary-500); }
|
||||||
|
.btn-ghost:hover { background:var(--color-primary-50); }
|
||||||
|
|
||||||
|
.btn-danger { background:var(--color-danger); color:white; }
|
||||||
|
|
||||||
|
/* 크기 */
|
||||||
|
.btn-sm { padding:var(--space-1) var(--space-3); font-size:var(--text-xs); }
|
||||||
|
.btn-lg { padding:var(--space-3) var(--space-6); font-size:var(--text-base); }
|
||||||
|
```
|
||||||
|
|
||||||
|
### Card 컴포넌트 표준
|
||||||
|
|
||||||
|
```css
|
||||||
|
.card {
|
||||||
|
background:var(--bg-card); border-radius:var(--radius-lg);
|
||||||
|
box-shadow:var(--shadow-sm); border:1px solid var(--border);
|
||||||
|
overflow:hidden; transition:box-shadow var(--ease-normal);
|
||||||
|
}
|
||||||
|
.card:hover { box-shadow:var(--shadow-md); }
|
||||||
|
.card-body { padding:var(--space-6); }
|
||||||
|
.card-header { padding:var(--space-4) var(--space-6);
|
||||||
|
border-bottom:1px solid var(--border);
|
||||||
|
font-weight:var(--font-semibold); font-size:var(--text-base); }
|
||||||
|
```
|
||||||
|
|
||||||
|
### Badge/Status 표준
|
||||||
|
|
||||||
|
```css
|
||||||
|
.badge { display:inline-flex; align-items:center; padding:2px var(--space-2);
|
||||||
|
border-radius:var(--radius-full); font-size:var(--text-xs); font-weight:var(--font-semibold); }
|
||||||
|
.badge-success { background:var(--color-success-bg); color:var(--color-success); }
|
||||||
|
.badge-warning { background:var(--color-warning-bg); color:var(--color-warning); }
|
||||||
|
.badge-danger { background:var(--color-danger-bg); color:var(--color-danger); }
|
||||||
|
.badge-info { background:var(--color-info-bg); color:var(--color-info); }
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 시스템별 주요 개편 코드
|
||||||
|
|
||||||
|
### 1. 홈페이지 Hero 섹션
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
// Home.jsx 히어로 — 그라디언트 + 애니메이션
|
||||||
|
<section style={{
|
||||||
|
background: 'linear-gradient(135deg, var(--color-primary-900) 0%, var(--color-primary-600) 60%, var(--color-accent-600) 100%)',
|
||||||
|
padding: 'var(--space-24) 0',
|
||||||
|
position: 'relative', overflow: 'hidden',
|
||||||
|
}}>
|
||||||
|
<div style={{ position:'absolute', inset:0,
|
||||||
|
background: 'radial-gradient(ellipse at 70% 50%, rgba(0,163,224,.15) 0%, transparent 60%)' }} />
|
||||||
|
<div className="container" style={{ position:'relative', zIndex:1 }}>
|
||||||
|
<h1 style={{ fontSize:'var(--text-5xl)', fontWeight:'var(--font-black)',
|
||||||
|
color:'white', lineHeight:'var(--leading-tight)', marginBottom:'var(--space-6)' }}>
|
||||||
|
AI가 운영하는<br/><span style={{ color:'var(--color-accent-400)' }}>인프라 자동화</span>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2. ITSM 사이드바 현대화
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* itsm/static/style.css — 사이드바 토큰 적용 */
|
||||||
|
#sidebar {
|
||||||
|
width: 240px;
|
||||||
|
background: var(--bg-surface);
|
||||||
|
border-right: 1px solid var(--border);
|
||||||
|
transition: width var(--ease-normal);
|
||||||
|
}
|
||||||
|
#sidebar.collapsed { width: 64px; }
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
display: flex; align-items: center; gap: var(--space-3);
|
||||||
|
padding: var(--space-2) var(--space-4);
|
||||||
|
border-radius: var(--radius-md); margin: var(--space-1) var(--space-2);
|
||||||
|
color: var(--text-muted); font-size: var(--text-sm);
|
||||||
|
transition: all var(--ease-fast); cursor: pointer;
|
||||||
|
}
|
||||||
|
.nav-item:hover { background: var(--color-primary-50); color: var(--color-primary-500); }
|
||||||
|
.nav-item.active { background: var(--color-primary-500); color: white;
|
||||||
|
box-shadow: var(--shadow-sm); }
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3. Manager 통계 카드
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
// manager/frontend/src/components/common/StatCard.tsx
|
||||||
|
function StatCard({ label, value, unit, change, icon, color = 'primary' }) {
|
||||||
|
return (
|
||||||
|
<div style={{ background:'var(--bg-card)', borderRadius:'var(--radius-lg)',
|
||||||
|
padding:'var(--space-6)', boxShadow:'var(--shadow-sm)',
|
||||||
|
borderTop:`4px solid var(--color-${color}-500)` }}>
|
||||||
|
<div style={{ display:'flex', justifyContent:'space-between' }}>
|
||||||
|
<div>
|
||||||
|
<p style={{ fontSize:'var(--text-xs)', color:'var(--text-muted)',
|
||||||
|
fontWeight:'var(--font-semibold)', textTransform:'uppercase', letterSpacing:'.05em' }}>
|
||||||
|
{label}
|
||||||
|
</p>
|
||||||
|
<p style={{ fontSize:'var(--text-3xl)', fontWeight:'var(--font-black)',
|
||||||
|
color:'var(--text-main)', marginTop:'var(--space-1)' }}>
|
||||||
|
{value}<span style={{ fontSize:'var(--text-lg)' }}>{unit}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize:32 }}>{icon}</div>
|
||||||
|
</div>
|
||||||
|
{change && <p style={{ fontSize:'var(--text-xs)', color: change > 0 ? 'var(--color-success)' : 'var(--color-danger)',
|
||||||
|
marginTop:'var(--space-2)' }}>
|
||||||
|
{change > 0 ? '↑' : '↓'} {Math.abs(change)}% 전월 대비
|
||||||
|
</p>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 4. Messenger 공통 컴포넌트
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
// app/components/ui/Card.tsx
|
||||||
|
import { tokens } from '@/constants/tokens';
|
||||||
|
import { View, StyleSheet } from 'react-native';
|
||||||
|
|
||||||
|
export function Card({ children, elevated = true, style }) {
|
||||||
|
return (
|
||||||
|
<View style={[styles.card, elevated && styles.elevated, style]}>
|
||||||
|
{children}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
card: {
|
||||||
|
backgroundColor: '#ffffff',
|
||||||
|
borderRadius: tokens.radii.lg,
|
||||||
|
padding: tokens.spacing[4],
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: '#e2e8f0',
|
||||||
|
},
|
||||||
|
elevated: tokens.shadows.md,
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## A/B 테스트 Swappable 구조
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
// 컴포넌트 버전 토글 — feature flag 기반
|
||||||
|
const UI_VARIANT = process.env.REACT_APP_UI_VARIANT || 'A';
|
||||||
|
|
||||||
|
export function HeroSection() {
|
||||||
|
if (UI_VARIANT === 'B') return <HeroSectionV2 />;
|
||||||
|
return <HeroSectionV1 />;
|
||||||
|
}
|
||||||
|
```
|
||||||
210
.claude/skills/design-token-system/SKILL.md
Normal file
210
.claude/skills/design-token-system/SKILL.md
Normal file
@ -0,0 +1,210 @@
|
|||||||
|
---
|
||||||
|
name: design-token-system
|
||||||
|
description: "zio 4개 시스템(홈페이지·ITSM·Manager·Messenger) 통합 디자인 토큰 설계·구현 스킬. Pretendard 폰트, 딥블루+스카이블루 브랜드 색상, 4px 간격 시스템을 CSS변수·Tailwind·React Native StyleSheet로 변환한다. 다음 상황에서 반드시 사용: (1) '디자인 토큰 만들어줘', '색상 시스템 정의', '폰트 통일'; (2) tokens.css 생성/수정; (3) CSS 변수 리팩토링; (4) 다시 실행, 업데이트, 보완."
|
||||||
|
---
|
||||||
|
|
||||||
|
# zio 통합 디자인 토큰 시스템
|
||||||
|
|
||||||
|
## 적용 파일 위치
|
||||||
|
|
||||||
|
| 시스템 | 파일 |
|
||||||
|
|--------|------|
|
||||||
|
| 홈페이지 | `workspace/zioinfo-web/frontend/src/styles/tokens.css` |
|
||||||
|
| ITSM | `itsm/static/tokens.css` |
|
||||||
|
| Manager | `manager/frontend/src/styles/tokens.css` |
|
||||||
|
| Messenger | `app/constants/tokens.ts` |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## tokens.css (홈페이지·Manager 공용)
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* ── zio 통합 디자인 토큰 ── */
|
||||||
|
|
||||||
|
/* 폰트 */
|
||||||
|
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
|
||||||
|
|
||||||
|
:root {
|
||||||
|
/* ── 브랜드 색상 ── */
|
||||||
|
--color-primary-50: #eff4ff;
|
||||||
|
--color-primary-100: #dbe4ff;
|
||||||
|
--color-primary-200: #bac8ff;
|
||||||
|
--color-primary-300: #91b4fa;
|
||||||
|
--color-primary-400: #4d7ef5;
|
||||||
|
--color-primary-500: #0051A2;
|
||||||
|
--color-primary-600: #003f7f;
|
||||||
|
--color-primary-700: #002d5c;
|
||||||
|
--color-primary-800: #001c3a;
|
||||||
|
--color-primary-900: #000d1a;
|
||||||
|
|
||||||
|
--color-accent-400: #38bdf8;
|
||||||
|
--color-accent-500: #00A3E0;
|
||||||
|
--color-accent-600: #0082b3;
|
||||||
|
|
||||||
|
/* ── 뉴트럴 ── */
|
||||||
|
--color-neutral-0: #ffffff;
|
||||||
|
--color-neutral-50: #f8fafc;
|
||||||
|
--color-neutral-100: #f1f5f9;
|
||||||
|
--color-neutral-200: #e2e8f0;
|
||||||
|
--color-neutral-300: #cbd5e1;
|
||||||
|
--color-neutral-400: #94a3b8;
|
||||||
|
--color-neutral-500: #64748b;
|
||||||
|
--color-neutral-600: #475569;
|
||||||
|
--color-neutral-700: #334155;
|
||||||
|
--color-neutral-800: #1e293b;
|
||||||
|
--color-neutral-900: #0f172a;
|
||||||
|
|
||||||
|
/* ── 시맨틱 ── */
|
||||||
|
--color-success: #22c55e;
|
||||||
|
--color-success-bg: #f0fdf4;
|
||||||
|
--color-warning: #f59e0b;
|
||||||
|
--color-warning-bg: #fffbeb;
|
||||||
|
--color-danger: #ef4444;
|
||||||
|
--color-danger-bg: #fef2f2;
|
||||||
|
--color-info: #3b82f6;
|
||||||
|
--color-info-bg: #eff6ff;
|
||||||
|
|
||||||
|
/* ── 타이포 ── */
|
||||||
|
--font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
|
||||||
|
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
||||||
|
|
||||||
|
--text-xs: 11px;
|
||||||
|
--text-sm: 13px;
|
||||||
|
--text-base: 15px;
|
||||||
|
--text-lg: 17px;
|
||||||
|
--text-xl: 20px;
|
||||||
|
--text-2xl: 24px;
|
||||||
|
--text-3xl: 30px;
|
||||||
|
--text-4xl: 36px;
|
||||||
|
--text-5xl: 48px;
|
||||||
|
|
||||||
|
--font-normal: 400;
|
||||||
|
--font-medium: 500;
|
||||||
|
--font-semibold: 600;
|
||||||
|
--font-bold: 700;
|
||||||
|
--font-black: 900;
|
||||||
|
|
||||||
|
--leading-tight: 1.25;
|
||||||
|
--leading-normal: 1.6;
|
||||||
|
--leading-loose: 1.8;
|
||||||
|
|
||||||
|
/* ── 간격 (4px 기반) ── */
|
||||||
|
--space-0: 0px;
|
||||||
|
--space-1: 4px;
|
||||||
|
--space-2: 8px;
|
||||||
|
--space-3: 12px;
|
||||||
|
--space-4: 16px;
|
||||||
|
--space-5: 20px;
|
||||||
|
--space-6: 24px;
|
||||||
|
--space-8: 32px;
|
||||||
|
--space-10: 40px;
|
||||||
|
--space-12: 48px;
|
||||||
|
--space-16: 64px;
|
||||||
|
--space-20: 80px;
|
||||||
|
--space-24: 96px;
|
||||||
|
|
||||||
|
/* ── 반경 ── */
|
||||||
|
--radius-xs: 2px;
|
||||||
|
--radius-sm: 4px;
|
||||||
|
--radius-md: 8px;
|
||||||
|
--radius-lg: 12px;
|
||||||
|
--radius-xl: 16px;
|
||||||
|
--radius-2xl: 24px;
|
||||||
|
--radius-full: 9999px;
|
||||||
|
|
||||||
|
/* ── 그림자 ── */
|
||||||
|
--shadow-xs: 0 1px 2px rgba(0,0,0,.06);
|
||||||
|
--shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
|
||||||
|
--shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
|
||||||
|
--shadow-lg: 0 10px 15px rgba(0,0,0,.10), 0 4px 6px rgba(0,0,0,.05);
|
||||||
|
--shadow-xl: 0 20px 25px rgba(0,0,0,.10), 0 10px 10px rgba(0,0,0,.04);
|
||||||
|
|
||||||
|
/* ── 전환 ── */
|
||||||
|
--ease-fast: 150ms cubic-bezier(.4,0,.2,1);
|
||||||
|
--ease-normal: 250ms cubic-bezier(.4,0,.2,1);
|
||||||
|
--ease-slow: 400ms cubic-bezier(.4,0,.2,1);
|
||||||
|
|
||||||
|
/* ── 레이아웃 ── */
|
||||||
|
--container-sm: 640px;
|
||||||
|
--container-md: 768px;
|
||||||
|
--container-lg: 1024px;
|
||||||
|
--container-xl: 1280px;
|
||||||
|
--container-2xl: 1536px;
|
||||||
|
|
||||||
|
/* ── Z-index ── */
|
||||||
|
--z-dropdown: 100;
|
||||||
|
--z-modal: 200;
|
||||||
|
--z-toast: 300;
|
||||||
|
--z-tooltip: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── 다크모드 (ITSM 전용) ── */
|
||||||
|
[data-theme="dark"] {
|
||||||
|
--color-neutral-0: #0f172a;
|
||||||
|
--color-neutral-50: #1e293b;
|
||||||
|
--color-neutral-100: #334155;
|
||||||
|
--color-neutral-200: #475569;
|
||||||
|
--bg-page: #0f172a;
|
||||||
|
--bg-surface: #1e293b;
|
||||||
|
--bg-card: #1e293b;
|
||||||
|
--text-main: #f1f5f9;
|
||||||
|
--text-muted: #94a3b8;
|
||||||
|
--border: #334155;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── 라이트모드 ── */
|
||||||
|
:root, [data-theme="light"] {
|
||||||
|
--bg-page: var(--color-neutral-50);
|
||||||
|
--bg-surface: var(--color-neutral-0);
|
||||||
|
--bg-card: var(--color-neutral-0);
|
||||||
|
--text-main: var(--color-neutral-900);
|
||||||
|
--text-muted: var(--color-neutral-500);
|
||||||
|
--border: var(--color-neutral-200);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── 글로벌 리셋 ── */
|
||||||
|
*, *::before, *::after { box-sizing: border-box; }
|
||||||
|
body {
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-size: var(--text-base);
|
||||||
|
line-height: var(--leading-normal);
|
||||||
|
color: var(--text-main);
|
||||||
|
background: var(--bg-page);
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## tokens.ts (Messenger RN)
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// app/constants/tokens.ts
|
||||||
|
export const colors = {
|
||||||
|
primary: { 50:'#eff4ff', 500:'#0051A2', 600:'#003f7f' },
|
||||||
|
accent: { 400:'#38bdf8', 500:'#00A3E0' },
|
||||||
|
neutral: { 0:'#fff', 50:'#f8fafc', 100:'#f1f5f9', 200:'#e2e8f0',
|
||||||
|
500:'#64748b', 700:'#334155', 900:'#0f172a' },
|
||||||
|
success: '#22c55e',
|
||||||
|
warning: '#f59e0b',
|
||||||
|
danger: '#ef4444',
|
||||||
|
info: '#3b82f6',
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
export const spacing = {
|
||||||
|
1:4, 2:8, 3:12, 4:16, 5:20, 6:24, 8:32, 10:40, 12:48,
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
export const radii = {
|
||||||
|
sm:4, md:8, lg:12, xl:16, full:9999,
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
export const shadows = {
|
||||||
|
sm: { shadowColor:'#000', shadowOffset:{width:0,height:1}, shadowOpacity:.06, shadowRadius:3, elevation:2 },
|
||||||
|
md: { shadowColor:'#000', shadowOffset:{width:0,height:4}, shadowOpacity:.08, shadowRadius:6, elevation:4 },
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
export const typography = {
|
||||||
|
xs:11, sm:13, base:15, lg:17, xl:20, '2xl':24, '3xl':30,
|
||||||
|
} as const;
|
||||||
|
```
|
||||||
140
.claude/skills/playwright-visual-capture/SKILL.md
Normal file
140
.claude/skills/playwright-visual-capture/SKILL.md
Normal file
@ -0,0 +1,140 @@
|
|||||||
|
---
|
||||||
|
name: playwright-visual-capture
|
||||||
|
description: "Playwright MCP + Variant(variant.com/community) 활용 시각적 캡처 스킬. 현재 UI Before 스크린샷, Variant 디자인 레퍼런스, 개편 후 After 스크린샷, A/B 컴포넌트 비교를 Playwright MCP 도구로 자동화한다. 다음 상황에서 반드시 사용: (1) 'UI 스크린샷 찍어줘', 'before/after 비교', 'Variant에서 디자인 찾아줘'; (2) 'UI 개편 전 현황 캡처', '반응형 검증 스크린샷'; (3) 시각적 QA, A/B 테스트 캡처; (4) 다시 실행, 업데이트, 보완."
|
||||||
|
---
|
||||||
|
|
||||||
|
# Playwright MCP + Variant 시각적 캡처 스킬
|
||||||
|
|
||||||
|
## Playwright MCP 기본 도구
|
||||||
|
|
||||||
|
```
|
||||||
|
playwright_navigate → URL 이동
|
||||||
|
playwright_screenshot → 현재 페이지 캡처 (path 지정 가능)
|
||||||
|
playwright_click → 요소 클릭
|
||||||
|
playwright_type → 텍스트 입력
|
||||||
|
playwright_scroll → 페이지 스크롤
|
||||||
|
playwright_wait → 로딩 대기
|
||||||
|
playwright_hover → 호버 상태
|
||||||
|
playwright_select → 드롭다운 선택
|
||||||
|
playwright_resize → 뷰포트 크기 변경
|
||||||
|
playwright_evaluate → JavaScript 실행
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Before 캡처 (현재 UI)
|
||||||
|
|
||||||
|
```
|
||||||
|
저장 경로: C:\GUARDiA\design-overhaul\before\
|
||||||
|
|
||||||
|
홈페이지:
|
||||||
|
→ navigate: https://zioinfo.co.kr
|
||||||
|
→ screenshot: before/home_main.png
|
||||||
|
→ navigate: https://zioinfo.co.kr/company/history
|
||||||
|
→ screenshot: before/home_history.png
|
||||||
|
→ navigate: https://zioinfo.co.kr/company/ci
|
||||||
|
→ screenshot: before/home_ci.png
|
||||||
|
→ navigate: https://zioinfo.co.kr/solution/guardia
|
||||||
|
→ screenshot: before/home_guardia.png
|
||||||
|
|
||||||
|
ITSM:
|
||||||
|
→ navigate: https://zioinfo.co.kr:8443
|
||||||
|
→ screenshot: before/itsm_login.png
|
||||||
|
→ [로그인: admin / Admin@2026!]
|
||||||
|
→ screenshot: before/itsm_dashboard.png
|
||||||
|
→ [SR 목록 클릭]
|
||||||
|
→ screenshot: before/itsm_sr_list.png
|
||||||
|
|
||||||
|
Manager:
|
||||||
|
→ navigate: https://zioinfo.co.kr:8090
|
||||||
|
→ [로그인]
|
||||||
|
→ screenshot: before/manager_dashboard.png
|
||||||
|
→ navigate: /scraping
|
||||||
|
→ screenshot: before/manager_scraping.png
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Variant 디자인 탐색 (variant.com/community)
|
||||||
|
|
||||||
|
이미 로그인 상태 → https://variant.com/community
|
||||||
|
|
||||||
|
```
|
||||||
|
# 대시보드 UI 레퍼런스
|
||||||
|
→ navigate: https://variant.com/community
|
||||||
|
→ screenshot: variant/community_main.png
|
||||||
|
→ [검색창에 입력]
|
||||||
|
→ type: "enterprise dashboard modern blue"
|
||||||
|
→ wait: 2000ms
|
||||||
|
→ screenshot: variant/dashboard_results.png
|
||||||
|
→ [첫 번째 결과 클릭 / 마음에 드는 것 선택]
|
||||||
|
→ screenshot: variant/dashboard_selected.png
|
||||||
|
|
||||||
|
# 홈페이지 레퍼런스
|
||||||
|
→ type: "corporate IT company landing page"
|
||||||
|
→ screenshot: variant/homepage_results.png
|
||||||
|
|
||||||
|
# 모바일 앱 레퍼런스
|
||||||
|
→ type: "mobile ITSM monitoring dark"
|
||||||
|
→ screenshot: variant/mobile_results.png
|
||||||
|
|
||||||
|
# 관리자 콘솔 레퍼런스
|
||||||
|
→ type: "admin console sidebar ncloud"
|
||||||
|
→ screenshot: variant/admin_results.png
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## After 캡처 (개편 후)
|
||||||
|
|
||||||
|
```
|
||||||
|
저장 경로: C:\GUARDiA\design-overhaul\after\
|
||||||
|
|
||||||
|
반응형 3단계 캡처:
|
||||||
|
→ resize: {width: 1440, height: 900}
|
||||||
|
→ screenshot: after/home_1440.png
|
||||||
|
→ resize: {width: 768, height: 1024}
|
||||||
|
→ screenshot: after/home_768.png
|
||||||
|
→ resize: {width: 375, height: 812}
|
||||||
|
→ screenshot: after/home_375.png
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Before/After 비교 리포트 생성
|
||||||
|
|
||||||
|
```python
|
||||||
|
# Python으로 나란히 비교 이미지 생성
|
||||||
|
from PIL import Image
|
||||||
|
|
||||||
|
def side_by_side(before_path, after_path, out_path):
|
||||||
|
before = Image.open(before_path)
|
||||||
|
after = Image.open(after_path)
|
||||||
|
w = before.width + after.width + 20
|
||||||
|
h = max(before.height, after.height)
|
||||||
|
canvas = Image.new('RGB', (w, h), '#f1f5f9')
|
||||||
|
canvas.paste(before, (0, 0))
|
||||||
|
canvas.paste(after, (before.width + 20, 0))
|
||||||
|
canvas.save(out_path)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 저장 구조
|
||||||
|
|
||||||
|
```
|
||||||
|
C:\GUARDiA\design-overhaul\
|
||||||
|
├── before/ ← 개편 전 스크린샷
|
||||||
|
│ ├── home_main.png
|
||||||
|
│ ├── itsm_dashboard.png
|
||||||
|
│ └── ...
|
||||||
|
├── variant/ ← Variant 레퍼런스
|
||||||
|
│ ├── dashboard_results.png
|
||||||
|
│ └── ...
|
||||||
|
├── after/ ← 개편 후 스크린샷
|
||||||
|
│ ├── home_1440.png
|
||||||
|
│ ├── home_768.png
|
||||||
|
│ └── ...
|
||||||
|
├── compare/ ← Before/After 비교
|
||||||
|
└── tokens/ ← 디자인 토큰 문서
|
||||||
|
```
|
||||||
170
.claude/skills/ui-overhaul-orchestrator/SKILL.md
Normal file
170
.claude/skills/ui-overhaul-orchestrator/SKILL.md
Normal file
@ -0,0 +1,170 @@
|
|||||||
|
---
|
||||||
|
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
|
||||||
|
- "색상 하나만 바꿔줘" → 직접 편집
|
||||||
23
CLAUDE.md
23
CLAUDE.md
@ -159,6 +159,29 @@ C:\GUARDiA\
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## 하네스: UI 전면 개편
|
||||||
|
|
||||||
|
**목표:** Playwright MCP + Variant(variant.com/community)로 zio 4개 시스템(홈페이지·ITSM·Manager·Messenger) UI를 전면 개편. Before/After 시각적 비교 + 통합 디자인 토큰 적용.
|
||||||
|
|
||||||
|
**트리거:** UI 개편, 디자인 전면 개편, Variant 활용, 디자인 토큰, Before/After 비교, 컴포넌트 리팩토링 요청 시 `ui-overhaul-orchestrator` 스킬을 사용하라.
|
||||||
|
|
||||||
|
**메신저 봇 명령어 (`/design`):**
|
||||||
|
```
|
||||||
|
/design capture → Playwright MCP로 현재 UI 스크린샷 캡처
|
||||||
|
/design variant <검색어> → Variant에서 디자인 레퍼런스 탐색
|
||||||
|
/design tokens → 통합 tokens.css 생성
|
||||||
|
/design <시스템> → 특정 시스템 컴포넌트 개편 (homepage/itsm/manager/app)
|
||||||
|
/design qa → Before/After 시각적 QA
|
||||||
|
/design ab <컴포넌트> → A/B 테스트 컴포넌트 생성
|
||||||
|
```
|
||||||
|
|
||||||
|
**변경 이력:**
|
||||||
|
| 날짜 | 변경 내용 | 대상 | 사유 |
|
||||||
|
|------|----------|------|------|
|
||||||
|
| 2026-05-31 | 초기 하네스 구성 | 전체 | 99.디자인전면개편.md 기반 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## 보안 제약 (불변)
|
## 보안 제약 (불변)
|
||||||
|
|
||||||
> 아래 규칙은 어떤 상황에서도 위반 불가
|
> 아래 규칙은 어떤 상황에서도 위반 불가
|
||||||
|
|||||||
@ -600,6 +600,46 @@ async def handle_bot_command(
|
|||||||
reply = await _cmd_gitea_status(repo, action)
|
reply = await _cmd_gitea_status(repo, action)
|
||||||
return BotReply(room=cmd.room, text=reply)
|
return BotReply(room=cmd.room, text=reply)
|
||||||
|
|
||||||
|
# ── /design ─── 디자인 리뉴얼 봇 ────────────────────────────────────────
|
||||||
|
elif keyword in ("/design", "!design"):
|
||||||
|
sub = parts[1].lower() if len(parts) >= 2 else "help"
|
||||||
|
design_cmds = {
|
||||||
|
"capture": "Playwright MCP로 현재 UI Before 스크린샷 캡처",
|
||||||
|
"tokens": "통합 디자인 토큰(tokens.css) 생성 → 4개 시스템 적용",
|
||||||
|
"qa": "Before/After 시각적 QA + 반응형 검증",
|
||||||
|
"homepage": "홈페이지 컴포넌트 리팩토링 시작",
|
||||||
|
"itsm": "ITSM UI 현대화 시작",
|
||||||
|
"manager": "Manager 디자인 개편 시작",
|
||||||
|
"app": "Messenger 앱 디자인 개편 시작",
|
||||||
|
}
|
||||||
|
if sub == "variant":
|
||||||
|
query = " ".join(parts[2:]) if len(parts) >= 3 else "enterprise dashboard"
|
||||||
|
return BotReply(room=cmd.room,
|
||||||
|
text=f"[디자인 봇] Variant 탐색: '{query}'\n"
|
||||||
|
f"→ playwright-visual-capture 스킬로 variant.com/community 탐색")
|
||||||
|
elif sub == "ab":
|
||||||
|
comp = parts[2] if len(parts) >= 3 else "button"
|
||||||
|
return BotReply(room=cmd.room,
|
||||||
|
text=f"[디자인 봇] {comp} A/B 테스트 컴포넌트 → component-refactor 스킬 실행")
|
||||||
|
elif sub in design_cmds:
|
||||||
|
return BotReply(room=cmd.room,
|
||||||
|
text=f"[디자인 봇] {design_cmds[sub]}\n"
|
||||||
|
f"→ ui-overhaul-orchestrator 스킬 Phase: {sub}")
|
||||||
|
else:
|
||||||
|
return BotReply(room=cmd.room, text=(
|
||||||
|
"[디자인 리뉴얼 봇] 명령어 목록\n"
|
||||||
|
"━━━━━━━━━━━━━━━━━━━━━\n"
|
||||||
|
"/design capture → 현재 UI Before 스크린샷\n"
|
||||||
|
"/design variant <검색어> → Variant 디자인 탐색\n"
|
||||||
|
"/design tokens → 통합 디자인 토큰 생성\n"
|
||||||
|
"/design homepage → 홈페이지 컴포넌트 개편\n"
|
||||||
|
"/design itsm → ITSM UI 현대화\n"
|
||||||
|
"/design manager → Manager 디자인 개편\n"
|
||||||
|
"/design app → Messenger 앱 개편\n"
|
||||||
|
"/design qa → Before/After 시각적 QA\n"
|
||||||
|
"/design ab <컴포넌트> → A/B 테스트 버전 생성"
|
||||||
|
))
|
||||||
|
|
||||||
# ── /release <project> [version] ─── 릴리즈 배포 트리거 ─────────────────
|
# ── /release <project> [version] ─── 릴리즈 배포 트리거 ─────────────────
|
||||||
elif keyword in ("/release", "!release"):
|
elif keyword in ("/release", "!release"):
|
||||||
if len(parts) < 2:
|
if len(parts) < 2:
|
||||||
@ -1944,6 +1984,17 @@ SM 스크립트 키: system, tomcat, jboss, jeus,
|
|||||||
weblogic, postgresql, oracle, mysql, tibero,
|
weblogic, postgresql, oracle, mysql, tibero,
|
||||||
esb, elasticsearch, solr, pinpoint, scouter
|
esb, elasticsearch, solr, pinpoint, scouter
|
||||||
|
|
||||||
|
[디자인 리뉴얼 봇]
|
||||||
|
/design capture → 현재 UI Before 스크린샷 (Playwright MCP)
|
||||||
|
/design variant <검색어> → Variant 디자인 레퍼런스 탐색
|
||||||
|
/design tokens → 통합 디자인 토큰 생성
|
||||||
|
/design homepage → 홈페이지 컴포넌트 개편
|
||||||
|
/design itsm → ITSM UI 현대화
|
||||||
|
/design manager → Manager 디자인 개편
|
||||||
|
/design app → Messenger 앱 개편
|
||||||
|
/design qa → Before/After 시각적 QA
|
||||||
|
/design ab <컴포넌트> → A/B 테스트 버전 생성
|
||||||
|
|
||||||
[스크랩핑 봇]
|
[스크랩핑 봇]
|
||||||
!scrap <url> → URL 즉시 스크랩
|
!scrap <url> → URL 즉시 스크랩
|
||||||
!scrap list [n] → 최근 n개 결과 목록
|
!scrap list [n] → 최근 n개 결과 목록
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user