@su-record/vibe 2.8.34 → 2.8.36

package/skills/vibe.figma/SKILL.md

@@ -1,21 +1,31 @@
 ---
 name: vibe.figma
-description: Figma design to code — 스토리보드(기능) + 디자인(비주얼) → 프로덕션 코드
+description: Figma design to code — 시각 기반 퍼즐 조립 방식
 triggers: []
 tier: standard
 ---
 
-# vibe.figma — Figma Design to Code
+# vibe.figma — Visual Puzzle Assembly
+
+## 핵심 원칙
+
+```
+스크린샷이 정답이다. Figma 데이터는 재료일 뿐이다.
+
+❌ Figma 트리 구조를 HTML로 변환하지 않는다 (이 방식은 실패한다)
+✅ 스크린샷을 보고 "무엇을 만들어야 하는지" 파악한다
+✅ Figma 데이터(이미지, 색상, 수치)를 정확한 재료로 사용한다
+✅ 사람 개발자처럼: 디자인 보고 → 에셋 받고 → 만들면서 비교
+```
 
 ## 금지 사항
 
 ```
-❌ CSS로 이미지 재현 (삼각형/원/gradient로 나무/눈사람/배경 그리기)
+❌ Figma 레이어 트리를 그대로 div 구조로 변환
+❌ CSS로 이미지 재현 (gradient/shape으로 그림 그리기)
 ❌ 이미지 다운로드 없이 코드 생성 진행
-❌ placeholder / 빈 template / 빈 src="" 남기기
-❌ CSS 값을 추정 (참조 코드의 Tailwind 클래스에 정확한 값이 있음)
-❌ 브라우저 기본 스타일(검은색 16px)로 보이는 텍스트
-❌ 핵심 에셋만 다운로드 (const img... 전부 다운로드)
+❌ placeholder / 빈 src="" 남기기
+❌ 색상·크기를 추정 (재료함에 정확한 값이 있음)
 ❌ 컴포넌트 파일 안에 <style> 블록 / 인라인 style=""
 ✅ 외부 SCSS 파일에만 스타일 작성
 ```
@@ -25,9 +35,10 @@ tier: standard
 ```
 /vibe.figma
   → Phase 0: Setup (스택 감지, 디렉토리 생성)
-  → Phase 1: Storyboard (선택 — 레이아웃+컴포넌트 구성 + 기능 주석)
-  → Phase 2: Design (최소 뷰포트 퍼스트 → 브레이크포인트별 반복)
-  → Phase 3: Verification (Grep 체크 + 스크린샷 비교)
+  → Phase 1: Storyboard (스토리보드 → 레이아웃 + 컴포넌트 + 기능 정의)
+  → Phase 2: 재료 확보 (디자인 URL → 스크린샷 + 이미지 + CSS + 텍스트)
+  → Phase 3: 퍼즐 조립 (스크린샷 보면서 Phase 1 컴포넌트에 디자인 입히기)
+  → Phase 4: 검증 루프 (빌드 → 스크린샷 → 비교 → 수정 → 반복)
 ```
 
 ---
@@ -52,6 +63,10 @@ tier: standard
    - components/{feature}/
    - public/images/{feature}/ (또는 static/images/{feature}/)
    - styles/{feature}/ (layout/, components/ 하위)
