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:
2026-05-08 09:41:05 +09:00
parent cc2f434000
commit 9fbe3ac90c
401 changed files with 14304 additions and 2 deletions

View File

@@ -0,0 +1,10 @@
# Frame 1171281204 — 상태: 셀 콘텐츠 모델 재작성 완료
## 수정 내용
- `<ul><li>` → R13 flex pair (`.b1` level 1, `.b2` level 2)
- • (bullet) = level 1, - (dash) = level 2 (한 단계 더 들여쓰기)
- 셀 height 고정 제거 → auto (콘텐츠 기반)
- `.cell-group`으로 항목 그룹 간 gap (20px)
- `<br>` 태그 전부 제거
- R19 zoom 적용 (이전 작업)

Binary file not shown.

After

Width:  |  Height:  |  Size: 282 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 273 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 271 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 280 KiB

View File

@@ -0,0 +1,58 @@
# Frame 1171281204 — Engn. S/W의 구성과 특징
## 내용 설명
Engineering S/W를 상용·3rdParty·전용 3가지 유형으로 구분해 3열 표로
비교하는 디자인. 개념·특징·개발주체·성과품 같은 관점을 행별로
대조. 3개 S/W 유형의 구성과 특징 분류 정리에 적합.
2개 비교·4개 이상 유형·시간 순서·단일 유형 설명에는 부적합.
## 후보 키워드
상용, 전용, Engineering, Engn, S/W, 개념, 개발주체, 성과품
## 정제 Anchor Sets
- **sw_three_types**: 상용, 전용
- **engn_sw**: Engineering, Engn, S/W
- **comparison_dims**: 개념, 개발주체, 성과품
## 구조 매칭 정보
- **family**: table
- **layout**: table-3col
- **axis**: vertical
- **relation_type**: compare
- **cardinality**: ideal 3 / min 3 / max 3
- **slots** (5개, required 5개): title, col_a_label, col_b_label, col_c_label, rows
- **source title**: Engn. S/W의 구성과 특징
- **original layout**: table-3col
## 적합/부적합 기준
### suits
- 3개 S/W 유형 비교
- 상용/3rdParty/전용 분류
- Engineering S/W 구성과 특징
### not_suits
- 2개만 비교
- 4개 이상 유형
- 시간 순서
- 단일 유형 설명
## 재구성 허용
- **split**: False
- **merge**: True
- **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

View File

@@ -0,0 +1,17 @@
# Frame 1171281204 — Engn. S/W의 구성과 특징
## 구조
- **layout**: table-3col
- **detail**: 타이틀("Engn. S/W의 구성 과 특징") + 3열 표 (상용/3rdParty/전용별 개념·특징·개발주체·성과품)
## 내용
Engineering S/W의 구성과 특징 — 상용·3rd Party·전용 S/W 3가지 유형을 개념·특징·개발주체·성과품 관점으로 비교.
## 후보 키워드
Engn.S/W, EngineeringSW, 구성, 특징, 상용, 3rdParty, 전문, 전용, 개념, 개발주체, 성과품, 3열비교, 표
## 메타
- source: texts.md + flat.md
- schema_version: analysis-v1
- tagged_by: claude-opus-4-7
- tagged_at: 2026-04-21

Binary file not shown.

After

Width:  |  Height:  |  Size: 109 KiB

View File

