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:
241
figma_to_html_agent/blocks/1171281204/index.html
Normal file
241
figma_to_html_agent/blocks/1171281204/index.html
Normal 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">구 분</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">개 념</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>
|
||||
Reference in New Issue
Block a user