Kyeongmin/C.E.L_Slide_test2

Files

kyeongmin 9fbe3ac90c 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>

2026-05-08 09:41:05 +09:00

6.7 KiB

Raw Blame History

Frame 1171281210 — Process/Product 혁신

내용 설명

2가지 혁신 축(과정/결과)을 상단 배너로 선언하고, 하단 2열에서 각각 상세(AS-IS vs TO-BE 대조)를 설명하는 디자인. Analogue→Digital, 2D도면→3D모델 같은 이중 변환 서사를 좌우 병렬로 드러낸다. 2가지 혁신 축을 상단 선언 후 각각 상세 설명·AS-IS vs TO-BE 구조·이중 Transformation 서사에 적합. 3개 이상 항목 병렬·시간 순서 단계 나열에는 부적합.

후보 키워드

과정혁신, 결과혁신, Process, Product, AS-IS, TO-BE, Transformation, Analogue, Digital, 2D, 3D, 2D도면, 3D모델

정제 Anchor Sets

process_product: 과정혁신, 결과혁신, Process, Product
as_is_to_be: AS-IS, TO-BE, Transformation, Analogue, Digital
dimension_2d_3d: 2D, 3D, 2D도면, 3D모델

구조 매칭 정보

family: compare
layout: banner-top-2col-bottom
axis: horizontal
relation_type: compare
cardinality: ideal 2 / min 2 / max 2
slots (9개, required 9개): title, banner_left, banner_right, col_a_title, col_a_as_is, col_a_to_be, col_b_title, col_b_as_is, col_b_to_be
source title: Process/Product 혁신
original layout: compare-2banner-top-2col-bottom

적합/부적합 기준

suits

2가지 혁신 축을 상단 선언 후 각각 상세
AS-IS vs TO-BE 구조
이중 Transformation 서사

not_suits

3개 이상 병렬 항목
시간 순서 단계 나열
단일 주제 심층 설명
주체별 나열

재구성 허용

split: False
merge: False
infer_missing_slot: False
rewrite_label: True
rewrite_body: True

메타

schema_version: template-fit-v1 mirror
source_of_truth: structure_ontology.yaml + keyword_base.yaml
structure_content_original_tagged_by: claude-opus-4-7 (2026-04-21)
keyword_base_sync_at: 2026-04-22
anchor_sets_cleaned_at: 2026-04-22

변환 메모 (1:1 HTML, 2026-04-30)

실제 변환 시 관찰된 구조 — 위 slot 모델(9-slot AS-IS/TO-BE 쌍)은 좌 섹션1만 표현. 컬럼별로 3섹션이 있고 각 섹션의 body 형태가 다르다는 점을 보강 메모.

node: 181:2519 (URL ?node-id=29-373 의 1171281210 프레임)
원본 크기: 3848 × 1388 px
슬라이드 스케일: 1280 / 3848 = 0.33270 (zoom on .inner)
결과 슬라이드 차지 면적: 1280 × 461.78 px (가운데 vertically centered)

실제 컬럼 구조 (3-section per column)

좌 컬럼 (Process)                     우 컬럼 (Products)
─────────────────────                ─────────────────────
[헤더 배너 (rotate 180°)]              [헤더 배너 (no rotate)]
"과정 (Process)의 혁신"                "결과 (Products)의 혁신"

§1 "Analogue 개념...Transformation"    §1 "Copy & Paste...품질 향상"
   AS-IS (3불릿) | → | TO-BE (3불릿)      body: 2불릿

§2 "위치기반의 3D 모델..."             §2 "Analogue 기반 도서 외..."
   body: 1불릿                            body: 1불릿 + ＊ 각주

§3 "사용자 중심의 Solution(S/W)..."    §3 "Solution을 이용한 업무효율화..."
   body: 3불릿                            body: 2불릿

→ 위 slot 모델 9개는 §1 의 AS-IS/TO-BE 쌍 + 두 헤더 + 두 컬럼 타이틀만 다룸. §2 / §3 의 본문은 별도 슬롯 풀에서 채워야 매칭 완료. 9-slot fit 만으로는 underfill.