@@ -0,0 +1,78 @@
# Frame 1171281204 — 실측 기록 (flat)
> 원본: 1869 × 1926 px (node 145:8223)
> 패턴: compare-table-3col (3열 S/W 비교 표)
> Scale: 1280 / 1869 = 0.68511
## 구조
```
Frame 145:8223 (1869 × 1926)
├── 타이틀
│ ├── 145:8229 아이콘 IMG (0, 22.5) 50×50
│ └── 145:8230 TEXT "Engn. S/W의 구성 과 특징" (65, 0) — mixed gradient
├── 열 헤더 (y=128~208, 높이 ~80)
│ ├── 145:8231 bar (70, 207.74) 734×80 — bg:#589e8d
│ ├── 145:8232 bar (804.31, 207.74) 533×80 — bg:rgba(62,53,35,0.9)
│ ├── 145:8233 bar (1337, 208.72) 532×80 — bg:#ef7a26
│ ├── 145:8234 TEXT "구 분" center(171.67, 168.05) — 40px Bold white
│ ├── 145:8235 TEXT "상용 S/W" center(539.02, 168.05)
│ ├── 145:8236 TEXT "3rd Party (기생 S/W)" center(1070.75, 168.05)
│ └── 145:8237 TEXT "전문ㆍ전용 S/W" center(1602.3, 168.05)
├── 행 배경 4개 (교대 white/rgba(253,198,158,0.16))
│ ├── 145:8225 (69, 209~721) white
│ ├── 145:8228 (70, 721~1092) rgba(253,198,158,0.16)
│ ├── 145:8226 (70, 1092~1358) white → 실제 (1088~1358)
│ └── 145:8227 (70, 1358~1914) rgba(253,198,158,0.16)
├── 그리드 라인 (모두 CSS, SVG 불필요)
│ ├── 수평선: y=720.64, 1089.81, 1357.58, 1913.80
│ └── 수직선: x=273.36, 804.91, 1336.46 (전체 높이) + x=804.98 (부분)
├── 행 라벨 (좌측 열)
│ ├── 145:8253 "개 념" center(171.68, 265.82) — 35px Bold
│ ├── 145:8257 "개발주체" center(171.19, 778.39)
│ ├── 145:8261 "성 과 품" center(171.07, 1162.32)
│ └── 145:8265 "S/W의 사용" center(171.07, 1422.86)
└── 셀 콘텐츠 (12개: 4행 × 3열)
├── 145:8250 개념/상용 (273.59, 230.38) 532×392 — 35px Medium, bullet list
├── 145:8251 개념/3rd (804.31, 233.34) 532×392
├── 145:8252 개념/전용 (1336.02, 230.38) 532×470
├── 145:8254 개발주체/상용 (273.59, 750.06) 532×318
├── 145:8255 개발주체/3rd (805.30, 743.72) 531×320
├── 145:8256 개발주체/전용 (1336.01, 743.72) 532×320
├── 145:8258 성과품/상용 (273.59, 1126.24) 532×231
├── 145:8259 성과품/3rd (805.30, 1121.31) 531×232
├── 145:8260 성과품/전용 (1336.02, 1121.31) 532×232
├── 145:8262 사용/상용 (273.59, 1387.69) 532×538
├── 145:8263 사용/3rd (805.30, 1387.69) 531×538
└── 145:8264 사용/전용 (1336.02, 1387.69) 532×538
```
## 에셋
| hash | 의미 | CSS |
|------|------|-----|
| b0e9fad5...png | 아이콘 | 이미지 |
| 8개 line SVG | 테두리선 | ✓ 전부 CSS border |
## 색상
| 요소 | 값 |
|------|------|
| 헤더1 (구분+상용) | #589e8d |
| 헤더2 (3rd Party) | rgba(62,53,35,0.9) |
| 헤더3 (전용) | #ef7a26 |
| 행 배경 교대 | white / rgba(253,198,158,0.16) |
| 강조 텍스트 | #a14101 Bold |
| 본문 | black, 35px Medium |
## 변형 가능 축
- columns[N=2~4] (required)
- rows[N=3~6] (required)
- header_colors[N] (required)
- highlight_color (optional, default #a14101)

View File

@@ -0,0 +1,241 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1280">
<title>Engn. S/W 구성과 특징 (Frame 1171281204)</title>
<!--
Frame: 145:8223, 1869×1926 px
Scale: 1280 / 1869 = 0.68511
패턴: compare-table-3col
구조: CSS grid 기반 표 (R17 콘텐츠 주도형)
- 텍스트 늘면 → 셀 늘고 → 행 늘고 → border(라인) 자동 따라감
- 셀 내부: R13 flex pair (• level 1, - level 2)
- R19 zoom
-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;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;
background: #fff; position: relative;
box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.block { width: 1280px; position: relative; overflow: hidden; }
.inner {
width: 1869px;
zoom: 0.68511; /* R19 */
}
/* ── 타이틀 ── */
.title-area {
padding: 0 0 10px 0;
display: flex; align-items: center; gap: 0;
}
.title-area img { width: 50px; height: 50px; object-fit: cover; margin-top: 22px; }
.title-text {
margin-left: 15px;
font-size: 0; line-height: 0;
text-shadow: 0 0 4px #322c1e;
}
/* ── CSS Grid 표 ── */
.tbl {
display: grid;
grid-template-columns: 203px 1fr 1fr 1fr;
margin: 0 70px;
border-collapse: collapse;
}
/* 열 헤더 */
.tbl-header {
display: contents;
}
.tbl-header .th {
padding: 15px 10px;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 40px; line-height: 45px;
color: #fff; text-align: center;
letter-spacing: -2px;
}
.tbl-header .th:nth-child(1) { background: #589e8d; }
.tbl-header .th:nth-child(2) { background: #589e8d; }
.tbl-header .th:nth-child(3) { background: rgba(62,53,35,0.9); }
.tbl-header .th:nth-child(4) { background: #ef7a26; }
/* 표 행 */
.tbl-row {
display: contents;
}
.tbl-row .td {
padding: 15px 12px;
border-bottom: 1.5px solid #888;
border-right: 1.5px solid #888;
font-weight: 500; font-size: 35px; line-height: 65px;
color: #000;
}
.tbl-row .td:last-child { border-right: none; }
/* 행 라벨 (첫 열) */
.tbl-row .td-label {
font-weight: 700; font-size: 35px; line-height: 95px;
text-align: center;
display: flex; align-items: center; justify-content: center;
border-right: 1.5px solid #888;
border-bottom: 1.5px solid #888;
}
/* 교대 행 배경 */
.tbl-row:nth-child(odd) .td,
.tbl-row:nth-child(odd) .td-label { background: #fff; }
.tbl-row:nth-child(even) .td,
.tbl-row:nth-child(even) .td-label { background: rgba(253,198,158,0.16); }
/* 강조 */
.hl { font-weight: 700; color: #a14101; }
/* R13 flex pair: level 1 (•) */
.cell-group { margin-bottom: 15px; }
.cell-group:last-child { margin-bottom: 0; }
.b1 { display: flex; align-items: flex-start; }
.b1 .m { flex: none; width: 30px; text-align: center; }
.b1 .t { flex: 1; }
/* Level 2 (-) */
.b2 { display: flex; align-items: flex-start; padding-left: 30px; }
.b2 .m { flex: none; width: 20px; text-align: center; }
.b2 .t { flex: 1; }
</style>
</head>
<body>
<div class="slide">
<div class="block">
<div class="inner">
<!-- 타이틀 -->
<div class="title-area">
<img src="assets/b0e9fad5b03f4d9e368524976c20c9886392e17b.png" alt="">
<div class="title-text">
<span style="font-weight:700; font-size:50px; line-height:normal; background:linear-gradient(#296b55,#123328); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;"> Engn. S/W의</span>
<span style="font-weight:900; font-size:70px; line-height:normal; background:linear-gradient(#CC5200,#883700); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;"> 구성 </span>
<span style="font-weight:900; font-size:50px; line-height:normal; background:linear-gradient(#296b55,#000); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;"></span>
<span style="font-weight:900; font-size:70px; line-height:normal; background:linear-gradient(#CC5200,#883700); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;"> 특징</span>
</div>
</div>
<!-- CSS Grid 표 -->
<div class="tbl">
<!-- 열 헤더 -->
<div class="tbl-header">
<div class="th">&nbsp;&nbsp;&nbsp;&nbsp;</div>
<div class="th">상용 S/W</div>
<div class="th">3rd Party (기생 S/W)</div>
<div class="th">전문ㆍ전용 S/W</div>
</div>
<!-- 행1: 개념 -->
<div class="tbl-row">
<div class="td-label">&nbsp;&nbsp;&nbsp;&nbsp;</div>
<div class="td">
<div class="cell-group">
<div class="b1"><span class="m"></span><span class="t">세계시장을 Target으로 S/W 전문회사가 <span class="hl">판매를 목적</span>으로 <span class="hl">개발</span>한 제품</span></div>
</div>
<div class="cell-group">
<div class="b1"><span class="m"></span><span class="t">차량으로 말하면 성능 좋은 덤프트럭, 버스 등을 생산하는 업체 (사용자가 목적에 맞게 기능 추가 및 이용토록 유도)</span></div>
</div>
</div>
<div class="td">
<div class="cell-group">
<div class="b1"><span class="m"></span><span class="t">범용 S/W내에서 엔진과 기능을 이용하여 <span class="hl">특정 목적</span><span class="hl">결과물</span><span class="hl">쉽게 도출</span>되도록 개발</span></div>
</div>
<div class="cell-group">
<div class="b1"><span class="m"></span><span class="t">만일 곡물 운반이 목적이라면, 곡물 저장용 탱크를 제작하고 차량에 탱크를 설치하는 업체</span></div>
</div>
</div>
<div class="td">
<div class="cell-group">
<div class="b1"><span class="m"></span><span class="t">엔진과 기능을 협업 또는 자체 개발 하여 <span class="hl">특정 목적</span><span class="hl">결과물</span> 생산을 위해 <span class="hl">자신만의 방법으로 개발</span></span></div>
</div>
<div class="cell-group">
<div class="b1"><span class="m"></span><span class="t">곡물 운반용 차량 자체를 만드는 업체 (곡물의 종류별로 다양한 차량 제작 가능)</span></div>
</div>
</div>
</div>
<!-- 행2: 개발주체 -->
<div class="tbl-row">
<div class="td-label">개발주체</div>
<div class="td">
<div class="b1"><span class="m"></span><span class="t"><span class="hl">대형 S/W 전문회사</span></span></div>
<div class="b2"><span class="m">-</span><span class="t">국외 : AutoDesk, Bentley, ESRI 등</span></div>
<div class="b2"><span class="m">-</span><span class="t">국내 : 마이다스아이티</span></div>
</div>
<div class="td">
<div class="b1"><span class="m"></span><span class="t"><span class="hl">업무효율 증진</span>을 목적으로 하는 개인 / 회사</span></div>
<div class="b2"><span class="m">-</span><span class="t">회사 : 나모소프트, 호건코리아, KG, 서영엔지니어링</span></div>
<div class="b2"><span class="m">-</span><span class="t">개인 : DUFA, 다정다감</span></div>
</div>
<div class="td">
<div class="b1"><span class="m"></span><span class="t"><span class="hl">대규모 S/W 개발 투자</span> 의지가 있는 <span class="hl">엔지니어링 회사</span></span></div>
<div class="b2"><span class="m">-</span><span class="t">한맥가족 기술개발센터</span></div>
</div>
</div>
<!-- 행3: 성과품 -->
<div class="tbl-row">
<div class="td-label">성 과 품</div>
<div class="td">
<div class="b1"><span class="m"></span><span class="t">Model 제작 도구이므로 모델 제작과 성과품 작성은 <span class="hl">사용자가 알아서 수행</span>하여야 함</span></div>
</div>
<div class="td">
<div class="b1"><span class="m"></span><span class="t">특정 목적물의 Model 제작이 주목적, 성과품 작성은 <span class="hl">별도의 Process가 필요</span></span></div>
</div>
<div class="td">
<div class="b1"><span class="m"></span><span class="t">3D BIM Model 제작에서 성과품 제작 까지 <span class="hl">연속</span>으로 만들어 내는 <span class="hl">System</span></span></div>
</div>
</div>
<!-- 행4: S/W의 사용 -->
<div class="tbl-row">
<div class="td-label">S/W의 사용</div>
<div class="td" style="line-height:60px;">
<div class="cell-group">
<div class="b1"><span class="m"></span><span class="t"><span class="hl">세계시장 전체</span>를 보고 Business를 수행, BIM 생태계 자체를 <span class="hl">독점</span>하려는 의도가 큼</span></div>
</div>
<div class="cell-group">
<div class="b1"><span class="m"></span><span class="t">동일한 방식으로 후발주자가 경쟁하는 것은 무리, 지속적으로 <span class="hl">S/W사용료 (유지관리비)는 증가</span>될 것임</span></div>
</div>
</div>
<div class="td" style="line-height:60px;">
<div class="cell-group">
<div class="b1"><span class="m"></span><span class="t">초기 단계의 개발이 쉬우므로, 현업의 업무효율 증진을 목적으로 대부분 출발</span></div>
</div>
<div class="cell-group">
<div class="b1"><span class="m"></span><span class="t">독과점 유지와 생태계 형성을 유도하기 위해서 <span class="hl">범용S/W 판매사에서 적극 지원</span></span></div>
</div>
</div>
<div class="td" style="line-height:60px;">
<div class="cell-group">
<div class="b1"><span class="m"></span><span class="t">판매 목적보다 <span class="hl">생산성/기술축적/효율성에 집중</span>, 초기투자 기간과 비용이 너무 크고 엔지니어링 능력, S/W 개발 능력이 모두 있어야 함</span></div>
</div>
<div class="cell-group">
<div class="b1"><span class="m"></span><span class="t">목적 달성시 파괴력이 매우 크며, <span class="hl">Paradigm 전환 선두 역할</span></span></div>
</div>
</div>
</div>
</div><!-- .tbl -->
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,36 @@
# Frame 1171281204 — 텍스트 (TF-IDF 매칭용)
## 타이틀
Engn. S/W의 구성 과 특징
## 열 헤더
구분
상용 S/W
3rd Party (기생 S/W)
전문ㆍ전용 S/W
## 행 라벨
개념
개발주체
성과품
S/W의 사용
## 개념
세계시장을 Target으로 S/W 전문회사가 판매를 목적으로 개발한 제품 차량으로 말하면 성능 좋은 덤프트럭, 버스 등을 생산하는 업체 (사용자가 목적에 맞게 기능 추가 및 이용토록 유도)
범용 S/W내에서 엔진과 기능을 이용하여 특정 목적의 결과물을 쉽게 도출되도록 개발 만일 곡물 운반이 목적이라면, 곡물 저장용 탱크를 제작하고 차량에 탱크를 설치하는 업체
엔진과 기능을 협업 또는 자체 개발 하여 특정 목적의 결과물 생산을 위해 자신만의 방법으로 개발 곡물 운반용 차량 자체를 만드는 업체 (곡물의 종류별로 다양한 차량 제작 가능)
## 개발주체
대형 S/W 전문회사 - 국외 : AutoDesk, Bentley, ESRI 등 - 국내 : 마이다스아이티
업무효율 증진을 목적으로 하는 개인 / 회사 - 회사 : 나모소프트, 호건코리아, KG, 서영엔지니어링 - 개인 : DUFA, 다정다감
대규모 S/W 개발 투자 의지가 있는 엔지니어링 회사 - 한맥가족 기술개발센터
## 성과품
Model 제작 도구이므로 모델 제작과 성과품 작성은 사용자가 알아서 수행하여야 함
특정 목적물의 Model 제작이 주목적, 성과품 작성은 별도의 Process가 필요함
3D BIM Model 제작에서 성과품 제작 까지 연속으로 만들어 내는 System
## S/W의 사용
세계시장 전체를 보고 Business를 수행, BIM 생태계 자체를 독점하려는 의도가 큼 동일한 방식으로 후발주자가 경쟁하는 것은 무리, 지속적으로 S/W사용료 (유지관리비)는 증가될 것임
초기 단계의 개발이 쉬우므로, 현업의 업무효율 증진을 목적으로 대부분 출발 독과점 유지와 생태계 형성을 유도하기 위해서 범용S/W 판매사에서 적극 지원
판매 목적보다 생산성/기술축적/효율성에 집중, 초기투자 기간과 비용이 너무 크고 엔지니어링 능력, S/W 개발 능력이 모두 있어야 함 목적 달성시 파괴력이 매우 크며, Paradigm 전환 선두 역할