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:
@@ -60,6 +60,38 @@ Figma bbox: 60×19 (가로가 김)
|
||||
.rotated-bracket-close { transform: rotate(-90deg); } /* 닫는 괄호 */
|
||||
```
|
||||
|
||||
**⚠️ 회전 bbox의 x,y 좌표를 그대로 left,top에 넣지 마라:**
|
||||
|
||||
MCP get_metadata가 보고하는 회전 텍스트의 `x, y`는 **회전 후 bbox의 top-left**이다. 회전 전 글자의 시각적 중심과 다르다. 같은 세로 축에 있는 요소들인데 MCP x 값이 제각각인 경우가 이것 때문이다.
|
||||
|
||||
```
|
||||
예시: 세로 라벨 "기술 ( 디지털 )" — 모두 같은 세로 축
|
||||
|
||||
MCP 보고값:
|
||||
"기 술" x=17.8 width=37 → center_x = 36.3
|
||||
"(" x=72 width=60 → center_x = 102 ← bbox가 회전으로 이동
|
||||
"디지털" x=17.8 width=37 → center_x = 36.3
|
||||
"(" x=0 width=60 → center_x = 30 ← 반대쪽으로 이동
|
||||
|
||||
시각적 중심은 모두 x≈36.3인데, MCP bbox x는 0, 17.8, 72로 제각각.
|
||||
```
|
||||
|
||||
**올바른 처리:**
|
||||
1. 같은 세로 축에 있는 요소들을 먼저 식별 (같은 그룹, 같은 바 안 등)
|
||||
2. 비회전 텍스트의 center_x를 기준축으로 확정: `center_x = left + width / 2`
|
||||
3. 회전 요소의 컨테이너도 같은 center_x에 정렬: `container_left = center_x - container_width / 2`
|
||||
4. **y값만 MCP에서 그대로 사용** (y는 회전 여부와 관계없이 정확)
|
||||
|
||||
```
|
||||
기준: center_x = 17.8 + 37/2 = 36.3
|
||||
괄호 컨테이너(60px): left = 36.3 - 30 = 6.3
|
||||
→ 모든 요소가 x=36.3 중심으로 정렬
|
||||
```
|
||||
|
||||
**절대 하지 말 것:**
|
||||
- MCP의 회전 bbox x 값을 그대로 CSS left에 넣기 (72px, 0px 등)
|
||||
- "MCP 데이터니까 맞겠지" 하고 검증 없이 사용
|
||||
|
||||
---
|
||||
|
||||
## R3. 세로 텍스트 (좁은 박스)
|
||||
@@ -74,6 +106,11 @@ Figma bbox: 60×19 (가로가 김)
|
||||
```
|
||||
이유: `writing-mode: vertical-rl`은 Figma 원본과 다른 간격/정렬을 만듦.
|
||||
|
||||
**동일 축 정렬 원칙:** 세로 텍스트 + 회전 괄호가 하나의 세로 라인을 이루면:
|
||||
- 모든 요소의 **x 중심이 동일**해야 한다
|
||||
- y만 변한다 (위에서 아래로 순서대로)
|
||||
- R2의 "회전 bbox 좌표 함정" 규칙 적용 필수
|
||||
|
||||
---
|
||||
|
||||
## R4. 그라데이션 텍스트
|
||||
@@ -464,3 +501,111 @@ left: 0; width: 151.25%
|
||||
| 프레임 | 사용 | 비고 |
|
||||
|--------|------|------|
|
||||
| 1171281194 (issues-paired-rows) | 두루마리 pill 8개 | 첫 적용. 상/하 배치 반전 패턴 발견. |
|
||||
|
||||
---
|
||||
|
||||
## R17. 콘텐츠 주도형 레이아웃 (absolute 금지, flex/flow 필수)
|
||||
|
||||
**문제:** 블록 내 모든 요소를 absolute + 고정 top/left로 배치하면, 텍스트 분량이 바뀔 때 겹치거나 빈 공간이 생긴다. overflow:hidden으로 숨기는 건 해결이 아니라 더 큰 문제.
|
||||
|
||||
**원칙:**
|
||||
- CLAUDE.md: "텍스트를 자르지 않는다. 디자인이 텍스트에 맞춘다."
|
||||
- CLAUDE.md: "빈 공간 방치 안 함"
|
||||
- blocks_index.md I-1: "모든 픽셀 위치 절대 배치 금지"
|
||||
|
||||
**구조 (2단계):**
|
||||
|
||||
```
|
||||
.inner (zoom: S — 뷰포트 맞춤)
|
||||
.title (flow)
|
||||
.rows (display: flex; flex-direction: column)
|
||||
section.row (flex column — pill → body → pill)
|
||||
.pill-area (flex: none)
|
||||
.body-area (flex: 1, display: flex)
|
||||
.body-left (flex: 1, 자연 flow)
|
||||
.divider (flex: none)
|
||||
.body-right (flex: 1, 자연 flow)
|
||||
.pill-area (flex: none)
|
||||
section.row ...
|
||||
```
|
||||
|
||||
**1단계:** row 내부만 flex/flow (row 위치는 absolute top 유지)
|
||||
**2단계:** row 간 배치도 flex column (행이 커지면 아래 행이 밀림)
|
||||
|
||||
**절대 하지 말 것:**
|
||||
- 본문 텍스트에 position: absolute + 고정 top
|
||||
- 텍스트 겹침을 overflow: hidden으로 숨기기
|
||||
- 텍스트 높이를 고정값으로 제한
|
||||
|
||||
**적용 사례:**
|
||||
| 프레임 | 전환 | 결과 |
|
||||
|--------|------|------|
|
||||
| 1171281194 | absolute → flex 2단계 | 텍스트-pill 겹침 해결, 행 간 자연 flow |
|
||||
|
||||
---
|
||||
|
||||
## R18. Crop variant / Label position 분리 (pill 2축 구조)
|
||||
|
||||
**문제:** pill 이미지의 crop 방향(어떤 곡면을 보여줄지)과 라벨 위치(행에서 좌/우 어디에 있는지)를 같은 클래스로 묶으면, 하단 pill(flip 적용)에서 라벨 위치가 뒤집힌다.
|
||||
|
||||
**원인:** crop-left/right는 이미지 방향 축, pos-left/right는 행 내 위치 축. 이 둘은 독립.
|
||||
|
||||
**규칙:** 두 축을 분리한다.
|
||||
|
||||
```css
|
||||
/* 축1: 이미지 crop (어떤 곡면 보일지) */
|
||||
.crop-left { } /* 우측 곡선 보임 */
|
||||
.crop-right { } /* 좌측 곡선 보임 */
|
||||
|
||||
/* 축2: 라벨 위치 (행에서 좌/우) */
|
||||
.pos-left .label { left: ...; }
|
||||
.pos-right .label { right: ...; text-align: right; }
|
||||
```
|
||||
|
||||
**4가지 조합:**
|
||||
|
||||
| 상황 | crop | pos | 예 |
|
||||
|------|------|-----|-----|
|
||||
| 상단 좌 pill | crop-left | pos-left | 개념 부재 |
|
||||
| 상단 우 pill | crop-right | pos-right | 잘못된 접근방식 |
|
||||
| 하단 좌 pill (flip) | crop-right | pos-left | 방향성 상실 |
|
||||
| 하단 우 pill (flip) | crop-left | pos-right | 전제조건 오류 |
|
||||
|
||||
**라벨 offset:**
|
||||
- 현재: designer-tuned fallback (Figma 원본 값)
|
||||
- 장기 목표: seam-based computed anchor (pill_seam_meta.md 참조)
|
||||
- 라벨 offset은 crop visible area 기준으로 별도 조정 가능
|
||||
|
||||
**적용 사례:** 1171281194 (issues-paired-rows) — 하단 pill 라벨 위치 오류 수정
|
||||
|
||||
---
|
||||
|
||||
## R19. zoom vs transform:scale
|
||||
|
||||
**문제:** `transform: scale(S)`는 시각적 크기만 줄이고 레이아웃 상의 높이는 원본 그대로. flex/flow 기반 콘텐츠와 함께 쓰면 하단에 큰 여백이 생긴다.
|
||||
|
||||
**규칙:** 콘텐츠 주도형 레이아웃(R17)에서는 `zoom`을 사용한다.
|
||||
|
||||
```css
|
||||
/* ✗ 문제: layout height가 원본 크기 */
|
||||
.inner {
|
||||
transform: scale(0.69);
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
/* ✓ 해결: layout height도 실제로 줄어듦 */
|
||||
.inner {
|
||||
zoom: 0.69;
|
||||
}
|
||||
```
|
||||
|
||||
**차이:**
|
||||
|
||||
| 속성 | 시각 크기 | 레이아웃 크기 | flow 호환 |
|
||||
|------|----------|-------------|----------|
|
||||
| transform: scale | 줄어듦 | 원본 그대로 | ✗ |
|
||||
| zoom | 줄어듦 | 줄어듦 | ✓ |
|
||||
|
||||
**주의:** 기존 absolute 기반 블록(1:1 reference)에서는 transform:scale이 문제없음. R17 구조로 전환한 블록에서만 zoom 적용.
|
||||
|
||||
**브라우저 지원:** Chrome, Safari, Firefox 126+ (2024~) 모두 지원.
|
||||
|
||||
Reference in New Issue
Block a user