C.E.L_Slide_test2/docs/architecture/PHASE-Z-FRAME-STYLE-INVENTORY.md

Phase Z Frame Style Inventory

Phase Z 가 계승할 색감, 여백, 폰트 위계, 표 / 카드 / 다이어그램 스타일, pill / badge, SVG / CSS 구현 힌트 를 추출하는 인벤토리.

⚠️ 이 문서는 블록 매핑이 아니다. Figma frame 은 디자인 레퍼런스 / 구조 패턴 / 슬롯 힌트로 본다 (FRAME-INTEGRATION-MAP.md 참조).

⚠️ Phase Z Target 컬럼은 결정이 아니라 후보. 사용자 승인 후 프로모션 게이트에서 확정.

---

1. Source Policy

구분	위치	역할
메인 소스	figma_to_html_agent/blocks/{figma_id}/	32 frame (1171281171 제외) — Phase Z 스타일 추출의 1 차 출처
토큰 소스	templates/styles/tokens/	colors.css / spacing.css / typography.css — Phase Z 에서 계승 / 조정
legacy 참고	templates/blocks/structures/ 등	Phase Z 의 실제 조립 재료 X. 폐기 / 아카이브 방향. 스타일 / 시각 언어 참고만

추출 우선 순위 :

1. 변환 완료 frame (index.html + flat.md 보유) — 실제 CSS 관찰 기반 스타일 추출
2. 미변환 frame — Style Elements / Extracted Style Hints / Phase Z Target 보류, 변환 완료 후 갱신
3. MCP / Figma 직접 조회 사용 X — figma_to_html_agent 의 본업이므로 inventory 작성 단계에서 침범하지 않음

---

2. Frame Inventory — 컬럼 정의

컬럼	의미
Frame	FRAME-INTEGRATION-MAP.md 의 row 번호 (01~32)
Figma ID	figma_to_html_agent/blocks/ 디렉토리 ID
Layout	layouts.yaml controlled vocabulary
Style Elements	frame 안에서 관찰되는 스타일 요소 (gradient bar, pill, table header, radial node, soft shadow 등)
Extracted Style Hints	Phase Z 에 계승할 구체 힌트 (예 : "table header dark fill + white text", "card gap 12~16px")
Phase Z Target	후보 위치 (예 : tokens/colors.css, styles/frame-patterns/table.css, svg-helpers/). 결정 X
Asset Notes	자산 의존도 / Phase Z 재사용 가능성 (예 : "타이틀 아이콘 PNG 1 개, conclusion box 는 CSS 변환 가능")
Notes	cardinality / optional slot / 변형 축 / 기타

작성 룰

1. 관찰 가능한 값만 작성 — 변환 frame 의 셀은 flat.md + index.html 에 실제 있는 관찰값만 채운다. flat.md 깊이는 frame 마다 다를 수 있고, 빠진 항목 (예 : 변형 축 명시 없음) 은 채우지 않고 비운다. 다른 frame 깊이에 맞추기 위한 추론 / 추측 채움은 하지 않는다.
2. Phase Z Target 후보는 가능한 한 family 단위로 수렴 — 같은 layout family (표 / 카드 / 다이어그램 / 리스트 / banner) 의 frame 들은 동일한 target 파일 후보를 가리키게 작성. variant 차이는 별도 target 으로 쪼개기보다 Notes 에 메타로 남긴다. 표기는 항상 (후보) 접미사 — "만들 파일" 이 아니라 "수렴 위치 후보" 로 읽히게.
3. scale / zoom 은 Notes 에 메타 — Figma 원본 폭이 1280 이 아닐 경우 flat.md 의 scale / zoom 값을 그대로 두 (raw px 는 원본 기준). Phase Z slide-body (≈1200×590) 에 적용 시 재계산이 필요하다는 사실을 Notes 에 한 줄 기록.
4. redescription 금지 — analysis.md 의 cardinality / slot / anchor / layout 설명, FRAME-INTEGRATION-MAP.md 의 비고 / 검토 상태를 Inventory 에 다시 베끼지 않는다. 같은 정보가 두 문서에 들어가면 drift 위험.

미변환 frame 의 셀 표기

• Style Elements : 미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.
• Extracted Style Hints / Asset Notes / Notes : —
• Phase Z Target : TBD after conversion (단, reference_only frame 은 N/A — reference_only)

---

3. Frame Inventory (32 행)

14 변환 완료 frame 은 flat.md + index.html 관찰 기반 스타일 추출. 18 미변환 frame 은 보일러플레이트 일괄. 작성 룰 #1~4 (위 섹션 2) 준수.

