253 lines
13 KiB
HTML
253 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>건설산업 DX의 올바른 이해</title>
|
|
<style>
|
|
/* Design Agent — 디자인 토큰 */
|
|
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
|
|
|
|
:root {
|
|
/* 색상 */
|
|
--color-primary: #1e293b;
|
|
--color-accent: #2563eb;
|
|
--color-neutral: #64748b;
|
|
--color-bg: #ffffff;
|
|
--color-bg-subtle: #f8fafc;
|
|
--color-border: #e2e8f0;
|
|
--color-danger: #dc2626;
|
|
--color-success: #16a34a;
|
|
--color-text: #1e293b;
|
|
--color-text-secondary: #64748b;
|
|
--color-text-light: #94a3b8;
|
|
|
|
/* 폰트 크기 */
|
|
--font-title: 2rem;
|
|
--font-subtitle: 1.25rem;
|
|
--font-body: 0.95rem;
|
|
--font-caption: 0.8rem;
|
|
--font-small: 0.7rem;
|
|
|
|
/* 폰트 두께 */
|
|
--weight-normal: 400;
|
|
--weight-medium: 500;
|
|
--weight-bold: 700;
|
|
--weight-black: 900;
|
|
|
|
/* 여백 */
|
|
--spacing-page: 40px;
|
|
--spacing-block: 20px;
|
|
--spacing-inner: 16px;
|
|
--spacing-small: 8px;
|
|
|
|
/* 기타 */
|
|
--radius: 6px;
|
|
--border-width: 1px;
|
|
--accent-border: 3px;
|
|
--line-height-ko: 1.7;
|
|
}
|
|
|
|
/* Design Agent — 기본 슬라이드 스타일 */
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* 슬라이드 컨테이너: 16:9 고정 비율 */
|
|
.slide {
|
|
width: 1280px;
|
|
height: 720px;
|
|
aspect-ratio: 16 / 9;
|
|
overflow: hidden;
|
|
background: var(--color-bg);
|
|
font-family: 'Pretendard Variable', 'Pretendard', 'Noto Sans KR', sans-serif;
|
|
color: var(--color-text);
|
|
font-size: var(--font-body);
|
|
line-height: var(--line-height-ko);
|
|
word-break: keep-all;
|
|
padding: var(--spacing-page);
|
|
display: grid;
|
|
gap: var(--spacing-block);
|
|
}
|
|
|
|
/* 슬라이드 제목 */
|
|
.slide-title {
|
|
font-size: var(--font-title);
|
|
font-weight: var(--weight-black);
|
|
color: var(--color-primary);
|
|
border-bottom: var(--accent-border) solid var(--color-accent);
|
|
padding-bottom: var(--spacing-small);
|
|
}
|
|
|
|
/* 섹션 제목 */
|
|
.section-title {
|
|
font-size: var(--font-subtitle);
|
|
font-weight: var(--weight-bold);
|
|
color: var(--color-primary);
|
|
margin-bottom: var(--spacing-small);
|
|
}
|
|
|
|
/* 본문 */
|
|
.body-text {
|
|
font-size: var(--font-body);
|
|
color: var(--color-text);
|
|
line-height: var(--line-height-ko);
|
|
}
|
|
|
|
/* 캡션/출처 */
|
|
.caption {
|
|
font-size: var(--font-caption);
|
|
color: var(--color-text-light);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* 강조 텍스트 */
|
|
.highlight {
|
|
color: var(--color-accent);
|
|
font-weight: var(--weight-bold);
|
|
}
|
|
|
|
/* 경고/문제 강조 */
|
|
.danger {
|
|
color: var(--color-danger);
|
|
font-weight: var(--weight-bold);
|
|
}
|
|
|
|
/* ── 컨테이너 레이아웃 ── */
|
|
/* grid area: flex 축소 허용. overflow는 프레임(.slide)에서만 hidden. */
|
|
/* A-1(Sonnet 디자인 조정)이 텍스트 양에 맞게 CSS를 사전 조정하므로,
|
|
area 레벨에서는 overflow: visible로 텍스트 잘림을 방지한다. */
|
|
.slide > div {
|
|
overflow: visible;
|
|
min-height: 0;
|
|
min-width: 0;
|
|
}
|
|
/* area 안에서 flex-column 그룹핑된 블록들의 축소 허용 */
|
|
.slide > div > div {
|
|
min-height: 0;
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
|
|
.slide-1 {
|
|
grid-template-areas: 'header header' 'body sidebar' 'footer footer';
|
|
grid-template-columns: 65fr 35fr;
|
|
grid-template-rows: auto auto auto;
|
|
}
|
|
.slide-1 .area-body { grid-area: body; }
|
|
.slide-1 .area-sidebar { grid-area: sidebar; }
|
|
.slide-1 .area-footer { grid-area: footer; }
|
|
|
|
.slide + .slide { margin-top: 40px; }
|
|
@media print {
|
|
.slide { page-break-after: always; }
|
|
.slide + .slide { margin-top: 0; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="slide slide-1">
|
|
<div class="slide-title" style="grid-area: header;">건설산업 DX의 올바른 이해</div>
|
|
|
|
<div class="area-body" style="overflow:hidden;">
|
|
<div style="width:100%; height:100%; box-sizing:border-box; font-family:'Segoe UI',sans-serif; color:#0f172a; display:flex; flex-direction:column; gap:6px;">
|
|
<div style="background:linear-gradient(135deg,#fff7ed 0%,#ffedd5 100%); border:1px solid #fdba74; border-radius:12px; padding:8px 10px;">
|
|
<div style="font-size:11px; font-weight:800; color:#c2410c; margin-bottom:4px;">DX와 BIM의 혼용 문제</div>
|
|
<div style="font-size:10px; line-height:1.55; color:#7c2d12;">건설산업의 디지털 전환 논의에서 DX(Digital Transformation)와 BIM(Building Information Modeling)이 개념적으로 명확히 정립되지 않은채 혼용되어 사용되고 있음. 이로인해 BIM기술의 도입을 DX의 완성으로 오인하거나, DX를 BIM 기술 도입 수준으로 한정하는 인식 확산. 건설산업의...</div>
|
|
</div>
|
|
|
|
<div class="relation-diagram-card" style="background:#ffffff; border:1px solid #cbd5e1; border-radius:14px; padding:14px 16px; box-sizing:border-box; display:flex; flex-direction:column; gap:6px;">
|
|
<div style="display:flex; justify-content:space-between; align-items:flex-start; gap:12px;">
|
|
<div>
|
|
<div style="font-size:12px; font-weight:800; color:#1e40af; margin-bottom:4px;">DX의 정의와 위치</div>
|
|
<div style="font-size:10px; line-height:1.55; color:#334155;">DX(Digital Transformation): 디지털 기술을 기반으로 산업 전반의 업무방식과 가치 창출 구조를 전환하는 과정 및 결과. 단순한 기술 도입이 아닌, 고객 가치와 의사결정 방식의...</div>
|
|
</div>
|
|
<div style="font-size:10px; color:#166534; background:#dcfce7; border:1px solid #86efac; border-radius:999px; padding:4px 8px; white-space:nowrap;">[그림 1] DX와 핵심기술간 상호관계</div>
|
|
</div>
|
|
|
|
<div style="display:grid; grid-template-columns:198px 1fr; gap:8px; align-items:start;">
|
|
<div style="background:#f8fafc; border:1px solid #dbeafe; border-radius:14px; padding:10px; box-sizing:border-box;">
|
|
<div style="display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:8px;">
|
|
<div style="min-width:68px; text-align:center; background:#1d4ed8; color:#ffffff; border-radius:999px; padding:8px 12px; font-size:14px; font-weight:800;">DX</div>
|
|
<div style="font-size:14px; color:#94a3b8;">→</div>
|
|
</div>
|
|
<div style="display:grid; grid-template-columns:1fr 1fr; gap:8px;">
|
|
<div style="background:#ffffff; border:1px solid #cbd5e1; border-radius:10px; padding:8px; text-align:center; font-size:10px; font-weight:700;">GIS</div>
|
|
<div style="background:#dbeafe; border:2px solid #3b82f6; border-radius:10px; padding:8px; text-align:center; font-size:10px; font-weight:800; color:#1d4ed8;">BIM</div>
|
|
<div style="grid-column:1 / span 2; background:#ffffff; border:1px solid #cbd5e1; border-radius:10px; padding:8px; text-align:center; font-size:10px; font-weight:700;">Digital Twin</div>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; gap:6px;">
|
|
<div style="background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:8px 10px;">
|
|
<div style="font-size:11px; font-weight:800; color:#0f172a; margin-bottom:4px;">BIM과 핵심기술의 관계</div>
|
|
<div style="font-size:10px; line-height:1.55; color:#334155;">BIM(Building Information Modeling): 시설물의 생애주기동안 발생한 모든 정보를 3차원 모델 기반으로 통합·관리하는 정보 관리 도구. 건설 정보와 절차를 표준화된 방식으로 연계하고 디지털 협업이 가능하도록 하는 핵심 인프라 기술. DX는 BIM과 같은 디지털기술을 기반으로 산업 전반의 프로세스를...</div>
|
|
</div>
|
|
<div style="display:grid; grid-template-columns:1fr 1fr; gap:8px;">
|
|
<div style="background:#ffffff; border:1px solid #cbd5e1; border-radius:10px; padding:8px 9px;">
|
|
<div style="font-size:10px; font-weight:800; color:#0f172a; margin-bottom:3px;">GIS 역할</div>
|
|
<div style="font-size:8px; line-height:1.45; color:#475569;">건설산업의 DX는 GIS(공간정보), BIM, 디지털 트윈(가상환경)의 기술융합을 통해서만 실현 또는 구현...</div>
|
|
</div>
|
|
<div style="background:#ffffff; border:1px solid #cbd5e1; border-radius:10px; padding:8px 9px;">
|
|
<div style="font-size:10px; font-weight:800; color:#0f172a; margin-bottom:3px;">BIM 역할</div>
|
|
<div style="font-size:8px; line-height:1.45; color:#475569;">BIM(Building Information Modeling): 시설물의 생애주기동안 발생한 모든 정보를 3차원 모델...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comparison-summary-card" style="background:#eff6ff; border:1px solid #bfdbfe; border-radius:12px; padding:8px 9px; box-sizing:border-box; display:grid; grid-template-columns:96px 1fr; gap:7px;">
|
|
<div>
|
|
<div style="font-size:11px; font-weight:800; color:#1d4ed8; margin-bottom:4px;">DX와 BIM 비교 핵심 포인트</div>
|
|
<div style="font-size:8px; line-height:1.45; color:#475569;">핵심 비교 포인트: 범위(DX는 BIM을 포함하는 상위 개념, BIM은 3D 중심 기술), 프로세스(DX는 근본적 개선, BIM은 기존 2D 설계 방식 연장), 성과품(DX는 공학 정보 및 콘텐츠 연계, BIM은...</div>
|
|
</div>
|
|
<div style="display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:8px; line-height:1.35; color:#334155;">
|
|
<div style="background:#ffffff; border:1px solid #cbd5e1; border-radius:10px; padding:7px 8px;"><span style="font-weight:800; color:#0f172a;">범위</span><br>DX는 BIM을 포함하는 상위 개념</div>
|
|
<div style="background:#ffffff; border:1px solid #cbd5e1; border-radius:10px; padding:7px 8px;"><span style="font-weight:800; color:#0f172a;">프로세스</span><br>DX는 근본적 개선, BIM은 기존 2D 연장</div>
|
|
<div style="background:#ffffff; border:1px solid #cbd5e1; border-radius:10px; padding:7px 8px;"><span style="font-weight:800; color:#0f172a;">성과품</span><br>DX는 공학 정보 연계, BIM은 3D 모델 중심</div>
|
|
<div style="background:#ffffff; border:1px solid #cbd5e1; border-radius:10px; padding:7px 8px;"><span style="font-weight:800; color:#0f172a;">확장성</span><br>DX는 전 생애주기, BIM은 분야별 단절 위험</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="area-sidebar" style="overflow:hidden;">
|
|
<div style="width:100%; height:100%; box-sizing:border-box; font-family:'Segoe UI',sans-serif; display:flex; flex-direction:column; gap:6px;">
|
|
<div style="background:#ffffff; border:1px solid #cbd5e1; border-radius:12px; padding:8px 10px;">
|
|
<div style="font-size:10.0px; font-weight:800; color:#1e293b; margin-bottom:8px;">용어 정의</div>
|
|
<div style="display:grid; grid-template-columns:72px 1fr; row-gap:8px; column-gap:10px; align-items:start; font-size:9px; line-height:1.5; color:#334155;">
|
|
<div style="font-weight:800; color:#0f172a;">건설산업</div>
|
|
<div>다양한 기술을 통합해 시설물을 구현하는 종합 산업</div>
|
|
<div style="font-weight:800; color:#1d4ed8;">BIM</div>
|
|
<div>3차원 모델 기반의 정보관리 도구이자 협업 인프라<br><span style="font-size:8px; color:#64748b;">출처: 국토교통부 BIM 기본지침</span></div>
|
|
<div style="font-weight:800; color:#1d4ed8;">DX</div>
|
|
<div>디지털 기술 기반으로 업무방식과 가치구조를 전환하는 상위 개념</div>
|
|
</div>
|
|
</div>
|
|
<div style="background:#fff7ed; border:1px solid #fdba74; border-radius:12px; padding:8px 10px; box-sizing:border-box;">
|
|
<div style="font-size:10.0px; font-weight:800; color:#c2410c; margin-bottom:5px;">정책 혼용 사례</div>
|
|
<div style="font-size:10px; line-height:1.55; color:#7c2d12;">스마트 건설 활성화 방안(2022.07): 추진과제는 건설산업 디지털화, 실행과제는 BIM 전면 도입과 BIM 전문인력 양성. 제7차 건설기술진흥 기본계획(2023.12): 추진방향은 디지털 전환을 통한 스마트...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="area-footer" style="overflow:hidden;">
|
|
<div style="background:linear-gradient(135deg, #006aff 0%, #00aaff 100%); border-radius:10px; padding:10px 20px; text-align:center; color:#ffffff; width:100%; height:52px; display:flex; align-items:center; justify-content:center; box-sizing:border-box;">
|
|
<div style="font-size:12px; font-weight:800; line-height:1.35;">BIM은 건설산업의 디지털전환(DX)을 수행하는 과정에서 가장 기초가 되는 일부분이다</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
window.onbeforeprint = function() {
|
|
document.querySelectorAll('details').forEach(function(d) { d.open = true; });
|
|
};
|
|
window.onafterprint = function() {
|
|
document.querySelectorAll('details').forEach(function(d) { d.open = false; });
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |