---
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/          ← 디자인 토큰 문서
```