+
+5. 기존 컴포넌트 스캔:
+   - Glob "components/**/*.vue" or "components/**/*.tsx"
+   - 재사용 가능한 컴포넌트 목록 수집 (GNB, Footer, Button 등)
 ```
 
 ---
@@ -86,7 +101,7 @@ URL에서 fileKey, nodeId 추출
   1순위: SPEC (기능 정의서) — 1개
   2순위: CONFIG (해상도) — 1개
   3순위: PAGE 중 메인 섹션만 (3.1, 3.2, 3.3, 3.4, 3.5, 3.6)
-         하위 케이스(3.1.1, 3.2.1 등)는 건너뜀 — Phase 2에서 필요 시 참조
+         하위 케이스(3.1.1, 3.2.1 등)는 건너뜀
   4순위: SHARED (공통 요소, Popup) — 필요 시
 
 높이 1500px 이상 프레임:
@@ -139,7 +154,7 @@ URL에서 fileKey, nodeId 추출
      - 목 데이터 (빈 배열 금지, 3~7개 아이템)
      - 이벤트 핸들러 stub (body는 // TODO:)
 
-   <style> 블록 없음 — 스타일은 Phase 2에서 외부 파일로.
+   <style> 블록 없음 — 스타일은 Phase 3에서 외부 파일로.
 
 3. 공통 컴포넌트 (SHARED에서 파악):
    → 프로젝트에 이미 있으면 import 재사용
@@ -165,281 +180,312 @@ Phase 1 완료 조건:
   □ 빌드 성공
 
 빈 화면 = Phase 1 미완성. Phase 2로 넘어가지 않는다.
-스타일/이미지는 없어도 됨 — Phase 2에서 채움.
-```
-
-### 스케일 팩터
-
-```
-스토리보드 CONFIG 또는 기본값에서:
-  모바일: scaleFactor = 480 / 720 = 0.667 (또는 targetMobile / designMobile)
-  PC:     scaleFactor = 1920 / 2560 = 0.75 (또는 targetPc / designPc)
-
-적용 대상: font-size, padding, margin, gap, border-radius, width, height
-적용 안 함: color, opacity, font-weight, z-index, line-height(단위 없을 때)
+스타일/이미지는 없어도 됨 — Phase 3에서 채움.
 ```
 
 ---
 
-## Phase 2: Design
+## Phase 2: 재료 확보
 
-Phase 1 컴포넌트에 **이미지 + 스타일**을 입힌다.
-모바일 퍼스트. base = 최소 뷰포트, @media (min-width:)로 확장.
+Phase 1 컴포넌트가 준비된 상태에서, 디자인 URL로 시각 재료를 수집한다.
 
 사용자에게 질문한다:
 - question: "베이스 디자인(모바일) Figma URL을 입력해주세요."
 - options 제공 금지 — 자유 텍스트 입력만 허용
 
-→ 2-1 → 2-2 섹션 루프 실행.
+### 2-1. 디자인 재료 추출
 
-완료 후 다시 질문:
-- question: "다음 브레이크포인트 디자인 URL을 입력해주세요. (없으면 '없음')"
-→ URL 입력 시: 2-3 반응형 추가 후 다시 질문
-→ "없음" 응답 시: Phase 3으로
+```
+URL에서 fileKey, nodeId 추출
 
-### 2-1. SCSS Setup + 등록 (첫 섹션 전)
+1단계 — 전체 스크린샷 (정답 사진):
+  node "[FIGMA_SCRIPT]" screenshot {fileKey} {nodeId} --out=/tmp/{feature}/full-screenshot.png
 
-```
-SCSS 파일 기본 내용 Write:
-  styles/{feature}/index.scss      ← @import 진입점
-  styles/{feature}/_tokens.scss    ← 빈 파일 (섹션마다 채움)
-  styles/{feature}/_mixins.scss    ← breakpoint mixin
-  styles/{feature}/_base.scss      ← 루트 클래스 (.winterPcbang 등)
-  styles/{feature}/layout/         ← 디렉토리
-  styles/{feature}/components/     ← 디렉토리
+2단계 — 전체 트리 + CSS (수치 재료):
+  node "[FIGMA_SCRIPT]" tree {fileKey} {nodeId} --depth=10
+  → /tmp/{feature}/tree.json 에 저장
 
-스타일 등록 (BLOCKING — 미등록 시 섹션 루프 진행 금지):
-  Grep "{feature}/index.scss" → 이미 등록되어 있으면 건너뜀.
+3단계 — 전체 이미지 다운로드 (시각 재료):
+  node "[FIGMA_SCRIPT]" images {fileKey} {nodeId} --out=/tmp/{feature}/images/ --depth=10
+  → 모든 이미지 에셋 확보. 누락 0건, 0byte 0건.
 
-  ■ 신규 프로젝트 (--new):
-    루트 페이지 파일에서 직접 로드:
-    pages/{feature}.vue → <style lang="scss" src="~/assets/scss/{feature}/index.scss" />
-    app/{feature}/page.tsx → import '~/styles/{feature}/index.scss'
+4단계 — 섹션별 스크린샷 (부분 정답):
+  트리의 1depth 자식 프레임 각각:
+    node "[FIGMA_SCRIPT]" screenshot {fileKey} {child.nodeId} --out=/tmp/{feature}/sections/{child.name}.png
+```
 
-  ■ 기존 프로젝트 (업데이트):
-    Grep "\.scss\|\.css" in nuxt.config.*/next.config.*/vite.config.*/main.ts
-    → 기존 방식과 동일하게 등록
+### 2-2. 재료함 정리
 
-  검증: Grep "{feature}/index.scss" in 프로젝트 전체 → 0건이면 실패
 ```
