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:
42
figma_to_html_agent/blocks/1171281210/_render.py
Normal file
42
figma_to_html_agent/blocks/1171281210/_render.py
Normal file
@@ -0,0 +1,42 @@
|
||||
from selenium import webdriver
|
||||
from selenium.webdriver.chrome.options import Options
|
||||
from PIL import Image
|
||||
import os, time
|
||||
|
||||
here = os.path.dirname(os.path.abspath(__file__))
|
||||
renders = os.path.join(here, '_renders')
|
||||
os.makedirs(renders, exist_ok=True)
|
||||
|
||||
opts = Options()
|
||||
opts.add_argument('--headless=new')
|
||||
opts.add_argument('--hide-scrollbars')
|
||||
opts.add_argument('--force-device-scale-factor=1')
|
||||
opts.add_argument('--window-size=1600,900')
|
||||
d = webdriver.Chrome(options=opts)
|
||||
|
||||
p = os.path.join(here, 'index.html').replace(os.sep, '/')
|
||||
d.get('file:///' + p)
|
||||
time.sleep(2.0)
|
||||
full_png = os.path.join(renders, '_full.png')
|
||||
d.save_screenshot(full_png)
|
||||
|
||||
r = d.execute_script(
|
||||
'const r=document.querySelector(".slide").getBoundingClientRect();'
|
||||
'return [r.x,r.y,r.width,r.height];'
|
||||
)
|
||||
print('slide bounds:', r)
|
||||
Image.open(full_png).crop(
|
||||
(int(r[0]), int(r[1]), int(r[0]+r[2]), int(r[1]+r[3]))
|
||||
).save(os.path.join(renders, 'slide.png'))
|
||||
|
||||
b = d.execute_script(
|
||||
'const r=document.querySelector(".block").getBoundingClientRect();'
|
||||
'return [r.x,r.y,r.width,r.height];'
|
||||
)
|
||||
print('block bounds:', b)
|
||||
Image.open(full_png).crop(
|
||||
(int(b[0]), int(b[1]), int(b[0]+b[2]), int(b[1]+b[3]))
|
||||
).save(os.path.join(renders, 'block.png'))
|
||||
|
||||
d.quit()
|
||||
print('OK')
|
||||
BIN
figma_to_html_agent/blocks/1171281210/_renders/_full.png
Normal file
BIN
figma_to_html_agent/blocks/1171281210/_renders/_full.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 225 KiB |
BIN
figma_to_html_agent/blocks/1171281210/_renders/block.png
Normal file
BIN
figma_to_html_agent/blocks/1171281210/_renders/block.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 211 KiB |
BIN
figma_to_html_agent/blocks/1171281210/_renders/block_2x.png
Normal file
BIN
figma_to_html_agent/blocks/1171281210/_renders/block_2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
figma_to_html_agent/blocks/1171281210/_renders/slide.png
Normal file
BIN
figma_to_html_agent/blocks/1171281210/_renders/slide.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 216 KiB |
BIN
figma_to_html_agent/blocks/1171281210/_renders/slide_2x.png
Normal file
BIN
figma_to_html_agent/blocks/1171281210/_renders/slide_2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
141
figma_to_html_agent/blocks/1171281210/analysis.md
Normal file
141
figma_to_html_agent/blocks/1171281210/analysis.md
Normal file
@@ -0,0 +1,141 @@
|
||||
# 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% 크기)
|
||||
@@ -0,0 +1,17 @@
|
||||
# Frame 1171281210 — Process/Product 혁신
|
||||
|
||||
## 구조
|
||||
- **layout**: compare-2banner-top-2col-bottom
|
||||
- **detail**: 상단 좌우 2배너(과정/결과) + 하단 좌우 2열 상세(AS-IS vs TO-BE 비교 + 3개 세부 섹션)
|
||||
|
||||
## 내용
|
||||
Process 혁신과 Product 혁신 — 과정의 Analogue→Digital Transformation, 결과의 2D도면→3D모델 전환. AS-IS/TO-BE 대조와 GIS·BIM·Solution 제공 맥락 설명.
|
||||
|
||||
## 후보 키워드
|
||||
과정혁신, 결과혁신, Analogue, Digital, 2D, 3D, Transformation, Product, Process, AS-IS, TO-BE, 융복합, 창의성, 투명성, 실체, 지반모델, 본태측량, 수치지형도, 위치기반, 등고선, 3D모델, 시공Solution, 설계Solution, 성과물, 정보물, Solution, BIM, GIS
|
||||
|
||||
## 메타
|
||||
- source: texts.md + flat.md
|
||||
- schema_version: analysis-v1
|
||||
- tagged_by: claude-opus-4-7
|
||||
- tagged_at: 2026-04-21
|
||||
BIN
figma_to_html_agent/blocks/1171281210/assets/arrow.png
Normal file
BIN
figma_to_html_agent/blocks/1171281210/assets/arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
131
figma_to_html_agent/blocks/1171281210/flat.md
Normal file
131
figma_to_html_agent/blocks/1171281210/flat.md
Normal file
@@ -0,0 +1,131 @@
|
||||
# Frame 1171281210 — 실측 기록 (flat)
|
||||
|
||||
> 원본: 3848.00390625 × 1388 px (node 181:2519, file 9S6LsQyO6zlRxtiqZccOUM, page 29:373)
|
||||
> 패턴: process-products-2col-banner-top (Process/Products 혁신, 좌우 2컬럼 + 상단 헤더 배너)
|
||||
> Scale: 1280 / 3848 = **0.33270** → 슬라이드 16:9 안에 1280 × 461.7 px 차지
|
||||
|
||||
## 구조 (bottom-up)
|
||||
|
||||
```
|
||||
Frame 181:2519 "Frame 1171281210" (3848 × 1388)
|
||||
└─ Group 181:2223 "Group 1171285823" (0, 0) 3848×1388
|
||||
├─ Group 181:2224 "Group 4697" (0, 0) 3845×933 ← body_bg.svg (단일 SVG로 export)
|
||||
│ ├─ vector 181:2225 "Rectangle 42336" ← 좌측 path: 0~1923, gradient 흰(α0.3)→#39321E(α0.3) 세로
|
||||
│ └─ vector 181:2226 "Rectangle 42337" ← 우측 path: 1921~3845, gradient #296B55(α0.3)→흰(α0.3) 세로
|
||||
│
|
||||
├─ TEXT 181:2237 "Analogue 개념 기반 업무의 Digital Transformation"
|
||||
│ (82.02, 237) 1250.72×95 — 50px Black #5C3714, leading 95
|
||||
├─ TEXT 181:2229 AS-IS 불릿 (좌하)
|
||||
│ (125.01, 340) 539.37×210 — 40px Bold black, list-disc, leading 70, ms-60
|
||||
│ • 개념, 도서, 행정 절차 중심
|
||||
│ • 2D 도면, 전문가, 규정
|
||||
│ • 업무 구분(단절), 책임
|
||||
├─ TEXT 181:2235 TO-BE 불릿 (좌상)
|
||||
│ (1075.03, 340) 671.92×210 — 40px Bold black, list-disc
|
||||
│ • 시각화된 목적물, 소통, 투명성 중심
|
||||
│ • 3D 모델, 참여자, 실체
|
||||
│ • 협업(융∙복합), 창의성
|
||||
├─ rounded-rect 181:2240 "image 2645" (763, 400) 252×90 ← arrow.png
|
||||
│
|
||||
├─ TEXT 181:2233 "위치기반의 3D 모델을 사용하는 Process 혁신"
|
||||
│ (82.02, 600) 991.34×95 — 50px Black #5C3714
|
||||
├─ TEXT 181:2227 (좌 섹션2 본문)
|
||||
│ (125.04, 722) 1465.75×140 — 40px Bold black, list-disc
|
||||
│ • 위치기반(지리적, 지형, 지반상태 포함)의 GIS와 3D 모델(형상, 내용속성) 기반의 건설 정보를 포함하는 BIM의 연계를 통한 Process 혁신
|
||||
│
|
||||
├─ TEXT 181:2234 "사용자 중심의 Solution(S/W) 제공"
|
||||
│ (82.02, 916) 991.34×95 — 50px Black #5C3714
|
||||
├─ TEXT 181:2228 (좌 섹션3 본문)
|
||||
│ (125, 1038) 1465.77×350 — 40px Bold black, list-disc
|
||||
│ • 인프라 건설산업의 1차적인 Process 혁신은 등고선 중심의 지형도가 아닌\n속성이 포함된 수치지형도와 본태 측량에서 획득한 3D 지반모델 구축 필수
|
||||
│ • 설계와 시공에 관련된 기술을 정리하고 디지털화하여 S/W 로 기술 축적
|
||||
│ • 서로 다른 S/W로 작성되어 분절화된 Analogue 방식의 성과물과 정보물을\n연계가 가능하도록 설계, 시공 Solution 제공
|
||||
│
|
||||
├─ TEXT 181:2236 "Copy & Paste로 인한 하향 평준화된 기존 성과품의 품질 향상"
|
||||
│ (2135, 237) 1324.07×95 — 50px Black #084C56
|
||||
├─ TEXT 181:2230 (우 섹션1 본문)
|
||||
│ (2178.04, 351) 1465.75×140 — 40px Bold black, list-disc
|
||||
│ • 과거 수작업으로 시행하면서 발생하던 오류 등의 최소화
|
||||
│ • 정확한 Data에 기반한 계획과 개선된 높은 품질의 성과물
|
||||
│
|
||||
├─ TEXT 181:2239 "Analogue 기반 도서 외 Digital 기반 정보물 추가"
|
||||
│ (2135, 538) 1430.15×95 — 50px Black #084C56
|
||||
├─ TEXT 181:2232 (우 섹션2 본문, ＊ 주석 포함)
|
||||
│ (2178.01, 652) 1471.15×210 — 40px Bold black + 25.8px ＊
|
||||
│ • 규정에만 의존한 도면, 수량, 계산서, 시방서 등의 성과물＊에 3D 모델, 시뮬레이션 등의 Digital 기반 정보물(Information Data and Products)이 추가
|
||||
│ ＊ 정확한 숫자 확인 및 진행과정의 확인 등을 위해 성과물은 지속적으로 존속
|
||||
│
|
||||
├─ TEXT 181:2238 "Solution을 이용한 업무효율화(사용자 편의, 협업 및 의사소통 강화 등)"
|
||||
│ (2135, 916) 1324.07 — 50px main + 40px sub-paren, Black #084C56
|
||||
├─ TEXT 181:2231 (우 섹션3 본문)
|
||||
│ (2178.01, 1030) 1555.87×280 — 40px Bold black, list-disc
|
||||
│ • 디지털 기반 성과물인 Graphic 중심의 3D 모델, 시뮬레이션을 제대로 활용하기 위해서는 기존의 낮은 수준이 아니라 공학용 사이니지(H/W) 시스템이 필수로 갖춰야야만 함
|
||||
│ • Engn. Solution을 통해 프로젝트에 관한 이슈를 함께 검토하고 논의하고 다양한 건설단계별 정보를 디지털 데이터로 저장하여 건설의 전 과정을 통합관리
|
||||
│
|
||||
├─ Group 181:2241 "Group 1171276616" (0, 62) 1921×142 ← 좌측 헤더 (rotate 180°)
|
||||
│ ├─ vector 181:2242 "Rectangle 42421" ← header_left_bg.svg (둥근 좌측 r=71)
|
||||
│ └─ TEXT 181:2243 "과정 (Process)의 혁신"
|
||||
│ center=(1342.45, 133.5) → top-left=(803.99, 62) 1076.90×143
|
||||
│ — 70px Black, tracking 3.5px, bg-clip-text gradient
|
||||
│ layer1: linear-gradient(90deg, #3E3523 0%, #3E3523 100%) — 솔리드 브라운
|
||||
│ layer2: linear-gradient(180deg, #296B55 0%, #123328 100%) — 가려짐 (1번이 솔리드)
|
||||
│ text-shadow: 0 0 4px #322C1E
|
||||
│
|
||||
└─ Group 181:2244 "Group 1171276617" (1923, 62) 1925×142 ← 우측 헤더 (rotation 없음)
|
||||
├─ vector 181:2245 "Rectangle 42422" ← header_right_bg.svg (둥근 좌측 r=71)
|
||||
└─ TEXT 181:2246 "결과 (Products)의 혁신"
|
||||
(2135, 75) 1114.41×116 — 70px Black, tracking 3.5px
|
||||
layer1: linear-gradient(90deg, #225F4A 0%, #225F4A 100%) — 솔리드 그린
|
||||
text-shadow: 0 0 4px #322C1E
|
||||
```
|
||||
|
||||
## 에셋
|
||||
|
||||
| 파일 | 의미 | 크기 | 위치 | 처리 |
|
||||
|------|------|------|------|------|
|
||||
| (Figma SVG: body_bg) | 본문 영역 배경 (좌: #39321E α0.3 → 흰 α0.3 세로, 우: #296B55 α0.3 → 흰 α0.3 세로) | 3845×933 | (0, 0) | **CSS linear-gradient 2 개** (단순 단방향 그라디언트, 슬라이드 픽셀 의존 없음 — R8) |
|
||||
| (Figma SVG: header_left_bg) | 좌측 헤더 배경 (둥근 좌측 r=71, gradient #A5A196 α0.1 → #39321E α1) | 1921×142 | (0, 62) rotate(180°) | **CSS border-radius 0 71 71 0 + linear-gradient(to right, rgba(136,131,118,.343) 0%, #39321E 73.1% 100%)** — 회전 외관 그대로 |
|
||||
| (Figma SVG: header_right_bg) | 우측 헤더 배경 (둥근 좌측 r=71, gradient #296B55 α0.1 → #032118 α1) | 1925×142 | (1923, 62) | **CSS border-radius 71 0 0 71 + linear-gradient(to right, #032118 0%, rgba(41,107,85,.1) 100%)** |
|
||||
| `assets/arrow.png` | AS-IS → TO-BE 화살표 (gradient bar + arrow head 합성) | 252×90 | (763, 400) | PNG 유지 (R9 예외 — 단순 그라디언트가 아닌 일러스트성 자산) |
|
||||
|
||||
> **그라디언트 수학 (post-rotation 외관 도출)**
|
||||
>
|
||||
> **Left header** — 원본 grad 라인 x1=2437.15 (α0.1 light) → x2=516.146 (#39321E α1). 좌측 viewBox 0..1921 안 매개변수: 우단 t = (2437.15 - 1921) / (2437.15 - 516.146) = 0.269, 좌단 t = 1.269 (clamp 되어 stop1). 우단 색 = (1 - 0.269) · stop1 + 0.269 · stop0 = rgba(136, 131, 118, 0.343). rotate(180°) 적용 후 좌단 ↔ 우단 거울 → CSS 는 좌→우 방향, 0% rgba(136,131,118,.343), 73.1% #39321E (= 1 - 0.269 = 0.731), 100% #39321E.
|
||||
>
|
||||
> **Right header** — 원본 grad x1=1925 → x2=0, 회전 없음. 그대로 CSS 좌→우: 0% #032118 (#032118 α1.0), 100% rgba(41, 107, 85, 0.1).
|
||||
>
|
||||
> **Body bg** — α 0.3 세로 2 개. paint0 (y1=932 white → y2=0 #39321E) → 좌측 박스: `linear-gradient(to bottom, rgba(57,50,30,.3) 0%, rgba(255,255,255,.3) 100%)`. paint1 (y1=0 #296B55 → y2=933 white) → 우측 박스: `linear-gradient(to bottom, rgba(41,107,85,.3) 0%, rgba(255,255,255,.3) 100%)`.
|
||||
|
||||
## 이상 탐지 결과
|
||||
|
||||
| 검사 | 결과 |
|
||||
|------|------|
|
||||
| 회전 단일문자 (bbox 가로 > 세로 × 1.5) | 없음 |
|
||||
| 좁은 박스 세로 텍스트 (width < fontSize × 0.8) | 없음 |
|
||||
| 중복 노드 (동일 좌표 + 동일 내용) | 없음 |
|
||||
| Vector 좌표 metadata vs design_context 불일치 | metadata에서 Group 4697 내부 vector(181:2225, 181:2226) 좌표가 부모 기준으로 비정상값(절반 위치). design_context의 통합 image 표시(왼=0, 위=0, 3845×933)를 신뢰. |
|
||||
| 회전 적용 (bbox vs render 차이) | **좌측 헤더 (Group 1171276616)에 rotate(180°) 적용** — design_context flex+rotate-180 wrapper 확인. 우측 헤더는 회전 없음. |
|
||||
| body_bg vs frame 높이 불일치 | body_bg 높이 933 < frame 1388. 하단 455px(섹션 3 영역)는 body_bg 없이 슬라이드 흰 배경 노출 → 디자인 의도 (하단으로 갈수록 흰색 페이드) |
|
||||
|
||||
## 변형 가능 축
|
||||
|
||||
- **columns[N=2] (required)** — 좌(Process)/우(Products), 항상 2개
|
||||
- `header_text` (required) — "과정 ~의 혁신" / "결과 ~의 혁신"
|
||||
- `header_color_palette` — 좌(브라운 #3E3523 / bg #A5A196→#39321E), 우(그린 #225F4A / bg #296B55→#032118)
|
||||
- `sections[N=3] (required)` — 항상 3개 섹션 (각 컬럼)
|
||||
- `title` (required) — 50px Black, 색상은 컬럼별
|
||||
- `body` — 본문. 다음 중 하나:
|
||||
- 좌 섹션1 한정: AS-IS / TO-BE 좌우 비교 (각 3 불릿) + 가운데 화살표
|
||||
- 일반: 단일 불릿 리스트 (1~5개 항목)
|
||||
- `body_bg_image` (optional) — 좌/우 톤 차이를 표현하는 원판 SVG. 없을 시 단순 흰 배경
|
||||
- `arrow_image` (optional) — AS-IS/TO-BE 분할 시에만 등장
|
||||
- `aster_footnote` (optional) — ＊ 표시 + 25.8px 작은 본문
|
||||
|
||||
## Sub-patterns
|
||||
|
||||
- `column-with-header-banner` — 컬럼 상단에 둥근 헤더 배너(라운드 좌측만 71, gradient 배경, bg-clip-text 텍스트)
|
||||
- 좌측 컬럼: 배너 회전 180° (rounded 우측이 컬럼 우단으로 향함)
|
||||
- 우측 컬럼: 회전 없음 (rounded 좌측이 컬럼 좌단으로 향함)
|
||||
- 결과: 두 배너의 둥근 모서리가 **가운데 분할선 양쪽**에 배치되는 미러 디자인
|
||||
- `as-is-to-be-pair` (좌 섹션1) — 좌(AS-IS) / 화살표 / 우(TO-BE) 가로 비교
|
||||
- `aster-footnote-inline` (우 섹션2) — 본문 끝 ＊ → 다음 줄 ＊로 시작하는 작은 글씨 주석
|
||||
302
figma_to_html_agent/blocks/1171281210/index.html
Normal file
302
figma_to_html_agent/blocks/1171281210/index.html
Normal file
@@ -0,0 +1,302 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1280">
|
||||
<title>Process/Products 혁신 (Frame 1171281210)</title>
|
||||
<!--
|
||||
Frame: 181:2519, 3848 × 1388 px (Frame 1171281210)
|
||||
Source: file 9S6LsQyO6zlRxtiqZccOUM, page 29:373
|
||||
Scale: 1280 / 3848 = 0.33270 (zoom on .inner per R19)
|
||||
패턴: process-products-2col-banner-top
|
||||
구조: 좌(Process) / 우(Products) 2 컬럼 + 상단 둥근 헤더 배너
|
||||
좌측 배너는 figma 에서 rotate(180°) 로 거울 처리되어 있으므로
|
||||
후처리(post-rotation) 외관 그대로 CSS 로 작성: 둥근 모서리 우측, 그라디언트 방향 좌→우
|
||||
순수 CSS — 배경 SVG 3 개는 모두 linear-gradient + border-radius 로 재현 (R8/R9 준수)
|
||||
유일한 비트맵 자산: arrow.png (일러스트성 그라디언트 화살표)
|
||||
-->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700;900&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
background: #e8ecf0;
|
||||
display: flex; justify-content: center; align-items: center;
|
||||
min-height: 100vh;
|
||||
word-break: keep-all;
|
||||
}
|
||||
.slide {
|
||||
width: 1280px; height: 720px;
|
||||
background: #fff;
|
||||
position: relative; overflow: hidden;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,.15);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.block {
|
||||
width: 1280px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.inner {
|
||||
width: 3848px; height: 1388px;
|
||||
position: relative;
|
||||
zoom: 0.33270;
|
||||
}
|
||||
|
||||
/* ────────────────────────────────────────────────
|
||||
① 본문 영역 배경 (3845 × 933, 상단만)
|
||||
좌(0~1923): #39321E α0.3 (top) → white α0.3 (bottom)
|
||||
우(1921~3845): #296B55 α0.3 (top) → white α0.3 (bottom)
|
||||
──────────────────────────────────────────────── */
|
||||
.body-bg-left {
|
||||
position: absolute;
|
||||
left: 0; top: 0;
|
||||
width: 1923px; height: 933.002px;
|
||||
background: linear-gradient(to bottom,
|
||||
rgba(57, 50, 30, 0.3) 0%,
|
||||
rgba(255, 255, 255, 0.3) 100%);
|
||||
}
|
||||
.body-bg-right {
|
||||
position: absolute;
|
||||
left: 1921px; top: 0;
|
||||
width: 1924px; height: 933.002px;
|
||||
background: linear-gradient(to bottom,
|
||||
rgba(41, 107, 85, 0.3) 0%,
|
||||
rgba(255, 255, 255, 0.3) 100%);
|
||||
}
|
||||
|
||||
/* ────────────────────────────────────────────────
|
||||
② 헤더 배너 (좌·우)
|
||||
좌측: 둥근 우측 r=71 (post-rotation 외관)
|
||||
원본 grad x1=2437.15(#A5A196 α0.1) → x2=516.146(#39321E α1.0)
|
||||
viewBox 0..1921 안에서 t=0.269 ~ 1.269
|
||||
회전 180° 후 좌→우: rgba(136,131,118,.343) 0% → #39321E 73.1% → #39321E 100%
|
||||
우측: 둥근 좌측 r=71
|
||||
원본 grad x1=1925(#296B55 α0.1) → x2=0(#032118 α1.0)
|
||||
방향 그대로 좌→우: #032118 0% → rgba(41,107,85,.1) 100%
|
||||
──────────────────────────────────────────────── */
|
||||
.header-bg {
|
||||
position: absolute;
|
||||
height: 142px;
|
||||
}
|
||||
.header-bg--left {
|
||||
left: 0; top: 62px; width: 1921px;
|
||||
border-radius: 0 71px 71px 0;
|
||||
background: linear-gradient(to right,
|
||||
rgba(136, 131, 118, 0.343) 0%,
|
||||
#39321E 73.1%,
|
||||
#39321E 100%);
|
||||
}
|
||||
.header-bg--right {
|
||||
left: 1923px; top: 62px; width: 1925px;
|
||||
border-radius: 71px 0 0 71px;
|
||||
background: linear-gradient(to right,
|
||||
#032118 0%,
|
||||
rgba(41, 107, 85, 0.1) 100%);
|
||||
}
|
||||
|
||||
/* ────────────────────────────────────────────────
|
||||
③ 헤더 텍스트 (bg-clip-text — 솔리드 + dark glow)
|
||||
원본 layer1 = 90deg solid → bg-clip 결과는 솔리드.
|
||||
──────────────────────────────────────────────── */
|
||||
.header-text {
|
||||
position: absolute;
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 70px;
|
||||
letter-spacing: 3.5px;
|
||||
text-shadow: 0 0 4px #322C1E;
|
||||
display: flex; flex-direction: column; justify-content: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.header-text--left {
|
||||
/* center=(1342.45, 133.5), w=1076.897, h=143 → top-left=(803.99, 62) */
|
||||
left: 803.99px; top: 62px;
|
||||
width: 1076.897px; height: 143px;
|
||||
text-align: center;
|
||||
color: #3E3523;
|
||||
}
|
||||
.header-text--right {
|
||||
/* left=2135, center_y=133, h=116 → top=75 */
|
||||
left: 2135px; top: 75px;
|
||||
width: 1114.411px; height: 116px;
|
||||
color: #225F4A;
|
||||
}
|
||||
|
||||
/* ────────────────────────────────────────────────
|
||||
④ 섹션 타이틀 (50px Black)
|
||||
──────────────────────────────────────────────── */
|
||||
.section-title {
|
||||
position: absolute;
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 50px;
|
||||
line-height: 95px;
|
||||
}
|
||||
.section-title--left { color: #5C3714; }
|
||||
.section-title--right { color: #084C56; }
|
||||
|
||||
/* ────────────────────────────────────────────────
|
||||
⑤ 본문 불릿 리스트 (40px Bold black, list-disc, leading 70)
|
||||
──────────────────────────────────────────────── */
|
||||
.bullets {
|
||||
position: absolute;
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 40px;
|
||||
color: #000;
|
||||
list-style: disc outside;
|
||||
padding-left: 60px;
|
||||
margin: 0;
|
||||
}
|
||||
.bullets > li { line-height: 70px; }
|
||||
|
||||
.aster-small { font-size: 25.8px; }
|
||||
|
||||
.bullets-aster {
|
||||
position: absolute;
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 40px;
|
||||
color: #000;
|
||||
}
|
||||
.bullets-aster ul {
|
||||
list-style: disc outside;
|
||||
padding-left: 60px;
|
||||
margin: 0;
|
||||
}
|
||||
.bullets-aster ul > li { line-height: 70px; }
|
||||
.bullets-aster .footnote {
|
||||
padding-left: 60px;
|
||||
line-height: 70px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.bullets-aster .footnote .indent {
|
||||
display: inline-block;
|
||||
width: 6ch;
|
||||
}
|
||||
|
||||
/* ────────────────────────────────────────────────
|
||||
⑥ 화살표 (AS-IS → TO-BE) — 비트맵 유지 (일러스트성)
|
||||
──────────────────────────────────────────────── */
|
||||
.arrow-img {
|
||||
position: absolute;
|
||||
left: 763px; top: 400px;
|
||||
width: 252px; height: 90px;
|
||||
}
|
||||
.arrow-img img {
|
||||
width: 100%; height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="slide">
|
||||
<div class="block">
|
||||
<div class="inner">
|
||||
|
||||
<!-- ① 본문 배경 -->
|
||||
<div class="body-bg-left"></div>
|
||||
<div class="body-bg-right"></div>
|
||||
|
||||
<!-- ② 헤더 배너 -->
|
||||
<div class="header-bg header-bg--left"></div>
|
||||
<div class="header-bg header-bg--right"></div>
|
||||
|
||||
<!-- ③ 헤더 텍스트 -->
|
||||
<div class="header-text header-text--left">과정 (Process)의 혁신</div>
|
||||
<div class="header-text header-text--right">결과 (Products)의 혁신</div>
|
||||
|
||||
<!-- ────────── 좌측 컬럼 (Process) ────────── -->
|
||||
|
||||
<div class="section-title section-title--left"
|
||||
style="left:82.0195px; top:237px; width:1250.7188px;">
|
||||
Analogue 개념 기반 업무의 Digital Transformation
|
||||
</div>
|
||||
|
||||
<ul class="bullets"
|
||||
style="left:125.0117px; top:340px; width:539.368px;">
|
||||
<li>개념, 도서, 행정 절차 중심</li>
|
||||
<li>2D 도면, 전문가, 규정</li>
|
||||
<li>업무 구분(단절), 책임</li>
|
||||
</ul>
|
||||
|
||||
<div class="arrow-img"><img src="assets/arrow.png" alt="→"></div>
|
||||
|
||||
<ul class="bullets"
|
||||
style="left:1075.027px; top:340px; width:671.896px;">
|
||||
<li>시각화된 목적물, 소통, 투명성 중심</li>
|
||||
<li>3D 모델, 참여자, 실체</li>
|
||||
<li>협업(융∙복합), 창의성</li>
|
||||
</ul>
|
||||
|
||||
<div class="section-title section-title--left"
|
||||
style="left:82.0195px; top:600px; width:991.3354px;">
|
||||
위치기반의 3D 모델을 사용하는 Process 혁신
|
||||
</div>
|
||||
|
||||
<ul class="bullets"
|
||||
style="left:125.0352px; top:722px; width:1465.7486px;">
|
||||
<li>위치기반(지리적, 지형, 지반상태 포함)의 GIS와 3D 모델(형상, 내용속성) 기반의 건설 정보를 포함하는 BIM의 연계를 통한 Process 혁신</li>
|
||||
</ul>
|
||||
|
||||
<div class="section-title section-title--left"
|
||||
style="left:82.0195px; top:916px; width:991.3354px;">
|
||||
사용자 중심의 Solution(S/W) 제공
|
||||
</div>
|
||||
|
||||
<ul class="bullets"
|
||||
style="left:125px; top:1038px; width:1465.7703px;">
|
||||
<li>인프라 건설산업의 1차적인 Process 혁신은 등고선 중심의 지형도가 아닌<br>속성이 포함된 수치지형도와 본태 측량에서 획득한 3D 지반모델 구축 필수</li>
|
||||
<li>설계와 시공에 관련된 기술을 정리하고 디지털화하여 S/W 로 기술 축적</li>
|
||||
<li>서로 다른 S/W로 작성되어 분절화된 Analogue 방식의 성과물과 정보물을<br>연계가 가능하도록 설계, 시공 Solution 제공</li>
|
||||
</ul>
|
||||
|
||||
<!-- ────────── 우측 컬럼 (Products) ────────── -->
|
||||
|
||||
<div class="section-title section-title--right"
|
||||
style="left:2135px; top:237px; width:1324.0727px;">
|
||||
Copy & Paste로 인한 하향 평준화된 기존 성과품의 품질 향상
|
||||
</div>
|
||||
|
||||
<ul class="bullets"
|
||||
style="left:2178.0352px; top:351px; width:1465.7486px;">
|
||||
<li>과거 수작업으로 시행하면서 발생하던 오류 등의 최소화</li>
|
||||
<li>정확한 Data에 기반한 계획과 개선된 높은 품질의 성과물</li>
|
||||
</ul>
|
||||
|
||||
<div class="section-title section-title--right"
|
||||
style="left:2135px; top:538px; width:1430.154px;">
|
||||
Analogue 기반 도서 외 Digital 기반 정보물 추가
|
||||
</div>
|
||||
|
||||
<div class="bullets-aster"
|
||||
style="left:2178.0117px; top:652px; width:1471.1506px;">
|
||||
<ul>
|
||||
<li>규정에만 의존한 도면, 수량, 계산서, 시방서 등의 성과물<span class="aster-small">＊</span>에 3D 모델, 시뮬레이션 등의 Digital 기반 정보물(Information Data and Products)이 추가</li>
|
||||
</ul>
|
||||
<p class="footnote"><span class="indent"></span><span class="aster-small">＊</span> 정확한 숫자 확인 및 진행과정의 확인 등을 위해 성과물은 지속적으로 존속</p>
|
||||
</div>
|
||||
|
||||
<div class="section-title section-title--right"
|
||||
style="left:2135px; top:916px; width:1324.0727px;">
|
||||
Solution을 이용한 업무효율화<span style="font-size:40px;">(사용자 편의, 협업 및 의사소통 강화 등)</span>
|
||||
</div>
|
||||
|
||||
<ul class="bullets"
|
||||
style="left:2178.0117px; top:1030px; width:1555.868px;">
|
||||
<li>디지털 기반 성과물인 Graphic 중심의 3D 모델, 시뮬레이션을 제대로 활용하기 위해서는 기존의 낮은 수준이 아니라 공학용 사이니지(H/W) 시스템이 필수로 갖춰야야만 함</li>
|
||||
<li>Engn. Solution을 통해 프로젝트에 관한 이슈를 함께 검토하고 논의하고 다양한 건설단계별 정보를 디지털 데이터로 저장하여 건설의 전 과정을 통합관리</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
figma_to_html_agent/blocks/1171281210/preview.png
Normal file
BIN
figma_to_html_agent/blocks/1171281210/preview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 248 KiB |
56
figma_to_html_agent/blocks/1171281210/texts.md
Normal file
56
figma_to_html_agent/blocks/1171281210/texts.md
Normal file
@@ -0,0 +1,56 @@
|
||||
# Frame 1171281210 — 텍스트 (TF-IDF 매칭용)
|
||||
|
||||
> 프레임 안의 모든 텍스트를 빠짐없이 추출.
|
||||
|
||||
## 타이틀 (상단 배너)
|
||||
|
||||
### 좌측 배너
|
||||
과정 (Process)의 혁신
|
||||
|
||||
### 우측 배너
|
||||
결과 (Products)의 혁신
|
||||
|
||||
---
|
||||
|
||||
## 좌측 열 — 과정의 혁신
|
||||
|
||||
### 섹션 1: Analogue 개념 기반 업무의 Digital Transformation
|
||||
|
||||
#### AS-IS (좌)
|
||||
- 개념, 도서, 행정 절차 중심
|
||||
- 2D 도면, 전문가, 규정
|
||||
- 업무 구분(단절), 책임
|
||||
|
||||
#### TO-BE (우)
|
||||
- 시각화된 목적물, 소통, 투명성 중심
|
||||
- 3D 모델, 참여자, 실체
|
||||
- 협업(융·복합), 창의성
|
||||
|
||||
### 섹션 2: 위치기반의 3D 모델을 사용하는 Process 혁신
|
||||
|
||||
- 위치기반(지리적, 지형, 지반상태 포함)의 GIS와 3D 모델(형상, 내용속성) 기반의 건설 정보를 포함하는 BIM의 연계를 통한 Process 혁신
|
||||
|
||||
### 섹션 3: 사용자 중심의 Solution(S/W) 제공
|
||||
|
||||
- 인프라 건설산업의 1차적인 Process 혁신은 등고선 중심의 지형도가 아닌 속성이 포함된 수치지형도와 본태 측량에서 획득한 3D 지반모델 구축 필수
|
||||
- 설계와 시공에 관련된 기술을 정리하고 디지털화하여 S/W 로 기술 축적
|
||||
- 서로 다른 S/W로 작성되어 분절화된 Analogue 방식의 성과물과 정보물을 연계가 가능하도록 설계, 시공 Solution 제공
|
||||
|
||||
---
|
||||
|
||||
## 우측 열 — 결과의 혁신
|
||||
|
||||
### 섹션 1: Copy & Paste로 인한 하향 평준화된 기존 성과품의 품질 향상
|
||||
|
||||
- 과거 수작업으로 시행하면서 발생하던 오류 등의 최소화
|
||||
- 정확한 Data에 기반한 계획과 개선된 높은 품질의 성과물
|
||||
|
||||
### 섹션 2: Analogue 기반 도서 외 Digital 기반 정보물 추가
|
||||
|
||||
- 규정에만 의존한 도면, 수량, 계산서, 시방서 등의 성과물＊에 3D 모델, 시뮬레이션 등의 Digital 기반 정보물(Information Data and Products)이 추가
|
||||
- ＊ 정확한 숫자 확인 및 진행과정의 확인 등을 위해 성과물은 지속적으로 존속
|
||||
|
||||
### 섹션 3: Solution을 이용한 업무효율화 (사용자 편의, 협업 및 의사소통 강화 등)
|
||||
|
||||
- 디지털 기반 성과물인 Graphic 중심의 3D 모델, 시뮬레이션을 제대로 활용하기 위해서는 기존의 낮은 수준이 아니라 공학용 사이니지(H/W) 시스템이 필수로 갖춰야야만 함
|
||||
- Engn. Solution을 통해 프로젝트에 관한 이슈를 함께 검토하고 논의하고 다양한 건설단계별 정보를 디지털 데이터로 저장하여 건설의 전 과정을 통합관리
|
||||
Reference in New Issue
Block a user