@su-record/vibe 2.8.53 → 2.9.2

package/hooks/scripts/figma-validate.js

@@ -0,0 +1,353 @@
+#!/usr/bin/env node
+
+/**
+ * figma-validate.js — SCSS vs sections.json 대조 검증
+ *
+ * Usage:
+ *   node figma-validate.js <scss-dir> <sections.json> [--section=<name>]
+ *
+ * 검증 항목:
+ *   1. SCSS의 모든 CSS 속성이 sections.json에 근거하는가
+ *   2. sections.json의 CSS 속성이 SCSS에 누락되지 않았는가
+ *   3. 금지 패턴 감지 (커스텀 함수, aspect-ratio 등)
+ *   4. 이미지 파일명 kebab-case 확인
+ *
+ * 출력: JSON { status, errors[], summary }
+ */
+
+import fs from 'fs';
+import path from 'path';
+
+// ─── Helpers ────────────────────────────────────────────────────────
+
+function camelToKebab(str) {
+  return str.replace(/([A-Z])/g, '-$1').toLowerCase();
+}
+
+function parseSCSS(scssContent) {
+  // 간이 SCSS 파서: 셀렉터 → CSS 속성 맵 추출
+  const blocks = {};
+  let currentSelector = null;
+  const lines = scssContent.split('\n');
+
+  for (const line of lines) {
+    const trimmed = line.trim();
+
+    // 빈 줄, 코멘트 스킵
+    if (!trimmed || trimmed.startsWith('//') || trimmed.startsWith('/*')) continue;
+
+    // 셀렉터 열기
+    const selectorMatch = trimmed.match(/^([.&][a-zA-Z0-9_-][a-zA-Z0-9_-]*(?:__[a-zA-Z0-9_-]+(?:-[a-zA-Z0-9_-]+)*)?)\s*\{/);
+    if (selectorMatch) {
+      currentSelector = selectorMatch[1];
+      if (!blocks[currentSelector]) blocks[currentSelector] = {};
+      continue;
+    }
+
+    // 블록 닫기
+    if (trimmed === '}') {
+      currentSelector = null;
+      continue;
+    }
+
+    // CSS 속성
+    if (currentSelector && trimmed.includes(':') && trimmed.endsWith(';')) {
+      const colonIdx = trimmed.indexOf(':');
+      const prop = trimmed.slice(0, colonIdx).trim();
+      const value = trimmed.slice(colonIdx + 1).replace(/;$/, '').trim();
+      blocks[currentSelector][prop] = value;
+    }
+  }
+
+  return blocks;
+}
+
+// ─── Forbidden Pattern Detection ────────────────────────────────────
+
+const FORBIDDEN_PATTERNS = [
+  { pattern: /@function\s/, id: 'custom-function', msg: '@function 자체 정의 금지' },
+  { pattern: /@mixin\s/, id: 'custom-mixin', msg: '@mixin 자체 정의 금지 (기존 @use만 허용)' },
+  { pattern: /aspect-ratio\s*:/, id: 'aspect-ratio', msg: 'aspect-ratio는 tree.json에 없는 속성' },
+  { pattern: /clamp\s*\(/, id: 'clamp', msg: 'clamp()는 font-size 외 사용 금지' },
+  { pattern: /\d+vw/, id: 'vw-unit', msg: 'vw 단위 사용 금지 (스태틱 구현)' },
+  { pattern: /@media\s/, id: 'media-query', msg: '@media 금지 (스태틱 구현)' },
+  { pattern: /@include\s/, id: 'include', msg: '@include 사용 시 기존 프로젝트 믹스인만 허용' },
+];
+
+function detectForbidden(scssContent, filePath) {
+  const errors = [];
+  const lines = scssContent.split('\n');
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    for (const { pattern, id, msg } of FORBIDDEN_PATTERNS) {
+      if (pattern.test(line)) {
+        // clamp in font-size is allowed
+        if (id === 'clamp' && line.includes('font-size')) continue;
+        errors.push({
+          priority: 'P1',
+          file: filePath,
+          line: i + 1,
+          type: `forbidden-${id}`,
+          actual: line.trim(),
+          message: msg
+        });
+      }
+    }
+  }
+
+  return errors;
+}
+
+// ─── CSS Value Comparison ───────────────────────────────────────────
+
+function collectCSSFromTree(node, sectionClass, parentPath, result) {
+  const css = node.css || {};
+  const children = node.children || [];
+  const name = node.name || '';
+  const type = node.type || '';
+
+  // BG 프레임 스킵
+  const nameLower = name.toLowerCase();
+  if (nameLower === 'bg' || nameLower.endsWith('-bg') || nameLower.startsWith('bg-')) return;
+
+  // 클래스명 재현 (figma-to-scss.js와 동일 로직)
+  let cls = name
+    .replace(/[^a-zA-Z0-9\s_-]/g, '')
+    .replace(/[\s_]+/g, '-')
+    .replace(/([a-z])([A-Z])/g, '$1-$2')
+    .toLowerCase()
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '') || null;
+
+  if (!cls) {
+    const idx = parentPath ? parentPath.split('-').length : 0;
+    if (type === 'TEXT') cls = `text-${idx}`;
+    else if (type === 'VECTOR') cls = `vector-${idx}`;
+    else if (type === 'RECTANGLE') cls = `rect-${idx}`;
+    else cls = `el-${idx}`;
+  }
+
+  const currentPath = parentPath ? `${parentPath}-${cls}` : cls;
+  const selector = `.${sectionClass}__${currentPath}`;
+
+  // CSS 속성 저장 (kebab 변환)
+  if (Object.keys(css).length > 0) {
+    const kebabCSS = {};
+    for (const [prop, value] of Object.entries(css)) {
+      if (prop.startsWith('_')) continue;
+      kebabCSS[camelToKebab(prop)] = String(value);
+    }
+    result[selector] = kebabCSS;
+  }
+
+  // 자식 재귀
+  const seenClasses = new Set();
+  for (const child of children) {
+    const childName = child.name || '';
+    const childLower = childName.toLowerCase();
+    if (childLower === 'bg' || childLower.endsWith('-bg') || childLower.startsWith('bg-')) continue;
+
+    let childCls = childName
+      .replace(/[^a-zA-Z0-9\s_-]/g, '')
+      .replace(/[\s_]+/g, '-')
+      .replace(/([a-z])([A-Z])/g, '$1-$2')
+      .toLowerCase()
+      .replace(/-+/g, '-')
+      .replace(/^-|-$/g, '') || null;
+    if (!childCls) childCls = `${child.type?.toLowerCase() || 'el'}-0`;
+
+    if (seenClasses.has(childCls)) continue;
+    seenClasses.add(childCls);
+    collectCSSFromTree(child, sectionClass, currentPath, result);
+  }
+}
+
+function compareCSSValues(scssBlocks, treeCSS, filePath) {
+  const errors = [];
+
+  // SCSS에 있지만 tree에 없는 속성 (임의 추가)
+  for (const [selector, props] of Object.entries(scssBlocks)) {
+    if (!selector.startsWith('.')) continue;
+    const treeProps = treeCSS[selector];
+
+    for (const [prop, value] of Object.entries(props)) {
+      // background-image url, background-size 등은 이미지 처리에서 추가됨
+      if (prop === 'background-image' || prop === 'background-size' ||
+          prop === 'background-position' || prop === 'background-repeat') continue;
+      // imageRef 주석 스킵
+      if (prop.startsWith('//')) continue;
+
+      if (!treeProps || !(prop in treeProps)) {
+        errors.push({
+          priority: 'P2',
+          file: filePath,
+          type: 'extra-property',
+          selector,
+          property: prop,
+          actual: value,
+          message: `SCSS에 있지만 sections.json에 없는 속성: ${prop}: ${value}`
+        });
+      } else if (treeProps[prop] !== value) {
+        errors.push({
+          priority: 'P1',
+          file: filePath,
+          type: 'value-mismatch',
+          selector,
+          property: prop,
+          expected: treeProps[prop],
+          actual: value,
+          message: `값 불일치: ${prop} expected="${treeProps[prop]}" actual="${value}"`
+        });
+      }
+    }
+  }
+
+  // tree에 있지만 SCSS에 없는 속성 (누락)
+  for (const [selector, props] of Object.entries(treeCSS)) {
+    const scssProps = scssBlocks[selector];
+    if (!scssProps) {
+      errors.push({
+        priority: 'P1',
+        file: filePath,
+        type: 'missing-selector',
+        selector,
+        message: `sections.json에 있지만 SCSS에 없는 셀렉터: ${selector}`
+      });
+      continue;
+    }
+    for (const [prop] of Object.entries(props)) {
+      if (!(prop in scssProps)) {
+        errors.push({
+          priority: 'P1',
+          file: filePath,
+          type: 'missing-property',
+          selector,
+          property: prop,
+          expected: props[prop],
+          message: `SCSS에 누락된 속성: ${selector} { ${prop}: ${props[prop]} }`
+        });
+      }
+    }
+  }
+
+  return errors;
+}
+
+// ─── Image Filename Check ───────────────────────────────────────────
+
+function checkImageFilenames(scssContent, filePath) {
+  const errors = [];
+  const urlRegex = /url\(['"]?([^'")\s]+)['"]?\)/g;
+  let match;
+
+  while ((match = urlRegex.exec(scssContent)) !== null) {
+    const imgPath = match[1];
+    const filename = path.basename(imgPath, path.extname(imgPath));
+
+    // 해시 파일명 감지 (16자 이상 hex)
+    if (/^[0-9a-f]{16,}$/.test(filename)) {
+      errors.push({
+        priority: 'P1',
+        file: filePath,
+        type: 'hash-filename',
+        actual: imgPath,
+        message: `해시 파일명 금지: ${imgPath} → kebab-case로 변경 필요`
+      });
+    }
+  }
+
+  return errors;
+}
+
+// ─── Main ───────────────────────────────────────────────────────────
+
+function main() {
+  const args = process.argv.slice(2);
+  if (args.length < 2) {
+    console.error('Usage: node figma-validate.js <scss-dir> <sections.json> [--section=<name>]');
+    process.exit(1);
+  }
+
+  const scssDir = args[0];
+  const sectionsFile = args[1];
+  let sectionFilter = '';
+
+  for (const arg of args.slice(2)) {
+    if (arg.startsWith('--section=')) sectionFilter = arg.slice(10);
+  }
+
+  // 입력 읽기
+  const data = JSON.parse(fs.readFileSync(sectionsFile, 'utf-8'));
+  let sections = data.sections || [];
+
+  if (sectionFilter) {
+    sections = sections.filter(s => s.name === sectionFilter);
+  }
+
+  const allErrors = [];
+
+  for (const section of sections) {
+    const sectionClass = section.name
+      .replace(/[^a-zA-Z0-9\s_-]/g, '')
+      .replace(/[\s_]+/g, '-')
+      .replace(/([a-z])([A-Z])/g, '$1-$2')
+      .toLowerCase()
+      .replace(/-+/g, '-')
+      .replace(/^-|-$/g, '');
+
+    const scssFile = path.join(scssDir, `_${sectionClass}.scss`);
+    if (!fs.existsSync(scssFile)) {
+      allErrors.push({
+        priority: 'P1',
+        type: 'missing-file',
+        expected: scssFile,
+        message: `SCSS 파일 없음: ${scssFile}`
+      });
+      continue;
+    }
+
+    const scssContent = fs.readFileSync(scssFile, 'utf-8');
+
+    // 1. 금지 패턴 검사
+    allErrors.push(...detectForbidden(scssContent, scssFile));
+
+    // 2. 이미지 파일명 검사
+    allErrors.push(...checkImageFilenames(scssContent, scssFile));
+
+    // 3. CSS 값 대조
+    const scssBlocks = parseSCSS(scssContent);
+    const treeCSS = {};
+
+    // 루트 섹션 CSS
+    const rootSelector = `.${sectionClass}`;
+    if (section.css && Object.keys(section.css).length > 0) {
+      treeCSS[rootSelector] = {};
+      for (const [prop, value] of Object.entries(section.css)) {
+        if (!prop.startsWith('_')) treeCSS[rootSelector][camelToKebab(prop)] = String(value);
+      }
+    }
+
+    // 자식 CSS 재귀 수집
+    for (const child of (section.children || [])) {
+      collectCSSFromTree(child, sectionClass, '', treeCSS);
+    }
+
+    allErrors.push(...compareCSSValues(scssBlocks, treeCSS, scssFile));
+  }
+
+  // 결과 출력
+  const p1 = allErrors.filter(e => e.priority === 'P1').length;
+  const p2 = allErrors.filter(e => e.priority === 'P2').length;
+
+  const result = {
+    status: p1 === 0 ? 'PASS' : 'FAIL',
+    errors: allErrors,
+    summary: { p1, p2, total: allErrors.length }
+  };
+
+  console.log(JSON.stringify(result, null, 2));
+  process.exit(p1 > 0 ? 1 : 0);
+}
+
+main();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@su-record/vibe",
-  "version": "2.8.53",
+  "version": "2.9.2",
   "description": "AI Coding Framework for Claude Code — 56 agents, 45 skills, multi-LLM orchestration",
   "type": "module",
   "main": "dist/cli/index.js",