+Phase 2 완료 시 /tmp/{feature}/ 에 다음이 준비되어야 함:
 
-### 2-2. 섹션 루프
+/tmp/{feature}/
+├── full-screenshot.png          ← 전체 정답 사진
+├── tree.json                    ← 노드 트리 + CSS 수치
+├── images/                      ← 모든 이미지 에셋
+│   ├── hero-bg.png
+│   ├── hero-title.png
+│   ├── card-item-1.png
+│   └── ...
+└── sections/                    ← 섹션별 정답 사진
+    ├── hero.png
+    ├── daily-checkin.png
+    ├── playtime-mission.png
+    └── ...
 
-**섹션별로 a→f 순서는 지키되, 섹션 간 병렬 처리 허용.**
-**단, 첫 번째 섹션(Hero)은 단독 완료 후 나머지를 병렬로.**
+재료 목록 (material-inventory):
+  - 이미지: 파일명 + 크기 + 용도 추정 (BG/icon/title/decoration)
+  - 색상: tree.json에서 추출한 모든 고유 색상값
+  - 폰트: 사용된 font-family, size, weight 목록
+  - 텍스트: 모든 TEXT 노드의 characters 값
+  - 간격: padding, gap, margin 사용 빈도 높은 값
+```
 
-#### a. 노드 트리 + CSS 추출
+### 스케일 팩터
 
 ```
-Figma REST API로 노드 트리와 CSS 속성을 직접 추출한다.
-MCP 플러그인(get_design_context/get_metadata)은 사용하지 않는다.
+스토리보드 CONFIG 또는 기본값에서:
+  모바일: scaleFactor = 480 / 720 = 0.667 (또는 targetMobile / designMobile)
+  PC:     scaleFactor = 1920 / 2560 = 0.75 (또는 targetPc / designPc)
 
-Bash:
-  # [FIGMA_SCRIPT] = ~/.vibe/hooks/scripts/figma-extract.js
-node "[FIGMA_SCRIPT]" tree {fileKey} {섹션.nodeId} --depth=10
+적용 대상: font-size, padding, margin, gap, border-radius, width, height
+적용 안 함: color, opacity, font-weight, z-index, line-height(단위 없을 때)
+```
 
-반환 (JSON):
-  {
-    nodeId, name, type, size: {width, height},
-    css: { display, flexDirection, gap, fontSize, color, ... },
-    text: "텍스트 내용" (TEXT 노드),
-    imageRef: "abc123" (이미지 fill),
-    children: [...]
-  }
+---
 
-CSS는 Figma 노드 속성에서 직접 추출 — Tailwind 역변환 불필요:
-  fills → background-color     effects → box-shadow, filter
-  strokes → border             style → font-family, font-size, color
-  layoutMode → display:flex     itemSpacing → gap
-  padding* → padding            cornerRadius → border-radius
+## Phase 3: 퍼즐 조립
 
-인스턴스 내부 자식도 depth로 전부 조회 가능 (MCP 한계 해결).
-```
+**Phase 1에서 만든 컴포넌트에 Phase 2의 재료로 디자인을 입힌다.**
+**스크린샷을 보면서 퍼즐을 맞추듯 조립한다.**
+**첫 섹션(Hero) 단독 완료 후 나머지 섹션 병렬 진행.**
 
