# 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. 복합 시각 효과 (글로우, 보케, 입체)