kmlee1/C.E.L_Slide_test2
1
0 Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
## 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>
This commit is contained in:
kmlee1andClaude Opus 4.6 committed 2026-03-25 18:40:20 +09:00
1 parent 91d5779a16
commit 9bd9dad9ac
220 files changed
+19115 -667
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/figma-analysis/2-1_01_detail.json
+1
View File
@@ -0,0 +1 @@
{"name":"바론컨설턴트 홈페이지_기획팀공유","lastModified":"2025-12-29T08:41:52Z","thumbnailUrl":"https://s3-alpha.figma.com/thumbnails/e8d453bd-2350-4b2f-b64a-1cd8993c4cda?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAQ4GOSFWC6RGVDPLF%2F20260322%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20260322T120000Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=b0286574771859e7834b260dde769b4c0cfb82a56924d4c2e29785cf994a5cad","version":"2334420961394135676","role":"owner","editorType":"figma","linkAccess":"view","nodes":{"1574:40344":{"document":{"id":"1574:40344","name":"2-1_01","type":"FRAME","scrollBehavior":"SCROLLS","children":[{"id":"1574:40345","name":"땅 라인2-01 회색","type":"RECTANGLE","scrollBehavior":"SCROLLS","blendMode":"PASS_THROUGH","fills":[{"blendMode":"NORMAL","type":"IMAGE","scaleMode":"STRETCH","imageRef":"fc631cae3ff8925fdbec6e57fdd29fc0d7ec51dc","imageTransform":[[1.0,0.0,0.0],[0.0,0.41363382339477539,-0.031428944319486618]]}],"strokes":[],"strokeWeight":1.0,"strokeAlign":"INSIDE","absoluteBoundingBox":{"x":6976.156250,"y":7578.0,"width":924.28906250,"height":205.81285095214844},"absoluteRenderBounds":{"x":6987.0,"y":7578.0,"width":913.44531250,"height":205.812988281250},"preserveRatio":true,"targetAspectRatio":{"x":920.357910156250,"y":204.93750},"constraints":{"vertical":"TOP","horizontal":"CENTER"},"effects":[],"interactions":[],"complexStrokeProperties":{"strokeType":"BASIC"}},{"id":"1574:40346","name":"Rectangle 434660","type":"RECTANGLE","scrollBehavior":"SCROLLS","rotation":-1.5707963705062848,"blendMode":"PASS_THROUGH","fills":[{"blendMode":"NORMAL","type":"GRADIENT_LINEAR","gradientHandlePositions":[{"x":0.99999999999999989,"y":0.49999999999999994},{"x":0.0,"y":0.50},{"x":0.99999999999999989,"y":0.45953069662672952}],"gradientStops":[{"color":{"r":1.0,"g":1.0,"b":1.0,"a":0.0},"position":0.0},{"color":{"r":1.0,"g":1.0,"b":1.0,"a":1.0},"position":0.76925057172775269}]}],"strokes":[],"strokeWeight":1.0,"strokeAlign":"INSIDE","absoluteBoundingBox":{"x":6942.9999962336497,"y":7698.2108957426472,"width":955.29687876635035,"height":86.164104257352847},"absoluteRenderBounds":{"x":6987.0,"y":7698.21093750,"width":911.2968750,"height":85.78906250},"constraints":{"vertical":"TOP","horizontal":"LEFT"},"effects":[],"interactions":[],"complexStrokeProperties":{"strokeType":"BASIC"}},{"id":"1574:40347","name":"Rectangle 434674","visible":false,"type":"RECTANGLE","scrollBehavior":"SCROLLS","blendMode":"PASS_THROUGH","fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":1.0,"g":1.0,"b":1.0,"a":1.0}}],"strokes":[],"strokeWeight":1.0,"strokeAlign":"INSIDE","absoluteBoundingBox":{"x":6965.18750,"y":7735.691406250,"width":963.2968750,"height":514.535156250},"absoluteRenderBounds":null,"constraints":{"vertical":"TOP","horizontal":"LEFT"},"effects":[],"interactions":[],"complexStrokeProperties":{"strokeType":"BASIC"}},{"id":"1574:40348","name":"bg","type":"GROUP","scrollBehavior":"SCROLLS","children":[{"id":"1574:40349","name":"Mask group","type":"GROUP","scrollBehavior":"SCROLLS","children":[{"id":"1574:40350","name":"Rectangle 434566","type":"RECTANGLE","scrollBehavior":"SCROLLS","rotation":-3.1415925661670165,"blendMode":"PASS_THROUGH","fills":[{"blendMode":"MULTIPLY","type":"GRADIENT_LINEAR","gradientHandlePositions":[{"x":0.50,"y":-3.0616171314629196e-17},{"x":0.50,"y":0.99999999999999989},{"x":0.0,"y":0.0}],"gradientStops":[{"color":{"r":0.0,"g":0.41666665673255920,"b":1.0,"a":0.0},"position":0.0},{"color":{"r":0.11924463510513306,"g":0.21909815073013306,"b":0.37019231915473938,"a":1.0},"position":1.0}]}],"strokes":[],"strokeWeight":1.0,"strokeAlign":"INSIDE","absoluteBoundingBox":{"x":6957.8593750,"y":6496.4218808784135,"width":980.00002946146742,"height":336.99999412158650},"absoluteRenderBounds":null,"constraints":{"vertical":"TOP","horizontal":"LEFT"},"effects":[],"isMask":true,"maskType":"ALPHA","interactions":[],"complexStrokeProperties":{"strokeType":"BASIC"}},{"id":"1574:40351","name":"hanmacdesign_Glossy_simple_Wave_light_background_e1e331a7-680a-4c5a-a888-03e0e6280aa5 1","type":"RECTANGLE","scrollBehavior":"SCROLLS","rotation":-3.1415925661670165,"blendMode":"PASS_THROUGH","fills":[{"blendMode":"NORMAL","type":"IMAGE","scaleMode":"FILL","imageRef":"60612fe2faafaaed1dcc4f16b2339d521fa4e988"}],"strokes":[],"strokeWeight":1.0,"strokeAlign":"INSIDE","absoluteBoundingBox":{"x":6785.8592529296875,"y":6289.4218807980087,"width":1330.0001872876928,"height":745.99999420199129},"absoluteRenderBounds":{"x":6987.0,"y":6553.0,"width":920.0,"height":280.4218750},"preserveRatio":true,"targetAspectRatio":{"x":1330.0001220703125,"y":745.99987792968750},"constraints":{"vertical":"TOP","horizontal":"LEFT"},"effects":[],"interactions":[],"complexStrokeProperties":{"strokeType":"BASIC"}},{"id":"1574:40352","name":"디지털전환을 위한 소프트웨어 활용_3","type":"RECTANGLE","scrollBehavior":"SCROLLS","blendMode":"HARD_LIGHT","opacity":0.50,"fills":[{"blendLine truncated
docs/figma-analysis/2-1_02_detail.json
+1
View File
@@ -0,0 +1 @@
{"name":"바론컨설턴트 홈페이지_기획팀공유","lastModified":"2025-12-29T08:41:52Z","thumbnailUrl":"https://s3-alpha.figma.com/thumbnails/e8d453bd-2350-4b2f-b64a-1cd8993c4cda?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAQ4GOSFWC6RGVDPLF%2F20260322%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20260322T120000Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=b0286574771859e7834b260dde769b4c0cfb82a56924d4c2e29785cf994a5cad","version":"2334420961394135676","role":"owner","editorType":"figma","linkAccess":"view","nodes":{"1574:40528":{"document":{"id":"1574:40528","name":"2-1_02","type":"FRAME","scrollBehavior":"SCROLLS","children":[{"id":"1574:40529","name":"Rectangle 434630","type":"RECTANGLE","scrollBehavior":"SCROLLS","blendMode":"PASS_THROUGH","fills":[{"blendMode":"NORMAL","type":"SOLID","color":{"r":0.96470588445663452,"g":0.96862745285034180,"b":0.97647058963775635,"a":1.0}}],"strokes":[],"strokeWeight":1.0,"strokeAlign":"INSIDE","cornerRadius":2.0,"cornerSmoothing":0.0,"absoluteBoundingBox":{"x":8046.0,"y":7853.0,"width":920.0,"height":880.0},"absoluteRenderBounds":{"x":8046.0,"y":7853.0,"width":920.0,"height":879.0},"constraints":{"vertical":"TOP","horizontal":"CENTER"},"effects":[],"interactions":[],"complexStrokeProperties":{"strokeType":"BASIC"}},{"id":"1574:41511","name":"Group 1171281592","type":"GROUP","scrollBehavior":"SCROLLS","children":[{"id":"1574:41512","name":"2-2 4장 6","type":"RECTANGLE","scrollBehavior":"SCROLLS","blendMode":"PASS_THROUGH","fills":[{"blendMode":"NORMAL","type":"GRADIENT_LINEAR","gradientHandlePositions":[{"x":0.50,"y":-3.0616171314629196e-17},{"x":0.50,"y":0.99999999999999989},{"x":0.0,"y":0.0}],"gradientStops":[{"color":{"r":0.85098040103912354,"g":0.85098040103912354,"b":0.85098040103912354,"a":0.0},"position":0.0},{"color":{"r":0.85098040103912354,"g":0.85098040103912354,"b":0.85098040103912354,"a":1.0},"position":0.43269231915473938},{"color":{"r":0.45098039507865906,"g":0.45098039507865906,"b":0.45098039507865906,"a":0.0},"position":1.0}]}],"strokes":[],"strokeWeight":1.0,"strokeAlign":"INSIDE","absoluteBoundingBox":{"x":8506.0,"y":7950.0,"width":460.0,"height":354.0},"absoluteRenderBounds":null,"constraints":{"vertical":"TOP","horizontal":"RIGHT"},"effects":[],"isMask":true,"maskType":"ALPHA","interactions":[],"complexStrokeProperties":{"strokeType":"BASIC"}},{"id":"1574:41513","name":"2-2 4장 7","type":"RECTANGLE","scrollBehavior":"SCROLLS","blendMode":"PASS_THROUGH","fills":[{"opacity":0.30000001192092896,"blendMode":"NORMAL","type":"IMAGE","scaleMode":"STRETCH","imageRef":"b01caeb6b113f6850f25de692b81a884d848a406","imageTransform":[[0.54874998331069946,0.0,0.26249998807907104],[0.0,1.0,0.0]]},{"blendMode":"NORMAL","type":"GRADIENT_LINEAR","gradientHandlePositions":[{"x":1.3582370798593953e-16,"y":0.36888893472286544},{"x":0.46179038592154481,"y":0.36888893472286466},{"x":1.3011636019240283e-09,"y":0.61121031856077312}],"gradientStops":[{"color":{"r":0.96470588445663452,"g":0.96862745285034180,"b":0.97647058963775635,"a":1.0},"position":0.0},{"color":{"r":0.96470588445663452,"g":0.96862745285034180,"b":0.97647058963775635,"a":0.0},"position":1.0}]}],"strokes":[],"strokeWeight":1.0,"strokeAlign":"INSIDE","cornerRadius":2.0,"cornerSmoothing":0.0,"absoluteBoundingBox":{"x":8508.0,"y":7950.0,"width":458.0,"height":450.0},"absoluteRenderBounds":{"x":8508.0,"y":7950.0,"width":458.0,"height":354.0},"preserveRatio":true,"targetAspectRatio":{"x":458.0,"y":450.0},"constraints":{"vertical":"TOP","horizontal":"RIGHT"},"effects":[],"interactions":[],"complexStrokeProperties":{"strokeType":"BASIC"}}],"blendMode":"PASS_THROUGH","clipsContent":false,"background":[],"fills":[],"strokes":[],"rectangleCornerRadii":[0.0,0.0,0.0,0.0],"cornerSmoothing":0.0,"strokeWeight":1.0,"strokeAlign":"INSIDE","backgroundColor":{"r":0.0,"g":0.0,"b":0.0,"a":0.0},"absoluteBoundingBox":{"x":8506.0,"y":7950.0,"width":460.0,"height":354.0},"absoluteRenderBounds":{"x":8506.0,"y":7950.0,"width":460.0,"height":354.0},"constraints":{"vertical":"TOP","horizontal":"RIGHT"},"effects":[],"interactions":[],"complexStrokeProperties":{"strokeType":"BASIC"}},{"id":"1574:41514","name":"Group 1171281593","type":"GROUP","scrollBehavior":"SCROLLS","children":[{"id":"1574:41515","name":"2-2 4장 5","type":"RECTANGLE","scrollBehavior":"SCROLLS","blendMode":"PASS_THROUGH","fills":[{"blendMode":"NORMAL","type":"GRADIENT_LINEAR","gradientHandlePositions":[{"x":0.50,"y":7.2088548847257496e-16},{"x":0.49999999999999933,"y":1.0000000000000007},{"x":0.0,"y":7.5150165978720416e-16}],"gradientStops":[{"color":{"r":0.0,"g":0.0,"b":0.0,"a":0.0},"position":0.0},{"color":{"r":0.0,"g":0.0,"b":0.0,"a":1.0},"position":0.55000001192092896},{"color":{"r":0.0,"g":0.0,"b":0.0,"a":0.0},"position":1.0}]}],"strokes":[],"strokeWeight":1.0,"strokeAlign":"INSIDE","absoluteBoundingBox":{"x":8046.0,"y":7950.0,"width":460.0,"height":354.0},"absoluteRenderBounds":null,"constraints":{"vertical":"TOP","horizontal":"Line truncated
docs/figma-analysis/DESIGN-ANALYSIS.md
+254
View File
@@ -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. 복합 시각 효과 (글로우, 보케, 입체)