-#### b. 이미지 다운로드 (BLOCKING)
+### 3-0. SCSS Setup + 등록 (첫 섹션 전)
 
 ```
-트리에서 imageRef가 있는 노드를 수집 → Figma API로 다운로드.
+Phase 1에서 생성한 빈 SCSS 파일에 기본 내용 Write:
+  styles/{feature}/index.scss      ← @import 진입점
+  styles/{feature}/_tokens.scss    ← 재료함에서 추출한 디자인 토큰
+  styles/{feature}/_mixins.scss    ← breakpoint mixin
+  styles/{feature}/_base.scss      ← 루트 클래스
 
-Bash:
-  node "[FIGMA_SCRIPT]" images {fileKey} {섹션.nodeId} --out=images/{feature}/ --depth=10
+토큰 추출 (tree.json의 CSS 수치에서):
+  - 색상 → primitive ($color-navy: #0a1628) + semantic ($color-bg-primary)
+  - 폰트 → $font-pretendard, $font-size-md: 16px
+  - 간격 → $space-sm: 8px, $space-md: 16px
 
-검증: result.total = refs.size (누락 0)
-전부 완료해야 c 단계로 진행.
+스타일 등록 (BLOCKING):
+  Grep "{feature}/index.scss" → 이미 등록되어 있으면 건너뜀.
+  없으면 프로젝트 방식에 맞게 등록.
 ```
 
-#### c. 클래스 매핑 테이블 생성
+### 3-1. 섹션 조립 프로세스
 
 ```
-SCSS 작성 전에 반드시 매핑 테이블을 먼저 출력한다.
-이 테이블 없이 SCSS를 작성하지 않는다.
+각 섹션에 대해:
+
+1. 정답 확인 — 섹션 스크린샷을 Read로 본다
+   /tmp/{feature}/sections/{section}.png
+   → "이 화면처럼 만들어야 한다"
 
-1. Phase 1 컴포넌트의 클래스 목록을 Read로 수집
-2. 트리의 name + css 속성을 분석
-3. 매핑 테이블 출력:
+2. 재료 확인 — 이 섹션에 필요한 재료 목록 확인
+   - 이미지: /tmp/{feature}/images/ 에서 해당 파일들
+   - CSS 수치: tree.json에서 해당 노드의 정확한 값
+   - 텍스트: TEXT 노드의 characters
 
-  ┌─────────────────────┬──────────────────┬────────────────────────────────────┐
-  │ Phase 1 클래스       │ 트리 노드 name   │ 추출된 CSS 값                      │
-  ├─────────────────────┼──────────────────┼────────────────────────────────────┤
-  │ .kidSection         │ KID (root)       │ flex, column, gap:32px, pad:48px   │
-  │ .kidBg              │ BG               │ absolute, 720x800                  │
-  │ .kidLoginBtn        │ Btn_Login        │ flex, border, shadow, 640x148      │
-  │ .kidLoginBtnText    │ (TEXT 노드)       │ fontSize:36px, color:#fff, w:700   │
-  │ .kidDivider         │ Divider          │ 640x1                              │
-  │ .kidSteamLink       │ steam_account    │ fontSize:24px, w:600               │
-  │ .kidSteamNote       │ (하위 TEXT)       │ fontSize:20px, color:#dadce3       │
-  └─────────────────────┴──────────────────┴────────────────────────────────────┘
+3. Phase 1 컴포넌트에 디자인 입히기
+   a. 이미지 복사: images/ → static/images/{feature}/
+   b. template 업데이트:
+      - Phase 1의 기능 요소(v-for, @click, v-if, $emit) 보존
+      - 스크린샷을 보고 시각 구조에 맞게 HTML 재구성
+      - Figma 레이어 구조를 HTML로 변환하지 않음 (시각 기반)
+      - 재료함의 정확한 이미지 경로 사용
+      - 재료함의 정확한 텍스트 사용
+   c. script 보존:
+      - Phase 1의 JSDoc, 인터페이스, 핸들러 유지
+   d. SCSS 작성: 재료함의 정확한 CSS 수치 사용 (scaleFactor 적용)
+      - layout/_{section}.scss ← 포지션, 사이즈, 플렉스
+      - components/_{section}.scss ← 폰트, 색상, 보더
+      - _tokens.scss에 새 토큰 추가
 
-매핑 기준:
-  name 일치 → 직접 매핑
-  name 없음 → 트리 위치/text 내용으로 판단
-  Phase 1에 없는 요소 → 클래스 신규 추가 (template에도 반영)
-  트리에 없는 클래스 → 스타일 없이 유지
+4. 즉시 검증 — 스크린샷과 비교
+   - 이미지 빠진 거 없나?
+   - 텍스트 빠진 거 없나?
+   - 레이아웃 구조가 스크린샷과 맞나?
+   - Phase 1의 기능 요소가 보존되었나?
 ```
 