색상 팔레트

위치	색상	비고
좌 컬럼 섹션 타이틀	`#5C3714` (50px Black)	갈색 (Analogue 톤)
좌 헤더 텍스트	`#3E3523` (70px Black, bg-clip-text)	더 짙은 갈색 + 솔리드
좌 헤더 배경	`#A5A196 α0.1 → #39321E` (가로) + rotate 180°	우→좌로 진해짐 (회전 후 좌→우로 진해짐)
우 컬럼 섹션 타이틀	`#084C56` (50px Black)	짙은 청록 (Digital 톤)
우 헤더 텍스트	`#225F4A` (70px Black, bg-clip-text)	짙은 그린
우 헤더 배경	`#296B55 α0.1 → #032118` (가로, 좌→우)	좌 끝이 가장 어두움
body 배경 (좌)	white α0.3 → `#39321E` α0.3 (세로, 하→상)	상단만 933px
body 배경 (우)	`#296B55` α0.3 → white α0.3 (세로, 상→하)	상단만 933px
본문 불릿 텍스트	`#000000` (40px Bold), leading 70	list-disc, ms-60

자산 (4)

파일	종류	의미	처리
`assets/body_bg.svg`	SVG	본문 영역 배경 (3845×933, 좌/우 path 분리)	SVG 그대로
`assets/header_left_bg.svg`	SVG	좌측 헤더 둥근 배너 (1921×142, r=71 좌측만)	SVG + rotate(180°)
`assets/header_right_bg.svg`	SVG	우측 헤더 둥근 배너 (1925×142, r=71 좌측만)	SVG 그대로
`assets/arrow.png`	PNG	AS-IS → TO-BE 화살표 (252×90)	PNG 그대로 (R9 예외: 일러스트성 자산)

검증

텍스트 전수 대조: design_context 31개 토막 / index.html 31개 검출 — 100% coverage
렌더 크기: _renders/slide.png 1280×720 (슬라이드), _renders/block.png 1280×462 (블록만)
scale 검증: zoom 0.33270 적용 후 블록 높이 = 1388 × 0.33270 = 461.79 → Selenium 측정 461.78 (0.01 오차, 반올림 OK)

변형 가능 축 (재사용 시)

columns[N=2] (required, 항상 2개)
- header_text — 컬럼 라벨 (예: "과정의 혁신" / "결과의 혁신")
- header_color — 좌(브라운) / 우(그린) 등 컬럼별 톤
- sections[N=3] — 컬럼 안 3섹션 (각 컬럼)
  - title (50px Black, 컬럼 색)
  - body — 다음 중 하나:
    - as-is-to-be-pair: 좌(N불릿) + 화살표 + 우(N불릿) (좌 §1 한정 패턴)
    - bullet-list: 단일 불릿 리스트 (1~5개)
    - bullet-with-aster: 본문 + ＊ 각주 단락
body_bg_image (optional) — 좌/우 톤 차이를 표현하는 단일 SVG (둘로 분할). 없을 시 흰 배경
arrow_image (optional) — AS-IS/TO-BE 분할 시에만 사용

Sub-patterns 발견

column-with-mirrored-rounded-banner — 좌 컬럼 헤더 배너를 180° 회전시켜 둥근 모서리를 컬럼 우측 끝으로 보내고, 우 컬럼은 회전 없이 둥근 모서리를 컬럼 좌측 끝으로. 결과적으로 두 배너의 둥근 모서리가 슬라이드 중앙 분할선 양쪽에 거울처럼 마주봄. (blocks_index.md "디자인 인사이트"에 기록 후보)
as-is-to-be-pair — AS-IS / 화살표 / TO-BE 가로 비교 (섹션 본문 타입 중 하나)
aster-footnote-inline — 본문 끝 ＊ → 다음 줄 ＊ 시작 작은 글씨(25.8px) 주석 (40px 본문에 비해 ~64% 크기)

6.7 KiB Raw Blame History Unescape Escape