kyeongmin
beb5fd0c61
- 10단계 변환 프로세스 (PROCESS.md) - 수학 공식 레퍼런스 (MATH.md, gradient_math.py) - CSS 보정 규칙 R1~R16 (RULES.md) - 작업 규율 7개 규칙 (PROCESS-CONTROL.md) - 8개 Figma 프레임 1:1 HTML 변환물 (block-tests/) - 8개 Jinja2 템플릿 staging (templates_staging/) - 변환 완료 도서관 + 디자인 인사이트 (blocks_index.md) - 사용법 가이드 (README.md) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
265 lines
10 KiB
HTML
265 lines
10 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: 45:20, 1868×1908 px
|
||
Scale: 1280 / 1868 = 0.685225 → 1280×1307 px (16:9 720 초과)
|
||
Pattern: compare-vs-rows
|
||
-->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700&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;
|
||
height: 1307px;
|
||
background: #ffffff;
|
||
position: relative;
|
||
display: flex; align-items: center; justify-content: center;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,.15);
|
||
}
|
||
.block {
|
||
width: 1280px;
|
||
height: 1307px;
|
||
background: #ffffff;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.inner {
|
||
position: absolute;
|
||
left: 0; top: 0;
|
||
width: 1868px;
|
||
height: 1908px;
|
||
transform: scale(0.685225);
|
||
transform-origin: top left;
|
||
}
|
||
|
||
/* ─── 헤더 (BIM과 DX의 이해) ─── */
|
||
.header {
|
||
position: absolute;
|
||
left: 0; top: 0;
|
||
display: flex; align-items: center; gap: 15px;
|
||
height: 85px; width: 570px;
|
||
padding-left: 0;
|
||
}
|
||
.header-icon {
|
||
width: 50px; height: 50px;
|
||
}
|
||
.header-icon img { width: 100%; height: 100%; object-fit: cover; }
|
||
.header-title {
|
||
font-weight: 700;
|
||
font-size: 70px;
|
||
line-height: normal;
|
||
white-space: nowrap;
|
||
/* gradient text */
|
||
background-image: linear-gradient(180deg, #cc5200 0%, #883700 100%);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
text-shadow: 0 0 4px #322c1e;
|
||
}
|
||
|
||
/* ─── 메인 타이틀 pill (BIM vs DX) — grid 3-col 카테고리 컬럼 align ─── */
|
||
.main-pill {
|
||
position: absolute;
|
||
left: 65px; top: 103px;
|
||
width: 1803px; height: 75px;
|
||
border-radius: 50px;
|
||
background-image: 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%);
|
||
/* 카테고리 컬럼 left=813, width=242, main pill left=65, width=1803
|
||
→ 내부 grid: 좌(748) | 중(242) | 우(813) */
|
||
display: grid;
|
||
grid-template-columns: 748px 242px 813px;
|
||
align-items: center;
|
||
}
|
||
.main-pill > div {
|
||
font-weight: 700;
|
||
font-size: 55px;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* ─── 좌/우 텍스트 공통: 박스 vertical center align (Figma flex justify-center 모방) ─── */
|
||
.left-text, .right-text {
|
||
position: absolute;
|
||
font-weight: 700;
|
||
font-size: 40px;
|
||
line-height: 1.3;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
word-break: keep-all;
|
||
}
|
||
.left-text {
|
||
color: #5c3714;
|
||
text-align: right;
|
||
align-items: flex-end;
|
||
}
|
||
.right-text {
|
||
color: #285b4a;
|
||
text-align: left;
|
||
align-items: flex-start;
|
||
}
|
||
.left-text .sub, .right-text .sub { font-size: 35px; }
|
||
|
||
/* ─── 가운데 카테고리 pill (white text) ─── */
|
||
.cat-pill {
|
||
position: absolute;
|
||
left: 813px;
|
||
width: 242px;
|
||
border-radius: 10px;
|
||
background-image: 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;
|
||
font-weight: 700;
|
||
font-size: 40px;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
white-space: pre;
|
||
}
|
||
|
||
/* ─── 결론 박스 ─── 원본 SVG: #FAEDCB 단색 + mix-blend-mode: multiply → CSS 직접 */
|
||
.conclusion-bg {
|
||
position: absolute;
|
||
left: 427px; top: 1738px;
|
||
width: 1214px; height: 170px;
|
||
background: #FAEDCB;
|
||
mix-blend-mode: multiply;
|
||
}
|
||
.conclusion-text {
|
||
position: absolute;
|
||
left: 446px; top: 1730px;
|
||
width: 1265.018px;
|
||
font-weight: 700;
|
||
color: #000000;
|
||
}
|
||
.conclusion-text .l1 { line-height: 90px; font-size: 50px; }
|
||
.conclusion-text .l2 { line-height: 90px; font-size: 50px; }
|
||
.conclusion-text .l2 .hl { color: #ae3607; font-size: 55px; }
|
||
|
||
/* 화살표 */
|
||
.arrow-vec {
|
||
position: absolute;
|
||
left: 202px; top: 1721px;
|
||
width: 192px; height: 169px;
|
||
transform: rotate(180deg);
|
||
}
|
||
.arrow-vec img { width: 100%; height: 100%; display: block; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="slide">
|
||
<div class="block">
|
||
<div class="inner">
|
||
|
||
<!-- 헤더 -->
|
||
<div class="header">
|
||
<div class="header-icon"><img src="assets/shared/b0e9fad5b03f4d9e368524976c20c9886392e17b.png" alt=""></div>
|
||
<div class="header-title">BIM과 DX의 이해</div>
|
||
</div>
|
||
|
||
<!-- 메인 타이틀 pill: BIM | vs. | DX (카테고리 컬럼과 grid align) -->
|
||
<div class="main-pill">
|
||
<div>BIM</div>
|
||
<div>vs.</div>
|
||
<div>DX</div>
|
||
</div>
|
||
|
||
<!-- ─── 12 rows ───
|
||
각 row: cat pill의 top/height를 좌/우 text 박스에도 동일하게 적용 →
|
||
flex justify-center 로 자동 vertical 정렬 (cat pill center == text center) -->
|
||
|
||
<!-- Row 1: BIM/DX -->
|
||
<div class="cat-pill" style="top:205px; height:83px;">BIM/DX</div>
|
||
<div class="left-text" style="left:47px; top:205px; height:83px; width:733px;">• Only 3D</div>
|
||
<div class="right-text" style="left:1088px; top:205px; height:83px; width:780px;">• BIM << DX <span class="sub">(ENG. + Management 포함)</span></div>
|
||
|
||
<!-- Row 2: S/W -->
|
||
<div class="cat-pill" style="top:321px; height:138px;">S/W</div>
|
||
<div class="left-text" style="left:22px; top:321px; height:138px; width:758px;">• 모델 제작용 상용 S/W<br><span class="sub">[Civil 3D, Revit, Navisworks, Autocad]</span></div>
|
||
<div class="right-text" style="left:1088px; top:321px; height:138px; width:780px;">• 제작 및 운영 (상용 + 전용 40~80개)<br><span class="sub">[Rhino, Sketchup, Blender ..] + [EG-BIM 등]</span></div>
|
||
|
||
<!-- Row 3: 프로세스 -->
|
||
<div class="cat-pill" style="top:492px; height:84px;">프로세스</div>
|
||
<div class="left-text" style="left:47px; top:492px; height:84px; width:733px;">• 기존 2D 설계방식 유지</div>
|
||
<div class="right-text" style="left:1088px; top:492px; height:84px; width:701px;">• 근본적 문제의식을 통한 개선</div>
|
||
|
||
<!-- Row 4: 성과물 -->
|
||
<div class="cat-pill" style="top:609px; height:138px;">성과물</div>
|
||
<div class="left-text" style="left:47px; top:609px; height:138px; width:733px;">• 3D 모델 중심<br>• 기존 성과품 유지</div>
|
||
<div class="right-text" style="left:1088px; top:609px; height:138px; width:701px;">• 공학 정보 및 콘텐츠 연계에 집중<br>• 도면, 수량, 시공계획 등 일식</div>
|
||
|
||
<!-- Row 5: 활용 -->
|
||
<div class="cat-pill" style="top:780px; height:83px;">활 용</div>
|
||
<div class="left-text" style="left:47px; top:780px; height:83px; width:733px;">• 3D 모델에 의한 일반적 이해 향상</div>
|
||
<div class="right-text" style="left:1088px; top:780px; height:83px; width:701px;">• 설계/시공의 혁신(개념의 재정립)</div>
|
||
|
||
<!-- Row 6: 확장성 -->
|
||
<div class="cat-pill" style="top:896px; height:83px;">확장성</div>
|
||
<div class="left-text" style="left:47px; top:896px; height:83px; width:733px;">• (설계/시공/운영) 분야별 단절</div>
|
||
<div class="right-text" style="left:1088px; top:896px; height:83px; width:623px;">• 전 생애주기 활용 시스템</div>
|
||
|
||
<!-- Row 7: 수행개념 -->
|
||
<div class="cat-pill" style="top:1012px; height:84px;">수행개념</div>
|
||
<div class="left-text" style="left:47px; top:1012px; height:84px; width:733px;">• 단순화(오류) - 수동적/집단적 동질화</div>
|
||
<div class="right-text" style="left:1088px; top:1012px; height:84px; width:701px;">• 구체화(복잡) - 적극/구체적 실현 방안</div>
|
||
|
||
<!-- Row 8: CIVIL+IT -->
|
||
<div class="cat-pill" style="top:1129px; height:82px;">CIVIL + IT</div>
|
||
<div class="left-text" style="left:142px; top:1129px; height:82px; width:638px;">• 소극적, 상용 기술에 의존</div>
|
||
<div class="right-text" style="left:1088px; top:1129px; height:82px; width:638px;">• 적극적, 주체적인 기술 접목/융합</div>
|
||
|
||
<!-- Row 9: 주체 -->
|
||
<div class="cat-pill" style="top:1244px; height:83px;">주 체</div>
|
||
<div class="left-text" style="left:160px; top:1244px; height:83px; width:620px;">• S/W 제작사 판매 정책에 의존</div>
|
||
<div class="right-text" style="left:1088px; top:1244px; height:83px; width:638px;">• 자체 수행능력 - 지속가능성 확보</div>
|
||
|
||
<!-- Row 10: 발주처 -->
|
||
<div class="cat-pill" style="top:1360px; height:83px;">발주처</div>
|
||
<div class="left-text" style="left:47px; top:1360px; height:83px; width:733px;">• 평준화, 국내 중심</div>
|
||
<div class="right-text" style="left:1088px; top:1360px; height:83px; width:701px;">• 차별화 및 경쟁력 확보, 해외 진출</div>
|
||
|
||
<!-- Row 11: 설계사 -->
|
||
<div class="cat-pill" style="top:1476px; height:84px;">설계사</div>
|
||
<div class="left-text" style="left:47px; top:1476px; height:84px; width:733px;">• 소규모 BIM팀 운영 + 단순교육에 집중</div>
|
||
<div class="right-text" style="left:1088px; top:1476px; height:84px; width:737px;">• IT + CIVIL ENG 220명 운영 + 기술 개발</div>
|
||
|
||
<!-- Row 12: 시공사 -->
|
||
<div class="cat-pill" style="top:1593px; height:140px;">시공사</div>
|
||
<div class="left-text" style="left:47px; top:1593px; height:140px; width:733px;">• 국내 토목 소극적/해외 토목증가</div>
|
||
<div class="right-text" style="left:1088px; top:1593px; height:140px; width:701px;">• 분야 확장 모델 및 시스템</div>
|
||
|
||
<!-- 결론 박스 -->
|
||
<div class="conclusion-bg"></div>
|
||
<div class="conclusion-text">
|
||
<p class="l1">BIM은 건설산업의 DX(디지털전환)을 수행하는 과정에서</p>
|
||
<p class="l2"><span class="hl">가장 기초가 되는 일부분</span>임을 인지하는 것이 매우 중요</p>
|
||
</div>
|
||
<div class="arrow-vec"><img src="assets/shared/bf1755273910e17f7a012ce2d269a93cca9483ac.svg" alt=""></div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|