IMPROVEMENT Phase A~D + Phase 2 전체 반영

## IMPROVEMENT (Phase A~D) - A-1: 4단계 Sonnet 디자인 조정 (_adjust_design) — CSS 변수 cascade - A-2: 5단계 HTML 전문 프롬프트 전달 - A-3: shrink/expand 하드코딩 제거 → Sonnet target_ratio 기반 - A-4: rewrite action 구현 - A-5: overflow: visible (area 레벨 텍스트 잘림 방지) - A-6: object-fit cover → contain (이미지 crop 방지) - A-7: table-layout: fixed - A-8: container query 폰트 스케일링 - B-1: details-block 템플릿 신규 (CSS 변수만 사용) - B-2: 인쇄 시 details 자동 펼침 JS - B-3: catalog에 details-block 등록 - B-4/B-5: images[]/tables[] 상세 판단 + fallback 3곳 동기화 - B-8: fallback card-grid → topic-header + char_guide 제거 - C-1: CLAUDE.md gradient 원칙 완화 - C-3: border-radius 9개 파일 var(--radius) 통일 - C-4: box-shadow 2레벨 → 1레벨 - D-0: 이미지 경로 입력 UI + API base_path - D-1: Pillow 의존성 + image_utils.py - D-2~D-4: 이미지 비율/축소방지 프롬프트 전달 - D-5: HTML에 이미지 base64 삽입 ## Phase 2 (다른 Claude 작업) - P2-A: FAISS 블록 검색 (bge-m3, 46개 블록) - P2-B: SVG N개 자동 배치 (svg_calculator.py) - P2-C: Opus 블록 추천 (Kei API 경유) - P2-D: 5단계 재검토 루프 강화 (MAX_REVIEW_ROUNDS=2) - P2-E: details-block fallback 연동 ## 버그 수정 (BF-8~10) - BF-8: 컨테이너 예산 기반 블록 배치 - BF-9: grid와 Sonnet 역할 분리 - BF-10: catalog mtime 캐시 자동 갱신 ## 블록 라이브러리 - 46개 블록 (6 카테고리), catalog/BLOCK_SLOTS/INDEX 동기화 - 구 블록 제거 (quote-block, card-grid, comparison) - 13개 _legacy 블록 보존 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-25 18:40:20 +09:00
parent 91d5779a16
commit 9bd9dad9ac
220 changed files with 19115 additions and 667 deletions
--- a/docs/figma-analysis/DESIGN-ANALYSIS.md
+++ b/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. 복합 시각 효과 (글로우, 보케, 입체)