package/skills/vibe.figma/SKILL.md

@@ -84,7 +84,7 @@ URL 분류 (자동):
   ROOT name에 "MO" → 모바일, "PC" → 데스크탑
 
 스토리보드 분석:
-  depth=2로 프레임 수집 → name 패턴으로 분류
+  depth=3으로 프레임 수집 → name 패턴으로 분류
   SPEC(기능정의서) → CONFIG(해상도) → PAGE(메인 섹션) → SHARED(공통)
   PDF/이미지도 동일 구조 추출
 
@@ -120,25 +120,63 @@ MO/PC 동시 추출 (각각 독립 워커):
 
 ---
 
-## Phase 3: 리매핑 ← Synthesis (순차, 리더 필수)
+## Phase 3: 데이터 정제 ← Synthesis (BP별 독립)
 
-**MO + PC 있을 때만 실행. 단일 BP면 스킵.**
-**코디네이터 패턴: 리더가 직접 MO↔PC 매칭. 워커 위임 금지.**
-**리더가 두 tree를 모두 이해한 상태에서 diff를 추출해야 품질 보장.**
+**각 BP의 tree.json을 섹션별로 분할 + 정제한다.**
+**MO↔PC 매칭(반응형)은 이 단계에서 하지 않는다.**
 
-### MO↔PC 반응형 매칭
+### 핵심 원칙
 
 ```
-1. 섹션 매칭: 1depth name 기준 (완전일치 → prefix → 순서)
-2. 노드 매칭: 재귀적 name 매칭 → CSS diff 추출
-3. diff: 같은 값 유지, 다른 값만 @media 오버라이드
+⛔ BP별 독립 정제. MO와 PC를 섞지 않는다.
+⛔ 정제된 JSON은 Phase 4의 유일한 입력이다.
+⛔ 섹션별 전체 하위 트리(children 재귀)를 반드시 포함해야 한다.
+```
+
+### 출력
 
