From df375c83c0ef339d9bb7b99f26ffc014049ed31f Mon Sep 17 00:00:00 2001 From: "DESKTOP-TKLFCPR\\ython" Date: Sun, 31 May 2026 18:15:13 +0900 Subject: [PATCH] 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 --- .claude/agents/component-refactor-engineer.md | 120 ++++++++++ .claude/agents/design-system-architect.md | 130 +++++++++++ .claude/agents/ui-scout.md | 91 ++++++++ .claude/agents/visual-qa-tester.md | 117 ++++++++++ .claude/skills/component-refactor/SKILL.md | 190 ++++++++++++++++ .claude/skills/design-token-system/SKILL.md | 210 ++++++++++++++++++ .../skills/playwright-visual-capture/SKILL.md | 140 ++++++++++++ .../skills/ui-overhaul-orchestrator/SKILL.md | 170 ++++++++++++++ CLAUDE.md | 23 ++ itsm/routers/messenger.py | 51 +++++ 10 files changed, 1242 insertions(+) create mode 100644 .claude/agents/component-refactor-engineer.md create mode 100644 .claude/agents/design-system-architect.md create mode 100644 .claude/agents/ui-scout.md create mode 100644 .claude/agents/visual-qa-tester.md create mode 100644 .claude/skills/component-refactor/SKILL.md create mode 100644 .claude/skills/design-token-system/SKILL.md create mode 100644 .claude/skills/playwright-visual-capture/SKILL.md create mode 100644 .claude/skills/ui-overhaul-orchestrator/SKILL.md diff --git a/.claude/agents/component-refactor-engineer.md b/.claude/agents/component-refactor-engineer.md new file mode 100644 index 00000000..08471536 --- /dev/null +++ b/.claude/agents/component-refactor-engineer.md @@ -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 목록 diff --git a/.claude/agents/design-system-architect.md b/.claude/agents/design-system-architect.md new file mode 100644 index 00000000..2c936faf --- /dev/null +++ b/.claude/agents/design-system-architect.md @@ -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에게 토큰 기준 스펙 전달 diff --git a/.claude/agents/ui-scout.md b/.claude/agents/ui-scout.md new file mode 100644 index 00000000..99eb93c1 --- /dev/null +++ b/.claude/agents/ui-scout.md @@ -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에게 페이지별 개편 우선순위 전달 diff --git a/.claude/agents/visual-qa-tester.md b/.claude/agents/visual-qa-tester.md new file mode 100644 index 00000000..7e8b2dc5 --- /dev/null +++ b/.claude/agents/visual-qa-tester.md @@ -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 | 개선점 | 이슈 | +|--------|--------|-------|--------|------| +| 메인 | ![](before/...) | ![](after/...) | 히어로 재설계 | - | +| 연혁 | ![](before/...) | ![](after/...) | 타임라인 개선 | 모바일 오버플로우 | + +### 발견된 이슈 +1. [Critical] ... +2. [Warning] ... +3. [Info] ... +``` + +## 팀 통신 프로토콜 + +- **수신**: component-refactor-engineer에게서 구현 완료 알림 +- **발신**: ui-overhaul-orchestrator에게 QA 리포트 + 이슈 목록 +- **발신**: component-refactor-engineer에게 수정 요청 (이슈 발견 시) diff --git a/.claude/skills/component-refactor/SKILL.md b/.claude/skills/component-refactor/SKILL.md new file mode 100644 index 00000000..6bd3f425 --- /dev/null +++ b/.claude/skills/component-refactor/SKILL.md @@ -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 히어로 — 그라디언트 + 애니메이션 +
+
+
+

+ AI가 운영하는
인프라 자동화 +

+
+
+``` + +### 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 ( +
+
+
+

+ {label} +

+

+ {value}{unit} +

+
+
{icon}
+
+ {change &&

0 ? 'var(--color-success)' : 'var(--color-danger)', + marginTop:'var(--space-2)' }}> + {change > 0 ? '↑' : '↓'} {Math.abs(change)}% 전월 대비 +

} +
+ ); +} +``` + +### 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 ( + + {children} + + ); +} + +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 ; + return ; +} +``` diff --git a/.claude/skills/design-token-system/SKILL.md b/.claude/skills/design-token-system/SKILL.md new file mode 100644 index 00000000..52284e42 --- /dev/null +++ b/.claude/skills/design-token-system/SKILL.md @@ -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; +``` diff --git a/.claude/skills/playwright-visual-capture/SKILL.md b/.claude/skills/playwright-visual-capture/SKILL.md new file mode 100644 index 00000000..ab3cda8b --- /dev/null +++ b/.claude/skills/playwright-visual-capture/SKILL.md @@ -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/ ← 디자인 토큰 문서 +``` diff --git a/.claude/skills/ui-overhaul-orchestrator/SKILL.md b/.claude/skills/ui-overhaul-orchestrator/SKILL.md new file mode 100644 index 00000000..6bcc4e8c --- /dev/null +++ b/.claude/skills/ui-overhaul-orchestrator/SKILL.md @@ -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 +- "색상 하나만 바꿔줘" → 직접 편집 diff --git a/CLAUDE.md b/CLAUDE.md index 1230c3e3..65b54d51 100644 --- a/CLAUDE.md +++ b/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 기반 | + +--- + ## 보안 제약 (불변) > 아래 규칙은 어떤 상황에서도 위반 불가 diff --git a/itsm/routers/messenger.py b/itsm/routers/messenger.py index aa718ea3..170f11b3 100644 --- a/itsm/routers/messenger.py +++ b/itsm/routers/messenger.py @@ -600,6 +600,46 @@ async def handle_bot_command( reply = await _cmd_gitea_status(repo, action) 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 [version] ─── 릴리즈 배포 트리거 ───────────────── elif keyword in ("/release", "!release"): if len(parts) < 2: @@ -1944,6 +1984,17 @@ SM 스크립트 키: system, tomcat, jboss, jeus, weblogic, postgresql, oracle, mysql, tibero, 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 즉시 스크랩 !scrap list [n] → 최근 n개 결과 목록