Kyeongmin/C.E.L_Slide_test2
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

Add remaining samples, tooling, and local project assets

Browse Source
This commit is contained in:
이경민
2026-04-15 18:02:17 +09:00
parent 05d43a7999
commit 1ff6c6cbb2
862 changed files with 18979 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

296
samples/src/pages/civil-dx/big-room/01-설치-근거-및-필요성.astro Normal file
View File

File diff suppressed because one or more lines are too long

302
samples/src/pages/civil-dx/big-room/03-구성요소-및-설치사례.astro Normal file
View File

@@ -0,0 +1,302 @@
---
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
---
<StarlightPage frontmatter={{ title: '건설 정책 로드맵 및 목표', tableOfContents: false }}>
<style is:global>
.sl-markdown-content,
.content-panel,
.sl-container,
main {
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
body { font-family: 'Noto Sans KR', sans-serif; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.9rem; }
th { background: #f1f3f5; border: 1px solid #ddd; padding: 8px; text-align: center; }
td { border: 1px solid #ddd; padding: 8px; vertical-align: middle; }
ul { padding-left: 20px; margin-top: 5px; }
li { margin-bottom: 5px; }
img { max-width: 100%; border-radius: 8px; }
blockquote { margin: 10px 0; padding: 10px 15px; border-left: 4px solid #0056b3; background: #f8f9fa; }
/* 컬럼 리사이즈 핸들 */
.col-resize-handle {
width: 6px;
cursor: col-resize;
background: transparent;
flex-shrink: 0;
position: relative;
z-index: 10;
transition: background 0.2s;
}
.col-resize-handle:hover, .col-resize-handle.dragging {
background: #0056b3;
border-radius: 3px;
}
.col-resize-handle::after {
content: '⋮';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #999;
font-size: 14px;
pointer-events: none;
}
.col-resize-handle:hover::after, .col-resize-handle.dragging::after {
color: #fff;
}
/* 표 리사이즈 */
table {
position: relative;
}
.table-wrapper {
position: relative;
margin-top: 10px;
}
.table-col-grip {
position: absolute;
top: 0;
width: 8px;
height: 100%;
cursor: col-resize;
z-index: 10;
background: transparent;
}
.table-col-grip:hover {
background: rgba(0, 86, 179, 0.25);
}
.table-row-grip {
position: absolute;
left: 0;
width: 100%;
height: 8px;
cursor: row-resize;
z-index: 10;
background: transparent;
}
.table-row-grip:hover {
background: rgba(0, 86, 179, 0.25);
}
</style>
<div style="height: 100%; width: 100%; overflow: hidden; display: flex; flex-direction: column; padding: 15px 40px; box-sizing: border-box;">
<div id="colContainer" style="flex: 1 1 auto; display: flex; align-items: stretch; margin-top: 10px; margin-bottom: 10px;">
<div id="leftCol" style="flex: 4.5 1 0%; display: flex; flex-direction: column; padding-right: 20px; overflow-y: auto; padding-top: 5px;">
<h2 style="font-size: 1.5rem; font-weight: bold; border-bottom: 2px solid #333;
padding-bottom: 10px; margin-bottom: 15px; margin-top: 7px;">1. 건설 정책 로드맵 및 목표</h2>
<div style="font-size: 1rem; line-height: 1.6; color: #333;"><p>정부는 <strong>디지털 전환(DX)</strong> 을 통해 정체된 건설산업을 <strong>국가 신성장 동력</strong>으로 재도약시키고자, 건설산업을 정보화하고 스마트 건설을 도입하기위해 다양한 국가연구개발사업 및 건설 정책을 시행하고있다.</p>
<div style="text-align: center; margin: 15px 0;">
<img alt="건설 정책 로드맵" src="/assets/images/04.png" style="max-height: 35vh; object-fit: contain;"/>
<p style="font-size: 0.9rem; color: #666; margin-top: 5px;"><em>[사진 1] 건설산업DX 정책 로드맵</em></p>
</div>
<h3 style="font-size:1.3rem; font-weight:bold; border-bottom:1px solid #999; padding-bottom:8px; margin-top:25px; margin-bottom:10px;">2. 건설산업 BIM 기본 지침</h3>
<p>2020년 「<strong>건설산업 BIM 기본지침</strong>」, 2022년 「<strong>건설산업 BIM 시행지침</strong>」을 발의하여 건설산업의 <strong>생산성 향상</strong>과 <strong>품질, 안전 및 친환경의 극대화</strong>를 핵심 목표로 설정하였으며, 설계·시공·유지관리 등 건설산업 전반의 <strong>디지털 전환을 가속화</strong>하고자 한다.</p>
<p><strong>정부 BIM 도입 개요 (건설산업 BIM 기본지침)</strong></p>
<ul>
<li><strong>비전</strong>: 디지털 전환을 통해 건설산업을 국가 신성장 동력으로 재도약</li>
<li><strong>목표</strong>: 건설산업의 생산성 향상과 품질, 안전 및 친환경의 극대화</li>
<li><strong>기대 효과</strong>:</li>
<ul><li><strong>비용/공기</strong>: 건설 비용 감소 및 기간 단축</li></ul>
<ul><li><strong>품질/안전</strong>: 설계·시공 오류 최소화, 프로젝트 리스크 저감</li></ul>
<ul><li><strong>협업</strong>: 협업과 의사소통 강화, 건설정보 통합관리</li></ul>
</ul>
<div style="text-align: center; margin: 15px 0;">
<img alt="건설산업 BIM 기본 지침" src="/assets/images/09.png" style="max-height: 35vh; object-fit: contain;"/>
<p style="font-size: 0.9rem; color: #666; margin-top: 5px;"><em>[사진 1] 건설산업 BIM 기본 지침 및 시행지침</em></p>
</div>
</div>
</div>
<div class="col-resize-handle" id="colResizeHandle"></div>
<div id="rightCol" style="flex: 5.5 1 0%; display: flex; flex-direction: column; padding-left: 20px; overflow-y: auto;">
<h2 style="font-size: 1.5rem; font-weight: bold; border-bottom: 2px solid #333;
padding-bottom: 10px; margin-bottom: 15px; margin-top: -3px;">3. 스마트 건설 활성화 방안</h2>
<div style="font-size: 1rem; line-height: 1.6; color: #333;"><p>2022년 7월 국토교통부가 발표한 '<strong>스마트 건설 활성화 방안</strong>'은 건설산업의 디지털화와 자동화를 위한 핵심 전략을 포함한다.</p>
<p><strong>스마트 건설 활성화 방안 주요내용</strong></p>
<div class="table-wrapper"><table style="width:100%; border-collapse:collapse; margin-top:10px; font-size:0.9rem; table-layout:fixed;"><thead><tr><th style="background:#f1f3f5; border:1px solid #ddd; padding:8px; text-align:left; width:30%;">구분</th><th style="background:#f1f3f5; border:1px solid #ddd; padding:8px; text-align:left; width:70%;">주요 내용</th></tr></thead><tbody><tr><td style="border:1px solid #ddd; padding:8px; vertical-align:middle; text-align:left;"><strong>BIM</strong><br/>(Building Information Modeling)</td><td style="border:1px solid #ddd; padding:8px; vertical-align:middle; text-align:left;"><strong>건설산업의 자동화, 지능화 등 스마트 건설을 실현하기 위한 기본 도구</strong><br/>건설정보 기반의 Process와 Products를 제공하여 디지털 전환의 기반을 마련함</td></tr><tr><td style="border:1px solid #ddd; padding:8px; vertical-align:middle; text-align:left;"><strong>OSC</strong><br/>(Off-Site Construction)</td><td style="border:1px solid #ddd; padding:8px; vertical-align:middle; text-align:left;"><strong>탈현장 건설 (공장 제작 시공)</strong><br/>단위부재 또는 유닛(여러 부재가 합쳐진 모듈 등)을 공장에서 사전 제작한 이후, 현장으로 이동하여 레고 블럭처럼 조립하는 방식</td></tr></tbody></table><div class="table-col-grip" data-col-index="0" style="left: 305px; height: 191px;"></div><div class="table-row-grip" data-row-index="0" style="top: 36px; width: 1009px;"></div><div class="table-row-grip" data-row-index="1" style="top: 99px; width: 1009px;"></div></div>
<div style="text-align: center; margin: 15px 0;">
<img alt="스마트 건설 활성화 방안" src="/assets/images/05.png" style="max-height: 35vh; object-fit: contain;"/>
<p style="font-size: 0.9rem; color: #666; margin-top: 5px;"><em>[사진 2] 스마트 건설 활성화 방안</em></p>
</div>
</div>
</div>
</div>
<div style="padding: 20px 25px; background-color: #e7f5ff; border-left: 6px solid #0056b3;
border-radius: 6px; font-size: 1.1rem; line-height: 1.7; margin-top: 10px;">
<div style="font-weight: bold; margin-bottom: 8px; color: #0056b3; font-size: 1.15rem;">ℹ️ 핵심 요약</div>
<div style="color: #1a365d; font-weight: 500;"><ul>
<li>정부는 [건설산업 BIM 기본 지침], [스마트 건설 활성화 방안] 등을 통해 건설산업의 디지털 전환을 지속적으로 추진하고 있다.</li>
</ul></div>
</div>
</div>
</StarlightPage>
<script is:inline>
document.addEventListener('DOMContentLoaded', function() {
// ===== 1. 컬럼 리사이즈 =====
(function() {
var handle = document.getElementById('colResizeHandle');
if (!handle) return;
var container = document.getElementById('colContainer');
var leftCol = document.getElementById('leftCol');
var rightCol = document.getElementById('rightCol');
if (!leftCol || !rightCol) return;
var dragging = false;
handle.addEventListener('mousedown', function(e) {
e.preventDefault();
dragging = true;
handle.classList.add('dragging');
document.body.style.cursor = 'col-resize';
document.body.style.userSelect = 'none';
});
document.addEventListener('mousemove', function(e) {
if (!dragging) return;
var rect = container.getBoundingClientRect();
var x = e.clientX - rect.left;
var totalW = rect.width;
var leftRatio = (x / totalW) * 10;
leftRatio = Math.max(2, Math.min(8, leftRatio));
var rightRatio = 10 - leftRatio;
leftCol.style.flex = leftRatio.toFixed(1);
rightCol.style.flex = rightRatio.toFixed(1);
});
document.addEventListener('mouseup', function() {
if (!dragging) return;
dragging = false;
handle.classList.remove('dragging');
document.body.style.cursor = '';
document.body.style.userSelect = '';
});
})();
// ===== 2. 표 셀 리사이즈 (오버레이 방식) =====
(function() {
document.querySelectorAll('table').forEach(function(table) {
table.style.tableLayout = 'fixed';
// 테이블을 wrapper로 감싸기
var wrapper = document.createElement('div');
wrapper.className = 'table-wrapper';
table.parentNode.insertBefore(wrapper, table);
wrapper.appendChild(table);
function createGrips() {
// 기존 그립 제거
wrapper.querySelectorAll('.table-col-grip, .table-row-grip').forEach(function(g) { g.remove(); });
var rows = table.querySelectorAll('tr');
if (rows.length === 0) return;
// 컬럼 그립 - 첫 행의 셀 경계에 배치
var cells = rows[0].querySelectorAll('th, td');
var cumX = 0;
for (var i = 0; i < cells.length - 1; i++) {
cumX += cells[i].offsetWidth;
var grip = document.createElement('div');
grip.className = 'table-col-grip';
grip.style.left = (cumX - 4) + 'px';
grip.style.height = table.offsetHeight + 'px';
grip.dataset.colIndex = i;
wrapper.appendChild(grip);
(function(colIdx, gripEl) {
var startX, startW, nextStartW, col, nextCol;
gripEl.addEventListener('mousedown', function(e) {
e.preventDefault();
startX = e.clientX;
col = [];
nextCol = [];
rows.forEach(function(row) {
var c = row.querySelectorAll('th, td');
if (c[colIdx]) col.push(c[colIdx]);
if (c[colIdx + 1]) nextCol.push(c[colIdx + 1]);
});
startW = col[0] ? col[0].offsetWidth : 100;
nextStartW = nextCol[0] ? nextCol[0].offsetWidth : 100;
document.body.style.cursor = 'col-resize';
document.body.style.userSelect = 'none';
function onMove(ev) {
var diff = ev.clientX - startX;
var newW = Math.max(40, startW + diff);
var newNextW = Math.max(40, nextStartW - diff);
col.forEach(function(c) { c.style.width = newW + 'px'; });
nextCol.forEach(function(c) { c.style.width = newNextW + 'px'; });
}
function onUp() {
document.removeEventListener('mousemove', onMove);
document.removeEventListener('mouseup', onUp);
document.body.style.cursor = '';
document.body.style.userSelect = '';
createGrips();
}
document.addEventListener('mousemove', onMove);
document.addEventListener('mouseup', onUp);
});
})(i, grip);
}
// 행 그립 - 각 행 하단에 배치
var cumY = 0;
for (var r = 0; r < rows.length - 1; r++) {
cumY += rows[r].offsetHeight;
var rowGrip = document.createElement('div');
rowGrip.className = 'table-row-grip';
rowGrip.style.top = (cumY - 4) + 'px';
rowGrip.style.width = table.offsetWidth + 'px';
rowGrip.dataset.rowIndex = r;
wrapper.appendChild(rowGrip);
(function(rowIdx, gripEl) {
var startY, startH;
gripEl.addEventListener('mousedown', function(e) {
e.preventDefault();
startY = e.clientY;
startH = rows[rowIdx].offsetHeight;
document.body.style.cursor = 'row-resize';
document.body.style.userSelect = 'none';
function onMove(ev) {
var diff = ev.clientY - startY;
rows[rowIdx].style.height = Math.max(20, startH + diff) + 'px';
}
function onUp() {
document.removeEventListener('mousemove', onMove);
document.removeEventListener('mouseup', onUp);
document.body.style.cursor = '';
document.body.style.userSelect = '';
createGrips();
}
document.addEventListener('mousemove', onMove);
document.addEventListener('mouseup', onUp);
});
})(r, rowGrip);
}
}
// 초기 그립 생성 (약간의 딜레이 후 — 렌더링 완료 대기)
setTimeout(createGrips, 100);
});
})();
});
</script>

513
samples/src/pages/civil-dx/big-room/어휴.html Normal file
View File

@@ -0,0 +1,513 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>건설산업 DX의 올바른 이해</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Noto Sans KR', sans-serif;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
overflow: hidden;
}
/* ===== 헤더 영역 ===== */
.header {
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
color: white;
padding: 30px;
text-align: center;
}
.main-title {
font-size: 2.2rem;
font-weight: 900;
margin-bottom: 8px;
letter-spacing: -1px;
}
.subtitle {
font-size: 1.1rem;
opacity: 0.9;
font-weight: 500;
}
/* ===== 문제 제기 영역 ===== */
.problem-section {
background: #fef2f2;
border-left: 5px solid #ef4444;
margin: 20px;
padding: 25px;
border-radius: 8px;
}
.problem-title {
font-size: 1.3rem;
font-weight: 700;
color: #dc2626;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.problem-title::before {
content: '⚠️';
font-size: 1.5rem;
}
.problem-content {
font-size: 1rem;
line-height: 1.7;
color: #374151;
margin-bottom: 20px;
}
.problem-impact {
background: rgba(239, 68, 68, 0.1);
padding: 15px;
border-radius: 6px;
font-size: 0.95rem;
color: #7f1d1d;
border: 1px dashed #ef4444;
}
/* ===== 사례 영역 ===== */
.examples-section {
margin: 20px;
padding: 25px;
}
.section-title {
font-size: 1.4rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 20px;
border-bottom: 3px solid #3b82f6;
padding-bottom: 8px;
}
.examples-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 30px;
}
.example-card {
border: 2px solid #e5e7eb;
border-radius: 10px;
padding: 20px;
background: #f9fafb;
transition: all 0.3s ease;
}
.example-card:hover {
border-color: #3b82f6;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
}
.card-header {
background: #3b82f6;
color: white;
padding: 8px 15px;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 700;
margin: -20px -20px 15px -20px;
}
.card-meta {
font-size: 0.8rem;
color: #6b7280;
margin-bottom: 12px;
}
.card-content {
font-size: 0.9rem;
line-height: 1.6;
color: #374151;
}
.highlight-text {
background: linear-gradient(120deg, #fef3c7 0%, #fde68a 100%);
padding: 15px 25px;
border-radius: 8px;
text-align: center;
font-weight: 600;
color: #92400e;
border: 1px solid #f59e0b;
}
/* ===== 정의 영역 ===== */
.definitions-section {
background: #f8fafc;
margin: 20px;
padding: 30px;
border-radius: 10px;
}
.definitions-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 20px;
}
.definition-card {
background: white;
border-radius: 12px;
padding: 25px;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
border-top: 4px solid;
position: relative;
}
.definition-card:nth-child(1) { border-top-color: #10b981; }
.definition-card:nth-child(2) { border-top-color: #3b82f6; }
.definition-card:nth-child(3) { border-top-color: #8b5cf6; }
.term-name {
font-size: 1.2rem;
font-weight: 900;
margin-bottom: 5px;
color: #1e293b;
}
.term-category {
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 15px;
padding: 4px 12px;
border-radius: 20px;
display: inline-block;
}
.definition-card:nth-child(1) .term-category {
background: #d1fae5;
color: #065f46;
}
.definition-card:nth-child(2) .term-category {
background: #dbeafe;
color: #1d4ed8;
}
.definition-card:nth-child(3) .term-category {
background: #ede9fe;
color: #5b21b6;
}
.term-description {
font-size: 0.95rem;
line-height: 1.6;
color: #374151;
margin-bottom: 15px;
}
.term-details {
font-size: 0.85rem;
color: #6b7280;
border-top: 1px solid #e5e7eb;
padding-top: 15px;
}
.term-source {
font-size: 0.75rem;
color: #9ca3af;
font-style: italic;
margin-top: 8px;
}
/* ===== 관계도 영역 ===== */
.relationship-section {
margin: 20px;
padding: 30px;
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border-radius: 12px;
}
.relationship-visual {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
position: relative;
margin: 30px 0;
}
.tech-bubble {
position: absolute;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: white;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
transition: all 0.3s ease;
cursor: pointer;
}
.tech-bubble:hover {
transform: scale(1.05);
box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}
.dx-bubble {
width: 200px;
height: 200px;
background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
border: 3px solid #0ea5e9;
font-size: 0.9rem;
flex-direction: column;
gap: 5px;
}
.gis-bubble {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
left: 40px;
top: 30px;
font-size: 0.75rem;
}
.bim-bubble {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
left: 40px;
top: 140px;
font-size: 0.75rem;
}
.twin-bubble {
width: 90px;
height: 90px;
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
right: 30px;
top: 50px;
font-size: 0.7rem;
flex-direction: column;
gap: 2px;
}
.relationship-text {
background: white;
padding: 20px;
border-radius: 8px;
border-left: 4px solid #0ea5e9;
margin-top: 20px;
}
.relationship-list {
list-style: none;
padding: 0;
}
.relationship-list > li {
margin-bottom: 15px;
font-size: 0.95rem;
line-height: 1.6;
color: #374151;
}
.relationship-list > li::before {
content: '▶';
color: #0ea5e9;
font-weight: 700;
margin-right: 10px;
}
.sub-list {
margin-top: 10px;
margin-left: 20px;
list-style: none;
}
.sub-list li {
margin-bottom: 8px;
font-size: 0.85rem;
color: #6b7280;
}
.sub-list li::before {
content: '○';
color: #9ca3af;
margin-right: 8px;
}
/* ===== 결론 영역 ===== */
.conclusion-section {
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
margin: 20px 0 0 0;
padding: 30px;
text-align: center;
}
.conclusion-label {
color: #94a3b8;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}
.conclusion-text {
color: white;
font-size: 1.4rem;
font-weight: 700;
line-height: 1.4;
letter-spacing: -0.5px;
}
.conclusion-highlight {
color: #60a5fa;
background: rgba(96, 165, 250, 0.1);
padding: 2px 8px;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<!-- 헤더 -->
<div class="header">
<h1 class="main-title">건설산업 DX의 올바른 이해</h1>
<p class="subtitle">개념 정립을 통한 체계적 접근</p>
</div>
<!-- 문제 제기 -->
<div class="problem-section">
<h2 class="problem-title">용어의 혼용</h2>
<div class="problem-content">
건설산업의 디지털 전환 논의에서 <strong>DX(Digital Transformation)</strong>와 <strong>BIM(Building Information Modeling)</strong>이 개념적으로 명확히 정립되지 않은 채 혼용되어 사용되고 있음
</div>
<div class="problem-impact">
<strong>영향:</strong> BIM기술의 도입을 DX의 완성으로 오인하거나, DX를 BIM 기술 도입 수준으로 한정하는 인식 확산
</div>
</div>
<!-- 혼용 사례 -->
<div class="examples-section">
<h2 class="section-title">혼용 대표 사례</h2>
<div class="examples-grid">
<div class="example-card">
<div class="card-header">스마트 건설 활성화 방안</div>
<div class="card-meta">국토교통부, 2022.07</div>
<div class="card-content">
<strong>추진과제:</strong> 건설산업 디지털화<br>
<strong>실행과제:</strong> BIM 전면 도입, BIM 전문인력 양성
</div>
</div>
<div class="example-card">
<div class="card-header">제7차 건설기술진흥 기본계획</div>
<div class="card-meta">국토교통부, 2023.12</div>
<div class="card-content">
<strong>추진방향:</strong> 디지털 전환을 통한 스마트 건설 확산<br>
<strong>추진과제:</strong> BIM 도입으로 건설산업 디지털화
</div>
</div>
</div>
<div class="highlight-text">
건설산업의 DX를 올바르게 이해하기 위해 각 <strong>용어의 정의, 역할, 상호관계</strong>에 대한 체계적 정립 필요
</div>
</div>
<!-- 용어 정의 -->
<div class="definitions-section">
<h2 class="section-title">용어 정의</h2>
<div class="definitions-grid">
<div class="definition-card">
<h3 class="term-name">건설산업</h3>
<span class="term-category">종합산업</span>
<div class="term-description">
다양한 시설물을 각 산업마다의 광범위한 기술을 통합 및 융합하여 만들어내는 종합산업
</div>
<div class="term-details">
목적 시설물의 품질 욕구를 충족시키면서 최단기간 내에 최소 비용으로 편리하고 안전하며 우수한 성능의 시설물 완성을 목표로 함
</div>
</div>
<div class="definition-card">
<h3 class="term-name">BIM (Building Information Modeling)</h3>
<span class="term-category">디지털 전환을 위한 핵심 기술</span>
<div class="term-description">
시설물의 생애주기동안 발생한 모든 정보를 3차원 모델 기반으로 통합·관리하는 정보 관리 도구
</div>
<div class="term-details">
건설 정보와 절차를 표준화된 방식으로 연계하고 디지털 협업이 가능하도록 하는 핵심 인프라 기술
</div>
<div class="term-source">건설산업 BIM 기본지침, 국토교통부, 2020</div>
</div>
<div class="definition-card">
<h3 class="term-name">DX (Digital Transformation)</h3>
<span class="term-category">산업 패러다임의 변화</span>
<div class="term-description">
디지털 기술을 기반으로 산업 전반의 업무방식과 가치 창출 구조를 전환하는 과정 및 결과
</div>
<div class="term-details">
단순한 기술 도입이 아닌, 고객 가치와 의사결정 방식의 근본적인 변화로 산업의 새로운 방향을 정립하는 것을 의미함
</div>
<div class="term-source">Digital Transformation, IBM Institute for Business Value, 2011</div>
</div>
</div>
</div>
<!-- 상호관계 -->
<div class="relationship-section">
<h2 class="section-title">용어간 상호관계</h2>
<div class="relationship-visual">
<div class="tech-bubble dx-bubble">
<span>건설산업 DX</span>
<small>(Digital Transformation)</small>
</div>
<div class="tech-bubble gis-bubble">GIS</div>
<div class="tech-bubble bim-bubble">BIM</div>
<div class="tech-bubble twin-bubble">
<span>Digital Twin</span>
<small>가상환경</small>
</div>
</div>
<div class="relationship-text">
<ul class="relationship-list">
<li><strong>DX</strong>는 BIM과 같은 디지털기술을 기반으로 산업 전반의 <strong>프로세스를 혁신</strong>하는 상위개념</li>
<li>건설산업의 DX는 <strong>GIS(공간정보), BIM, 디지털 트윈(가상환경)</strong>의 기술융합을 통해서만 실현 또는 구현 가능
<ul class="sub-list">
<li><strong>GIS의 역할:</strong> 지리적 데이터를 공간 분석하여 시각적으로 표현, 위치기반 정보 제공</li>
<li><strong>BIM의 역할:</strong> 형상정보와 내용정보가 포함된 3D모델로, 건설 정보 기반의 Process와 Product를 제공</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- 핵심 결론 -->
<div class="conclusion-section">
<div class="conclusion-label">핵심 요약</div>
<div class="conclusion-text">
<span class="conclusion-highlight">BIM</span>은 건설산업의 디지털전환(DX)을 수행하는 과정에서<br>
가장 기초가 되는 <span class="conclusion-highlight">일부분</span>이다
</div>
</div>
</div>
</body>
</html>

351
samples/src/pages/civil-dx/big-room/어휴2.html Normal file
View File

@@ -0,0 +1,351 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DX ≠ BIM: 개념 구분과 정립</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Noto Sans KR', sans-serif; }
.slide {
width: 100vw;
height: 100vh;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
color: white;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 1fr auto;
gap: 20px;
padding: 40px;
overflow: hidden;
}
/* ===== 제목 영역 (전체 너비) ===== */
.header {
grid-column: 1 / -1;
text-align: center;
border-bottom: 3px solid #ef4444;
padding-bottom: 15px;
}
.main-title {
font-size: 2.5rem;
font-weight: 900;
color: #ef4444;
margin-bottom: 5px;
}
.subtitle {
font-size: 1.1rem;
color: #94a3b8;
font-weight: 500;
}
/* ===== 좌측: 문제 영역 ===== */
.problem-panel {
background: rgba(239, 68, 68, 0.1);
border: 2px solid #ef4444;
border-radius: 12px;
padding: 25px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.alert-icon {
font-size: 3rem;
text-align: center;
margin-bottom: 15px;
}
.problem-title {
font-size: 1.3rem;
font-weight: 700;
color: #fecaca;
text-align: center;
margin-bottom: 20px;
}
.policy-contradiction {
background: rgba(0,0,0,0.3);
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
}
.policy-label {
font-size: 0.8rem;
color: #94a3b8;
margin-bottom: 5px;
}
.policy-text {
font-size: 0.9rem;
color: #fecaca;
font-weight: 600;
}
.impact-text {
font-size: 1rem;
color: #ef4444;
font-weight: 700;
text-align: center;
background: rgba(0,0,0,0.5);
padding: 12px;
border-radius: 8px;
}
/* ===== 중앙: 관계도 영역 ===== */
.diagram-panel {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.relationship-visual {
width: 100%;
height: 350px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* DX 대원 */
.dx-circle {
width: 280px;
height: 280px;
border: 4px solid #0ea5e9;
border-radius: 50%;
background: radial-gradient(circle, rgba(14, 165, 233, 0.1) 0%, rgba(14, 165, 233, 0.05) 100%);
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-weight: 900;
color: #0ea5e9;
text-align: center;
}
.dx-label {
font-size: 1.8rem;
margin-bottom: 5px;
}
.dx-sub {
font-size: 0.9rem;
color: #7dd3fc;
}
/* 기술 버블들 */
.tech-bubble {
position: absolute;
border-radius: 50%;
border: 3px solid;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.85rem;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.gis-bubble {
width: 70px;
height: 70px;
background: #10b981;
border-color: #34d399;
color: white;
left: 60px;
top: 50px;
}
.bim-bubble {
width: 80px;
height: 80px;
background: #3b82f6;
border-color: #60a5fa;
color: white;
left: 50px;
top: 150px;
}
.twin-bubble {
width: 75px;
height: 75px;
background: #8b5cf6;
border-color: #a78bfa;
color: white;
right: 50px;
top: 100px;
font-size: 0.7rem;
flex-direction: column;
gap: 2px;
}
/* 관계 화살표 */
.arrow {
position: absolute;
font-size: 2rem;
color: #fbbf24;
font-weight: 900;
text-shadow: 0 0 10px rgba(251, 191, 36, 0.8);
}
.arrow-down {
bottom: -40px;
font-size: 1.5rem;
}
/* ===== 우측: 정의 영역 ===== */
.definition-panel {
display: flex;
flex-direction: column;
gap: 20px;
}
.def-card {
background: rgba(148, 163, 184, 0.1);
border-left: 4px solid;
border-radius: 8px;
padding: 15px;
}
.def-card:nth-child(1) { border-left-color: #10b981; }
.def-card:nth-child(2) { border-left-color: #3b82f6; }
.def-card:nth-child(3) { border-left-color: #8b5cf6; }
.def-term {
font-size: 1.1rem;
font-weight: 700;
color: #e2e8f0;
margin-bottom: 8px;
}
.def-category {
font-size: 0.7rem;
background: rgba(59, 130, 246, 0.2);
color: #93c5fd;
padding: 2px 8px;
border-radius: 10px;
display: inline-block;
margin-bottom: 8px;
}
.def-desc {
font-size: 0.8rem;
color: #cbd5e1;
line-height: 1.4;
}
/* ===== 하단: 결론 배너 ===== */
.conclusion {
grid-column: 1 / -1;
background: linear-gradient(90deg, #1e293b 0%, #0f172a 50%, #1e293b 100%);
border: 2px solid #0ea5e9;
border-radius: 12px;
padding: 20px;
text-align: center;
position: relative;
overflow: hidden;
}
.conclusion::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(14, 165, 233, 0.3), transparent);
animation: shine 3s infinite;
}
@keyframes shine {
0% { left: -100%; }
100% { left: 100%; }
}
.conclusion-label {
font-size: 0.9rem;
color: #94a3b8;
margin-bottom: 8px;
font-weight: 600;
}
.conclusion-text {
font-size: 1.6rem;
font-weight: 900;
color: #0ea5e9;
}
.highlight {
color: #fbbf24;
background: rgba(251, 191, 36, 0.1);
padding: 0 8px;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="slide">
<!-- 제목 -->
<div class="header">
<h1 class="main-title">DX ≠ BIM</h1>
<p class="subtitle">건설산업 디지털전환의 올바른 이해</p>
</div>
<!-- 좌측: 문제 -->
<div class="problem-panel">
<div class="alert-icon">⚠️</div>
<div class="problem-title">정책의 개념 혼동</div>
<div class="policy-contradiction">
<div class="policy-label">스마트건설 활성화 방안 (2022)</div>
<div class="policy-text">목표: 디지털화 → 실행: BIM만 도입</div>
</div>
<div class="policy-contradiction">
<div class="policy-label">건설기술진흥 기본계획 (2023)</div>
<div class="policy-text">목표: DX 확산 → 실행: BIM 중심화</div>
</div>
<div class="impact-text">
BIM 도입 = DX 완성<br>
오해 확산 중
</div>
</div>
<!-- 중앙: 관계도 -->
<div class="diagram-panel">
<div class="relationship-visual">
<div class="dx-circle">
<div class="dx-label">DX</div>
<div class="dx-sub">디지털 전환</div>
</div>
<div class="tech-bubble gis-bubble">GIS</div>
<div class="tech-bubble bim-bubble">BIM</div>
<div class="tech-bubble twin-bubble">
<span>Digital</span>
<span>Twin</span>
</div>
</div>
<div class="arrow arrow-down">⬇</div>
<div style="color: #fbbf24; font-weight: 700; font-size: 1rem; text-align: center;">
상위개념 → 구성요소
</div>
</div>
<!-- 우측: 정의 -->
<div class="definition-panel">
<div class="def-card">
<div class="def-term">건설산업</div>
<div class="def-category">종합산업</div>
<div class="def-desc">기술 통합·융합으로 시설물 완성</div>
</div>
<div class="def-card">
<div class="def-term">BIM</div>
<div class="def-category">핵심 기술</div>
<div class="def-desc">3D 모델 기반 정보관리 도구</div>
</div>
<div class="def-card">
<div class="def-term">DX</div>
<div class="def-category">패러다임 변화</div>
<div class="def-desc">업무방식·가치창출 구조 전환</div>
</div>
</div>
<!-- 결론 배너 -->
<div class="conclusion">
<div class="conclusion-label">핵심 요약</div>
<div class="conclusion-text">
<span class="highlight">BIM</span>은 DX의 <span class="highlight">일부분</span>이다
</div>
</div>
</div>
</body>
</html>