-#### d. SCSS 작성
+### 3-2. 코드 작성 규칙
 
 ```
-매핑 테이블의 각 행에 대해, 트리의 css 속성을 SCSS로 작성.
-CSS 값은 트리에서 이미 추출되어 있으므로 변환 불필요 — 그대로 사용.
+컴포넌트 (Vue 예시):
+  <template>
+    스크린샷에서 보이는 시각 구조대로 작성.
+    Figma 레이어 구조 무시.
+    Phase 1의 기능 요소(v-for, @click, v-if) 보존.
+    시맨틱 HTML 사용 (<section>, <h2>, <ul>, <button>).
+    이미지 경로: /images/{feature}/파일명.png
+    텍스트: tree.json의 TEXT 노드 characters 값 그대로.
 
-scaleFactor 적용:
-  px 값 → × scaleFactor (font-size, padding, margin, gap, width, height, border-radius)
-  적용 안 함 → color, opacity, font-weight, z-index, line-height(단위 없음), % 값
+  <script setup>
+    Phase 1의 JSDoc + 인터페이스 + 핸들러 보존.
+    새로운 데이터/상태 추가 시 기존과 병합.
 
-출력 파일:
-  styles/{feature}/layout/_{section}.scss
-    → position, display, flex, width, height, padding, overflow, z-index, background-image
-  styles/{feature}/components/_{section}.scss
-    → font-size, font-weight, color, line-height, letter-spacing, text-align,
-      border, border-radius, box-shadow, opacity
-  styles/{feature}/_tokens.scss
-    → primitive/semantic 구조로 토큰 관리 (아래 참조)
+  <style> 블록 없음 — 외부 SCSS만.
 
-_tokens.scss 구조 (primitive/semantic 분리):
-  // ─── Primitive (Figma 원시 값) ────────────────
-  // Colors
-  $color-white: #ffffff;
-  $color-navy-dark: #0a1628;
-  $color-purple-500: #604fed;
+SCSS (vibe.figma.convert 참조):
+  layout/ → position, display, flex, width, height, padding, gap
+  components/ → font, color, border, shadow, opacity
+  모든 수치는 재료함의 정확한 값 × scaleFactor.
+  추정 금지 — 값이 없으면 tree.json에서 다시 찾는다.
+```
+
+### 반응형 (추가 URL)
 
-  // Font families
-  $font-pretendard: 'Pretendard', sans-serif;
-  $font-roboto-condensed: 'Roboto Condensed', sans-serif;
+```
+완료 후 질문: "다음 브레이크포인트 디자인 URL을 입력해주세요. (없으면 '없음')"
 
-  // Font sizes (scaled)
-  $font-size-xs: 11px;   // 16 × 0.667
-  $font-size-sm: 13px;   // 20 × 0.667
-  $font-size-md: 16px;   // 24 × 0.667
-  $font-size-lg: 19px;   // 28 × 0.667
+URL 있으면:
+  1. 새 URL에서 재료 확보 (Phase 1 반복)
+  2. 새 스크린샷과 기존 코드 비교
+  3. @media (min-width: $bp-desktop) 오버라이드만 추가
+  4. 기존 모바일 코드 삭제 금지
+```
 
-  // Font weights
-  $font-weight-regular: 400;
-  $font-weight-bold: 700;
+---
 
-  // Spacing (scaled)
-  $space-xs: 5px;
-  $space-sm: 11px;
-  $space-md: 16px;
-  $space-lg: 21px;
+## Phase 4: 검증 루프
 
-  // ─── Semantic (용도별) ────────────────────────
-  // Text
-  $color-text-primary: $color-white;
-  $color-text-secondary: #dadce3;
-  $color-text-label: #003879;
-  $color-text-link: #419bd3;
+**Puppeteer + CDP로 실제 렌더링 결과를 확인하며 자동 수정한다.**
+**사람이 브라우저 보면서 고치는 것과 동일한 루프.**
+**인프라: `src/infra/lib/browser/` (범용 UI 검증 도구)**
 
-  // Background
-  $color-bg-primary: $color-navy-dark;
-  $color-bg-section: #00264a;
-  $color-bg-login: rgba(14, 35, 62, 0.8);
+```
+자동 반복: P1=0 될 때까지. 최대 3라운드.
+```
 
