add: figma_to_html_agent/blocks/ + 변환 도구 docs 갱신
전체 401 files (397 추가 + 4 수정), 14304 insertions.
추가:
- figma_to_html_agent/blocks/ — Figma 변환 결과 (32 frame, ~79MB).
각 frame folder = {analysis.md, flat.md, texts.md, index.html, assets/,
_renders/, _render.py, RELATIONSHIPS.md / STATUS.md / classification.md
(일부 frame)}.
Phase Z 의 *figma source layer* — runtime 에서 직접 사용 X, contract /
partial / builder adapter (미래 axis A) 의 source.
- figma_to_html_agent/DISCUSSION-SUMMARY-20260411.md — 변환 설계 회의 기록.
- figma_to_html_agent/HARNESS.md — 변환 검증 harness.
- figma_to_html_agent/scripts/fetch_figma_screenshots.py — Figma 스크린샷 자동 수집.
수정:
- figma_to_html_agent/PROCESS-CONTROL.md / PROCESS.md / RULES.md —
변환 프로세스 / 룰 갱신 (R8/R9 lock 강화 등).
- figma_to_html_agent/blocks_index.md — 32 frame 인덱스 갱신.
Phase Z 영향 0 (figma_to_html_agent/blocks/ 가 V4 catalog +
templates/phase_z2/families adapter 의 source — runtime 에서 직접 import X).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -49,6 +49,12 @@
|
||||
| [bim-issues-paired](block-tests/bim-issues-paired.html) | 45:19 / Frame 1171281194 | 1857×1326 | issues-paired-rows | **promoted** → [block](../../templates/blocks/new/issues-paired-rows.html) + [catalog](../../templates/catalog.yaml) | 2026-04-13 |
|
||||
| [bim-info-products](block-tests/bim-info-products.html) | 45:5 / Frame 1171281180 | 1153×592 | stacked-arrow-list | **promoted** → [block](../../templates/blocks/new/stacked-arrow-list.html) + [catalog](../../templates/catalog.yaml) | 2026-04-13 |
|
||||
| [bim-sw-overview](block-tests/bim-sw-overview.html) | 45:27 / Frame 1171281202 | 1863×834 | split-panel-numbered | **promoted** → [block](../../templates/blocks/new/split-panel-numbered.html) + [catalog](../../templates/catalog.yaml) | 2026-04-13 |
|
||||
| [bim-process-products-2col](blocks/1171281210/index.html) | 181:2519 / Frame 1171281210 (file 9S6LsQyO6zlRxtiqZccOUM, page 29:373) | 3848×1388 | process-products-2col-banner-top | static | 2026-04-28 |
|
||||
| [overseas-bim-numbered-list](blocks/1171281174/index.html) | 182:2810 / Frame 1171281174 (file 9S6LsQyO6zlRxtiqZccOUM, page 29:373) | 1728×657 | scene-with-numbered-list-4 | static | 2026-04-29 |
|
||||
| [info-mgmt-what-how-when](blocks/1171281179/index.html) | 182:3024 / Frame 1171281179 (file 9S6LsQyO6zlRxtiqZccOUM, page 29:373) | 1207×861 | framework-3section-label-body | static | 2026-04-29 |
|
||||
| [sw-reality-3emphasis](blocks/1171281209/index.html) | 145:8523 / Frame 1171281209 (file 9S6LsQyO6zlRxtiqZccOUM, page 29:373) | 1697×582 | bordered-3paragraphs-with-3emphasis-labels | static | 2026-04-29 |
|
||||
| [bim-model-info-3category](blocks/1171281182/index.html) | 182:2523 / Frame 1171281182 (file 9S6LsQyO6zlRxtiqZccOUM, page 29:373) | 1248×1066 | cards-3-category-with-bim-process-diagram | static | 2026-04-30 |
|
||||
| [dx-sw-3perspective-cards](blocks/1171281198/index.html) | 182:2766 / Frame 1171281198 (file 9S6LsQyO6zlRxtiqZccOUM, page 29:373) | 2734×910 | dx-banner-with-3perspective-cards | static | 2026-04-30 |
|
||||
|
||||
### 변형 축 + 슬롯 옵션 (각 변환물 상세)
|
||||
|
||||
@@ -95,6 +101,12 @@ Sub-patterns: **bullet-list-with-marker (R13)** — 각 컬럼의 bullet_items
|
||||
| issues-paired-rows | N개 행, 각 행 = 좌/우 이슈 (라벨 pill + 본문), 가운데 구분선, pill 위치 교차 | 1 | bim-issues-paired | **✓ templates_staging/issues-paired-rows.html.j2** |
|
||||
| stacked-arrow-list | N개 항목 계단식 리스트 (rounded pill + 색상 border + 화살표 마커 + optional 좌측 arc 장식) | 1 | bim-info-products | **✓ templates_staging/stacked-arrow-list.html.j2** |
|
||||
| split-panel-numbered | 좌: 카테고리별 리스트 (BG + 헤더) / 우: 번호 badge + 설명 N개 | 1 | bim-sw-overview | **✓ templates_staging/split-panel-numbered.html.j2** |
|
||||
| process-products-2col-banner-top | 좌(Process)/우(Products) 2 컬럼 + 상단 둥근 헤더 배너 (좌측 180° rotate, 둥근 모서리가 가운데로 mirror). 각 컬럼에 3 섹션. 좌측 첫 섹션은 AS-IS/TO-BE 좌우 비교 + 가운데 화살표 PNG | 1 | bim-process-products-2col | (1번째 등장, staging 미작성 — 사용자 검토 후 결정) |
|
||||
| scene-with-numbered-list-4 | 좌(헤더 pill + scene 이미지 + 글로브 오버레이) / 우(수직 화살표 체인 + 번호 배지 N개 + 텍스트 버블). cardinality 4 고정 | 1 | overseas-bim-numbered-list | (1번째 등장, staging 미작성 — 사용자 검토 후 결정) |
|
||||
| framework-3section-label-body | 헤더 (icon + 다중 폰트 그라디언트 텍스트) + 3 행. 각 행 = 좌 브라운 라벨 (rounded-right, 한글+영문 yellow) / 우 흰 카드 (border, 우측 장식 이미지) + 본문 불릿 (35px + 40px Bold #CC5200 강조) | 1 | info-mgmt-what-how-when | (1번째 등장, staging 미작성 — 사용자 검토 후 결정) |
|
||||
| bordered-3paragraphs-with-3emphasis-labels | 외곽 두꺼운 빨간 테두리 (10px #9C0E0E, rounded 20) + 상단 타이틀 pill (외곽 위 걸침) + 우측 핑크→흰 그라디언트 BG. 좌 본문 N단 (▶ 화살표 불릿 + 30px text + 30px Bold #CC5200 인라인 강조) / 우 강조 라벨 N개 (60px Black, bg-clip-text gradient red→#711E1E) | 1 | sw-reality-3emphasis | (1번째 등장, staging 미작성 — 사용자 검토 후 결정) |
|
||||
| cards-3-category-with-bim-process-diagram | 1171281179의 framework-3section-label-body 패턴 + 하단 BIM 모델/공사 Process 연계 원형 다이어그램 (좌 BIM wireframe 원, 중앙 X-shape decoration, 우 paper/document 원, 모두 PNG 합성). 라벨 텍스트는 45px Bold gradient bg-clip-text (#276853 → #B65320) | 1 | bim-model-info-3category | (1번째 등장, staging 미작성 — 사용자 검토 후 결정) |
|
||||
| dx-banner-with-3perspective-cards | 상단 다크 그린 배너 (인라인 #90FA33 강조 텍스트 90px Bold) + 좌측 DX를 위한 S/W 원형 (PNG, 텍스트 baked-in) + 우측 3 카드 (orange/green 톤, 헤더 BG + 외곽 frame + bottom decor 모두 PNG, 본문 37px Medium + ▶ 화살표 9개) | 1 | dx-sw-3perspective-cards | (1번째 등장, staging 미작성 — 사용자 검토 후 결정) |
|
||||
|
||||
## Sub-pattern 카탈로그 (atomic 재사용 단위)
|
||||
|
||||
@@ -218,6 +230,50 @@ Sub-patterns: **bullet-list-with-marker (R13)** — 각 컬럼의 bullet_items
|
||||
|
||||
**구분 표시:** 임시 보정은 HTML 코멘트로 `<!-- TEMP: 1:1 fidelity, 템플릿화 시 제거 -->` 명시.
|
||||
|
||||
### I-7. 콘텐츠 주도형 블록 구조 (R17/R18/R19)
|
||||
|
||||
**상황:** 블록의 텍스트 분량이 바뀔 때 (블릿 추가/삭제, 문장 길이 변화) 레이아웃이 유연하게 대응해야 함.
|
||||
|
||||
**잘못된 접근 (실제 발생):**
|
||||
- 모든 요소를 absolute + 고정 top/left로 배치 → 텍스트 겹침
|
||||
- overflow:hidden으로 겹침 숨기기 → 텍스트 잘림 (더 나쁨)
|
||||
- 고정 height로 제한 → 빈 공간 또는 잘림
|
||||
|
||||
**올바른 접근 (1171281194에서 검증):**
|
||||
1. `.inner`는 `zoom: S` (transform:scale 대신, R19)
|
||||
2. section.row들은 flex column 컨테이너 안에서 자연 flow (R17)
|
||||
3. row 내부: pill-area(flex:none) + body-area(flex:1) 구조
|
||||
4. pill의 crop variant와 label position은 분리 (R18)
|
||||
5. pill-area는 margin:-border_width로 row border 외곽까지 확장
|
||||
6. 장식(두루마리, 배경)은 콘텐츠를 따름 — 텍스트가 늘면 같이 내려감
|
||||
|
||||
**seam-based alignment (진행 중):**
|
||||
- pill 이미지의 곡선→직선 전환점(seam)을 측정
|
||||
- 라벨은 seam 기준 flat area 안에 배치
|
||||
- 현재: designer-tuned fallback / 장기: computed anchor
|
||||
- 메타데이터: `blocks/{id}/pill_seam_meta.md`에 기록
|
||||
|
||||
**적용:** 1171281194 (issues-paired-rows) — 첫 적용, 2단계 완성
|
||||
|
||||
---
|
||||
|
||||
## 기존 블록 구조 개선 현황
|
||||
|
||||
> R17/R18/R19 적용 상태. "absolute"는 기존 고정 좌표 방식, "flex"는 콘텐츠 주도형.
|
||||
|
||||
| 프레임 | 패턴 | 현재 구조 | 필요 작업 |
|
||||
|--------|------|----------|----------|
|
||||
| 1171281189 | cycle-3way-intersect | absolute | R17 적용 (원형 배치라 flex 전환 범위 검토 필요) |
|
||||
| 1171281190 | prerequisites-3col | absolute | R17 적용 (3열 내부 flow화), R19 zoom 전환 |
|
||||
| 1171281191 | cards-3col-persona | absolute | R17 적용 (bullet list는 이미 R13 flex), R19 |
|
||||
| 1171281193 | quadrant-2x2-issues | absolute | R17 적용 (사분면 내부 flow화), bullet inside 적용 |
|
||||
| 1171281195 | compare-vs-rows | absolute | R17 적용 (12행 비교표 flow화), bullet inside 적용 |
|
||||
| **1171281194** | **issues-paired-rows** | **flex 2단계 ✓** | **완료 (R17/R18/R19 적용)** |
|
||||
| 1171281202 | split-panel-numbered | absolute | R17 적용, z-index 수정 완료, R19 |
|
||||
| 1171281180 | stacked-arrow-list | absolute | R17 적용 (pill 행 flow화), R19 |
|
||||
| 1171281204 | compare-table-3col | absolute | R17 적용 (표 행 flow화), R19 |
|
||||
| 1171281203 | compare-table-2col | absolute | R17 적용 (표 행 flow화), R19 |
|
||||
|
||||
---
|
||||
|
||||
## 발견된 공통 자산 (block-tests/assets/shared/)
|
||||
|
||||
Reference in New Issue
Block a user