04. design_agent 추가 — 콘텐츠 시각 구조화 슬라이드 생성기

5단계 AI 파이프라인: 1. Kei 실장(Opus via Kei API) — 꼭지 추출 + 정보 구조 파악 2. 디자인 팀장 — FAISS 블록 검색 + Opus 추천 + Sonnet 블록 매핑 3. Kei 편집자(Kei API) — 도메인 전문 텍스트 정리 4. 디자인 실무자(Sonnet + Jinja2) — CSS 변수 조정 + HTML 조립 5. 디자인 팀장(Sonnet) — 균형 재검토 (최대 2회 루프) 블록 라이브러리 46개 (6 카테고리) + _legacy 13개 FAISS 블록 검색 (bge-m3, 1024차원) SVG N개 동적 배치 (cos/sin 좌표 계산) Pillow 이미지 크기 측정 + base64 인라인 컨테이너 예산 기반 블록 배치 (zone별 높이 px) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-25 18:47:13 +09:00
parent 9b905a4313
commit 688ddbbb17
244 changed files with 23955 additions and 0 deletions
--- a/design_agent/docs/figma-analysis/DESIGN-ANALYSIS.md
+++ b/design_agent/docs/figma-analysis/DESIGN-ANALYSIS.md
@@ -0,0 +1,254 @@
+# Figma 디자인 분석 보고서
+
+## 파일 정보
+- **파일명:** 바론컨설턴트 홈페이지_기획팀공유
+- **페이지:** 바론 공유 2025.05.13 (node: 1574-6254)
+- **분석일:** 2026-03-25
+
+---
+
+## 1. 전체 구조
+
+### 메인 페이지 (3장)
+| 섹션 | 프레임 | 크기 | 스크린샷 |
+|------|--------|------|---------|
+| 1장 바론컨설턴트 | 1-1 미래 | 1920x5990 | `1장_1-1_미래.png` |
+| | 기술 | 1920x5677 | `1장_기술.png` |
+| | 가치 | 1920x4157 | `1장_가치.png` |
+
+### 자세히보기 페이지 (13개 서브 프레임)
+| 섹션 | 프레임 | 크기 | 스크린샷 |
+|------|--------|------|---------|
+| 2-1장 건설산업 DX | 2-1_01 건설산업 | 920x1231 | `2-1_01_건설산업.png` |
+| | 2-1_02 BIM | 920x2179 | `2-1_02_BIM.png` |
+| | 2-1_03 GIS | 920x2208 | `2-1_03_GIS.png` |
+| | 2-1_04 디지털트윈 | 920x1651 | `2-1_04_디지털트윈.png` |
+| 2-2장 DX와 SW | 2-2_01 | 920x3013 | `2-2_01.png` |
+| | 2-2_02 | 920x1742 | `2-2_02.png` |
+| | 2-2_03 | 920x2129 | `2-2_03.png` |
+| | 2-2_04 | 920x1814 | `2-2_04.png` |
+| 2-3장 DX 활용 | 2-3_01 ~ 2-3_05 | 920x2300~3016 | `2-3_01~05.png` |
+
+---
+
+## 2. 추출된 디자인 토큰
+
+### 색상 팔레트
+
+| 용도 | Figma 값 | 현재 tokens.css | 비고 |
+|------|----------|---------------|------|
+| **메인 텍스트** | `#000000` | `--color-primary: #1e293b` | Figma가 더 진함 |
+| **포인트 (파란)** | `#004cbe` | `--color-accent: #2563eb` | Figma가 더 진한 남색 |
+| **포인트 밝은** | `#006aff` | 없음 | **추가 필요:** `--color-accent-bright` |
+| **포인트 하늘** | `#6bcdff` | 없음 | **추가 필요:** `--color-accent-light` |
+| **포인트 하늘2** | `#00aaff` | 없음 | 참고 |
+| **포인트 파랑** | `#008fff`, `#007cff` | 없음 | 원형 마커 색상 |
+| **배경 밝은** | `#f6f7f9` | `--color-bg-subtle: #f8fafc` | 거의 동일 |
+| **배경 흰** | `#ffffff` | `--color-bg: #ffffff` | 동일 |
+| **섹션 타이틀** | `#ffffff` (배경 위) | - | 다크 배경 위 흰 텍스트 |
+
+### 폰트 체계
+
+| 용도 | Figma | 현재 tokens.css | 비고 |
+|------|-------|---------------|------|
+| **페이지 타이틀** | Noto Sans CJK KR, 35px, w700 | `--font-title: 2rem (32px)` | Figma가 약간 큼 |
+| **영문 서브타이틀** | 15px, w400 | 없음 | section_title 영문 |
+| **꼭지 제목** | 24px, w700 | `--font-subtitle: 1.25rem (20px)` | Figma가 큼 |
+| **본문** | 16px, w400 | `--font-body: 0.95rem (15.2px)` | 거의 동일 |
+| **카드 내 제목** | 14px, w700 | `--font-caption: 0.8rem (12.8px)` | Figma가 큼 |
+| **카드 내 본문** | 14px, w400 | `--font-caption` | 동일 |
+| **태그/라벨** | 20px, w700 | 없음 | DX/BIM/VS 라벨 |
+| **소제목** | 13px, w400 | `--font-small: 0.7rem (11.2px)` | Figma가 약간 큼 |
+
+### 간격/크기
+
+| 요소 | Figma 값 | 비고 |
+|------|----------|------|
+| 프레임 폭 | 920px | 자세히보기 프레임 |
+| 섹션 타이틀 영역 | 249x73px | 영문+한글 2줄 |
+| 꼭지 제목+설명 영역 | 742x68~78px | 좌: 제목 240px, 우: 설명 422px |
+| 카드 (3열) | 240x365px 각각 | 이미지+제목+설명 |
+| 이미지 그리드 | 460x354px (2열) | 그라데이션 오버레이 포함 |
+| 비교 박스 | 327x116px, 325x116px | 나란히 2개 |
+| 원형 마커 | 10x10px, 151x151px | 작은 점, 큰 원 |
+| 배경 헤더 영역 | 963x515px | 그라데이션+웨이브 |
+
+---
+
+## 3. 발견된 재사용 컴포넌트
+
+### 공통 컴포넌트 (모든 자세히보기에 반복)
+
+#### A. section_title (섹션 타이틀)
+```
+구조: FRAME 249x73
+  ├── TEXT 15px/w400 #ffffff — 영문 (예: "Building Information Modeling")
+  └── TEXT 35px/w700 #ffffff — 한글 (예: "건설정보모델링(BIM)")
+배경: 파란 그라데이션 헤더 위에 위치
+```
+- **모든 자세히보기 프레임의 상단**에 동일 구조로 반복
+- 영문 서브타이틀 + 한글 메인 타이틀
+- 흰색 텍스트 + 다크 배경
+
+#### B. bg (배경 헤더)
+```
+구조: GROUP 1319x671
+  ├── Mask group (그라데이션 + 웨이브 이미지)
+  ├── RECTANGLE 그라데이션 (파란→투명)
+  ├── RECTANGLE 흰색 배경
+  └── shape (벡터 웨이브 라인 7줄)
+```
+- 상단 파란 그라데이션 + 웨이브 패턴
+- **이미지로 export해서 사용해야 하는 영역** (CSS 재현 불가)
+
+#### C. sub_제목,내용 (꼭지 제목+설명)
+```
+구조: FRAME 742x68~78
+  ├── TEXT 24px/w700 #004cbe — 질문/소제목 (좌측 240px)
+  └── TEXT 16px/w400 #000000 — 설명 (우측 422px)
+```
+- 좌: 파란 굵은 제목 (질문형)
+- 우: 검정 본문 설명
+- 2단 가로 배치 (240:422 비율)
+
+#### D. close 버튼
+```
+구조: FRAME 40x40
+  └── VECTOR 23x23 #ffffff — X 아이콘
+```
+
+### 콘텐츠 컴포넌트
+
+#### E. 카드 3열 (2-1_02 BIM 페이지)
+```
+구조: GROUP 751x377
+  ├── FRAME 744x365 (카드 3장 컨테이너)
+  │   ├── RECTANGLE 240x365 #ffffff (카드1)
+  │   ├── RECTANGLE 240x365 #ffffff (카드2)
+  │   └── RECTANGLE 240x365 #ffffff (카드3)
+  ├── 이미지 3장 (각 카드 상단)
+  └── FRAME 240x180~188 (각 카드 텍스트)
+      ├── TEXT 14px/w700 — 단계명 (영문 포함)
+      ├── RECTANGLE 구분선
+      └── TEXT 14px/w400 — 설명 불릿
+```
+- 카드 크기: 240x365px
+- 상단: 이미지 (시공/설계/유지관리)
+- 중간: 14px 굵은 제목 (색상으로 구분: `#00aaff`, `#006aff`, `#004cbe`)
+- 하단: 14px 일반 설명
+
+#### F. 비교 박스 2열 (2-1_02 BIM 페이지)
+```
+구조: 2개 GROUP 나란히
+  ├── GROUP 327x116
+  │   ├── RECTANGLE #006aff (배경)
+  │   └── FRAME (그라데이션 내부)
+  └── GROUP 325x116
+      ├── RECTANGLE #006aff (배경)
+      └── FRAME (그라데이션 내부)
+ DX/BIM/VS 라벨 (20px/w700, #ffffff)
+```
+- 파란 배경 박스 2개 나란히
+- 내부에 방사형 그라데이션
+- 가운데 "VS" 라벨
+
+#### G. 이미지 그리드 2열 (2-1_02 BIM 페이지)
+```
+구조: 2개 GROUP 나란히
+  ├── GROUP 460x354
+  │   ├── RECTANGLE 그라데이션 오버레이
+  │   └── RECTANGLE IMG (실제 이미지)
+  └── GROUP 460x354
+      ├── RECTANGLE 그라데이션 오버레이
+      └── RECTANGLE IMG (실제 이미지)
+```
+- 2열 이미지 나란히 (460x354 각)
+- 이미지 위에 그라데이션 오버레이 (어두워지는 효과)
+
+#### H. 산맥 시각화 (2-1_02 BIM 페이지)
+```
+구조: GROUP 920x183
+  ├── RECTANGLE 그라데이션 배경
+  ├── GROUP 벡터 산맥 라인 (20+ VECTOR)
+  └── GROUP 수직 라인 마커
+```
+- **이미지로 export** (벡터 라인이 너무 복잡)
+
+#### I. 원형 라벨 (2-1_02 BIM 페이지)
+```
+구조: GROUP 190x190
+  ├── GROUP (원형 테두리 그룹)
+  ├── ELLIPSE 151x151 그라데이션
+  ├── ELLIPSE 145x145 그라데이션
+  └── TEXT 20px/w700 #ffffff — "단계별 BIM의 활용"
+```
+- 중앙 큰 원 + 텍스트
+- 이중 원 테두리 (그라데이션)
+
+---
+
+## 4. 블록 매핑 (Figma 패턴 → design_agent 블록)
+
+| Figma 패턴 | design_agent 블록 | 구현 방식 | 상태 |
+|------------|-----------------|---------|------|
+| section_title | `section-title` | HTML/CSS | **신규 필요** |
+| sub_제목,내용 | 기존 없음 → `topic-header` | HTML/CSS (좌:제목 우:설명) | **신규 필요** |
+| 카드 3열 (이미지+제목+설명) | `card-grid` 변형 | HTML/CSS (이미지 추가) | **변형 필요** |
+| 비교 박스 2열 | `comparison` | HTML/CSS | ✅ 기존 |
+| 이미지 그리드 2열 | `image-gallery` | HTML + 이미지 | **신규 필요** |
+| 원형 라벨 | `circle-label` | CSS 원 + 텍스트 | **신규 필요** |
+| 배경 헤더 (bg) | - | **이미지 export** | Figma export |
+| 산맥 시각화 | - | **이미지 export** | Figma export |
+| 벡터 웨이브 | - | **이미지 export** | Figma export |
+| DX/BIM/VS 비교 라벨 | `comparison` 내부 | HTML/CSS | ✅ 기존 활용 |
+
+### 이미지로 export해야 하는 요소
+
+| 요소 | 이유 | export 형식 |
+|------|------|-----------|
+| bg (배경 헤더) | 그라데이션+웨이브+마스크 | PNG (배경용) |
+| 산맥 시각화 | 20+ 벡터 라인 | PNG 또는 SVG |
+| 이미지 오버레이 그라데이션 | CSS로 가능하지만 Figma 원본이 더 정확 | CSS gradient (재현 가능) |
+| 3D 렌더링 이미지 | Figma 내 이미지 에셋 | PNG |
+
+---
+
+## 5. 디자인 토큰 업데이트 제안
+
+기존 `tokens.css`에 추가가 필요한 토큰:
+
+```css
+/* Figma 기반 추가 토큰 */
+--color-accent-deep: #004cbe;     /* Figma 진한 파란 (꼭지 제목) */
+--color-accent-bright: #006aff;   /* Figma 밝은 파란 (카드 헤더, 박스) */
+--color-accent-sky: #6bcdff;      /* Figma 하늘색 (BIM 라벨) */
+--color-accent-cyan: #00aaff;     /* Figma 시안 (설계단계) */
+
+--font-page-title: 35px;          /* Figma 페이지 타이틀 */
+--font-topic-title: 24px;         /* Figma 꼭지 제목 */
+--font-card-title: 14px;          /* Figma 카드 내 제목 */
+--font-en-subtitle: 15px;         /* Figma 영문 서브타이틀 */
+--font-tag: 20px;                 /* Figma 태그/라벨 (DX, BIM, VS) */
+```
+
+---
+
+## 6. 다음 단계
+
+### 즉시 가능 (HTML/CSS로 구현)
+1. `section-title` 블록 — 영문+한글 2줄 타이틀
+2. `topic-header` 블록 — 좌:질문 우:설명 (742px, 240:422 비율)
+3. `card-grid` 이미지 변형 — 상단 이미지 + 하단 텍스트
+4. `image-gallery` 블록 — 2열 이미지 + 오버레이
+5. `circle-label` 블록 — CSS 원형 + 중앙 텍스트
+
+### Figma에서 이미지 export 필요
+1. 배경 헤더 (bg) — 각 프레임의 상단 파란 영역
+2. 산맥/웨이브 시각화
+3. 3D 렌더링 이미지 (시공, 설계, 유지관리 등)
+4. 아이콘 에셋
+
+### AI 이미지 생성 영역 (레이어 방식)
+1. 순환도/관계도 배경
+2. 3D 효과가 필요한 다이어그램
+3. 복합 시각 효과 (글로우, 보케, 입체)