# Figma → HTML 변환 파이프라인

> 핵심 운영 절차는 [PROCESS.md](PROCESS.md), 수학 공식은 [MATH.md](MATH.md), CSS 보정 규칙은 [RULES.md](RULES.md), 변환 완료 목록은 [blocks_index.md](blocks_index.md).

## 현재 방향 (2026-04 확정)

**프로세스 우선, 인벤토리 후순위.** 35개 프레임을 사전 분류하지 않고, 1세션 1프레임씩 변환하면서 패턴이 발견되면 그때 템플릿화한다.

### 폐기된 접근

| 단계 | 폐기 사유 |
|------|---------|
| ~~Stage 1: Figma 인벤토리 일괄 추출~~ | work-creating-work. 35개는 사람이 5분이면 훑음 |
| ~~Stage 2: 노드 수 기반 지문~~ | leaf 카운트는 약한 시그널. 패턴 분류에 부정확 |
| ~~Stage 3: 자동 군집~~ | 약한 지문으로 자동 군집 시 잘못 묶임. 사람 눈이 빠름 |

**대체:** 매 변환 직후 [blocks_index.md](blocks_index.md)에 1줄 메모. 패턴은 bottom-up으로 발견된다.

## 활성 단계

```
[루프, 1세션 1프레임]

A. 1:1 변환    ← PROCESS.md 10단계 실행
   ↓
B. 변형 축 메모 ← flat.md에 1~5줄 작성
   ↓
C. blocks_index.md 1줄 추가
   ↓
D. 패턴 2번째 등장? → 템플릿화 (Jinja2 + catalog.yaml 등록)
                      ↓
                      design_agent/templates/blocks/{category}/
   ↓
[다음 프레임은 새 세션에서]
```

## 현황 (2026-04-10)

| 항목 | 상태 |
|------|------|
| 핵심 문서 (CLAUDE/PROCESS/MATH/RULES/PROCESS-CONTROL) | ✅ 정리 완료 |
| 재사용 스크립트 (scripts/gradient_math.py) | ✅ 자체 회귀 테스트 통과 |
| 변환 완료 블록 (정적 HTML) | 2 / N |
| 템플릿화 (Jinja2) | 0 |
| catalog.yaml 등록 (새 패턴) | 0 |
| design_agent 본체 통합 | 0 |

### 변환 완료 블록

| # | slug | frame | pattern | 상태 |
|---|------|-------|---------|------|
| 1 | prerequisites-3col | 45:15 | 3-column-comparison | static (이전 작업) |
| 2 | bim-goals-3circles | 66:310 | cycle-3way-intersect | static (Pure CSS, 검증 ✓) |

자세한 내역: [blocks_index.md](blocks_index.md)

## 대상 Figma 파일

- 파일키: `9S6LsQyO6zlRxtiqZccOUM` ("Untitled")
- 페이지: Page 2
- 추정 프레임 수: ~35개 (확정 안 됨, 사용자가 매번 선택)

## 다음 액션

1. 사용자가 Figma desktop에서 다음 변환할 프레임 **선택**
2. 에이전트가 PROCESS.md의 10단계 그대로 실행
3. 변환 후 blocks_index.md 업데이트
4. 다음 프레임은 **새 세션에서**

## 학습된 규칙 (이 프로젝트에서 발견)

> [RULES.md](RULES.md) R1~R12에 정리됨

1. Figma MCP는 rotation 미제공 → bbox 비율로 감지 (R2)
2. CSS line-height:1 → descender 잘림 → padding-bottom 보정 (R1)
3. Figma 세로 텍스트 = 좁은 박스 + 가로 텍스트 → HTML `<br>` 방식 (R3)
4. 흰 텍스트 stroke → HTML에서 비주얼 안 좋음 → 제거
5. 미리보기 배경은 항상 흰색 (R7)
6. 다중 fills → 최상단만 사용 (R5)
7. 동일 좌표 중복 노드 → 1개만 렌더링 (R6)
8. **순수 CSS 우선, SVG는 곡선/필터에만** (R9, 1171281211 변환에서 확정)
9. **plus-darker → multiply 교체** (R10, Safari 외 호환)
10. **Stroke inside/outside 구분** → box-sizing 결정 (R11)
11. **viewBox padding 그라데이션 좌표 remap** 필수 (R12)
12. **Vector 노드 metadata bbox는 회전된 좌표** → React wrapper 좌표 신뢰

## 블록 라이브러리 통합 경로 (Stage E~G, 미래)

```
figma_to_html_agent/templates/   ← Jinja2 템플릿 임시 저장소
       ↓
design_agent/templates/blocks/{category}/{pattern_id}.html.j2
design_agent/templates/catalog.yaml   ← when/slots/min_size_px 등록
       ↓
design_agent Phase Q 블록 선택 단계와 자동 연결
       ↓
사용자 콘텐츠 → 존 크기 → 패턴 매칭 → 블록 선택 → 슬롯 채우기 → 렌더
```