Kei API 연동 복구 + 실장 정보구조 분석 + 팀장 role 기반 배치

1단계 (실장): - Kei API 연동 복구 (타임아웃 무제한, Kei persona 사고) - 정보 구조 파악 단계 추가 (본문 흐름 vs 참조 분리) - 각 꼭지에 role(flow/reference) 부여 - fallback: Anthropic 직접 호출 (info_structure + role 포함) 2단계 (팀장): - info_structure + role 기반 배치 규칙 추가 - flow → 좌측/메인, reference → 우측/사이드 - detail_target → 본문 제외 - 중복 방지 규칙 파이프라인: - pipeline.py import re 추가 Figma 관련 (다른 Claude Code 작업분): - catalog.yaml, figma-screenshots, figma-analysis, 테스트 HTML Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-25 11:33:17 +09:00
parent 33bd3a56c6
commit 7b034b04b6
24 changed files with 2400 additions and 90 deletions
--- a/templates/catalog.yaml
+++ b/templates/catalog.yaml
@@ -0,0 +1,260 @@
+# Design Agent 블록 카탈로그
+# 디자인 팀장이 콘텐츠에 적합한 블록을 선택할 때 참조하는 메뉴판
+#
+# 규칙:
+# - when: 이 블록을 선택해야 하는 상황
+# - not_for: 이 블록을 선택하면 안 되는 상황 (유사 블록과 구분 핵심)
+# - slots.required: 반드시 채워야 하는 슬롯
+# - slots.optional: 있으면 좋지만 없어도 됨
+# - character_limits: 팀장의 글자 수 가이드 참고용 (하드코딩 기준 아님, 판단의 참고치)
+
+version: "1.0"
+
+blocks:
+
+  # ──────────────────────────────────────
+  # 1. 강조 인용 (quote-block)
+  # ──────────────────────────────────────
+  - id: quote-block
+    name: 강조 인용
+    template: blocks/quote-block.html
+    visual: "좌측 컬러 라인(빨간색) + 연한 배경 + 인용 텍스트. 출처 표기 가능."
+    when: >
+      문제 제기, 핵심 주장, 정의 강조할 때.
+      원문에서 따온 중요한 문장을 부각시킬 때.
+      슬라이드 상단에 배치하여 이슈를 먼저 던질 때.
+    not_for: >
+      일반 설명문 (일반 텍스트는 card-grid이나 본문 영역 사용).
+      사례 나열 (출처가 있는 사례는 example-card 사용).
+      결론 요약 (하단 결론은 conclusion-bar 사용).
+    slots:
+      required:
+        - quote_text
+      optional:
+        - source
+    character_limits:
+      quote_text: 150
+      source: 50
+
+  # ──────────────────────────────────────
+  # 2. 카드 그리드 (card-grid)
+  # ──────────────────────────────────────
+  - id: card-grid
+    name: 카드 그리드
+    template: blocks/card-grid.html
+    visual: "2~4열 카드 나란히. 각 카드 상단에 컬러 액센트 라인. 아이콘/제목/카테고리/설명/출처."
+    when: >
+      용어를 여러 개 정의할 때 (2~4개).
+      개념/기능/특성을 나란히 비교 없이 나열할 때.
+      각 항목에 제목+설명+출처가 있을 때.
+    not_for: >
+      A vs B 직접 비교 (comparison 사용).
+      출처가 있는 정책 사례 인용 (example-card 사용, 향후 추가).
+      기능 목록이 아이콘 중심일 때 (icon-list 사용, 향후 추가).
+      순서가 있는 항목 (process 사용).
+    slots:
+      required:
+        - "cards[]"
+      optional: []
+    card_fields:
+      required:
+        - title
+        - description
+      optional:
+        - icon
+        - category
+        - color
+        - source
+    character_limits:
+      title: 20
+      category: 15
+      description: 80
+      source: 40
+
+  # ──────────────────────────────────────
+  # 3. 비교 (comparison)
+  # ──────────────────────────────────────
+  - id: comparison
+    name: 2단 비교
+    template: blocks/comparison.html
+    visual: "좌우 2단 병렬. 중앙 세로 구분선. 좌측은 파란 액센트, 우측은 빨간 액센트."
+    when: >
+      A vs B 직접 비교할 때.
+      장단점, Before/After, 현재/미래를 대비할 때.
+      두 개념의 차이를 명확히 보여줄 때.
+    not_for: >
+      3개 이상 항목 비교 (comparison-table 사용).
+      비교가 아닌 단순 나열 (card-grid 사용).
+      수치 비교 (big-number 사용, 향후 추가).
+    slots:
+      required:
+        - left_title
+        - left_content
+        - right_title
+        - right_content
+      optional:
+        - left_subtitle
+        - right_subtitle
+    character_limits:
+      left_title: 15
+      right_title: 15
+      left_content: 200
+      right_content: 200
+      left_subtitle: 30
+      right_subtitle: 30
+
+  # ──────────────────────────────────────
+  # 4. 관계도 (relationship)
+  # ──────────────────────────────────────
+  - id: relationship
+    name: 관계도 (벤 다이어그램)
+    template: blocks/relationship.html
+    visual: "큰 원(상위 개념) 안에 작은 원 2~3개(하위 요소). 하단에 관계 설명."
+    when: >
+      상위-하위 관계, 포함 관계를 시각화할 때.
+      기술 융합/통합 구조를 보여줄 때 (예: DX = GIS + BIM + DT).
+      2~3개 요소가 하나의 큰 개념에 속함을 보여줄 때.
+    not_for: >
+      순서가 있는 흐름 (process 사용).
+      대등한 비교 (comparison 사용).
+      4개 이상 요소 나열 (card-grid 사용).
+    slots:
+      required:
+        - center_label
+        - "items[]"
+      optional:
+        - center_sub
+        - description
+    item_fields:
+      required:
+        - label
+      optional:
+        - color
+    character_limits:
+      center_label: 15
+      center_sub: 20
+      item_label: 10
+      description: 100
+
+  # ──────────────────────────────────────
+  # 5. 프로세스 (process)
+  # ──────────────────────────────────────
+  - id: process
+    name: 단계 흐름
+    template: blocks/process.html
+    visual: "가로 방향 단계. 각 단계는 번호 원형 + 제목 + 설명. 단계 사이에 → 화살표."
+    when: >
+      순서가 있는 절차를 보여줄 때 (1→2→3→4).
+      워크플로우, 실행 단계, 파이프라인.
+      시간 순서가 아닌 논리적 순서.
+    not_for: >
+      시간 기반 순서 (timeline 사용, 향후 추가).
+      순서 없는 항목 나열 (card-grid 사용).
+      2개 비교 (comparison 사용).
+    slots:
+      required:
+        - "steps[]"
+      optional: []
+    step_fields:
+      required:
+        - title
+      optional:
+        - number
+        - description
+    character_limits:
+      title: 15
+      description: 60
+
+  # ──────────────────────────────────────
+  # 6. 결론 바 (conclusion-bar)
+  # ──────────────────────────────────────
+  - id: conclusion-bar
+    name: 결론 바
+    template: blocks/conclusion-bar.html
+    visual: "전체 너비 진한 배경(primary색). 중앙 정렬 텍스트. 라벨 + 핵심 한 줄."
+    when: >
+      슬라이드 하단에 핵심 메시지를 한 줄로 마무리할 때.
+      전체 내용의 결론, 요약, 시사점을 강조할 때.
+      항상 슬라이드 맨 아래에 배치.
+    not_for: >
+      본문 중간의 강조 (quote-block 사용).
+      여러 줄의 요약 (quote-block 또는 card-grid 사용).
+    slots:
+      required:
+        - conclusion_text
+      optional:
+        - label
+    character_limits:
+      conclusion_text: 80
+      label: 10
+
+  # ──────────────────────────────────────
+  # 7. 비교 테이블 (comparison-table)
+  # ──────────────────────────────────────
+  - id: comparison-table
+    name: 비교 테이블
+    template: blocks/comparison-table.html
+    visual: "표 형태. 진한 배경 헤더 행. 짝수 행 배경 교차. 첫 열 굵은 글씨."
+    when: >
+      3개 이상 항목을 여러 기준으로 비교할 때.
+      다차원 비교, 기능 매트릭스, 스펙 비교.
+      행/열이 5개 이상인 구조화된 데이터.
+    not_for: >
+      2개 항목 비교 (comparison 사용).
+      정의/설명 나열 (card-grid 사용).
+      순서가 있는 데이터 (process 또는 timeline 사용).
+    slots:
+      required:
+        - "headers[]"
+        - "rows[][]"
+      optional: []
+    character_limits:
+      header: 15
+      cell: 40
+
+# ──────────────────────────────────────
+# 레이아웃 옵션
+# ──────────────────────────────────────
+layouts:
+
+  - id: "65-35"
+    name: "6.5:3.5 좌우 분할"
+    grid_columns: "6.5fr 3.5fr"
+    when: "좌측 메인 콘텐츠(인용+사례+이미지) + 우측 보조(정의/용어)"
+
+  - id: "50-50"
+    name: "5:5 균등 분할"
+    grid_columns: "1fr 1fr"
+    when: "대등한 비교, 병렬 콘텐츠"
+
+  - id: "single"
+    name: "단일 컬럼"
+    grid_columns: "1fr"
+    when: "프로세스 흐름, 타임라인, 단순 구조, 블록이 1~2개일 때"
+
+  - id: "35-65"
+    name: "3.5:6.5 좌우 분할"
+    grid_columns: "3.5fr 6.5fr"
+    when: "좌측 요약/네비게이션 + 우측 메인 콘텐츠"
+
+  - id: "40-60"
+    name: "4:6 좌우 분할"
+    grid_columns: "4fr 6fr"
+    when: "좌측 설명/정의 + 우측 시각화(관계도/이미지)"
+
+  - id: "60-40"
+    name: "6:4 좌우 분할"
+    grid_columns: "6fr 4fr"
+    when: "좌측 메인 텍스트 + 우측 보조 정보"
+
+# ──────────────────────────────────────
+# 향후 추가 예정 블록 (Figma 추출 후)
+# ──────────────────────────────────────
+# - example-card: 출처+불릿 사례 카드
+# - image-block: 이미지 블록 (full/side/thumb)
+# - image-gallery: 이미지 갤러리 (2col/3col/2x2)
+# - timeline: 타임라인 (vertical/horizontal)
+# - big-number: 핵심 지표 (큰 숫자)
+# - icon-list: 아이콘 리스트
+# - section-title: 섹션 타이틀 (영문+한글)
+# - details-block: 자세히보기 (<details>/<summary>)