diff --git a/figma_to_html_agent/FIGMA-COMPONENT-EXTRACTION-PLAN.md b/figma_to_html_agent/FIGMA-COMPONENT-EXTRACTION-PLAN.md deleted file mode 100644 index d5d1050..0000000 --- a/figma_to_html_agent/FIGMA-COMPONENT-EXTRACTION-PLAN.md +++ /dev/null @@ -1,582 +0,0 @@ -# Figma → 컴포넌트 추출 + 카탈로그 구축 계획 - -## 목적 - -Figma 디자인(바론컨설턴트 홈페이지 기획팀 공유)에서 재사용 가능한 **콘텐츠 블록**을 추출하고, 디자인 팀장(Sonnet)이 선택할 수 있는 카탈로그로 체계화한다. - -**핵심 원칙: 블록은 모드 독립적이다.** -- 블록 자체는 "슬라이드 전용"이 아니라 **HTML/CSS 콘텐츠 블록** -- 슬라이드 모드(100vh, overflow:hidden)와 웹/스크롤 모드(auto, overflow:visible)는 **컨테이너(base 템플릿)**가 결정 -- 블록은 높이를 고정하지 않음 → 어떤 컨테이너에도 들어갈 수 있음 -- 현재는 `slide-base.html`(슬라이드)에 집중하되, 향후 `page-base.html`(웹) 추가 가능 - -``` -블록 (카드, 표, 인용 등) — 모드와 무관, 재사용 가능 - ↓ -slide-base.html → height:100vh, overflow:hidden (슬라이드 모드) -page-base.html → height:auto, overflow:visible (웹/스크롤 모드, 향후) -``` - ---- - -## 현재 상태 - -### 보유 자산 - -| 항목 | 상태 | 위치 | -|------|------|------| -| Figma API 접근 | ✅ 가능 | Token: `.env` | -| 기존 블록 템플릿 7종 | ✅ 완성 | `templates/blocks/` | -| 디자인 토큰 | ✅ 완성 | `static/tokens.css` | -| 슬라이드 렌더러 | ✅ 완성 | `src/renderer.py` | -| 디자인 팀장 (DA-13) | ❌ todo | `src/design_director.py` | -| 블록 카탈로그 | ❌ 없음 | - | - -### Figma 파일 구조 - -``` -바론 공유 2025.05.13 (node: 1574-6254) -├── 1장 바론컨설턴트 -├── 2장 디지털전환 -│ ├── 2-1 건설산업에서의 디지털전환 (1920x8538, 스크롤형) -│ ├── 2-2 디지털전환과 소프트웨어 (1920x9123, 스크롤형) -│ └── 건설산업에서의 디지털전환 (1920x8536, 스크롤형) -│ [자세히보기] -│ ├── 2-1장 자세히보기 (4프레임: 건설산업/BIM/GIS/디지털트윈) -│ ├── 2-2장 자세히보기 -│ └── 2-3장 자세히보기 -├── 3장 제공서비스 -│ ├── 3-1장 솔루션프로그램 자세히보기 -│ └── 3-3장 빅룸 자세히보기 -└── 모션작업 -``` - -### 기존 블록 vs Figma에서 발견된 패턴 - -| 패턴 | 기존 블록 | Figma에서 발견 | 갭 | -|------|----------|--------------|-----| -| 2단 비교 | ✅ comparison | ✅ | - | -| 카드 그리드 | ✅ card-grid | ✅ (변형 다수) | 변형 추가 필요 | -| 벤 다이어그램 | ✅ relationship | ✅ | - | -| 단계 흐름 | ✅ process | ✅ | - | -| 강조 인용 | ✅ quote-block | ✅ (큰따옴표 장식) | 변형 추가 필요 | -| 결론 바 | ✅ conclusion-bar | ✅ | - | -| 비교 테이블 | ✅ comparison-table | ✅ | - | -| **이미지 갤러리** | ❌ | ✅ (2열, 3열, 2x2) | **신규** | -| **타임라인** | ❌ | ✅ (세로 원형 4단계) | **신규** | -| **섹션 타이틀** | ❌ | ✅ (영문+한글 공통 헤더) | **신규** | -| **사례 카드** | ❌ | ✅ (출처+불릿 카드) | **신규** | -| **핵심 지표** | ❌ (정의만) | ✅ (큰 숫자+보조) | **신규** | -| **아이콘 리스트** | ❌ | ✅ (아이콘+제목+설명) | **신규** | -| **Hero 섹션** | ❌ | ✅ (배경+원형이미지+텍스트) | **신규** | -| **CTA 버튼 바** | ❌ | ✅ (자세히보기 버튼) | **필요 시** | -| **이미지 블록** | ❌ | ✅ (도표, 참고자료) | **신규** (3변형: full/side/thumb) | -| **자세히보기 블록** | ❌ | ✅ (상세 콘텐츠 접기/펼치기) | **신규** (`/`) | - ---- - -## 작업 계획 - -### Phase A: Figma 분석 + 패턴 추출 - -#### A-1: Figma 전체 섹션 이미지 렌더링 -- **작업:** 각 섹션/프레임을 이미지로 렌더링하여 시각적으로 패턴 식별 -- **방법:** - - **1차:** Framelink MCP `get_figma_data` — CSS-ready 데이터로 노드 구조 + 스타일 동시 추출 - - **2차:** Figma 공식 MCP `get_screenshot` — 시각 참고용 스크린샷 - - **fallback:** Figma REST API `/v1/images/{file_key}?ids={node_ids}` (MCP 미설치 시) -- **산출물:** `docs/figma-screenshots/` 폴더에 PNG 저장 -- **완료 기준:** 모든 자세히보기 프레임(8개)의 스크린샷 확보 - -#### A-2: Figma 노드 구조 심층 분석 -- **작업:** 각 프레임의 상세 스타일 + 레이아웃 정보 추출 -- **방법:** - - **1차:** Framelink MCP `get_figma_data` (nodeId 지정, depth 조절) - - 자동 CSS 변환: 색상→hex/rgba, 레이아웃→flex 용어, 그림자→box-shadow, 그라데이션→linear-gradient() - - 스타일 중복 제거 (글로벌 변수로 추출) - - 토큰 효율적 (raw API 대비 1/5 크기) - - **2차:** Figma 공식 MCP `get_variable_defs` — 디자인 토큰/변수 추출 - - **fallback:** Figma REST API `/v1/files/{key}/nodes?ids={ids}&depth=5` (MCP 미설치 시) -- **추출 정보:** - - TEXT 노드: fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, color, 텍스트 내용 - - FRAME/GROUP: auto-layout (direction, gap, padding, alignItems, justifyContent), constraints - - RECTANGLE: fills (solid/gradient/image), strokes, cornerRadius, effects - - INSTANCE: componentId (재사용 컴포넌트 식별) -- **Figma → CSS 매핑 (Framelink MCP가 자동 처리, REST API 시 수동):** - - `layoutMode: "VERTICAL"` → `flex-direction: column` - - `primaryAxisAlignItems: "CENTER"` → `justify-content: center` - - `itemSpacing: 20` → `gap: 20px` - - `paddingLeft/Right/Top/Bottom` → `padding` - - `fills[].color {r,g,b,a}` → `rgba()` 또는 `#hex` - - `fills[].type: "GRADIENT_LINEAR"` → `linear-gradient(...)` - - `cornerRadius` → `border-radius` - - `strokes + strokeWeight` → `border` - - `effects[].type: "DROP_SHADOW"` → `box-shadow` - - `fontSize` → `font-size` (px 단위) - - `lineHeightPercentFontSize: 170` → `line-height: 1.7` -- **산출물:** `docs/figma-analysis/` 폴더에 구조 문서 -- **주의:** Figma API rate limit 심함 — depth 깊은 요청은 30분 차단 가능. 얕게 요청 후 필요한 노드만 상세 조회 - -#### A-3: 디자인 패턴 분류 + 명명 -- **작업:** 추출된 시각 요소를 재사용 가능한 블록 단위로 분류 -- **기준:** - - 2회 이상 반복되는 패턴 → 블록 후보 - - 슬롯(교체 가능한 위치)이 명확한 것 → 우선 순위 높음 - - 콘텐츠 유형과 매칭되는 것 → 우선 순위 높음 -- **산출물:** 패턴 목록 + 각 패턴의 Figma 원본 노드 ID - -### Phase B: HTML/CSS 컴포넌트 제작 - -#### B-1: 신규 블록 템플릿 제작 (8~10종) -- **파일:** `templates/blocks/{name}/` 폴더별 정리 (변형별 파일 + preview.png) -- **제작 순서 (우선순위):** - 1. `section-title/default.html` — 공통 헤더 (모든 슬라이드에서 사용) - 2. `example-card/2col.html` — 사례 카드 (출처+불릿, 정책 문서 인용) - 3. `image-block/full.html`, `side.html`, `thumb.html` — 이미지 블록 3변형 - - full: 전체 너비 (핵심 도표, 가로형) - - side: 텍스트 옆 (보조 이미지, 세로형) - - thumb: 썸네일 (참고 문서 표지) - - CSS: `object-fit: contain` (비율 유지, 잘리지 않음) - - 원본 이미지 그대로 사용, 크기만 조절 (crop 안 함) - 4. `image-gallery/2col.html`, `3col.html`, `2x2.html` — 이미지 갤러리 - 5. `timeline/vertical.html`, `horizontal.html` — 타임라인 (연혁/로드맵) - 6. `big-number/3col.html`, `4col.html` — 핵심 지표 (큰 숫자 + 보조 텍스트) - 7. `icon-list/vertical.html`, `grid.html` — 아이콘 리스트 (기능 나열) - 8. `details-block/default.html` — 자세히보기 (`/`) - - 슬라이드 표면: 요약만 표시 - - 펼치면: 전체 상세 내용 - - 인쇄 시: `beforeprint` 이벤트로 자동 펼침 -- **규칙:** - - 디자인 토큰(`var(--color-*)`) 사용 (하드코딩 색상 금지) - - Jinja2 슬롯 (`{{ variable }}`) 형식 - - ` - - - - {% block content %}{% endblock %} - - -