-  // Border
-  $color-border-primary: #203f6c;
+### 4-0. 환경 준비
 
-  // Breakpoint
-  $bp-desktop: 1024px;
+```
+1. dev 서버 시작:
+   npm run dev (또는 프로젝트 dev 명령)
+   → localhost:3000 (또는 해당 포트) 확인
 
-규칙:
-  - primitive: Figma에서 추출한 고유 값 (색상 hex, 폰트, 크기)
-  - semantic: primitive를 참조하여 용도별 이름 부여 ($color-text-primary: $color-white)
-  - 섹션 처리할 때마다 새 값 발견 시 적절한 카테고리에 추가
-  - 같은 값이 이미 있으면 기존 토큰 재사용 (중복 금지)
+2. Puppeteer 브라우저 시작:
+   import { launchBrowser, openPage } from 'src/infra/lib/browser'
+   const browser = await launchBrowser({ headless: true })
+   const page = await openPage(browser, 'http://localhost:3000/{feature}', {
+     width: 480,   // 모바일 퍼스트 (또는 타겟 뷰포트)
+     height: 960,
+   })
+```
 
-BG 레이어 패턴 (트리에서 position:absolute + 이미지 fill):
-  .{section}Bg   → position: absolute; inset: 0; z-index: 0;
-  .{section}Content → position: relative; z-index: 1;
+### 4-1. 렌더링 스크린샷 vs Figma 스크린샷
 
-index.scss에 새 섹션 @import 추가.
 ```
+import { captureScreenshot, compareScreenshots } from 'src/infra/lib/browser'
+
+각 섹션에 대해:
+  1. 렌더링 결과 스크린샷 캡처:
+     await captureScreenshot(page, {
+       outPath: '/tmp/{feature}/rendered-{section}.png',
+       selector: '.{section}Section',   // Phase 1에서 만든 클래스
+     })
 
-#### e. template 업데이트
+  2. Figma 원본과 픽셀 비교:
+     const diff = await compareScreenshots(
+       '/tmp/{feature}/sections/{section}.png',    // Figma 원본
+       '/tmp/{feature}/rendered-{section}.png',    // 렌더링 결과
+       '/tmp/{feature}/diff-{section}.png',        // 차이 시각화
+     )
 
+  3. diff 이미지를 Read로 확인:
+     → 빨간색 영역 = 차이 나는 부분
+     → diffRatio > 0.1 이면 P1 이슈
 ```
-Phase 1 컴포넌트의 template을 트리 구조 기반으로 리팩토링.
-script(JSDoc, 인터페이스, 목 데이터, 핸들러)는 보존.
 
-1. 트리의 HTML 구조를 프로젝트 스택으로 변환:
-   FRAME → <div>, TEXT → <p>/<span>, VECTOR/RECTANGLE with imageRef → <img>
+### 4-2. CSS 수치 정밀 비교
 
-2. 이미지 경로를 imageMap으로 교체:
-   imageRef "abc123" → src="/images/{feature}/abc123.png"
+```
+import { getComputedStyles, compareStyles, diffsToIssues } from 'src/infra/lib/browser'
+
+각 섹션의 주요 요소에 대해:
+  1. 렌더링된 computed CSS 추출:
+     const actual = await getComputedStyles(page, '.heroTitle', [
+       'font-size', 'color', 'width', 'height', 'padding', 'margin',
+       'background-color', 'border-radius', 'gap',
+     ])
 
-3. BG 레이어 구조 적용:
-   .{section}Bg div (배경) + .{section}Content div (콘텐츠)
+  2. Figma 재료함의 기대값과 비교:
+     // tree.json에서 해당 노드의 CSS 수치 (scaleFactor 적용 후)
+     const expected = { 'font-size': '16px', 'color': '#ffffff', 'width': '465px' }
+     const diffs = compareStyles(expected, actual)
 
-4. Phase 1 기능 요소 재배치:
-   v-for, @click, v-if, $emit 등을 새 구조의 적절한 위치에 배치
+  3. 차이 → 이슈 변환:
+     const issues = diffsToIssues(diffs)
+     → delta > 4px: P1 (레이아웃 영향)
+     → delta ≤ 4px: P2 (미세 차이)
+```
 
