kyeongmin
51548fdc41
figma_to_html_agent/: - Figma MCP 기반 블록 추출 에이전트 (CLAUDE.md, PLAN.md, PROCESS.md 등) - block-tests/: Figma→HTML 변환 결과물 (bim-3roles-cards 등) - templates_staging/: Jinja2 템플릿 + meta.yaml + example.yaml - figma-analysis/, figma-assets/: Figma 분석 데이터 + 에셋 - scripts/: gradient_math.py 등 유틸리티 설정: - .mcp.json: Figma MCP 서버 연결 설정 - .claude/settings.json: Claude Code 프로젝트 설정 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
165 lines
6.7 KiB
Markdown
165 lines
6.7 KiB
Markdown
# Figma Design Language Analysis
|
||
|
||
> Phase 1 결과 문서 (2026-04-07)
|
||
> Figma Source: `9S6LsQyO6zlRxtiqZccOUM` / Page 1
|
||
|
||
## 1. 스코프
|
||
|
||
| 프레임 | 역할 | 판정 |
|
||
|--------|------|------|
|
||
| Frame 1 (1:3) | 3D 수렴 화살표 | 서브 컴포넌트 (장식 이미지) |
|
||
| Frame 2 (1:5) | Solution 제작 목표 | **블록화** → hero-icon-cards |
|
||
| Frame 3 (1:35) | 정책 달성 (Engn.Solution vs DfMA) | **블록화** → compare-2col-badge |
|
||
| Frame 4 (1:49) | 과정 vs 결과의 혁신 | **블록화** → compare-detail-gradient |
|
||
| Frame 5 (1:74) | 상세보기 버튼 | 서브 컴포넌트 (CTA) |
|
||
| Frame 6 (1:80) | 정책방향 (세로 문서) | **제외** (1280×720 부적합) |
|
||
|
||
## 2. 스케일 변환
|
||
|
||
Figma 캔버스 → 슬라이드(1280px) 변환 비율:
|
||
- Frame 2, 3: ×0.71 (1808px → 1280px)
|
||
- Frame 4: ×0.33 (3848px, 양쪽 합쳐서 2패널)
|
||
|
||
| Figma | 슬라이드 환산 | 역할 |
|
||
|-------|-------------|------|
|
||
| 70px | 28-35px | 대섹션 헤더 |
|
||
| 60px | 24-28px | Hero 메시지 |
|
||
| 50px | 22-26px | 섹션 제목, 배지 |
|
||
| 45px | 20-22px | 카드 타이틀 (EN) |
|
||
| 40px | 16-20px | 본문 |
|
||
| 35px | 14-18px | 부제, 한국어 서브 |
|
||
| 32px | 12-14px | 버튼 |
|
||
|
||
## 3. 색상 팔레트 (Warm Theme)
|
||
|
||
기존 블루/슬레이트 테마와 **병존**하는 새 팔레트:
|
||
|
||
| 토큰 | Hex | Figma 원본 | 용도 |
|
||
|------|-----|-----------|------|
|
||
| `--color-warm-brown` | `#5C3714` | rgba(92,55,20) | 과정/프로세스 섹션 제목 |
|
||
| `--color-dark-teal` | `#084C56` | rgba(8,76,86) | 결과/디지털 섹션 제목 |
|
||
| `--color-teal` | `#227582` | rgba(34,117,130) | 설명 텍스트 |
|
||
| `--color-forest` | `#548235` | rgba(84,130,53) | 배경 그라디언트 |
|
||
| `--color-beige` | `#E4D9C0` | rgba(228,217,192) | 서브틀 배경/버튼 |
|
||
| `--color-warm-yellow` | `#FAEDCB` | rgba(250,237,203) | 하이라이트 바 |
|
||
|
||
### 그라디언트 패턴
|
||
- 왼쪽(과정): `rgba(165,161,150,0.10) → rgba(57,50,30,1.00)` (베이지→브라운)
|
||
- 오른쪽(결과): `rgba(41,107,85,0.10) → rgba(3,33,24,1.00)` (틸→다크)
|
||
- 버튼: `rgba(255,255,255,0.00) → rgba(228,217,192,1.00)` (투명→베이지)
|
||
- 배경: `rgba(84,130,53,1.00) → rgba(37,62,31,0.00)` (그린→투명)
|
||
|
||
## 4. 타이포그래피
|
||
|
||
- **폰트**: Pretendard Variable 유지 (Noto Sans KR은 이미 fallback)
|
||
- **핵심은 크기/굵기 위계**
|
||
|
||
| 레벨 | 크기 (슬라이드) | Weight | 스트로크 | 정렬 |
|
||
|------|---------------|--------|---------|------|
|
||
| Hero Statement | 24-28px | 700 | white 1.5px | center |
|
||
| Section Header | 28-35px | 900 | white 5px | center/left |
|
||
| Badge Title | 22-26px | 700 | 없음 | center |
|
||
| Card Title (EN) | 20-22px | 900 | white 5px | center |
|
||
| Card Subtitle (KR) | 14-18px | 500 | white 1.5px | center |
|
||
| Body Text | 16-20px | 700 | white 1px | left |
|
||
| Section Sub-title | 22-26px | 900 | 없음 | left |
|
||
|
||
### 텍스트 스트로크 기법
|
||
Figma 디자인의 특징: 다양한 배경 위에서 가독성 확보를 위해 **흰색 스트로크** 사용
|
||
```css
|
||
-webkit-text-stroke: 1.5px white; /* 일반 텍스트 */
|
||
-webkit-text-stroke: 5px white; /* 강조 텍스트 */
|
||
paint-order: stroke fill; /* 스트로크가 텍스트 뒤로 */
|
||
```
|
||
|
||
## 5. 레이아웃 패턴
|
||
|
||
### A. Badge Header
|
||
- 이미지/그라디언트 배경 위 `border-radius: 20px` 바
|
||
- 중앙 흰색 텍스트 (50px/700 → 22-26px/700)
|
||
- 높이: ~88px (Figma) → ~44-50px (슬라이드)
|
||
|
||
### B. Hero Statement
|
||
- 전체 폭 중앙 정렬
|
||
- 큰 텍스트 (60px/700) + 흰색 스트로크
|
||
- 키워드 **굵은 강조** 가능
|
||
|
||
### C. Icon Card Row
|
||
- N개 카드 수평 배치, 세로 구분선
|
||
- 각 카드: 아이콘 이미지 + 영문 제목(900) + 한국어 부제(500)
|
||
- 흰색 둥근 컨테이너 (borderRadius: 20)
|
||
|
||
### D. Two-Col Comparison
|
||
- 좌/우 그라디언트 배경
|
||
- 각 열: 헤더 바 + (섹션 제목 + 본문) × N개
|
||
- 색상으로 좌/우 구분 (브라운 vs 틸)
|
||
|
||
### E. CTA Button
|
||
- 그라디언트 바 (투명→베이지) + 둥근 버튼 (r:7)
|
||
- 흰색 텍스트
|
||
|
||
## 6. 디자인 시스템 vs 콘텐츠 전용 경계
|
||
|
||
### 디자인 시스템 (블록에 포함)
|
||
- 색상 팔레트, 그라디언트 패턴
|
||
- 타이포그래피 위계, 텍스트 스트로크
|
||
- 둥근 모서리 컨테이너 (r:20)
|
||
- Badge Header, 2열 비교, N열 카드 레이아웃 구조
|
||
|
||
### 콘텐츠 전용 (블록에 포함하지 않음)
|
||
- 3D 화살표 이미지 (Frame 1) → 콘텐츠가 제공
|
||
- 특정 아이콘 이미지들 (brain, thunder 등) → 콘텐츠가 제공
|
||
- 도메인 텍스트 → 슬롯으로 처리
|
||
|
||
---
|
||
|
||
## 7. 추가 블록 (Page 2, 3, 4)
|
||
|
||
> 2026-04-08 추가
|
||
|
||
### Page 2 (15:2) — 프레젠테이션 슬라이드
|
||
|
||
| 블록 | 출처 | 설명 |
|
||
|------|------|------|
|
||
| `category-strip-table` | 001_개요 우측 하단 | 컬러 스트립 N열 테이블 (기술/사람/자연) |
|
||
|
||
- 다크 배경, 좌측 색상 바(세로 라벨) + 제목/본문 M행 반복
|
||
- N열 동적 (2~5), 색상 바 색상은 열마다 지정
|
||
- scale = 1200/2123 = 0.5652
|
||
|
||
### Page 3 (18:8204) — 컴포넌트
|
||
|
||
| 블록 | 출처 | 설명 |
|
||
|------|------|------|
|
||
| `checklist-dark` | f5 (1770×553) | 체크 아이콘 + 제목:설명 N행 리스트 |
|
||
| `system-2col-center` | f8 (2446×1943) | 좌/우 항목 + 중앙 원형 라벨 |
|
||
|
||
- checklist-dark: 다크 배경, 주황 체크(☑), 제목:설명 한 줄 구조
|
||
- system-2col-center: 3열 Grid (좌 항목 + 중앙 원 + 우 항목), 색상 탭
|
||
|
||
### Page 4 (29:439) — 순환 다이어그램
|
||
|
||
| 블록 | 출처 | 설명 |
|
||
|------|------|------|
|
||
| `cycle-orbit` | Frame 1 (1076×292) | 3D 원 투영 순환 궤도 다이어그램 |
|
||
|
||
핵심 수학:
|
||
- **3D 원 → Z축 기울임(80°) → 2D 투영** (토성 고리 원리)
|
||
- `project(α) = (cx + R×cos(α), cy + R×sin(α)×cos(80°))`
|
||
- N개 노드: `360°/N` 간격, 사이각 2/3로 축소 (앞쪽 가까워짐)
|
||
- 하단 중심(90°) 기준 좌/우 대칭 배치
|
||
- 설명 텍스트: 좌측 노드 → 이름 좌측에, 우측/상단 노드 → 이름 우측에
|
||
- 화살표: 호 위 1/3, 2/3 지점에 접선 방향 회전
|
||
|
||
## 8. 전체 블록 목록 (7개)
|
||
|
||
| # | 블록 ID | 카테고리 | 출처 | 핵심 특징 |
|
||
|---|--------|---------|------|----------|
|
||
| 1 | `hero-icon-cards` | cards | Page 1 | 3D 리본 배지 + 빨간 테두리 박스 + N열 카드 |
|
||
| 2 | `compare-2col-badge` | cards | Page 1 | 3D 리본 탭 + 틸 테두리 2열 비교 |
|
||
| 3 | `compare-detail-gradient` | cards | Page 1 | 비대칭 라운드 헤더 + Grid 행 정렬 + As-Is/To-Be |
|
||
| 4 | `category-strip-table` | cards | Page 2 | 컬러 스트립 바 + 다크 배경 N열 테이블 |
|
||
| 5 | `checklist-dark` | emphasis | Page 3 | 체크 아이콘 + 제목:설명 다크 리스트 |
|
||
| 6 | `system-2col-center` | cards | Page 3 | 중앙 원형 라벨 + 좌/우 항목 Grid |
|
||
| 7 | `cycle-orbit` | visuals | Page 4 | 3D 원 투영 SVG 순환 궤도 |
|