timelabs 0.1.0 → 0.1.1

package/skills/web-design/claude-code/analyze/analyze-mockup.md

@@ -0,0 +1,572 @@
+# 디자인 목업 분석
+
+> 원본: commands/design-mockup-analyzer.md
+> Dependencies: defs/web-layouts.md, defs/web-motions.md
+
+## 개요
+
+디자인 목업 파일(이미지, HTML, Figma Export 등) 또는 웹사이트 URL을 체계적으로 분석하여 개발에 필요한 정보를 추출합니다.
+
+---
+
+## 분석 결과 저장 (.design 폴더)
+
+**모든 분석 결과는 프로젝트 루트의 `.design/` 폴더에 저장됩니다.**
+
+### 폴더 구조
+
+```
+.design/
+└── [site-name]/              # 예: seaart-ai/
+    ├── analysis.json         # 전체 분석 데이터 (JSON)
+    ├── design-tokens.css     # CSS 변수 (색상, 타이포, 간격)
+    ├── dom-structure.md      # DOM 계층 구조
+    ├── components.md         # 컴포넌트 인벤토리
+    ├── screenshots/          # 캡처 이미지
+    │   ├── desktop.png
+    │   ├── tablet.png
+    │   └── mobile.png
+    └── clone.html            # 생성된 클론 HTML
+```
+
+### 저장 파일 설명
+
+| 파일 | 내용 | 용도 |
+|------|------|------|
+| `analysis.json` | 모든 분석 데이터 통합 | HTML 생성 시 참조 |
+| `design-tokens.css` | CSS 변수 정의 | 스타일 복사/붙여넣기 |
+| `dom-structure.md` | DOM 트리 + 클래스명 | 구조 파악 |
+| `components.md` | 컴포넌트 목록 + 스타일 | 개발 체크리스트 |
+| `clone.html` | 완성된 클론 HTML | 최종 산출물 |
+
+### analysis.json 구조
+
+```json
+{
+  "meta": {
+    "url": "https://example.com",
+    "analyzedAt": "2024-01-20T12:00:00Z",
+    "framework": "Nuxt.js",
+    "uiLibrary": ["Element UI"]
+  },
+  "layout": {
+    "pattern": "Dashboard",
+    "sidebar": { "width": "240px", "position": "fixed" },
+    "content": { "maxWidth": "1280px" },
+    "header": { "height": "108px" }
+  },
+  "colors": {
+    "primary": "#CA75FF",
+    "background": "#000000",
+    "text": "#FFFFFF",
+    "secondary": "#1E2A3B"
+  },
+  "typography": {
+    "fontFamily": "PingFang SC, sans-serif",
+    "h1": "28px",
+    "h2": "18px",
+    "body": "16px"
+  },
+  "dom": {
+    "tree": { },
+    "sections": [ ]
+  },
+  "components": [ ],
+  "images": {
+    "summary": {
+      "totalDomImages": 15,
+      "totalVisualImages": 18,
+      "compositeImages": 2
+    }
+  },
+  "dynamicEffects": {
+    "detected": [
+      {
+        "element": ".panel-item",
+        "effects": ["hover-zoom-intense"],
+        "css": "transform: scale(1.08) on hover"
+      }
+    ]
+  }
+}
+```
+
+---
+
+## 워크플로우
+
+### 1. 분석만 수행
+```
+"seaart.ai 분석해줘"
+→ .design/seaart-ai/ 폴더 생성
+→ 분석 결과 파일들 저장
+→ 분석 리포트 출력
+```
+
+### 2. 분석 + HTML 생성
+```
+"seaart.ai 분석하고 HTML 만들어줘"
+→ .design/seaart-ai/ 폴더 생성
+→ 분석 결과 저장
+→ analysis.json 기반으로 clone.html 생성
+```
+
+### 3. 기존 분석 활용
+```
+"seaart HTML 다시 만들어줘"
+→ .design/seaart-ai/analysis.json 읽기
+→ 저장된 데이터로 clone.html 재생성
+```
+
+---
+
+## 공유 컨텍스트 연동
+
+### 시작 시 읽기
+
+```
+1. Read 도구로 .claude/project-context.json 읽기
+2. 파일이 있으면:
+   - design.style → 스타일 참조 (색상 해석에 활용)
+   - design.theme → dark/light 모드 참조
+   - design.token_format → 토큰 출력 형식 참조
+   - tech_stack.frontend → 프레임워크별 컴포넌트 권장
+3. 파일이 없으면 → 무시하고 정상 진행
+```
+
+### 분석 완료 시 쓰기 (선택적)
+
+분석 결과 중 프로젝트 디자인 정보를 context에 기록합니다.
+
+```json
+{
+  "last_updated": "{현재 시간}",
+  "updated_by": "/web-design",
+
+  "design": {
+    "analyzed_sources": ["{분석한 파일/URL 목록}"],
+    "detected_colors": {
+      "primary": "{추출된 primary color}",
+      "secondary": "{추출된 secondary color}"
+    },
+    "detected_layout": "{식별된 레이아웃 패턴}",
+    "detected_components": ["{식별된 컴포넌트 목록}"]
+  }
+}
+```
+
+> **주의**: design.style, design.theme 등 기존 필드는 보존! 새 필드만 추가(merge).
+> 참조: `~/.claude/skills/shared/context-rules.md`
+
+---
+
+## 분석 대상
+
+| 입력 타입 | 예시 | 분석 방법 |
+|----------|------|----------|
+| **로컬 파일** | design/*.png, *.html | Read 도구로 직접 분석 |
+| **웹사이트 URL** | https://example.com | Chrome 브라우저로 실시간 분석 |
+| **Figma Export** | design.json | JSON 파싱 후 분석 |
+
+## 분석 프로세스
+
+### 1단계: 파일 스캔
+
+```
+design/           # 목업 이미지 및 HTML
+├── *.png, *.jpg  # 스크린샷/목업 이미지
+├── *.html        # HTML 프로토타입
+└── assets/       # 아이콘, 이미지 에셋
+```
+
+먼저 `design/` 폴더 또는 사용자가 지정한 경로에서 분석할 파일들을 찾습니다.
+
+### 2단계: 시각적 분석 (이미지 파일)
+
+이미지 파일을 읽고 다음을 분석합니다:
+
+#### 색상 팔레트
+- **Primary Color**: 주요 브랜드 색상
+- **Secondary Color**: 보조 색상
+- **Accent Color**: 강조 색상
+- **Background Colors**: 배경색 (light/dark)
+- **Text Colors**: 텍스트 색상 계층
+- **Status Colors**: success, warning, error, info
+
+출력 형식:
+```css
+:root {
+  --color-primary: #3B82F6;
+  --color-secondary: #6366F1;
+  --color-accent: #F59E0B;
+  --color-bg-light: #FFFFFF;
+  --color-bg-dark: #1F2937;
+  --color-text-primary: #111827;
+  --color-text-secondary: #6B7280;
+}
+```
+
+#### 타이포그래피
+- 폰트 패밀리 추정
+- 제목 크기 계층 (h1~h6)
+- 본문 텍스트 크기
+- 줄 높이 및 자간
+
+출력 형식:
+```css
+:root {
+  --font-family-heading: 'Inter', sans-serif;
+  --font-family-body: 'Inter', sans-serif;
+  --font-size-h1: 2.5rem;
+  --font-size-h2: 2rem;
+  --font-size-h3: 1.5rem;
+  --font-size-body: 1rem;
+  --font-size-small: 0.875rem;
+  --line-height-normal: 1.5;
+}
+```
+
+#### 간격 시스템
+- 여백 패턴 (4px, 8px, 16px, 24px, 32px...)
+- 컴포넌트 간 간격
+- 섹션 간 간격
+
+### 3단계: 컴포넌트 식별
+
+목업에서 반복되는 UI 패턴을 식별합니다:
+
+#### 기본 컴포넌트
+- [ ] Button (Primary, Secondary, Ghost, Disabled)
+- [ ] Input (Text, Password, Search, Textarea)
+- [ ] Checkbox / Radio / Toggle
+- [ ] Select / Dropdown
+- [ ] Badge / Tag / Chip
+- [ ] Avatar
+- [ ] Icon
+
+#### 복합 컴포넌트
+- [ ] Card
+- [ ] Modal / Dialog
+- [ ] Navigation (Header, Sidebar, Tabs)
+- [ ] Table / List
+- [ ] Form
+- [ ] Toast / Alert
+
+#### 레이아웃 컴포넌트
+- [ ] Container
+- [ ] Grid System
+- [ ] Flex Layout
+- [ ] Stack (Vertical/Horizontal)
+
+### 4단계: 레이아웃 분석
+
+#### 레이아웃 패턴 매칭
+
+참조: defs/web-layouts.md
+
+목업을 분석하여 레이아웃 패턴 레퍼런스에서 매칭되는 패턴을 식별합니다.
+
+#### 그리드 시스템 분석
+- 컬럼 수 (12-column 등)
+- Gutter 크기
+- 컨테이너 최대 너비
+- 브레이크포인트 추정
+
+```css
+/* 추정 브레이크포인트 */
+--breakpoint-sm: 640px;
+--breakpoint-md: 768px;
+--breakpoint-lg: 1024px;
+--breakpoint-xl: 1280px;
+```
+
+#### 레이아웃 출력 형식
+
+분석된 레이아웃을 ASCII 다이어그램으로 표현:
+
+```
+예시: Dashboard 레이아웃
+┌─────────────────────────────────────────┐
+│  Logo  │      Top Navigation      │     │
+├────────┼────────────────────────────────┤
+│        │ ┌────────┐ ┌────────┐ ┌──────┐│
+│  Side  │ │ Metric │ │ Metric │ │Metric││
+│  bar   │ └────────┘ └────────┘ └──────┘│
+│        │ ┌─────────────────────────────┐│
+│        │ │        Data Table          ││
+│        │ └─────────────────────────────┘│
+└────────┴────────────────────────────────┘
+```
+
+### 5단계: DOM 구조 분석 (URL 분석 필수!)
+
+**웹사이트 URL 분석 시 DOM 구조를 반드시 파악해야 정확한 클론이 가능합니다.**
+
+#### 분석 순서
+
+```
+1. 프레임워크 감지 (Nuxt, Next, React, Vue)
+2. 전체 DOM 트리 계층 구조 추출
+3. 메인 콘텐츠 컨테이너 식별
+4. 섹션별 CSS 클래스 및 레이아웃 타입 파악
+5. Grid/Flex 컨테이너 매핑
+```
+
+#### 필수 분석 항목
+
+| 분석 대상 | 추출 정보 | 용도 |
+|----------|----------|------|
+| **컨테이너 계층** | #app > .container > .content | HTML 구조 재현 |
+| **섹션 클래스** | .hero-section, .card-grid | 컴포넌트 분리 |
+| **레이아웃 타입** | flex, grid, position | CSS 레이아웃 재현 |
+| **자식 요소 수** | childCount | 반복 패턴 파악 |
+
+#### 출력 형식
+
+```
+## DOM 레이아웃 구조
+
+### 컨테이너 계층
+#__nuxt
+  └── #app
+      └── .main-container
+          ├── header.site-header
+          ├── .page-content
+          │   ├── .hero-section (flex, 3 children)
+          │   ├── .feature-grid (grid, 6 children)
+          │   └── .gallery (masonry, N children)
+          └── footer.site-footer
+```
+
+---
+
+### 6단계: 이미지 컴포지션 분석 (필수!)
+
+**중요: 이미지 파일 1개가 시각적으로 여러 이미지를 포함할 수 있습니다.**
+
+#### 왜 중요한가?
+
+실제 사례 (SeaArt Hero Card):
+- DOM: `<img src="image-mark-1.webp">` (1개)
+- 시각적: 두 개의 겹쳐진 아트워크 이미지
+- 원인: 단일 이미지 파일에 여러 요소가 **미리 합성**됨
+
+#### 분석 체크리스트
+
+| 확인 항목 | 분석 방법 | 판단 기준 |
+|----------|----------|----------|
+| **이미지 개수** | DOM `<img>` 태그 수 | 시각적 이미지 수와 비교 |
+| **자연 크기 vs 표시 크기** | `naturalWidth/Height` | 2배 이상이면 합성 의심 |
+| **가로세로 비율** | `width / height` | 2.0 이상이면 가로 합성 의심 |
+| **파일명** | URL 분석 | `mark`, `composite`, `stack` 포함 여부 |
+| **시각적 확인** | 스크린샷 줌 | 이미지 내 경계선, 그림자 확인 |
+
+#### 이미지 구성 패턴
+
+| 패턴 | 설명 | 예시 |
+|------|------|------|
+| **단일 이미지** | 1 파일 = 1 시각적 이미지 | 일반 아이콘 |
+| **합성 이미지** | 1 파일 = N 시각적 이미지 | SeaArt Hero Card |
+| **레이어드** | 배경 + 전경 이미지 분리 | 카드 배경 + 아이콘 |
+| **오버랩** | 여러 img 태그가 겹침 | 프로필 카드 |
+
+---
+
+### 7단계: 인터랙션 패턴 & 역동적 요소
+
+#### 인터랙션 상태
+
+- **Hover States**: 버튼, 링크, 카드
+- **Active States**: 선택된 탭, 메뉴 아이템
+- **Focus States**: 입력 필드, 버튼
+- **Loading States**: 스피너, 스켈레톤
+- **Empty States**: 데이터 없음 화면
+- **Error States**: 폼 에러, 페이지 에러
+
+#### 역동적 요소 선택 가이드
+
+참조: defs/web-motions.md
+
+분석 시 원본에서 감지된 효과를 식별하고, 클론 제작 시 역동적 디자인 요소 라이브러리에서 선택하여 적용합니다.
+
+### 8단계: 접근성 검토
+
+- [ ] 색상 대비 비율 (WCAG AA 4.5:1)
+- [ ] 터치 타겟 크기 (최소 44x44px)
+- [ ] 포커스 인디케이터 존재
+- [ ] 텍스트 크기 적절성 (최소 16px)
+
+---
+
+## 출력 형식
+
+분석 결과는 다음 구조로 제공합니다:
+
+### 1. 요약 보고서
+전체 디자인 시스템 개요
+
+### 2. 디자인 토큰 (CSS Variables)
+```css
+/* colors.css */
+/* typography.css */
+/* spacing.css */
+```
+
+### 3. 컴포넌트 목록
+개발이 필요한 컴포넌트 체크리스트
+
+### 4. DOM 구조 (URL 분석 시)
+```
+프레임워크: Nuxt.js / Element UI
+
+#__nuxt > #app > .container
+  ├── header (.top-menu)
+  ├── .page-content
+  │   ├── .hero-box (flex, 3개)
+  │   ├── .card-section (grid, 12개)
+  │   └── .gallery (masonry)
+  └── footer
+```
+
+### 5. 구현 권장사항
+- 권장 CSS 프레임워크 (Tailwind, CSS Modules 등)
+- 컴포넌트 라이브러리 제안
+- 반응형 전략
+
+### 6. 주의사항
+디자인에서 발견된 잠재적 이슈
+
+---
+
+## 사용 예시
+
+### 로컬 파일 분석
+- "design 폴더의 목업을 분석해줘"
+- "이 UI의 색상 팔레트를 추출해줘"
+- "목업에서 필요한 컴포넌트 목록 만들어줘"
+- "디자인 시스템 가이드 만들어줘"
+
+### URL 웹사이트 분석
+- "https://example.com 분석해줘"
+- "이 사이트 디자인 시스템 추출해줘"
+- "URL의 색상 팔레트 뽑아줘"
+- "웹사이트 반응형 테스트해줘"
+- "이 사이트 레이아웃 패턴 분석해줘"
+
+### 비교 분석
+- "이 두 사이트 디자인 비교해줘"
+- "목업과 실제 구현 비교 분석해줘"
+
+**분석 대상:**
+- PNG, JPG, WEBP (목업 이미지)
+- HTML (프로토타입)
+- SVG (아이콘, 일러스트)
+- JSON (Figma/Sketch export)
+- URL (실시간 웹사이트)
+
+---
+
+## URL 분석 시 Chrome 브라우저 사용
+
+### 사전 요구사항
+
+URL 분석을 위해 **Claude in Chrome** 확장 프로그램이 필요합니다:
+1. https://claude.ai/chrome 에서 확장 프로그램 설치
+2. Chrome 완전 재시작
+3. 확장 프로그램 활성화 확인
+
+### 분석 도구
+
+```
+1. tabs_context_mcp     → 탭 상태 확인
+2. tabs_create_mcp      → 새 탭 생성
+3. navigate             → URL 이동
+4. computer(screenshot) → 스크린샷 캡처
+5. computer(scroll)     → 페이지 스크롤
+6. read_page            → DOM 구조 분석
+7. javascript_tool      → CSS 스타일 추출
+8. resize_window        → 반응형 테스트
+```
+
+### 전체 페이지 스크롤 분석 (중요!)
+
+**랜딩 페이지처럼 긴 페이지는 스크롤하며 전체 섹션을 분석해야 합니다:**
+
+```
+1. 초기 화면 스크린샷 (Hero 섹션)
+2. 페이지 높이 확인 (javascript_tool)
+3. 스크롤 다운 → 스크린샷 → 분석 반복
+4. Footer가 보일 때까지 계속
+5. 각 섹션의 컴포넌트, 색상, 레이아웃 수집
+```
+
+---
+
+## 분석 체크리스트
+
+### 색상 분석
+- [ ] Primary Color 식별
+- [ ] Secondary Color 식별
+- [ ] Accent/CTA Color 식별
+- [ ] 배경색 (Light/Dark Mode)
+- [ ] 텍스트 색상 계층 (Primary, Secondary, Muted)
+- [ ] Border/Divider 색상
+- [ ] Status Colors (Success, Warning, Error, Info)
+
+### 타이포그래피 분석
+- [ ] Heading 폰트 패밀리
+- [ ] Body 폰트 패밀리
+- [ ] H1 ~ H6 크기
+- [ ] Body Large / Regular / Small
+- [ ] Font Weight 변화
+- [ ] Line Height
+
+### 컴포넌트 분석
+#### 기초 요소
+- [ ] Button (Primary, Secondary, Outline, Ghost)
+- [ ] Input (Text, Email, Password)
+- [ ] Checkbox / Radio / Toggle
+- [ ] Select / Dropdown
+- [ ] Badge / Tag
+
+#### 복합 컴포넌트
+- [ ] Card
+- [ ] Modal / Dialog
+- [ ] Navigation (Header, Sidebar, Tabs)
+- [ ] Table / List
+- [ ] Form
+- [ ] Toast / Alert
+
+### 레이아웃 분석
+- [ ] 컬럼 수 (12-column 등)
+- [ ] Gutter 크기
+- [ ] Container Max Width
+- [ ] Spacing Scale 정의
+- [ ] 브레이크포인트
+
+### 접근성 체크
+- [ ] 텍스트 대비 비율 4.5:1 이상
+- [ ] 터치 타겟 최소 44x44px
+- [ ] 포커스 인디케이터 명확함
+- [ ] 텍스트 최소 16px (모바일)
+
+---
+
+## 산출물 체크리스트
+
+### 필수 산출물
+- [ ] 색상 토큰 (CSS Variables)
+- [ ] 타이포그래피 토큰
+- [ ] 간격 토큰
+- [ ] 컴포넌트 목록
+
+### 선택 산출물
+- [ ] 컴포넌트 구현 우선순위
+- [ ] 기술 스택 권장사항
+- [ ] 접근성 이슈 리포트
+
+---
+
+## verify 연동
+
+분석 결과는 verify/ 모듈에서 검증 기준으로 활용됩니다.