Frame	Figma ID	Layout	Style Elements	Extracted Style Hints	Phase Z Target	Asset Notes	Notes
01	1171281172	circular-nodes-6	• 6 원형 노드 absolute 배치 (각 노드 = 배경 원 + 내부 아이콘 + 라벨) • 모든 노드 / 연결선 / 중앙 / 배경 = 이미지 자산 (9 개)	• 2D 다이어그램 패턴 — 노드 좌표 절대 배치 • 자산 의존도 매우 큼 — 본 frame 의 시각 구성은 거의 이미지	svg helpers (helper area 후보, 자산 의존 제한적)	9 자산 (배경, 중앙, 노드 ×6, 연결선) — 모두 이미지 유지. Phase Z 재현 시 자산 풀 / placeholder 필요	원본 1579×981, scale 0.81064. 변형 축 명시 없음 (flat.md sparse)
02	1171281173	bullet-cards-4-plus-center	미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.	—	TBD after conversion	—	—
03	1171281174	list-numbered-4	미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.	—	TBD after conversion	—	—
04	1171281175	quadrilateral-relations	미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.	—	TBD after conversion	—	—
05	1171281176	side-card-with-list	미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.	—	TBD after conversion	—	—
06	1171281177	full-page-map-banner	미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.	—	N/A — reference_only	—	—
07	1171281178	2col-paired-list	• 좌 H/W 7 항목 + 우 S/W 6 항목 + 중앙 시스템 원 + 하단 ground 이미지 • 16 자산 (배경 / 패널 / 중앙 원 / 장식 아이콘 / 헤더 바 SVG)	• 2D 복합 시스템 구성도 패턴 • 자산 의존도 매우 큼 — Phase Z 재구성 곤란	styles/frame-patterns/system-diagram.css (후보, 자산 의존 제한적)	16 자산 모두 이미지 유지. Phase Z 재현 시 자산 풀 필수	원본 2446×1943, scale 0.52331. 변형 축 명시 없음 (flat.md sparse)
08	1171281179	3-section-framework	미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.	—	TBD after conversion	—	—
09	1171281180	list-stacked-vertical	• 5 pill 행 : bg: rgba(255,255,255,0.5), border-bottom: 3px solid {color}, radius: 30px, box-shadow: 2px 4px 5px rgba(0,0,0,0.5), padding: 10px 20px • pill 색상 5 개 : #fb5915 / #e79000 / #e9a804 / #919f00 / #0d6361 • 다이아몬드 stacking : 넓→좁→좁→넓→넓 (좌측 indent 변화) • 타이틀 바 : #fbd5b9, radius: 5px, shadow • 좌측 아크 장식 SVG (이미지) + 화살표 SVG (rotate(-90deg))	• pill row + colored bottom border : 핵심 패턴, 색만 갈아끼우면 N=3~7 동작 • 다이아몬드 stacking 패턴 : indent 차이로 시각 리듬 • translucent bg + colored border = 부드러운 카테고리 분리	styles/frame-patterns/pill-list.css (후보) + tokens/colors.css 5 pill color palette (후보)	좌측 아크 SVG / 화살표 SVG 2 개 — 이미지 유지. pill 본체는 CSS 변환 완료	변형 축 : items[N=3~7], stacking_pattern (required), arc_decoration / vertical_label (optional). 원본 1153×592 (scale 1.11015 — 원본이 1280 보다 작음, zoom up 처리)
10	1171281181	radial-diagram-5	미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.	—	TBD after conversion	—	—
11	1171281182	cards-3-category	미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.	—	TBD after conversion	—	—
12	1171281189	cycle-3way-intersection	• 메인 3 원 (350×350) : outer + inner SVG (Ellipse585~592) + 중앙 라벨 (50px Bold white, text-shadow: #cc5200) • 액센트 6 원 (130.9 px) : 한자 라벨 (45px Bold white, 같은 text-shadow) • 사이드 라벨 6 그룹 : 40px Bold + 30px Medium desc • 영역별 heading color : 상단 #cc5200 / 좌측 #604f32 / 우측 #124133, desc 공통 #525151 • 장식 RECT : gradient 회전 + mix-blend-mode: multiply • 타이틀 : 70px Bold gradient #000→#883700	• 3 원 교차 다이어그램 : main 3 + accent 6 으로 영역 표현 • white text + colored text-shadow : 깊이 부여 효과 • 영역별 hue 분리 (#cc5200 / #604f32 / #124133) — 시각 zone 구분 • bg_texture multiply blending — 부드러운 배경 강조 • 사이드 라벨 위계 : Bold heading + Medium desc	svg helpers (helper area 후보, 원 / 교차 영역) + styles/frame-patterns/cycle.css (후보) + tokens/colors.css 영역별 hue palette (후보)	19 SVG (Ellipse585~603 outer/inner pairs) — 좌표 기반 SVG 재구성 가능. bg_texture PNG 1 개는 이미지 유지	변형 축 명시 없음 (메인 3 원 고정 가능성). 원본 2195×1195, scale 0.58312. 수학 : main 350px = 15.94% width / accent 130.9px = 5.96% width
13	1171281190	3-column	• 3 컬럼 (각 690 원본) : 좌 BAR (152.5 px) gradient + 우 본문 • BAR gradient 3 가지 : 기술 #0D78D0→#023056 / 사람 #FF9A23→#CC5200 / 자연 #39BE49→#23742C • 한자 (技術 / 人材 / 天地) : 50px Bold white on bar • 헤딩 : 45px Bold gradient (top / bottom 별도 gradient 2 종) • 본문 : 35px Medium #3E3523 • 세로 라벨 (rotate 90°) — 옵셔널 메타 • 테두리 : 실선 + 점선 SVG	• 3-pillar 카드 패턴 : 동등 카테고리 3 개 (예 : 기술/사람/자연) • gradient bar + 한자 + heading + body 조합 • 컬럼별 hue rotation (blue / orange / green) — 의미 차별화 • heading 도 gradient (단색 X) — 일관된 시각 언어	styles/frame-patterns/three-pillar.css (후보) + tokens/colors.css 3 column gradient palette (후보)	아이콘 PNG 1 개 + 테두리 SVG 4 개 (CSS border 변환 가능). 자산 의존 적음	변형 축 명시 없음 (3 pillar 고정 가능성 큼). 원본 2123×724, scale 0.60290. 수학 : 열 너비 416px / 바 92px after scale
14	1171281191	persona-3col	• 3 컬럼 동일 사이즈 (833×1845 원본) + 각 컬럼 텍스처 BG 이미지 • 컬러 오버레이 (opacity 0.80) — 컬럼별 다른 색감 hue • 하단 사진 3 개 : border-radius: 49~50px, opacity 0.70 • 상단 원형 뱃지 (3 개) : outer + inner 이미지 + 한글 라벨 • 라벨 색 hue rotation : 발주자 #285B4A / 시공자 #445A2F / 설계자 #743002 • 체크박스 불릿 아이콘 (이미지, 32×32) • 불릿 텍스트 : 40px Medium #000	• 3 컬럼 persona / actor 카드 패턴 : 역할별 한 컬럼 • 컬럼별 hue rotation : 같은 톤 안에서 색상만 다르게 (역할 구분) • 타이틀을 원형 뱃지로 표현 — 컬럼 상단 절반 걸침 (overhang) • 사진을 borderless 가 아니라 둥근 corner + opacity 처리 (텍스트 가독성 확보) • 체크박스 불릿 — 토큰화 가능 (Phase Z list-marker 후보)	styles/frame-patterns/persona-cards.css (후보) + tokens/colors.css 컬럼별 actor hue palette (후보) + svg helpers 원형 뱃지 (helper area 후보)	다수 이미지 자산 : BG texture (×3), overlay (×3), photo (×3), badge outer/inner (×6), 체크박스 (×20 동일). 사진은 컨텍스트 의존 → Phase Z 에서 placeholder / 사용자 제공 자산 필요. 체크박스는 SVG 단순 대체 가능	원본 2601×1927 (대형 frame), scale 0.49213
15	1171281192	policy-4card-plus-list	미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.	—	TBD after conversion	—	—
16	1171281193	quadrant-4	• 2×2 사분면 (각 1080×270 헤더/푸터바 + 본문) • 헤더/푸터 bar (4 개) : brown gradient (좌측, 270deg, rgba(165,161,150,0.5)→#39321E) / green gradient (우측, 270deg, rgba(41,107,85,0.5)→#032118) • Bar 라벨 : 60px Black white + text-shadow: 0 0 4px #322c1e • 사분면 헤드라인 : red #ff0000 55px Bold (강조) • 본문 : black 42px Regular, bullet list (<ul><li>, 텍스트 마커) • 중앙 원 + 영문 인용 (white 55px Bold) • 배경 텍스처 PNG (border-radius: 50px, ×4 동일)	• 2×2 quadrant 패턴 : 4 사분면에 헤드라인 + body 쌍 + 헤더/푸터 bar • bar 색 양극 (brown / green) — 좌·우 의미 구분 • bar text 강한 시각 강조 : 60px Black + text-shadow • 사분면 헤드라인 red — 문제 / 이슈 강조 패턴 • 중앙 원 + 인용 — 결론 표현 (옵셔널) • bullet — <ul><li> 텍스트 마커 (이미지 마커 X)	styles/frame-patterns/quadrant.css (후보) + tokens/colors.css bar gradient + 강조 red (후보)	배경 텍스처 PNG (×4 동일) + 중앙 원 PNG + bar SVG (×4, CSS gradient 변환 가능). 배경 / 원만 이미지 유지	변형 축 : quadrants[4] (required, 고정), bar_labels[4] (required), center_quote / center_image / bg_texture (optional). 원본 2226×1766, scale 0.57503
17	1171281194	paired-rows-2x2	• 4 행 (각 좌 pill + 본문 + 분할선 + 우 pill + 본문) • 행 배경 : border: 3px #60A451, radius: 30px, bg: rgba(250,237,203,0.15) • 분할선 : dashed 2px #60A451 (CSS) • pill 이미지 (R16: 두루마리 곡선) — 좌측 left:-45.3% width:145.3% / 우측 left:0 width:151.25% • pill 라벨 : 40px Bold white • 본문 : 36px Medium #0c271e • 행 교대 pill 회전 : 상행 정상 / 하행 rotate(180deg) • 타이틀 : 70px Bold gradient #CC5200→#883700	• paired-rows 패턴 : 좌 / 우 라벨 + body 페어, 분할선 중앙 • 두루마리 pill (R16) : 이미지 기반 곡선 형상 — CSS 재구성 곤란 • 상/하 pill 회전 교대 = 시각 리듬 • translucent bg + colored border = visual containment • dashed 분할선 = soft separation	styles/frame-patterns/compare-paired.css (후보, Frame 18 과 같은 family) + tokens/colors.css border / bg color (후보)	타이틀 아이콘 PNG + 두루마리 pill PNG (R16 frame 배치, CSS 재구성 곤란) + 분할선 SVG (CSS 변환 가능)	변형 축 : rows[N=3~6], pill_alternation 상/하 교대 (required), pill_image (required), bg_border_color: #60A451 (required). 원본 1857×1326, scale 0.68927. compare-paired family — variant : paired-rows (pill alternation)
18	1171281195	compare-rows	• 타이틀 70px Bold gradient text (#CC5200 → #883700) + 아이콘 • 서브헤더 pill bar : linear-gradient(270deg, #285B4A → #4A4026), border-radius: 50px • 중앙 카테고리 뱃지 12 개 : 같은 gradient (alpha 0.64~0.8), border-radius: 10px • 좌·우 텍스트 색 양극 : #5C3714 (BIM 측, 갈색계) ↔ #285B4A (DX 측, 청록계), 40px Bold • 결론 박스 : #FAEDCB + mix-blend-mode: multiply • 결론 강조 텍스트 : #AE3607 55px Bold	• 다행 비교표 패턴 : 좌 (BIM/AS-IS) ↔ 중앙 카테고리 라벨 ↔ 우 (DX/TO-BE) 의 3 컬럼 페어드 • 양극 색 표현 : 좌·우를 명도·색상이 다른 두 hue 로 분리 (대비 의도) • gradient 재사용 : title gradient + bar/badge gradient 가 동일 팔레트 (저채도 그린 + 다크 brown) 변주 • 결론 처리 : multiply blending + accent color 로 강조	styles/frame-patterns/compare-paired.css (후보, Frame 17 과 같은 family) + tokens/colors.css 의 --g-title / --c-as-is / --c-to-be (후보) + styles/blocks/conclusion.css multiply blend (후보)	타이틀 아이콘 PNG 1 개 (이미지 유지) + 화살표 SVG 1 개 (rotate(180deg), 이미지 유지) + 결론 박스 SVG → CSS 변환 완료 (자산 불필요)	변형 축 : rows[N=8~15] (required), title (required), conclusion / arrow_decoration (optional). 원본 1868×1908, scale 0.68524. compare-paired family — variant : vs-center-badge (좌·우 텍스트 + 중앙 카테고리 라벨 컬럼)
19	1171281197	cards-3-compare	미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.	—	TBD after conversion	—	—
20	1171281198	cards-3-header	미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.	—	TBD after conversion	—	—
21	1171281201	split-panel-diagram	• 좌 다이어그램 이미지 + 우 4 번호 항목 + 하단 결론 바 • 14 자산 (다이어그램 요소 / 번호 뱃지 / 행 바 / 화살표 / 결론 바) — 모두 이미지 유지	• split-panel 패턴 (이미지-기반 다이어그램 + 번호 리스트) • 자산 의존 큼 — Phase Z 재구성 시 다이어그램 이미지 제공 필요	styles/frame-patterns/split-panel.css (후보, Frame 22 와 같은 family)	14 자산 모두 이미지 유지. 다이어그램 이미지 = 핵심 자산	변형 축 : right_items[N=3~6], conclusion_text (optional). 원본 1889×824, scale 0.67761. flat.md sparse
22	1171281202	split-panel-numbered	• 좌 패널 : 배경 IMG + 카테고리 텍스트 (40px Bold white, text-shadow) + detail (35px Medium black) • 우 패널 : 5 행 (번호 뱃지 IMG + 행 바 IMG + 텍스트 45px Medium #11231d + 화살표 IMG rotate(180deg)) • 중앙 연결 : 세로 괄호 IMG + 커넥터 IMG • 행 바 (×5 동일 이미지) • 번호 뱃지 (5 개 별개 이미지) • 타이틀 : 70px/50px gradient	• split-panel + numbered list 패턴 : 좌 카테고리 패널 + 우 번호 항목 페어 • 카테고리 텍스트 = text-shadow + white (배경 위 가독성) • 번호 뱃지 + 행 바 + 화살표 = 단위 리스트 행 컴포넌트 • 중앙 괄호 / 커넥터 = 좌 ↔ 우 연결 시각화	styles/frame-patterns/split-panel.css (후보, Frame 21 과 같은 family)	15 자산 (좌측 BG, 타이틀 장식, 구분선 ×3, 세로 괄호, 커넥터, 행 바 ×5 동일, 뱃지 ×5 별개, 화살표 ×5 동일, 타이틀 아이콘) — 모두 이미지 유지	변형 축 : left_categories[N=2~5], right_items[N=3~8] (required), bg_image (required), bracket_image (optional). 원본 1863×834, scale 0.68707
23	1171281203	table-2col	• 열 헤더 bar (3 개) : #589e8d (구분/좌) / #ef7a26 (우), 40px Bold white • 행 배경 교대 : white / rgba(253,198,158,0.16) • 강조 키워드 : #a14101 Bold inline • 본문 : black 40px Medium • 그리드 라인 : 모두 CSS border • 배경 텍스처 PNG (상단 / 하단 분할)	• compare-table 패턴 (구분 컬럼 + N 열 비교) • 헤더 bar 색상 양극 (#589e8d 청록 / #ef7a26 오렌지) — 의미 구분 • 행 alternating bg = readability • 강조 키워드 inline color (#a14101) — 표 셀 안 강조	styles/frame-patterns/compare-table.css (후보, Frame 24 와 같은 family) + tokens/colors.css 헤더 bar palette (후보)	배경 PNG 2 개 + 아이콘 PNG + line SVG ×5 (모두 CSS border 변환). 배경 PNG 만 이미지 유지	변형 축 : columns[2], rows[N=3~7] (required), header_colors[2] (required), bg_images[2] (optional). 원본 1924×2014, scale 0.66527. table family — Frame 24 / 30 / 31 과 column 수 / 행 수만 다름, variant 통합 후보
24	1171281204	table-3col	• 열 헤더 bar (4 개) : #589e8d (구분/상용) / rgba(62,53,35,0.9) (3rd) / #ef7a26 (전용), 40px Bold white • 행 배경 교대 : white / rgba(253,198,158,0.16) • 강조 키워드 : #a14101 Bold inline • 본문 : black 35px Medium • 그리드 라인 : 모두 CSS border • 행 라벨 (좌측 열) : 35px Bold	• compare-table 패턴 (Frame 23 의 3-column variant — 같은 family) • 헤더 색상 3-way (#589e8d / 다크 brown / #ef7a26) — Frame 23 의 2-way 확장 • 행 라벨 좌측 열 = 행 그룹 식별자 (예 : 개념 / 개발주체 / 성과품 / 사용)	styles/frame-patterns/compare-table.css (후보, Frame 23 과 같은 family — variant: columns[N=2~4]) + tokens/colors.css 헤더 bar palette 확장 (후보)	아이콘 PNG + line SVG ×8 (전부 CSS border 변환). 자산 의존 거의 없음	변형 축 : columns[N=2~4], rows[N=3~6] (required), header_colors[N] (required), highlight_color (optional, default #a14101). 원본 1869×1926, scale 0.68511. table family — Frame 23 / 30 / 31 과 variant 통합 후보
25	1171281205	left-categories-right-logos	미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.	—	TBD after conversion	—	—
26	1171281206	cards-4-grid	미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.	—	TBD after conversion	—	—
27	1171281208	central-split-synthesis	• 좌 (생산성 향상) + 우 (디지털 전환) + 중앙 원 (건설산업의 고부가가치화) • 상단 헤더 bar / 하단 결론 bar (SVG rotate(180deg)) • 2D 배치 (중앙 원 좌 / 우 영역 겹침) → absolute + zoom	• split-center 패턴 : 좌 / 우 / 중앙 3-area 합성 • 중앙 원 = 좌·우 영역에 걸침 (overhang) — 결론 표현 방식	styles/frame-patterns/split-center.css (후보)	변환 완료 (preview.png 존재). 자산 상세 미기록 (flat.md sparse)	원본 1697×914, scale 0.75427. flat.md sparse — 추가 관찰 필요
28	1171281209	title-plus-3-emphasis	미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.	—	TBD after conversion	—	—
29	1171281210	banner-top-2col-bottom	미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.	—	TBD after conversion	—	—
30	1171281211	table-3col	미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.	—	TBD after conversion	—	—
31	1171281212	table-3col	미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.	—	TBD after conversion	—	—
32	1171281213	central-5-goals	미변환 — 스타일 추출 보류. analysis.md 기준 layout / slot 존재만 확인.	—	TBD after conversion	—	—

---

4. Token Inventory

14 변환 frame 에서 관찰된 값과 기존 templates/styles/tokens/ 의 매칭 검증.

⚠️ 본 inventory 는 신규 발굴표가 아니라 기존 token 검증 + gap 발견 + 보류 정리표. ⚠️ 추출 / 검증만. 실제 token 파일 생성 / 변경 / 폐기는 별도 승인 단계.

작성 룰 (최종 6 개)

1. 2+ frame 에서 반복 관찰된 값만 행 승격.
2. 1 frame 에서만 관찰된 값은 Token Inventory 에 올리지 않음 — 해당 Frame Inventory 의 Notes 에 "관찰 보류 (single-frame)" 로만 남김.
3. 패턴 / 기법은 token 이 아니라 family CSS / variant 영역 — mix-blend-mode, R16 pill 곡선, hue rotation, badge overhang, pill alternation 등.
4. 타이포 / 스페이싱은 값 직접 매칭이 아니라 위계 매핑 — figma raw px (frame 1280 폭 기준) ↔ slide-body token (slide-body 스케일) 은 스케일이 다르므로 위계만.
5. gradient 는 from / to pair 단위 한 행.
6. covered 는 hex 정확 일치일 때만 — 부분 일치 / 변형은 gap_candidate 또는 Notes 에 별도 표기.

명명 컨벤션 (가벼운 가이드)

신규 token 후보에만 적용. 기존 token (--color-*, --font-*, --space-*, --card-*) 은 그대로 사용.

• --c-* color
• --g-* gradient
• --fs-* font-size
• --sp-* spacing
• --r-* radius
• --sh-* shadow

컬럼 정의

컬럼	의미
Token Category	color / gradient / typography / spacing / radius / shadow
Existing Token	templates/styles/tokens/{file} 의 token 명. 없으면 —
Covered Frame Observations	frame 번호 + 짧은 컨텍스트 라벨만 (값 X). status 에 따라 의미 다름 (아래 참조)
Gap / Candidate	신규 token 후보 (이름 + 값 + (후보)). 기존 token 검증인 행은 —
Status	covered / gap_candidate / hierarchy_mapping_only / hold_recheck_after_conversion
Notes	family CSS cross-reference + 변형 메타 + scale 경계 등

Covered Frame Observations 셀의 Status 별 의미

Status	Covered Frame Observations 의 의미
covered	이 token 이 cover 한 frame 들 (hex 정확 일치)
gap_candidate	이 후보가 target 으로 하는 frame 들 (2+ frame 에서 동일 값 관찰)
hierarchy_mapping_only	이 위계 매핑이 적용 가능한 frame 들 (값 직접 매칭 X)
hold_recheck_after_conversion	현재 cover 한 frame 없음 (—). 14 converted 기준 미관찰 — 전체 변환 후 재검증

Token Inventory — 18 행

Token Category	Existing Token	Covered Frame Observations	Gap / Candidate	Status	Notes
gradient	--color-block-title-from / --color-block-title-to (#CC5200 / #883700)	F17, F18 (frame inner title)	—	covered	compare-paired family 의 title gradient slot. F12, F13 의 title 은 from 이 #000 으로 변형 — 별도 행 (gap_candidate) 처리
gradient	--color-col-1-from / --color-col-1-to (#0D78D0 / #023056)	F13 (기술 bar — blue tone)	—	covered	three-pillar.css 의 column 1. 1 frame 매칭이지만 token 자체가 frame 값을 정확 흡수
gradient	--color-col-2-from / --color-col-2-to (#FF9A23 / #CC5200)	F13 (사람 bar — orange tone)	—	covered	three-pillar.css 의 column 2. #CC5200 는 title gradient from 과 같은 hex 이지만 의미 다름 (column-2 끝값)
gradient	--color-col-3-from / --color-col-3-to (#39BE49 / #23742C)	F13 (자연 bar — green tone)	—	covered	three-pillar.css 의 column 3
color	--color-compare-left (#5c3714)	F18 (BIM / AS-IS 측 텍스트)	—	covered	compare-paired.css 의 좌측 / AS-IS 색
color	--color-compare-right (#285b4a)	F14 (발주자 라벨), F18 (DX / TO-BE 측 텍스트)	—	covered	compare-paired.css 의 우측 / TO-BE + persona-cards.css 의 actor 색. F14, F18 모두 hex 정확 일치 (대소문자 제외) — 의미 다르지만 token 재사용 가능
color	--color-compare-badge (#ae3607)	F18 (결론 강조 / VS 뱃지)	—	covered	compare-paired.css 의 결론 / VS 뱃지 강조색
gradient	—	F12, F13 (title — #000 → #883700)	--g-title-dark: linear-gradient(#000, #883700) (후보)	gap_candidate	title gradient 변종 (from 이 #000). --color-block-title-to 와 끝값 공유 — 신규 token 으로 묶을지 / variant 처리할지 검토. 영향 family : 미정 (cycle.css / three-pillar.css)
color	—	F23, F24 (table 헤더 좌 / 구분 — 청록 톤)	--c-table-header-cyan: #589e8d (후보)	gap_candidate	compare-table.css 의 좌측 / 구분 헤더. 기존 --color-table-header-bg: #64748b (회색) 과 다른 톤 — 회색 헤더 token 은 hold 행 참조
color	—	F23, F24 (table 헤더 우 / 전용 — 오렌지 톤)	--c-table-header-orange: #ef7a26 (후보)	gap_candidate	compare-table.css 의 우측 헤더
color	—	F23, F24 (table 행 강조 키워드)	--c-table-highlight: #a14101 (후보)	gap_candidate	compare-table.css 의 inline 강조색
color	—	F23, F24 (table 행 교대 배경)	--c-table-row-alt: rgba(253,198,158,0.16) (후보)	gap_candidate	compare-table.css 의 alternating row bg. white / --c-table-row-alt 교대
typography	--font-slide-title (22px) / --font-zone-title (13px) / --font-sub-title (12px)	F12, F13, F17, F18 (frame inner title — raw 70px Bold)	—	hierarchy_mapping_only	frame raw 70px 는 figma 1280 폭 기준 — slide-body 스케일과 다름. 위계 매핑만. frame inner title 이 slide-body 안에서 어느 위계 (--font-zone-title / --font-sub-title) 로 매핑될지는 catalog 설계 단계 결정
typography	--font-body (11px)	F12, F13, F16, F17, F18, F22, F23, F24 (본문 — raw 35~42px Medium)	—	hierarchy_mapping_only	frame raw 35~42px 는 figma 1280 폭 기준. slide-body 안에서는 --font-body 위계 적용
spacing / radius	--space-md / --space-lg / --card-radius 등	F09 (pill radius: 30px), F16 (배경 radius: 50px), F17 (행 radius: 30px), F18 (badge radius: 10px, pill radius: 50px), F23/F24 (셀 padding)	—	hierarchy_mapping_only	frame raw radius / gap / padding 은 figma 폭 기준. slide-body 안에서는 위계 매핑 + 재산정 필요
color	--color-dark-card-1 (#1a365d) / -2 (#1e3a2f) / -3 (#3b1f2b) / -title (#fbbf24) / -body (#e2e8f0)	—	—	hold_recheck_after_conversion	다크 카드 시각 시스템 5 token. 14 converted 기준 미관찰. 전체 32 frame 변환 후 재검증 (특히 미변환 zone_extract 18 개)
color	--color-pill-bg (#1e293b) / --color-pill-text (#ffffff)	—	—	hold_recheck_after_conversion	다크 pill 스타일. F09 pill (translucent + colored border) / F18 badge (gradient) 와 다른 톤. 14 converted 기준 미관찰 — 전체 변환 후 재검증
color	--color-table-header-bg (#64748b) / --color-table-header-text (#ffffff)	—	—	hold_recheck_after_conversion	회색계 표 헤더. F23 / F24 의 colored 헤더 (#589e8d / #ef7a26) 와 다른 톤. 14 converted 기준 미관찰. 향후 회색 헤더 frame 등장 시 재검증

---

5. Legacy Reference

• legacy structures 6 개는 runtime 재사용 후보 X
• frame 변환본 (figma_to_html_agent/blocks/) 이 우선 source
• disposition 분류 목적은 archive / delete 판단
• Phase Z catalog / runtime 설계 근거로 직접 사용 X

발견 — 6 파일 모두 frame 변환본의 slide-body 스케일 재구현

각 legacy file 의 헤더 주석에 Source: figma_to_html_agent/blocks/{figma_id} 명시 (확인). figma 변환 (raw 1280 폭, 40~70px 폰트) → slide-body 스케일 (var(--font-sub-title) 12px, var(--space-sm) 8px 등 token 적용) 재구현 시도. 즉 figma 변환과 별개의 legacy 가 아니라, figma 변환에서 파생된 slide-body 스케일 시도.

→ Phase Z runtime 은 frame catalog + family CSS 로 rebuild 예정. legacy structures 는 변환 검증 증거 / 토큰 매핑 참고 외 직접 사용 X.

Phase Z Disposition 값

• archive — 보존 (스타일 / 토큰 매핑 증거 가치)
• delete_after_extract — Style Note 추출 후 삭제
• hold_until_catalog_ready — Phase Z catalog 안정화 전까지 유지

Legacy Reference — 6 행

Legacy File	Current Role	Phase Z Disposition	Style Note	Notes
compare-table-2col.html	F23 (1171281203) 의 slide-body 스케일 재구현. 표 헤더 colored / 행 교대 bg / 강조 inline color	delete_after_extract (후보)	inline hex (#589e8d / #ef7a26 / #a14101 / rgba(253,198,158,0.16)) 가 Token Inventory 의 gap_candidate 4 행과 정확 일치	compare-table.css family 의 first reference 가치
compare-table-3col.html	F24 (1171281204) 의 3-column variant slide-body 재구현	delete_after_extract (후보)	F23 과 같은 hex + 추가 rgba(62,53,35,0.9) (column 2 어두운 brown 헤더). 단일 frame 관찰값 — Token Inventory 비승격 (룰 #2)	compare-table.css family variant — F23 과 통합 후보
compare-vs-rows.html	F18 (1171281195) 의 slide-body 재구현	delete_after_extract (후보)	var(--color-compare-left) / var(--color-compare-right) 기존 token 활용 — covered token 검증 증거	compare-paired.css family
issues-paired-rows.html	F17 (1171281194) 의 slide-body 재구현	delete_after_extract (후보)	--color-row-border: #60A451 inline 정의 — F17 단일 frame 관찰값, Token Inventory 비승격 (룰 #2). family CSS variant 처리 검토	compare-paired.css family
prerequisites-3col.html	F13 (1171281190) 의 slide-body 재구현	delete_after_extract (후보)	--color-col-N-{from,to} 기존 token 활용 가능 — covered token 검증 증거	three-pillar.css family
stacked-arrow-list.html	F09 (1171281180) 의 slide-body 재구현	delete_after_extract (후보)	타이틀 바 #fbd5b9 / 텍스트 #144838 inline — F09 단일 frame 관찰값, Token Inventory 비승격 (룰 #2)	pill-list.css family

---

6. 진행 단계

단계	상태
33 frame ↔ Integration Map 32 행 대조	✅ 완료 (FRAME-INTEGRATION-MAP.md row 21~28 ID 정정 반영)
Inventory 골격 + 샘플 5 행 (이 문서)	✅ 본 단계
사용자 검토	⬜
Frame Inventory 27 행 일괄 확장 (32 frame 완성)	⬜
Token Inventory 본격 작성	⬜
Legacy Reference 본격 작성	⬜
Phase Z catalog / runtime template 설계	⬜ (별도 단계)
사용자 승인 → templates/blocks/ 신규 구조 교체 (프로모션 게이트)	⬜ (별도 단계)

샘플 5 검증 포인트

검증 항목	결과
변환 / 미변환 frame 이 같은 양식에 들어가는가	✅ — 미변환은 Style Elements 셀 1 개에 통일 보일러플레이트, 나머지 4 셀은 — (Phase Z Target 만 TBD after conversion 또는 N/A — reference_only)
Style Elements 와 Extracted Style Hints 의 구분이 명확한가	✅ (Frame 18, 14) — 관찰 사실 (CSS 값 / 픽셀) vs 계승 의도 (패턴 / 의미)
Phase Z Target 후보 표현이 통일되는가	✅ — 변환 frame 은 "(후보)" 명시, 미변환은 TBD after conversion, reference_only 는 N/A — reference_only
미변환 frame 이 analysis.md 내용을 redescribe 하지 않는가	✅ — 보일러플레이트 1 행 외 어떤 redescription 도 없음
변환 frame 의 Notes 가 스타일 계승에 의미 있는 메타만 담는가	⚠️ 샘플은 적정. 32 행 확장 시 단순 출처 (Scale 값, "대표 frame" 등) 는 추가로 정리 필요

---

7. 부록 — 제외 / 특수 항목

figma_to_html_agent/blocks/ 의 33 개 디렉토리 중 1171281171 은 본 인벤토리 메인 32 frame 에서 제외한다 (texts.md 만 존재, index.html / analysis.md 없음, 정체 미확인). 상세는 FRAME-INTEGRATION-MAP.md 부록 참조.