-출력 → /tmp/{feature}/remapped.json:
-  sections:
-    - name: Hero
-      mo: { nodeId, css, children }
-      pcDiff: { css: { 차이만 }, children }
-      images: { mo: 'bg/hero-bg.webp', pc: 'bg/hero-bg-pc.webp' }
+```
+/tmp/{feature}/
+  mo-main/
+    sections.json    ← MO 정제 결과
+  pc-main/
+    sections.json    ← PC 정제 결과
+
+sections.json 구조:
+  {
+    meta: { feature, designWidth, bp(해당 BP) },
+    sections: [
+      {
+        name: "Hero",
+        nodeId, name, type, size, css,
+        text,          // TEXT 노드만
+        imageRef,      // 이미지 fill
+        fills,         // 다중 fill (2개 이상)
+        layoutSizingH, // HUG/FILL/FIXED
+        layoutSizingV,
+        children: [    // ⛔ 전체 하위 트리 재귀 — 잎 노드까지
+          { nodeId, name, type, size, css, children: [...] }
+        ],
+        images: {
+          bg: "bg/hero-bg.webp",
+          content: ["content/hero-title.webp"]
+        }
+      }
+    ]
+  }
+```
+
+### 노드 정제 규칙
+
+```
+tree.json → sections.json 변환 시 정제:
+  1. 크기 0px 노드 → 제거
+  2. VECTOR 장식선 (w/h ≤ 2px) → 제거
+  3. isMask 노드 → 제거
+  4. BG 프레임 → children에서 분리, images.bg로 이동
+  5. 벡터 글자 GROUP → children에서 분리, images.content에 추가
+  6. 디자인 텍스트 (fills 다중/gradient, effects 있는 TEXT) → images.content에 추가
+  7. 나머지 노드 → children에 유지 (CSS 포함, 재귀)
 ```
 
 ### 멀티 프레임 (같은 BP, 다른 페이지)
