kyeongmin
9bd9dad9ac
## 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>
255 lines
9.8 KiB
Markdown
255 lines
9.8 KiB
Markdown
# 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. 복합 시각 효과 (글로우, 보케, 입체)
|