kyeongmin
9fbe3ac90c
전체 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>
242 lines
9.2 KiB
HTML
242 lines
9.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=1280">
|
||
<title>BIM vs DX 비교 (Frame 1171281195)</title>
|
||
<!--
|
||
Frame: 106:252, 1868×1908 px
|
||
Scale: 1280 / 1868 = 0.68524
|
||
패턴: compare-vs-rows
|
||
구조: R17 (행 flex column + 각 행 flex row) + R19 (zoom)
|
||
불릿: list-style disc inside
|
||
-->
|
||
<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; 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: 1868px;
|
||
zoom: 0.68524; /* R19 */
|
||
}
|
||
|
||
/* 타이틀 */
|
||
.title-row { display: flex; align-items: center; gap: 15px; height: 85px; }
|
||
.title-icon { width: 50px; height: 61px; display: flex; align-items: center; justify-content: center; flex: none; }
|
||
.title-icon img { width: 50px; height: 50px; object-fit: cover; }
|
||
.title-text {
|
||
font-weight: 700; font-size: 70px; line-height: normal; white-space: nowrap;
|
||
background: linear-gradient(rgb(204,82,0), rgb(136,55,0));
|
||
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
|
||
text-shadow: 0 0 4px #322c1e;
|
||
}
|
||
|
||
/* 서브헤더 바 */
|
||
.subheader {
|
||
margin: 18px 65px 15px;
|
||
height: 75px; border-radius: 50px;
|
||
background: linear-gradient(270deg, rgb(40,91,74) 0%, rgba(40,91,74,0.8) 30%, rgba(74,64,38,0.8) 70%, rgb(74,64,38) 100%);
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.subheader span {
|
||
font-weight: 700; font-size: 55px; color: #fff; line-height: normal;
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
/* 비교 행 컨테이너 (flex column, R17) */
|
||
.compare-rows {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 0 22px;
|
||
gap: 8px; /* 행 간 여백 */
|
||
}
|
||
|
||
/* 각 비교 행 (flex row: left | badge | right) */
|
||
.compare-row {
|
||
display: flex;
|
||
align-items: stretch; /* badge와 좌우 텍스트가 같은 높이 */
|
||
}
|
||
.compare-row .col-left {
|
||
flex: 1;
|
||
font-weight: 700; font-size: 40px; color: #5c3714;
|
||
text-align: right; line-height: 1.3;
|
||
padding: 12px 15px 12px 25px;
|
||
display: flex; flex-direction: column; justify-content: center;
|
||
}
|
||
.compare-row .col-badge {
|
||
flex: none; width: 242px;
|
||
border-radius: 10px; padding: 12px 20px;
|
||
background: linear-gradient(270deg, rgba(40,91,74,0.8) 0%, rgba(40,91,74,0.64) 30%, rgba(74,64,38,0.64) 70%, rgba(74,64,38,0.8) 100%);
|
||
display: flex; align-items: center; justify-content: center;
|
||
align-self: stretch; /* 행 높이에 맞춤 */
|
||
}
|
||
.compare-row .col-badge span {
|
||
font-weight: 700; font-size: 40px; color: #fff;
|
||
text-align: center; line-height: normal; white-space: nowrap;
|
||
}
|
||
.compare-row .col-right {
|
||
flex: 1;
|
||
font-weight: 700; font-size: 40px; color: #285b4a;
|
||
line-height: 1.3;
|
||
padding: 12px 25px 12px 15px;
|
||
display: flex; flex-direction: column; justify-content: center;
|
||
}
|
||
.compare-row .col-left ul,
|
||
.compare-row .col-right ul { list-style: disc inside; padding: 0; margin: 0; }
|
||
|
||
/* 결론 영역 — arrow + box + text 한 컴포넌트 */
|
||
.conclusion {
|
||
margin: 40px 22px 20px;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 15px;
|
||
}
|
||
.conclusion .arrow {
|
||
flex: none;
|
||
width: 192px; height: 169px;
|
||
}
|
||
.conclusion .arrow img { width: 100%; height: 100%; transform: rotate(180deg); }
|
||
.conclusion .content {
|
||
flex: 1;
|
||
position: relative;
|
||
min-height: 170px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.conclusion .bg {
|
||
position: absolute; inset: 0;
|
||
background: #FAEDCB;
|
||
mix-blend-mode: multiply;
|
||
}
|
||
.conclusion .text {
|
||
position: relative; z-index: 1;
|
||
line-height: 90px;
|
||
text-align: center;
|
||
padding: 15px 30px;
|
||
}
|
||
.conclusion .text .normal { font-weight: 700; font-size: 50px; color: #000; }
|
||
.conclusion .text .accent { font-weight: 700; font-size: 55px; color: #ae3607; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="slide">
|
||
<div class="block">
|
||
<div class="inner">
|
||
|
||
<!-- 타이틀 -->
|
||
<div class="title-row">
|
||
<div class="title-icon"><img src="assets/b0e9fad5b03f4d9e368524976c20c9886392e17b.png" alt=""></div>
|
||
<div class="title-text">BIM과 DX의 이해</div>
|
||
</div>
|
||
|
||
<!-- 서브헤더 -->
|
||
<div class="subheader">
|
||
<span> BIM vs. DX</span>
|
||
</div>
|
||
|
||
<!-- 비교 행 (flex column, R17) -->
|
||
<div class="compare-rows">
|
||
|
||
<div class="compare-row">
|
||
<div class="col-left"><ul><li>Only 3D</li></ul></div>
|
||
<div class="col-badge"><span>BIM/DX</span></div>
|
||
<div class="col-right"><ul><li>BIM << DX <span style="font-size:35px;">(ENG. + Management 포함)</span></li></ul></div>
|
||
</div>
|
||
|
||
<div class="compare-row">
|
||
<div class="col-left"><ul><li><span style="font-size:40px;">모델 제작용 상용 S/W</span><br><span style="font-size:35px;">[Civil 3D, Revit, Navisworks, Autocad]</span></li></ul></div>
|
||
<div class="col-badge"><span>S/W</span></div>
|
||
<div class="col-right"><ul><li><span style="font-size:40px;">제작 및 운영 (상용 + 전용 40~80개)</span><br><span style="font-size:35px;">[Rhino, Sketchup, Blender ..] + [EG-BIM 등]</span></li></ul></div>
|
||
</div>
|
||
|
||
<div class="compare-row">
|
||
<div class="col-left"><ul><li>기존 2D 설계방식 유지</li></ul></div>
|
||
<div class="col-badge"><span>프로세스</span></div>
|
||
<div class="col-right"><ul><li>근본적 문제의식을 통한 개선</li></ul></div>
|
||
</div>
|
||
|
||
<div class="compare-row">
|
||
<div class="col-left"><ul><li>3D 모델 중심</li><li>기존 성과품 유지</li></ul></div>
|
||
<div class="col-badge"><span>성과물</span></div>
|
||
<div class="col-right"><ul><li>공학 정보 및 콘텐츠 연계에 집중</li><li>도면, 수량, 시공계획 등 일식</li></ul></div>
|
||
</div>
|
||
|
||
<div class="compare-row">
|
||
<div class="col-left"><ul><li>3D 모델에 의한 일반적 이해 향상</li></ul></div>
|
||
<div class="col-badge"><span>활 용</span></div>
|
||
<div class="col-right"><ul><li>설계/시공의 혁신(개념의 재정립)</li></ul></div>
|
||
</div>
|
||
|
||
<div class="compare-row">
|
||
<div class="col-left"><ul><li>(설계/시공/운영) 분야별 단절</li></ul></div>
|
||
<div class="col-badge"><span>확장성</span></div>
|
||
<div class="col-right"><ul><li>전 생애주기 활용 시스템</li></ul></div>
|
||
</div>
|
||
|
||
<div class="compare-row">
|
||
<div class="col-left"><ul><li>단순화(오류) - 수동적/집단적 동질화</li></ul></div>
|
||
<div class="col-badge"><span>수행개념</span></div>
|
||
<div class="col-right"><ul><li>구체화(복잡) - 적극/구체적 실현 방안</li></ul></div>
|
||
</div>
|
||
|
||
<div class="compare-row">
|
||
<div class="col-left"><ul><li>소극적, 상용 기술에 의존</li></ul></div>
|
||
<div class="col-badge"><span>CIVIL + IT</span></div>
|
||
<div class="col-right"><ul><li>적극적, 주체적인 기술 접목/융합</li></ul></div>
|
||
</div>
|
||
|
||
<div class="compare-row">
|
||
<div class="col-left"><ul><li>S/W 제작사 판매 정책에 의존</li></ul></div>
|
||
<div class="col-badge"><span>주 체</span></div>
|
||
<div class="col-right"><ul><li>자체 수행능력 - 지속가능성 확보</li></ul></div>
|
||
</div>
|
||
|
||
<div class="compare-row">
|
||
<div class="col-left"><ul><li>평준화, 국내 중심</li></ul></div>
|
||
<div class="col-badge"><span>발주처</span></div>
|
||
<div class="col-right"><ul><li>차별화 및 경쟁력 확보, 해외 진출</li></ul></div>
|
||
</div>
|
||
|
||
<div class="compare-row">
|
||
<div class="col-left"><ul><li>소규모 BIM팀 운영 + 단순교육에 집중</li></ul></div>
|
||
<div class="col-badge"><span>설계사</span></div>
|
||
<div class="col-right"><ul><li>IT + CIVIL ENG 220명 운영 + 기술 개발</li></ul></div>
|
||
</div>
|
||
|
||
<div class="compare-row">
|
||
<div class="col-left"><ul><li>국내 토목 소극적/해외 토목증가</li></ul></div>
|
||
<div class="col-badge"><span>시공사</span></div>
|
||
<div class="col-right"><ul><li>분야 확장 모델 및 시스템</li></ul></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- 결론 (arrow + box + text 한 컴포넌트) -->
|
||
<div class="conclusion">
|
||
<div class="arrow"><img src="assets/bf1755273910e17f7a012ce2d269a93cca9483ac.svg" alt=""></div>
|
||
<div class="content">
|
||
<div class="bg"></div>
|
||
<div class="text">
|
||
<span class="normal">BIM은 건설산업의 DX(디지털전환)을 수행하는 과정에서</span><br>
|
||
<span class="accent">가장 기초가 되는 일부분</span><span class="normal">임을 인지하는 것이 매우 중요</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|