-5. 접근성:
-   장식 이미지 (BG 내) → alt="" aria-hidden="true"
-   콘텐츠 이미지 → alt="설명적 텍스트"
+### 4-3. 이미지·텍스트 누락 체크
 
-컴포넌트에 <style> 블록 없음. 스타일은 전부 외부 SCSS.
 ```
+import { extractImages, extractTextContent } from 'src/infra/lib/browser'
 
-#### f. 섹션 검증
+1. 이미지 로드 상태 확인:
+   const images = await extractImages(page)
+   images.filter(img => !img.loaded)
+   → 로드 실패 이미지 = P1 (이미지 누락)
+   → src="" 이미지 = P1 (빈 경로)
 
+2. 텍스트 콘텐츠 확인:
+   const texts = await extractTextContent(page)
+   → 재료함의 TEXT 노드 characters와 대조
+   → 누락된 텍스트 = P1
 ```
-Grep 체크:
-  □ 'src=""' in 컴포넌트 파일 → 0건
-  □ "<style" in 컴포넌트 파일 → 0건
 
-Read 체크:
-  □ 외부 SCSS 파일에 font-size, color 존재 (브라우저 기본 스타일 방지)
-  □ 이미지 파일 수 = imageRef 수 (누락 0)
+### 4-4. 자동 수정 루프
 
-실패 → 수정 → 재검증
 ```
+라운드 1~3:
+  1. 4-1 ~ 4-3 실행 → 이슈 목록 수집
+  2. P1 이슈 우선 수정:
+     - 이미지 누락 → 이미지 경로 확인, static/ 에 파일 존재 확인
+     - 레이아웃 다름 → 스크린샷 diff 이미지 + computed CSS로 원인 파악
+     - 텍스트 누락 → 재료함의 정확한 텍스트 삽입
+     - CSS 수치 틀림 → 재료함(tree.json)의 정확한 값으로 교체
+     ⚠️ 추정으로 수정하지 않는다. 반드시 재료함 참조.
+  3. 수정 후 페이지 리로드 → 다시 캡처 → 비교
+  4. P1=0 이면 종료
 
-### 2-3. 반응형 (두 번째 URL부터)
+라운드 종료 조건:
+  - P1=0: 성공 → 브라우저 종료, 결과 보고
+  - 3라운드 후 P1 남음: TODO 목록으로 사용자에게 보고
+  - 같은 이슈가 반복: 해당 이슈 스킵, 다음 이슈로
 
+결과 보고:
+  - 수정한 파일 목록
+  - 남은 P2 이슈 목록 (선택적 수정)
+  - 최종 diff 스크린샷 경로
 ```
-두 번째 이후 URL: 기존 스타일 유지 + @media 추가만.
 
-같은 값 → 유지
-다른 px 값 → @media (min-width: $bp-desktop) 오버라이드
-다른 레이아웃 → @media 블록 추가
-다른 배경 이미지 → @media 이미지 분기
-기존 코드/스타일 삭제 금지
+### 4-5. 반응형 검증 (추가 뷰포트)
+
 ```
+모바일 검증 완료 후, 추가 브레이크포인트가 있으면:
 
----
+  await page.setViewport({ width: 1920, height: 1080 })
+  await page.reload({ waitUntil: 'networkidle0' })
+
+  → 데스크탑 Figma 스크린샷과 동일한 4-1 ~ 4-4 루프 반복
+```
 
-## Phase 3: Verification
+### 4-6. 브라우저 정리
 
 ```
-Grep 체크:
-  □ "<style" in components/{feature}/ → 0건
-  □ 'src=""' in components/{feature}/ → 0건
-  □ Glob: images/{feature}/ → 이미지 파일 존재
+import { closeBrowser } from 'src/infra/lib/browser'
 
-시각 검증:
-  각 섹션 스크린샷:
-    node "[FIGMA_SCRIPT]" screenshot {fileKey} {nodeId} --out=/tmp/{section}.png
-  → dev 서버/preview와 비교
-  P1 (필수): 이미지 누락, 레이아웃 구조 다름, 텍스트 스타일 미적용
-  P2 (권장): 미세 간격, 미세 색상 차이
-  → P1 수정 → 재검증 (P1=0 될 때까지)
+검증 완료 후:
+  await closeBrowser()
+  dev 서버 종료 (필요 시)
 ```