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

338 lines
12 KiB
HTML

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1280">
<title>BIM 수행실정 (Frame 1171281193)</title>
<!--
원본: design_agent(원본)/figma_to_html_agent/block-tests/bim-issues-quadrant.html
하이브리드: text-box hybrid
축1: body 내부 ul/li → R13 flex pair + height:auto ✓
축1.5: headline+body → text-group 묶음 (multiline headline → body 밀림) ✓
축2 (미적용): 우측 bullet-row 배치 방식
변경하지 않은 것: card-bg, ribbon, center-quote, zoom
-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<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;
padding: 20px;
}
.slide {
width: 1280px;
background: #ffffff;
position: relative;
box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.block {
width: 1280px;
position: relative;
overflow: hidden;
}
.inner {
width: 2226px;
height: 1766px;
zoom: 0.575022; /* R19 */
position: relative;
}
/* ─── 카드 배경 (원본 그대로) ─── */
.card-bg {
position: absolute;
width: 1080px;
height: 270.183px;
background: linear-gradient(180deg, #f2f2f2 0%, #ffffff 100%);
}
.card-bg.tl { left: 5px; top: 0; border-radius: 50px 50px 0 0; }
.card-bg.tr { left: 1142px; top: 0; border-radius: 50px 50px 0 0; }
.card-bg.bl { left: 5px; top: 1495.69px; border-radius: 0 0 50px 50px; background: linear-gradient(0deg, #f2f2f2 0%, #ffffff 100%); }
.card-bg.br { left: 1146px; top: 1495.69px; border-radius: 0 0 50px 50px; background: linear-gradient(0deg, #f2f2f2 0%, #ffffff 100%); }
/* ─── Header ribbons (원본 그대로) ─── */
.header-ribbon {
position: absolute;
width: 1080px;
height: 119px;
border-radius: 50px;
}
.header-ribbon .text {
position: absolute;
inset: 0;
display: flex; align-items: center; justify-content: center;
font-weight: 900;
font-size: 60px;
color: #ffffff;
text-shadow: 0 0 4px #322c1e;
z-index: 2;
}
.header-ribbon.tl {
left: 5px; top: 0;
background: linear-gradient(270deg, rgba(165,161,150,0.5) -26.87%, #39321E 73.13%);
}
.header-ribbon.bl {
left: 5px; top: 1646.86px;
background: linear-gradient(270deg, rgba(165,161,150,0.5) -26.87%, #39321E 73.13%);
}
.header-ribbon.tr {
left: 1142px; top: 0;
background: linear-gradient(90deg, rgba(41,107,85,0.5) 0%, #032118 100%);
}
.header-ribbon.br {
left: 1146px; top: 1646.99px;
background: linear-gradient(90deg, rgba(41,107,85,0.5) 0%, #032118 100%);
}
/* ─── 가운데 원 (원본 그대로) ─── */
.center-quote {
position: absolute;
left: 809.01px;
top: 581.87px;
width: 644.99px;
height: 584.43px;
}
.center-quote img {
width: 100%; height: 100%;
object-fit: cover;
}
.center-quote .text {
position: absolute;
left: 47.24px; top: 188.26px;
width: 552.41px;
height: 220.93px;
font-weight: 700;
font-size: 55px;
color: #ffffff;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
line-height: normal;
}
/* ─── Text group (headline + body 묶음) ─── */
.text-group {
position: absolute;
}
/* ─── 빨간 헤드라인 (nowrap 제거 → 폭 안에서 자연 줄바꿈) ─── */
.red-h {
font-weight: 700;
font-size: 55px;
line-height: 65px;
color: #ff0000;
word-break: keep-all;
}
/* ─── 본문 body ─── */
.body-text {
font-weight: 400;
font-size: 42px;
line-height: 60px;
color: #000000;
word-break: keep-all;
}
/* ── R13 flex pair ── */
.bullet-list {
display: flex;
flex-direction: column;
}
.bullet-row {
display: flex;
align-items: flex-start;
}
.bullet-row .marker {
flex: none;
width: 1.5em;
text-align: center;
}
.bullet-row .bt {
flex: 1;
}
/* ─── Left-side text groups ─── */
/* 각 margin-bottom = 원본 (body_top - headline_top - 65px line-height) */
.tg-tl-1 { left: 8px; top: 151.22px; }
.tg-tl-1 .red-h { margin-left: 4px; width: 771px; margin-bottom: 6px; }
.tg-tl-1 .body-text { width: 993px; }
.tg-tl-2 { left: 8px; top: 565.27px; }
.tg-tl-2 .red-h { margin-left: 4px; width: 885px; margin-bottom: 15px; }
.tg-tl-2 .body-text { width: 870px; }
.tg-bl-1 { left: 8px; top: 957.17px; }
.tg-bl-1 .red-h { margin-left: 4px; width: 657px; margin-bottom: 13px; }
.tg-bl-1 .body-text { width: 972px; }
.tg-bl-2 { left: 0; top: 1298.36px; }
.tg-bl-2 .red-h { margin-left: 12px; width: 771px; margin-bottom: 4px; }
.tg-bl-2 .body-text { width: 1082px; }
/* ─── Right-side text groups ─── */
.tg-right {
width: 1100px;
}
.tg-right .red-h {
text-align: right;
}
.tg-right .body-text {
margin-left: auto;
margin-right: 20px; /* body right:21 - group right:1 = 20px */
text-align: right;
}
.tg-right .bullet-row .bt {
text-align: right;
}
.tg-right .bullet-row .marker {
width: auto;
margin-right: 8px;
}
.tg-tr-1 { right: 1px; top: 151.22px; }
.tg-tr-1 .red-h { margin-bottom: 6px; }
.tg-tr-1 .body-text { width: 1058px; }
.tg-tr-2 { right: 1px; top: 564.35px; }
.tg-tr-2 .red-h { margin-bottom: 6px; }
.tg-br-1 { right: 1px; top: 957.17px; }
.tg-br-1 .red-h { margin-bottom: 6px; }
.tg-br-2 { right: 1px; top: 1312.18px; }
.tg-br-2 .red-h { margin-bottom: 2px; }
.tg-br-2 .body-text { width: 1074px; }
</style>
</head>
<body>
<div class="slide">
<div class="block">
<div class="inner">
<!-- 카드 배경 4개 -->
<div class="card-bg tl"></div>
<div class="card-bg tr"></div>
<div class="card-bg bl"></div>
<div class="card-bg br"></div>
<!-- 헤더 ribbons -->
<div class="header-ribbon tl"><div class="text">정책 집행</div></div>
<div class="header-ribbon tr"><div class="text">수행 개념</div></div>
<div class="header-ribbon bl"><div class="text">근본 취지의 이해부족</div></div>
<div class="header-ribbon br"><div class="text">지속적 투자 의지 부재</div></div>
<!-- 가운데 원 -->
<div class="center-quote">
<img src="assets/922ee6f4bea1434652ffc08f962086052286b6c5.png" alt="">
<div class="text">Rome wasn't<br>Built in a day!</div>
</div>
<!-- ═══ 좌상 (정책 집행) ═══ -->
<div class="text-group tg-tl-1">
<p class="red-h">인정주의 정책 집행</p>
<div class="body-text">
<div class="bullet-list">
<div class="bullet-row"><span class="marker"></span><span class="bt">수행능력이 없는 업체 선정 후 품질을 낮추어 시행하고 낮은 수준의 성과품을 실적으로 수용</span></div>
<div class="bullet-row"><span class="marker"></span><span class="bt">모든 설계사가 할 수 있다는 전제하에 정책 시행</span></div>
<div class="bullet-row"><span class="marker"></span><span class="bt">발주처의 책임회피를 위한 제도 운영</span></div>
</div>
</div>
</div>
<div class="text-group tg-tl-2">
<p class="red-h">적용효과도 사례도 없는 방침부터 남발</p>
<div class="body-text">
<div class="bullet-list">
<div class="bullet-row"><span class="marker"></span><span class="bt">효과 검증도 없는 지침부터 만들고보는 현실</span></div>
<div class="bullet-row"><span class="marker"></span><span class="bt">BIM/DX 적용효과를 판단할 사례 부재</span></div>
<div class="bullet-row"><span class="marker"></span><span class="bt">대부분 홍보목적으로 포장되어 투자 대비 효과 없음</span></div>
</div>
</div>
</div>
<!-- ═══ 우상 (수행 개념) ═══ -->
<div class="text-group tg-right tg-tr-1">
<p class="red-h">공학적 개념 정립 부재</p>
<div class="body-text" style="width:1058px;">
<div class="bullet-list">
<div class="bullet-row"><span class="marker"></span><span class="bt">DX 개념과 BIM 기술의 차이점의 이해부족으로 전략적 접근방식과 기술적 도구 사이의 혼란만 가중</span></div>
<div class="bullet-row"><span class="marker"></span><span class="bt">인프라시설의 DX의 기본은 단순 모델이 아닌 위치기반 3D 모델(BIM)을 활용한 과정(Process)의 혁신</span></div>
<div class="bullet-row"><span class="marker"></span><span class="bt">기술적 도구인 3D 모델 제작S/W에 과도하게 의존</span></div>
</div>
</div>
</div>
<div class="text-group tg-right tg-tr-2">
<p class="red-h">'본업 기술력 확보' 우선의 개념 부재</p>
<div class="body-text" style="width:915px;">
<div class="bullet-list">
<div class="bullet-row"><span class="marker"></span><span class="bt">깊은 기반지식 바탕의 기술이 축적된 메뉴얼에 대한 중요성 및 필요성에 대한 이해 부족</span></div>
</div>
</div>
<div class="body-text" style="width:751px; margin-top:20px;">
<div class="bullet-list">
<div class="bullet-row"><span class="marker"></span><span class="bt">자체 기술개발 없이 국내 발주처의 지침과 방침에만 의존한 낮은 기술력</span></div>
</div>
</div>
</div>
<!-- ═══ 좌하 (근본 취지의 이해부족) ═══ -->
<div class="text-group tg-bl-1">
<p class="red-h">기술투자 없는 성과 창출 기대</p>
<div class="body-text">
<div class="bullet-list">
<div class="bullet-row"><span class="marker"></span><span class="bt">이전의 CAD 도입·확장 시기처럼 상용화된 BIM S/W만 구입·구독하면 될거라는 안일한 생각</span></div>
<div class="bullet-row"><span class="marker"></span><span class="bt">기술개발 노력없이 과거처럼 하면 된다는 착각</span></div>
</div>
</div>
</div>
<div class="text-group tg-bl-2">
<p class="red-h">엔지니어링 S/W에 대한 개념 부재</p>
<div class="body-text">
<div class="bullet-list">
<div class="bullet-row"><span class="marker"></span><span class="bt">다양한 엔지니어링 S/W의 특성에 대한 깊은 이해없이 단기 비용절감에 치우쳐 범용 S/W 선택</span></div>
<div class="bullet-row"><span class="marker"></span><span class="bt">대형 Global S/W 회사에 과도한 의존과 이에 예속되는 방침 남발로 전용S/W 소멸</span></div>
</div>
</div>
</div>
<!-- ═══ 우하 (지속적 투자 의지 부재) ═══ -->
<div class="text-group tg-right tg-br-1">
<p class="red-h">근본적인 역할은 회피</p>
<div class="body-text" style="width:880px;">
<div class="bullet-list">
<div class="bullet-row"><span class="marker"></span><span class="bt">엔지니어의 근본적인 역할인 과정의 혁신과 결과물의 변화에 대한 고민 부재</span></div>
</div>
</div>
<div class="body-text" style="width:1025px; margin-top:6px;">
<div class="bullet-list">
<div class="bullet-row"><span class="marker"></span><span class="bt">기술자가 직접 3D 모델을 만들고 수정하며 설계를 수행해야하는데 정작 모델제작은 외주처리</span></div>
</div>
</div>
</div>
<div class="text-group tg-right tg-br-2">
<p class="red-h">과거의 타성에 머무르고 있는 업계</p>
<div class="body-text" style="width:1074px;">
<div class="bullet-list">
<div class="bullet-row"><span class="marker"></span><span class="bt">설계/감리/시공 임직원들의 디지털무지와 전략적 무지</span></div>
<div class="bullet-row"><span class="marker"></span><span class="bt">S/W 판매업체의 기능적 사용법을 BIM 교육으로 착각</span></div>
<div class="bullet-row"><span class="marker"></span><span class="bt">교육을 통한 인재양성보다는 당장 실무활용이 가능한 타사의 인력을 빼오기에 집중</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>