Add remaining samples, tooling, and local project assets
This commit is contained in:
7
samples/src/content/docs/Civil DX/01. 국내 건설정책 추진현황.mdx
Normal file
7
samples/src/content/docs/Civil DX/01. 국내 건설정책 추진현황.mdx
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: 국내 건설정책 추진현황
|
||||
sidebar:
|
||||
order: 0
|
||||
---
|
||||
|
||||
🚧 **현재 작성 중인 페이지입니다.**
|
||||
7
samples/src/content/docs/Civil DX/02. DX의 실태.mdx
Normal file
7
samples/src/content/docs/Civil DX/02. DX의 실태.mdx
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: DX의 실태
|
||||
sidebar:
|
||||
order: 1
|
||||
---
|
||||
|
||||
🚧 **현재 작성 중인 페이지입니다.**
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: 설치근거 및 필요성
|
||||
sidebar:
|
||||
order: 0
|
||||
---
|
||||
|
||||
🚧 **현재 작성 중인 페이지입니다.**
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: HW적 요소와 최소 구비 조건
|
||||
sidebar:
|
||||
order: 1
|
||||
---
|
||||
|
||||
🚧 **현재 작성 중인 페이지입니다.**
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: 구성요소 및 설치사례
|
||||
sidebar:
|
||||
order: 2
|
||||
---
|
||||
|
||||
🚧 **현재 작성 중인 페이지입니다.**
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: SW적 요소 (C.C.P와 BCMF)
|
||||
sidebar:
|
||||
order: 3
|
||||
---
|
||||
|
||||
🚧 **현재 작성 중인 페이지입니다.**
|
||||
296
samples/src/content/docs/Civil DX/BIG Room/01. 설치 근거 및 필요성.astro
Normal file
296
samples/src/content/docs/Civil DX/BIG Room/01. 설치 근거 및 필요성.astro
Normal file
File diff suppressed because one or more lines are too long
297
samples/src/content/docs/Civil DX/BIG Room/01. 설치 근거 및 필요성.html
Normal file
297
samples/src/content/docs/Civil DX/BIG Room/01. 설치 근거 및 필요성.html
Normal file
@@ -0,0 +1,297 @@
|
||||
<!DOCTYPE html><html lang="ko"><head>
|
||||
<meta charset="UTF-8">
|
||||
<title>건설 정책 로드맵 및 목표</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
|
||||
body { margin: 0; padding: 0; font-family: 'Noto Sans KR', sans-serif; background: #fff; height: 100%; overflow: hidden; }
|
||||
html { height: 100%; overflow: hidden; }
|
||||
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>
|
||||
</head>
|
||||
<body 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 src="/assets/images/04.png" alt="건설 정책 로드맵" 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 src="/assets/images/09.png" alt="건설산업 BIM 기본 지침" 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 src="/assets/images/05.png" alt="스마트 건설 활성화 방안" 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>
|
||||
|
||||
<script>
|
||||
// ===== 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>
|
||||
|
||||
</body></html>
|
||||
@@ -0,0 +1,285 @@
|
||||
---
|
||||
title: DX도입 배경(슬라이드6:4)
|
||||
sidebar:
|
||||
order: 5
|
||||
tableOfContents: false
|
||||
---
|
||||
|
||||
<style>{`
|
||||
/* 1. 전체 폭 강제 사용 및 패딩 제거 */
|
||||
.content-panel, .sl-container, .sl-markdown-content {
|
||||
max-width: 100% !important; padding: 0 !important; margin: 0 !important;
|
||||
}
|
||||
.padding-vert--lg { padding-top: 0 !important; padding-bottom: 0 !important; }
|
||||
|
||||
/* 2. 리스트 스타일 잡기 */
|
||||
.slide-content ul { padding-left: 20px; margin-top: 10px; }
|
||||
.slide-content li { margin-bottom: 8px; }
|
||||
`}</style>
|
||||
|
||||
{/* 👇 슬라이드 컨테이너: 높이를 화면 크기에서 [제목+여백]만큼 뺀 값으로 자동 계산 */
|
||||
/* calc(100vh - 140px) : 140px은 상단 시스템 제목과 헤더가 차지하는 대략적인 높이입니다. */
|
||||
}
|
||||
<div className="slide-container" style={{
|
||||
height: 'calc(100vh - 140px)',
|
||||
width: '100%',
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
padding: '0 40px'
|
||||
}}>
|
||||
|
||||
{/* 본문 영역 (6:4 분할) */}
|
||||
<div style={{
|
||||
flex: '1 1 auto', /* 남은 공간을 꽉 채움 */
|
||||
display: 'flex',
|
||||
gap: '40px',
|
||||
alignItems: 'stretch', /* ⭐ 핵심: 자식 요소들을 높이 끝까지 강제로 늘림 */
|
||||
marginTop: '10px',
|
||||
marginBottom: '20px'
|
||||
}}>
|
||||
|
||||
{/* 🟢 [왼쪽 60%] */}
|
||||
<div className="slide-content" style={{
|
||||
flex: 6,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start', /* 내용은 중앙 정렬하되 */
|
||||
height: '100%', /* ⭐ 박스 자체는 100% 높이 유지 */
|
||||
borderRight: '1px solid #e0e0e0',
|
||||
paddingRight: '40px'
|
||||
}}>
|
||||
|
||||
<h2 style={{ fontSize: '1.6rem', fontWeight: 'bold', marginBottom: '0px', borderBottom: '1px solid #ddd', paddingBottom: '00px' }}>
|
||||
1. 건설산업의 낮은 생산성
|
||||
</h2>
|
||||
|
||||
<div style={{ fontSize: '1rem', lineHeight: '1.6', color: '#333' }}>
|
||||
<p>
|
||||
* **건설산업** 생산성 성장률은 **1%**, 제조업(**3.6%**) 대비 **심각한 정체** 상태.
|
||||
|
||||
|
||||
* 국내 건설기업의 **노동 생산성**또한 **제조업의 53.2%** 수준에 불과함.
|
||||
|
||||
|
||||
* **건설산업**은 **효율성 혁신 지체**로, 여전히 전통적인 **노동 집약적 생산 방식**에 머물러 있음.
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<h2 style={{ fontSize: '1.6rem', fontWeight: 'bold', marginBottom: '0px', borderBottom: '1px solid #ddd', paddingBottom: '00px' }}>
|
||||
2. 디지털화와 건설산업의 현재
|
||||
</h2>
|
||||
|
||||
<div style={{ fontSize: '1rem', lineHeight: '1.6', color: '#333' }}>
|
||||
<p>
|
||||
* 세계적으로 산업별 **디지털화 수준과 생산성은 정비례**함.
|
||||
|
||||
* 건설산업의 디지털화 지수는 **농업보다도 낮은 최하위권**에 머물러 있음.
|
||||
|
||||
* 디지털 전환을 위한 **노력 부족**과 건설산업에 맞는 **디지털 기술 부족**이 그 원인.
|
||||
|
||||
* 디지털 기술이 발전한 현재, 생산성 혁신을 위해 **건설산업 전반의 디지털 전환(DX)** 이 필요.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{/* ================= [핵심 요약] 박스 ================= */}
|
||||
<div style={{
|
||||
marginTop: '30px', /* 위쪽 내용과 간격 */
|
||||
padding: '20px', /* 박스 내부 여백 */
|
||||
backgroundColor: '#f6f8fa', /* 연한 회색 배경 (취향에 따라 #e6f7ff 등 변경 가능) */
|
||||
borderLeft: '5px solid #0056b3', /* 왼쪽 굵은 파란 선 */
|
||||
borderRadius: '4px', /* 모서리 둥글게 */
|
||||
fontSize: '1rem'
|
||||
}}>
|
||||
{/* 제목 부분 */}
|
||||
<div style={{ fontWeight: 'bold', marginBottom: '10px', color: '#0056b3' }}>
|
||||
핵심 요약
|
||||
</div>
|
||||
|
||||
{/* 내용 부분 */}
|
||||
<ul style={{ margin: 0, paddingLeft: '20px' }}>
|
||||
<li>
|
||||
건설산업은 디지털전환을 통해 <strong>Process의 혁신</strong>과
|
||||
<strong> Products의 변화</strong>를 일으켜야 한다.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* 🟠 [오른쪽 40%] */}
|
||||
<div style={{
|
||||
flex: 4,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'left',
|
||||
paddingLeft: '10px',
|
||||
height: '100%'
|
||||
}}>
|
||||
|
||||
|
||||
{/* 👇 주석 없이 깔끔한 이미지 태그 */}
|
||||
<img
|
||||
src="/assets/images/그림4.png"
|
||||
alt="건설산업 생산성 추이"
|
||||
className="zoomable"
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
maxHeight: '40vh',
|
||||
objectFit: 'contain',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
|
||||
marginBottom: '0px'
|
||||
}}
|
||||
/>
|
||||
|
||||
<p style={{ fontSize: '0.9rem', textAlign: 'center', color: '#666', marginTop: '0' }}>
|
||||
*[그림 1] 국내외 건설산업 생산성 추이 (출처: McKinsey / 한국은행)*<br/>
|
||||
</p>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
|
||||
|
||||
{/* 👇 주석 없이 깔끔한 이미지 태그 */}
|
||||
<img
|
||||
src="/assets/images/그림3.png"
|
||||
alt="건설산업 생산성 추이"
|
||||
className="zoomable"
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
maxHeight: '40vh',
|
||||
objectFit: 'contain',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
|
||||
marginBottom: '0px'
|
||||
}}
|
||||
/>
|
||||
|
||||
<p style={{ fontSize: '0.9rem', textAlign: 'center', color: '#666', marginTop: '0' }}>
|
||||
*[그림 2] 산업별 디지털화 지수 비교 (출처: McKinsey 보고서, 2018)*<br/>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* ================================================================================== */}
|
||||
{/* 👇 [팝업 기능 최종본] 가림 현상 해결 + 정중앙 정렬 (기존 코드 지우고 붙여넣기) */}
|
||||
{/* ================================================================================== */}
|
||||
|
||||
<style>{`
|
||||
.zoomable { cursor: zoom-in; transition: transform 0.2s; }
|
||||
.zoomable:hover { transform: scale(1.02); }
|
||||
|
||||
/* 팝업 배경 설정 */
|
||||
#image-modal {
|
||||
display: none; /* 평소엔 숨김 */
|
||||
|
||||
/* ⭐ 핵심 1: 정중앙 정렬을 위한 Flexbox 도입 */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
position: fixed;
|
||||
left: 0; top: 0; width: 100%; height: 100%;
|
||||
|
||||
/* ⭐ 핵심 2: 사이트 메뉴바보다 무조건 위에 뜨게 Z-Index를 엄청 높게 설정 */
|
||||
z-index: 2147483647;
|
||||
|
||||
background-color: rgba(0,0,0,0.9); /* 배경을 더 어둡게 */
|
||||
backdrop-filter: blur(5px);
|
||||
padding: 20px; /* 가장자리 여백 확보 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 팝업 이미지 설정 */
|
||||
#modal-content {
|
||||
max-width: 60%;
|
||||
max-height: 95vh;
|
||||
object-fit: contain; /* 비율 유지하며 화면에 딱 맞춤 */
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 30px rgba(0,0,0,0.5);
|
||||
animation: popUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
/* 닫기 버튼 설정 */
|
||||
#modal-close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 30px;
|
||||
color: white;
|
||||
font-size: 50px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
z-index: 2147483648; /* 이미지보다도 더 위에 */
|
||||
line-height: 1;
|
||||
text-shadow: 0 0 10px rgba(0,0,0,0.5);
|
||||
}
|
||||
#modal-close:hover { color: #ff6b6b; transform: scale(1.1); transition: 0.2s; }
|
||||
|
||||
@keyframes popUp { from {transform:scale(0.8); opacity:0;} to {transform:scale(1); opacity:1;} }
|
||||
`}</style>
|
||||
|
||||
{/* 팝업창 HTML 구조 */}
|
||||
<div id="image-modal">
|
||||
<span id="modal-close">×</span>
|
||||
<img id="modal-content" />
|
||||
</div>
|
||||
|
||||
{/* 스크립트 */}
|
||||
<script>{`
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const modal = document.getElementById('image-modal');
|
||||
const modalImg = document.getElementById('modal-content');
|
||||
const closeBtn = document.getElementById('modal-close');
|
||||
const images = document.querySelectorAll('.zoomable');
|
||||
|
||||
// 1. 이미지 클릭 시 열기
|
||||
images.forEach(img => {
|
||||
img.addEventListener('click', function(e) {
|
||||
e.preventDefault(); // 혹시 모를 기본 동작 차단
|
||||
modal.style.display = "flex"; // ⭐ block 대신 flex로 열어야 중앙 정렬됨
|
||||
modalImg.src = this.src;
|
||||
modalImg.alt = this.alt;
|
||||
});
|
||||
});
|
||||
|
||||
// 2. 닫기 기능 함수
|
||||
function closeModal() {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
|
||||
// 3. 닫기 버튼 클릭
|
||||
if (closeBtn) closeBtn.onclick = closeModal;
|
||||
|
||||
// 4. 배경 클릭 시 닫기
|
||||
if (modal) {
|
||||
modal.onclick = function(event) {
|
||||
// 이미지를 제외한 배경(div)을 눌렀을 때만 닫기
|
||||
if (event.target === modal) {
|
||||
closeModal();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 5. ESC 키 누르면 닫기 (추가 편의기능)
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.key === "Escape" && modal.style.display === "flex") {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
});
|
||||
`}</script>
|
||||
302
samples/src/content/docs/Civil DX/BIG Room/03. 구성요소 및 설치사례.astro
Normal file
302
samples/src/content/docs/Civil DX/BIG Room/03. 구성요소 및 설치사례.astro
Normal 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>
|
||||
@@ -0,0 +1,120 @@
|
||||
---
|
||||
title: 건설산업 DX의 올바른 이해
|
||||
sidebar:
|
||||
order: 00
|
||||
---
|
||||
|
||||
* **용어의 혼용**
|
||||
|
||||
* 건설산업의 디지털 전환 논의에서 DX(Digital Transformation)와 BIM(Building Information Modeling)이 개념적으로 명확히 정립되지 않은채 혼용되어 사용되고 있음
|
||||
* 이로인해 BIM기술의 도입을 DX의 완성으로 오인하거나, DX를 BIM 기술 도입 수준으로 한정하는 인식 확산
|
||||
<details>
|
||||
<summary style={{cursor: 'pointer', fontWeight: 'bold', color: '#555'}}>혼용 대표 사례</summary>
|
||||
|
||||
<div style={{marginTop: '10px', paddingLeft: '15px', borderLeft: '3px solid #ddd', fontSize: '0.9rem', color: '#666'}}>
|
||||
* **[스마트 건설 활성화 방안(2022.07)]**
|
||||
* 추진과제 : 건설산업 디지털화
|
||||
* 실행과제 : BIM 전면 도입, BIM 전문인력 양성
|
||||
* **[제7차 건설기술진흥 기본계획(2023.12)]**
|
||||
* 추진방향 : 디지털 전환을 통한 스마트 건설 확산
|
||||
* 추진과제 : BIM 도입으로 건설산업 디지털화
|
||||
</div>
|
||||
</details>
|
||||
|
||||
|
||||
* 건설산업의 DX를 올바르게 이해하기 위해 각 용어의 정의, 역할, 상호관계에 대한 체계적 정립 필요
|
||||
|
||||
<br/>
|
||||
---
|
||||
|
||||
|
||||
## 1. 용어 정의
|
||||
|
||||
<br/>
|
||||
|
||||
* **건설산업**
|
||||
* 다양한 시설물을 각 산업마다의 광범위한 기술을 통합 및 융합하여 만들어내는 종합산업
|
||||
* 목적 시설물의 품질 욕구를 충족시키면서 최단기간내에 최소 비용으로 편리하고 안전하며 우수한 성능의 시설물 완성을 목표로 함
|
||||
|
||||
<br/>
|
||||
|
||||
* **BIM(Building Information Modeling) : 디지털 전환을 위한 핵심 기술**
|
||||
* 시설물의 생애주기동안 발생한 모든 정보를 3차원 모델 기반으로 통합·관리하는 정보 관리 도구
|
||||
* 건설 정보와 절차를 표준화된 방식으로 연계하고 디지털 협업이 가능하도록 하는 핵심 인프라 기술
|
||||
<div style={{
|
||||
fontSize: '0.8rem',
|
||||
color: '#999',
|
||||
marginTop: '5px',
|
||||
lineHeight: '1.4',
|
||||
paddingLeft: '0px' }}>
|
||||
*건설산업 BIM 기본지침, 국토교통부, 2020*
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
* **DX(Digital Transformation) : 산업 패러다임의 변화**
|
||||
* 디지털 기술을 기반으로 산업 전반의 업무방식과 가치 창출 구조를 전환하는 과정 및 결과
|
||||
* 단순한 기술 도입이 아닌, 고객 가치와 의사결정 방식의 근본적인 변화로 산업의 새로운 방향을 정립하는 것을 의미함
|
||||
<div style={{
|
||||
fontSize: '0.8rem',
|
||||
color: '#999',
|
||||
marginTop: '5px',
|
||||
lineHeight: '1.4',
|
||||
paddingLeft: '0px' }}>
|
||||
*Digital Transformation, IBM Institute for Business Value, 2011 / What is Digital Transformation?, Agile Elephant, 2015*
|
||||
</div>
|
||||
|
||||
|
||||
---
|
||||
<br/>
|
||||
|
||||
## 2. 용어간 상호관계
|
||||
|
||||
* DX는 BIM과 같은 디지털기술을 기반으로 산업 전반의 프로세스를 혁신하는 상위개념
|
||||
* 건설산업의 DX는 GIS(공간정보), BIM, 디지털 트윈(가상환경)의 기술융합을 통해서만 실현 또는 구현 가능
|
||||
* GIS의 역할 : 지리적 데이터를 공간 분석하여 시각적으로 표현, 위치기반 정보 제공
|
||||
* BIM의 역할 : 형상정보와 내용정보가 포함된 3D모델로, 건설 정보 기반의 Process와 Product를 제공
|
||||
|
||||
<div style={{
|
||||
fontSize: '0.8rem',
|
||||
color: '#999',
|
||||
marginTop: '5px',
|
||||
lineHeight: '1.4',
|
||||
paddingLeft: '0px' }}>
|
||||
*[그림 1] DX와 핵심기술간 상호관계*
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
|
||||
|
||||
<details>
|
||||
<summary style={{cursor: 'pointer', fontWeight: 'bold', color: '#555'}}>DX와 BIM의 구분</summary>
|
||||
|
||||
<div style={{marginTop: '10px', paddingLeft: '15px', borderLeft: '3px solid #ddd', fontSize: '0.9rem', color: '#666'}}>
|
||||
| DX | 구분 | BIM |
|
||||
| :--- | :---: | ---: |
|
||||
| **BIM << DX**<br/>(Engineering + Management 통합) | **범위** | **Only 3D**<br/>(형상 구현 중심) |
|
||||
| **제작 및 운영**(상용 + 전용 40~80개)<br/>[Rhino, Sketchup, Blender..] + [EG-BIM 등] | **S/W** | **모델 제작용 상용 SW**<br/>[Revit, Civil 3D, Navisworks, Autocad] |
|
||||
| **근본적 문제의식을 통한 개선** | **프로세스** | **기존 2D 설계 방식 유지** |
|
||||
| **공학 정보 및 콘텐츠 연계에 집중**<br/>**도면, 수량, 시공계획 등 일식** | **성과품** | **3D 모델 중심**<br/>**기존 성과품 유지** |
|
||||
| **설계/시공 생산성 혁신**(개념의 재정립) | **활용** | **3D 모델에 의한 일반적 이해 향상** |
|
||||
| **전 생애주기 활용 시스템** | **확장성** | **(설계/시공/운영) 분야별 단절** |
|
||||
| **구체화(복잡) - 적극적/구체적 실현 방안** | **수행 개념** | **단순화(오류) - 수동적/집단적 동질화** |
|
||||
| **적극적, 주체적인 기술 접목/융합** | **CIVIL + IT** | **소극적, 상용 기술에 의존** |
|
||||
| **자체 수행 능력 - 지속가능성 확보** | **주체** | **S/W 제작사 판매 정책에 의존** |
|
||||
| **차별화 및 경쟁력 확보, 해외 진출** | **발주처** | **평준화, 국내 중심** |
|
||||
| **IT + CIVIL ENG 220명 운영 + 기술 개발** | **설계사** | **소규모 BIM팀 운영 + 단순교육에 집중** |
|
||||
| **분야 확장 모델 및 시스템** | **시공사** | **국내 토목 소극적/해외 토목증가** |
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<br/>
|
||||
|
||||
---
|
||||
|
||||
:::note[핵심 요약]
|
||||
* BIM은 건설산업의 디지털전환(DX)을 수행하는 과정에서 **가장 기초가 되는 일부분**이다
|
||||
:::
|
||||
|
||||
@@ -0,0 +1,350 @@
|
||||
---
|
||||
title: DX의 시행 목표 및 기대효과
|
||||
sidebar:
|
||||
order: 1
|
||||
---
|
||||
|
||||
import DxEffect from '../../../../components/dx.astro';
|
||||
|
||||
|
||||
## 1. DX의 궁극적 목표
|
||||
|
||||
- **안전과 품질**
|
||||
- 시설물의 요구 성능을 설계-시공-운영 전 과정에서 **디지털로 검증**하여 **안전성 확보**
|
||||
- Copy & Paste로 하향 평준화된 성과물의 **하자 최소화**로 **고품질 성과물 제공**
|
||||
<br/>
|
||||
- **생산성 향상**
|
||||
- Analogue 기반 업무를 Digital 기반 프로세스로 전환하여 **업무 속도·정확성·일관성 향상**
|
||||
- 건설 비용 및 유지관리비 절감, 건설 기간 단축, 인력투입 최소화를 통해 **부가가치 제고**
|
||||
<br/>
|
||||
- **소통과 신뢰**
|
||||
- 성과품과 Solution을 통한 협업 강화로 **의사소통 효율 및 운영·유지관리**의 **편리성 증진**
|
||||
- 3D 모델 및 데이터 기반 검증을 통한 **오류 최소화 및 Claim 예방**으로 **신뢰성 확보**
|
||||
|
||||
<br/>
|
||||
|
||||
## 2. DX 기반 Process 혁신에 따른 주체별 기대효과
|
||||
<br/>
|
||||
### 2.1 업무 수행 과정(Process)의 변화
|
||||
- **생산 방식**: 수작업 의존의 반복 업무에서 벗어나, **SW를 활용한 체계화된 방식**으로 전환
|
||||
- **인지·검토**: 2D 도면 해석 중심에서 **3D 모델 기반의 직관적 인지·검토 체계**로 전환
|
||||
- **협업 구조**: 개별 문서 중심 협업에서 **데이터 통합 기반의 정보 공유·관리 협업 환경**으로 전환
|
||||
- **검증·대응**: 사후 대응 중심의 문제 처리에서 **사전 검증 중심의 예방적 업무 방식**으로 전환
|
||||
<br/>
|
||||
### 2.2 DX 시행 주체별 기대효과
|
||||
|
||||
---
|
||||
/* [dx2.astro] 격식 있는 비교표 스타일 */
|
||||
---
|
||||
|
||||
<div class="table-wrapper">
|
||||
<table class="formal-table">
|
||||
<colgroup>
|
||||
<col width="13%" />
|
||||
<col width="29%" />
|
||||
<col width="29%" />
|
||||
<col width="30%" />
|
||||
</colgroup>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="category-header">구분</th>
|
||||
<th class="stakeholder-header client">발주자</th>
|
||||
<th class="stakeholder-header contractor">시공자</th>
|
||||
<th class="stakeholder-header designer">설계자</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr class="highlight-row">
|
||||
<td class="category-cell"><strong>필요 역량</strong></td>
|
||||
<td class="center-text">실행 의지와 합리적 판단 역량</td>
|
||||
<td class="center-text">기술 투자와 운영 역량</td>
|
||||
<td class="center-text">기술개발 투자에 의한 S/W 역량</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="category-cell"
|
||||
>수작업 의존 <br />→<br /> S/W 기반 체계화</td
|
||||
>
|
||||
<td>
|
||||
<ul>
|
||||
<li>
|
||||
행정서류 자동 생성 및 최소화로 <strong
|
||||
>업무 생산성 향상</strong
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
건설기간 단축, 건설비 및 유지관리비 <strong
|
||||
>총비용 최소화</strong
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>
|
||||
체계적 공정/자원 관리를 통한 <strong
|
||||
>신뢰성 확보 및 생산성 향상</strong
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
Model에서의 도면 추출로 쉽고 정확한
|
||||
<strong>시공상세도 작성 용이</strong>
|
||||
</li>
|
||||
<li>
|
||||
시스템 구축 시, 품질·안전·관리 등에 필요한
|
||||
<strong>도서 작성 용이</strong>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>
|
||||
SW기반 설계프로세스 체계화로 <strong
|
||||
>설계 생산성 향상</strong
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
프로젝트 정보의 일관 유지 및 관리를 통한 <strong
|
||||
>오류 최소화</strong
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
다양한 성과물과 정보물 활용으로 추가 <strong
|
||||
>부가가치 창출</strong
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="category-cell">2D<br />→<br />3D 기반 인지·검토</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>
|
||||
3D 모델을 통한 직관적 시각화로 <strong
|
||||
>품질 향상 및 안전성 제고</strong
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
건설단계별 수행상태에 대한 쉬운 이해로 관리 <strong
|
||||
>편의성 증대</strong
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li style="letter-spacing: -0.9px;">
|
||||
직관적 시각화로 계획시공 등을 관리하여 <strong
|
||||
>안전성 제고 및 품질 향상</strong
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
중간태, 완성태 측량을 통한<br />시·공간적 관리의 <strong
|
||||
>편리성 향상</strong
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>
|
||||
3D 모델을 통한 확인/검증으로 설계
|
||||
<strong>오류 최소화 및 Claim 예방</strong>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="category-cell"
|
||||
>문서 중심<br />→<br />데이터 통합 기반 협업</td
|
||||
>
|
||||
<td>
|
||||
<ul>
|
||||
<li>
|
||||
현장 실무자와 발주자의 원활한 의사소통으로 <strong
|
||||
>오류 최소화</strong
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
디지털 환경 구축을 통한 건설 <strong
|
||||
>정보 통합관리 활용성 강화</strong
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>
|
||||
불필요한 행정서류 감소를 통한 <strong
|
||||
>협업 및 의사소통 효율 향상</strong
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>
|
||||
설계 신뢰도 확보 및 발주자 <br />이익 기여로 <strong
|
||||
>상호신뢰 증진</strong
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="category-cell"
|
||||
>사후 대응<br />→<br />사전 검증 중심 관리</td
|
||||
>
|
||||
<td>
|
||||
<ul>
|
||||
<li>
|
||||
설계변경, 민원, 재작업, 소송 등의 <strong
|
||||
>사전 예방, 최소화</strong
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>
|
||||
설계 및 시공 오류 예방과 원활한 의사 소통으로 <strong
|
||||
>공사 Risk 최소화</strong
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>
|
||||
시공 전 설계검증 강화로<br />
|
||||
<strong>설계 책임 리스크 감소</strong>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* [테이블 기본 설정] */
|
||||
.table-wrapper {
|
||||
overflow-x: auto; /* 모바일에서 표가 잘리지 않고 스크롤되게 함 */
|
||||
margin-top: 1.95rem;
|
||||
font-family: "Pretendard", sans-serif;
|
||||
}
|
||||
|
||||
.formal-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse; /* 선 겹침 방지 */
|
||||
border-top: 1px solid #333; /* 맨 위 굵은 선 */
|
||||
border-bottom: 1px solid #333; /* 맨 아래 선 */
|
||||
background: white;
|
||||
font-size: 0.9rem;
|
||||
table-layout: fixed; /* 칸 너비 고정 */
|
||||
min-width: 800px; /* 표가 너무 찌그러지지 않게 최소 너비 확보 */
|
||||
}
|
||||
|
||||
/* [헤더 스타일] - 주체별 색상 구분 */
|
||||
th {
|
||||
padding: 0.8rem;
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
th:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.category-header {
|
||||
background: rgb(126, 126, 126);
|
||||
} /* 구분: 회색 */
|
||||
.client {
|
||||
background: rgb(126, 126, 126);
|
||||
} /* 발주자: 파랑 */
|
||||
.contractor {
|
||||
background: rgb(126, 126, 126);
|
||||
} /* 시공자: 주황 */
|
||||
.designer {
|
||||
background: rgb(126, 126, 126);
|
||||
} /* 설계자: 초록 */
|
||||
|
||||
/* [셀 스타일] */
|
||||
td {
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #ddd; /* 가로 줄 */
|
||||
border-left: 1px solid #eee; /* 세로 줄 (연하게) */
|
||||
color: #333;
|
||||
vertical-align: middle; /* 세로 중앙 정렬 */
|
||||
word-break: keep-all; /* 단어 끊김 방지 */
|
||||
}
|
||||
td:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
/* [1열: 구분] 스타일 */
|
||||
.category-cell {
|
||||
background: #f9f9f9;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
/* [행: 필요 역량] 강조 스타일 */
|
||||
.highlight-row td {
|
||||
background: #f0f7ff; /* 아주 연한 파란색 배경 */
|
||||
border-bottom: 2px solid #ddd; /* 구분선 강조 */
|
||||
}
|
||||
.highlight-row .center-text {
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* 텍스트 정렬 유틸리티 */
|
||||
.center-text {
|
||||
text-align: center;
|
||||
}
|
||||
.text-gray {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
/* [리스트 스타일] - 깔끔한 점 목록 */
|
||||
ul {
|
||||
margin: 0;
|
||||
padding-left: 1.2rem;
|
||||
}
|
||||
li {
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.6;
|
||||
list-style-type: disc; /* 기본 점 */
|
||||
/* 👇 [핵심] 이 두 줄을 추가/수정 하세요! */
|
||||
letter-spacing: -0.02em; /* 글자 사이를 좁혀서 더 많이 들어가게 함 */
|
||||
word-break: keep-all; /* 단어가 중간에 끊기지 않게 함 */
|
||||
}
|
||||
li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 강조 글씨 */
|
||||
strong {
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
background: rgba(0, 0, 0, 0.05); /* 형광펜 효과 아주 연하게 */
|
||||
padding: 0 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<DxEffect />
|
||||
<br/>
|
||||
<br/>
|
||||
:::note[핵심 요약]
|
||||
* 고품질의 성과품, 비용 절감, 시간 단축, 의사소통에 도움이 안 되면 DX가 아니다.
|
||||
:::
|
||||
<br/>
|
||||
@@ -0,0 +1,89 @@
|
||||
---
|
||||
title: DX 실행 체계 구축 방안
|
||||
sidebar:
|
||||
order: 02
|
||||
---
|
||||
|
||||
## 1. DX 시행을 위한 필수 요건
|
||||
|
||||
<br/>
|
||||
|
||||
* **기술(디지털)**
|
||||
* **Digital 기술(S/W, H/W)과 업무 Process의 통합**
|
||||
* 기존 업무 프로세스에 다양한 디지털 기술을 접목하여 업무 수행
|
||||
* 프로젝트 전반에 걸친 업무 프로세스의 연결 및 조율
|
||||
* **분야별 전문 지식(설계, 시공, 유지관리 등) 보유**
|
||||
* 건설 전 단계에 대한 근본적인 이해와 지식 및 경험
|
||||
* 최신 토목 기술 트랜드 및 표준 기준 등에 대한 높은 지식
|
||||
|
||||
<br/>
|
||||
|
||||
* **사람(역량)**
|
||||
* **혁신적 사고방식과 창의적 문제 해결 능력**
|
||||
* 기존 수행 방식과 관습적 사고 등에 의한 접근 방식 탈피
|
||||
* 디지털 기술을 활용한 창의적, 혁신적인 솔루션 제시
|
||||
* **사용자 중심 사고와 DX 수행 경험**
|
||||
* 사용자의 요구와 기대를 충족시키는 설계 및 구현
|
||||
* 시행착오를 포함한 수행 경험과 사용자 경험(UX)을 반영한 해결 방안 제시
|
||||
|
||||
<br/>
|
||||
|
||||
* **자연(여건)**
|
||||
* **지속적인 투자 및 실행 의지**
|
||||
* 기술 도입 초기 단계에 필요한 인력·기간·비용 등의 대규모 투자
|
||||
* 기술 고도화를 위한 지속적인 개선 및 투자 체계 구축
|
||||
* 변화와 혁신을 통해 부가가치를 창출하려는 실행 의지와 추진력
|
||||
|
||||
<br/>
|
||||
---
|
||||
|
||||
## 2. Process의 혁신과 Product의 변화
|
||||
|
||||
<br/>
|
||||
|
||||
### 2.1 과정(Process)의 혁신
|
||||
|
||||
* **Analogue 기반 업무의 Digital화**
|
||||
|
||||
| As-is [Analogue] | 구분 | To-be [Digital] |
|
||||
| :--- | :---: | :--- |
|
||||
| **개념·문서·행정 절차 중심** | ➠ | **시각화된 목적물, 소통, 투명성 중심** |
|
||||
| **2D 도면, 전문가, 규정** | ➠ | **3D 모델, 참여자, 실체** |
|
||||
| **업무 구분(단절), 책임** | ➠ | **협업(융·복합), 창의성** |
|
||||
|
||||
<br/>
|
||||
|
||||
* **GIS + BIM의 연계**
|
||||
* 지리·지형·지반 등 위치정보(GIS)와 3D모델(형상, 속성정보) 기반의 건설 정보를 포함하는 BIM의 연계를 통한 업무 프로세스의 혁신
|
||||
|
||||
<br/>
|
||||
|
||||
* **사용자 중심의 Solution 제공**
|
||||
* 서로 다른 S/W로 작성되어 분절화된 Analogue 방식의 성과물과 정보물을 연계할 수 있는 설계·시공 Solution 제공
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
### 2.2 결과(Product)의 변화
|
||||
|
||||
* **Copy & Paste로 인해 하향 평준화된 기존 성과물의 품질 향상**
|
||||
* 과거 수작업으로 시행하면서 발생하던 오류 등의 최소화
|
||||
* 정확한 Data에 기반한 계획으로 고품질 성과물 도출
|
||||
|
||||
<br/>
|
||||
|
||||
* **Analogue 기반 도서 외 Digital 기반 정보물 추가**
|
||||
* 기존 성과물(도면, 수량, 계산서, 시방서 등)에 3D 모델, Simulation 등의 Digital 기반 정보물 추가
|
||||
|
||||
<br/>
|
||||
|
||||
* **Solution을 활용한 업무 효율화**
|
||||
* Engn. Solution을 통해 성과물에 관한 이슈를 함께 검토·논의하는 협업 환경 조성
|
||||
* 건설 단계별 정보를 디지털 데이터로 축적하여, 건설 전 과정을 통합관리
|
||||
|
||||
<br/>
|
||||
---
|
||||
|
||||
:::note[핵심 요약]
|
||||
* **DX는 필요한 요건과 체계를 갖춘 후 시행해야만 그 효과를 기대할 수 있다.**
|
||||
:::
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: 수행체계 및 실행 요건
|
||||
sidebar:
|
||||
order: 0
|
||||
---
|
||||
|
||||
🚧 **현재 작성 중인 페이지입니다.**
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: 시공단계 BIM 모델의 활용 방안 (모델기반)
|
||||
sidebar:
|
||||
order: 1
|
||||
---
|
||||
|
||||
🚧 **현재 작성 중인 페이지입니다.**
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: 시공단계 BIM 모델의 활용 방안 (객체기반)
|
||||
sidebar:
|
||||
order: 2
|
||||
---
|
||||
|
||||
🚧 **현재 작성 중인 페이지입니다.**
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: 시공단계 BIM 모델의 활용 방안 (위치기반)
|
||||
sidebar:
|
||||
order: 3
|
||||
---
|
||||
|
||||
🚧 **현재 작성 중인 페이지입니다.**
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: 시공 BIM 도입의 한계
|
||||
sidebar:
|
||||
order: 4
|
||||
---
|
||||
|
||||
🚧 **현재 작성 중인 페이지입니다.**
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: 현장 적용성 강화를 위한 실질적 방안
|
||||
sidebar:
|
||||
order: 5
|
||||
---
|
||||
|
||||
🚧 **현재 작성 중인 페이지입니다.**
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: 설계 방식의 왜곡
|
||||
sidebar:
|
||||
order: 0
|
||||
---
|
||||
|
||||
🚧 **현재 작성 중인 페이지입니다.**
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Engineering SW의 현실
|
||||
sidebar:
|
||||
order: 1
|
||||
---
|
||||
|
||||
🚧 **현재 작성 중인 페이지입니다.**
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: 진정한 DX를 위한 노력
|
||||
sidebar:
|
||||
order: 2
|
||||
---
|
||||
|
||||
🚧 **현재 작성 중인 페이지입니다.**
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Engn.S/W의 기본요소
|
||||
sidebar:
|
||||
order: 0
|
||||
---
|
||||
|
||||
🚧 **현재 작성 중인 페이지입니다.**
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: 상용 S/W의 한계
|
||||
sidebar:
|
||||
order: 1
|
||||
---
|
||||
|
||||
🚧 **현재 작성 중인 페이지입니다.**
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: 전문·전용 S/W의 필요성
|
||||
sidebar:
|
||||
order: 2
|
||||
---
|
||||
|
||||
🚧 **현재 작성 중인 페이지입니다.**
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Solution Engn.S/W 구현
|
||||
sidebar:
|
||||
order: 3
|
||||
---
|
||||
|
||||
🚧 **현재 작성 중인 페이지입니다.**
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Engn.S/W의 개발 현황 및 조건
|
||||
sidebar:
|
||||
order: 4
|
||||
---
|
||||
|
||||
🚧 **현재 작성 중인 페이지입니다.**
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Engn.S/W 개발 패러다임
|
||||
sidebar:
|
||||
order: 5
|
||||
---
|
||||
|
||||
🚧 **현재 작성 중인 페이지입니다.**
|
||||
70
samples/src/content/docs/Civil DX/Feature-Split.mdx
Normal file
70
samples/src/content/docs/Civil DX/Feature-Split.mdx
Normal file
@@ -0,0 +1,70 @@
|
||||
---
|
||||
title: Civil DX - 기능 (2분할)
|
||||
sidebar:
|
||||
order: 3
|
||||
hidden: true
|
||||
---
|
||||
|
||||
# 주요 기능 소개
|
||||
|
||||
{/* 전체를 감싸는 2분할 컨테이너 시작 */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '40px', alignItems: 'start' }}>
|
||||
|
||||
{/* [왼쪽 기둥] 표 영역 */}
|
||||
<div>
|
||||
|
||||
## Solution Engn. S/W
|
||||
|
||||
| 구분 | (Commercial) Package Program | (System) Solution S/W |
|
||||
| :--- | :--- | :--- |
|
||||
| **고객 <br/>(분야)** | **Customer**<br/>- 구매자, 사용자 (상품, 제품 등)<br/>- 이용자 (서비스, 구독 등) | **Client**<br/>- 발주자 (건설, 엔지니어링 등)<br/>- 의뢰자 (법률, 회계, 자문 등) |
|
||||
| **정의** | - **특정 기능/서비스 제공**을 위해 미리 구성<br/>- 사용자가 직접 사용하는 기성 제품화된 S/W | - **주어진 상황/목적에 대한 해결책**<br/>- 고객(의뢰인)의 요구를 충족하는 맞춤형 S/W |
|
||||
| **특징** | - 업무 프로세스 전반이 완성형<br/>- **기성품**, 변경 불가 (API로만 추가)<br/>- 예) ERP 패키지, AutoCAD, Midas | - 특정 목적 수행 (H/W, S/W, 기술)<br/>- **커스터마이징** 가능 (맞춤형)<br/>- 기능/모듈 추가로 시스템 확장 가능 |
|
||||
| **장점** | - 비용 효율적, 즉시 사용 가능<br/>- 검증된 안정성 및 신뢰성<br/>- 설치 및 사용이 간편 | - 비즈니스 문제 해결을 위한 맞춤 개발<br/>- 고객 요구사항 상세 반영<br/>- 유연하고 확장성이 뛰어남 |
|
||||
| **단점** | - 특정 요구사항에 딱 맞지 않음<br/>- 불필요한 기능이 많을 수 있음<br/>- 경쟁 우위 확보가 어려움 | - 개발 비용 및 시간 소요<br/>- 유지보수 비용이 높음<br/>- 초기 안정성/신뢰도가 낮을 수 있음 |
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{/* [오른쪽 기둥] 이미지 및 설명 영역 */}
|
||||
<div>
|
||||
|
||||
{/* 1. 구조도 이미지 */}
|
||||
|
||||
|
||||
{/* 2. 용어 설명 */}
|
||||
<div style={{ margin: '20px 0' }}>
|
||||
|
||||
✅ **System Program**
|
||||
H/W와 응용 프로그램을 연결하며, 기본 시스템 운영 지원 (OS, KERNEL 등)
|
||||
|
||||
✅ **Expert System**
|
||||
토목 분야 Project 별 성과 제작 / 생산할 수 있는 전용 S/W (설계, 공정관리 시스템)
|
||||
|
||||
✅ **Firmware**
|
||||
H/W에 내장되어 작동을 제어하고 S/W의 통신 지원
|
||||
|
||||
✅ **API (Application Program Interface)**
|
||||
응용 프로그램 간 상호 작용을 가능하게 하는 인터페이스
|
||||
|
||||
</div>
|
||||
|
||||
{/* 3. 피라미드 이미지 */}
|
||||
|
||||
|
||||
{/* 4. 특징 박스 */}
|
||||
<div style={{ backgroundColor: '#e3f2fd', padding: '20px', borderRadius: '10px', marginTop: '20px' }}>
|
||||
|
||||
**하나의 S/W에서 협업, 정보확인, 현장상황 반영이 가능합니다.**
|
||||
|
||||
1. **쉽고, 편리한 User 중심**
|
||||
2. **협업 및 의사소통 강화**
|
||||
3. **Project별 맞춤형 생산**
|
||||
4. **시공 현장상황 반영 가능**
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{/* 2분할 컨테이너 끝 */}
|
||||
300
samples/src/content/docs/Civil DX/Solution Engn SW 슬라이드.mdx
Normal file
300
samples/src/content/docs/Civil DX/Solution Engn SW 슬라이드.mdx
Normal file
@@ -0,0 +1,300 @@
|
||||
---
|
||||
title: Solution Engn. S/W(슬라이드)
|
||||
sidebar:
|
||||
order: 2
|
||||
hidden: true
|
||||
|
||||
---
|
||||
|
||||
{/* 스타일 커스텀: 100% 폭 사용 및 최적화된 레이아웃 */}
|
||||
<style>{`
|
||||
/* 1. 기본 폭 제한 해제 (화면 꽉 채우기) */
|
||||
:root { --sl-content-width: 100% !important; }
|
||||
.sl-container { max-width: 100% !important; padding: 0 !important; }
|
||||
.sl-markdown-content { max-width: 100% !important; padding-top: 0 !important; }
|
||||
.sl-markdown-content > h1 { display: none; }
|
||||
|
||||
/* 2. 전체 레이아웃 (Grid: 상단 - 본문 - 하단) */
|
||||
.slide-layout {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
gap: 15px;
|
||||
height: calc(100vh - 70px); /* 헤더 제외 높이 */
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* 3. 본문 2분할 (좌: 표 / 우: 콘텐츠) */
|
||||
/* 수정: 오른쪽 영역을 더 넓게 잡아서(1.2fr) 이미지 공간 확보 */
|
||||
.content-split {
|
||||
display: grid;
|
||||
grid-template-columns: 0.9fr 1.1fr;
|
||||
gap: 25px;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* [좌측 패널] 테이블 영역 */
|
||||
.left-panel {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||
height: 100%;
|
||||
}
|
||||
.table-scroll {
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
.custom-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.85rem; /* 글자 크기 유지 */
|
||||
}
|
||||
.custom-table th {
|
||||
padding: 12px 6px;
|
||||
border: 1px solid #ccc;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background-color: #f1f3f5;
|
||||
}
|
||||
.custom-table td {
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
vertical-align: middle;
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
word-break: keep-all;
|
||||
}
|
||||
.row-header { font-weight: 700; text-align: center; background: #fafafa; }
|
||||
|
||||
/* [우측 패널] 상하 배치 */
|
||||
.right-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding-right: 5px; /* 스크롤바 여백 */
|
||||
}
|
||||
|
||||
/* 우측 상단: 세로 배치 (이미지 큼직하게 ↓ 텍스트) */
|
||||
.top-section {
|
||||
background: #fff;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
}
|
||||
.top-section img {
|
||||
max-height: 200px; /* 이미지 높이 대폭 확대 */
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border: 1px solid #eee;
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 우측 하단: 가로 배치 (이미지 → 텍스트) */
|
||||
.bottom-section {
|
||||
background: #fff;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
flex: 1; /* 남은 공간 채움 */
|
||||
}
|
||||
/* 하단 이미지 크기 확대 */
|
||||
.bottom-section img {
|
||||
width: 180px; /* 너비 고정 (기존 대비 확대) */
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* 텍스트 스타일 */
|
||||
.text-content {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4;
|
||||
color: #444;
|
||||
}
|
||||
.def-item { margin-bottom: 8px; }
|
||||
|
||||
/* [하단] 결론 바 */
|
||||
.footer-bar {
|
||||
background: #f5f5f5;
|
||||
border-left: 5px solid #006064;
|
||||
border-radius: 4px;
|
||||
padding: 15px 20px;
|
||||
font-size: 1rem;
|
||||
color: #333;
|
||||
box-shadow: 0 -2px 5px rgba(0,0,0,0.05);
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div className="slide-layout">
|
||||
|
||||
{/* 1. 상단 제목 */}
|
||||
<div style={{ borderBottom: '2px solid #333', paddingBottom: '10px' }}>
|
||||
<h1 style={{ fontSize: '1.8rem', fontWeight: '800', margin: 0, color: '#131313' }}>Solution Engn. S/W</h1>
|
||||
</div>
|
||||
|
||||
{/* 2. 메인 콘텐츠 (좌우 2분할) */}
|
||||
<div className="content-split">
|
||||
|
||||
{/* [왼쪽 패널] 표 (100% 원본 내용) */}
|
||||
<div className="left-panel">
|
||||
<div className="table-scroll">
|
||||
<table className="custom-table">
|
||||
<colgroup>
|
||||
<col width="15%" />
|
||||
<col width="42%" />
|
||||
<col width="43%" />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>구분</th>
|
||||
<th>(Commercial) Package Program</th>
|
||||
<th>(System) Solution S/W</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="row-header">고객 <br/>(분야)</td>
|
||||
<td>
|
||||
<strong>Customer</strong><br/>
|
||||
- 구매자, 사용자 (상품, 제품 등)<br/>
|
||||
- 이용자 (서비스, 구독 등)
|
||||
</td>
|
||||
<td>
|
||||
<strong>Client</strong><br/>
|
||||
- 발주자 (건설, 엔지니어링 등)<br/>
|
||||
- 의뢰자 (법률, 회계, 자문 등)
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="row-header">정의</td>
|
||||
<td>
|
||||
- <strong>특정 기능/서비스 제공</strong>을 위해 미리 구성<br/>
|
||||
- 사용자가 직접 사용하는 기성 제품화된 S/W
|
||||
</td>
|
||||
<td>
|
||||
- <strong>주어진 상황/목적에 대한 해결책</strong><br/>
|
||||
- 고객(의뢰인)의 요구를 충족하는 맞춤형 S/W
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="row-header">특징</td>
|
||||
<td>
|
||||
- 업무 프로세스 전반이 완성형<br/>
|
||||
- <strong>기성품</strong>, 변경 불가 (API로만 추가)<br/>
|
||||
- 예) ERP 패키지, AutoCAD, Midas
|
||||
</td>
|
||||
<td>
|
||||
- 특정 목적 수행 (H/W, S/W, 기술)<br/>
|
||||
- <strong>커스터마이징</strong> 가능 (맞춤형)<br/>
|
||||
- 기능/모듈 추가로 시스템 확장 가능
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="row-header">장점</td>
|
||||
<td>
|
||||
- 비용 효율적, 즉시 사용 가능<br/>
|
||||
- 검증된 안정성 및 신뢰성<br/>
|
||||
- 설치 및 사용이 간편
|
||||
</td>
|
||||
<td>
|
||||
- 비즈니스 문제 해결을 위한 맞춤 개발<br/>
|
||||
- 고객 요구사항 상세 반영<br/>
|
||||
- 유연하고 확장성이 뛰어남
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="row-header">단점</td>
|
||||
<td>
|
||||
- 특정 요구사항에 딱 맞지 않음<br/>
|
||||
- 불필요한 기능이 많을 수 있음<br/>
|
||||
- 경쟁 우위 확보가 어려움
|
||||
</td>
|
||||
<td>
|
||||
- 개발 비용 및 시간 소요<br/>
|
||||
- 유지보수 비용이 높음<br/>
|
||||
- 초기 안정성/신뢰도가 낮을 수 있음
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* [오른쪽 패널] 이미지 및 설명 (원본 내용 유지) */}
|
||||
<div className="right-panel">
|
||||
|
||||
{/* 1. 상단 섹션: 구조도 + 용어설명 (세로 배치) */}
|
||||
<div className="top-section">
|
||||
<img src="/assets/images/structure.png" alt="시스템 구조도 그림" />
|
||||
|
||||
<div className="text-content">
|
||||
<div className="def-item">
|
||||
✅ <strong>System Program</strong><br/>
|
||||
H/W와 응용 프로그램을 연결하며, 기본 시스템 운영 지원 (OS, KERNEL 등)
|
||||
</div>
|
||||
<div className="def-item">
|
||||
✅ <strong>Expert System</strong><br/>
|
||||
토목 분야 Project 별 성과 제작 / 생산할 수 있는 전용 S/W (설계, 공정관리 시스템)
|
||||
</div>
|
||||
<div className="def-item">
|
||||
✅ <strong>Firmware</strong><br/>
|
||||
H/W에 내장되어 작동을 제어하고 S/W의 통신 지원
|
||||
</div>
|
||||
<div className="def-item">
|
||||
✅ <strong>API (Application Program Interface)</strong><br/>
|
||||
응용 프로그램 간 상호 작용을 가능하게 하는 인터페이스
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 2. 하단 섹션: 피라미드 + 특징박스 (가로 배치) */}
|
||||
<div className="bottom-section">
|
||||
{/* 이미지 (크게) */}
|
||||
<img src="/assets/images/pyramid.png" alt="솔루션 특징 피라미드 그림" />
|
||||
|
||||
{/* 텍스트 박스 */}
|
||||
<div style={{ flex: 1, backgroundColor: '#e3f2fd', padding: '15px', borderRadius: '10px' }}>
|
||||
<strong style={{ display:'block', marginBottom:'8px', fontSize:'0.95rem' }}>
|
||||
하나의 S/W에서 협업, 정보확인, 현장상황 반영이 가능합니다.
|
||||
</strong>
|
||||
<ol style={{ margin: 0, paddingLeft: '20px', lineHeight: '1.6', fontSize:'0.9rem' }}>
|
||||
<li><strong>쉽고, 편리한 User 중심</strong></li>
|
||||
<li><strong>협업 및 의사소통 강화</strong></li>
|
||||
<li><strong>Project별 맞춤형 생산</strong></li>
|
||||
<li><strong>시공 현장상황 반영 가능</strong></li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* 3. 하단 결론 바 (원본 내용) */}
|
||||
<div className="footer-bar">
|
||||
<strong>결론:</strong> 엔지니어링 지식과 기술을 통합한 맞춤형 플랫폼인 <strong>Solution Engn. S/W 개발</strong>이 궁극적 목표이다.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
63
samples/src/content/docs/Civil DX/Solution Engn SW.mdx
Normal file
63
samples/src/content/docs/Civil DX/Solution Engn SW.mdx
Normal file
@@ -0,0 +1,63 @@
|
||||
---
|
||||
title: Solution Engn. S/W
|
||||
sidebar:
|
||||
order: 2
|
||||
hidden: true
|
||||
---
|
||||
|
||||
## 패키지 vs 솔루션 S/W 비교
|
||||
|
||||
| 구분 | (Commercial) Package Program | (System) Solution S/W |
|
||||
| :--- | :--- | :--- |
|
||||
| **고객 <br/>(분야)** | **Customer**<br/>- 구매자, 사용자 (상품, 제품 등)<br/>- 이용자 (서비스, 구독 등) | **Client**<br/>- 발주자 (건설, 엔지니어링 등)<br/>- 의뢰자 (법률, 회계, 자문 등) |
|
||||
| **정의** | - **특정 기능/서비스 제공**을 위해 미리 구성<br/>- 사용자가 직접 사용하는 기성 제품화된 S/W | - **주어진 상황/목적에 대한 해결책**<br/>- 고객(의뢰인)의 요구를 충족하는 맞춤형 S/W |
|
||||
| **특징** | - 업무 프로세스 전반이 완성형<br/>- **기성품**, 변경 불가 (API로만 추가)<br/>- 예) ERP 패키지, AutoCAD, Midas | - 특정 목적 수행 (H/W, S/W, 기술)<br/>- **커스터마이징** 가능 (맞춤형)<br/>- 기능/모듈 추가로 시스템 확장 가능 |
|
||||
| **장점** | - 비용 효율적, 즉시 사용 가능<br/>- 검증된 안정성 및 신뢰성<br/>- 설치 및 사용이 간편 | - 비즈니스 문제 해결을 위한 맞춤 개발<br/>- 고객 요구사항 상세 반영<br/>- 유연하고 확장성이 뛰어남 |
|
||||
| **단점** | - 특정 요구사항에 딱 맞지 않음<br/>- 불필요한 기능이 많을 수 있음<br/>- 경쟁 우위 확보가 어려움 | - 개발 비용 및 시간 소요<br/>- 유지보수 비용이 높음<br/>- 초기 안정성/신뢰도가 낮을 수 있음 |
|
||||
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 시스템 구성 요소
|
||||
|
||||
- **System Program**: H/W와 응용 프로그램을 연결하며, 기본 시스템 운영 지원 (OS, KERNEL 등)
|
||||
- **Expert System**: 토목 분야 Project 별 성과 제작 / 생산할 수 있는 전용 S/W (설계, 공정관리 시스템)
|
||||
- **Firmware**: H/W에 내장되어 작동을 제어하고 S/W의 통신 지원
|
||||
- **API (Application Program Interface)**: 응용 프로그램 간 상호 작용을 가능하게 하는 인터페이스
|
||||
|
||||
## 솔루션 특징
|
||||
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div style={{ backgroundColor: '#e3f2fd', padding: '20px', borderRadius: '10px' }}>
|
||||
|
||||
## 협업/생산 포인트
|
||||
|
||||
**하나의 S/W에서 협업, 정보확인, 현장상황 반영이 가능합니다.**
|
||||
|
||||
1. **쉽고, 편리한 User 중심**
|
||||
2. **협업 및 의사소통 강화**
|
||||
3. **Project별 맞춤형 생산**
|
||||
4. **시공 현장상황 반영 가능**
|
||||
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
<div style={{ padding: '20px', backgroundColor: '#f5f5f5', borderLeft: '5px solid #006064', borderRadius: '4px' }}>
|
||||
<h2>결론</h2>
|
||||
엔지니어링 지식과 기술을 통합한 맞춤형 플랫폼인 <strong>Solution Engn. S/W 개발</strong>이 궁극적 목표이다.
|
||||
</div>
|
||||
19
samples/src/content/docs/Civil DX/index.md
Normal file
19
samples/src/content/docs/Civil DX/index.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: Civil DX 소개
|
||||
sidebar:
|
||||
order: 1
|
||||
prev: false
|
||||
children_order:
|
||||
- BIM과 DX의 이해
|
||||
- 국내 건설 DX의 현주소
|
||||
- DX와 SW
|
||||
- Engn. SW
|
||||
- 건설산업 DX의 핵심요소
|
||||
- BIM기반 건설사업관리
|
||||
- BIG Room
|
||||
- "!Solution Engn SW"
|
||||
- "!Solution Engn SW 슬라이드"
|
||||
|
||||
---
|
||||
|
||||
Civil DX 섹션의 메인 페이지입니다.
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: GIS·BIM 복합 시스템 구축
|
||||
sidebar:
|
||||
order: 0
|
||||
---
|
||||
|
||||
🚧 **현재 작성 중인 페이지입니다.**
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: 인프라시설의 3D 정보모델 생성
|
||||
sidebar:
|
||||
order: 1
|
||||
---
|
||||
|
||||
🚧 **현재 작성 중인 페이지입니다.**
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Process 혁신과 Products 개선
|
||||
sidebar:
|
||||
order: 2
|
||||
---
|
||||
|
||||
🚧 **현재 작성 중인 페이지입니다.**
|
||||
@@ -0,0 +1,255 @@
|
||||
---
|
||||
title: 정부 DX정책 추진현황(슬라이드 4:6)
|
||||
sidebar:
|
||||
order: 6
|
||||
tableOfContents: false
|
||||
---
|
||||
|
||||
<style>{`
|
||||
.content-panel, .sl-container, .sl-markdown-content {
|
||||
max-width: 100% !important; padding: 0 !important; margin: 0 !important;
|
||||
}
|
||||
.slide-content ul { padding-left: 20px; margin-top: 5px; }
|
||||
.slide-content li { margin-bottom: 5px; }
|
||||
/* 테이블 스타일 */
|
||||
.custom-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.9rem; }
|
||||
.custom-table th { background: #f1f3f5; border: 1px solid #ddd; padding: 8px; text-align: center; }
|
||||
.custom-table td { border: 1px solid #ddd; padding: 8px; vertical-align: middle; }
|
||||
`}</style>
|
||||
|
||||
<div className="slide-container" style={{
|
||||
height: 'calc(100vh - 140px)', width: '100%', overflow: 'hidden', display: 'flex', flexDirection: 'column', padding: '0 40px'
|
||||
}}>
|
||||
|
||||
{/* 메인 컨테이너 */}
|
||||
<div style={{ flex: '1 1 auto', display: 'flex', gap: '40px', alignItems: 'stretch', marginTop: '10px', marginBottom: '20px' }}>
|
||||
|
||||
|
||||
{/* ================================================================================== */}
|
||||
{/* 🟠 [왼쪽 40%] - 너비는 좁아졌지만 "왼쪽 값" 유지 */}
|
||||
{/* ================================================================================== */}
|
||||
<div className="slide-content" style={{
|
||||
flex: 4,
|
||||
display: 'flex', flexDirection: 'column', justifyContent: 'flex-start',
|
||||
borderRight: '1px solid #e0e0e0', paddingRight: '40px',
|
||||
height: '100%', overflowY: 'auto',
|
||||
|
||||
/* ⭐ 왼쪽은 구분선 영향이 있으므로 "왼쪽 황금비율" 유지 */
|
||||
paddingTop: '5px'
|
||||
}}>
|
||||
|
||||
<h2 style={{
|
||||
fontSize: '1.5rem', fontWeight: 'bold',
|
||||
marginBottom: '15px', borderBottom: '2px solid #333', paddingBottom: '10px',
|
||||
|
||||
/* ⭐ 왼쪽 황금비율 유지 */
|
||||
marginTop: '7px'
|
||||
}}>
|
||||
1. 건설 정책 로드맵 및 목표
|
||||
</h2>
|
||||
|
||||
{/* 내용 */}
|
||||
<div style={{ fontSize: '1rem', lineHeight: '1.6', color: '#333', marginBottom: '-20px' }}>
|
||||
<ul>
|
||||
<li>디지털전환(DX)을 통한 건설산업의 **국가 신성장 동력** 재도약</li>
|
||||
<li>스마트건설 도입 및 디지털전환을 위한 **국가 R&D 및 정책**추진</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style={{ textAlign: 'center', marginBottom: '20px' }}>
|
||||
<img
|
||||
src="/assets/images/04.png"
|
||||
alt="건설산업DX 정책 로드맵"
|
||||
className="zoomable"
|
||||
style={{ maxWidth: '100%', maxHeight: '50vh', objectFit: 'contain', borderRadius: '8px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)' }}
|
||||
/>
|
||||
<p style={{ fontSize: '0.9rem', color: '#666', marginTop: '5px' }}>
|
||||
*[사진 1] 건설산업DX 정책 로드맵*
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 핵심 요약 */}
|
||||
<div style={{ marginTop: '5px', padding: '15px', backgroundColor: '#e7f5ff', borderLeft: '5px solid #0056b3', borderRadius: '4px', fontSize: '1rem' }}>
|
||||
<div style={{ fontWeight: 'bold', marginBottom: '5px', color: '#0056b3' }}>ℹ️ 핵심 요약</div>
|
||||
<ul style={{ margin: 0, paddingLeft: '20px' }}>
|
||||
<li>정부는 건설산업의 디지털 전환을 지속적으로 추진하고 있으며 현재는 디지털화(BIM), 자동화(OCS)를 목표로 삼고있다.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{/* ================================================================================== */}
|
||||
{/* 🟢 [오른쪽 60%] - 너비는 넓어졌지만 "오른쪽 값" 유지 */}
|
||||
{/* ================================================================================== */}
|
||||
<div className="slide-content" style={{
|
||||
flex: 6,
|
||||
display: 'flex', flexDirection: 'column', justifyContent: 'flex-start',
|
||||
paddingLeft: '10px',
|
||||
height: '100%', overflowY: 'auto',
|
||||
|
||||
/* ⭐ 오른쪽은 구분선이 없으므로 "오른쪽 황금비율" 유지 */
|
||||
paddingTop: '0px'
|
||||
}}>
|
||||
|
||||
<h2 style={{
|
||||
fontSize: '1.5rem', fontWeight: 'bold',
|
||||
marginBottom: '0px', borderBottom: '2px solid #333', paddingBottom: '10px',
|
||||
|
||||
/* ⭐ 오른쪽 황금비율 유지 */
|
||||
marginTop: '-3px'
|
||||
}}>
|
||||
2. 건설산업 BIM 기본 지침 [국토교통부, 2020]
|
||||
</h2>
|
||||
|
||||
{/* 내용 */}
|
||||
<div style={{ fontSize: '1rem', lineHeight: '1.6', color: '#333', marginBottom: '20px' }}>
|
||||
<p>
|
||||
**정부 BIM 도입 개요 (건설산업 BIM 기본지침)**
|
||||
* **비전**: 디지털 전환을 통해 건설산업을 국가 신성장 동력으로 재도약
|
||||
* **목표**: 건설산업의 생산성 향상과 품질, 안전 및 친환경의 극대화
|
||||
* **기대 효과**:
|
||||
* **비용/공기**: 건설 비용 감소 및 기간 단축
|
||||
* **품질/안전**: 설계·시공 오류 최소화, 프로젝트 리스크 저감
|
||||
* **협업**: 협업과 의사소통 강화, 건설정보 통합관리
|
||||
</p>
|
||||
|
||||
<h2 style={{
|
||||
fontSize: '1.5rem', fontWeight: 'bold',
|
||||
marginBottom: '0px', borderBottom: '2px solid #333', paddingBottom: '10px',
|
||||
|
||||
/* ⭐ 오른쪽 황금비율 유지 */
|
||||
marginTop: '50px'
|
||||
}}>
|
||||
3. 스마트 건설 활성화 방안 [국토교통부, 2022]
|
||||
</h2>
|
||||
|
||||
{/* 내용 */}
|
||||
<div style={{ fontSize: '1rem', lineHeight: '1.6', color: '#333', marginBottom: '20px' }}>
|
||||
<p>
|
||||
**스마트 건설 활성화 방안 주요내용**
|
||||
| 구분 | 주요 내용 |
|
||||
| :--- | :--- |
|
||||
| **BIM**<br/>(Building Information Modeling) | **건설산업의 자동화, 지능화 등 스마트 건설을 실현하기 위한 기본 도구**<br/>건설정보 기반의 Process와 Products를 제공하여 디지털 전환의 기반을 마련함 |
|
||||
| **OSC**<br/>(Off-Site Construction) | **탈현장 건설 (공장 제작 시공)**<br/>단위부재 또는 유닛(여러 부재가 합쳐진 모듈 등)을 공장에서 사전 제작한 이후, 현장으로 이동하여 레고 블럭처럼 조립하는 방식 |
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ================================================================================== */}
|
||||
{/* 👇 [팝업 기능 최종본] 가림 현상 해결 + 정중앙 정렬 (기존 코드 지우고 붙여넣기) */}
|
||||
{/* ================================================================================== */}
|
||||
|
||||
<style>{`
|
||||
.zoomable { cursor: zoom-in; transition: transform 0.2s; }
|
||||
.zoomable:hover { transform: scale(1.02); }
|
||||
|
||||
/* 팝업 배경 설정 */
|
||||
#image-modal {
|
||||
display: none; /* 평소엔 숨김 */
|
||||
|
||||
/* ⭐ 핵심 1: 정중앙 정렬을 위한 Flexbox 도입 */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
position: fixed;
|
||||
left: 0; top: 0; width: 100%; height: 100%;
|
||||
|
||||
/* ⭐ 핵심 2: 사이트 메뉴바보다 무조건 위에 뜨게 Z-Index를 엄청 높게 설정 */
|
||||
z-index: 2147483647;
|
||||
|
||||
background-color: rgba(0,0,0,0.9); /* 배경을 더 어둡게 */
|
||||
backdrop-filter: blur(5px);
|
||||
padding: 20px; /* 가장자리 여백 확보 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 팝업 이미지 설정 */
|
||||
#modal-content {
|
||||
max-width: 60%;
|
||||
max-height: 95vh;
|
||||
object-fit: contain; /* 비율 유지하며 화면에 딱 맞춤 */
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 30px rgba(0,0,0,0.5);
|
||||
animation: popUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
/* 닫기 버튼 설정 */
|
||||
#modal-close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 30px;
|
||||
color: white;
|
||||
font-size: 50px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
z-index: 2147483648; /* 이미지보다도 더 위에 */
|
||||
line-height: 1;
|
||||
text-shadow: 0 0 10px rgba(0,0,0,0.5);
|
||||
}
|
||||
#modal-close:hover { color: #ff6b6b; transform: scale(1.1); transition: 0.2s; }
|
||||
|
||||
@keyframes popUp { from {transform:scale(0.8); opacity:0;} to {transform:scale(1); opacity:1;} }
|
||||
`}</style>
|
||||
|
||||
{/* 팝업창 HTML 구조 */}
|
||||
<div id="image-modal">
|
||||
<span id="modal-close">×</span>
|
||||
<img id="modal-content" />
|
||||
</div>
|
||||
|
||||
{/* 스크립트 */}
|
||||
<script>{`
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const modal = document.getElementById('image-modal');
|
||||
const modalImg = document.getElementById('modal-content');
|
||||
const closeBtn = document.getElementById('modal-close');
|
||||
const images = document.querySelectorAll('.zoomable');
|
||||
|
||||
// 1. 이미지 클릭 시 열기
|
||||
images.forEach(img => {
|
||||
img.addEventListener('click', function(e) {
|
||||
e.preventDefault(); // 혹시 모를 기본 동작 차단
|
||||
modal.style.display = "flex"; // ⭐ block 대신 flex로 열어야 중앙 정렬됨
|
||||
modalImg.src = this.src;
|
||||
modalImg.alt = this.alt;
|
||||
});
|
||||
});
|
||||
|
||||
// 2. 닫기 기능 함수
|
||||
function closeModal() {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
|
||||
// 3. 닫기 버튼 클릭
|
||||
if (closeBtn) closeBtn.onclick = closeModal;
|
||||
|
||||
// 4. 배경 클릭 시 닫기
|
||||
if (modal) {
|
||||
modal.onclick = function(event) {
|
||||
// 이미지를 제외한 배경(div)을 눌렀을 때만 닫기
|
||||
if (event.target === modal) {
|
||||
closeModal();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 5. ESC 키 누르면 닫기 (추가 편의기능)
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.key === "Escape" && modal.style.display === "flex") {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
});
|
||||
`}</script>
|
||||
285
samples/src/content/docs/Civil DX/국내 건설 DX의 현주소/02. DX의 실태.mdx
Normal file
285
samples/src/content/docs/Civil DX/국내 건설 DX의 현주소/02. DX의 실태.mdx
Normal file
@@ -0,0 +1,285 @@
|
||||
---
|
||||
title: DX도입 배경(슬라이드6:4)
|
||||
sidebar:
|
||||
order: 5
|
||||
tableOfContents: false
|
||||
---
|
||||
|
||||
<style>{`
|
||||
/* 1. 전체 폭 강제 사용 및 패딩 제거 */
|
||||
.content-panel, .sl-container, .sl-markdown-content {
|
||||
max-width: 100% !important; padding: 0 !important; margin: 0 !important;
|
||||
}
|
||||
.padding-vert--lg { padding-top: 0 !important; padding-bottom: 0 !important; }
|
||||
|
||||
/* 2. 리스트 스타일 잡기 */
|
||||
.slide-content ul { padding-left: 20px; margin-top: 10px; }
|
||||
.slide-content li { margin-bottom: 8px; }
|
||||
`}</style>
|
||||
|
||||
{/* 👇 슬라이드 컨테이너: 높이를 화면 크기에서 [제목+여백]만큼 뺀 값으로 자동 계산 */
|
||||
/* calc(100vh - 140px) : 140px은 상단 시스템 제목과 헤더가 차지하는 대략적인 높이입니다. */
|
||||
}
|
||||
<div className="slide-container" style={{
|
||||
height: 'calc(100vh - 140px)',
|
||||
width: '100%',
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
padding: '0 40px'
|
||||
}}>
|
||||
|
||||
{/* 본문 영역 (6:4 분할) */}
|
||||
<div style={{
|
||||
flex: '1 1 auto', /* 남은 공간을 꽉 채움 */
|
||||
display: 'flex',
|
||||
gap: '40px',
|
||||
alignItems: 'stretch', /* ⭐ 핵심: 자식 요소들을 높이 끝까지 강제로 늘림 */
|
||||
marginTop: '10px',
|
||||
marginBottom: '20px'
|
||||
}}>
|
||||
|
||||
{/* 🟢 [왼쪽 60%] */}
|
||||
<div className="slide-content" style={{
|
||||
flex: 6,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start', /* 내용은 중앙 정렬하되 */
|
||||
height: '100%', /* ⭐ 박스 자체는 100% 높이 유지 */
|
||||
borderRight: '1px solid #e0e0e0',
|
||||
paddingRight: '40px'
|
||||
}}>
|
||||
|
||||
<h2 style={{ fontSize: '1.6rem', fontWeight: 'bold', marginBottom: '0px', borderBottom: '1px solid #ddd', paddingBottom: '00px' }}>
|
||||
1. 건설산업의 낮은 생산성
|
||||
</h2>
|
||||
|
||||
<div style={{ fontSize: '1rem', lineHeight: '1.6', color: '#333' }}>
|
||||
<p>
|
||||
* **건설산업** 생산성 성장률은 **1%**, 제조업(**3.6%**) 대비 **심각한 정체** 상태.
|
||||
|
||||
|
||||
* 국내 건설기업의 **노동 생산성**또한 **제조업의 53.2%** 수준에 불과함.
|
||||
|
||||
|
||||
* **건설산업**은 **효율성 혁신 지체**로, 여전히 전통적인 **노동 집약적 생산 방식**에 머물러 있음.
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<h2 style={{ fontSize: '1.6rem', fontWeight: 'bold', marginBottom: '0px', borderBottom: '1px solid #ddd', paddingBottom: '00px' }}>
|
||||
2. 디지털화와 건설산업의 현재
|
||||
</h2>
|
||||
|
||||
<div style={{ fontSize: '1rem', lineHeight: '1.6', color: '#333' }}>
|
||||
<p>
|
||||
* 세계적으로 산업별 **디지털화 수준과 생산성은 정비례**함.
|
||||
|
||||
* 건설산업의 디지털화 지수는 **농업보다도 낮은 최하위권**에 머물러 있음.
|
||||
|
||||
* 디지털 전환을 위한 **노력 부족**과 건설산업에 맞는 **디지털 기술 부족**이 그 원인.
|
||||
|
||||
* 디지털 기술이 발전한 현재, 생산성 혁신을 위해 **건설산업 전반의 디지털 전환(DX)** 이 필요.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{/* ================= [핵심 요약] 박스 ================= */}
|
||||
<div style={{
|
||||
marginTop: '30px', /* 위쪽 내용과 간격 */
|
||||
padding: '20px', /* 박스 내부 여백 */
|
||||
backgroundColor: '#f6f8fa', /* 연한 회색 배경 (취향에 따라 #e6f7ff 등 변경 가능) */
|
||||
borderLeft: '5px solid #0056b3', /* 왼쪽 굵은 파란 선 */
|
||||
borderRadius: '4px', /* 모서리 둥글게 */
|
||||
fontSize: '1rem'
|
||||
}}>
|
||||
{/* 제목 부분 */}
|
||||
<div style={{ fontWeight: 'bold', marginBottom: '10px', color: '#0056b3' }}>
|
||||
핵심 요약
|
||||
</div>
|
||||
|
||||
{/* 내용 부분 */}
|
||||
<ul style={{ margin: 0, paddingLeft: '20px' }}>
|
||||
<li>
|
||||
건설산업은 디지털전환을 통해 <strong>Process의 혁신</strong>과
|
||||
<strong> Products의 변화</strong>를 일으켜야 한다.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* 🟠 [오른쪽 40%] */}
|
||||
<div style={{
|
||||
flex: 4,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'left',
|
||||
paddingLeft: '10px',
|
||||
height: '100%'
|
||||
}}>
|
||||
|
||||
|
||||
{/* 👇 주석 없이 깔끔한 이미지 태그 */}
|
||||
<img
|
||||
src="/assets/images/그림4.png"
|
||||
alt="건설산업 생산성 추이"
|
||||
className="zoomable"
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
maxHeight: '40vh',
|
||||
objectFit: 'contain',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
|
||||
marginBottom: '0px'
|
||||
}}
|
||||
/>
|
||||
|
||||
<p style={{ fontSize: '0.9rem', textAlign: 'center', color: '#666', marginTop: '0' }}>
|
||||
*[그림 1] 국내외 건설산업 생산성 추이 (출처: McKinsey / 한국은행)*<br/>
|
||||
</p>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
|
||||
|
||||
{/* 👇 주석 없이 깔끔한 이미지 태그 */}
|
||||
<img
|
||||
src="/assets/images/그림3.png"
|
||||
alt="건설산업 생산성 추이"
|
||||
className="zoomable"
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
maxHeight: '40vh',
|
||||
objectFit: 'contain',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
|
||||
marginBottom: '0px'
|
||||
}}
|
||||
/>
|
||||
|
||||
<p style={{ fontSize: '0.9rem', textAlign: 'center', color: '#666', marginTop: '0' }}>
|
||||
*[그림 2] 산업별 디지털화 지수 비교 (출처: McKinsey 보고서, 2018)*<br/>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* ================================================================================== */}
|
||||
{/* 👇 [팝업 기능 최종본] 가림 현상 해결 + 정중앙 정렬 (기존 코드 지우고 붙여넣기) */}
|
||||
{/* ================================================================================== */}
|
||||
|
||||
<style>{`
|
||||
.zoomable { cursor: zoom-in; transition: transform 0.2s; }
|
||||
.zoomable:hover { transform: scale(1.02); }
|
||||
|
||||
/* 팝업 배경 설정 */
|
||||
#image-modal {
|
||||
display: none; /* 평소엔 숨김 */
|
||||
|
||||
/* ⭐ 핵심 1: 정중앙 정렬을 위한 Flexbox 도입 */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
position: fixed;
|
||||
left: 0; top: 0; width: 100%; height: 100%;
|
||||
|
||||
/* ⭐ 핵심 2: 사이트 메뉴바보다 무조건 위에 뜨게 Z-Index를 엄청 높게 설정 */
|
||||
z-index: 2147483647;
|
||||
|
||||
background-color: rgba(0,0,0,0.9); /* 배경을 더 어둡게 */
|
||||
backdrop-filter: blur(5px);
|
||||
padding: 20px; /* 가장자리 여백 확보 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 팝업 이미지 설정 */
|
||||
#modal-content {
|
||||
max-width: 60%;
|
||||
max-height: 95vh;
|
||||
object-fit: contain; /* 비율 유지하며 화면에 딱 맞춤 */
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 30px rgba(0,0,0,0.5);
|
||||
animation: popUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
/* 닫기 버튼 설정 */
|
||||
#modal-close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 30px;
|
||||
color: white;
|
||||
font-size: 50px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
z-index: 2147483648; /* 이미지보다도 더 위에 */
|
||||
line-height: 1;
|
||||
text-shadow: 0 0 10px rgba(0,0,0,0.5);
|
||||
}
|
||||
#modal-close:hover { color: #ff6b6b; transform: scale(1.1); transition: 0.2s; }
|
||||
|
||||
@keyframes popUp { from {transform:scale(0.8); opacity:0;} to {transform:scale(1); opacity:1;} }
|
||||
`}</style>
|
||||
|
||||
{/* 팝업창 HTML 구조 */}
|
||||
<div id="image-modal">
|
||||
<span id="modal-close">×</span>
|
||||
<img id="modal-content" />
|
||||
</div>
|
||||
|
||||
{/* 스크립트 */}
|
||||
<script>{`
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const modal = document.getElementById('image-modal');
|
||||
const modalImg = document.getElementById('modal-content');
|
||||
const closeBtn = document.getElementById('modal-close');
|
||||
const images = document.querySelectorAll('.zoomable');
|
||||
|
||||
// 1. 이미지 클릭 시 열기
|
||||
images.forEach(img => {
|
||||
img.addEventListener('click', function(e) {
|
||||
e.preventDefault(); // 혹시 모를 기본 동작 차단
|
||||
modal.style.display = "flex"; // ⭐ block 대신 flex로 열어야 중앙 정렬됨
|
||||
modalImg.src = this.src;
|
||||
modalImg.alt = this.alt;
|
||||
});
|
||||
});
|
||||
|
||||
// 2. 닫기 기능 함수
|
||||
function closeModal() {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
|
||||
// 3. 닫기 버튼 클릭
|
||||
if (closeBtn) closeBtn.onclick = closeModal;
|
||||
|
||||
// 4. 배경 클릭 시 닫기
|
||||
if (modal) {
|
||||
modal.onclick = function(event) {
|
||||
// 이미지를 제외한 배경(div)을 눌렀을 때만 닫기
|
||||
if (event.target === modal) {
|
||||
closeModal();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 5. ESC 키 누르면 닫기 (추가 편의기능)
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.key === "Escape" && modal.style.display === "flex") {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
});
|
||||
`}</script>
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: 글로벌 기준의 관점에서 바라본 국내 엔지니어링
|
||||
sidebar:
|
||||
order: 2
|
||||
---
|
||||
|
||||
🚧 **현재 작성 중인 페이지입니다.**
|
||||
165
samples/src/content/docs/guides/getting-started.md
Normal file
165
samples/src/content/docs/guides/getting-started.md
Normal file
@@ -0,0 +1,165 @@
|
||||
---
|
||||
title: 콘텐츠 작성 표준 가이드
|
||||
description: Civil Engineering Lab 콘텐츠 작성 표준 가이드
|
||||
sidebar:
|
||||
order: 1
|
||||
prev: false
|
||||
next: false
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
|
||||
본 문서는 **Civil Engineering Lab**의 자료를 작성할 때 준수해야 할 **기능적 규칙**과 **내용 작성 가이드**를 정의합니다. 모든 작성자는 이 기준을 따라 문서를 작성해 주시기 바랍니다.
|
||||
|
||||
---
|
||||
|
||||
## 1. 디렉토리
|
||||
|
||||
|
||||
### C.E.L 구조에 대한 내용(상단탭/우측 카테고리/서브카테고리)
|
||||
|
||||
---
|
||||
|
||||
## 2. 본문 구조 및 목차
|
||||
|
||||
본문의 구조는 **헤더(Headings)** 태그(`##`)를 통해 결정됩니다. 헤더를 올바르게 작성해야 **우측 목차**가 자동으로 생성되어 열람자가 내용을 쉽게 파악할 수 있습니다.
|
||||
|
||||
### 2.1 문서 설정
|
||||
|
||||
문서의 **가장 첫 줄**에는 반드시 페이지의 정보를 담은 프론트매터(Frontmatter)를 작성해야 합니다.
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: 페이지 제목 # 화면 최상단 및 좌측 메뉴에 표시
|
||||
sidebar:
|
||||
order: 10 # 좌측 메뉴 순서 (숫자가 낮은 순서대로 표시됨)
|
||||
---
|
||||
```
|
||||
<br/>
|
||||
### 2.2 제목 및 목차 계층 구조
|
||||
|
||||
우측 목차(On this page)는 **H2(`##`)부터 H3(`###`)까지** 수집하여 표시합니다. 문서의 구조를 쉽게 파악할 수 있도록 **번호 매기기**를 권장하며, 각 헤더의 역할과 목차 표시 여부는 아래와 같습니다.
|
||||
|
||||
| 마크다운 | 레벨 | 번호 규칙 | 목차 표시 | 역할 |
|
||||
| :--- | :--- | :--- | :---: | :--- |
|
||||
| `#` | **H1** | (사용 금지) | **X (미표시)** | **문서 제목** (Frontmatter `title`로 대체) |
|
||||
| `##` | **H2** | **1.**, **2.** | **O (1단계)** | **대주제** (가장 큰 챕터) |
|
||||
| `###` | **H3** | **1.1.**, **1.2.** | **O (2단계)** | **중주제** (하위 섹션) |
|
||||
| `####` | **H4** | **1.1.1.** | **O (3단계)** | **소주제** (본문 내 상세 설명용) |
|
||||
|
||||
|
||||
:::danger[작성 금지 사항]
|
||||
1. **`#` (H1) 사용 금지**: 페이지 제목은 자동으로 생성되므로 본문에 쓰지 않습니다.
|
||||
2. **단계 건너뛰기 금지**: `##`(1.) 없이 바로 `###`(1.1.)을 쓰면 목차 구조가 깨집니다.
|
||||
:::
|
||||
|
||||
<br/>
|
||||
**제목 구조 예시**
|
||||
```markdown
|
||||
## 1. DX에 대한 인식 (H2)
|
||||
|
||||
### 1.1 국내 인식 (H3)
|
||||
|
||||
#### 1.1.1 발주처 (H4)
|
||||
|
||||
```
|
||||
|
||||
<br/>
|
||||
### 2.3 문단 및 줄 바꿈
|
||||
|
||||
마크다운에서는 엔터 키 한 번으로는 줄이 바뀌지 않습니다. 상황에 따라 아래 두 가지 방법을 구분해서 사용하세요.
|
||||
|
||||
* **문단 나누기** : 내용의 호흡이 바뀔 때는 **빈 줄(Enter 2번)** 을 넣어 확실하게 띄웁니다.
|
||||
* **단순 줄 바꾸기** : 같은 문단 안에서 줄만 바꿀 때는 문장 끝에 **공백 2칸(Space bar)** 을 입력합니다.
|
||||
<br/>
|
||||
**문단 바꿈 작성 예시**
|
||||
```markdown
|
||||
1. 엔터를 한 번만 쳤을 때 (줄바꿈 X)
|
||||
윗줄 내용입니다.
|
||||
아랫줄 내용입니다.
|
||||
-> 결과: 한 줄로 쭉 이어져서 나옵니다.
|
||||
|
||||
2. 문단을 나눌 때 (Enter 2번)
|
||||
윗줄 내용입니다.
|
||||
|
||||
아랫줄 내용입니다.
|
||||
-> 결과: 위아래 간격이 넓게 벌어집니다.
|
||||
```
|
||||
<br/>
|
||||
**줄바꿈 작성 예시**
|
||||
```markdown
|
||||
1. 줄만 바꿀 때 (Space 2번)
|
||||
윗줄 내용입니다. (여기 뒤에 공백 2칸 있음)
|
||||
아랫줄 내용입니다.
|
||||
-> 결과: 간격 없이 바로 아랫줄로 내려갑니다.
|
||||
```
|
||||
<br/>
|
||||
### 2.4 목록
|
||||
내용을 나열할 때는 기호나 숫자를 사용하여 가독성을 높일 수 있습니다.
|
||||
|
||||
- 순서 없는 목록 : - (하이픈) 또는`*`(별표)를 사용합니다.
|
||||
- 순서 있는 목록 : `1.`과 같이 숫자와 점을 사용합니다.(제목과 달리 본문 크기로 적용됩니다.)
|
||||
- 하위 목록(들여쓰기) : `Tab`키를 눌러 들여쓰기 합니다.
|
||||
|
||||
<br/>
|
||||
**[목록 작성 예시]**
|
||||
```markdown
|
||||
1. 주요 공정 (Space 2번)
|
||||
- (Tab) 터파기
|
||||
- (Tab) 기초 타설
|
||||
```
|
||||
<br/>
|
||||
### 2.4 주제 구분
|
||||
내용의 흐름이 크게 바뀌거나 섹션을 시각적으로 분리할 때 사용합니다.
|
||||
|
||||
* **사용법**: 빈 줄에 하이픈 3개(`---`)를 입력합니다.
|
||||
* **사용처**: `##`등 내용이 바뀔 때 사용합니다 `---`이후에 `<br/>`을 넣어 주제간 공백을 둡니다.
|
||||
* **주의사항**: 위아래로 **빈 줄**을 두어야 선이 깔끔하게 그려집니다.
|
||||
|
||||
#### 📝 작성 예시
|
||||
|
||||
```markdown
|
||||
이전 주제에 대한 설명이 끝났습니다.
|
||||
|
||||
---
|
||||
(가로선이 생기며 내용이 분리됩니다)
|
||||
|
||||
여기서부터는 새로운 주제입니다.
|
||||
|
||||
---
|
||||
```
|
||||
---
|
||||
<br/>
|
||||
|
||||
## 3. 시각 자료 및 수식
|
||||
|
||||
### 이미지, 링크, 표, 수식 등에 대한 설명
|
||||
|
||||
#### Math / KaTeX 사용법
|
||||
|
||||
- 인라인 수식: $E = mc^2$
|
||||
- 블록 수식:
|
||||
|
||||
$$
|
||||
\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}
|
||||
$$
|
||||
|
||||
복잡한 매크로나 패키지는 KaTeX에서 지원되지 않을 수 있으니, 렌더링이 깨지면 대체 표기나 단순화된 수식을 권장합니다.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 4. 강조 및 확장 컴포넌트
|
||||
|
||||
### 안내 박스, 카드, 아코디언 등 작성 기능에 대한 설명
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 5. 문체 및 용어
|
||||
|
||||
### 작성 표준, 용어 표기 원칙, 특수문자 기호 사용 규칙 등
|
||||
|
||||
|
||||
34
samples/src/content/docs/guides/numbered-headings.md
Normal file
34
samples/src/content/docs/guides/numbered-headings.md
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: Numbered Headings 테스트 문서
|
||||
description: numberedHeadings 동작을 검증하기 위한 테스트 픽스처 문서
|
||||
sidebar:
|
||||
order: 3
|
||||
numberedHeadings: true
|
||||
---
|
||||
|
||||
## 개요
|
||||
|
||||
이 문서는 E2E 테스트에서 본문 헤딩 번호와 TOC 번호 노출을 검증하기 위한 기준 문서입니다.
|
||||
|
||||
## 사용법
|
||||
|
||||
### 프론트매터 설정
|
||||
|
||||
문서 frontmatter에 `numberedHeadings: true`를 추가하면 H2~H4 헤딩에 번호가 부여됩니다.
|
||||
|
||||
### 번호 규칙
|
||||
|
||||
H2는 `1.`, `2.` 형식으로 증가하고 하위 헤딩은 상위 번호를 이어받아 계층적으로 증가합니다.
|
||||
|
||||
#### 깊이 리셋 규칙
|
||||
|
||||
새로운 H2가 시작되면 H3/H4 카운터는 초기화됩니다.
|
||||
|
||||
## 운영 팁
|
||||
|
||||
테스트에서 번호 문자열을 하드코딩할 때는 실제 문서 구조 변경과 함께 항상 갱신해야 합니다.
|
||||
|
||||
## 검토 체크리스트
|
||||
|
||||
- 본문 H2~H4에 `data-heading-number` 속성이 적용되는지 확인합니다.
|
||||
- TOC에 동일한 계층 번호가 표시되는지 확인합니다.
|
||||
60
samples/src/content/docs/guides/slug-usage.md
Normal file
60
samples/src/content/docs/guides/slug-usage.md
Normal file
@@ -0,0 +1,60 @@
|
||||
---
|
||||
title: Slug 설정 및 사용 방법
|
||||
description: 문서의 URL 경로(Slug)를 설정하고 사용하는 방법에 대한 가이드입니다.
|
||||
slug: guides/slug-usage
|
||||
---
|
||||
|
||||
# Slug 설정 및 사용 방법
|
||||
|
||||
이 문서는 Starlight 프로젝트에서 문서의 URL 경로인 Slug를 설정하고 관리하는 방법을 설명합니다.
|
||||
|
||||
## 1. 개요
|
||||
|
||||
Slug는 문서가 웹사이트에서 접근 가능한 URL의 경로를 의미합니다. 예를 들어, `https://example.com/guides/slug-usage`에서 `guides/slug-usage`가 Slug에 해당합니다.
|
||||
|
||||
본 프로젝트에서는 두 가지 방식으로 Slug를 생성합니다:
|
||||
1. **자동 생성 (기본값):** 파일명과 폴더 구조를 기반으로 자동으로 생성됩니다.
|
||||
2. **수동 설정 (Frontmatter):** 문서의 상단(Frontmatter)에 명시적으로 지정하여 사용합니다.
|
||||
|
||||
## 2. 자동 Slug 생성 규칙
|
||||
|
||||
프로젝트 설정(`astro.config.mjs`)에 포함된 플러그인이 파일 저장 시 자동으로 Slug를 계산하여 주입합니다.
|
||||
|
||||
* **변환 규칙:**
|
||||
* 파일명의 확장자(`.md`, `.mdx`)는 제거됩니다.
|
||||
* 숫자 접두사(예: `01. `, `02-`)는 정렬 용도이므로 URL에서 제외됩니다.
|
||||
* 공백, 점(.), 특수문자는 하이픈(`-`)으로 변환되거나 제거됩니다.
|
||||
* 모든 문자는 소문자로 변환됩니다.
|
||||
|
||||
* **예시:**
|
||||
* 파일 경로: `src/content/docs/Civil DX/01. 소개.md`
|
||||
* 자동 생성 Slug: `civil-dx/소개`
|
||||
|
||||
## 3. 수동으로 Slug 설정하기
|
||||
|
||||
특정 URL을 사용하고 싶다면 문서 상단의 Frontmatter 영역에 `slug` 속성을 직접 작성하면 됩니다.
|
||||
|
||||
```md
|
||||
---
|
||||
title: 나의 문서 제목
|
||||
slug: my-custom-url-path
|
||||
---
|
||||
```
|
||||
|
||||
위와 같이 설정하면 파일의 위치나 이름과 관계없이 `https://도메인/my-custom-url-path`로 접근하게 됩니다.
|
||||
|
||||
> **주의:** 자동 생성 플러그인은 `slug` 필드가 이미 존재하면 덮어쓰지 않습니다. 수동으로 설정한 값이 우선순위를 가집니다.
|
||||
|
||||
## 4. 링크 사용 방법
|
||||
|
||||
다른 문서에서 링크를 걸 때는 설정된 Slug를 절대 경로로 사용하세요.
|
||||
|
||||
```md
|
||||
[문서 바로가기](/civil-dx/소개)
|
||||
[커스텀 문서](/my-custom-url-path)
|
||||
```
|
||||
|
||||
## 5. 문제 해결
|
||||
|
||||
* **404 오류:** 링크한 Slug가 정확한지 확인하세요. 자동 생성된 Slug가 예상과 다를 수 있으므로, 해당 MD 파일을 열어 Frontmatter에 주입된 `slug` 값을 확인하는 것이 좋습니다.
|
||||
* **Slug 중복:** 서로 다른 파일이 동일한 Slug를 가지면 빌드 오류가 발생할 수 있습니다. 수동 설정 시 고유한 값을 사용하세요.
|
||||
492
samples/src/content/docs/guides/가이드/00. 작성 가이드.mdx
Normal file
492
samples/src/content/docs/guides/가이드/00. 작성 가이드.mdx
Normal file
@@ -0,0 +1,492 @@
|
||||
---
|
||||
title: 콘텐츠 작성 표준 가이드
|
||||
sidebar:
|
||||
order: 0
|
||||
---
|
||||
|
||||
|
||||
본 문서는 **Civil Engineering Lab**의 자료를 작성할 때 준수해야 할 **기능적 규칙**과 **내용 작성 가이드**를 정의합니다. 모든 작성자는 이 기준을 따라 문서를 작성해 주시기 바랍니다.
|
||||
|
||||
---
|
||||
|
||||
## 1. 개요 및 작성 표준
|
||||
**C.E.L**의 기본 구조 및 통일된 콘텐츠를 만들기 위해 콘텐츠 작성시 지켜야 하는 사항을 설명합니다.
|
||||
|
||||
### 1.1 디렉토리 구조 및 파일명
|
||||
|
||||
C.E.L은 폴더 구조가 곧 **카테고리**가 되는 방식을 따릅니다.
|
||||
|
||||
**폴더 구조도**
|
||||
```text
|
||||
src/
|
||||
├── assets/
|
||||
│ └── images/ # [이미지 저장소]
|
||||
│
|
||||
└── content/
|
||||
└── docs/ # [문서 저장소] .mdx 파일은 여기에 위치합니다
|
||||
├── 작성 가이드.mdx
|
||||
├── Civil DX/ # [상위 탭] 콘텐츠를 구분하는 가장 큰 범주입니다.
|
||||
│ ├── BIM,DX의 이해/ # 폴더를 만들면 '카테고리'가 됩니다
|
||||
│ │ ├── 01. 개념 정의.mdx # 각 콘텐츠는 파일형태로 작성/저장됩니다.
|
||||
│ │ └── 02. DX의 목표.mdx
|
||||
│ ├── Civil DX 소개/
|
||||
└── 기반기술/
|
||||
```
|
||||
|
||||
**계층별 명명 규칙**
|
||||
|
||||
* **상위 탭 (1단계 폴더)**
|
||||
* `docs/` 바로 아래에 위치하는 폴더입니다.
|
||||
* 사이드바의 가장 큰 탭이 되며, **이름(한글/영문)** 으로만 작성합니다. (번호 X)
|
||||
* 예시: `Civil DX`, `기반기술`
|
||||
|
||||
* **카테고리 (2단계 폴더)**
|
||||
* 상위 탭 아래에 위치하는 폴더입니다.
|
||||
* 관련된 문서들을 묶어주는 그룹 역할을 하며, **이름(한글/영문)** 으로만 작성합니다.
|
||||
* 예시: `BIM,DX의 이해`, `Civil DX 소개`
|
||||
|
||||
* ** 콘텐츠 (파일)**
|
||||
* 실제 내용이 담긴 `.mdx` 파일입니다.
|
||||
* 하나의 파일은 하나의 주제를 다루며, **이름(한글/영문)** 으로만 작성합니다.
|
||||
* 예시: `개념 정의.mdx`, `DX의 목표.mdx`
|
||||
|
||||
<br/>
|
||||
|
||||
### 1.2 문체 및 용어
|
||||
|
||||
콘텐츠의 객관성과 신뢰도를 높이기 위해, 감정을 배제한 **평어체(설명조)** 형식을 사용합니다. 여러 작성자가 작성하더라도 마치 한 사람이 쓴 것처럼 일관성을 유지하는 것이 목표입니다.
|
||||
|
||||
**문체 가이드**
|
||||
|
||||
* **1. 문장 끝맺음 (종결어미)**
|
||||
* 모든 문장은 **'~다', '~한다', '~된다'**로 명확하게 끝맺습니다.
|
||||
* 존댓말(~입니다, ~해요)이나 구어체(~죠, ~네요)는 사용하지 않습니다.
|
||||
* **Bad**: 버튼을 누르면 설정이 완료돼요. / 완료됩니다.
|
||||
* **Good**: 버튼을 눌러 설정을 완료한다.
|
||||
|
||||
* **객관적 서술 (No 추측)**
|
||||
* 개인적인 의견이나 불확실한 추측(~인 것 같다, ~보인다)은 지양합니다.
|
||||
* 근거에 기반하여 단정적인 어조를 사용합니다.
|
||||
* **Bad**: A 방식이 더 효율적인 것 같다.
|
||||
* **Good**: A 방식이 시간 단축 측면에서 더 효율적이다.
|
||||
|
||||
* **간결한 문장**
|
||||
* 한 문장이 2줄을 넘어가지 않도록 짧게 끊어서 작성합니다.
|
||||
|
||||
**용어 표기 원칙**
|
||||
|
||||
* **전문 용어 표기**
|
||||
* 문서에서 처음 등장하는 핵심 용어는 **'한글(영문/약어)'** 형태로 병기합니다.
|
||||
* 이후 반복될 때는 약어만 사용해도 무방합니다.
|
||||
* *예시*: 처음에는 **디지털 전환(DX)** 으로 표기하고, 이후에는 **DX**로 표기.
|
||||
|
||||
* **외래어 표기**
|
||||
* 널리 통용되는 외래어는 한글 표기를 원칙으로 하되, 괄호 안에 원어를 적어 명확히 합니다.
|
||||
* 단, 메뉴명이나 코드 변수는 영문 그대로 작성합니다.
|
||||
* *예시*: **데이터베이스(Database)**, **인터페이스(Interface)**
|
||||
* *예시*: `config.json` 파일, `User` 클래스
|
||||
|
||||
**작성 예시 비교**
|
||||
|
||||
| 구분 | 잘못된 예시 (Bad) ❌ | 올바른 예시 (Good) ✅ |
|
||||
| :--- | :--- | :--- |
|
||||
| **어조** | BIM은 정말 중요한 기술입니다. | BIM은 건설 산업의 핵심 기술이다. |
|
||||
| **지시** | 여기서 저장 버튼을 누르세요. | 저장 버튼을 눌러 변경 사항을 저장한다. |
|
||||
| **용어** | Data를 관리하는 게 중요해요. | 데이터(Data) 관리의 중요성이 강조된다. |
|
||||
|
||||
---
|
||||
|
||||
<br/>
|
||||
|
||||
## 2. 본문 구조 및 목차
|
||||
|
||||
본문의 구조는 **헤더(Headings)** 태그(`##`)를 통해 결정됩니다. 헤더를 올바르게 작성해야 **우측 목차**가 자동으로 생성되어 열람자가 내용을 쉽게 파악할 수 있습니다.
|
||||
|
||||
### 2.1 문서 설정
|
||||
|
||||
문서의 **가장 첫 줄**에는 반드시 페이지의 정보를 담은 프론트매터(Frontmatter)를 작성해야 합니다.
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: 페이지 제목 # 화면 최상단 및 좌측 카테고리에 표시
|
||||
sidebar:
|
||||
order: 10 # 좌측 카테고리 순서 (숫자가 낮은 순서대로 표시됨)
|
||||
---
|
||||
```
|
||||
|
||||
### 2.2 제목 및 목차 계층 구조
|
||||
|
||||
우측 목차(On this page)는 **H2(`##`)부터 H3(`###`)까지** 수집하여 표시합니다. 문서의 구조를 쉽게 파악할 수 있도록 **번호 매기기**를 권장하며, 각 헤더의 역할과 목차 표시 여부는 아래와 같습니다.
|
||||
|
||||
| 마크다운 | 레벨 | 번호 규칙 | 목차 표시 | 역할 |
|
||||
| :--- | :--- | :--- | :---: | :--- |
|
||||
| `#` | **H1** | (사용 금지) | **X (미표시)** | **문서 제목** (Frontmatter `title`로 대체) |
|
||||
| `##` | **H2** | **1**, **2** | **O (1단계)** | **대주제** (가장 큰 챕터) |
|
||||
| `###` | **H3** | **1.1**, **1.2.** | **O (2단계)** | **중주제** (하위 섹션) |
|
||||
| `####` | **H4** | **1.1.1**, **1.1.2** | **O (3단계)** | **소주제** (본문 내 상세 설명용) |
|
||||
|
||||
|
||||
:::danger[작성 금지 사항]
|
||||
1. **`#` (H1) 사용 금지**: 페이지 제목은 자동으로 생성되므로 본문에 쓰지 않습니다.
|
||||
2. **단계 건너뛰기 금지**: `##`(1.) 없이 바로 `###`(1.1.)을 사용하면 목차 구조가 틀어집니다.
|
||||
:::
|
||||
|
||||
<br/>
|
||||
**[제목 구조 예시]**
|
||||
```markdown
|
||||
## 1. DX에 대한 인식 (H2)
|
||||
|
||||
### 1.1 국내 인식 (H3)
|
||||
|
||||
#### 1.1.1 발주처의 인식 (H4)
|
||||
|
||||
```
|
||||
|
||||
|
||||
<br/>
|
||||
### 2.3 문단 및 줄 바꿈
|
||||
|
||||
마크다운으로 콘텐츠 작성시 엔터키 한 번으로는 줄이 바뀌지 않습니다. 상황에 따라 아래 두 가지 방법을 구분해서 사용하세요.
|
||||
|
||||
* **문단 나누기** : 내용의 호흡이 바뀔 때는 **빈 줄(Enter 2번)** 을 넣어 확실하게 띄웁니다.
|
||||
* **단순 줄 바꾸기** : 같은 문단 안에서 줄만 바꿀 때는 문장 끝에 **공백 2칸(Space bar)** 을 입력합니다.
|
||||
<br/>
|
||||
**[문단 바꿈 작성 예시]**
|
||||
```markdown
|
||||
1. 엔터를 한 번만 쳤을 때 (줄바꿈 X)
|
||||
윗줄 내용입니다.
|
||||
아랫줄 내용입니다.
|
||||
-> 결과: 한 줄로 쭉 이어져서 나옵니다.
|
||||
|
||||
2. 문단을 나눌 때 (Enter 2번)
|
||||
윗줄 내용입니다.
|
||||
|
||||
아랫줄 내용입니다.
|
||||
-> 결과: 위아래 간격이 넓게 벌어집니다.
|
||||
```
|
||||
<br/>
|
||||
**[줄바꿈 작성 예시]**
|
||||
```markdown
|
||||
1. 줄만 바꿀 때 (Space 2번)
|
||||
윗줄 내용입니다. (여기 뒤에 공백 2칸 있음)
|
||||
아랫줄 내용입니다.
|
||||
-> 결과: 간격 없이 바로 아랫줄로 내려갑니다.
|
||||
```
|
||||
<br/>
|
||||
### 2.4 목록
|
||||
내용을 나열할 때는 기호나 숫자를 사용하여 가독성을 높일 수 있습니다.
|
||||
|
||||
- 순서 없는 목록 : - (하이픈) 또는`*`(별표)를 사용합니다.
|
||||
- 순서 있는 목록 : `1.`과 같이 숫자와 점을 사용합니다.(제목과 달리 본문 크기로 적용됩니다.)
|
||||
- 하위 목록(들여쓰기) : `Tab`키를 눌러 들여쓰기 합니다.
|
||||
|
||||
<br/>
|
||||
**[목록 작성 예시]**
|
||||
```markdown
|
||||
1. 주요 공정 (Space 2번)
|
||||
- (Tab) 터파기
|
||||
- (Tab) 기초 타설
|
||||
```
|
||||
> **[적용 예시]**
|
||||
> 1. 주요 공정 (Space 2번)
|
||||
> - (Tab) 터파기
|
||||
> - (Tab) 기초 타설
|
||||
<br/>
|
||||
### 2.4 주제 구분
|
||||
내용의 흐름이 크게 바뀌거나 섹션을 시각적으로 분리할 때 사용합니다.
|
||||
|
||||
* **사용법**: 빈 줄에 하이픈 3개(`---`)를 입력합니다.
|
||||
* **사용처**: `##`등 내용이 바뀔 때 사용합니다 `---`이후에 `<br/>`을 넣어 주제간 공백을 둡니다.
|
||||
* **주의사항**: 위아래로 **빈 줄**을 두어야 선이 깔끔하게 그려집니다.
|
||||
|
||||
**[가로선 작성 예시]**
|
||||
|
||||
```markdown
|
||||
이전 주제에 대한 설명이 끝났습니다.
|
||||
|
||||
---
|
||||
(가로선이 생기며 내용이 분리됩니다)
|
||||
|
||||
여기서부터는 새로운 주제입니다.
|
||||
|
||||
---
|
||||
```
|
||||
---
|
||||
<br/>
|
||||
|
||||
|
||||
## 3. 텍스트 서식 및 컴포넌트
|
||||
|
||||
글자의 모양을 꾸미거나(기초), 박스 및 탭 기능(심화)을 사용하여 콘텐츠를 보기 좋게 구성하고 강조하고 싶은 핵심을 쉽게 전달할 수 있습니다.
|
||||
|
||||
### 3.1 기초 텍스트 서식 (Basic Formatting)
|
||||
|
||||
가장 자주 사용되는 글자 강조 규칙입니다. 문장 내에서 중요한 키워드나 용어를 돋보이게 할 때 사용합니다.
|
||||
|
||||
* **굵게 (Bold)**: 별표 2개(`**`)로 감쌉니다. 핵심 키워드를 강조할 때 사용합니다.
|
||||
* **기울임 (Italic)**: 별표 1개(`*`)로 감쌉니다. 용어의 영문 표기나 이미지 캡션에 주로 사용합니다.
|
||||
* **취소선 (Strikethrough)**: 물결표 2개(`~~`)로 감쌉니다. 변경 전 내용을 남겨두거나 삭제됨을 표현할 때 사용합니다.
|
||||
* **인라인 코드 (Inline Code)**: 백틱 1개(`)로 감쌉니다. 문장 중간에 명령어, 파일명, 단축키, 변수명 등을 언급할 때 사용합니다.
|
||||
|
||||
**[작성 예시]**
|
||||
|
||||
```markdown
|
||||
1. **스타일 예시**
|
||||
이것은 **매우 중요한 내용**입니다.
|
||||
이것은 *보조 설명(Comment)*입니다.
|
||||
이것은 ~~삭제된 내용~~입니다.
|
||||
|
||||
2. **인라인 코드 예시**
|
||||
저장하려면 `Ctrl + S` 키를 누르세요.
|
||||
설정 파일은 `config.json`입니다.
|
||||
```
|
||||
> **[적용 예시]**
|
||||
> 1. **스타일 예시**
|
||||
> 이것은 **매우 중요한 내용**입니다.
|
||||
> 이것은 *보조 설명(Comment)* 입니다.
|
||||
> 이것은 ~~삭제된 내용~~입니다.
|
||||
>
|
||||
> 2. **인라인 코드 예시**
|
||||
> 저장하려면 `Ctrl + S` 키를 누르세요.
|
||||
> 설정 파일은 `config.json`입니다.
|
||||
|
||||
<br/>
|
||||
|
||||
### 3.2 인용 및 특수기호
|
||||
|
||||
문단 전체를 인용하거나, 문법 기호를 글자 그대로 표현할 때 사용합니다
|
||||
|
||||
* **인용문**: 문장 맨 앞에 `>`(부등호)를 붙입니다.
|
||||
* **위첨자/아래첨자**: `<sup>`(위), `<sub>`(아래)를 사용해서 단위나 화학식을 표현할 수 있습니다.
|
||||
* **이스케이프**: 마크다운 기호(*,#,[ 등)를 서식 기능 없이 글자 그대로 보여주려면 앞에 역슬래시 `\`를 붙입니다.
|
||||
|
||||
|
||||
|
||||
|
||||
**[작성 예시]**
|
||||
```
|
||||
1. **인용문 예시**
|
||||
> "디지털 전환은 선택이 아닌 필수다."
|
||||
|
||||
2. **첨자 예시**
|
||||
아파트 면적은 84m<sup>2</sup>이고, 물의 성분은 H<sub>2</sub>O입니다.
|
||||
|
||||
3. **이스케이프 예시**
|
||||
별표 기호를 강조 없이 쓰려면 \*\*이렇게\*\* 작성합니다.
|
||||
```
|
||||
|
||||
> **[적용 예시]**
|
||||
> 1. **인용문 예시**
|
||||
> > "디지털 전환은 선택이 아닌 필수다."
|
||||
>
|
||||
>2. **첨자 예시**
|
||||
> 아파트 면적은 84m<sup>2</sup>이고, 물의 성분은 H<sub>2</sub>O입니다.
|
||||
>
|
||||
>3. **이스케이프 예시**
|
||||
> 별표 기호를 강조 없이 쓰려면 \*\*이렇게\*\* 작성합니다.
|
||||
|
||||
<br/>
|
||||
|
||||
### 3.3 텍스트 박스 및 강조
|
||||
|
||||
본문과 구분되는 박스를 만들거나, 문장 중간에 특정 단어를 강조할 때 사용합니다.
|
||||
|
||||
* **한 단어 강조 (Inline)**
|
||||
문장 중간에 짧은 내용을 강조할 때 사용합니다. 숫자 1 옆에 있는 **백틱(`)** 기호 1개로 감쌉니다.
|
||||
* **용도**: 파일명, 메뉴 이름, 키보드 단축키, 강조하고 싶은 짧은 값
|
||||
<br/>
|
||||
* **박스 강조 (Block)**
|
||||
여러 줄의 내용을 박스 안에 담아 보여줄 때 사용합니다. 위아래를 **백틱 3개(` ``` `)** 로 감쌉니다.
|
||||
* **용도**: 파일의 전체 내용, 폴더 구조, 복사해야 할 텍스트 데이터
|
||||
* **제목 달기**: 첫 줄 언어 이름 뒤에 `title="제목"`을 적으면 박스 위에 이름표가 붙습니다.
|
||||
|
||||
**[작성 예시]**
|
||||
|
||||
```markdown
|
||||
1. **한 단어 강조**
|
||||
설정 파일은 `config.txt`에 저장됩니다. 저장하려면 `Ctrl + S`를 누르세요.
|
||||
|
||||
2. **박스 강조**
|
||||
```text title="공사개요.txt"
|
||||
프로젝트명: 교량 건설공사
|
||||
착공일: 2026-01-02
|
||||
담당자: 김토목 과장
|
||||
위치: 서울특별시 ...
|
||||
```
|
||||
|
||||
> **적용 예시**
|
||||
> 1. **한 단어 강조**
|
||||
> 설정 파일은 `config.txt`에 저장됩니다. 저장하려면 `Ctrl + S`를 누르세요.
|
||||
>
|
||||
> 2. **박스 강조**
|
||||
> ```text title="공사개요.txt"
|
||||
> 프로젝트명: 교량 건설공사
|
||||
> 착공일: 2026-01-01
|
||||
> 담당자: 김토목 과장
|
||||
> 위치: 서울특별시 ...
|
||||
> ```
|
||||
|
||||
<br/>
|
||||
|
||||
### 3.4 안내 박스
|
||||
|
||||
글을 읽는 도중 독자의 주의를 환기시키거나, 팁을 줄 때 사용합니다. 별도의 설정 없이 바로 사용할 수 있습니다.
|
||||
|
||||
* **사용법**: 내용의 시작과 끝을 `:::` (콜론 3개)로 감쌉니다.
|
||||
* **종류**: `note`(참고), `tip`(팁), `caution`(주의), `danger`(경고) 4가지가 있습니다.
|
||||
* **제목 설정**: `:::tip[여기에 제목 입력]` 형식으로 대괄호 안에 제목을 변경할 수 있습니다.
|
||||
|
||||
**[작성 예시]**
|
||||
|
||||
```markdown
|
||||
:::note[참고]
|
||||
이 내용은 본문과 직접적인 관련은 없지만 알아두면 좋은 배경지식입니다.
|
||||
:::
|
||||
|
||||
:::tip[작업 팁]
|
||||
작성도중 결과물을 확인하는 습관을 들이세요.
|
||||
:::
|
||||
|
||||
:::caution[주의 사항]
|
||||
파일명을 변경하면 기존에 연결된 링크가 끊어질 수 있습니다.
|
||||
:::
|
||||
|
||||
:::danger[삭제 경고]
|
||||
이 버튼을 누르면 데이터가 영구적으로 삭제되며 복구할 수 없습니다.
|
||||
:::
|
||||
|
||||
```
|
||||
>**적용 예시**
|
||||
>:::note[참고]
|
||||
>이 내용은 본문과 직접적인 관련은 없지만 알아두면 좋은 배경지식입니다.
|
||||
>:::
|
||||
>
|
||||
>:::tip[작업 팁]
|
||||
>작성도중 결과물을 확인하는 습관을 들이세요.
|
||||
>:::
|
||||
>
|
||||
>:::caution[주의 사항]
|
||||
>파일명을 변경하면 기존에 연결된 링크가 끊어질 수 있습니다.
|
||||
>:::
|
||||
>
|
||||
>:::danger[삭제 경고]
|
||||
>이 버튼을 누르면 데이터가 영구적으로 삭제되며 복구할 수 없습니다.
|
||||
>:::
|
||||
|
||||
<br/>
|
||||
|
||||
### 3.5 링크
|
||||
|
||||
문서 간의 연결이나 외부 참고 자료를 명시할 때 사용합니다.
|
||||
|
||||
* **내부 링크 (Internal)**: 같은 사이트 내 다른 문서로 이동할 때는 **상대 경로**(`../`, `./`)를 사용합니다. 파일 확장자(`.mdx`)는 생략 가능합니다.
|
||||
* **외부 링크 (External)**: 다른 웹사이트로 이동할 때는 **전체 URL**(`https://...`)을 입력합니다.
|
||||
|
||||
**작성 예시**
|
||||
|
||||
```markdown
|
||||
* **내부 링크**: [BIM의 정의 보러가기](../01-basic-concept)
|
||||
* **외부 링크**: [건설기술연구원 홈페이지](https://www.kict.re.kr)
|
||||
```
|
||||
**적용 예시**
|
||||
* **내부 링크**: [BIM의 정의 보러가기](../01-basic-concept)
|
||||
* **외부 링크**: [건설기술연구원 홈페이지](https://www.kict.re.kr)
|
||||
|
||||
<br/>
|
||||
---
|
||||
<br/>
|
||||
|
||||
## 4. 시각 자료 및 수식
|
||||
|
||||
콘텐츠 작성시 필요한 이미지, 도표, 수식 등의 작성 규칙을 정의합니다.
|
||||
|
||||
### 4.1 이미지
|
||||
|
||||
모든 이미지 파일은 프로젝트의 `assets/images/` 경로에 저장한 후 불러옵니다.
|
||||
|
||||
* **파일 경로**: `/assets/images/[파일명]`
|
||||
* **캡션**: 이미지 바로 아래 줄에 `기울임꼴`로 설명을 작성하여 캡션처럼 보이게 합니다.
|
||||
|
||||
**작성 예시**
|
||||
|
||||
```markdown
|
||||
|
||||
*<그림 1> BIM 성숙도 4단계 모델*
|
||||
```
|
||||
|
||||
<br/>
|
||||
|
||||
### 4.2 표
|
||||
|
||||
데이터를 행과 열로 정리하여 보여줄 때 사용합니다. 마크다운 표는 **파이프 기호(`|`)**로 칸을 나누고, **하이픈(`-`)**으로 헤더(제목줄)를 구분하여 작성합니다.
|
||||
|
||||
#### 4.2.1 기본 구조 만들기
|
||||
표를 만드는 3단계 순서입니다.
|
||||
|
||||
1. **기둥 세우기**: `|` (Shift + 원화표시/백슬래시) 기호를 사용하여 열을 구분합니다.
|
||||
2. **헤더 구분하기**: 첫 번째 줄(제목) 바로 아래에 `| --- | --- |` 처럼 하이픈을 넣어 제목줄과 본문을 나눕니다.
|
||||
3. **내용 채우기**: 그 아래로 데이터를 입력합니다.
|
||||
|
||||
#### 4.2.2. 정렬 방식 설정
|
||||
두 번째 줄(구분선)에 **콜론(`:`)**을 어디에 찍느냐에 따라 글자 정렬이 달라집니다.
|
||||
|
||||
* **왼쪽 정렬** (기본값): `:---` (콜론을 왼쪽에) → *텍스트에 적합*
|
||||
* **가운데 정렬**: `:---:` (콜론을 양쪽에) → *짧은 단어, 상태 표시에 적합*
|
||||
* **오른쪽 정렬**: `---:` (콜론을 오른쪽에) → *숫자, 금액 데이터에 적합*
|
||||
|
||||
#### 4.2.3 표 안에서 줄바꿈
|
||||
표의 셀 안에서는 엔터키로 줄을 바꿀 수 없습니다. 반드시 **HTML 태그 `<br/>`**를 입력해야 줄이 바뀝니다.
|
||||
|
||||
**작성 예시**
|
||||
|
||||
```markdown
|
||||
| 구분(가운데) | 설명(왼쪽) | 비고(오른쪽) |
|
||||
| :---: | :--- | ---: |
|
||||
| **BIM** | 3차원 형상 정보 중심 | 100% |
|
||||
| **DX** | 데이터 기반 의사결정<br/>(프로세스 혁신) | 50% |
|
||||
|
||||
```
|
||||
> **적용 예시**
|
||||
> | 구분(가운데) | 설명(왼쪽) | 비고(오른쪽) |
|
||||
> | :---: | :--- | ---: |
|
||||
> | **BIM** | 3차원 형상 정보 중심 | 100% |
|
||||
> | **DX** | 데이터 기반 의사결정<br/>(프로세스 혁신) | 50% |
|
||||
|
||||
<br/>
|
||||
|
||||
### 4.3 수식
|
||||
공학 공식이나 변수는 **KaTeX** 문법을 사용하여 표현합니다.
|
||||
|
||||
* **인라인 수식 (Inline)**: 문장 중간에 변수나 짧은 식을 넣을 때는 `$` (달러 기호 1개)로 감쌉니다.
|
||||
* **블록 수식 (Block)**: 별도의 줄에 수식을 크게 강조할 때는 `$$` (달러 기호 2개)로 감쌉니다.
|
||||
|
||||
|
||||
**KaTeX 수식**
|
||||
|
||||
```markdown
|
||||
인라인 수식: $E = mc^2$
|
||||
블록 수식:
|
||||
$$
|
||||
\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}
|
||||
$$
|
||||
```
|
||||
> **적용 예시**
|
||||
> - 인라인 수식: $E = mc^2$
|
||||
> - 블록 수식:
|
||||
>
|
||||
> $$
|
||||
> \int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}
|
||||
> $$
|
||||
|
||||
<br/>
|
||||
|
||||
```
|
||||
복잡한 매크로나 패키지는 KaTeX에서 지원되지 않을 수 있으니,
|
||||
반영 후 오류가 발생하면 대체 표기나 단순화된 수식을 사용하기 바랍니다.
|
||||
```
|
||||
|
||||
:::note[참고]
|
||||
* [**LaTex 문법**](https://katex.org/docs/supported.html)
|
||||
|
||||
:::
|
||||
|
||||
166
samples/src/content/docs/guides/가이드/00. 작성 샘플.mdx
Normal file
166
samples/src/content/docs/guides/가이드/00. 작성 샘플.mdx
Normal file
@@ -0,0 +1,166 @@
|
||||
---
|
||||
title: 작성 샘플
|
||||
sidebar:
|
||||
order: 02
|
||||
---
|
||||
|
||||
이곳에 페이지의 요약(Intro)을 작성한다. 이 문서는 작성 규칙을 준수하여 모든 기능을 포함한 샘플이다. 모든 문장은 평어체(~한다)로 작성한다.
|
||||
|
||||
---
|
||||
<br/>
|
||||
|
||||
## 1. 텍스트 구조 (H2)
|
||||
|
||||
대주제 제목은 `##`을 사용한다. 대주제 위에는 반드시 구분선(`---`)을 넣고, 아래에는 `<br/>` 태그를 넣어 간격을 띄운다.
|
||||
|
||||
### 1.1 중주제 (H3)
|
||||
|
||||
중주제 제목은 `###`을 사용한다. 중주제 사이에는 `<br/>` 태그만 사용하여 간격을 띄운다.
|
||||
|
||||
#### 1.1.1 소주제 (H4)
|
||||
|
||||
소주제 제목은 `####`을 사용한다. 본문 내에서 구체적인 항목을 설명할 때 사용한다.
|
||||
|
||||
<br/>
|
||||
|
||||
### 1.2 문단 및 줄 바꿈 테스트
|
||||
|
||||
엔터키를 한 번만 치면 줄이 바뀌지 않고 이어서 나온다.
|
||||
(지금 엔터 한 번 친 상태) 결과는 한 줄로 이어진다.
|
||||
|
||||
엔터키를 두 번 치면 문단이 나뉜다. (빈 줄 생성)
|
||||
|
||||
같은 문단 안에서 줄만 바꾸고 싶다면<br/>
|
||||
문장 끝에 `SPACE 2번`을 입력하거나 `<br/>` 태그를 사용한다.
|
||||
|
||||
---
|
||||
<br/>
|
||||
|
||||
## 2. 텍스트 서식 (H2)
|
||||
|
||||
### 2.1 글자 강조
|
||||
|
||||
* 핵심 키워드는 **굵게(Bold)** 처리한다.
|
||||
* 영문 용어나 캡션은 *기울임(Italic)* 처리한다.
|
||||
* 삭제된 내용은 ~~취소선(Strikethrough)~~ 처리한다.
|
||||
* 파일명이나 단축키는 `인라인 코드(Inline Code)` 처리한다.
|
||||
|
||||
<br/>
|
||||
|
||||
### 2.2 인용 및 특수문자
|
||||
|
||||
> 인용문은 이렇게 작성한다. 정의나 참고 문헌을 표기할 때 유용하다.
|
||||
|
||||
<br/>
|
||||
|
||||
### 2.3 기타
|
||||
|
||||
* 위첨자: m<sup>2</sup>
|
||||
* 아래첨자: H<sub>2</sub>O
|
||||
* 이스케이프: 별표 기호(\*)를 그대로 출력한다.
|
||||
|
||||
---
|
||||
<br/>
|
||||
|
||||
## 3. 목록 및 코드 박스 (H2)
|
||||
|
||||
### 3.1 목록 스타일
|
||||
|
||||
순서 없는 목록은 하이픈(`-`)이나 별표(`*`)를 사용한다.
|
||||
* 첫 번째 항목
|
||||
* 두 번째 항목
|
||||
* 들여쓰기 된 하위 항목 (Tab 사용)
|
||||
|
||||
순서 있는 목록은 숫자(`1.`)를 사용한다.
|
||||
1. 첫 번째 단계
|
||||
2. 두 번째 단계
|
||||
|
||||
<br/>
|
||||
|
||||
### 3.2 코드 블록
|
||||
|
||||
파일의 내용이나 코드를 보여줄 때는 코드 블록을 사용한다. `title` 속성을 사용하여 파일명을 명시할 수 있다.
|
||||
(별도 텍스트 박스처럼도 활용 가능)
|
||||
|
||||
```python title="example.py"
|
||||
# 여기에 코드를 작성한다.
|
||||
def hello():
|
||||
print("Hello, World!")
|
||||
```
|
||||
|
||||
```
|
||||
별도 텍스트 박스처럼 사용할 수 있다.
|
||||
```
|
||||
|
||||
---
|
||||
<br/>
|
||||
## 4. 안내 박스 (H2)
|
||||
|
||||
내용의 중요도에 따라 4가지 안내 박스를 구분하여 사용한다. 단순한 강조가 아닌, 정보의 성격에 맞는 박스를 선택해야 한다.
|
||||
|
||||
:::note[참고]
|
||||
본문 흐름과 직접적인 관련은 없지만, 독자가 알아두면 좋은 부가 정보나 배경 지식을 작성한다.
|
||||
:::
|
||||
|
||||
:::tip[팁]
|
||||
작업 속도를 높이거나 효율적으로 처리할 수 있는 노하우, 숨겨진 기능 등을 작성한다.
|
||||
:::
|
||||
|
||||
:::caution[주의]
|
||||
사용자가 흔히 실수할 수 있는 부분이나, 주의하지 않으면 오류가 발생할 수 있는 사항을 작성한다.
|
||||
:::
|
||||
|
||||
:::danger[위험]
|
||||
데이터 영구 삭제, 시스템 중단 등 돌이킬 수 없는 결과를 초래할 수 있는 치명적인 작업을 경고한다.
|
||||
:::
|
||||
|
||||
---
|
||||
<br/>
|
||||
|
||||
---
|
||||
<br/>
|
||||
|
||||
## 5. 시각 자료 및 링크 (H2)
|
||||
|
||||
### 5.1 이미지
|
||||
|
||||
이미지 파일은 반드시 `/assets/images/01.png` 경로에 저장한 후 불러온다.
|
||||
이미지 하단에는 캡션을 작성하여 부가 설명을 덧붙인다.
|
||||
|
||||
|
||||
*(사진1) 디지털 전환*
|
||||
|
||||
<br/>
|
||||
|
||||
### 5.2 링크
|
||||
|
||||
외부 자료나 내부 문서를 연결할 때는 링크 문법을 사용한다.
|
||||
|
||||
* **링크**: [구글 홈페이지](https://google.com) (전체 URL 사용)
|
||||
|
||||
---
|
||||
<br/>
|
||||
|
||||
## 6. 표와 수식 (H2)
|
||||
|
||||
### 6.1 표 (Table)
|
||||
|
||||
데이터를 비교하거나 정리할 때는 표를 사용한다. 헤더의 콜론(`:`) 위치를 조절하여 정렬 방식을 결정한다.
|
||||
|
||||
| 항목(가운데) | 설명(왼쪽) | 비고(오른쪽) |
|
||||
| :---: | :--- | ---: |
|
||||
| 데이터 1 | 텍스트 내용을 작성한다 | 비고를 작성한다 |
|
||||
| 데이터 2 | 내용이 길어지면 `<br/>` 태그를<br/>사용하여 줄을 바꾼다 | |
|
||||
|
||||
<br/>
|
||||
|
||||
### 6.2 수식 (LaTeX)
|
||||
|
||||
공학 공식이나 변수는 LaTeX 문법을 사용하여 표현한다.
|
||||
|
||||
* **인라인 수식**: 문장 중간에 변수($x$)나 짧은 식($a+b=c$)을 넣을 때 사용한다.
|
||||
* **블록 수식**: 복잡한 공식을 별도의 줄에 강조할 때 `$$`를 사용한다.
|
||||
|
||||
$$
|
||||
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
|
||||
$$
|
||||
113
samples/src/content/docs/guides/콘텐츠 게시 절차 가이드.mdx
Normal file
113
samples/src/content/docs/guides/콘텐츠 게시 절차 가이드.mdx
Normal file
@@ -0,0 +1,113 @@
|
||||
---
|
||||
title: 콘텐츠 게시 절차 가이드
|
||||
description: CEL 웹사이트용 콘텐츠를 작성하고 반영하는 기본 절차를 안내합니다.
|
||||
sidebar:
|
||||
order: 0
|
||||
---
|
||||
|
||||
## 1. 작업 환경 준비
|
||||
|
||||
먼저 Gitea 계정을 준비하고 VS Code를 설치한 뒤, CEL 저장소를 로컬로 연결합니다.
|
||||
|
||||
1. **Gitea 가입**: [https://gitea.hmac.kr](https://gitea.hmac.kr) 로 접속하여 `가입하기`를 누릅니다.
|
||||
2. **사내 계정 로그인**: `Sign in with hmfamily`를 누르고 ID, PW를 입력합니다. (`BEPs`의 ID, PW와 동일합니다.)
|
||||
3. **VS Code 설치**: [Visual Studio Code 공식 사이트](https://code.visualstudio.com/)에서 설치 파일을 내려받습니다.
|
||||
4. **Gitea 저장소 연결**: VS Code에서 `Ctrl + Shift + P`를 누른 뒤 `Git: Clone`을 실행하고 저장소 주소를 입력한 다음, 프로젝트를 저장할 폴더를 선택합니다.
|
||||
|
||||
:::note[참고]
|
||||
저장소 주소: `https://gitea.hmac.kr/tech-planning/civil-engineering-lab.git`
|
||||
:::
|
||||
|
||||
|
||||
<div style="text-align: center; margin: 0.5rem 0 1.5rem;">[Gitea 가입 또는 사내 계정 로그인 화면]</div>
|
||||
|
||||
|
||||
<div style="text-align: center; margin: 0.5rem 0 1.5rem;">[VS Code 공식 다운로드 페이지]</div>
|
||||
|
||||
|
||||
<div style="text-align: center; margin: 0.5rem 0 1.5rem;">[`Git: Clone` 명령을 선택하는 화면]</div>
|
||||
|
||||
## 2. 브랜치 생성 및 로컬 사이트 확인
|
||||
|
||||
공용 메인 브랜치에 바로 작업하지 않고, 개인 브랜치를 만든 뒤 로컬에서 결과를 먼저 확인합니다.
|
||||
|
||||
1. **브랜치 생성**: 터미널에서 `git checkout -b 원하는-이름`을 실행합니다. (예시: `git checkout -b kim-contents`)
|
||||
2. **Node.js 설치**: [Node.js 공식 사이트](https://nodejs.org/ko/download/)에서 `Windows 설치 프로그램(.msi)`를 눌러 설치 파일을 내려받습니다.
|
||||
3. **패키지 설치**: 터미널 창(`Ctrl + J`)에 `npm install`을 입력하고 `Enter`를 눌러 설치를 진행합니다.
|
||||
4. **로컬 실행**: 설치가 완료된 후 `npm run dev`를 입력하고 `Enter`를 누릅니다. 로컬호스트 주소가 나오면 `Ctrl`을 누른 채로 링크를 누릅니다.
|
||||
|
||||
:::note[참고]
|
||||
- Branch는 실제 운영 중인 사이트에 영향을 주지 않는 개인 작업 공간입니다.
|
||||
- VS Code에서 작업한 콘텐츠는 로컬 사이트에서 실시간으로 확인할 수 있습니다.
|
||||
:::
|
||||
|
||||
:::caution[주의 사항]
|
||||
1. `npm install` 실행 시 권한 관련 오류가 발생하면 터미널에 `Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser` 명령어를 입력합니다.
|
||||
2. "정책을 변경하시겠습니까?" 같은 문구가 나오면 Y 를 입력하고 Enter를 누릅니다.
|
||||
:::
|
||||
|
||||
|
||||
<div style="text-align: center; margin: 0.5rem 0 1.5rem;">[터미널에서 개인 브랜치 생성]</div>
|
||||
|
||||
|
||||
<div style="text-align: center; margin: 0.5rem 0 1.5rem;">[`npm run dev` 실행 후 로컬 주소 확인]</div>
|
||||
|
||||
## 3. MDX 파일 작성
|
||||
|
||||
지정된 콘텐츠 폴더에 새 `mdx` 파일을 만들고 내용을 작성합니다.
|
||||
|
||||
1. **폴더 확인**: 콘텐츠는 보통 `src/content/docs` 하위의 카테고리별 폴더에 작성합니다.
|
||||
2. **파일 작성**: 해당 폴더에 `.mdx` 파일을 새로 만들고, 본문을 작성한 뒤 `Ctrl + S`로 저장합니다. 이미 작성된 .mdx 파일이 있다면 해당 폴더로 마우스 드래그 앤 드롭하여 추가할 수 있습니다.
|
||||
3. **콘텐츠 확인**: 작성된 콘텐츠를 로컬 사이트에서 최종적으로 확인합니다.
|
||||
|
||||
:::note[참고]
|
||||
- 파일 형식은 CEL 웹사이트에 업로드되어 있는 콘텐츠 또는 콘텐츠 작성 가이드를 참고합니다.
|
||||
- 수정사항은 로컬 사이트에 바로 반영됩니다. 만약 변경 내용이 보이지 않는 경우, `F5`로 새로고침을 하거나 터미널에서 `Ctrl + C`로 실행을 중지한 뒤 `npm run dev`를 다시 실행합니다.
|
||||
:::
|
||||
|
||||
|
||||
<div style="text-align: center; margin: 0.5rem 0 1.5rem;">[MDX를 작성하는 예시]</div>
|
||||
|
||||
## 4. Gitea에 콘텐츠 업로드
|
||||
|
||||
파일 수정이 끝나면 변경 파일을 스테이징하고 커밋 메시지를 작성한 뒤 Gitea에 업로드합니다.
|
||||
|
||||
1. **소스 제어 열기**: 좌측 사이드바의 소스 제어(점 세개가 이어져 있는 아이콘)를 누릅니다.
|
||||
2. **스테이징**: 변경 사항 중 업로드할 파일에서 `+` 버튼(변경 내용 스테이징)을 누릅니다.
|
||||
3. **메시지 작성**: `스테이징된 변경 사항`에 원하는 파일이 들어갔는지 확인하고, 변경 내용 메시지창에 내용을 간단히 작성합니다.
|
||||
4. **커밋 및 푸시**: 커밋 드롭다운에서 `커밋 및 푸시`를 선택합니다.
|
||||
|
||||
:::note[참고]
|
||||
변경 사항 전체를 업로드해야 하는 경우에는 `변경 사항` 영역에서 `+` 버튼을 눌러 전체를 스테이징합니다.
|
||||
:::
|
||||
|
||||
|
||||
<div style="text-align: center; margin: 0.5rem 0 1.5rem;">[변경 파일 확인 후 `+` 버튼을 눌러 스테이징]</div>
|
||||
|
||||
|
||||
<div style="text-align: center; margin: 0.5rem 0 1.5rem;">[메시지 작성 후 드롭다운 메뉴에서 `커밋 및 푸시` 선택]</div>
|
||||
|
||||
## 5. CEL 웹사이트에 반영 요청
|
||||
|
||||
사용자가 작업한 콘텐츠를 제출하고, 관리자에게 검토 및 승인을 요청합니다.
|
||||
|
||||
1. **저장소 이동**: Gitea 로그인 후, 탐색에서 `tech-planning/civil-engineering-lab`를 눌러 저장소로 이동합니다.
|
||||
2. **content-pr 실행**: `Actions` 탭에서 `content-pr.yml`을 선택하고 `Run Workflow`를 누릅니다.
|
||||
3. **브랜치명 입력**: `콘텐츠 브랜치 이름`에 본인의 브랜치명을 입력하고, `Run Workflow`를 누릅니다.
|
||||
4. **반영 요청**: 관리자에게 검토 및 승인 요청을하고, 승인이되면 CEL 웹사이트에서 최종 결과를 확인합니다.
|
||||
|
||||
:::note[참고]
|
||||
- 브랜치명 입력에서 나머지 설정은 기본값을 유지하면 됩니다.
|
||||
- 워크플로우가 정상 완료되면 <span aria-label="완료" style="display:inline-flex; align-items:center; justify-content:center; width:1.1em; height:1.1em; margin:0 0.15em; border-radius:999px; background:#22c55e; color:#ffffff; font-size:0.78em; font-weight:700; line-height:1; vertical-align:-0.08em;">✓</span> 표시가 뜹니다.
|
||||
:::
|
||||
|
||||
|
||||
<div style="text-align: center; margin: 0.5rem 0 1.5rem;">[탐색에서 저장소 찾기]</div>
|
||||
|
||||
|
||||
<div style="text-align: center; margin: 0.5rem 0 1.5rem;">[`content-pr` 실행]</div>
|
||||
|
||||
|
||||
<div style="text-align: center; margin: 0.5rem 0 1.5rem;">[브랜치명 입력]</div>
|
||||
|
||||
|
||||
41
samples/src/content/docs/index.mdx
Normal file
41
samples/src/content/docs/index.mdx
Normal file
@@ -0,0 +1,41 @@
|
||||
---
|
||||
title: Welcome to Civil Engineering Lab
|
||||
description: Guide for Civil Engineering Tools and Labs
|
||||
template: splash
|
||||
hero:
|
||||
tagline: Your hub for detailed documentation and guides.
|
||||
image:
|
||||
file: ../../assets/cell_temp.svg
|
||||
actions:
|
||||
- text: Get Started
|
||||
link: /guides/getting-started/
|
||||
icon: right-arrow
|
||||
variant: primary
|
||||
---
|
||||
|
||||
import { Card, CardGrid } from '@astrojs/starlight/components';
|
||||
|
||||
## Next Steps
|
||||
|
||||
<CardGrid stagger>
|
||||
<div data-analytics-id="home-card-update-content">
|
||||
<Card title="Update Content" icon="pencil">
|
||||
Edit `src/content/docs/index.mdx` to see this page change.
|
||||
</Card>
|
||||
</div>
|
||||
<div data-analytics-id="home-card-add-guides">
|
||||
<Card title="Add New Guides" icon="add-document">
|
||||
Add Markdown or MDX files to `src/content/docs` to automatically generate new pages.
|
||||
</Card>
|
||||
</div>
|
||||
<div data-analytics-id="home-card-configure-site">
|
||||
<Card title="Configure Site" icon="setting">
|
||||
Edit `astro.config.mjs` to change the site configuration.
|
||||
</Card>
|
||||
</div>
|
||||
<div data-analytics-id="home-card-read-docs">
|
||||
<Card title="Read the Docs" icon="open-book">
|
||||
Learn more in [the Starlight Docs](https://starlight.astro.build/).
|
||||
</Card>
|
||||
</div>
|
||||
</CardGrid>
|
||||
20
samples/src/content/docs/기반기술/Analysis-Split.mdx
Normal file
20
samples/src/content/docs/기반기술/Analysis-Split.mdx
Normal file
@@ -0,0 +1,20 @@
|
||||
---
|
||||
title: 기반기술 - 분석 (2분할)
|
||||
sidebar:
|
||||
order: 2
|
||||
---
|
||||
|
||||
import SplitCard from '../../../components/SplitCard.astro';
|
||||
|
||||
# 데이터 분석 기술
|
||||
|
||||
<SplitCard>
|
||||
<div slot="content">
|
||||
## 포인트 클라우드 처리
|
||||
|
||||
3D 스캔 데이터를 효율적으로 가공하여 노이즈를 제거하고 객체를 인식합니다.
|
||||
</div>
|
||||
<div slot="media">
|
||||
<img src="/civil-engineering-lab/assets/placeholders/img3.svg" alt="Point Cloud" />
|
||||
</div>
|
||||
</SplitCard>
|
||||
21
samples/src/content/docs/기반기술/Experiment-Grid.mdx
Normal file
21
samples/src/content/docs/기반기술/Experiment-Grid.mdx
Normal file
@@ -0,0 +1,21 @@
|
||||
---
|
||||
title: 기반기술 - 실험 (그리드)
|
||||
sidebar:
|
||||
order: 3
|
||||
---
|
||||
|
||||
import GridGallery from '../../../components/GridGallery.astro';
|
||||
import GridItem from '../../../components/GridItem.astro';
|
||||
|
||||
# 실험실 갤러리
|
||||
|
||||
<GridGallery>
|
||||
<GridItem title="알고리즘 A">
|
||||
<img slot="media" src="/civil-engineering-lab/assets/placeholders/img1.svg" />
|
||||
<div slot="content">성능 최적화 테스트 결과</div>
|
||||
</GridItem>
|
||||
<GridItem title="알고리즘 B">
|
||||
<img slot="media" src="/civil-engineering-lab/assets/placeholders/img2.svg" />
|
||||
<div slot="content">병렬 처리 효율 분석</div>
|
||||
</GridItem>
|
||||
</GridGallery>
|
||||
15
samples/src/content/docs/기반기술/Research.mdx
Normal file
15
samples/src/content/docs/기반기술/Research.mdx
Normal file
@@ -0,0 +1,15 @@
|
||||
---
|
||||
title: 기반기술 - 연구 (텍스트)
|
||||
sidebar:
|
||||
order: 4
|
||||
next: false
|
||||
---
|
||||
|
||||
# 최신 연구 동향
|
||||
|
||||
기반기술 섹션에서는 핵심 알고리즘과 데이터 처리 기술을 다룹니다.
|
||||
|
||||
## 연구 분야
|
||||
1. 기하 알고리즘
|
||||
2. 대용량 데이터 처리
|
||||
3. 클라우드 컴퓨팅
|
||||
8
samples/src/content/docs/기반기술/index.md
Normal file
8
samples/src/content/docs/기반기술/index.md
Normal file
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: 기반기술 소개
|
||||
sidebar:
|
||||
order: 1
|
||||
prev: false
|
||||
---
|
||||
|
||||
기반기술 섹션의 메인 페이지입니다.
|
||||
20
samples/src/content/docs/기반기술/샘플페이지.mdx
Normal file
20
samples/src/content/docs/기반기술/샘플페이지.mdx
Normal file
@@ -0,0 +1,20 @@
|
||||
---
|
||||
title: 샘플페이지도 잘되는건가?
|
||||
sidebar:
|
||||
order: 6
|
||||
---
|
||||
|
||||
import SplitCard from '../../../components/SplitCard.astro';
|
||||
|
||||
# 데이터 분석 기술
|
||||
|
||||
<SplitCard>
|
||||
<div slot="content">
|
||||
## 포인트 클라우드 처리
|
||||
|
||||
3D 스캔 데이터를 효율적으로 가공하여 노이즈를 제거하고 객체를 인식합니다.
|
||||
</div>
|
||||
<div slot="media">
|
||||
<img src="/civil-engineering-lab/assets/placeholders/img3.svg" alt="Point Cloud" />
|
||||
</div>
|
||||
</SplitCard>
|
||||
7
samples/src/content/docs/기반기술/코어기술/index.md
Normal file
7
samples/src/content/docs/기반기술/코어기술/index.md
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: 기반기술 중 코어기술 소개
|
||||
sidebar:
|
||||
order: 1
|
||||
---
|
||||
|
||||
기반기술 하위 코어기술 섹션의 메인 페이지입니다.
|
||||
7
samples/src/content/docs/기반기술/코어기술/핵심코어기반기술/index.md
Normal file
7
samples/src/content/docs/기반기술/코어기술/핵심코어기반기술/index.md
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: 핵심코어기반기술
|
||||
sidebar:
|
||||
order: 1
|
||||
---
|
||||
|
||||
기반기술 하위 코어기술 섹션의 메인 페이지입니다.
|
||||
21
samples/src/content/docs/설계/Detail-Grid.mdx
Normal file
21
samples/src/content/docs/설계/Detail-Grid.mdx
Normal file
@@ -0,0 +1,21 @@
|
||||
---
|
||||
title: 설계 - 상세도 (그리드)
|
||||
sidebar:
|
||||
order: 2
|
||||
---
|
||||
|
||||
import GridGallery from '../../../components/GridGallery.astro';
|
||||
import GridItem from '../../../components/GridItem.astro';
|
||||
|
||||
# 상세도 모음
|
||||
|
||||
<GridGallery>
|
||||
<GridItem title="배근도">
|
||||
<img slot="media" src="/civil-engineering-lab/assets/placeholders/img1.svg" />
|
||||
<div slot="content">철근 배근 상세</div>
|
||||
</GridItem>
|
||||
<GridItem title="접합부">
|
||||
<img slot="media" src="/civil-engineering-lab/assets/placeholders/img2.svg" />
|
||||
<div slot="content">강구조 접합부 상세</div>
|
||||
</GridItem>
|
||||
</GridGallery>
|
||||
20
samples/src/content/docs/설계/Drawing-Split.mdx
Normal file
20
samples/src/content/docs/설계/Drawing-Split.mdx
Normal file
@@ -0,0 +1,20 @@
|
||||
---
|
||||
title: 설계 - 도면 (2분할)
|
||||
sidebar:
|
||||
order: 3
|
||||
---
|
||||
|
||||
import SplitCard from '../../../components/SplitCard.astro';
|
||||
|
||||
# 도면 자동화
|
||||
|
||||
<SplitCard>
|
||||
<div slot="content">
|
||||
## 평면도 생성
|
||||
|
||||
데이터베이스에서 평면도를 자동 추출합니다.
|
||||
</div>
|
||||
<div slot="media">
|
||||
<img src="/civil-engineering-lab/assets/placeholders/img4.svg" />
|
||||
</div>
|
||||
</SplitCard>
|
||||
10
samples/src/content/docs/설계/Guide.mdx
Normal file
10
samples/src/content/docs/설계/Guide.mdx
Normal file
@@ -0,0 +1,10 @@
|
||||
---
|
||||
title: 설계 - 가이드 (텍스트)
|
||||
sidebar:
|
||||
order: 4
|
||||
next: false
|
||||
---
|
||||
|
||||
# 설계 표준 가이드
|
||||
|
||||
설계 파트에서는 표준화된 도면 작성 요령을 안내합니다.
|
||||
8
samples/src/content/docs/설계/index.md
Normal file
8
samples/src/content/docs/설계/index.md
Normal file
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: 설계 소개
|
||||
sidebar:
|
||||
order: 1
|
||||
prev: false
|
||||
---
|
||||
|
||||
설계 섹션의 메인 페이지입니다.
|
||||
20
samples/src/content/docs/시공/Process-Split.mdx
Normal file
20
samples/src/content/docs/시공/Process-Split.mdx
Normal file
@@ -0,0 +1,20 @@
|
||||
---
|
||||
title: 시공 - 공정 (2분할)
|
||||
sidebar:
|
||||
order: 2
|
||||
---
|
||||
|
||||
import SplitCard from '../../../components/SplitCard.astro';
|
||||
|
||||
# 공정 관리
|
||||
|
||||
<SplitCard reverse>
|
||||
<div slot="content">
|
||||
## 4D 시뮬레이션
|
||||
|
||||
시간 경과에 따른 공정 진행 상황을 시각화합니다.
|
||||
</div>
|
||||
<div slot="media">
|
||||
<img src="/civil-engineering-lab/assets/placeholders/img3.svg" />
|
||||
</div>
|
||||
</SplitCard>
|
||||
9
samples/src/content/docs/시공/Safety.mdx
Normal file
9
samples/src/content/docs/시공/Safety.mdx
Normal file
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: 시공 - 안전 (텍스트)
|
||||
sidebar:
|
||||
order: 3
|
||||
---
|
||||
|
||||
# 시공 안전 수칙
|
||||
|
||||
현장 안전 관리 가이드라인입니다.
|
||||
22
samples/src/content/docs/시공/Site-Grid.mdx
Normal file
22
samples/src/content/docs/시공/Site-Grid.mdx
Normal file
@@ -0,0 +1,22 @@
|
||||
---
|
||||
title: 시공 - 현장 (그리드)
|
||||
sidebar:
|
||||
order: 4
|
||||
next: false
|
||||
---
|
||||
|
||||
import GridGallery from '../../../components/GridGallery.astro';
|
||||
import GridItem from '../../../components/GridItem.astro';
|
||||
|
||||
# 현장 사진
|
||||
|
||||
<GridGallery>
|
||||
<GridItem title="타설 현장">
|
||||
<img slot="media" src="/civil-engineering-lab/assets/placeholders/img4.svg" />
|
||||
<div slot="content">콘크리트 타설 전경</div>
|
||||
</GridItem>
|
||||
<GridItem title="안전 점검">
|
||||
<img slot="media" src="/civil-engineering-lab/assets/placeholders/img1.svg" />
|
||||
<div slot="content">아침 안전 조회 및 체조</div>
|
||||
</GridItem>
|
||||
</GridGallery>
|
||||
8
samples/src/content/docs/시공/index.md
Normal file
8
samples/src/content/docs/시공/index.md
Normal file
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: 시공 소개
|
||||
sidebar:
|
||||
order: 1
|
||||
prev: false
|
||||
---
|
||||
|
||||
시공 섹션의 메인 페이지입니다.
|
||||
285
samples/src/content/docs/작업폴더/콘텐츠 작업중/01. DX 도입배경(슬라이드).mdx
Normal file
285
samples/src/content/docs/작업폴더/콘텐츠 작업중/01. DX 도입배경(슬라이드).mdx
Normal file
@@ -0,0 +1,285 @@
|
||||
---
|
||||
title: DX도입 배경(슬라이드6:4)
|
||||
sidebar:
|
||||
order: 5
|
||||
tableOfContents: false
|
||||
---
|
||||
|
||||
<style>{`
|
||||
/* 1. 전체 폭 강제 사용 및 패딩 제거 */
|
||||
.content-panel, .sl-container, .sl-markdown-content {
|
||||
max-width: 100% !important; padding: 0 !important; margin: 0 !important;
|
||||
}
|
||||
.padding-vert--lg { padding-top: 0 !important; padding-bottom: 0 !important; }
|
||||
|
||||
/* 2. 리스트 스타일 잡기 */
|
||||
.slide-content ul { padding-left: 20px; margin-top: 10px; }
|
||||
.slide-content li { margin-bottom: 8px; }
|
||||
`}</style>
|
||||
|
||||
{/* 👇 슬라이드 컨테이너: 높이를 화면 크기에서 [제목+여백]만큼 뺀 값으로 자동 계산 */
|
||||
/* calc(100vh - 140px) : 140px은 상단 시스템 제목과 헤더가 차지하는 대략적인 높이입니다. */
|
||||
}
|
||||
<div className="slide-container" style={{
|
||||
height: 'calc(100vh - 140px)',
|
||||
width: '100%',
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
padding: '0 40px'
|
||||
}}>
|
||||
|
||||
{/* 본문 영역 (6:4 분할) */}
|
||||
<div style={{
|
||||
flex: '1 1 auto', /* 남은 공간을 꽉 채움 */
|
||||
display: 'flex',
|
||||
gap: '40px',
|
||||
alignItems: 'stretch', /* ⭐ 핵심: 자식 요소들을 높이 끝까지 강제로 늘림 */
|
||||
marginTop: '10px',
|
||||
marginBottom: '20px'
|
||||
}}>
|
||||
|
||||
{/* 🟢 [왼쪽 60%] */}
|
||||
<div className="slide-content" style={{
|
||||
flex: 6,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start', /* 내용은 중앙 정렬하되 */
|
||||
height: '100%', /* ⭐ 박스 자체는 100% 높이 유지 */
|
||||
borderRight: '1px solid #e0e0e0',
|
||||
paddingRight: '40px'
|
||||
}}>
|
||||
|
||||
<h2 style={{ fontSize: '1.6rem', fontWeight: 'bold', marginBottom: '0px', borderBottom: '1px solid #ddd', paddingBottom: '00px' }}>
|
||||
1. 건설산업의 낮은 생산성
|
||||
</h2>
|
||||
|
||||
<div style={{ fontSize: '1rem', lineHeight: '1.6', color: '#333' }}>
|
||||
<p>
|
||||
* **건설산업** 생산성 성장률은 **1%**, 제조업(**3.6%**) 대비 **심각한 정체** 상태.
|
||||
|
||||
|
||||
* 국내 건설기업의 **노동 생산성**또한 **제조업의 53.2%** 수준에 불과함.
|
||||
|
||||
|
||||
* **건설산업**은 **효율성 혁신 지체**로, 여전히 전통적인 **노동 집약적 생산 방식**에 머물러 있음.
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<h2 style={{ fontSize: '1.6rem', fontWeight: 'bold', marginBottom: '0px', borderBottom: '1px solid #ddd', paddingBottom: '00px' }}>
|
||||
2. 디지털화와 건설산업의 현재
|
||||
</h2>
|
||||
|
||||
<div style={{ fontSize: '1rem', lineHeight: '1.6', color: '#333' }}>
|
||||
<p>
|
||||
* 세계적으로 산업별 **디지털화 수준과 생산성은 정비례**함.
|
||||
|
||||
* 건설산업의 디지털화 지수는 **농업보다도 낮은 최하위권**에 머물러 있음.
|
||||
|
||||
* 디지털 전환을 위한 **노력 부족**과 건설산업에 맞는 **디지털 기술 부족**이 그 원인.
|
||||
|
||||
* 디지털 기술이 발전한 현재, 생산성 혁신을 위해 **건설산업 전반의 디지털 전환(DX)** 이 필요.
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{/* ================= [핵심 요약] 박스 ================= */}
|
||||
<div style={{
|
||||
marginTop: '30px', /* 위쪽 내용과 간격 */
|
||||
padding: '20px', /* 박스 내부 여백 */
|
||||
backgroundColor: '#f6f8fa', /* 연한 회색 배경 (취향에 따라 #e6f7ff 등 변경 가능) */
|
||||
borderLeft: '5px solid #0056b3', /* 왼쪽 굵은 파란 선 */
|
||||
borderRadius: '4px', /* 모서리 둥글게 */
|
||||
fontSize: '1rem'
|
||||
}}>
|
||||
{/* 제목 부분 */}
|
||||
<div style={{ fontWeight: 'bold', marginBottom: '10px', color: '#0056b3' }}>
|
||||
핵심 요약
|
||||
</div>
|
||||
|
||||
{/* 내용 부분 */}
|
||||
<ul style={{ margin: 0, paddingLeft: '20px' }}>
|
||||
<li>
|
||||
건설산업은 디지털전환을 통해 <strong>Process의 혁신</strong>과
|
||||
<strong> Products의 변화</strong>를 일으켜야 한다.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* 🟠 [오른쪽 40%] */}
|
||||
<div style={{
|
||||
flex: 4,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'left',
|
||||
paddingLeft: '10px',
|
||||
height: '100%'
|
||||
}}>
|
||||
|
||||
|
||||
{/* 👇 주석 없이 깔끔한 이미지 태그 */}
|
||||
<img
|
||||
src="/assets/images/그림4.png"
|
||||
alt="건설산업 생산성 추이"
|
||||
className="zoomable"
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
maxHeight: '40vh',
|
||||
objectFit: 'contain',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
|
||||
marginBottom: '0px'
|
||||
}}
|
||||
/>
|
||||
|
||||
<p style={{ fontSize: '0.9rem', textAlign: 'center', color: '#666', marginTop: '0' }}>
|
||||
*[그림 1] 국내외 건설산업 생산성 추이 (출처: McKinsey / 한국은행)*<br/>
|
||||
</p>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
|
||||
|
||||
{/* 👇 주석 없이 깔끔한 이미지 태그 */}
|
||||
<img
|
||||
src="/assets/images/그림3.png"
|
||||
alt="건설산업 생산성 추이"
|
||||
className="zoomable"
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
maxHeight: '40vh',
|
||||
objectFit: 'contain',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
|
||||
marginBottom: '0px'
|
||||
}}
|
||||
/>
|
||||
|
||||
<p style={{ fontSize: '0.9rem', textAlign: 'center', color: '#666', marginTop: '0' }}>
|
||||
*[그림 2] 산업별 디지털화 지수 비교 (출처: McKinsey 보고서, 2018)*<br/>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* ================================================================================== */}
|
||||
{/* 👇 [팝업 기능 최종본] 가림 현상 해결 + 정중앙 정렬 (기존 코드 지우고 붙여넣기) */}
|
||||
{/* ================================================================================== */}
|
||||
|
||||
<style>{`
|
||||
.zoomable { cursor: zoom-in; transition: transform 0.2s; }
|
||||
.zoomable:hover { transform: scale(1.02); }
|
||||
|
||||
/* 팝업 배경 설정 */
|
||||
#image-modal {
|
||||
display: none; /* 평소엔 숨김 */
|
||||
|
||||
/* ⭐ 핵심 1: 정중앙 정렬을 위한 Flexbox 도입 */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
position: fixed;
|
||||
left: 0; top: 0; width: 100%; height: 100%;
|
||||
|
||||
/* ⭐ 핵심 2: 사이트 메뉴바보다 무조건 위에 뜨게 Z-Index를 엄청 높게 설정 */
|
||||
z-index: 2147483647;
|
||||
|
||||
background-color: rgba(0,0,0,0.9); /* 배경을 더 어둡게 */
|
||||
backdrop-filter: blur(5px);
|
||||
padding: 20px; /* 가장자리 여백 확보 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 팝업 이미지 설정 */
|
||||
#modal-content {
|
||||
max-width: 60%;
|
||||
max-height: 95vh;
|
||||
object-fit: contain; /* 비율 유지하며 화면에 딱 맞춤 */
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 30px rgba(0,0,0,0.5);
|
||||
animation: popUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
/* 닫기 버튼 설정 */
|
||||
#modal-close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 30px;
|
||||
color: white;
|
||||
font-size: 50px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
z-index: 2147483648; /* 이미지보다도 더 위에 */
|
||||
line-height: 1;
|
||||
text-shadow: 0 0 10px rgba(0,0,0,0.5);
|
||||
}
|
||||
#modal-close:hover { color: #ff6b6b; transform: scale(1.1); transition: 0.2s; }
|
||||
|
||||
@keyframes popUp { from {transform:scale(0.8); opacity:0;} to {transform:scale(1); opacity:1;} }
|
||||
`}</style>
|
||||
|
||||
{/* 팝업창 HTML 구조 */}
|
||||
<div id="image-modal">
|
||||
<span id="modal-close">×</span>
|
||||
<img id="modal-content" />
|
||||
</div>
|
||||
|
||||
{/* 스크립트 */}
|
||||
<script>{`
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const modal = document.getElementById('image-modal');
|
||||
const modalImg = document.getElementById('modal-content');
|
||||
const closeBtn = document.getElementById('modal-close');
|
||||
const images = document.querySelectorAll('.zoomable');
|
||||
|
||||
// 1. 이미지 클릭 시 열기
|
||||
images.forEach(img => {
|
||||
img.addEventListener('click', function(e) {
|
||||
e.preventDefault(); // 혹시 모를 기본 동작 차단
|
||||
modal.style.display = "flex"; // ⭐ block 대신 flex로 열어야 중앙 정렬됨
|
||||
modalImg.src = this.src;
|
||||
modalImg.alt = this.alt;
|
||||
});
|
||||
});
|
||||
|
||||
// 2. 닫기 기능 함수
|
||||
function closeModal() {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
|
||||
// 3. 닫기 버튼 클릭
|
||||
if (closeBtn) closeBtn.onclick = closeModal;
|
||||
|
||||
// 4. 배경 클릭 시 닫기
|
||||
if (modal) {
|
||||
modal.onclick = function(event) {
|
||||
// 이미지를 제외한 배경(div)을 눌렀을 때만 닫기
|
||||
if (event.target === modal) {
|
||||
closeModal();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 5. ESC 키 누르면 닫기 (추가 편의기능)
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.key === "Escape" && modal.style.display === "flex") {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
});
|
||||
`}</script>
|
||||
@@ -0,0 +1,60 @@
|
||||
---
|
||||
title: 정부 DX정책 추진현황(스크롤)
|
||||
sidebar:
|
||||
order: 2
|
||||
---
|
||||
## 1. 건설 정책 로드맵 및 목표
|
||||
|
||||
정부는 **디지털 전환(DX)** 을 통해 정체된 건설산업을 **국가 신성장 동력**으로 재도약시키고자, 건설산업을 정보화하고 스마트 건설을 도입하기위해 다양한 국가연구개발사업 및 건설 정책을 시행하고있다.
|
||||
|
||||
<br/>
|
||||
|
||||
|
||||
*[사진 1] 건설산업DX 정책 로드맵*
|
||||
|
||||
## 2. 건설산업 BIM 기본 지침
|
||||
|
||||
2020년 「**건설산업 BIM 기본지침**」, 2022년 「**건설산업 BIM 시행지침**」을 발의하여 건설산업의 **생산성 향상**과 **품질, 안전 및 친환경의 극대화**를 핵심 목표로 설정하였으며, 설계·시공·유지관리 등 건설산업 전반의 **디지털 전환을 가속화**하고자 한다.
|
||||
|
||||
**정부 BIM 도입 개요 (건설산업 BIM 기본지침)**
|
||||
* **비전**: 디지털 전환을 통해 건설산업을 국가 신성장 동력으로 재도약
|
||||
* **목표**: 건설산업의 생산성 향상과 품질, 안전 및 친환경의 극대화
|
||||
* **기대 효과**:
|
||||
* **비용/공기**: 건설 비용 감소 및 기간 단축
|
||||
* **품질/안전**: 설계·시공 오류 최소화, 프로젝트 리스크 저감
|
||||
* **협업**: 협업과 의사소통 강화, 건설정보 통합관리
|
||||
|
||||
<br/>
|
||||
|
||||
|
||||
*[사진 1] 건설산업 BIM 기본 지침 및 시행지침*
|
||||
|
||||
|
||||
<br/>
|
||||
|
||||
---
|
||||
|
||||
## 3. 스마트 건설 활성화 방안
|
||||
|
||||
2022년 7월 국토교통부가 발표한 '**스마트 건설 활성화 방안**'은 건설산업의 디지털화와 자동화를 위한 핵심 전략을 포함한다.
|
||||
|
||||
**스마트 건설 활성화 방안 주요내용**
|
||||
| 구분 | 주요 내용 |
|
||||
| :--- | :--- |
|
||||
| **BIM**<br/>(Building Information Modeling) | **건설산업의 자동화, 지능화 등 스마트 건설을 실현하기 위한 기본 도구**<br/>건설정보 기반의 Process와 Products를 제공하여 디지털 전환의 기반을 마련함 |
|
||||
| **OSC**<br/>(Off-Site Construction) | **탈현장 건설 (공장 제작 시공)**<br/>단위부재 또는 유닛(여러 부재가 합쳐진 모듈 등)을 공장에서 사전 제작한 이후, 현장으로 이동하여 레고 블럭처럼 조립하는 방식 |
|
||||
|
||||
|
||||
*[사진 2] 스마트 건설 활성화 방안*
|
||||
|
||||
|
||||
<br/>
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
|
||||
:::note[핵심 요약]
|
||||
* 정부는 [건설산업 BIM 기본 지침], [스마트 건설 활성화 방안] 등을 통해 건설산업의 디지털 전환을 지속적으로 추진하고 있다.
|
||||
:::
|
||||
255
samples/src/content/docs/작업폴더/콘텐츠 작업중/02. 정부 DX정책 추진현황(슬라이드).mdx
Normal file
255
samples/src/content/docs/작업폴더/콘텐츠 작업중/02. 정부 DX정책 추진현황(슬라이드).mdx
Normal file
@@ -0,0 +1,255 @@
|
||||
---
|
||||
title: 정부 DX정책 추진현황(슬라이드 4:6)
|
||||
sidebar:
|
||||
order: 6
|
||||
tableOfContents: false
|
||||
---
|
||||
|
||||
<style>{`
|
||||
.content-panel, .sl-container, .sl-markdown-content {
|
||||
max-width: 100% !important; padding: 0 !important; margin: 0 !important;
|
||||
}
|
||||
.slide-content ul { padding-left: 20px; margin-top: 5px; }
|
||||
.slide-content li { margin-bottom: 5px; }
|
||||
/* 테이블 스타일 */
|
||||
.custom-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.9rem; }
|
||||
.custom-table th { background: #f1f3f5; border: 1px solid #ddd; padding: 8px; text-align: center; }
|
||||
.custom-table td { border: 1px solid #ddd; padding: 8px; vertical-align: middle; }
|
||||
`}</style>
|
||||
|
||||
<div className="slide-container" style={{
|
||||
height: 'calc(100vh - 140px)', width: '100%', overflow: 'hidden', display: 'flex', flexDirection: 'column', padding: '0 40px'
|
||||
}}>
|
||||
|
||||
{/* 메인 컨테이너 */}
|
||||
<div style={{ flex: '1 1 auto', display: 'flex', gap: '40px', alignItems: 'stretch', marginTop: '10px', marginBottom: '20px' }}>
|
||||
|
||||
|
||||
{/* ================================================================================== */}
|
||||
{/* 🟠 [왼쪽 40%] - 너비는 좁아졌지만 "왼쪽 값" 유지 */}
|
||||
{/* ================================================================================== */}
|
||||
<div className="slide-content" style={{
|
||||
flex: 4,
|
||||
display: 'flex', flexDirection: 'column', justifyContent: 'flex-start',
|
||||
borderRight: '1px solid #e0e0e0', paddingRight: '40px',
|
||||
height: '100%', overflowY: 'auto',
|
||||
|
||||
/* ⭐ 왼쪽은 구분선 영향이 있으므로 "왼쪽 황금비율" 유지 */
|
||||
paddingTop: '5px'
|
||||
}}>
|
||||
|
||||
<h2 style={{
|
||||
fontSize: '1.5rem', fontWeight: 'bold',
|
||||
marginBottom: '15px', borderBottom: '2px solid #333', paddingBottom: '10px',
|
||||
|
||||
/* ⭐ 왼쪽 황금비율 유지 */
|
||||
marginTop: '7px'
|
||||
}}>
|
||||
1. 건설 정책 로드맵 및 목표
|
||||
</h2>
|
||||
|
||||
{/* 내용 */}
|
||||
<div style={{ fontSize: '1rem', lineHeight: '1.6', color: '#333', marginBottom: '-20px' }}>
|
||||
<ul>
|
||||
<li>디지털전환(DX)을 통한 건설산업의 **국가 신성장 동력** 재도약</li>
|
||||
<li>스마트건설 도입 및 디지털전환을 위한 **국가 R&D 및 정책**추진</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style={{ textAlign: 'center', marginBottom: '20px' }}>
|
||||
<img
|
||||
src="/assets/images/04.png"
|
||||
alt="건설산업DX 정책 로드맵"
|
||||
className="zoomable"
|
||||
style={{ maxWidth: '100%', maxHeight: '50vh', objectFit: 'contain', borderRadius: '8px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)' }}
|
||||
/>
|
||||
<p style={{ fontSize: '0.9rem', color: '#666', marginTop: '5px' }}>
|
||||
*[사진 1] 건설산업DX 정책 로드맵*
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 핵심 요약 */}
|
||||
<div style={{ marginTop: '5px', padding: '15px', backgroundColor: '#e7f5ff', borderLeft: '5px solid #0056b3', borderRadius: '4px', fontSize: '1rem' }}>
|
||||
<div style={{ fontWeight: 'bold', marginBottom: '5px', color: '#0056b3' }}>ℹ️ 핵심 요약</div>
|
||||
<ul style={{ margin: 0, paddingLeft: '20px' }}>
|
||||
<li>정부는 건설산업의 디지털 전환을 지속적으로 추진하고 있으며 현재는 디지털화(BIM), 자동화(OCS)를 목표로 삼고있다.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{/* ================================================================================== */}
|
||||
{/* 🟢 [오른쪽 60%] - 너비는 넓어졌지만 "오른쪽 값" 유지 */}
|
||||
{/* ================================================================================== */}
|
||||
<div className="slide-content" style={{
|
||||
flex: 6,
|
||||
display: 'flex', flexDirection: 'column', justifyContent: 'flex-start',
|
||||
paddingLeft: '10px',
|
||||
height: '100%', overflowY: 'auto',
|
||||
|
||||
/* ⭐ 오른쪽은 구분선이 없으므로 "오른쪽 황금비율" 유지 */
|
||||
paddingTop: '0px'
|
||||
}}>
|
||||
|
||||
<h2 style={{
|
||||
fontSize: '1.5rem', fontWeight: 'bold',
|
||||
marginBottom: '0px', borderBottom: '2px solid #333', paddingBottom: '10px',
|
||||
|
||||
/* ⭐ 오른쪽 황금비율 유지 */
|
||||
marginTop: '-3px'
|
||||
}}>
|
||||
2. 건설산업 BIM 기본 지침 [국토교통부, 2020]
|
||||
</h2>
|
||||
|
||||
{/* 내용 */}
|
||||
<div style={{ fontSize: '1rem', lineHeight: '1.6', color: '#333', marginBottom: '20px' }}>
|
||||
<p>
|
||||
**정부 BIM 도입 개요 (건설산업 BIM 기본지침)**
|
||||
* **비전**: 디지털 전환을 통해 건설산업을 국가 신성장 동력으로 재도약
|
||||
* **목표**: 건설산업의 생산성 향상과 품질, 안전 및 친환경의 극대화
|
||||
* **기대 효과**:
|
||||
* **비용/공기**: 건설 비용 감소 및 기간 단축
|
||||
* **품질/안전**: 설계·시공 오류 최소화, 프로젝트 리스크 저감
|
||||
* **협업**: 협업과 의사소통 강화, 건설정보 통합관리
|
||||
</p>
|
||||
|
||||
<h2 style={{
|
||||
fontSize: '1.5rem', fontWeight: 'bold',
|
||||
marginBottom: '0px', borderBottom: '2px solid #333', paddingBottom: '10px',
|
||||
|
||||
/* ⭐ 오른쪽 황금비율 유지 */
|
||||
marginTop: '50px'
|
||||
}}>
|
||||
3. 스마트 건설 활성화 방안 [국토교통부, 2022]
|
||||
</h2>
|
||||
|
||||
{/* 내용 */}
|
||||
<div style={{ fontSize: '1rem', lineHeight: '1.6', color: '#333', marginBottom: '20px' }}>
|
||||
<p>
|
||||
**스마트 건설 활성화 방안 주요내용**
|
||||
| 구분 | 주요 내용 |
|
||||
| :--- | :--- |
|
||||
| **BIM**<br/>(Building Information Modeling) | **건설산업의 자동화, 지능화 등 스마트 건설을 실현하기 위한 기본 도구**<br/>건설정보 기반의 Process와 Products를 제공하여 디지털 전환의 기반을 마련함 |
|
||||
| **OSC**<br/>(Off-Site Construction) | **탈현장 건설 (공장 제작 시공)**<br/>단위부재 또는 유닛(여러 부재가 합쳐진 모듈 등)을 공장에서 사전 제작한 이후, 현장으로 이동하여 레고 블럭처럼 조립하는 방식 |
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ================================================================================== */}
|
||||
{/* 👇 [팝업 기능 최종본] 가림 현상 해결 + 정중앙 정렬 (기존 코드 지우고 붙여넣기) */}
|
||||
{/* ================================================================================== */}
|
||||
|
||||
<style>{`
|
||||
.zoomable { cursor: zoom-in; transition: transform 0.2s; }
|
||||
.zoomable:hover { transform: scale(1.02); }
|
||||
|
||||
/* 팝업 배경 설정 */
|
||||
#image-modal {
|
||||
display: none; /* 평소엔 숨김 */
|
||||
|
||||
/* ⭐ 핵심 1: 정중앙 정렬을 위한 Flexbox 도입 */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
position: fixed;
|
||||
left: 0; top: 0; width: 100%; height: 100%;
|
||||
|
||||
/* ⭐ 핵심 2: 사이트 메뉴바보다 무조건 위에 뜨게 Z-Index를 엄청 높게 설정 */
|
||||
z-index: 2147483647;
|
||||
|
||||
background-color: rgba(0,0,0,0.9); /* 배경을 더 어둡게 */
|
||||
backdrop-filter: blur(5px);
|
||||
padding: 20px; /* 가장자리 여백 확보 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 팝업 이미지 설정 */
|
||||
#modal-content {
|
||||
max-width: 60%;
|
||||
max-height: 95vh;
|
||||
object-fit: contain; /* 비율 유지하며 화면에 딱 맞춤 */
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 30px rgba(0,0,0,0.5);
|
||||
animation: popUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
/* 닫기 버튼 설정 */
|
||||
#modal-close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 30px;
|
||||
color: white;
|
||||
font-size: 50px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
z-index: 2147483648; /* 이미지보다도 더 위에 */
|
||||
line-height: 1;
|
||||
text-shadow: 0 0 10px rgba(0,0,0,0.5);
|
||||
}
|
||||
#modal-close:hover { color: #ff6b6b; transform: scale(1.1); transition: 0.2s; }
|
||||
|
||||
@keyframes popUp { from {transform:scale(0.8); opacity:0;} to {transform:scale(1); opacity:1;} }
|
||||
`}</style>
|
||||
|
||||
{/* 팝업창 HTML 구조 */}
|
||||
<div id="image-modal">
|
||||
<span id="modal-close">×</span>
|
||||
<img id="modal-content" />
|
||||
</div>
|
||||
|
||||
{/* 스크립트 */}
|
||||
<script>{`
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const modal = document.getElementById('image-modal');
|
||||
const modalImg = document.getElementById('modal-content');
|
||||
const closeBtn = document.getElementById('modal-close');
|
||||
const images = document.querySelectorAll('.zoomable');
|
||||
|
||||
// 1. 이미지 클릭 시 열기
|
||||
images.forEach(img => {
|
||||
img.addEventListener('click', function(e) {
|
||||
e.preventDefault(); // 혹시 모를 기본 동작 차단
|
||||
modal.style.display = "flex"; // ⭐ block 대신 flex로 열어야 중앙 정렬됨
|
||||
modalImg.src = this.src;
|
||||
modalImg.alt = this.alt;
|
||||
});
|
||||
});
|
||||
|
||||
// 2. 닫기 기능 함수
|
||||
function closeModal() {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
|
||||
// 3. 닫기 버튼 클릭
|
||||
if (closeBtn) closeBtn.onclick = closeModal;
|
||||
|
||||
// 4. 배경 클릭 시 닫기
|
||||
if (modal) {
|
||||
modal.onclick = function(event) {
|
||||
// 이미지를 제외한 배경(div)을 눌렀을 때만 닫기
|
||||
if (event.target === modal) {
|
||||
closeModal();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 5. ESC 키 누르면 닫기 (추가 편의기능)
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.key === "Escape" && modal.style.display === "flex") {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
});
|
||||
`}</script>
|
||||
107
samples/src/content/docs/작업폴더/콘텐츠 작업중/03. BIM-DX(스크롤0122).mdx
Normal file
107
samples/src/content/docs/작업폴더/콘텐츠 작업중/03. BIM-DX(스크롤0122).mdx
Normal file
@@ -0,0 +1,107 @@
|
||||
---
|
||||
title: 건설산업 DX의 올바른 이해
|
||||
sidebar:
|
||||
order: 0
|
||||
---
|
||||
|
||||
## 1. 배경 및 현황
|
||||
|
||||
건설산업의 디지털 전환(DX)을 이야기할 때, **BIM(Building Information Modeling)** 과 **스마트 건설(Smart Construction)**, **DX(Digital Transformation) 의 개념을 혼용**해서 사용하곤 한다. 이로 인해 **DX의 명확한 방향성을 설정하는 데 어려움**을 겪거나, BIM의 도입이 곧 DX를 달성하는 것처럼 생각하기도 한다.
|
||||
|
||||
따라서 건설산업의 DX를 살펴보기 앞서 **각 용어를 명확히 정의**하고 **상호 관계를 구분**하는 것은 **건설산업**이 나아가야 할 올바른 **디지털전환의 방향을 이해하는 첫걸음**이 된다.
|
||||
|
||||
|
||||
---
|
||||
<br/>
|
||||
|
||||
## 2 DX와 스마트건설
|
||||
|
||||
건설산업의 DX와 스마트건설은 상호 밀접한 연관은 있지만 동일한 개념은 아니다. 두 개념은 산업의 혁신을 바라보는 **관점**과 **범위**에서 차이가 있다.
|
||||
|
||||
|
||||
### 2.1 디지털전환(DX)
|
||||
>**DX(Digital Transformation)** 란 **디지털 기술과 도구를 활용**하여, 고객과 시장의 변화에 대응하며 새로운 가치를 창출하고 **산업생태계 및 업무수행방식(Process)을 혁신하는 과정과 그 결과**를 말한다.
|
||||
> 이를통해 고객 가치를 재구성하고 비즈니스 모델을 변혁하여 **산업 전반의 방향을 재정립**하는 것이 핵심이다.
|
||||
>
|
||||
> *Digital Transformation, IBM Institute for Business Value, 2011*
|
||||
> *What is Digital Transformation?, Agile Elephant, 2015*
|
||||
|
||||
### 2.2 스마트건설(Smart Construction)
|
||||
>전통적인 건설에 **디지털모델링·사물인터넷·인공지능·드론·로봇·플랫폼** 등 **혁신기술을 접목**하여 데이터 기반 엔지니어링, 건설장비 자동화, 가상건설, 안전관제 등을 구현하고 **건설 모든 단계의 디지털 전환**을 도모하여 건설 **생산성과 안전성을 획기적으로 향상**시키는 건설 방식을 말한다.
|
||||
>
|
||||
>*스마트건설 연구성과 총람, 국토교통과학기술진흥원, 2025*
|
||||
|
||||
### 2.3 DX와 스마트건설의 관계
|
||||
|
||||
| 구분 | 디지털 전환 (DX) | 스마트 건설 (Smart Construction) |
|
||||
| :---: | :--- | :--- |
|
||||
| **성격** | **산업 패러다임 전환**<br/>(Process 혁신) | **혁신기술 적용 및 개발** <br/>(3D, 자동화 로봇, OSC 등) |
|
||||
| **목적** | 산업생태계 및 업무수행방식 혁신 | 생산성 및 안전성 획기적 향상 |
|
||||
|
||||
*스마트 건설 활성화 방안, 국토교통부, 2022*
|
||||
|
||||
* 지향하는 목적의 차이는 존재하나 상호 **배타적인 개념은 아님**
|
||||
* **DX**와 **스마트건설**은 **BIM**이라는 교집합을 통해 연결됨
|
||||
* **BIM**은 **스마트건설을 위한 혁신기술**이자 **건설산업의 DX**를 위해 필요한 디지털 도구이기 때문
|
||||
|
||||
|
||||
*[그림 1] DX와 스마트건설의 관계*
|
||||
|
||||
|
||||
|
||||
---
|
||||
<br/>
|
||||
|
||||
## 3. DX와 BIM
|
||||
|
||||
**건설산업의 DX**는 **BIM(데이터와 도구)** 을 기반으로 **DX(혁신적 체계)** 를 구축하는 것으로 달성할 수 있다. 즉 **BIM은 DX를 달성하기 위한 기술적 도구**이다.
|
||||
|
||||
### 3.1 건설정보모델링(BIM)
|
||||
>**BIM (Building Information Modeling)** 은 시설물의 생애주기 동안 발생하는 모든 정보를 3D 모델 기반으로 통합하여, 건설정보와 절차를 표준화된 방식으로 상호 연계하고 디지털 협업이 가능하게 하는 **디지털전환(DX) 체계**를 의미한다.
|
||||
>
|
||||
> *건설산업 BIM 기본지침, 국토교통부, 2020*
|
||||
### 3.2. BIM vs DX 핵심 비교
|
||||
|
||||
| DX | 구분 | BIM |
|
||||
| :--- | :---: | ---: |
|
||||
| **BIM << DX**<br/>(Engineering + Management 통합) | **범위** | **Only 3D**<br/>(형상 구현 중심) |
|
||||
| **제작 및 운영**(상용 + 전용 40~80개)<br/>[Rhino, Sketchup, Blender..] + [EG-BIM 등] | **S/W** | **모델 제작용 상용 SW**<br/>[Revit, Civil 3D, Navisworks, Autocad] |
|
||||
| **근본적 문제의식을 통한 개선** | **프로세스** | **기존 2D 설계 방식 유지** |
|
||||
| **공학 정보 및 콘텐츠 연계에 집중**<br/>**도면, 수량, 시공계획 등 일식** | **성과품** | **3D 모델 중심**<br/>**기존 성과품 유지** |
|
||||
| **설계/시공 생산성 혁신**(개념의 재정립) | **활용** | **3D 모델에 의한 일반적 이해 향상** |
|
||||
| **전 생애주기 활용 시스템** | **확장성** | **(설계/시공/운영) 분야별 단절** |
|
||||
| **구체화(복잡) - 적극적/구체적 실현 방안** | **수행 개념** | **단순화(오류) - 수동적/집단적 동질화** |
|
||||
| **적극적, 주체적인 기술 접목/융합** | **CIVIL + IT** | **소극적, 상용 기술에 의존** |
|
||||
| **자체 수행 능력 - 지속가능성 확보** | **주체** | **S/W 제작사 판매 정책에 의존** |
|
||||
| **차별화 및 경쟁력 확보, 해외 진출** | **발주처** | **평준화, 국내 중심** |
|
||||
| **IT + CIVIL ENG 220명 운영 + 기술 개발** | **설계사** | **소규모 BIM팀 운영 + 단순교육에 집중** |
|
||||
| **분야 확장 모델 및 시스템** | **시공사** | **국내 토목 소극적/해외 토목증가** |
|
||||
|
||||
---
|
||||
<br/>
|
||||
|
||||
|
||||
## 4. 건설산업 DX의 구현
|
||||
**건설산업의 DX**는 **디지털 트윈(DT)**, **BIM**, **GIS**의 기술 융합을 통해서만 실현 또는 구현가능하다.
|
||||
|
||||
|
||||
특히 **인프라시설**의 **DT**는 실제 인프라시설 **위치정보(GIS)** 에 기반한 인프라시설의 **건설정보**가 포함된 **3D모델(BIM)** 을 생성하는 것이 필수적이다.
|
||||
|
||||
> * **GIS (위치 정보)**: 인프라 시설의 지리적 데이터 제공
|
||||
> * **BIM (형상/내용 정보)**: 건설 정보 기반의 Process와 Products 제공
|
||||
> * **DT (통합 구현)**: 위 요소들을 가상 공간에 통합하여 시뮬레이션 및 제어
|
||||
|
||||
|
||||
|
||||
*[그림 2] 건설산업의 디지털전환*
|
||||
|
||||
|
||||
|
||||
<br/>
|
||||
|
||||
:::note[핵심 요약]
|
||||
* **DX**는 **BIM**과 같은 **도구**를 기반으로 산업 전반의 **프로세스를 혁신**하는 **상위 개념**이다.
|
||||
* **건설산업의 DX**는 **DT(구현) + BIM(정보) + GIS(위치)** 의 **기술 융합**을 통해서만 완성된다.
|
||||
:::
|
||||
|
||||
|
||||
248
samples/src/content/docs/작업폴더/콘텐츠 작업중/03. BIM-DX1(슬라이드).mdx
Normal file
248
samples/src/content/docs/작업폴더/콘텐츠 작업중/03. BIM-DX1(슬라이드).mdx
Normal file
@@ -0,0 +1,248 @@
|
||||
---
|
||||
title: 건설산업의 DX 1 (슬라이드 6:4)
|
||||
sidebar:
|
||||
order: 3
|
||||
tableOfContents: false
|
||||
---
|
||||
|
||||
<style>{`
|
||||
.content-panel, .sl-container, .sl-markdown-content {
|
||||
max-width: 100% !important; padding: 0 !important; margin: 0 !important;
|
||||
}
|
||||
.slide-content ul { padding-left: 20px; margin-top: 5px; }
|
||||
.slide-content li { margin-bottom: 5px; }
|
||||
/* 테이블 스타일 */
|
||||
.custom-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.9rem; }
|
||||
.custom-table th { background: #f1f3f5; border: 1px solid #ddd; padding: 8px; text-align: center; }
|
||||
.custom-table td { border: 1px solid #ddd; padding: 8px; vertical-align: middle; }
|
||||
`}</style>
|
||||
|
||||
<div className="slide-container" style={{
|
||||
height: 'calc(100vh - 140px)', width: '100%', overflow: 'hidden', display: 'flex', flexDirection: 'column', padding: '0 40px'
|
||||
}}>
|
||||
|
||||
{/* 메인 컨테이너 */}
|
||||
<div style={{ flex: '1 1 auto', display: 'flex', gap: '40px', alignItems: 'stretch', marginTop: '10px', marginBottom: '20px' }}>
|
||||
|
||||
|
||||
{/* ================================================================================== */}
|
||||
{/* 🟢 [왼쪽 60%] */}
|
||||
{/* ================================================================================== */}
|
||||
<div className="slide-content" style={{
|
||||
flex: 6,
|
||||
display: 'flex', flexDirection: 'column', justifyContent: 'flex-start',
|
||||
borderRight: '1px solid #e0e0e0', paddingRight: '40px',
|
||||
height: '100%', overflowY: 'auto',
|
||||
paddingTop: '5px' /* ⭐ 상단 시작점 강제 통일 */
|
||||
}}>
|
||||
|
||||
{/* 1. 제목 (marginTop: '0' 추가로 높이 맞춤) */}
|
||||
<h2 style={{
|
||||
fontSize: '1.5rem', fontWeight: 'bold',
|
||||
marginBottom: '15px', borderBottom: '2px solid #333', paddingBottom: '10px',
|
||||
marginTop: '7px' /* ⭐ 핵심: 기본 마진 제거 */
|
||||
}}>
|
||||
1. 개요
|
||||
</h2>
|
||||
|
||||
{/* 2. 텍스트 내용 */}
|
||||
<div style={{ fontSize: '1rem', lineHeight: '1.6', color: '#333', marginBottom: '20px' }}>
|
||||
<p>
|
||||
* **BIM(Building Information Modeling)** 과 **DX(Digital Transformation) 의 개념이 혼용** 사용됨
|
||||
* **각 용어의 정의를 재정립**하고 **상호 관계를 명확히 구분**하여야 함
|
||||
|
||||
|
||||
### 1.1 건설산업
|
||||
|
||||
* 다양한 시설물을, 각 산업마다의 **광범위한 기술을 통합 및 융합**하여 만들어 내는 종합산업
|
||||
* 건설산업의 시설물 완성 목표
|
||||
* **최단기간**, **최소한의 비용**
|
||||
* **편리**, **안전**, **우수한 성능**
|
||||
|
||||
### 1.2 디지털 전환 (DX)
|
||||
|
||||
* 디지털 기술과 도구를 활용하여, 고객과 시장의 변화에 대응하며 새로운 가치 창출
|
||||
* **산업생태계 및 업무수행방식(Process)을 혁신하는 과정과 그 결과**
|
||||
* 고객 가치를 재구성하고 새로운 비즈니스 모델을 창출하여 **산업 전반의 방향을 재정립**
|
||||
|
||||
### 1.3 건설정보모델링 (BIM)
|
||||
|
||||
* 시설물의 생애주기 동안 발생하는 모든정보를 3D 모델 기반으로 통합
|
||||
* 건설정보와 절차를 표준화된 방식으로 상호 연계
|
||||
* 디지털 협업이 가능하게 하는 **디지털전환(DX) 체계**를 의미
|
||||
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{/* 4. 핵심 요약 */}
|
||||
<div style={{ marginTop: 'auto', padding: '15px', backgroundColor: '#e7f5ff', borderLeft: '5px solid #0056b3', borderRadius: '4px', fontSize: '1rem' }}>
|
||||
<div style={{ fontWeight: 'bold', marginBottom: '5px', color: '#0056b3' }}>ℹ️ 핵심 요약</div>
|
||||
<ul style={{ margin: 0, paddingLeft: '20px' }}>
|
||||
<li>건설산업의 DX는 DT(구현) + BIM(정보) + GIS(위치) 의 기술 융합을 통해서만 완성된다.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{/* ================================================================================== */}
|
||||
{/* 🟠 [오른쪽 40%] */}
|
||||
{/* ================================================================================== */}
|
||||
<div className="slide-content" style={{
|
||||
flex: 4,
|
||||
display: 'flex', flexDirection: 'column', justifyContent: 'flex-start',
|
||||
paddingLeft: '10px',
|
||||
height: '100%', overflowY: 'auto',
|
||||
paddingTop: '0px' /* ⭐ 상단 시작점 강제 통일 */
|
||||
}}>
|
||||
|
||||
{/* 1. 제목 (marginTop: '0' 추가) */}
|
||||
<h2 style={{
|
||||
fontSize: '1.5rem', fontWeight: 'bold',
|
||||
marginBottom: '15px', borderBottom: '2px solid #333', paddingBottom: '10px',
|
||||
marginTop: '-3px' /* ⭐ 핵심: 기본 마진 제거 */
|
||||
}}>
|
||||
2. 건설산업 DX의 의미
|
||||
</h2>
|
||||
|
||||
{/* 2. 텍스트 내용 */}
|
||||
<div style={{ fontSize: '1rem', lineHeight: '1.6', color: '#333', marginBottom: '20px' }}>
|
||||
<p>
|
||||
**건설산업의 DX**는 **디지털 트윈(DT)**, **BIM**, **GIS**의 기술 융합을 통해서만 실현 또는 구현가능하다.
|
||||
특히 **인프라시설**의 **DT**는 실제 인프라시설 **위치정보(GIS)** 에 기반한 인프라시설의 **건설정보**가 포함된 **3D모델(BIM)** 을 생성하는 것이 필수적이다.
|
||||
* **GIS (위치 정보)**: 인프라 시설의 지리적 데이터 제공
|
||||
* **BIM (형상/내용 정보)**: 건설 정보 기반의 Process와 Products 제공
|
||||
* **DT (통합 구현)**: 위 요소들을 가상 공간에 통합하여 시뮬레이션 및 제어
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 3. 이미지 & 캡션 */}
|
||||
<div style={{ textAlign: 'center', marginBottom: '20px' }}>
|
||||
<img
|
||||
src="/assets/images/그림5.png"
|
||||
className="zoomable"
|
||||
alt="건설산업의 디지털전환"
|
||||
style={{ maxWidth: '100%', maxHeight: '30vh', objectFit: 'contain', borderRadius: '8px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)' }}
|
||||
/>
|
||||
<p style={{ fontSize: '0.9rem', color: '#666', marginTop: '5px' }}>
|
||||
*[그림 1] 건설산업의 디지털전환*
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* ================================================================================== */}
|
||||
{/* 👇 [팝업 기능 최종본] 가림 현상 해결 + 정중앙 정렬 (기존 코드 지우고 붙여넣기) */}
|
||||
{/* ================================================================================== */}
|
||||
|
||||
<style>{`
|
||||
.zoomable { cursor: zoom-in; transition: transform 0.2s; }
|
||||
.zoomable:hover { transform: scale(1.02); }
|
||||
|
||||
/* 팝업 배경 설정 */
|
||||
#image-modal {
|
||||
display: none; /* 평소엔 숨김 */
|
||||
|
||||
/* ⭐ 핵심 1: 정중앙 정렬을 위한 Flexbox 도입 */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
position: fixed;
|
||||
left: 0; top: 0; width: 100%; height: 100%;
|
||||
|
||||
/* ⭐ 핵심 2: 사이트 메뉴바보다 무조건 위에 뜨게 Z-Index를 엄청 높게 설정 */
|
||||
z-index: 2147483647;
|
||||
|
||||
background-color: rgba(0,0,0,0.9); /* 배경을 더 어둡게 */
|
||||
backdrop-filter: blur(5px);
|
||||
padding: 20px; /* 가장자리 여백 확보 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 팝업 이미지 설정 */
|
||||
#modal-content {
|
||||
max-width: 60%;
|
||||
max-height: 95vh;
|
||||
object-fit: contain; /* 비율 유지하며 화면에 딱 맞춤 */
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 30px rgba(0,0,0,0.5);
|
||||
animation: popUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
/* 닫기 버튼 설정 */
|
||||
#modal-close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 30px;
|
||||
color: white;
|
||||
font-size: 50px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
z-index: 2147483648; /* 이미지보다도 더 위에 */
|
||||
line-height: 1;
|
||||
text-shadow: 0 0 10px rgba(0,0,0,0.5);
|
||||
}
|
||||
#modal-close:hover { color: #ff6b6b; transform: scale(1.1); transition: 0.2s; }
|
||||
|
||||
@keyframes popUp { from {transform:scale(0.8); opacity:0;} to {transform:scale(1); opacity:1;} }
|
||||
`}</style>
|
||||
|
||||
{/* 팝업창 HTML 구조 */}
|
||||
<div id="image-modal">
|
||||
<span id="modal-close">×</span>
|
||||
<img id="modal-content" />
|
||||
</div>
|
||||
|
||||
{/* 스크립트 */}
|
||||
<script>{`
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const modal = document.getElementById('image-modal');
|
||||
const modalImg = document.getElementById('modal-content');
|
||||
const closeBtn = document.getElementById('modal-close');
|
||||
const images = document.querySelectorAll('.zoomable');
|
||||
|
||||
// 1. 이미지 클릭 시 열기
|
||||
images.forEach(img => {
|
||||
img.addEventListener('click', function(e) {
|
||||
e.preventDefault(); // 혹시 모를 기본 동작 차단
|
||||
modal.style.display = "flex"; // ⭐ block 대신 flex로 열어야 중앙 정렬됨
|
||||
modalImg.src = this.src;
|
||||
modalImg.alt = this.alt;
|
||||
});
|
||||
});
|
||||
|
||||
// 2. 닫기 기능 함수
|
||||
function closeModal() {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
|
||||
// 3. 닫기 버튼 클릭
|
||||
if (closeBtn) closeBtn.onclick = closeModal;
|
||||
|
||||
// 4. 배경 클릭 시 닫기
|
||||
if (modal) {
|
||||
modal.onclick = function(event) {
|
||||
// 이미지를 제외한 배경(div)을 눌렀을 때만 닫기
|
||||
if (event.target === modal) {
|
||||
closeModal();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 5. ESC 키 누르면 닫기 (추가 편의기능)
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.key === "Escape" && modal.style.display === "flex") {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
});
|
||||
`}</script>
|
||||
242
samples/src/content/docs/작업폴더/콘텐츠 작업중/03. BIM-DX2(슬라이드).mdx
Normal file
242
samples/src/content/docs/작업폴더/콘텐츠 작업중/03. BIM-DX2(슬라이드).mdx
Normal file
@@ -0,0 +1,242 @@
|
||||
---
|
||||
title: 건설산업의 DX 2 (슬라이드 4:6)
|
||||
sidebar:
|
||||
order: 4
|
||||
tableOfContents: false
|
||||
---
|
||||
|
||||
<style>{`
|
||||
.content-panel, .sl-container, .sl-markdown-content {
|
||||
max-width: 100% !important; padding: 0 !important; margin: 0 !important;
|
||||
}
|
||||
.slide-content ul { padding-left: 20px; margin-top: 5px; }
|
||||
.slide-content li { margin-bottom: 5px; }
|
||||
/* 테이블 스타일 */
|
||||
.custom-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.9rem; }
|
||||
.custom-table th { background: #f1f3f5; border: 1px solid #ddd; padding: 8px; text-align: center; }
|
||||
.custom-table td { border: 1px solid #ddd; padding: 8px; vertical-align: middle; }
|
||||
`}</style>
|
||||
|
||||
<div className="slide-container" style={{
|
||||
height: 'calc(100vh - 140px)', width: '100%', overflow: 'hidden', display: 'flex', flexDirection: 'column', padding: '0 40px'
|
||||
}}>
|
||||
|
||||
{/* 메인 컨테이너 */}
|
||||
<div style={{ flex: '1 1 auto', display: 'flex', gap: '40px', alignItems: 'stretch', marginTop: '10px', marginBottom: '20px' }}>
|
||||
|
||||
|
||||
{/* ================================================================================== */}
|
||||
{/* 🟠 [왼쪽 40%] - 너비는 좁아졌지만 "왼쪽 값" 유지 */}
|
||||
{/* ================================================================================== */}
|
||||
<div className="slide-content" style={{
|
||||
flex: 4,
|
||||
display: 'flex', flexDirection: 'column', justifyContent: 'flex-start',
|
||||
borderRight: '1px solid #e0e0e0', paddingRight: '40px',
|
||||
height: '100%', overflowY: 'auto',
|
||||
|
||||
/* ⭐ 왼쪽은 구분선 영향이 있으므로 "왼쪽 황금비율" 유지 */
|
||||
paddingTop: '5px'
|
||||
}}>
|
||||
|
||||
<h2 style={{
|
||||
fontSize: '1.5rem', fontWeight: 'bold',
|
||||
marginBottom: '15px', borderBottom: '2px solid #333', paddingBottom: '10px',
|
||||
|
||||
/* ⭐ 왼쪽 황금비율 유지 */
|
||||
marginTop: '7px'
|
||||
}}>
|
||||
1. BIM과 DX의 관계
|
||||
</h2>
|
||||
|
||||
{/* 내용 */}
|
||||
<div style={{ fontSize: '1rem', lineHeight: '1.6', color: '#333', marginBottom: '-20px' }}>
|
||||
<ul>
|
||||
* **BIM(도구)** 로 **DX(혁신 체계)** 를 구축하여 건설산업의 디지털 전환 달성
|
||||
* **BIM (기술)**: 형상/속성 정보를 담은 3D모델로 **디지털 기초 데이터** 생성
|
||||
* **DX (체계)**: 생성데이터를 비즈니스 전반에 연동, **프로세스 혁신** 실현
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style={{ textAlign: 'center', marginBottom: '20px' }}>
|
||||
<img
|
||||
src="/assets/images/01.png"
|
||||
alt="디지털 전환 개념도"
|
||||
className="zoomable"
|
||||
style={{ maxWidth: '100%', maxHeight: '50vh', objectFit: 'contain', borderRadius: '8px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)' }}
|
||||
/>
|
||||
<p style={{ fontSize: '0.9rem', color: '#666', marginTop: '5px' }}>
|
||||
*[사진 1] 디지털 전환 개념도*
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 핵심 요약 */}
|
||||
<div style={{ marginTop: '5px', padding: '15px', backgroundColor: '#e7f5ff', borderLeft: '5px solid #0056b3', borderRadius: '4px', fontSize: '1rem' }}>
|
||||
<div style={{ fontWeight: 'bold', marginBottom: '5px', color: '#0056b3' }}>ℹ️ 핵심 요약</div>
|
||||
<ul style={{ margin: 0, paddingLeft: '20px' }}>
|
||||
<li>**DX**는 **BIM**과 같은 **도구**를 기반으로 산업 전반의 **프로세스를 혁신**하는 **상위 개념**이다.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{/* ================================================================================== */}
|
||||
{/* 🟢 [오른쪽 60%] - 너비는 넓어졌지만 "오른쪽 값" 유지 */}
|
||||
{/* ================================================================================== */}
|
||||
<div className="slide-content" style={{
|
||||
flex: 6,
|
||||
display: 'flex', flexDirection: 'column', justifyContent: 'flex-start',
|
||||
paddingLeft: '10px',
|
||||
height: '100%', overflowY: 'auto',
|
||||
|
||||
/* ⭐ 오른쪽은 구분선이 없으므로 "오른쪽 황금비율" 유지 */
|
||||
paddingTop: '0px'
|
||||
}}>
|
||||
|
||||
<h2 style={{
|
||||
fontSize: '1.5rem', fontWeight: 'bold',
|
||||
marginBottom: '0px', borderBottom: '2px solid #333', paddingBottom: '10px',
|
||||
|
||||
/* ⭐ 오른쪽 황금비율 유지 */
|
||||
marginTop: '-3px'
|
||||
}}>
|
||||
2. BIM VS DX
|
||||
</h2>
|
||||
|
||||
{/* 내용 */}
|
||||
<div style={{ fontSize: '1rem', lineHeight: '1.6', color: '#333', marginBottom: '20px' }}>
|
||||
<p>
|
||||
| BIM | 구분 | DX |
|
||||
| :--- | :---: | ---: |
|
||||
| **Only 3D**<br/>(형상 구현 중심) | **범위** | **BIM << DX**<br/>(Engineering + Management 통합) |
|
||||
| **모델 제작용 상용 SW**<br/>[Revit, Civil 3D, Navisworks, Autocad] | **S/W** | **제작 및 운영**(상용 + 전용 40~80개)<br/>[Rhino, Sketchup, Blender..] + [EG-BIM 등] |
|
||||
| **기존 2D 설계 방식 유지** | **프로세스** | **근본적 문제의식을 통한 개선** |
|
||||
| **3D 모델 중심**<br/>**기존 성과품 유지** | **성과품** | **공학 정보 및 콘텐츠 연계에 집중**<br/>**도면, 수량, 시공계획 등 일식** |
|
||||
| **3D 모델에 의한 일반적 이해 향상** | **활용** | **설계/시공 생산성 혁신**(개념의 재정립) |
|
||||
| **(설계/시공/운영) 분야별 단절** | **확장성** | **전 생애주기 활용 시스템** |
|
||||
| **단순화(오류) - 수동적/집단적 동질화** | **수행 개념** | **구체화(복잡) - 적극적/구체적 실현 방안** |
|
||||
| **소극적, 상용 기술에 의존** | **CIVIL + IT** | **적극적, 주체적인 기술 접목/융합** |
|
||||
| **S/W 제작사 판매 정책에 의존** | **주체** | **자체 수행 능력 - 지속가능성 확보** |
|
||||
| **평준화, 국내 중심** | **발주처** | **차별화 및 경쟁력 확보, 해외 진출** |
|
||||
| **소규모 BIM팀 운영 + 단순교육에 집중** | **설계사** | **IT + CIVIL ENG 220명 운영 + 기술 개발** |
|
||||
| **국내 토목 소극적/해외 토목증가** | **시공사** | **분야 확장 모델 및 시스템** |
|
||||
</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ================================================================================== */}
|
||||
{/* 👇 [팝업 기능 최종본] 가림 현상 해결 + 정중앙 정렬 (기존 코드 지우고 붙여넣기) */}
|
||||
{/* ================================================================================== */}
|
||||
|
||||
<style>{`
|
||||
.zoomable { cursor: zoom-in; transition: transform 0.2s; }
|
||||
.zoomable:hover { transform: scale(1.02); }
|
||||
|
||||
/* 팝업 배경 설정 */
|
||||
#image-modal {
|
||||
display: none; /* 평소엔 숨김 */
|
||||
|
||||
/* ⭐ 핵심 1: 정중앙 정렬을 위한 Flexbox 도입 */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
position: fixed;
|
||||
left: 0; top: 0; width: 100%; height: 100%;
|
||||
|
||||
/* ⭐ 핵심 2: 사이트 메뉴바보다 무조건 위에 뜨게 Z-Index를 엄청 높게 설정 */
|
||||
z-index: 2147483647;
|
||||
|
||||
background-color: rgba(0,0,0,0.9); /* 배경을 더 어둡게 */
|
||||
backdrop-filter: blur(5px);
|
||||
padding: 20px; /* 가장자리 여백 확보 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 팝업 이미지 설정 */
|
||||
#modal-content {
|
||||
max-width: 60%;
|
||||
max-height: 95vh;
|
||||
object-fit: contain; /* 비율 유지하며 화면에 딱 맞춤 */
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 30px rgba(0,0,0,0.5);
|
||||
animation: popUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
/* 닫기 버튼 설정 */
|
||||
#modal-close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 30px;
|
||||
color: white;
|
||||
font-size: 50px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
z-index: 2147483648; /* 이미지보다도 더 위에 */
|
||||
line-height: 1;
|
||||
text-shadow: 0 0 10px rgba(0,0,0,0.5);
|
||||
}
|
||||
#modal-close:hover { color: #ff6b6b; transform: scale(1.1); transition: 0.2s; }
|
||||
|
||||
@keyframes popUp { from {transform:scale(0.8); opacity:0;} to {transform:scale(1); opacity:1;} }
|
||||
`}</style>
|
||||
|
||||
{/* 팝업창 HTML 구조 */}
|
||||
<div id="image-modal">
|
||||
<span id="modal-close">×</span>
|
||||
<img id="modal-content" />
|
||||
</div>
|
||||
|
||||
{/* 스크립트 */}
|
||||
<script>{`
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const modal = document.getElementById('image-modal');
|
||||
const modalImg = document.getElementById('modal-content');
|
||||
const closeBtn = document.getElementById('modal-close');
|
||||
const images = document.querySelectorAll('.zoomable');
|
||||
|
||||
// 1. 이미지 클릭 시 열기
|
||||
images.forEach(img => {
|
||||
img.addEventListener('click', function(e) {
|
||||
e.preventDefault(); // 혹시 모를 기본 동작 차단
|
||||
modal.style.display = "flex"; // ⭐ block 대신 flex로 열어야 중앙 정렬됨
|
||||
modalImg.src = this.src;
|
||||
modalImg.alt = this.alt;
|
||||
});
|
||||
});
|
||||
|
||||
// 2. 닫기 기능 함수
|
||||
function closeModal() {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
|
||||
// 3. 닫기 버튼 클릭
|
||||
if (closeBtn) closeBtn.onclick = closeModal;
|
||||
|
||||
// 4. 배경 클릭 시 닫기
|
||||
if (modal) {
|
||||
modal.onclick = function(event) {
|
||||
// 이미지를 제외한 배경(div)을 눌렀을 때만 닫기
|
||||
if (event.target === modal) {
|
||||
closeModal();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 5. ESC 키 누르면 닫기 (추가 편의기능)
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.key === "Escape" && modal.style.display === "flex") {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
});
|
||||
`}</script>
|
||||
213
samples/src/content/docs/작업폴더/콘텐츠 작업중/04. DX의 핵심목표 및 기대효과.mdx
Normal file
213
samples/src/content/docs/작업폴더/콘텐츠 작업중/04. DX의 핵심목표 및 기대효과.mdx
Normal file
@@ -0,0 +1,213 @@
|
||||
---
|
||||
title: DX의 목표와 필수요건
|
||||
sidebar:
|
||||
order: 7
|
||||
---
|
||||
|
||||
## DX 목표
|
||||
<br/>
|
||||
|
||||
|
||||
### 고객 편익 목표
|
||||
**안전과 품질**
|
||||
* **안전성 제고** : 시설물의 요구성능 만족, 건설 및 운영중인 안전확보
|
||||
* **품질 향상** : copy & paste로 하향 평준화된 기존 성과물의 품질 향상
|
||||
<br/>
|
||||
|
||||
**혁신과 효율**
|
||||
* **신속,정확성 증진** : Analogue 기반 업무를 digital화 하는 Process 혁신
|
||||
* **비용저감, 부가가치 창출** : 건설비용 및 유지관리비 감소, 인력투입 최소화 등 생산성 향상
|
||||
<br/>
|
||||
|
||||
**소통과 신뢰**
|
||||
* **소통, 이해 원활** : 성과품과 Solution등의 사용 편리성, 협업 및 의사소통 강화
|
||||
* **신뢰, 투명성 강화** : 3D모델을 통한 오류 최소화 및 Claim 예방
|
||||
<br/>
|
||||
|
||||
|
||||
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
### 정책 목표
|
||||
<br/>
|
||||
|
||||
<br/>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', backgroundColor: '#f8f9fa', border: '1px solid #e9ecef', borderRadius: '12px', padding: '20px 0', textAlign: 'center', alignItems: 'center' }}>
|
||||
|
||||
<div style={{ borderRight: '1px solid #ddd', padding: '0 10px' }}>
|
||||
<span style={{ fontSize: '0.9em', color: '#555' }}>✅ 공기/공사비</span><br/>
|
||||
<span style={{ fontSize: '1.4em', fontWeight: 'bold', color: '#222' }}>30% 절감</span>
|
||||
</div>
|
||||
|
||||
<div style={{ borderRight: '1px solid #ddd', padding: '0 10px' }}>
|
||||
<span style={{ fontSize: '0.9em', color: '#555' }}>✅ 안전사고</span><br/>
|
||||
<span style={{ fontSize: '1.4em', fontWeight: 'bold', color: '#222' }}>40% 감소</span>
|
||||
</div>
|
||||
|
||||
<div style={{ borderRight: '1px solid #ddd', padding: '0 10px' }}>
|
||||
<span style={{ fontSize: '0.9em', color: '#555' }}>✅ 국가 신성장</span><br/>
|
||||
<span style={{ fontSize: '1.4em', fontWeight: 'bold', color: '#222' }}>동력 재도약</span>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: '0 10px' }}>
|
||||
<span style={{ fontSize: '0.9em', color: '#555' }}>✅ 고부가가치</span><br/>
|
||||
<span style={{ fontSize: '1.4em', fontWeight: 'bold', color: '#222' }}>산업 전환</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
## DX 성공을 위한 필수 요건
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '30px', marginBottom: '40px' }}>
|
||||
|
||||
{/* 1. 기술 (Blue) */}
|
||||
<div style={{ borderTop: '4px solid #1565c0', backgroundColor: '#f5f9fd', padding: '25px', borderRadius: '8px', boxShadow: '0 2px 4px rgba(0,0,0,0.05)' }}>
|
||||
<h3 style={{ color: '#1565c0', marginTop: 0, fontSize: '1.3em', borderBottom: '2px solid #e3f2fd', paddingBottom: '10px', marginBottom: '15px' }}>
|
||||
🛠️ 기술 (Digital)
|
||||
</h3>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
|
||||
<div>
|
||||
<strong style={{ color: '#0d47a1' }}>건설산업·토목에 대한 깊은 기반 지식</strong>
|
||||
<ul style={{ fontSize: '0.95em', color: '#555', paddingLeft: '20px', margin: '5px 0' }}>
|
||||
<li>건설 단계별 분야에서의 근본적인 이해와 지식 및 경험</li>
|
||||
<li>최신 토목 기술 트렌드와 표준 기준 등에 대한 높은 지식</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<strong style={{ color: '#0d47a1' }}>높은 S/W 기술 (Digital Technology)</strong>
|
||||
<ul style={{ fontSize: '0.95em', color: '#555', paddingLeft: '20px', margin: '5px 0' }}>
|
||||
<li>다양한 기술적 도구(S/W, H/W)와 Process의 효과적인 통합</li>
|
||||
<li>프로젝트 전반에 걸친 업무 프로세스의 연결 및 조율</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 2. 사람 (Orange) */}
|
||||
<div style={{ borderTop: '4px solid #ef6c00', backgroundColor: '#fff8e1', padding: '25px', borderRadius: '8px', boxShadow: '0 2px 4px rgba(0,0,0,0.05)' }}>
|
||||
<h3 style={{ color: '#ef6c00', marginTop: 0, fontSize: '1.3em', borderBottom: '2px solid #ffe0b2', paddingBottom: '10px', marginBottom: '15px' }}>
|
||||
👥 사람 (역량)
|
||||
</h3>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
|
||||
<div>
|
||||
<strong style={{ color: '#e65100' }}>분야별 전문지식 역량을 갖춘 기술자</strong>
|
||||
<ul style={{ fontSize: '0.95em', color: '#555', paddingLeft: '20px', margin: '5px 0' }}>
|
||||
<li>엔지니어의 Know-how와 디지털 지식의 융합</li>
|
||||
<li>혁신적 사고방식과 창의적 문제 해결 능력</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<strong style={{ color: '#e65100' }}>디지털화 역량 및 개발경험 많은 개발자</strong>
|
||||
<ul style={{ fontSize: '0.95em', color: '#555', paddingLeft: '20px', margin: '5px 0' }}>
|
||||
<li>다양한 Solution S/W를 개발할 수 있는 역량을 갖춘 Programmer</li>
|
||||
<li>사용자 중심의 생각과 시행 착오를 포함한 DX 수행 경험</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3. 여건 (Green) */}
|
||||
<div style={{ borderTop: '4px solid #2e7d32', backgroundColor: '#e8f5e9', padding: '25px', borderRadius: '8px', boxShadow: '0 2px 4px rgba(0,0,0,0.05)' }}>
|
||||
<h3 style={{ color: '#2e7d32', marginTop: 0, fontSize: '1.3em', borderBottom: '2px solid #c8e6c9', paddingBottom: '10px', marginBottom: '15px' }}>
|
||||
🌏 여건 (환경)
|
||||
</h3>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
|
||||
<div>
|
||||
<strong style={{ color: '#1b5e20' }}>받아들일 수 있는 사회·기업·제도 등의 여건</strong>
|
||||
<ul style={{ fontSize: '0.95em', color: '#555', paddingLeft: '20px', margin: '5px 0' }}>
|
||||
<li>목표만 제시하는 지침이 아닌, 수행사례와 효과검증을 통한 시행</li>
|
||||
<li>기존 수행방식, 사고의 틀, 관습 등에 의한 접근 방식 탈피</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<strong style={{ color: '#1b5e20' }}>지속적·장기적 투자를 수행할 능력과 의지</strong>
|
||||
<ul style={{ fontSize: '0.95em', color: '#555', paddingLeft: '20px', margin: '5px 0' }}>
|
||||
<li>기술 개발을 위한 대규모 투자 및 Process 혁신을 위한 지속적인 투자</li>
|
||||
<li>변화와 혁신을 통한 부가가치 창출을 위한 실행 의지와 실행력</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
### 시행 주체별 필요 역량 및 이점
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '20px', alignItems: 'start' }}>
|
||||
|
||||
{/* 1. 발주자 (Client) - 청록색 */}
|
||||
<div style={{ border: '1px solid #e0e0e0', borderRadius: '12px', overflow: 'hidden', backgroundColor: '#fff', boxShadow: '0 4px 6px rgba(0,0,0,0.05)' }}>
|
||||
{/* 헤더 */}
|
||||
<div style={{ backgroundColor: '#00897b', padding: '15px', textAlign: 'center', color: '#fff' }}>
|
||||
<h3 style={{ margin: 0, fontSize: '1.2em', color: '#fff' }}>👨💼 발주자</h3>
|
||||
<span style={{ fontSize: '0.8em', opacity: 0.9 }}>(실행 의지와 합리적 판단 역량 확보 후)</span>
|
||||
</div>
|
||||
{/* 내용 */}
|
||||
<div style={{ padding: '20px' }}>
|
||||
<ul style={{ margin: 0, paddingLeft: '20px', fontSize: '0.95em', color: '#333', lineHeight: '1.6' }}>
|
||||
<li style={{ marginBottom: '8px' }}>설계변경, 민원, 재작업, 소송 등의 <strong>사전 예방 및 최소화</strong></li>
|
||||
<li style={{ marginBottom: '8px' }}>3D 모델을 통한 <strong>직관적 시각화</strong>로 품질 향상 및 안전성 제고</li>
|
||||
<li style={{ marginBottom: '8px' }}>건설단계별 상태에 대한 쉬운 이해로 <strong>관리 편의성 증진</strong></li>
|
||||
<li style={{ marginBottom: '8px' }}>실무자와 발주자의 원활한 의사소통으로 <strong>오류 최소화</strong></li>
|
||||
<li style={{ marginBottom: '8px' }}>행정서류의 자동 생성 및 최소화로 <strong>업무 생산성 향상</strong></li>
|
||||
<li style={{ marginBottom: '8px' }}>디지털 환경 구축 후 건설정보 통합관리로 <strong>활용성 강화</strong></li>
|
||||
<li style={{ marginBottom: '8px' }}>인프라시설 전 생애주기에 걸친 <strong>효율적 디지털 자산 관리</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 2. 시공자 (Constructor) - 남색 */}
|
||||
<div style={{ border: '1px solid #e0e0e0', borderRadius: '12px', overflow: 'hidden', backgroundColor: '#fff', boxShadow: '0 4px 6px rgba(0,0,0,0.05)' }}>
|
||||
{/* 헤더 */}
|
||||
<div style={{ backgroundColor: '#546e7a', padding: '15px', textAlign: 'center', color: '#fff' }}>
|
||||
<h3 style={{ margin: 0, fontSize: '1.2em', color: '#fff' }}>👷♂️ 시공자</h3>
|
||||
<span style={{ fontSize: '0.8em', opacity: 0.9 }}>(기술투자와 운영 역량 확보 후)</span>
|
||||
</div>
|
||||
{/* 내용 */}
|
||||
<div style={{ padding: '20px' }}>
|
||||
<ul style={{ margin: 0, paddingLeft: '20px', fontSize: '0.95em', color: '#333', lineHeight: '1.6' }}>
|
||||
<li style={{ marginBottom: '8px' }}>설계/시공 오류 예방 및 의사소통으로 <strong>공사 Risk 최소화</strong></li>
|
||||
<li style={{ marginBottom: '8px' }}>직관적 시각화로 <strong>안전성 제고 및 품질 향상</strong></li>
|
||||
<li style={{ marginBottom: '8px' }}>중간태, 완성태 측량을 통한 <strong>시·공간적 관리의 편리성 향상</strong></li>
|
||||
<li style={{ marginBottom: '8px' }}>체계적 공정 및 기성 관리로 <strong>신뢰성 확보 및 생산성 향상</strong></li>
|
||||
<li style={{ marginBottom: '8px' }}>체계적 행정서류 감소를 통한 <strong>의사소통 강화</strong></li>
|
||||
<li style={{ marginBottom: '8px' }}>Model 활용을 통해 <strong>시공상세도 등의 관련도서 작성 용이</strong></li>
|
||||
<li style={{ marginBottom: '8px' }}>System 구축 시 품질·안전 등에 필요한 <strong>도서 작성 용이</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3. 설계자 (Designer) - 보라색 */}
|
||||
<div style={{ border: '1px solid #e0e0e0', borderRadius: '12px', overflow: 'hidden', backgroundColor: '#fff', boxShadow: '0 4px 6px rgba(0,0,0,0.05)' }}>
|
||||
{/* 헤더 */}
|
||||
<div style={{ backgroundColor: '#5e35b1', padding: '15px', textAlign: 'center', color: '#fff' }}>
|
||||
<h3 style={{ margin: 0, fontSize: '1.2em', color: '#fff' }}>👨💻 설계자</h3>
|
||||
<span style={{ fontSize: '0.8em', opacity: 0.9 }}>(기술개발 투자에 의한 S/W 역량 확보 후)</span>
|
||||
</div>
|
||||
{/* 내용 */}
|
||||
<div style={{ padding: '20px' }}>
|
||||
<ul style={{ margin: 0, paddingLeft: '20px', fontSize: '0.95em', color: '#333', lineHeight: '1.6' }}>
|
||||
<li style={{ marginBottom: '8px' }}>직관적 시각화에 의한 업무협의 등에서 <strong>원활한 소통</strong></li>
|
||||
<li style={{ marginBottom: '8px' }}>3D 모델 활용으로 설계 오류 최소화 및 <strong>Claim 예방</strong></li>
|
||||
<li style={{ marginBottom: '8px' }}>설계 신뢰도 확보, 발주자 이익 기여로 <strong>상호신뢰 증진</strong></li>
|
||||
<li style={{ marginBottom: '8px' }}>기술개발을 통한 기술력 보유 시 <strong>획기적 설계 생산성 향상</strong></li>
|
||||
<li style={{ marginBottom: '8px' }}>다양한 성과물과 정보물 생산으로 <strong>추가적 부가가치 창출</strong></li>
|
||||
<li style={{ marginBottom: '8px' }}>목적물 생산의 보조자에서 <strong>고부가가치 창출 산업으로 전환</strong></li>
|
||||
<li style={{ marginBottom: '8px' }}>프로젝트 정보의 일관성 유지 및 관리를 통한 <strong>오류 최소화</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{/* 하단 결론 메시지 */}
|
||||
<div style={{ padding: '20px', backgroundColor: '#f5f5f5', borderLeft: '5px solid #006064', borderRadius: '4px' }}>
|
||||
* <strong> 고품질의 성과품, 비용 절감, 시간 단축, 의사소통 강화 등에 도움이 안되면 BIM/DX가 아니다. </strong>
|
||||
* <strong> bIM과 DX의 시행주체는 얻을 수 있는 이점을 명확히 이해하고, 필요한 역량을 갖춘 후 시행해야만 그 효과를 기대할 수 있다. </strong>
|
||||
</div>
|
||||
151
samples/src/content/docs/작업폴더/콘텐츠 작업중/05. 국내 BIMDX 실태.mdx
Normal file
151
samples/src/content/docs/작업폴더/콘텐츠 작업중/05. 국내 BIMDX 실태.mdx
Normal file
@@ -0,0 +1,151 @@
|
||||
---
|
||||
title: 국내 BIM/DX 실태
|
||||
sidebar:
|
||||
order: 6
|
||||
---
|
||||
|
||||
## 1. DX(BIM)에 대한 현장의 인식
|
||||
|
||||
---
|
||||
|
||||
### ① 기술 및 소프트웨어 이해도
|
||||
> **"무슨 말인지 잘 모르겠다, 어디까지 어떻게 해야 하는지 모르겠다"**
|
||||
|
||||
* 기본지침, 시행지침 등 새롭게 알아야 할 게 너무 많다.
|
||||
* 우리가 필요한 것은 쉽고 간단한 건데, 왜 이렇게 복잡하게 만들까?
|
||||
|
||||
### ② 효과와 효율성
|
||||
> **"2D 설계 후 전환설계를 수행하는데 효과는 모르겠고, 효율은 낮다"**
|
||||
|
||||
* 성과품 작성은 기존과 같게 하고, 추가 업무만 발생해 효율이 낮다.
|
||||
* 결과적으로 큰 차이를 못 느끼겠고, 이런 노력이 정말 가치 있는 일이야?
|
||||
|
||||
### ③ 인력 및 교육
|
||||
> **"수행 인력이 부족하고, 기존 직원들은 어떻게 교육해야 하나"**
|
||||
|
||||
* 교육시간 손실로 일손이 더 필요해지고, 적응하는데도 시간이 걸린다.
|
||||
* 여러 회사의 S/W별 사용법이 달라 새로운 S/W에 적응에 시간이 필요하다.
|
||||
|
||||
### ④ 경제적 부담
|
||||
> **"S/W 구독료만 크게 발생되고, 비용 보전은 안 된다"**
|
||||
|
||||
* 사용해야 할 S/W의 종류가 너무 많고 복잡한데 모두 필요한가?
|
||||
* 모든 Project에 적용되는 것도 아닌데, 다수의 S/W 구독료를 내야 한다.
|
||||
|
||||
### ⑤ 실용성 및 적용
|
||||
> **"실무적 사용에 의한 효율성 증진보다는 홍보, PQ용으로 사용한다"**
|
||||
|
||||
* 구체적 적용에 의한 비용, 시간, 품질 등의 효과 사례가 없다.
|
||||
* 지형, 선형, 도로, 교량 Model을 만드는 S/W가 모두 달라 효율성이 낮다.
|
||||
|
||||
<br/>
|
||||
|
||||
---
|
||||
|
||||
## 2. 주체별 대응 현황 (발주처 vs 업계)
|
||||
|
||||
이러한 부정적 인식 속에서 발주처와 설계·시공 업계는 서로 다른 형태의 소극적 대응을 보이고 있다.
|
||||
|
||||
### 🏛️ 발주처 반응
|
||||
발주처는 실질적인 효과보다는 **형식과 절차**를 강조하는 경향을 보인다.
|
||||
|
||||
* **평준화** : 특성보다는 형식적 통일을 강조함
|
||||
* **보여주기** : 성과/활용보다 보고·홍보용에 치중함
|
||||
* **밀어붙이기** : 충분한 준비 없이 강제로 추진함
|
||||
|
||||
|
||||
|
||||
### 🏗️ 설계·시공업계 반응
|
||||
업계는 변화를 수용하기보다 **기존 방식을 고수하거나 회피**하려는 성향이 강하다.
|
||||
|
||||
* **눈치보기** : 정책 동향과 분위기만 살핌
|
||||
* **시간끌기** : 기술·제도 미비를 핑계 삼음
|
||||
* **버티기** : 기존 방식에 고착돼 변화를 거부함
|
||||
|
||||
|
||||
<br/>
|
||||
|
||||
---
|
||||
|
||||
{/* 하단 결론 메시지 */}
|
||||
<div style={{ padding: '20px', backgroundColor: '#f5f5f5', borderLeft: '5px solid #006064', borderRadius: '4px' }}>
|
||||
<strong>국내 DX[BIM]는 실용성이 낮게 인식되고 있으며, 발주처와 업계 모두 소극적·형식적 대응에 머물고 있다.</strong>
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
## 3.정책 및 교육의 한계
|
||||
|
||||
---
|
||||
|
||||
### 정책 집행의 문제점 (근본 취지의 이해 부족)
|
||||
|
||||
현재 건설 정책은 근본적인 취지에 대한 이해 없이, 형식적인 수행 능력과 보여주기식 성과에 치중되어 있다.
|
||||
|
||||
#### ① 인정주의 정책 집행
|
||||
* 수행 능력이 없는 업체 선정 후 성과품의 수준을 낮추어 시행한다.
|
||||
* 모든 설계사가 할 수 있다는 전제하에 정책을 시행한다.
|
||||
* 발주처의 책임회피를 위한 제도로 운영된다.
|
||||
|
||||
#### ② 적용 효과가 있는 사례도 없이 방침부터 만들어 시행
|
||||
* 시행 경험과 효과 검증도 없는 지침부터 만들고 보는 현실이다.
|
||||
* BIM/DX 적용효과를 판단할 사례가 부족하다.
|
||||
* 대부분 홍보 목적으로 적용한 사례로, 실제 투자 대비 효과가 없다.
|
||||
|
||||
#### ③ 기술투자(R&D) 없는 성과 창출 기대
|
||||
* DX가 초기 PC 도입과 유사하다고 판단, CAD의 확장·발전된 형식으로 단순 BIM S/W만 구입하면 된다는 안일한 생각을 가지고 있다.
|
||||
* 기술개발 투자 노력 없이 남들이 하는 대로 하면 된다는 착각에 빠져 있다.
|
||||
|
||||
#### ④ 엔지니어링 S/W에 대한 개념 부재
|
||||
* 다양한 엔지니어링 S/W의 특성에 대한 깊은 이해 없이 범용 S/W를 선택한다.
|
||||
* 비용 절감에 치우친 단기적 사용성 선택으로, 중·장기적 성과 기대가 곤란하다.
|
||||
* 대형 Global S/W 회사에 대한 과도한 의존과 이에 예속되는 방침을 남발한다.
|
||||
|
||||
<br/>
|
||||
|
||||
---
|
||||
|
||||
### 수행 개념의 부재 (지속 투자 의지 부재)
|
||||
|
||||
업계는 공학적 혁신보다는 기존의 타성에 젖어 근본적인 역할 변화를 회피하고 있다.
|
||||
|
||||
#### ① 공학적 개념 정립 부재
|
||||
* BIM을 DX로 정의하고, 3D 모델 제작 S/W 사용에 예속되는 개념으로 이해한다.
|
||||
* 인프라시설의 DX의 기본은 단순 모델이 아닌 위치기반 3D 모델(BIM)을 활용한 과정(Process)의 혁신이라는 개념이 부재하다.
|
||||
|
||||
#### ② '본업 기술력 확보' 우선의 개념 부재
|
||||
* 깊은 기반지식 바탕의 기술이 축적된 자신만의 Manual, In-House S/W에 대한 중요성 및 필요성에 대한 이해가 부족하다.
|
||||
* 자체 기술개발 없이 국내 발주처의 지침과 방침에만 의존한 낮은 기술력에 머물러 있다.
|
||||
|
||||
#### ③ 근본적인 역할 회피
|
||||
* 엔지니어의 근본적인 역할인 과정의 혁신과 결과물의 변화에 대한 고민이 부재하다.
|
||||
* 기술자가 직접 3D 모델을 만들고 계획을 수정하며 설계를 수행해야 하지만, 정작 모델 제작은 인건비가 낮은 전문업체에게 외주 처리한다.
|
||||
|
||||
#### ④ 과거의 타성에 머무르고 있는 업계
|
||||
* 설계/감리/시공 임직원들의 디지털 무지와 전략적 무지가 만연하다.
|
||||
* S/W 판매업체의 기능적 사용법을 BIM 교육으로 착각한다.
|
||||
* 교육과 학습을 통한 인재양성보다는 타사 인력 빼오기에 집중한다.
|
||||
|
||||
<br/>
|
||||
|
||||
---
|
||||
|
||||
### 교육 및 도입의 현실적 한계
|
||||
|
||||
현재의 교육과 도입 방식은 창의적인 엔지니어링 역량 강화보다는 특정 도구의 기능 습득에 머물러 있다.
|
||||
|
||||
|
||||
|
||||
* **BIM 교육 = Autodesk S/W 교육**: 특정 외산 소프트웨어 사용법 교육을 BIM 교육으로 동일시함.
|
||||
* **단순 기능직 교육**: 창의적 학습과 문제 해결 능력 배양이 아닌, 단순 툴 조작법 위주의 교육.
|
||||
* **현실적 요건 미고려**: 실무 환경과 현실적인 여건이 충분히 고려되지 않은 상태에서의 무리한 BIM 도입.
|
||||
* **이해관계 상충**: 발주자, 설계자, 시공자 등 참여 주체 간의 이해관계가 달라 통합된 목표 설정이 어려움.
|
||||
|
||||
<br/>
|
||||
|
||||
---
|
||||
|
||||
{/* 하단 결론 메시지 */}
|
||||
<div style={{ padding: '20px', backgroundColor: '#f5f5f5', borderLeft: '5px solid #006064', borderRadius: '4px' }}>
|
||||
<strong>정책과 교육은 형식적 수준에 머무르고, 업계는 외산 S/W 의존과 단기 대응에서 벗어나지 못하고 있다.</strong>
|
||||
</div>
|
||||
72
samples/src/content/docs/작업폴더/콘텐츠 작업중/06. 건설산업의 향후 전망.mdx
Normal file
72
samples/src/content/docs/작업폴더/콘텐츠 작업중/06. 건설산업의 향후 전망.mdx
Normal file
@@ -0,0 +1,72 @@
|
||||
---
|
||||
title: 건설산업의 향후 전망
|
||||
sidebar:
|
||||
order: 7
|
||||
---
|
||||
## 1. BIM기반 도서작성 현황 및 S/W의 필요성
|
||||
|
||||
현재 건설산업의 BIM 도입 현황은 개념의 부재와 잘못된 접근 방식으로 인해 여러 한계점에 봉착해 있다. 이를 해결하기 위해서는 현장의 문제점을 직시하는 것부터 시작해야 한다.
|
||||
|
||||
### ① 개념 및 방향성의 부재
|
||||
* **개념 부재**: BIM을 Digital Transformation(DX)의 개념이 아닌, CAD의 확장판으로 해석하여 3D를 그리는 수단 정도로만 인식한다.
|
||||
* **잘못된 접근방식**: 단순 업무효율 증진을 위한 도구로만 인식하여, 기술자들이 도구로서 사용만 할 수 있도록 교육시키면 된다고 판단한다.
|
||||
* **방향성 상실**: 대형 S/W 개발 및 판매회사에서 제시된 내용과 방향대로 따라함으로써, 국내는 자체적 목표설정 기능을 상실했다.
|
||||
* **전제조건 오류**: 건축과 토목이 유사하다는 전제하에 Library를 활용하는 건축 수행 방식을 토목에도 동일하게 적용하려 한다.
|
||||
|
||||
### ② 수행 주체와 방식의 혼란
|
||||
* **수행주체 혼란**: 학자, 발주처 중심으로 S/W 판매회사에서 제시한 기술수행 방식의 변화를 주도하며, 실제 실행주체인 기업과 기술자들은 기존의 방식을 고수하면서 눈치만 보는 실정이다.
|
||||
* **수행방식 무지**: 기존 2D 설계의 결과가 옳다는 전제와 3D 설계를 수행/검토해본 경험이 없어, 전환설계의 개념으로 수행함으로써 비용과 시간이 추가로 소요되고 높은 수준의 품질확보가 불가하다.
|
||||
|
||||
### ③ 기술 예속 및 인프라 미비
|
||||
* **외산S/W 기술예속**: 단순 외산 범용 S/W만 사용하면 BIM이 될 수 있을 것이라는 안일한 생각으로 접근하므로 외국 대형 S/W 회사에 기술예속이 가속화된다.
|
||||
* **H/W 미비**: 도면작성 중심의 기존 설계방식과 동일한 개념으로 생각하여, 탁상용 개인 PC, Monitor 사용기반 정도에 머물러 있어 실무적용에 필요한 높은 수준의 모델 등의 표출은 한계가 있다.
|
||||
|
||||
<br/>
|
||||
|
||||
---
|
||||
|
||||
## 2. 엔지니어링 산업의 고부가가치 산업으로의 전환
|
||||
|
||||
단순한 도구 도입을 넘어, 건설산업이 고부가가치 산업으로 전환하기 위해서는 근본적인 체질 개선과 목표 설정이 필요하다.
|
||||
|
||||
|
||||
### ✅ 핵심 목표
|
||||
* 고부가가치 산업 전환을 목표로 **전면 BIM 설계 도입**
|
||||
* 디지털전환을 통해 **편리하고 직관적으로 업무 환경 개선**
|
||||
* 프로세스를 혁신하여 **높은 수준의 성과물 생성**을 도움
|
||||
|
||||
### ✅ 필요한 노력
|
||||
> * 단순 반복되는 **노동집약형 업무 탈피**
|
||||
> * 업무 본질에 대한 높은 이해를 바탕으로 **창의적 아이디어 발현**
|
||||
|
||||
### ✅ 결론적 요구사항
|
||||
위 목표를 달성하기 위해 **건설산업의 디지털전환을 돕는 S/W 개발 및 지속적 고도화**가 필요하며, 이에 대한 충분한 **대규모 투자와 적극적인 동참**이 필수적이다.
|
||||
|
||||
<br/>
|
||||
|
||||
---
|
||||
|
||||
## 3. 구체적 실행 방안 및 요건
|
||||
|
||||
DX를 위한 전면 BIM 설계를 실현하기 위해서는 다음과 같은 구체적인 실행 방안과 제반 요건이 갖춰져야 한다.
|
||||
|
||||
### 🛠️ 실행 방안 (Action Plan)
|
||||
1. **요구사항 분석**: 디지털 전환을 통해 비즈니스 목표를 명확히 하고, 최종 사용자의 요구사항을 수집하여 S/W 기능을 정리함.
|
||||
2. **S/W 개발**: 건설산업이 디지털전환이 되도록 하는 S/W를 만들고 지속해서 upgrade 및 update를 수행함.
|
||||
3. **System 통합**: 기존 시스템과의 호환성을 분석하고 통합 솔루션을 개발하며, 시스템간의 데이터 통합을 위해 API로 데이터 흐름을 원활히 함.
|
||||
4. **교육 / 피드백 및 개선**: 사용자 교육 프로그램 및 기술지원 체계를 구축하고, 지속적인 모니터링 & 기능개선 및 보안 업데이트를 수행함.
|
||||
|
||||
### 📋 실행 요건 (Requirements)
|
||||
* **인프라**: 디지털 기술(S/W, H/W)과 업무 Process의 통합능력 확보.
|
||||
* **인력**: 건설단계 분야별 전문지식(설계, 시공, 유지관리 등) 보유 및 사용자 중심의 생각과 시행 착오를 포함한 DX 수행 경험.
|
||||
* **조직문화**: 디지털 혁신에 대한 긍정적인 태도와 수용성 확보, 혁신적 사고방식과 창의적 문제 해결 능력 및 협업 환경 조성.
|
||||
* **예산**: DX에 따른 비용 대비 효과 분석(ROI 분석)을 통해 지속적인 투자가치 평가.
|
||||
|
||||
<br/>
|
||||
|
||||
---
|
||||
|
||||
{/* 하단 결론 메시지 */}
|
||||
<div style={{ padding: '20px', backgroundColor: '#f5f5f5', borderLeft: '5px solid #006064', borderRadius: '4px' }}>
|
||||
<strong>DX를 위한 전면 BIM설계가 추진되고 있으나, 이를 실현하기 위해서는 엔지니어링 지식과 기술을 통합한 맞춤형 S/W 개발이 반드시 필요하다.</strong>
|
||||
</div>
|
||||
55
samples/src/content/docs/작업폴더/콘텐츠 작업중/10. 개념 정의.mdx
Normal file
55
samples/src/content/docs/작업폴더/콘텐츠 작업중/10. 개념 정의.mdx
Normal file
@@ -0,0 +1,55 @@
|
||||
---
|
||||
title: 개념 정의(이전작업)
|
||||
sidebar:
|
||||
order: 20
|
||||
---
|
||||
## 1. 기초 용어 정의
|
||||
|
||||
건설산업에서 BIM, DX를 이해하려면 각각의 용어가 무엇을 뜻하는지 명확히 구분하여야 한다.
|
||||
|
||||
### 1.1 건설산업
|
||||
|
||||
수요자가 요구하는 다양한 시설물을, 각 산업마다의 **광범위한 기술을 통합 및 융합**하여 만들어 내는 종합산업으로, 목적 시설물의 품질에 대한 욕구를 충족 시키면서 **최단기간** 내에 **최소한의 비용**으로 **편리**하고 **안전**하며 **우수한 성능**의 **시설물을 완성**하는 것을 목표로 하는산업을 의미한다.
|
||||
|
||||
### 1.2 BIM(building information modeling, 건설정보모델링)
|
||||
BIM은 시설물의 생애주기 동안 발생하는 모든 정보를 3D 모델 기반으로 통합하여, 건설정보와 절차를 표준화된 방식으로 상호 연계하고 디지털 협업이 가능하게 하는 **디지털전환(DX, Digital Transformation) 체계**를 의미한다.
|
||||
|
||||
### 1.3 DX(digital Transformation, 디지털 전환)
|
||||
**디지털 기술과 도구**를 활용하여, 고객과 시장의 변화에 대응하고 **새로운 가치를 창출**하며 산업생태계, 비지니스 모델(B.M) 및 업무수행 방식(Process)을 혁신하는 과정과 전환을 말한다.
|
||||
|
||||
<br/>
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
<br/>
|
||||
## 2. BIM vs DX 비교
|
||||
|
||||
흔히 BIM과 DX를 혼용하여 사용하곤 한다. 하지만 BIM이 3D 형상 구현을 위한 도구적 성격이 강하다면, DX는 이를 기반으로 데이터와 프로세스 전반을 혁신하는 체계라는 점에서 **엄연히 다른 개념**이다.
|
||||
|
||||
| BIM | 구분 | DX |
|
||||
| :--- | :---: | :--- |
|
||||
| **Only 3D** | **BIM/DX** | **BIM << DX** (ENG. + Management 포함) |
|
||||
| **모델 제작용 상용 S/W**<br/>[Civil 3D, Revit, Navisworks, Autocad] | **S/W** | **제작 및 운영** (상용 + 전용 40~80개)<br/>[Rhino, Sketchup, Blender..] + [EG-BIM 등] |
|
||||
| 기존 2D 설계방식 유지 | **프로세스** | **근본적 문제의식**을 통한 개선 |
|
||||
| **3D 모델 중심**<br/>기존 성과품 유지 | **성과품** | **공학 정보 및 콘텐츠 연계**에 집중<br/>도면, 수량, 시공계획 등 일식 |
|
||||
| 3D 모델에 의한 일반적 이해 향상 | **활용** | **설계/시공의 혁신** (개념의 재정립) |
|
||||
| (설계/시공/운영) 분야별 단절 | **확장성** | **전 생애주기** 활용 시스템 |
|
||||
| **단순화(오류)**<br/>수동적/집단적 동질화 | **수행개념** | **구체화(복잡)**<br/>적극/구체적 실현 방안 |
|
||||
| 소극적, 상용 기술에 의존 | **CIVIL + IT** | **적극적**, 주체적인 기술 접목/융합 |
|
||||
| S/W 제작사 판매 정책에 의존 | **주체** | **자체 수행능력** - 지속가능성 확보 |
|
||||
| 평준화, 국내 중심 | **발주처** | **차별화 및 경쟁력 확보**, 해외 진출 |
|
||||
| 소규모 BIM팀 운영 + 단순교육에 집중 | **설계사** | **IT + CIVIL ENG 220명 운영** + 기술 개발 |
|
||||
| 국내 토목 소극적 / 해외 토목증가 | **시공사** | **분야 확장 모델 및 시스템** |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
<br/>
|
||||
:::note
|
||||
BIM은 건설산업의 DX(디지털 전환)을 수행하는 과정에서 가장 기초가 되는 일부분이다.
|
||||
:::
|
||||
291
samples/src/content/docs/작업폴더/콘텐츠 작업중/11. 기본 개념 슬라이드.mdx
Normal file
291
samples/src/content/docs/작업폴더/콘텐츠 작업중/11. 기본 개념 슬라이드.mdx
Normal file
@@ -0,0 +1,291 @@
|
||||
---
|
||||
title: 기본 개념(슬라이드_이전작업)
|
||||
sidebar:
|
||||
order: 10
|
||||
---
|
||||
|
||||
{/* 스타일 커스텀: 슬라이드 레이아웃 적용 */}
|
||||
<style>{`
|
||||
/* 1. 기본 폭 제한 해제 */
|
||||
:root { --sl-content-width: 100% !important; }
|
||||
.sl-container { max-width: 100% !important; padding: 0 !important; }
|
||||
.sl-markdown-content { max-width: 100% !important; padding-top: 0 !important; }
|
||||
.sl-markdown-content > h1 { display: none; }
|
||||
|
||||
/* 2. 전체 레이아웃 (Grid: 상단 - 본문 - 하단) */
|
||||
.slide-layout {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
gap: 15px;
|
||||
height: calc(100vh - 70px);
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* 3. 본문 2분할 (좌: 1 / 우: 1) */
|
||||
.content-split {
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 0.9fr; /* 표 내용을 고려해 좌측을 조금 더 넓게 */
|
||||
gap: 25px;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* [좌측 패널] 테이블 */
|
||||
.left-panel {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||
height: 100%;
|
||||
}
|
||||
.table-scroll { overflow-y: auto; height: 100%; }
|
||||
|
||||
.custom-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
|
||||
.custom-table th {
|
||||
padding: 12px 6px;
|
||||
border: 1px solid #ccc;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background-color: #f1f3f5;
|
||||
}
|
||||
/* 헤더 포인트 색상 */
|
||||
.th-bim { color: #006aff !important; background-color: #e3f2fd; }
|
||||
.th-dx { color: #FF7F00 !important; background-color: #fff3e0; }
|
||||
|
||||
.custom-table td {
|
||||
padding: 10px 8px;
|
||||
border: 1px solid #ccc;
|
||||
vertical-align: middle;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
word-break: keep-all;
|
||||
}
|
||||
.highlight-bim { color: #006aff; font-weight: bold; }
|
||||
.highlight-dx { color: #FF7F00; font-weight: bold; }
|
||||
|
||||
/* [우측 패널] 상하 배치 */
|
||||
.right-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px; /* 박스 간격 */
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
/* 우측 상단: 정의 카드 리스트 */
|
||||
.top-section {
|
||||
background: #fff;
|
||||
/* border: 1px solid #eee; */
|
||||
border-radius: 8px;
|
||||
/* padding: 10px; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* 정의 카드 스타일 */
|
||||
.def-card {
|
||||
border: 1px solid #ddd;
|
||||
border-left-width: 5px;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
||||
}
|
||||
.def-card h3 {
|
||||
margin: 0 0 6px 0 !important;
|
||||
font-size: 1rem !important;
|
||||
font-weight: 700;
|
||||
}
|
||||
.def-card p {
|
||||
margin: 0 !important;
|
||||
font-size: 0.85rem !important;
|
||||
line-height: 1.5 !important;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
/* 우측 하단: 이미지 박스 */
|
||||
.bottom-section {
|
||||
background: #fff;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1; /* 남은 공간 차지 */
|
||||
}
|
||||
.bottom-section img {
|
||||
max-height: 220px;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* [하단] 결론 바 */
|
||||
.footer-bar {
|
||||
background: #f5f5f5;
|
||||
border-left: 5px solid #006064;
|
||||
border-radius: 4px;
|
||||
padding: 15px 20px;
|
||||
font-size: 1rem;
|
||||
color: #333;
|
||||
box-shadow: 0 -2px 5px rgba(0,0,0,0.05);
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div className="slide-layout">
|
||||
|
||||
{/* 1. 상단 제목 */}
|
||||
<div style={{ borderBottom: '2px solid #333', paddingBottom: '10px' }}>
|
||||
<h1 style={{ fontSize: '1.8rem', fontWeight: '800', margin: 0, color: '#131313' }}>기본 개념</h1>
|
||||
</div>
|
||||
|
||||
{/* 2. 메인 콘텐츠 (좌우 2분할) */}
|
||||
<div className="content-split">
|
||||
|
||||
{/* [왼쪽 패널] BIM vs DX 비교표 */}
|
||||
<div className="left-panel">
|
||||
<div className="table-scroll">
|
||||
<table className="custom-table">
|
||||
<colgroup>
|
||||
<col width="22%" />
|
||||
<col width="12%" />
|
||||
<col width="66%" />
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="th-bim">BIM</th>
|
||||
<th>구분</th>
|
||||
<th className="th-dx">DX</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Only 3D</strong></td>
|
||||
<td style={{textAlign: 'center'}}><strong>BIM/DX</strong></td>
|
||||
<td className="highlight-dx"><strong>BIM << DX</strong> (ENG. + Management 포함)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>모델 제작용 상용 S/W</strong><br/>[Civil 3D, Revit, Navisworks 등]</td>
|
||||
<td style={{textAlign: 'center'}}><strong>S/W</strong></td>
|
||||
<td><strong>제작 및 운영</strong> (상용 + 전용 40~80개)<br/>[Rhino, Blender] + [EG-BIM 등]</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>기존 2D 설계방식 유지</td>
|
||||
<td style={{textAlign: 'center'}}><strong>프로세스</strong></td>
|
||||
<td><strong>근본적 문제의식</strong>을 통한 개선</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>3D 모델 중심</strong><br/>기존 성과품 유지</td>
|
||||
<td style={{textAlign: 'center'}}><strong>성과품</strong></td>
|
||||
<td><strong>공학 정보 및 콘텐츠 연계</strong>에 집중<br/>도면, 수량, 시공계획 등 일식</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3D 모델 이해 향상</td>
|
||||
<td style={{textAlign: 'center'}}><strong>활용</strong></td>
|
||||
<td><strong>설계/시공의 혁신</strong> (개념의 재정립)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>분야별 단절</td>
|
||||
<td style={{textAlign: 'center'}}><strong>확장성</strong></td>
|
||||
<td><strong>전 생애주기</strong> 활용 시스템</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>단순화(오류)</strong><br/>수동적/집단적 동질화</td>
|
||||
<td style={{textAlign: 'center'}}><strong>수행개념</strong></td>
|
||||
<td><strong>구체화(복잡)</strong><br/>적극적/구체적 실현 방안</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>소극적, 상용 기술 의존</td>
|
||||
<td style={{textAlign: 'center'}}><strong>CIVIL+IT</strong></td>
|
||||
<td><strong>적극적</strong>, 주체적인 기술 접목/융합</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>S/W 판매 정책 의존</td>
|
||||
<td style={{textAlign: 'center'}}><strong>주체</strong></td>
|
||||
<td><strong>자체 수행능력</strong> - 지속가능성 확보</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>평준화, 국내 중심</td>
|
||||
<td style={{textAlign: 'center'}}><strong>발주처</strong></td>
|
||||
<td><strong>차별화 및 경쟁력 확보</strong>, 해외 진출</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>소규모 팀 / 단순교육</td>
|
||||
<td style={{textAlign: 'center'}}><strong>설계사</strong></td>
|
||||
<td><strong>IT + CIVIL ENG 220명 운영</strong> + 기술 개발</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>국내 토목 소극적</td>
|
||||
<td style={{textAlign: 'center'}}><strong>시공사</strong></td>
|
||||
<td><strong>분야 확장 모델 및 시스템</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* [오른쪽 패널] 정의(상단) + 이미지(하단) */}
|
||||
<div className="right-panel">
|
||||
|
||||
{/* 1. 상단: 3가지 정의 (카드형) */}
|
||||
<div className="top-section">
|
||||
{/* 건설산업 */}
|
||||
<div className="def-card" style={{ borderLeftColor: '#546e7a' }}>
|
||||
<h3 style={{ color: '#455a64' }}>🏗️ 건설산업</h3>
|
||||
<p>
|
||||
다양한 기술을 융합하여 시설물을 완성하는 종합산업.<br/>
|
||||
<strong>목표:</strong> 최단기간, 최소비용, 편리하고 안전한 고성능 시설물 완성.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* BIM */}
|
||||
<div className="def-card" style={{ borderLeftColor: '#006aff' }}>
|
||||
<h3 style={{ color: '#006aff' }}>💻 BIM (건설정보모델링)</h3>
|
||||
<p>
|
||||
생애주기 정보를 3D 모델 기반으로 통합.<br/>
|
||||
건설정보 표준화 및 디지털 협업이 가능하게 하는 <strong>디지털전환 체계</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* DX */}
|
||||
<div className="def-card" style={{ borderLeftColor: '#FF7F00' }}>
|
||||
<h3 style={{ color: '#FF7F00' }}>🚀 DX (디지털 전환)</h3>
|
||||
<p>
|
||||
<strong>디지털 기술과 도구</strong>를 활용하여 새로운 가치를 창출하고, 산업생태계 및 업무수행 방식(Process)을 혁신하는 과정.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 2. 하단: 이미지 박스 */}
|
||||
<div className="bottom-section">
|
||||
<img src="/assets/images/01.png" alt="디지털전환 그림" />
|
||||
<div style={{ marginTop: '8px', fontSize: '0.8rem', color: '#888' }}>
|
||||
[그림] 디지털 전환(DX)의 개념적 흐름
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* 3. 하단 결론 바 */}
|
||||
<div className="footer-bar">
|
||||
<strong>BIM은 건설산업의 DX(디지털 전환)을 수행하는 과정에서 가장 기초가 되는 일부분이다.</strong>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
145
samples/src/content/docs/작업폴더/콘텐츠 작업중/99 슬라이드 (4_6).mdx
Normal file
145
samples/src/content/docs/작업폴더/콘텐츠 작업중/99 슬라이드 (4_6).mdx
Normal file
@@ -0,0 +1,145 @@
|
||||
---
|
||||
title: 슬라이드 템플릿(4:6)
|
||||
sidebar:
|
||||
order: 99
|
||||
tableOfContents: false
|
||||
---
|
||||
<style>{`
|
||||
.content-panel, .sl-container, .sl-markdown-content {
|
||||
max-width: 100% !important; padding: 0 !important; margin: 0 !important;
|
||||
}
|
||||
.slide-content ul { padding-left: 20px; margin-top: 5px; }
|
||||
.slide-content li { margin-bottom: 5px; }
|
||||
.custom-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.9rem; }
|
||||
.custom-table th { background: #f1f3f5; border: 1px solid #ddd; padding: 8px; text-align: center; }
|
||||
.custom-table td { border: 1px solid #ddd; padding: 8px; vertical-align: middle; }
|
||||
`}</style>
|
||||
|
||||
<div className="slide-container" style={{
|
||||
height: 'calc(100vh - 140px)', width: '100%', overflow: 'hidden', display: 'flex', flexDirection: 'column', padding: '0 40px'
|
||||
}}>
|
||||
|
||||
<div style={{ flex: '1 1 auto', display: 'flex', gap: '40px', alignItems: 'stretch', marginTop: '10px', marginBottom: '20px' }}>
|
||||
|
||||
{/* 🟠 [왼쪽 40%] 서브 영역 */}
|
||||
<div className="slide-content" style={{
|
||||
flex: 4,
|
||||
display: 'flex', flexDirection: 'column', justifyContent: 'flex-start',
|
||||
borderRight: '1px solid #e0e0e0', paddingRight: '40px',
|
||||
height: '100%', overflowY: 'auto',
|
||||
|
||||
/* 🔧 [조절] 왼쪽 박스(구분선 있음) 높이 고정값 */
|
||||
paddingTop: '5px'
|
||||
}}>
|
||||
|
||||
<h2 style={{
|
||||
fontSize: '1.5rem', fontWeight: 'bold',
|
||||
borderBottom: '2px solid #333', paddingBottom: '10px', marginBottom: '15px',
|
||||
|
||||
/* 🔧 [조절] 왼쪽 제목 높이 고정값 */
|
||||
marginTop: '7px'
|
||||
}}>
|
||||
1. 왼쪽(40%) 제목
|
||||
</h2>
|
||||
|
||||
{/* 본문 내용 */}
|
||||
<div style={{ fontSize: '1rem', lineHeight: '1.6', color: '#333', marginBottom: '20px' }}>
|
||||
<p>내용을 입력하세요.</p>
|
||||
</div>
|
||||
|
||||
{/* 이미지 */}
|
||||
<div style={{ textAlign: 'center', marginBottom: '20px' }}>
|
||||
<img
|
||||
src="/assets/images/sample.png"
|
||||
alt="설명"
|
||||
className="zoomable"
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
/* 🔧 [조절] 이미지 크기 */
|
||||
maxHeight: '30vh',
|
||||
objectFit: 'contain', borderRadius: '8px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{/* 🟢 [오른쪽 60%] 메인 영역 */}
|
||||
<div className="slide-content" style={{
|
||||
flex: 6,
|
||||
display: 'flex', flexDirection: 'column', justifyContent: 'flex-start',
|
||||
paddingLeft: '10px',
|
||||
height: '100%', overflowY: 'auto',
|
||||
|
||||
/* 🔧 [조절] 오른쪽 박스(구분선 없음) 높이 고정값 */
|
||||
paddingTop: '0px'
|
||||
}}>
|
||||
|
||||
<h2 style={{
|
||||
fontSize: '1.5rem', fontWeight: 'bold',
|
||||
borderBottom: '2px solid #333', paddingBottom: '10px', marginBottom: '0px',
|
||||
|
||||
/* 🔧 [조절] 오른쪽 제목 높이 고정값 */
|
||||
marginTop: '-3px'
|
||||
}}>
|
||||
2. 오른쪽(60%) 제목
|
||||
</h2>
|
||||
|
||||
{/* 본문 내용 */}
|
||||
<div style={{
|
||||
fontSize: '1rem', lineHeight: '1.6', color: '#333', marginBottom: '20px',
|
||||
/* 🔧 [조절] 제목 선과 본문 사이 간격 */
|
||||
paddingTop: '20px'
|
||||
}}>
|
||||
<ul>
|
||||
<li>내용을 입력하세요.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* 이미지 */}
|
||||
<div style={{ textAlign: 'center', marginBottom: '20px' }}>
|
||||
<img
|
||||
src="/assets/images/sample.png"
|
||||
alt="설명"
|
||||
className="zoomable"
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
/* 🔧 [조절] 이미지 크기 */
|
||||
maxHeight: '50vh',
|
||||
objectFit: 'contain', borderRadius: '8px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 핵심 요약 박스 */}
|
||||
<div style={{ marginTop: 'auto', padding: '15px', backgroundColor: '#e7f5ff', borderLeft: '5px solid #0056b3', borderRadius: '4px', fontSize: '1rem' }}>
|
||||
<div style={{ fontWeight: 'bold', marginBottom: '5px', color: '#0056b3' }}>ℹ️ 핵심 요약</div>
|
||||
<ul style={{ margin: 0, paddingLeft: '20px' }}>
|
||||
<li>요약 내용을 입력하세요.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 👇 [기능] 이미지 팝업 스크립트 (수정 불필요) */}
|
||||
<style>{`
|
||||
.zoomable { cursor: zoom-in; transition: transform 0.2s; } .zoomable:hover { transform: scale(1.02); }
|
||||
#image-modal { display: none; justify-content: center; align-items: center; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 2147483647; background-color: rgba(0,0,0,0.9); backdrop-filter: blur(5px); padding: 20px; box-sizing: border-box; }
|
||||
#modal-content { max-width: 95%; max-height: 95vh; object-fit: contain; border-radius: 4px; box-shadow: 0 0 30px rgba(0,0,0,0.5); animation: popUp 0.3s; }
|
||||
#modal-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 50px; font-weight: bold; cursor: pointer; z-index: 2147483648; line-height: 1; text-shadow: 0 0 10px rgba(0,0,0,0.5); }
|
||||
@keyframes popUp { from {transform:scale(0.8); opacity:0;} to {transform:scale(1); opacity:1;} }
|
||||
`}</style>
|
||||
<div id="image-modal"><span id="modal-close">×</span><img id="modal-content" /></div>
|
||||
<script>{`
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const m = document.getElementById('image-modal'), i = document.getElementById('modal-content'), c = document.getElementById('modal-close');
|
||||
document.querySelectorAll('.zoomable').forEach(e => e.addEventListener('click', function(ev) { ev.preventDefault(); m.style.display = "flex"; i.src = this.src; i.alt = this.alt; }));
|
||||
const clo = () => m.style.display = "none";
|
||||
if(c) c.onclick = clo; if(m) m.onclick = e => { if(e.target === m) clo(); };
|
||||
document.addEventListener('keydown', e => { if(e.key === "Escape" && m.style.display === "flex") clo(); });
|
||||
});
|
||||
`}</script>
|
||||
145
samples/src/content/docs/작업폴더/콘텐츠 작업중/99 슬라이드 (6_4).mdx
Normal file
145
samples/src/content/docs/작업폴더/콘텐츠 작업중/99 슬라이드 (6_4).mdx
Normal file
@@ -0,0 +1,145 @@
|
||||
---
|
||||
title: 슬라이드 템플릿(6:4)
|
||||
sidebar:
|
||||
order: 99
|
||||
tableOfContents: false
|
||||
---
|
||||
<style>{`
|
||||
.content-panel, .sl-container, .sl-markdown-content {
|
||||
max-width: 100% !important; padding: 0 !important; margin: 0 !important;
|
||||
}
|
||||
.slide-content ul { padding-left: 20px; margin-top: 5px; }
|
||||
.slide-content li { margin-bottom: 5px; }
|
||||
.custom-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.9rem; }
|
||||
.custom-table th { background: #f1f3f5; border: 1px solid #ddd; padding: 8px; text-align: center; }
|
||||
.custom-table td { border: 1px solid #ddd; padding: 8px; vertical-align: middle; }
|
||||
`}</style>
|
||||
|
||||
<div className="slide-container" style={{
|
||||
height: 'calc(100vh - 140px)', width: '100%', overflow: 'hidden', display: 'flex', flexDirection: 'column', padding: '0 40px'
|
||||
}}>
|
||||
|
||||
<div style={{ flex: '1 1 auto', display: 'flex', gap: '40px', alignItems: 'stretch', marginTop: '10px', marginBottom: '20px' }}>
|
||||
|
||||
{/* 🟢 [왼쪽 60%] 메인 영역 */}
|
||||
<div className="slide-content" style={{
|
||||
flex: 6,
|
||||
display: 'flex', flexDirection: 'column', justifyContent: 'flex-start',
|
||||
borderRight: '1px solid #e0e0e0', paddingRight: '40px',
|
||||
height: '100%', overflowY: 'auto',
|
||||
|
||||
/* 🔧 [조절] 왼쪽 박스 전체 시작 높이 */
|
||||
paddingTop: '5px'
|
||||
}}>
|
||||
|
||||
<h2 style={{
|
||||
fontSize: '1.5rem', fontWeight: 'bold',
|
||||
borderBottom: '2px solid #333', paddingBottom: '10px', marginBottom: '15px',
|
||||
|
||||
/* 🔧 [조절] 왼쪽 제목 높이 미세조정 */
|
||||
marginTop: '7px'
|
||||
}}>
|
||||
1. 왼쪽(60%) 제목
|
||||
</h2>
|
||||
|
||||
{/* 본문 내용 */}
|
||||
<div style={{ fontSize: '1rem', lineHeight: '1.6', color: '#333', marginBottom: '20px' }}>
|
||||
<ul>
|
||||
<li>내용을 입력하세요.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* 이미지 */}
|
||||
<div style={{ textAlign: 'center', marginBottom: '20px' }}>
|
||||
<img
|
||||
src="/assets/images/sample.png"
|
||||
alt="설명"
|
||||
className="zoomable"
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
/* 🔧 [조절] 이미지 크기 (화면 높이의 50%) */
|
||||
maxHeight: '50vh',
|
||||
objectFit: 'contain', borderRadius: '8px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{/* 🟠 [오른쪽 40%] 서브 영역 */}
|
||||
<div className="slide-content" style={{
|
||||
flex: 4,
|
||||
display: 'flex', flexDirection: 'column', justifyContent: 'flex-start',
|
||||
paddingLeft: '10px',
|
||||
height: '100%', overflowY: 'auto',
|
||||
|
||||
/* 🔧 [조절] 오른쪽 박스 전체 시작 높이 */
|
||||
paddingTop: '0px'
|
||||
}}>
|
||||
|
||||
<h2 style={{
|
||||
fontSize: '1.5rem', fontWeight: 'bold',
|
||||
borderBottom: '2px solid #333', paddingBottom: '10px', marginBottom: '0px',
|
||||
|
||||
/* 🔧 [조절] 오른쪽 제목 높이 미세조정 */
|
||||
marginTop: '-3px'
|
||||
}}>
|
||||
2. 오른쪽(40%) 제목
|
||||
</h2>
|
||||
|
||||
{/* 본문 내용 */}
|
||||
<div style={{
|
||||
fontSize: '1rem', lineHeight: '1.6', color: '#333', marginBottom: '20px',
|
||||
/* 🔧 [조절] 제목 선과 본문 사이 간격 */
|
||||
paddingTop: '20px'
|
||||
}}>
|
||||
<p>내용을 입력하세요.</p>
|
||||
</div>
|
||||
|
||||
{/* 이미지 */}
|
||||
<div style={{ textAlign: 'center', marginBottom: '20px' }}>
|
||||
<img
|
||||
src="/assets/images/sample.png"
|
||||
alt="설명"
|
||||
className="zoomable"
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
/* 🔧 [조절] 이미지 크기 */
|
||||
maxHeight: '30vh',
|
||||
objectFit: 'contain', borderRadius: '8px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 핵심 요약 박스 */}
|
||||
<div style={{ marginTop: 'auto', padding: '15px', backgroundColor: '#e7f5ff', borderLeft: '5px solid #0056b3', borderRadius: '4px', fontSize: '1rem' }}>
|
||||
<div style={{ fontWeight: 'bold', marginBottom: '5px', color: '#0056b3' }}>ℹ️ 핵심 요약</div>
|
||||
<ul style={{ margin: 0, paddingLeft: '20px' }}>
|
||||
<li>요약 내용을 입력하세요.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 👇 [기능] 이미지 팝업 스크립트 (수정 불필요) */}
|
||||
<style>{`
|
||||
.zoomable { cursor: zoom-in; transition: transform 0.2s; } .zoomable:hover { transform: scale(1.02); }
|
||||
#image-modal { display: none; justify-content: center; align-items: center; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 2147483647; background-color: rgba(0,0,0,0.9); backdrop-filter: blur(5px); padding: 20px; box-sizing: border-box; }
|
||||
#modal-content { max-width: 95%; max-height: 95vh; object-fit: contain; border-radius: 4px; box-shadow: 0 0 30px rgba(0,0,0,0.5); animation: popUp 0.3s; }
|
||||
#modal-close { position: absolute; top: 20px; right: 30px; color: white; font-size: 50px; font-weight: bold; cursor: pointer; z-index: 2147483648; line-height: 1; text-shadow: 0 0 10px rgba(0,0,0,0.5); }
|
||||
@keyframes popUp { from {transform:scale(0.8); opacity:0;} to {transform:scale(1); opacity:1;} }
|
||||
`}</style>
|
||||
<div id="image-modal"><span id="modal-close">×</span><img id="modal-content" /></div>
|
||||
<script>{`
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const m = document.getElementById('image-modal'), i = document.getElementById('modal-content'), c = document.getElementById('modal-close');
|
||||
document.querySelectorAll('.zoomable').forEach(e => e.addEventListener('click', function(ev) { ev.preventDefault(); m.style.display = "flex"; i.src = this.src; i.alt = this.alt; }));
|
||||
const clo = () => m.style.display = "none";
|
||||
if(c) c.onclick = clo; if(m) m.onclick = e => { if(e.target === m) clo(); };
|
||||
document.addEventListener('keydown', e => { if(e.key === "Escape" && m.style.display === "flex") clo(); });
|
||||
});
|
||||
`}</script>
|
||||
84
samples/src/content/sub/block/block01.astro
Normal file
84
samples/src/content/sub/block/block01.astro
Normal file
@@ -0,0 +1,84 @@
|
||||
---
|
||||
import { IMAGE_BASE_PATH } from '../config';
|
||||
---
|
||||
|
||||
<section id="group21" class="block01">
|
||||
<!-- 타이틀 -->
|
||||
<div class="page-tit-wrap">
|
||||
<div class="tit-box">
|
||||
<span class="page-tail"></span>
|
||||
<h3>
|
||||
<span>블록/속성블록/외부참조(이미지)</span>를
|
||||
도면에 <span>생성</span>하고 <span>통합 관리</span>
|
||||
</h3>
|
||||
<span class="page-tail"></span>
|
||||
</div>
|
||||
<div class="tip-box">
|
||||
<h4 class="tip-tit">How to use</h4>
|
||||
<dl>
|
||||
<dt>방식 1</dt>
|
||||
<dd>명령어 입력창 > Command : BLOCK</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>방식 2</dt>
|
||||
<dd>
|
||||
명령어
|
||||
전체보기 > 블록 > <img
|
||||
src={`${IMAGE_BASE_PATH}/ico/ico_block.svg`}
|
||||
alt=""
|
||||
/> 블록 만들기 > 블록 통합 관리창
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- // 타이틀 -->
|
||||
<div class="contents">
|
||||
<div class="inner">
|
||||
<img class="bg-img" src={`${IMAGE_BASE_PATH}/block/3x_block_01.png`} alt=" " />
|
||||
<!-- 링크 -->
|
||||
<ul>
|
||||
<li>
|
||||
<a class="link-block" href="/help/block02">
|
||||
<span class="blind">블록</span>
|
||||
<div class="blind">
|
||||
객체 반복 사용 시 반복 객체 블록화
|
||||
동일 이름 블록은 수정 시 일괄 반영
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="link-atrbBlock" href="/help/block03">
|
||||
<span class="blind">속성블록</span>
|
||||
<div class="blind">
|
||||
속성문자가 포함된 블록으로 같은 블록이라도 블록별 개별 속성값 설정 가능
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="link-ref" href="/help/block04">
|
||||
<span class="blind">외부참조</span>
|
||||
<div class="blind">
|
||||
외부파일(DWG, PDF, JPG 등)을 현재 파일에 연결해 블록으로 사용
|
||||
외부참조된 원본 수정 시 현재 파일에 반영
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="blind">
|
||||
<dl>
|
||||
<dt>블록 검색</dt>
|
||||
|
||||
<dt>블록 속성정보</dt>
|
||||
<dd>기본 속성정보(미리보기 창, 블록 이름, 설명, 레이어 등)와 블록 삽입 시 설정 및 뷰포트 스케일 설정 등 블록 기본 설정 가능</dd>
|
||||
|
||||
<dt>블록 단위</dt>
|
||||
<dd>도면에 삽입되는 단위 지정. 블록, 속성블록, 외부참조에 공통 적용</dd>
|
||||
</dl>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- // 링크 -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
100
samples/src/content/sub/block/block02.astro
Normal file
100
samples/src/content/sub/block/block02.astro
Normal file
@@ -0,0 +1,100 @@
|
||||
---
|
||||
import { IMAGE_BASE_PATH, VIDEO_BASE_PATH } from '../config';
|
||||
import VideoModal from './../../../components/VideoModal.astro';
|
||||
|
||||
const videoModals = [
|
||||
{ id: 'modal-add', videoSrc: `${VIDEO_BASE_PATH}/video/block_add.mp4` },
|
||||
];
|
||||
---
|
||||
|
||||
<section id="group22" class="block02">
|
||||
<!-- 타이틀 -->
|
||||
<div class="page-tit-wrap">
|
||||
<div class="tit-box">
|
||||
<span class="page-tail"></span>
|
||||
<h3>
|
||||
작업화면에서 <span>객체를 선택</span>하여
|
||||
<span>블록을 생성</span>하고
|
||||
<span>관리</span>
|
||||
</h3>
|
||||
<span class="page-tail"></span>
|
||||
</div>
|
||||
<div class="tip-box">
|
||||
<h4 class="tip-tit">How to use</h4>
|
||||
<dl>
|
||||
<dt>방식 1</dt>
|
||||
<dd>명령어 입력창 > Command : BLOCK</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>방식 2</dt>
|
||||
<dd>
|
||||
명령어
|
||||
전체보기 > 블록 > <img
|
||||
src={`${IMAGE_BASE_PATH}/ico/ico_block.svg`}
|
||||
alt=""
|
||||
/> 블록 만들기 > 블록 통합 관리창
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- // 타이틀 -->
|
||||
<div class="contents">
|
||||
<div class="inner">
|
||||
<img class="bg-img" src={`${IMAGE_BASE_PATH}/block/3x_block_02.png`} alt=" " />
|
||||
<!-- 링크 -->
|
||||
<ul>
|
||||
<li>
|
||||
<button type="button" class="link-add" data-modal="modal-add">
|
||||
<span class="blind">블록 추가하기</span>
|
||||
<div class="blind">블록으로 지정할 객체를 선택 후 기준점 지정</div>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li class="blind">
|
||||
<dl>
|
||||
<dt>블록 LIST</dt>
|
||||
<dd>현재 파일에 사용 가능한 블록의 LIST</dd>
|
||||
<dd>블록의 이름과 설명으로 구성</dd>
|
||||
|
||||
<dt>블록 선택</dt>
|
||||
<dd>클릭으로 표시 여부 설정</dd>
|
||||
<dd>마우스 우클릭으로 제거</dd>
|
||||
|
||||
<dt>선택한 블록 미리보기</dt>
|
||||
|
||||
<dt>선택한 블록 기본속성 수정</dt>
|
||||
<dd>클릭 시 블록 기본속성 수정 가능</dd>
|
||||
<dd>이름 : 블록의 이름</dd>
|
||||
<dd>설명 : 블록에 대한 설명</dd>
|
||||
<dd>레이어 : 블록이 속한 레이어</dd>
|
||||
<dd>색상 : 블록을 구성하는 객체의 색상</dd>
|
||||
|
||||
<dt>설정</dt>
|
||||
<dd>삽입 시 블록 분해 허용 : 삽입 후 Explode 명령어 허용 여부 설정</dd>
|
||||
<dd>뷰포트 스케일에 맞는 배율 적용(주석배율 적용) : 뷰포트 스케일에 맞게 블록 형상에 대한 스케일 조정 가능</dd>
|
||||
<dd>외부참조 추가 시 삽입점 화면에서 직접지정 : 체크 해제시 0,0,0 좌표로 블록 삽입</dd>
|
||||
</dl>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- // 링크 -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 모달들 -->
|
||||
{videoModals.map(modal => (
|
||||
<VideoModal id={modal.id} videoSrc={modal.videoSrc} />
|
||||
))}
|
||||
</section>
|
||||
|
||||
<script>
|
||||
import { initModalController } from './../../../lib/modalController';
|
||||
|
||||
// 초기 로드
|
||||
initModalController();
|
||||
|
||||
// Astro 페이지 전환 시에도 재실행
|
||||
document.addEventListener('astro:page-load', () => {
|
||||
initModalController();
|
||||
});
|
||||
</script>
|
||||
113
samples/src/content/sub/block/block03.astro
Normal file
113
samples/src/content/sub/block/block03.astro
Normal file
@@ -0,0 +1,113 @@
|
||||
---
|
||||
import { IMAGE_BASE_PATH, VIDEO_BASE_PATH } from '../config';
|
||||
import VideoModal from './../../../components/VideoModal.astro';
|
||||
|
||||
const videoModals = [
|
||||
{ id: 'modal-add', videoSrc: `${VIDEO_BASE_PATH}/video/atrbBlock_add.mp4` },
|
||||
];
|
||||
---
|
||||
|
||||
<section id="group23" class="block03">
|
||||
<!-- 타이틀 -->
|
||||
<div class="page-tit-wrap">
|
||||
<div class="tit-box">
|
||||
<span class="page-tail"></span>
|
||||
<h3>
|
||||
블록의 <span>문자내용를 변경</span>해가며 사용 할 수 있는
|
||||
<span>속성블록</span>을 <span>생성</span>하고 <span>관리</span>
|
||||
</h3>
|
||||
<span class="page-tail"></span>
|
||||
</div>
|
||||
<div class="tip-box">
|
||||
<h4 class="tip-tit">How to use</h4>
|
||||
<dl>
|
||||
<dt>방식 1</dt>
|
||||
<dd>명령어 입력창 > Command : BLOCK</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>방식 2</dt>
|
||||
<dd>
|
||||
명령어
|
||||
전체보기 > 블록 > <img
|
||||
src={`${IMAGE_BASE_PATH}/ico/ico_block.svg`}
|
||||
alt=""
|
||||
/> 블록 만들기 > 블록 통합 관리창
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- // 타이틀 -->
|
||||
<div class="contents">
|
||||
<div class="inner">
|
||||
<img class="bg-img" src={`${IMAGE_BASE_PATH}/block/3x_block_03.png`} alt=" " />
|
||||
<!-- 링크 -->
|
||||
<ul>
|
||||
<li>
|
||||
<button type="button" class="link-add" data-modal="modal-add">
|
||||
<span class="blind">속성블록 추가하기</span>
|
||||
<div class="blind">
|
||||
속성블록으로 지정할 속성문자와 객체를 선택 후 기준점 지정
|
||||
* ATTDEF : 속성문자 만들기
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li class="blind">
|
||||
<dl>
|
||||
<dt>속성 블록 LIST</dt>
|
||||
<dd>현재 파일에 사용 가능한 속성블록의 LIST</dd>
|
||||
<dd>속성블록의 이름과 설명으로 구성</dd>
|
||||
|
||||
<dt>속성 블록 선택</dt>
|
||||
<dd>클릭으로 표시 여부 설정</dd>
|
||||
<dd>마우스 우클릭으로 삭제</dd>
|
||||
|
||||
<dt>속성 블록 삽입</dt>
|
||||
<dd>1) 더블클릭 시 작업화면에 추가</dd>
|
||||
<dd>2) 작업화면에 드래그&드롭</dd>
|
||||
|
||||
<dt>선택한 블록 미리보기</dt>
|
||||
|
||||
<dt>선택한 속성블록 기본속성 수정</dt>
|
||||
<dd>클릭 시 속성블록 기본속성 수정 가능</dd>
|
||||
<dd>이름 : 속성블록의 이름</dd>
|
||||
<dd>설명 : 속성블록에 대한 설명</dd>
|
||||
<dd>레이어 : 속성블록이 속한 레이어</dd>
|
||||
<dd>색상 : 속성블록을 구성하는 객체의 색상</dd>
|
||||
|
||||
<dt>설정</dt>
|
||||
<dd>삽입 시 블록 분해 허용 : 삽입 후 Explode 명령어 허용 여부 설정</dd>
|
||||
<dd>뷰포트 스케일에 맞는 배율 적용(주석배율 적용) : 뷰포트 스케일에 맞게 블록 형상에 대한 스케일 조정 가능</dd>
|
||||
<dd>외부참조 추가 시 삽입점 화면에서 직접지정 : 체크 해제시 0,0,0 좌표로 블록 삽입</dd>
|
||||
|
||||
<dt>속성블록 속성값 설정</dt>
|
||||
<dd>태그 : 속성을 식별하는 꼬리표</dd>
|
||||
<dd>프롬프트 : 문자값의 내용에 대한 설명</dd>
|
||||
<dd>문자값 : 보여지는 문자내용에 해당하는 값</dd>
|
||||
<dd>클릭 시 속성블록 속성값 수정 가능</dd>
|
||||
|
||||
</dl>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- // 링크 -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 모달들 -->
|
||||
{videoModals.map(modal => (
|
||||
<VideoModal id={modal.id} videoSrc={modal.videoSrc} />
|
||||
))}
|
||||
</section>
|
||||
|
||||
<script>
|
||||
import { initModalController } from './../../../lib/modalController';
|
||||
|
||||
// 초기 로드
|
||||
initModalController();
|
||||
|
||||
// Astro 페이지 전환 시에도 재실행
|
||||
document.addEventListener('astro:page-load', () => {
|
||||
initModalController();
|
||||
});
|
||||
</script>
|
||||
98
samples/src/content/sub/block/block04.astro
Normal file
98
samples/src/content/sub/block/block04.astro
Normal file
@@ -0,0 +1,98 @@
|
||||
---
|
||||
import { IMAGE_BASE_PATH } from '../config';
|
||||
---
|
||||
|
||||
<section id="group24" class="block04">
|
||||
<!-- 타이틀 -->
|
||||
<div class="page-tit-wrap">
|
||||
<div class="tit-box">
|
||||
<span class="page-tail"></span>
|
||||
<h3>
|
||||
현재 작업파일에 <span>다른 파일을 연결</span>하여
|
||||
<span>외부참조</span>를 <span>생성</span>하고 <span>관리</span>
|
||||
</h3>
|
||||
<span class="page-tail"></span>
|
||||
</div>
|
||||
<div class="tip-box">
|
||||
<h4 class="tip-tit">How to use</h4>
|
||||
<dl>
|
||||
<dt>방식 1</dt>
|
||||
<dd>명령어 입력창 > Command : BLOCK</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>방식 2</dt>
|
||||
<dd>
|
||||
명령어
|
||||
전체보기 > 블록 > <img
|
||||
src={`${IMAGE_BASE_PATH}/ico/ico_block.svg`}
|
||||
alt=""
|
||||
/> 블록 만들기 > 블록 통합 관리창
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- // 타이틀 -->
|
||||
<div class="contents">
|
||||
<div class="inner">
|
||||
<img class="bg-img" src={`${IMAGE_BASE_PATH}/block/3x_block_04.png`} alt=" " />
|
||||
|
||||
<div class="blind">
|
||||
<dl>
|
||||
<dt>외부참조 추가하기</dt>
|
||||
<dd>탐색기에서 외부참조 파일 선택 후 삽입점 지정 * 삽입 가능한 외부참조 파일 형식
|
||||
Standard Drawing File (*.dwg)
|
||||
GRIMI Drawing File (*.grm)
|
||||
Drawing Exchange Format (*.dxf)
|
||||
Drawing Template (*.dwt)
|
||||
PDF Files (*.pdf)
|
||||
DGN Files (*.dgn)
|
||||
Image Files (*.gif, *.jpg, *.jpeg, *.png, *.tif, *.tiff, *.wbmp, *.wmf, *.emf, *.j2k, *.jp2, *.jpg, *.bmp, *.)
|
||||
</dd>
|
||||
|
||||
<dt>외부참조 선택</dt>
|
||||
<dd>클릭으로 표시 여부 설정</dd>
|
||||
<dd>마우스 우클릭으로 분리·열기</dd>
|
||||
|
||||
|
||||
<dt>외부참조 삽입</dt>
|
||||
<dd>1) 더블클릭 시 작업화면에 추가</dd>
|
||||
<dd>2) 작업화면에 드래그&드롭</dd>
|
||||
|
||||
<dt>외부참조 LIST</dt>
|
||||
<dd>현재 파일에 사용 가능한 외부참조의 LIST</dd>
|
||||
<dd>외부참조 파일 이름과 파일형식 표시</dd>
|
||||
|
||||
<dt>외부참조 미리보기</dt>
|
||||
|
||||
<dt>외부참조 파일정보</dt>
|
||||
<dd>이름 : 외부참조 파일 이름(수정 가능)</dd>
|
||||
<dd>종류 : 외부참조 파일 형식</dd>
|
||||
<dd>크기 : 외부참조 파일 용량</dd>
|
||||
<dd>날짜 : 외부참조 파일 생성 날짜</dd>
|
||||
<dd>설정 : 체크 해제시 0,0,0 좌표로 삽입</dd>
|
||||
|
||||
<dt>연결방식 및 경로</dt>
|
||||
<dd>연결방식 : “명령어 전체보기 > 블록 > 다른파일을 블록으로 연결 > 연결방식 *XRFTYPE ”에서 설정</dd>
|
||||
<dd>다중 연결 : 다른 파일에 외부참조 될 때도 유지(부착)</dd>
|
||||
<dd>현재 파일 : 현재 도면에만 연결(중첩)</dd>
|
||||
<dd>경로유형 - 절대경로 : 최상위 폴더부터 해당파일까지 모든 경로
|
||||
- 상대경로 : 현재파일의 폴더를 기준 현재 파일까지 경로
|
||||
- 경로없음 : 파일경로 사라짐
|
||||
</dd>
|
||||
<dd>
|
||||
경로 - 현재 참조된 파일의 위치를 보여주며, 경로 변경도 가능
|
||||
- 새로고침 버튼 클릭 시 파일 변경사항 업데이트
|
||||
</dd>
|
||||
|
||||
<dt>외부참조 보기 설정</dt>
|
||||
<dd>가시성 : Raster Image 처리 여부 설정</dd>
|
||||
<dd>화면이동시 Raster Image 처리</dd>
|
||||
<dd>테두리 표시 : 이미지의 테두리 표시 여부 *파일 형식이 이미지 및 pdf 파일인 경우</dd>
|
||||
<dd>출력 : 출력시 테두리 표시 여부 * IMAGEFRAME : 이미지 테두리 옵션 설정</dd>
|
||||
<dd>페이드 : 불투명도 수치를 조절 및 주로 외부참조 객체임을 표시</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
67
samples/src/content/sub/block/block05.astro
Normal file
67
samples/src/content/sub/block/block05.astro
Normal file
@@ -0,0 +1,67 @@
|
||||
---
|
||||
import { IMAGE_BASE_PATH } from '../config';
|
||||
---
|
||||
|
||||
<section id="group25" class="block05">
|
||||
<!-- 타이틀 -->
|
||||
<div class="page-tit-wrap">
|
||||
<div class="tit-box">
|
||||
<span class="page-tail"></span>
|
||||
<h3>
|
||||
<span>건설분야</span>에서 공통적으로 사용되는 <span>다양한 블록</span
|
||||
>을 <span>분야별로</span> 구분하여 제공
|
||||
</h3>
|
||||
<span class="page-tail"></span>
|
||||
</div>
|
||||
<div class="tip-box">
|
||||
<h4 class="tip-tit">How to use</h4>
|
||||
<dl>
|
||||
<dt>방식 1</dt>
|
||||
<dd>명령어 입력창 > Command : BLIBRARY</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>방식 2</dt>
|
||||
<dd>
|
||||
명령어
|
||||
전체보기 > 블록 > <img
|
||||
src={`${IMAGE_BASE_PATH}/ico/ico_multi_block.svg`}
|
||||
alt=""
|
||||
/> 여러가지 방법으로 블록
|
||||
불러오기 > 블록 라이브러리
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- // 타이틀 -->
|
||||
<div class="contents">
|
||||
<div class="inner">
|
||||
<img class="bg-img" src={`${IMAGE_BASE_PATH}/block/3x_block_05.png`} alt=" " />
|
||||
<!-- 링크 -->
|
||||
<ul>
|
||||
<li>
|
||||
<a class="link-block" href="/help/block01">
|
||||
<span class="blind">통합블록창(BLOCK)</span>
|
||||
<div class="blind">통합블록창을 실행하여 블록 생성 및 삽입/수정, 관리</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="blind">
|
||||
<dl>
|
||||
<dt>그룹별 블록 LIST</dt>
|
||||
<dd>크게 5개 분야로 구분 (설계일반, 측량및지반조사, 도로, 토목구조, 상하수도)</dd>
|
||||
|
||||
<dt>블록 선택</dt>
|
||||
<dd>원하는 블록을 클릭하여 선택</dd>
|
||||
<dd>SHIFT/CTRL 키로 다중 선택 및 선택 해제 함</dd>
|
||||
|
||||
<dt>선택한 블록 미리보기</dt>
|
||||
|
||||
<dt>선택 블록 적용</dt>
|
||||
<dd>선택 블록을 통합블록창(BLOCK)에 등록, 화면에는 삽입되지 않음</dd>
|
||||
</dl>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- // 링크 -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
73
samples/src/content/sub/command/command01.astro
Normal file
73
samples/src/content/sub/command/command01.astro
Normal file
@@ -0,0 +1,73 @@
|
||||
---
|
||||
import { IMAGE_BASE_PATH } from '../config';
|
||||
---
|
||||
|
||||
|
||||
<section id="group11" class="command01">
|
||||
<!-- 타이틀 -->
|
||||
<div class="page-tit-wrap">
|
||||
<div class="tit-box">
|
||||
<span class="page-tail"></span>
|
||||
<h3>
|
||||
EG-BIM에서 사용할 수 있는 모든 명령어를
|
||||
<span>12개 그룹 및 실행·설정 명령어로 분류</span>
|
||||
</h3>
|
||||
<span class="page-tail"></span>
|
||||
</div>
|
||||
<div class="tip-box">
|
||||
<h4 class="tip-tit">How to use</h4>
|
||||
<dl>
|
||||
<dt>방식 1</dt>
|
||||
<dd>명령어 아이콘바 > 명령어 전체보기</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>방식 2</dt>
|
||||
<dd>명령어 아이콘바 > + 아이콘 추가</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- // 타이틀 -->
|
||||
<div class="contents">
|
||||
<div class="inner">
|
||||
<img class="bg-img" src={`${IMAGE_BASE_PATH}/command/3x_command_01.png`} alt=" " />
|
||||
<!-- 링크 -->
|
||||
<ul>
|
||||
<li>
|
||||
<a class="link-cven" href="/help/command02">
|
||||
<span class="blind">선형/횡단</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="link-struc" href="/help/command03">
|
||||
<span class="blind">구조/배근</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="blind">
|
||||
<dl>
|
||||
<dt>명령어 그룹</dt>
|
||||
<dd>기능별로 구분하여 12개 그룹으로 구성</dd>
|
||||
|
||||
<dt>해당 명령어의 옵션창</dt>
|
||||
|
||||
<dt>명령어 옵션 설정</dt>
|
||||
<dd>* 옵션 선택 및 컨트롤바 조절 예시</dd>
|
||||
|
||||
<dt>단축키 수정</dt>
|
||||
<dd>좌·우클릭 시 별칭 및 단축키 수정</dd>
|
||||
|
||||
<dt>명령어 실행</dt>
|
||||
<dd>명령어 클릭</dd>
|
||||
<dd>입력창에 입력 시 적용</dd>
|
||||
|
||||
<dt>명령어 아이콘 등록</dt>
|
||||
<dd>명령어 아이콘 바로 드래그&드롭</dd>
|
||||
</dl>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!-- // 링크 -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
70
samples/src/content/sub/command/command02.astro
Normal file
70
samples/src/content/sub/command/command02.astro
Normal file
@@ -0,0 +1,70 @@
|
||||
---
|
||||
import { IMAGE_BASE_PATH } from '../config';
|
||||
---
|
||||
|
||||
<section id="group12" class="command02">
|
||||
<!-- 타이틀 -->
|
||||
<div class="page-tit-wrap">
|
||||
<div class="tit-box">
|
||||
<span class="page-tail"></span>
|
||||
<h3><span>토목/도로분야</span>의 도면 작업시 자주 사용되는 특화 명령어</h3>
|
||||
<span class="page-tail"></span>
|
||||
</div>
|
||||
<div class="tip-box">
|
||||
<h4 class="tip-tit">How to use</h4>
|
||||
<dl>
|
||||
<dt>방식 1</dt>
|
||||
<dd>
|
||||
명령어 아이콘바 > 명령어
|
||||
전체보기 > 선형/횡단
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- // 타이틀 -->
|
||||
<div class="contents">
|
||||
<div class="inner">
|
||||
<img class="bg-img" src={`${IMAGE_BASE_PATH}/command/3x_command_02.png`} alt=" " />
|
||||
<!-- 링크 -->
|
||||
<div class="blind">
|
||||
<dl>
|
||||
<dt>EL 구하기</dt>
|
||||
<dd>도면작업 시 필요한 EL값 계산</dd>
|
||||
|
||||
<dt>비탈면 그리기 및 경사표기 하기</dt>
|
||||
<dd>비탈면 or 교량 구조물 등의 앞성토 그리는 작업 시 사용</dd>
|
||||
|
||||
<dt>시설물 및 차선 그리기</dt>
|
||||
<dd>횡단보도, 테이퍼 등 도로 시설물 그리기 작업 시 사용</dd>
|
||||
|
||||
<dt>시설물 및 차선 그리기</dt>
|
||||
<dd>횡단보도, 테이퍼 등 도로 시설물 그리기 작업 시 사용</dd>
|
||||
|
||||
<dt>현황 수정 및 표고점 생성하기</dt>
|
||||
<dd>표고점, 등고선 등 현황 수정과 생성 시 사용</dd>
|
||||
|
||||
<dt>평면선형 측점 및 거리 표시하기</dt>
|
||||
<dd>측점 생성, 선형 측점 조회 등 평면선형 작업 시 사용</dd>
|
||||
|
||||
<dt>비탈면 그리기 및 경사표기 하기</dt>
|
||||
<dd>비탈면 or 교량 구조물 등의 앞성토 그리는 작업 시 사용</dd>
|
||||
|
||||
<dt>횡단면도 작성하기</dt>
|
||||
<dd>쌓기, 깎기부 비탈면 등 횡단면도 그리기 작업 시 사용</dd>
|
||||
|
||||
<dt>선형 그리기</dt>
|
||||
<dd>도로 설계에서 사용되는 완화 곡선, 접선 등 선형을 편리하게 그릴 때 사용</dd>
|
||||
|
||||
<dt>종단선형 작성 및 계획고 찾기</dt>
|
||||
<dd>도로의 종단 선형을 계산하고 그리는 작업 시 사용</dd>
|
||||
|
||||
<dt>측구 설치하기</dt>
|
||||
<dd>V형 측구와 산마루 측구 생성</dd>
|
||||
</dl>
|
||||
|
||||
</div>
|
||||
<!-- // 링크 -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
93
samples/src/content/sub/command/command03.astro
Normal file
93
samples/src/content/sub/command/command03.astro
Normal file
@@ -0,0 +1,93 @@
|
||||
---
|
||||
import { IMAGE_BASE_PATH, VIDEO_BASE_PATH } from '../config';
|
||||
|
||||
|
||||
import VideoModal from './../../../components/VideoModal.astro';
|
||||
|
||||
const videoModals = [
|
||||
{ id: 'modal-rebar', videoSrc: `${VIDEO_BASE_PATH}/video/rebar_detail.mp4` },
|
||||
];
|
||||
---
|
||||
<section id="group13" class="command03">
|
||||
<!-- 타이틀 -->
|
||||
<div class="page-tit-wrap">
|
||||
<div class="tit-box">
|
||||
<span class="page-tail"></span>
|
||||
<h3>
|
||||
작업량이 많고 작업 시간이 긴 구조/배근도,
|
||||
<span>특화명령어로 초보자도 쉽게</span>
|
||||
</h3>
|
||||
<span class="page-tail"></span>
|
||||
</div>
|
||||
<div class="tip-box">
|
||||
<h4 class="tip-tit">How to use</h4>
|
||||
<dl>
|
||||
<dt>방식 1</dt>
|
||||
<dd>
|
||||
명령어 아이콘바 > 명령어
|
||||
전체보기 > 구조/배근
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- // 타이틀 -->
|
||||
<div class="contents">
|
||||
<div class="inner">
|
||||
<img class="bg-img" src={`${IMAGE_BASE_PATH}/command/3x_command_03.png`} alt=" " />
|
||||
<!-- 링크 -->
|
||||
<ul>
|
||||
<li>
|
||||
<button class="link-rebar" type="button" data-modal="modal-rebar">
|
||||
<span class="blind">철근 상세도 만들기</span>
|
||||
<div class="blind">
|
||||
1. 만들기 방식 선택
|
||||
2. 철근상세 선택 : 미리보기에서 철근상세를 선택하여 철근제원표에 추가
|
||||
3. 철근제원 입력 : a. 철근별 제원을 직접 입력(저장 파일을 불러와 사용 가능) b. 입력된 제원은 파일로 저장 가능
|
||||
4. 철근상세도 넣기(명령어 실행) : 명령어 클릭, 입력창에 입력 시 적용
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
<li class="blind">
|
||||
<dl>
|
||||
<dt>도면축척 설정하기</dt>
|
||||
<dd>철근, 마킹블록 및 재료표 등의 크기가 도면축척에 맞게 생성되도록 값을 먼저 입력</dd>
|
||||
|
||||
<dt>철근마킹블록 넣기</dt>
|
||||
<dd>점 철근 및 선 철근에 대한 철근 마킹 블록 작성</dd>
|
||||
<dd>철근 C.T.C 표시 및 철근상세 표기 가능</dd>
|
||||
|
||||
<dt>철근배근도 그리기</dt>
|
||||
|
||||
<dt>철근 길이 조회 및 마킹블록 수정</dt>
|
||||
|
||||
<dt>건설CALS 표준레이어 불러오기</dt>
|
||||
<dd>리스트에 원하는 레이어를 체크 후 적용하기 버튼으로 레이어창에 체크 항목을 추가</dd>
|
||||
|
||||
<dt>철근재료표 만들기</dt>
|
||||
<dd>철근제원 및 재료표의 상세 옵션 설정 확인 후 작성</dd>
|
||||
</dl>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!-- // 링크 -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 모달들 -->
|
||||
{videoModals.map(modal => (
|
||||
<VideoModal id={modal.id} videoSrc={modal.videoSrc} />
|
||||
))}
|
||||
</section>
|
||||
|
||||
<script>
|
||||
import { initModalController } from './../../../lib/modalController';
|
||||
|
||||
// 초기 로드
|
||||
initModalController();
|
||||
|
||||
// Astro 페이지 전환 시에도 재실행
|
||||
document.addEventListener('astro:page-load', () => {
|
||||
initModalController();
|
||||
});
|
||||
</script>
|
||||
3
samples/src/content/sub/config.ts
Normal file
3
samples/src/content/sub/config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export const IMAGE_BASE_PATH = "/help/images";
|
||||
|
||||
export const VIDEO_BASE_PATH = "/help/";
|
||||
77
samples/src/content/sub/customize/customize01.astro
Normal file
77
samples/src/content/sub/customize/customize01.astro
Normal file
@@ -0,0 +1,77 @@
|
||||
---
|
||||
import { IMAGE_BASE_PATH } from '../config';
|
||||
---
|
||||
|
||||
<section id="group4" class="customize01">
|
||||
<!-- 타이틀 -->
|
||||
<div class="page-tit-wrap">
|
||||
<div class="tit-box">
|
||||
<h3>
|
||||
사용자가 <span>원하는대로</span> 작업환경 및 명령어
|
||||
<span>아이콘바</span>를 구성
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- // 타이틀 -->
|
||||
<div class="contents">
|
||||
<div class="inner">
|
||||
<img class="bg-img" src={`${IMAGE_BASE_PATH}/customize/3x_customize_01.png`} alt=" " />
|
||||
<!-- 링크 -->
|
||||
<ul>
|
||||
<li>
|
||||
<a class="link-prfall" href="/help/customize03">
|
||||
<span class="blind">보조기능 전체보기</span>
|
||||
<div class="blind">그리드·객체스냅 등 보조기능 설정(토글 버튼으로 ON/OFF 모드)</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="link-cmdall" href="/help/command01">
|
||||
<span class="blind">명령어 전체보기</span>
|
||||
<div class="blind">EG-BIM의 모든 명령어 보기</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="blind">
|
||||
<dl>
|
||||
<dt>보조기능 아이콘바</dt>
|
||||
<dd>그리드·객체스냅 등 보조기능 설정(아이콘 색상으로 ON/OFF 모드)</dd>
|
||||
<dd>최대 6개 명령 등록 가능(총 15종 제공)</dd>
|
||||
<dd>우클릭 시 아이콘 삭제 </dd>
|
||||
|
||||
<dt>보조기능 아이콘 등록</dt>
|
||||
<dd>보조기능 아이콘바로 드래그&드롭</dd>
|
||||
|
||||
<dt>아이콘바 길이 조절</dt>
|
||||
|
||||
<dt>명령어 아이콘바</dt>
|
||||
<dd>그룹별 최대 16개 아이콘 등록 가능</dd>
|
||||
<dd>우클릭 시 아이콘 삭제</dd>
|
||||
|
||||
<dt>기본 그룹</dt>
|
||||
<dd>같은 그룹의 명령어만 등록 가능</dd>
|
||||
<dd>삭제 및 이름 변경 불가</dd>
|
||||
|
||||
<dt>아이콘 및 그룹 이동</dt>
|
||||
<dd>원하는 위치로 드래그&드롭</dd>
|
||||
|
||||
<dt>명령어 아이콘 등록</dt>
|
||||
<dd>같은 그룹의 명령어 등록 시 대표 아이콘 등록</dd>
|
||||
<dd>명령어 아이콘 바로 드래그&드롭</dd>
|
||||
|
||||
<dt>명령어 아이콘 추가</dt>
|
||||
<dd>아이콘 추가를 위한 명령어 전체보기 팝업</dd>
|
||||
|
||||
<dt>사용자 그룹 생성</dt>
|
||||
<dd>모든 그룹의 명령어 등록 가능</dd>
|
||||
<dd>우클릭 시 그룹 삭제 및 이름 변경</dd>
|
||||
|
||||
<dt>그룹 추가</dt>
|
||||
<dd>클릭 시 사용자 그룹 생성</dd>
|
||||
</dl>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- // 링크 -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
62
samples/src/content/sub/customize/customize02.astro
Normal file
62
samples/src/content/sub/customize/customize02.astro
Normal file
@@ -0,0 +1,62 @@
|
||||
---
|
||||
import { IMAGE_BASE_PATH } from '../config';
|
||||
---
|
||||
|
||||
<section id="group5" class="customize02">
|
||||
<!-- 타이틀 -->
|
||||
<div class="page-tit-wrap">
|
||||
<div class="tit-box">
|
||||
<span class="page-tail"></span>
|
||||
<h3>
|
||||
사용자 작업 스타일에 맞게
|
||||
<span>기본적인 프로그램</span> 환경을 설정
|
||||
</h3>
|
||||
<span class="page-tail"></span>
|
||||
</div>
|
||||
<div class="tip-box">
|
||||
<h4 class="tip-tit">How to use</h4>
|
||||
<dl>
|
||||
<dt>방식 1</dt>
|
||||
<dd>명령어 입력창 > Command : OPTIONS</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>방식 2</dt>
|
||||
<dd>
|
||||
홈메뉴 > 사용자
|
||||
설정 > Display&Mouse
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- // 타이틀 -->
|
||||
<div class="contents">
|
||||
<div class="inner">
|
||||
<img class="bg-img" src={`${IMAGE_BASE_PATH}/customize/3x_customize_02.png`} alt=" " />
|
||||
<div class="blind">
|
||||
<dl>
|
||||
<dt>작업화면 디스플레이</dt>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>마우스 기능 설정</dt>
|
||||
<dd>휠 스크롤 : 화면의 확대/축소량 설정</dd>
|
||||
<dd>휠 클릭 : 화면 초점 이동 or 객체스냅 선택 적용</dd>
|
||||
<dd>왼쪽/오른쪽 클릭 : 객체 선택·명령 진행 시 기본·편집 메뉴 or 마지막 명령 반복 선택</dd>
|
||||
|
||||
<dt>도면공간</dt>
|
||||
<dd>새 도면공간(Layout) 생성 시 뷰포트창 자동 생성 여부 선택</dd>
|
||||
|
||||
<dt>파일 보안 및 저장</dt>
|
||||
<dd>도면 형식 및 저장 버전 선택</dd>
|
||||
<dd>프록시 객체 알림 및 표시 설정</dd>
|
||||
|
||||
<dt>자동 저장 및 백업</dt>
|
||||
<dd>프로그램 다운에 대비한 저장 간격·경로 지정으로 백업 및 임시파일 관리</dd>
|
||||
|
||||
<dt>프로그램 종료 시 파일 설정</dt>
|
||||
<dd>여러 파일 열림 상태에서 창 닫기 시 옵션 활성화 여부</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
166
samples/src/content/sub/customize/customize03.astro
Normal file
166
samples/src/content/sub/customize/customize03.astro
Normal file
@@ -0,0 +1,166 @@
|
||||
---
|
||||
import { IMAGE_BASE_PATH, VIDEO_BASE_PATH } from '../config';
|
||||
|
||||
|
||||
import VideoModal from './../../../components/VideoModal.astro';
|
||||
|
||||
const videoModals = [
|
||||
{ id: 'modal-grid', videoSrc: `${VIDEO_BASE_PATH}/video/grid.mp4` },
|
||||
{ id: 'modal-grip', videoSrc:`${VIDEO_BASE_PATH}/video/selected_object_grip.mp4` },
|
||||
{ id: 'modal-ortho', videoSrc: `${VIDEO_BASE_PATH}/video/orthogonal_mode.mp4` },
|
||||
{ id: 'modal-iso', videoSrc: `${VIDEO_BASE_PATH}/video/isometric_drawing.mp4` },
|
||||
{ id: 'modal-overlap', videoSrc: `${VIDEO_BASE_PATH}/video/selection_of_overlapping_objects.mp4` },
|
||||
{ id: 'modal-osnap', videoSrc: `${VIDEO_BASE_PATH}/video/object_snap.mp4` },
|
||||
{ id: 'modal-dynamic', videoSrc: `${VIDEO_BASE_PATH}/video/dynamic_input.mp4` },
|
||||
{ id: 'modal-angle', videoSrc: `${VIDEO_BASE_PATH}/video/angle_snap_tracking.mp4` },
|
||||
{ id: 'modal-efct', videoSrc: `${VIDEO_BASE_PATH}/video/selection_visual_effects.mp4` },
|
||||
];
|
||||
---
|
||||
|
||||
<section id="group6" class="customize03">
|
||||
<!-- 타이틀 -->
|
||||
<div class="page-tit-wrap">
|
||||
<div class="tit-box">
|
||||
<span class="page-tail"></span>
|
||||
<h3>
|
||||
<span>작업상황</span>에 따라 원하는 기능을 켜고 끄며
|
||||
<span>작업환경</span>을 설정
|
||||
</h3>
|
||||
<span class="page-tail"></span>
|
||||
</div>
|
||||
<div class="tip-box">
|
||||
<h4 class="tip-tit">How to use</h4>
|
||||
<dl>
|
||||
<dt>방식 1</dt>
|
||||
<dd>보조기능 아이콘바 > 보조기능 전체보기</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>방식 2</dt>
|
||||
<dd>
|
||||
명령어 아이콘바 > 명령어
|
||||
전체보기 > 보조기능
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- // 타이틀 -->
|
||||
<div class="contents">
|
||||
<div class="inner">
|
||||
<img class="bg-img" src={`${IMAGE_BASE_PATH}/customize/3x_customize_03.png`} alt=" " />
|
||||
<!-- 링크 -->
|
||||
<ul>
|
||||
<li>
|
||||
<button type="button" class="link-grid" data-modal="modal-grid">
|
||||
<span class="blind">그리드</span>
|
||||
<div class="blind">작업화면에 선이나 점으로 표시되는 직사각형 패턴</div>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<button type="button" class="link-grip" data-modal="modal-grip">
|
||||
<span class="blind">그립 표시 설정</span>
|
||||
<div class="blind">
|
||||
객체 선택 시 그립점 표시 여부.
|
||||
그립점의 형상 및 표시 개수 설정.
|
||||
그립점 선택 시 실행 가능한 명령 표시 여부
|
||||
</div>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li class="blind">
|
||||
<dl>
|
||||
<dt>객체스냅 추적</dt>
|
||||
<dd>스냅점으로부터 직교 방향의 가이드 라인 표시</dd>
|
||||
|
||||
<dt>뷰큐브 표시</dt>
|
||||
<dd>작업화면 우상단에 뷰 방향을 조절하는 뷰큐브 표시 여부</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="link-ortho" data-modal="modal-ortho">
|
||||
<span class="blind">직교모드</span>
|
||||
<div class="blind">명령어 실행 중에 커서 이동을 수평 및 수직으로 제한</div>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li class="blind">
|
||||
<dl>
|
||||
<dt>선 가중치</dt>
|
||||
<dt>그리드 스냅</dt>
|
||||
<dd>커서 움직임을 설정된 스냅 간격으로 잡아주는 기능</dd>
|
||||
</dl>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<button type="button" class="link-iso" data-modal="modal-iso">
|
||||
<span class="blind">등각 투영 작업 모드</span>
|
||||
<div class="blind">2D 평면에 3D 형상처럼 그리기. 투영된 모드로 작업공간은 평면.</div>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li class="blind">
|
||||
<dl>
|
||||
<dt>명령어 자동완성</dt>
|
||||
<dd>명령어 입력 시 연관 명령어 리스트 표시 및 리스트에서 선택된 명령어 자동 입력</dd>
|
||||
<dt>커서 좌표값 표시</dt>
|
||||
</dl>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<button type="button" class="link-overlap" data-modal="modal-overlap">
|
||||
<span class="blind">중복객체 리스트 박스</span>
|
||||
<div class="blind">여러 객체가 겹쳐있을 경우 객체 종류를 표시해 객체만 구별하여 선택</div>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<button type="button" class="link-osnap" data-modal="modal-osnap">
|
||||
<span class="blind">객체 스냅</span>
|
||||
<div class="blind">객체의 끝, 중간, 중심같은 특정 지점을 잡아주는 기능</div>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<button type="button" class="link-dynamic" data-modal="modal-dynamic">
|
||||
<span class="blind">동적 입력</span>
|
||||
<div class="blind">명령어 입력 및 진행 시 십자선 커서 부근에 명령어, 좌표, 거리 등을 실시간 표시</div>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<button type="button" class="link-angle" data-modal="modal-angle">
|
||||
<span class="blind">극좌표 추적</span>
|
||||
<div class="blind">기준점으로부터 원하는 각도 위치를 잡아 가이드라인 표시</div>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<button type="button" class="link-efct" data-modal="modal-efct">
|
||||
<span class="blind">선택 효과 설정</span>
|
||||
<div class="blind">객체 선택 시 커서 시작 방향에 따른 선택 영역 색상 선택, 객체 선택 전, 커서가 객체 근처로 갔을 때의 표시</div>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- // 링크 -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 모달들 -->
|
||||
{videoModals.map(modal => (
|
||||
<VideoModal id={modal.id} videoSrc={modal.videoSrc} />
|
||||
))}
|
||||
|
||||
</section>
|
||||
|
||||
<script>
|
||||
import { initModalController } from './../../../lib/modalController';
|
||||
|
||||
// 초기 로드
|
||||
initModalController();
|
||||
|
||||
// Astro 페이지 전환 시에도 재실행
|
||||
document.addEventListener('astro:page-load', () => {
|
||||
initModalController();
|
||||
});
|
||||
</script>
|
||||
55
samples/src/content/sub/customize/customize04.astro
Normal file
55
samples/src/content/sub/customize/customize04.astro
Normal file
@@ -0,0 +1,55 @@
|
||||
---
|
||||
import { IMAGE_BASE_PATH } from '../config';
|
||||
---
|
||||
|
||||
<section id="group7" class="customize04">
|
||||
<!-- 타이틀 -->
|
||||
<div class="page-tit-wrap">
|
||||
<div class="tit-box">
|
||||
<span class="page-tail"></span>
|
||||
<h3>
|
||||
<span>명령어별 별칭 또는 단축키</span> 설정해 명령어를 간단히 실행
|
||||
</h3>
|
||||
<span class="page-tail"></span>
|
||||
</div>
|
||||
<div class="tip-box">
|
||||
<h4 class="tip-tit">How to use</h4>
|
||||
<dl>
|
||||
<dt>방식 1</dt>
|
||||
<dd>
|
||||
명령어 아이콘바 > 명령어
|
||||
전체보기 > 단축키
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- // 타이틀 -->
|
||||
|
||||
<div class="contents">
|
||||
<div class="inner">
|
||||
<img class="bg-img" src={`${IMAGE_BASE_PATH}/customize/3x_customize_04.png`} alt=" " />
|
||||
<div class="blind">
|
||||
<dl>
|
||||
<dt>명령어 검색</dt>
|
||||
<dd>영문 명령어 or 별칭으로 검색</dd>
|
||||
|
||||
<dt>명령어 그룹 선택</dt>
|
||||
|
||||
<dt>명령어 선택</dt>
|
||||
|
||||
<dt>별칭</dt>
|
||||
<dd>영문 or 숫자 / 영문 + 숫자 조합 가능</dd>
|
||||
<dd>명령어당 최대 2개 지정</dd>
|
||||
<dd>우클릭 시 별칭 제거</dd>
|
||||
|
||||
<dt>단축키</dt>
|
||||
<dd>조합키(CTRL·ALT·SHIFT) + 영문 or 숫자 / 기능키(F1~F12)로 설정</dd>
|
||||
<dd>명령어당 최대 1개 지정</dd>
|
||||
<dd>우클릭 시 단축키 제거</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
69
samples/src/content/sub/feature/feature01.astro
Normal file
69
samples/src/content/sub/feature/feature01.astro
Normal file
@@ -0,0 +1,69 @@
|
||||
---
|
||||
import { IMAGE_BASE_PATH } from '../config';
|
||||
---
|
||||
|
||||
<section id="group18" class="feature01">
|
||||
<!-- 타이틀 -->
|
||||
<div class="page-tit-wrap">
|
||||
<div class="tit-box">
|
||||
<span class="page-tail"></span>
|
||||
<h3>
|
||||
선택된 객체의 모든 <span>속성 정보</span
|
||||
>를 <span>확인</span>하고
|
||||
<span>수정</span>
|
||||
</h3>
|
||||
<span class="page-tail"></span>
|
||||
</div>
|
||||
<div class="tip-box">
|
||||
<h4 class="tip-tit">How to use</h4>
|
||||
<dl>
|
||||
<dt>방식 1</dt>
|
||||
<dd>명령어 입력창 > Command : PROPERTIES</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>방식 2</dt>
|
||||
<dd>
|
||||
명령어
|
||||
전체보기 > 선택/조회 >
|
||||
<img src={`${IMAGE_BASE_PATH}/ico/ico_list.svg`} alt="" /> 객체
|
||||
특성조회 > Properties
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>방식 3</dt>
|
||||
<dd>상단 우측 상세보기의 속성창 클릭</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- // 타이틀 -->
|
||||
<div class="contents">
|
||||
<div class="inner">
|
||||
<img class="bg-img" src={`${IMAGE_BASE_PATH}/feature/3x_feature_01.png`} alt=" " />
|
||||
<div class="blind">
|
||||
<dl>
|
||||
<dt>속성Bar(속성바)</dt>
|
||||
<dd>선택된 객체의 주요 속성정보가 표시되며 수정 가능</dd>
|
||||
|
||||
<dt>속성창</dt>
|
||||
|
||||
<dt>Quick Select</dt>
|
||||
<dd>선택된 객체를 조건으로 필터링하여 원하는 객체만 선택</dd>
|
||||
|
||||
<dt>기본정보</dt>
|
||||
<dd>모든 객체가 가지고 있는 기본 특성</dd>
|
||||
|
||||
<dt>형상정보</dt>
|
||||
<dd>선택된 객체의 종류에 따른 크기, 면적, 길이, 각도 등의 형상 정보 표</dd>
|
||||
|
||||
<dt>위치정보</dt>
|
||||
<dd>선택된 객체의 종류에 따른 시종점 및 정점 등의 좌표 정보 표시</dd>
|
||||
|
||||
<dt>다중 선택</dt>
|
||||
<dd>같은 종류의 객체를 다중 선택 시 객체 수 표시</dd>
|
||||
<dd>다른 종류의 객체를 다중 선택 시 목록으로 표시 * 다른 종류의 객체를 다중 선택 시</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
62
samples/src/content/sub/feature/feature02.astro
Normal file
62
samples/src/content/sub/feature/feature02.astro
Normal file
@@ -0,0 +1,62 @@
|
||||
---
|
||||
import { IMAGE_BASE_PATH } from '../config';
|
||||
---
|
||||
|
||||
<section id="group19" class="feature02">
|
||||
<!-- 타이틀 -->
|
||||
<div class="page-tit-wrap">
|
||||
<div class="tit-box">
|
||||
<span class="page-tail"></span>
|
||||
<h3>
|
||||
적용할 <span>색상을 선택</span>하고 선택 색상에 대한
|
||||
<span>속성 값</span> 확인
|
||||
</h3>
|
||||
<span class="page-tail"></span>
|
||||
</div>
|
||||
<div class="tip-box">
|
||||
<h4 class="tip-tit">How to use</h4>
|
||||
<dl>
|
||||
<dt>방식 1</dt>
|
||||
<dd>명령어 입력창 > Command : COLOR</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>방식 2</dt>
|
||||
<dd>
|
||||
상단 바 > 색상 > 색상
|
||||
상세보기
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- // 타이틀 -->
|
||||
<div class="contents">
|
||||
<div class="inner">
|
||||
<img class="bg-img" src={`${IMAGE_BASE_PATH}/feature/3x_feature_02.png`} alt=" " />
|
||||
<div class="blind">
|
||||
<dl>
|
||||
<dt>속성Bar(속성바)</dt>
|
||||
<dd>선택된 객체의 주요 속성정보가 표시되며 수정 가능</dd>
|
||||
|
||||
<dt>속성창</dt>
|
||||
|
||||
<dt>Quick Select</dt>
|
||||
<dd>선택된 객체를 조건으로 필터링하여 원하는 객체만 선택</dd>
|
||||
|
||||
<dt>기본정보</dt>
|
||||
<dd>모든 객체가 가지고 있는 기본 특성</dd>
|
||||
|
||||
<dt>형상정보</dt>
|
||||
<dd>선택된 객체의 종류에 따른 크기, 면적, 길이, 각도 등의 형상 정보 표</dd>
|
||||
|
||||
<dt>위치정보</dt>
|
||||
<dd>선택된 객체의 종류에 따른 시종점 및 정점 등의 좌표 정보 표시</dd>
|
||||
|
||||
<dt>다중 선택</dt>
|
||||
<dd>같은 종류의 객체를 다중 선택 시 객체 수 표시</dd>
|
||||
<dd>다른 종류의 객체를 다중 선택 시 목록으로 표시 * 다른 종류의 객체를 다중 선택 시</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
92
samples/src/content/sub/floorplan/floorplan01.astro
Normal file
92
samples/src/content/sub/floorplan/floorplan01.astro
Normal file
@@ -0,0 +1,92 @@
|
||||
---
|
||||
import { IMAGE_BASE_PATH } from '../config';
|
||||
---
|
||||
|
||||
<section id="group28" class="floorPlan01">
|
||||
<!-- 타이틀 -->
|
||||
<div class="page-tit-wrap">
|
||||
<div class="tit-box">
|
||||
<span class="page-tail"></span>
|
||||
<h3>
|
||||
선택된 폴더 내의 도면 파일을 <span>한 눈에 보면서 탐색</span
|
||||
>하고 <span>정보 열람이 가능</span>
|
||||
</h3>
|
||||
<span class="page-tail"></span>
|
||||
</div>
|
||||
<div class="tip-box">
|
||||
<h4 class="tip-tit">How to use</h4>
|
||||
<dl>
|
||||
<dt>방식 1</dt>
|
||||
<dd>
|
||||
상단 바 우측 > <img
|
||||
src={`${IMAGE_BASE_PATH}/ico/ico_floorplan.svg`}
|
||||
alt=""
|
||||
/> 꾸러미
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- // 타이틀 -->
|
||||
<div class="contents">
|
||||
<div class="inner">
|
||||
<img class="bg-img" src={`${IMAGE_BASE_PATH}/floorplan/3x_floorplan_01.png`} alt=" " />
|
||||
|
||||
<!-- 링크 -->
|
||||
<ul>
|
||||
<li>
|
||||
<a class="link-atrb-block" href="/help/floorplan02">
|
||||
<span class="blind">도면정보수정</span>
|
||||
<div class="blind">도면명, 도면번호 등 정보 수정</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="link-multi-print" href="/help/multiprint01">
|
||||
<span class="blind">다중출력</span>
|
||||
<div class="blind">출력 옵션 설정 및 여러 도면 일괄 출력</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="link-main" href="/help/interface01">
|
||||
<span class="blind">그리미 열기</span>
|
||||
<div class="blind">도면 작업공간 실행</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="blind">
|
||||
<dl>
|
||||
<dt>사용자 지정 폴더</dt>
|
||||
|
||||
<dt>사용자 지정 폴더 추가</dt>
|
||||
<dd>사용자 지정 폴더로 드래그&드롭</dd>
|
||||
|
||||
<dt>파일 탐색기</dt>
|
||||
|
||||
<dt>도면 찾기</dt>
|
||||
<dd>선택된 폴더 내에서 도면 검색</dd>
|
||||
<dd>도면명, 도면번호 등 표시된 도면정보 내에서 키워드 검색</dd>
|
||||
|
||||
<dt>도면정보</dt>
|
||||
<dd>파일명, 도면명, 도면번호 등 건설 CALS 기준의 도면정보 제공</dd>
|
||||
<dd>열림 : 현재 그리미에 실행 중인 파일 표시</dd>
|
||||
<dd>우클릭 시 이동, 복사, 삽입, 삭제 및 열기 명령 실행</dd>
|
||||
<dd>더블클릭 시 그리미에서 해당 도면 실행</dd>
|
||||
|
||||
<dt>미리보기 화면 분리</dt>
|
||||
|
||||
<dt>미리보기 크기 조절</dt>
|
||||
|
||||
<dt>화면 확장</dt>
|
||||
|
||||
<dt>미리보기</dt>
|
||||
<dd>선택된 폴더 내 도면파일 미리보기</dd>
|
||||
<dd>열림 : 현재 그리미에서 실행 중인 파일 표시</dd>
|
||||
</dl>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- // 링크 -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
56
samples/src/content/sub/floorplan/floorplan02.astro
Normal file
56
samples/src/content/sub/floorplan/floorplan02.astro
Normal file
@@ -0,0 +1,56 @@
|
||||
---
|
||||
import { IMAGE_BASE_PATH } from '../config';
|
||||
---
|
||||
|
||||
<section id="group29" class="floorPlan02">
|
||||
<!-- 타이틀 -->
|
||||
<div class="page-tit-wrap">
|
||||
<div class="tit-box">
|
||||
<span class="page-tail"></span>
|
||||
<h3>
|
||||
도면정보를 선택해 수정하며,
|
||||
<span>수정된 항목은 도면에 자동 적용</span>
|
||||
</h3>
|
||||
<span class="page-tail"></span>
|
||||
</div>
|
||||
<div class="tip-box">
|
||||
<h4 class="tip-tit">How to use</h4>
|
||||
<dl>
|
||||
<dt>방식 1</dt>
|
||||
<dd>
|
||||
꾸러미 > 상단
|
||||
좌측 > 도면정보수정
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- // 타이틀 -->
|
||||
<div class="contents">
|
||||
<div class="inner">
|
||||
<img class="bg-img" src={`${IMAGE_BASE_PATH}/floorplan/3x_floorplan_02.png`} alt=" " />
|
||||
|
||||
<!-- 링크 -->
|
||||
<ul>
|
||||
<li>
|
||||
<a class="link-select" href="/help/floorplan03">
|
||||
<span class="blind">도면정보 항목 선택</span>
|
||||
<div class="blind">도면정보 수정 시작과 함께 활성화. 도곽의 정보들 중 화면에 표출할 항목을 선택</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="blind">
|
||||
<dl>
|
||||
<dt>도면정보 항목</dt>
|
||||
|
||||
<dt>도면정보 수정</dt>
|
||||
<dd>도면정보 항목을 클릭하여 정보 수정</dd>
|
||||
<dd>도면번호와 같은 일련번호가 포함된 항목은 수정 칸의 우측 하단(■)을 드래그하여 엑셀처럼 일괄 수정</dd>
|
||||
<dd>수정한 도면정보는 도면에 자동 적용</dd>
|
||||
</dl>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- // 링크 -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
49
samples/src/content/sub/floorplan/floorplan03.astro
Normal file
49
samples/src/content/sub/floorplan/floorplan03.astro
Normal file
@@ -0,0 +1,49 @@
|
||||
---
|
||||
import { IMAGE_BASE_PATH } from '../config';
|
||||
---
|
||||
|
||||
<section id="group30" class="floorPlan03">
|
||||
<!-- 타이틀 -->
|
||||
<div class="page-tit-wrap">
|
||||
<div class="tit-box">
|
||||
<span class="page-tail"></span>
|
||||
<h3>
|
||||
<span>도곽의 여러 정보</span>들 중에서
|
||||
<span>원하는 정보를 선택하여 표시 가능</span>
|
||||
</h3>
|
||||
<span class="page-tail"></span>
|
||||
</div>
|
||||
<div class="tip-box">
|
||||
<h4 class="tip-tit">How to use</h4>
|
||||
<dl>
|
||||
<dt>방식 1</dt>
|
||||
<dd>
|
||||
꾸러미 > 상단
|
||||
좌측 > 도면정보수정
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- // 타이틀 -->
|
||||
<div class="contents">
|
||||
<div class="inner">
|
||||
<img class="bg-img" src={`${IMAGE_BASE_PATH}/floorplan/3x_floorplan_03.png`} alt=" " />
|
||||
<div class="blind">
|
||||
<dl>
|
||||
<dt>도면정보 항목 선택</dt>
|
||||
<dd>도곽에 있는 도면정보 항목들을 표시</dd>
|
||||
<dd>원하는 정보를 체크하여 도면정보 항목 편집(예 : 고정 항목, 편집 가능 항목)</dd>
|
||||
|
||||
<dt>수정 중인 항목 선택창에 표시</dt>
|
||||
<dd>도면정보 항목 선택창에서도 수정하고자 하는 항목 선택 가능</dd>
|
||||
|
||||
<dt>수정 종료</dt>
|
||||
|
||||
<dt>도면정보 항목</dt>
|
||||
<dd>중간 저장 / 수정 중 취소</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
90
samples/src/content/sub/interface/information.astro
Normal file
90
samples/src/content/sub/interface/information.astro
Normal file
@@ -0,0 +1,90 @@
|
||||
---
|
||||
import { IMAGE_BASE_PATH } from '../config';
|
||||
import LoginCarousel from '../../../components/LoginCarousel.astro';
|
||||
|
||||
const slides = [
|
||||
{
|
||||
image: `${IMAGE_BASE_PATH}/interface/3x_information.png`,
|
||||
title: '로그인 화면',
|
||||
body: '아이디/비밀번호 입력 후 실행하며 오프라인 인증 유지 기간을 확인합니다.',
|
||||
},
|
||||
{
|
||||
image: `${IMAGE_BASE_PATH}/interface/3x_information.png`,
|
||||
title: '회원가입 및 비밀번호 재설정',
|
||||
body: '홈페이지에서 계정을 만들거나 비밀번호를 재설정한 뒤 인증을 갱신합니다.',
|
||||
},
|
||||
{
|
||||
image: `${IMAGE_BASE_PATH}/interface/3x_information.png`,
|
||||
title: '로그아웃',
|
||||
body: '열린 도면을 모두 닫은 뒤 로그아웃하고 라이선스 만료일을 확인합니다.',
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
|
||||
<section id="group1" class="login">
|
||||
<!-- 타이틀 -->
|
||||
<div class="page-tit-wrap">
|
||||
<div class="page-tit-wrap">
|
||||
<div class="tit-box">
|
||||
<span class="page-tail"></span>
|
||||
<h3>
|
||||
Civil Engineering Lab <span>환영합니다</span>
|
||||
</h3>
|
||||
<span class="page-tail"></span>
|
||||
</div>
|
||||
<!--div class="tip-box">
|
||||
<h4 class="tip-tit">How to use</h4>
|
||||
<dl>
|
||||
<dt>방식 1</dt>
|
||||
<dd>
|
||||
상단 바 좌측 > EG-BIM
|
||||
로고 > 홈메뉴 > S/W 정보
|
||||
</dd>
|
||||
</dl>
|
||||
</div -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- // 타이틀 -->
|
||||
<div class="contents">
|
||||
<div class="inner">
|
||||
<LoginCarousel slides={slides} />
|
||||
|
||||
<div class="blind">
|
||||
<dl>
|
||||
<dt>로그인창</dt>
|
||||
<dd>첫 실행 or 로그아웃 후 이지빔 실행 시 발생</dd>
|
||||
|
||||
<dt>아이디 입력</dt>
|
||||
<dt>비밀번호 입력</dt>
|
||||
|
||||
<dt>로그인</dt>
|
||||
<dd>아이디, 비밀번호 입력 후 로그인하여 이지빔 실행</dd>
|
||||
<dd>오프라인 환경에서도 로그인 기능 지원</dd>
|
||||
|
||||
<dt>회원가입</dt>
|
||||
<dd>계정이 없는 경우, 홈페이지에서 회원가입 진행</dd>
|
||||
|
||||
<dd>사용자 인증</dd>
|
||||
<dd>이지빔을 사용하기 위해 홈페이지에서 사용자 인증 필요</dd>
|
||||
<dd>최종 온라인 인증 시간부터 30일 or 라이센스 유효 기간 중 더 짧은 시간을 기준으로 재인증</dd>
|
||||
|
||||
<dt>비밀번호 재설정</dt>
|
||||
<dd>비밀번호가 기억나지 않는 경우, 홈페이지에서 비밀번호 복구</dd>
|
||||
|
||||
<dt>S/W 정보</dt>
|
||||
<dt>사용자 정보</dt>
|
||||
|
||||
<dt>라이센스 유효일</dt>
|
||||
<dd>일반 사용자 : 만료일자 표시</dd>
|
||||
<dd>내부 사용자 : ∞ 표시</dd>
|
||||
|
||||
<dt>로그아웃</dt>
|
||||
<dd>파일 탭에 도면이 있는 경우 로그아웃 불가하므로 모든 도면을 종료 후 로그아웃 * 도면 종료 시 파일 탭</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
171
samples/src/content/sub/interface/interface01.astro
Normal file
171
samples/src/content/sub/interface/interface01.astro
Normal file
@@ -0,0 +1,171 @@
|
||||
---
|
||||
import { IMAGE_BASE_PATH } from '../config';
|
||||
---
|
||||
|
||||
|
||||
<section id="group1" class="mainview">
|
||||
<!-- 타이틀 -->
|
||||
<div class="page-tit-wrap">
|
||||
<div class="tit-box">
|
||||
<h3>
|
||||
<span>필수요소</span>들의 <span>효율적인 화면구성</span> &
|
||||
<span>넓은 작업공간</span>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- // 타이틀 -->
|
||||
<div class="contents">
|
||||
<div class="inner">
|
||||
<img class="bg-img" src={`${IMAGE_BASE_PATH}/interface/3x_interface_01.png`} alt=" " />
|
||||
<!-- 링크 -->
|
||||
<ul>
|
||||
<li>
|
||||
<a class="link-homemenu" href="/help/interface02" >
|
||||
<span class="blind">홈메뉴</span>
|
||||
<div class="blind">열기, 저장 등의 파일 관련 메뉴 모음</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="blind">
|
||||
<dl>
|
||||
<dt>파일탭</dt>
|
||||
<dd>새 파일 생성, 열기·닫기</dd>
|
||||
<dd>Open 된 파일 리스트 확인·미리보기</dd>
|
||||
<dt>새도면(New)</dt>
|
||||
<dt>열기(open)</dt>
|
||||
</dl>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link-propsbar" href="/help/feature01" >
|
||||
<span class="blind">속성Bar(속성바)</span>
|
||||
<div class="blind">선택된 객체의 주요 속성정보 확인</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="link-mainprops" href="/help/feature01">
|
||||
<span class="blind">속성창</span>
|
||||
<div class="blind">선택된 객체의 모든 속성정보 확인</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="link-filetab" href="/help/multi01">
|
||||
<span class="blind">파일 탭 분리(듀얼모드 동시 작업)</span>
|
||||
<div class="blind">작업도면과 참고도면을 동시에 보면서 작업 가능(화면 밖으로 드래그&드롭)</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="blind">
|
||||
<dl>
|
||||
<dt>기본 특성 메뉴</dt>
|
||||
<dd>그리기 모드 : 객체 생성 시 특성별 설정된 값으로 생성</dd>
|
||||
<dd>선택 객체 : 객체 선택 시 특성 표시, 변경</dd>
|
||||
<dd>특성별 상세보기창에서 레이어·스타일의 생성, 관리</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link-layer" href="/help/layer01">
|
||||
<span class="blind">레이어 상세</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="link-color" href="/help/feature02">
|
||||
<span class="blind">색상 상세</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link-line" href="/help/style01">
|
||||
<span class="blind">선 스타일 상세</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link-text" href="/help/style02">
|
||||
<span class="blind">문자 스타일 상세</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link-msmt" href="/help/style03">
|
||||
<span class="blind">치수 스타일 상세</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link-print" href="/help/print01" >
|
||||
<span class="blind">인쇄</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="link-ggurumi" href="/help/floorplan01">
|
||||
<span class="blind">꾸러미</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="blind">
|
||||
<dl>
|
||||
<dt>창이동</dt>
|
||||
<dd>창 이동·확대·축소</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link-layouttab" href="/help/multi02">
|
||||
<span class="blind">layout 탭 분리(듀얼모드 동시 작업)</span>
|
||||
<div class="blind">Model 공간과 Layout 공간을 동시에 보면서 작업 가능(화면 밖으로 드래그&드롭)</div>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link-mainprf" href="/help/customize03" >
|
||||
<span class="blind">보조기능 전체보기</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link-setbar" href="/help/customize01">
|
||||
<span class="blind">보조기능 아이콘바</span>
|
||||
<ul class="blind">
|
||||
<li>그리드·객체스냅 등 보조기능 설정(아이콘 색상으로 ON/OFF 모드)</li>
|
||||
<li>최대 6개 명령 등록 가능(총 15종 제공)</li>
|
||||
<li>보조기능 전체보기에서 드래그&드롭으로 아이콘 추가</li>
|
||||
</ul>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link-cmdbar" href="/help/customize01">
|
||||
<span class="blind">명령어 아이콘바</span>
|
||||
<div class="blind">아이콘 클릭 시 명령어 실행, 사용자가 원하는 명령어로 편집 가능</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="blind">
|
||||
<dl>
|
||||
<dt>명령어 입력창</dt>
|
||||
<dd>명령어를 입력하고 입력한 명령의 진행 과정 표시</dd>
|
||||
|
||||
<dt>명령어 History(히스토리)</dt>
|
||||
<dd>파일 오픈 시점부터 History 확인</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link-cmdall" href="/help/command01" >
|
||||
<span class="blind">명령어 전체보기</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="blind">
|
||||
<dl>
|
||||
<dt>작업공간 탭</dt>
|
||||
<dd>Model 공간과 Layout 공간의 화면 전환</dd>
|
||||
|
||||
<dt>명령어 아이콘 추가</dt>
|
||||
<dd>명령어 전체보기에서 드래그&드롭으로 아이콘 추가(그룹별 최대 16개)</dd>
|
||||
|
||||
<dt>그룹 추가</dt>
|
||||
<dd>사용자 그룹 추가 (기본 제공 12개 그룹 외)</dd>
|
||||
</dl>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
<!-- // 링크 -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
108
samples/src/content/sub/interface/interface02.astro
Normal file
108
samples/src/content/sub/interface/interface02.astro
Normal file
@@ -0,0 +1,108 @@
|
||||
---
|
||||
import { IMAGE_BASE_PATH } from '../config';
|
||||
---
|
||||
|
||||
<section id="group2" class="interface01">
|
||||
<!-- 타이틀 -->
|
||||
<div class="page-tit-wrap">
|
||||
<div class="tit-box">
|
||||
<span class="page-tail"></span>
|
||||
<h3>
|
||||
<span>파일 관련 기본 기능</span> 및 <span>사용자 설정</span>에
|
||||
관한 기능
|
||||
</h3>
|
||||
<span class="page-tail"></span>
|
||||
</div>
|
||||
<div class="tip-box">
|
||||
<h4 class="tip-tit">How to use</h4>
|
||||
<dl>
|
||||
<dt>방식 1</dt>
|
||||
<dd>
|
||||
상단 바 좌측 > EG-BIM
|
||||
로고 > 홈메뉴
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- // 타이틀 -->
|
||||
<div class="contents">
|
||||
<div class="inner">
|
||||
<img class="bg-img" src={`${IMAGE_BASE_PATH}/interface/3x_interface_02.png`} alt=" " />
|
||||
<!-- 텍스트 -->
|
||||
<ul >
|
||||
<li class="blind">
|
||||
<dl>
|
||||
<dt>홈메뉴</dt>
|
||||
<dd>클릭 시 기본 특성 메뉴 ↔ 홈메뉴 변경</dd>
|
||||
|
||||
<dt>작업중인 파일</dt>
|
||||
<dd>저장 : 현재 작업 중인 내용 저장</dd>
|
||||
<dd>복사저장 : 다른 이름으로 파일을 복사하여 저장</dd>
|
||||
<dd>
|
||||
내보내기 : 다른 형식으로 내보내기(PDF, SVG 등)<br>
|
||||
* 내보내기 가능한 파일형식<br>
|
||||
Portable Document Format (*.pdf)<br>
|
||||
Scalable Vector Graphics (*.svg)<br>
|
||||
Bitmap file (*.bmp)<br>
|
||||
Windows meta File (*.wmf)<br>
|
||||
Enhanced Windows Meta File (*.emf)<br>
|
||||
Design Web Format (*.dwf)<br>
|
||||
Stereolithography (*.stl)<br>
|
||||
COLLAborative Design Activity (*.dae)<br>
|
||||
MicroStation Design File (*.dgn)<br>
|
||||
Wavefront Object format (*.obj)
|
||||
</dd>
|
||||
<dd>도면묶기 : 외부참조 파일과 도면을 묶어 패키지로 만들기</dd>
|
||||
|
||||
<dt>다른파일 열기</dt>
|
||||
<dd>찾아열기 : PC or 네트워크 경로에서 저장된 파일을 찾아 열기</dd>
|
||||
<dd>최근파일 : 최근 작업파일 표시(최대 10개)</dd>
|
||||
<dd>새 파일 : 새 파일 생성</dd>
|
||||
|
||||
<dt>Open 된 파일</dt>
|
||||
|
||||
<dt>미리보기</dt>
|
||||
<dd>최근파일에 마우스 오버 시 미리보기 확인</dd>
|
||||
|
||||
<dt>파일 손상 시</dt>
|
||||
<dd>복구하기 : 손상된 도면 파일 복구</dd>
|
||||
<dd>임시파일 : 자동저장된 임시파일 폴더 바로가기</dd>
|
||||
|
||||
<dt>사용자 설정</dt>
|
||||
<dd>Display&Mouse : 디스플레이 환경 및 마우스 설정</dd>
|
||||
<dd>저장하기 : 현재 사용자가 설정한 환경값 저장(화면, 마우스, 단축키 등)</dd>
|
||||
<dd>불러오기 : 이전에 저장한 사용자 설정값을 불러와 적용</dd>
|
||||
|
||||
<dt>궁금하면</dt>
|
||||
<dd>설명보기 : 프로그램 이용가이드 보기</dd>
|
||||
<dd>문의하기 : 이지빔 홈페이지 FAQ 이동</dd>
|
||||
<dd>S/W 정보 : 라이센스 및 버전 정보 확인</dd>
|
||||
|
||||
</dl>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link-userset" href="/help/interface03" >
|
||||
<span class="blind">홈메뉴</span>
|
||||
<div class="blind">열기, 저장 등의 파일 관련 메뉴 모음</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="blind">
|
||||
<dl >
|
||||
<dt>궁금하면</dt>
|
||||
<dd>설명보기 : 프로그램 이용가이드 보기</dd>
|
||||
<dd>문의하기 : 이지빔 홈페이지 FAQ 이동</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link-sw" href="/help/information" >
|
||||
<span class="blind">S/W 정보</span>
|
||||
<div class="blind">라이센스 및 버전 정보 확인</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!-- // 텍스트 -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
44
samples/src/content/sub/interface/interface03.astro
Normal file
44
samples/src/content/sub/interface/interface03.astro
Normal file
@@ -0,0 +1,44 @@
|
||||
---
|
||||
import { IMAGE_BASE_PATH } from '../config';
|
||||
---
|
||||
|
||||
<section id="group2" class="interface02">
|
||||
<!-- 타이틀 -->
|
||||
<div class="page-tit-wrap">
|
||||
<div class="tit-box">
|
||||
<span class="page-tail"></span>
|
||||
<h3>
|
||||
사용자가 설정한 환경값 <span>백업 및 복원</span>
|
||||
</h3>
|
||||
<span class="page-tail"></span>
|
||||
</div>
|
||||
<div class="tip-box">
|
||||
<h4 class="tip-tit">How to use</h4>
|
||||
<dl>
|
||||
<dt>방식 1</dt>
|
||||
<dd>
|
||||
상단 바 좌측 > EG-BIM
|
||||
로고 > 홈메뉴 > 사용자 설정
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- // 타이틀 -->
|
||||
<div class="contents">
|
||||
<img class="bg-img" src={`${IMAGE_BASE_PATH}/interface/3x_interface_03.png`} alt=" " />
|
||||
<!-- 텍스트 -->
|
||||
<div class="blind">
|
||||
<dl>
|
||||
<dt>홈메뉴</dt>
|
||||
<dd>클릭 시 기본 특성 메뉴 ↔ 홈메뉴 변경</dd>
|
||||
|
||||
<dt>사용자 설정</dt>
|
||||
<dd>저장하기 : “사용자 설정을 내보냈습니다.” 알림창이 뜨며 현재 사용자가 설정한 환경값 저장(화면, 마우스, 단축키 등)</dd>
|
||||
<dd>불러오기 : “사용자 설정을 가져왔습니다.” 메세지 알림창이 뜨며 백업한 사용자 설정 불러오기</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<!-- // 텍스트 -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
93
samples/src/content/sub/layer/layer01.astro
Normal file
93
samples/src/content/sub/layer/layer01.astro
Normal file
@@ -0,0 +1,93 @@
|
||||
---
|
||||
import { IMAGE_BASE_PATH } from '../config';
|
||||
---
|
||||
|
||||
|
||||
<section id="group20" class="layer01">
|
||||
<!-- 타이틀 -->
|
||||
<div class="page-tit-wrap">
|
||||
<div class="tit-box">
|
||||
<span class="page-tail"></span>
|
||||
<h3>
|
||||
각각의 <span>레이어</span>를 생성하여
|
||||
<span>색상, 선 종류, 선 가중치, 투명도, 출력</span> 등을
|
||||
레이어별로
|
||||
<span>관리</span>
|
||||
</h3>
|
||||
<span class="page-tail"></span>
|
||||
</div>
|
||||
<div class="tip-box">
|
||||
<h4 class="tip-tit">How to use</h4>
|
||||
<dl>
|
||||
<dt>방식 1</dt>
|
||||
<dd>명령어 입력창 > Command : LAYER</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>방식 2</dt>
|
||||
<dd>
|
||||
명령어
|
||||
전체보기 > 레이어 > <img
|
||||
src={`${IMAGE_BASE_PATH}/ico/ico_layer.svg`}
|
||||
alt=""
|
||||
/>
|
||||
레이어 관리 > layer
|
||||
</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>방식 3</dt>
|
||||
<dd>
|
||||
상단 바 > 선
|
||||
스타일 > 선스타일 상세
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- // 타이틀 -->
|
||||
<div class="contents">
|
||||
<div class="inner">
|
||||
<img class="bg-img" src={`${IMAGE_BASE_PATH}/layer/3x_layer_01.png`} alt=" " />
|
||||
<div class="blind">
|
||||
<dl>
|
||||
<dt>레이어 검색</dt>
|
||||
|
||||
<dt>모든 레이어 그룹</dt>
|
||||
|
||||
<dt>레이어 그룹</dt>
|
||||
<dd>레이어 설정 : 더블클릭 시 레이어명 수정, 현재 작업 레이어 설정 (라디오버튼 클릭)</dd>
|
||||
<dd>레이어 그룹 설정 : 다중 선택 가능</dd>
|
||||
|
||||
<dt>레이어 그룹 설정</dt>
|
||||
|
||||
<dt>새로운 레이어 추가</dt>
|
||||
|
||||
<dt>그룹 추가</dt>
|
||||
|
||||
<dt>레이어 스타일 세트 추가</dt>
|
||||
<dd>최대 3세트, 다양한 스타일 설정 가능</dd>
|
||||
|
||||
<dt>레이어 상세 항목</dt>
|
||||
<dd>각 명칭 클릭 시 순서 재정렬</dd>
|
||||
|
||||
<dt>레이어 삭제 및 분리</dt>
|
||||
<dd>우클릭 시 명령 실행</dd>
|
||||
<dd>Delete(레이어 삭제) : 해당 레이어에 속한 객체가 없을 경우 삭제</dd>
|
||||
<dd>Force Delete(레이어 강제 삭제) : 레이어 삭제, 속한 객체는 0 레이어로 변경</dd>
|
||||
<dd>Force Delete With Records(객체만 삭제) : 레이어 유지, 해당 레이어에 속한 객체 모두 삭제</dd>
|
||||
<dd>Isolate Selected Layers(해당 레이어 객체 분리) : 해당 레이어의 객체만 분리되어 보여짐</dd>
|
||||
|
||||
<dt>레이어 스타일 설정</dt>
|
||||
<dd>색상 / 선스타일 / 선가중치 / 투명도 : 값 지정 가능(클릭 시 수정)</dd>
|
||||
<dd>선가중치(LineWeight) 입력 범위 : 0.00, 0.05, 0.09, 0.13, 0.15, 0.18, 0.20 0.25, 0.30, 0.35, 0.40, 0.50, 0.53, 0.60, 0.70, 0.80, 0.90, 1.00, 1.06, 1.20, 1.40, 1.58, 2.00, 2.11</dd>
|
||||
<dd>투명도(Transparency) 입력 범위 : 0~90 / 투명도 20% / 투명도 50% / 투명도 90% </dd>
|
||||
|
||||
<dt>레이어 표시상태 조정</dt>
|
||||
<dd>작업화면 표시 여부 : ON / OFF</dd>
|
||||
<dd>동결/해제 : 불필요한 레이어를 동결해 작업 속도 향상</dd>
|
||||
<dd>잠금/해제 : 잠금 시 해당 레이어에 있는 객체는 수정 불가능(페이드값으로 선명도 조절 가능) </dd>
|
||||
<dd>출력 여부 : ON / OFF</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
73
samples/src/content/sub/multi/multi01.astro
Normal file
73
samples/src/content/sub/multi/multi01.astro
Normal file
@@ -0,0 +1,73 @@
|
||||
---
|
||||
import { IMAGE_BASE_PATH } from '../config';
|
||||
---
|
||||
|
||||
|
||||
<section id="group8" class="multi01">
|
||||
|
||||
<!-- 타이틀 -->
|
||||
<div class="page-tit-wrap">
|
||||
<div class="tit-box">
|
||||
<span class="page-tail"></span>
|
||||
<h3>
|
||||
<span>작업 도면</span>과 <span>참고 도면</span>을 함께 보면서
|
||||
<span>동시 작업</span>
|
||||
</h3>
|
||||
<span class="page-tail"></span>
|
||||
</div>
|
||||
<div class="tip-box">
|
||||
<h4 class="tip-tit">How to use</h4>
|
||||
<dl>
|
||||
<dt>방식 1</dt>
|
||||
<dd>
|
||||
파일 탭 > 파일 드래그 &
|
||||
드롭 > 단축키
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- // 타이틀 -->
|
||||
<div class="contents">
|
||||
<div class="inner">
|
||||
<img class="bg-img" src={`${IMAGE_BASE_PATH}/multi/3x_multi_01.png`} alt=" " />
|
||||
<!-- 링크 -->
|
||||
<ul>
|
||||
<li class="blind">
|
||||
<dl>
|
||||
<dt>듀얼모드 동시 작업(읽기전용창)</dt>
|
||||
<dd>읽기전용창과 작업창을 각각 띄워 참고 도면 확인과 작업 도면 편집을 동시에 작업</dd>
|
||||
<dd>화면 밖으로 드래그&드롭하여 읽기전용창 생성</dd>
|
||||
|
||||
<dt>레이어</dt>
|
||||
<dd>레이어 표시 상태 조정</dd>
|
||||
|
||||
<dt>뷰</dt>
|
||||
<dd>화면 확대, 축소, 초점 이동 등 뷰 조정</dd>
|
||||
|
||||
<dt>조회</dt>
|
||||
<dd>거리, 면적, 각도 조회 및 객체특성 조회</dd>
|
||||
|
||||
<dt>작업환경 설정</dt>
|
||||
<dd>그리드 표시 및 객체스냅 조정</dd>
|
||||
|
||||
<dt>레이어</dt>
|
||||
<dd>레이어 확인 및 레이어 표시상태 조정</dd>
|
||||
|
||||
<dt>Read Only 파일 탭</dt>
|
||||
<dd>Read Only 파일 리스트 확인</dd>
|
||||
<dd>창 종료 시 작업화면으로 복귀</dd>
|
||||
</dl>
|
||||
</li>
|
||||
<li>
|
||||
<a class="link-props" href="/help/feature01">
|
||||
<span class="blind">속성창</span>
|
||||
<div class="blind">선택된 객체의 모든 속성정보 확인</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<!-- // 링크 -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
42
samples/src/content/sub/multi/multi02.astro
Normal file
42
samples/src/content/sub/multi/multi02.astro
Normal file
@@ -0,0 +1,42 @@
|
||||
---
|
||||
import { IMAGE_BASE_PATH } from '../config';
|
||||
---
|
||||
|
||||
<section id="group9" class="multi02">
|
||||
<!-- 타이틀 -->
|
||||
<div class="page-tit-wrap">
|
||||
<div class="tit-box">
|
||||
<span class="page-tail"></span>
|
||||
<h3>
|
||||
<span>Layout(도면공간) 탭 화면분리</span>로 Model공간과 Layout공간
|
||||
<span>동시 작업</span>
|
||||
</h3>
|
||||
<span class="page-tail"></span>
|
||||
</div>
|
||||
<div class="tip-box">
|
||||
<h4 class="tip-tit">How to use</h4>
|
||||
<dl>
|
||||
<dt>방식 1</dt>
|
||||
<dd>작업공간 탭 > Layout 드래그 & 드롭</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<!-- // 타이틀 -->
|
||||
|
||||
<div class="contents">
|
||||
<div class="inner">
|
||||
<img class="bg-img" src={`${IMAGE_BASE_PATH}/multi/3x_multi_02.png`} alt=" " />
|
||||
<div class="blind">
|
||||
<dl>
|
||||
<dt>듀얼모드 동시 작업(Layout 공간)</dt>
|
||||
<dd>Model 공간 & Layout 공간 / Layout 공간 & Layout 공간 동시 작업</dd>
|
||||
<dd>화면 밖으로 드래그&드롭하여 Layout 공간 생성</dd>
|
||||
|
||||
<dt>Layout 탭 분리</dt>
|
||||
<dd>Layout 탭이 분리되어 Layout 공간이 별도로 생성됨</dd>
|
||||
<dd>기존 작업화면과 동일하게 모든 기능 사용 가능</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
59
samples/src/content/sub/multi/multi03.astro
Normal file
59
samples/src/content/sub/multi/multi03.astro
Normal file
@@ -0,0 +1,59 @@
|
||||
---
|
||||
import { IMAGE_BASE_PATH } from '../config';
|
||||
---
|
||||
|
||||
<section id="group10" class="multi03">
|
||||
<!-- 타이틀 -->
|
||||
<div class="page-tit-wrap">
|
||||
<div class="tit-box">
|
||||
<span class="page-tail"></span>
|
||||
<h3>
|
||||
넓은 화면의 <span>3D 뷰포트</span
|
||||
> 지원으로 <span>2D</span>와 <span>3D 동시 작업</span>
|
||||
</h3>
|
||||
<span class="page-tail"></span>
|
||||
</div>
|
||||
<div class="tip-box">
|
||||
<h4 class="tip-tit">How to use</h4>
|
||||
<dl>
|
||||
<dt>방식 1</dt>
|
||||
<dd>명령어 입력창 > Command : VPS3D</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>방식 2</dt>
|
||||
<dd>
|
||||
명령어 전체보기 > 뷰 > <img
|
||||
src={`${IMAGE_BASE_PATH}/ico/ico_3d.svg`}
|
||||
alt="3d"
|
||||
/> 3D뷰어 및 3D 작업공간 열기 > VPS3D
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- // 타이틀 -->
|
||||
|
||||
<div class="contents">
|
||||
<div class="inner">
|
||||
<img class="bg-img" src={`${IMAGE_BASE_PATH}/multi/3x_multi_03.png`} alt=" " />
|
||||
<div class="blind">
|
||||
<dl>
|
||||
<dt>2D 작업화면</dt>
|
||||
<dd>VPORTS 명령어를 이용해 뷰포트 구성 및 뷰 스타일 설정 가능</dd>
|
||||
|
||||
<dt>듀얼모드 동시 작업</dt>
|
||||
<dd>3D Space 지원으로 2D와 3D 동시 작업</dd>
|
||||
<dd>3D Space 창 닫기→ 초기 평면 뷰로 복귀</dd>
|
||||
|
||||
<dt>3D SPACE</dt>
|
||||
<dd>기존 작업화면과 동일하게 모든 기능 사용 가능</dd>
|
||||
|
||||
<dt>뷰 방향 및 비주얼 스타일 설정</dt>
|
||||
<dd>선택한 뷰포트에서만 활성화</dd>
|
||||
|
||||
<dt>뷰 방향 및 비주얼 스타일 설정</dt>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
65
samples/src/content/sub/print/multiprint01.astro
Normal file
65
samples/src/content/sub/print/multiprint01.astro
Normal file
@@ -0,0 +1,65 @@
|
||||
---
|
||||
import { IMAGE_BASE_PATH } from '../config';
|
||||
---
|
||||
|
||||
<section id="group31" class="multiprint01">
|
||||
<!-- 타이틀 -->
|
||||
<div class="page-tit-wrap">
|
||||
<div class="tit-box">
|
||||
<span class="page-tail"></span>
|
||||
<h3>
|
||||
<span>도면파일을 폴더 단위 및 개별선택</span>하여 옵션 설정 및
|
||||
<span>다중출력 가능</span>
|
||||
</h3>
|
||||
<span class="page-tail"></span>
|
||||
</div>
|
||||
<div class="tip-box">
|
||||
<h4 class="tip-tit">How to use</h4>
|
||||
<dl>
|
||||
<dt>방식 1</dt>
|
||||
<dd>
|
||||
꾸러미 > 상단 좌측 > 다중
|
||||
출력
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- // 타이틀 -->
|
||||
<div class="contents">
|
||||
<div class="inner">
|
||||
<img class="bg-img" src={`${IMAGE_BASE_PATH}/multiprint/3x_multiprint_01.png`} alt=" " />
|
||||
<!-- 링크 -->
|
||||
<ul>
|
||||
<li>
|
||||
<a class="link-print" href="/help/multiprint02">
|
||||
<span class="blind">다중 인쇄창 화면 구성</span>
|
||||
<dl class="blind">
|
||||
<dt>출력 옵션 설정</dt>
|
||||
<dd>인쇄창에서 설정된 출력 옵션 표시</dd>
|
||||
<dd>다중 선택으로 출력 옵션 변경</dd>
|
||||
|
||||
<dt>인쇄 미리보기</dt>
|
||||
</dl>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="blind">
|
||||
<dl>
|
||||
<dt>출력 폴더 선택</dt>
|
||||
<dd>(■)폴더 내 일부 도면이 선택됨</dd>
|
||||
<dd>(✓)폴더 내 전체 도면이 선택됨</dd>
|
||||
|
||||
<dt>출력 상태</dt>
|
||||
|
||||
<dt>출력 파일택</dt>
|
||||
<dd>체크박스를 클릭하여 출력할 파일 선택</dd>
|
||||
<dd>선택한 파일 수만큼 미리보기 페이지 생성</dd>
|
||||
</dl>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- // 링크 -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user