@@ -150,20 +188,43 @@ MO/PC 동시 추출 (각각 독립 워커):
 
 ---
 
-## Phase 4: 순차 코드 생성 ← Implement (영역별)
+## Phase 4: BP별 스태틱 구현 ← Implement (BP별 순차)
 
 **→ vibe.figma.convert 스킬의 규칙을 따른다.**
-**코디네이터 패턴: 섹션 = 영역. 한 영역에 한 워커만. 충돌 방지.**
+**⛔ MO 먼저 전체 구현 → 검증 통과 → PC 구현. 반응형 변환은 하지 않는다.**
+**⛔ CSS 값은 Figma 원본 px 그대로. vw 변환, clamp, @media 금지.**
 
 ```
-⛔ 병렬 금지. 한 섹션씩 순차:
-  1. tree.json에서 섹션 노드 Read
-  2. 이미지 vs HTML 판별 테이블 작성 (BLOCKING)
-  3. 기계적 매핑 + Claude 시맨틱 보강
-  4. 브라우저 확인 → OK → 다음 섹션
+Phase 4A: MO 스태틱 구현
+  입력: /tmp/{feature}/mo-main/sections.json
+  ⛔ 병렬 금지. 한 섹션씩 순차:
+    1. sections.json에서 해당 섹션 Read
+    2. 이미지 vs HTML 판별 테이블 작성 (BLOCKING)
+    3. figma-to-scss.js → SCSS 골격 자동 생성 (px 그대로)
+    4. Claude: HTML 구조 + 시맨틱 태그 + 레이아웃 + 인터랙션
+    5. figma-validate.js → SCSS vs sections.json 대조
+       ├─ PASS → 다음 섹션
+       └─ FAIL → 불일치 수정 → 5번 재실행 (P1=0 까지, 횟수 제한 없음)
+  → Phase 5 (MO 컴파일) → Phase 6 (MO 시각 검증)
+
+Phase 4B: PC 스태틱 구현
+  입력: /tmp/{feature}/pc-main/sections.json
+  MO와 동일한 프로세스
+  → Phase 5 (PC 컴파일) → Phase 6 (PC 시각 검증)
+
+Phase 4C: 반응형 통합 (MO+PC 모두 검증 통과 후)
+  → 별도 플로우로 수립 (TODO)
+
+Claude의 역할 (제한적):
+  ✅ 이미지 분류: BG / 콘텐츠 / 장식 / 벡터 글자
+  ✅ HTML 시맨틱: section/h1/p/button 태그 선택
+  ✅ 컴포넌트 분리: v-for 반복, 공유 컴포넌트
+  ✅ 인터랙션: @click, 상태 변수, 조건부 렌더링
+  ❌ SCSS CSS 값 수정 금지 (figma-to-scss.js 출력 그대로 사용)
+  ❌ vw 변환, clamp, @media, 커스텀 함수/믹스인 생성 금지
 
 SCSS Setup (첫 섹션 전):
-  index.scss, _tokens.scss, _mixins.scss, _base.scss
+  index.scss, _tokens.scss, _base.scss
   토큰 매핑: project-tokens.json에서 기존 토큰 참조 → 매칭 안 되면 새 생성
 
 컴포넌트 매칭 (각 섹션 전):
@@ -191,12 +252,17 @@ SCSS Setup (첫 섹션 전):
 에러 시: 파싱 → 자동 수정 → 재체크
 3라운드 실패: 에러 목록을 사용자에게 보고 (Phase 6 진행 불가)
 완료 시: dev 서버 PID 보존 → Phase 6에서 사용
+
+⛔ Phase 5 통과 후 반드시 Phase 6 진입. "완료 요약" 출력 금지.
+⛔ Phase 6 없이 작업 완료 선언 금지.
 ```
 
 ---
 
-## Phase 6: 시각 검증 루프 ← Verify (병렬)
+## Phase 6: 시각 검증 루프 ← Verify (병렬) ⛔ MANDATORY
 
+**⛔ Phase 6은 선택이 아닌 필수. Phase 5 통과 즉시 자동 진입.**
+**⛔ Phase 6 미실행 시 전체 작업은 "미완료" 상태.**
 **코디네이터 패턴: 독립 섹션별 검증을 워커로 병렬 실행 가능.**
 
 ```
@@ -212,4 +278,6 @@ SCSS Setup (첫 섹션 전):
 
 반응형: MO 검증 후 viewport 변경 → PC 스크린샷과 동일 루프
 종료: 브라우저 + dev 서버 정리
+
+⛔ Phase 6 완료 후에만 "완료 요약" 출력 허용.
 ```

package/skills/vibe.figma/templates/component-spec.md

@@ -0,0 +1,168 @@
+# component-spec.json 템플릿
+
+architect 에이전트가 sections.json을 분석하여 생성하는 설계서.
+builder 에이전트는 이 설계서대로만 구현한다.
+
+## 생성 규칙
+
+```
+입력: /tmp/{feature}/{bp}-main/sections.json
+출력: /tmp/{feature}/{bp}-main/component-spec.json
+
+⛔ CSS 값을 결정하지 않는다 (figma-to-scss.js가 담당)
+⛔ SCSS 파일을 생성하지 않는다
+✅ HTML 구조, 태그 선택, 컴포넌트 분리, 이미지 분류만 결정
+```
+
+## 구조
+
+```json
+{
+  "meta": {
+    "feature": "winter-pcbang",
+    "bp": "mo",
+    "designWidth": 720,
+    "stack": "nuxt2-vue2-scss"
+  },
+
+  "components": [
+    {
+      "name": "KidSection",
+      "sectionName": "KID",
+      "file": "components/{feature}/KidSection.vue",
+      "scssFile": "_kid.scss",
+      "tag": "section",
+      "id": "kid",
+
+      "bg": {
+        "image": "bg/kid-bg.webp",
+        "method": "css-background"
+      },
+
+      "elements": [
+        {
+          "class": "btn-login",
+          "tag": "button",
+          "role": "interactive",
+          "event": { "type": "click", "action": "emit('login')" },
+          "children": [
+            {
+              "class": "btn-login-btn-login",
+              "tag": "div",
+              "role": "layout"
+            },
+            {
+              "class": "btn-login-btn-login-krafton-id",
+              "tag": "img",
+              "role": "content-image",
+              "src": "content/kid-krafton-id.webp",
+              "alt": "KRAFTON ID 로그인"
+            }
+          ]
+        },
+        {
+          "class": "krafton-id",
+          "tag": "p",
+          "role": "text",
+          "text": "KRAFTON ID로 로그인하고 이벤트에 참여하세요!..."
+        },
+        {
+          "class": "steam-account",
+          "tag": "div",
+          "role": "layout",
+          "children": [
+            {
+              "class": "steam-account-frame-27161",
+              "tag": "a",
+              "role": "link",
+              "href": "#",
+              "children": [
+                {
+                  "class": "steam-account-frame-27161-krafton-id-steam",
+                  "tag": "span",
+                  "role": "text",
+                  "text": "KRAFTON ID Steam 연동 안내"
+                }
+              ]
+            },
+            {
+              "class": "steam-account-kakao-games-krafton-id",
+              "tag": "p",
+              "role": "text",
+              "text": "Kakao games는 게임 내에서만..."
+            }
+          ]
+        }
+      ],
+
+      "imageClassification": [
+        {
+          "node": "BG",
+          "decision": "bg",
+          "reason": "name='BG', 합성 배경, TEXT 자식 없음"
+        },
+        {
+          "node": "KRAFTON ID 로그인",
+          "decision": "content-image",
+          "reason": "RENDERED_IMAGE (디자인 텍스트, outline 효과)"
+        },
+        {
+          "node": "볼트_2",
+          "decision": "skip",
+          "reason": "5x5 장식 볼트, 동일 imageRef 4개 → CSS로 대체 가능"
+        }
+      ]
+    }
+  ],
+
+  "shared": [],
+
+  "tokens": {
+    "note": "figma-to-scss.js가 _tokens.scss 자동 생성. architect는 참조만."
+  }
+}
+```
+
+## 판단 기준
+
+### tag 선택
+| sections.json 조건 | tag |
+|---|---|
+| 섹션 루트 | `section` |
+| type=TEXT + 제목 역할 (name에 title/heading) | `h2`~`h6` |
+| type=TEXT + 설명 | `p` |
+| type=TEXT + 라벨 | `span` / `strong` |
+| name에 btn/button/CTA | `button` |
+| name에 link/연동/안내 + href 가능 | `a` |
+| type=RENDERED_IMAGE | `img` |
+| imageRef 있음 + 콘텐츠 이미지 | `img` |
+| INSTANCE 반복 2+ | 부모에 v-for 표시 |
+| 나머지 FRAME/GROUP | `div` |
+
+### role 종류
+| role | 의미 |
+|---|---|
+| `bg` | 배경 (CSS background-image) |
+| `layout` | 레이아웃 컨테이너 |
+| `text` | 텍스트 콘텐츠 |
+| `content-image` | 콘텐츠 이미지 (img 태그) |
+| `interactive` | 클릭/인터랙션 가능 |
+| `link` | 네비게이션 링크 |
+| `decoration` | 장식 (aria-hidden) |
+| `list` | 반복 구조 (v-for) |
+| `skip` | 무시 (너무 작거나 불필요) |
+
+### 이미지 분류 (imageClassification)
+⛔ 모든 이미지 관련 노드에 대해 반드시 분류 기록.
+| decision | 조건 |
+|---|---|
+| `bg` | isBGFrame, TEXT 자식 없음 |
+| `content-image` | RENDERED_IMAGE, 벡터 글자, 디자인 텍스트 |
+| `asset` | imageRef 있는 아이콘/썸네일 |
+| `skip` | 너무 작은 장식 (≤5px), CSS로 대체 가능 |
+| `html` | TEXT 자식 포함, 인터랙티브, 동적 데이터 |
+
+### 공유 컴포넌트 (shared)
+- 동일 구조 INSTANCE가 2+ 섹션에서 사용 → shared
+- 3+ 사용 시 필수 분리
+- Props/Slots 인터페이스 정의 필수