kyeongmin
688ddbbb17
5단계 AI 파이프라인: 1. Kei 실장(Opus via Kei API) — 꼭지 추출 + 정보 구조 파악 2. 디자인 팀장 — FAISS 블록 검색 + Opus 추천 + Sonnet 블록 매핑 3. Kei 편집자(Kei API) — 도메인 전문 텍스트 정리 4. 디자인 실무자(Sonnet + Jinja2) — CSS 변수 조정 + HTML 조립 5. 디자인 팀장(Sonnet) — 균형 재검토 (최대 2회 루프) 블록 라이브러리 46개 (6 카테고리) + _legacy 13개 FAISS 블록 검색 (bge-m3, 1024차원) SVG N개 동적 배치 (cos/sin 좌표 계산) Pillow 이미지 크기 측정 + base64 인라인 컨테이너 예산 기반 블록 배치 (zone별 높이 px) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
402 lines
13 KiB
HTML
402 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>2-1_02 건설정보모델링(BIM) — 레이어 분리 v2</title>
|
||
<style>
|
||
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: 'Pretendard Variable', 'Noto Sans KR', sans-serif;
|
||
background: #e8ecf0;
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 20px;
|
||
color: #000;
|
||
}
|
||
.frame { width: 920px; background: #fff; }
|
||
|
||
/* ═══ 1. 배경 헤더 + 타이틀 오버레이 ═══ */
|
||
.header {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 500px;
|
||
overflow: hidden;
|
||
}
|
||
.header img { width: 100%; height: 100%; object-fit: cover; }
|
||
.header-text {
|
||
position: absolute;
|
||
bottom: 40px;
|
||
left: 89px;
|
||
z-index: 5;
|
||
}
|
||
.header-text .en { font-size: 15px; font-weight: 400; color: #fff; opacity: 0.85; }
|
||
.header-text .ko { font-size: 35px; font-weight: 700; color: #fff; margin-top: 4px; }
|
||
.breadcrumb {
|
||
position: absolute;
|
||
top: 18px; left: 89px;
|
||
font-size: 13px; color: rgba(255,255,255,0.7);
|
||
z-index: 5;
|
||
}
|
||
.breadcrumb span { margin: 0 6px; color: rgba(255,255,255,0.5); }
|
||
.close-x {
|
||
position: absolute;
|
||
top: 18px; right: 20px;
|
||
font-size: 22px; color: #fff;
|
||
cursor: pointer; z-index: 5;
|
||
}
|
||
|
||
/* ═══ 2. 꼭지 제목+설명 ═══ */
|
||
.topic { padding: 28px 89px 12px; }
|
||
.topic-row { display: flex; gap: 20px; margin-bottom: 18px; }
|
||
.topic-title {
|
||
width: 240px; flex-shrink: 0;
|
||
font-size: 24px; font-weight: 700; color: #004cbe;
|
||
line-height: 1.4; word-break: keep-all;
|
||
}
|
||
.topic-desc {
|
||
flex: 1;
|
||
font-size: 16px; color: #000; line-height: 1.7; word-break: keep-all;
|
||
}
|
||
|
||
/* ═══ 3. 이미지 그리드 2열 ═══ */
|
||
.img-grid { display: flex; gap: 0; padding: 0; }
|
||
.img-grid img { flex: 1; height: 354px; object-fit: cover; }
|
||
|
||
/* ═══ 4. 산맥 시각화 ═══ */
|
||
.mountain img { width: 100%; }
|
||
|
||
/* ═══ 5. 비교 박스 (이미지 배경 + HTML 텍스트) ═══ */
|
||
.compare-boxes {
|
||
padding: 25px 89px;
|
||
display: flex;
|
||
gap: 12px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.cbox {
|
||
position: relative;
|
||
width: 327px; height: 116px;
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
}
|
||
.cbox img { width: 100%; height: 100%; object-fit: cover; }
|
||
.cbox-text {
|
||
position: absolute; inset: 0;
|
||
display: flex; flex-direction: column;
|
||
align-items: center; justify-content: center;
|
||
color: #fff; text-align: center;
|
||
z-index: 2;
|
||
}
|
||
.cbox-text .label { font-size: 20px; font-weight: 700; }
|
||
.cbox-text .sub { font-size: 12px; opacity: 0.85; margin-top: 4px; }
|
||
.vs-badge {
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
padding: 8px 18px;
|
||
font-size: 20px; font-weight: 700; color: #006eff;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ═══ 6. 비교 테이블 (HTML) ═══ */
|
||
.compare-table { padding: 10px 89px 20px; }
|
||
.compare-table table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 13px;
|
||
line-height: 1.6;
|
||
}
|
||
.compare-table thead th {
|
||
padding: 10px 12px;
|
||
font-weight: 700;
|
||
font-size: 15px;
|
||
}
|
||
.compare-table thead th:first-child { color: #6bcdff; }
|
||
.compare-table thead th:nth-child(2) {
|
||
background: linear-gradient(135deg, #006eff, #00aaff);
|
||
color: #fff; border-radius: 20px;
|
||
text-align: center; width: 100px;
|
||
}
|
||
.compare-table thead th:last-child { color: #006eff; text-align: right; }
|
||
.compare-table tbody td {
|
||
padding: 8px 12px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
vertical-align: top;
|
||
}
|
||
.compare-table tbody td:first-child { color: #333; }
|
||
.compare-table tbody td:nth-child(2) {
|
||
text-align: center;
|
||
font-weight: 700;
|
||
color: #333;
|
||
background: #f8f9fb;
|
||
}
|
||
.compare-table tbody td:last-child { text-align: right; color: #333; }
|
||
.compare-table tbody tr:nth-child(even) td { background: #fafbfc; }
|
||
.compare-table tbody tr:nth-child(even) td:nth-child(2) { background: #f0f2f5; }
|
||
|
||
/* ═══ 7. 원형 라벨 (CSS + HTML) ═══ */
|
||
.circle-label-section {
|
||
display: flex; justify-content: center;
|
||
padding: 25px 0 15px;
|
||
}
|
||
.circle-outer {
|
||
width: 190px; height: 190px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(180deg, #3db8ff 0%, #006aff 100%);
|
||
box-shadow: 0 0 30px rgba(0, 106, 255, 0.25), 0 0 60px rgba(0, 106, 255, 0.1);
|
||
display: flex;
|
||
align-items: center; justify-content: center;
|
||
position: relative;
|
||
}
|
||
.circle-inner {
|
||
width: 170px; height: 170px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(180deg, #4dc4ff 0%, #0080ff 100%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center; justify-content: center;
|
||
color: #fff;
|
||
text-align: center;
|
||
}
|
||
.circle-inner .main { font-size: 20px; font-weight: 700; line-height: 1.4; }
|
||
|
||
/* ═══ 8. 카드 3열 (HTML + 개별 이미지) ═══ */
|
||
.cards-section { padding: 10px 89px 40px; }
|
||
.cards-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 16px;
|
||
}
|
||
.card {
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.card-img {
|
||
width: 100%;
|
||
height: 160px;
|
||
object-fit: contain;
|
||
background: #f8f9fb;
|
||
padding: 10px;
|
||
}
|
||
.card-body { padding: 16px; }
|
||
.card-stage {
|
||
font-size: 14px; font-weight: 700;
|
||
text-decoration: underline;
|
||
text-underline-offset: 3px;
|
||
margin-bottom: 2px;
|
||
}
|
||
.card-stage-en {
|
||
font-size: 12px; font-weight: 400; color: #666;
|
||
margin-bottom: 10px;
|
||
}
|
||
.card-divider {
|
||
width: 100%; height: 1px;
|
||
background: #000; margin-bottom: 10px;
|
||
}
|
||
.card-body ul {
|
||
list-style: disc;
|
||
padding-left: 18px;
|
||
font-size: 13px;
|
||
line-height: 1.7;
|
||
color: #000;
|
||
}
|
||
.card-body li { margin-bottom: 3px; }
|
||
.card-design .card-stage { color: #00aaff; }
|
||
.card-construction .card-stage { color: #006aff; }
|
||
.card-maintenance .card-stage { color: #004cbe; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="frame">
|
||
|
||
<!-- 1. 배경 헤더 + 타이틀 -->
|
||
<div class="header">
|
||
<img src="figma-assets/bg_header.png" alt="">
|
||
<div class="breadcrumb">건설산업에서의 디지털전환 <span>›</span> Building Information Modeling</div>
|
||
<div class="close-x">✕</div>
|
||
<div class="header-text">
|
||
<div class="en">Building Information Modeling</div>
|
||
<div class="ko">건설정보모델링(BIM)</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2. 꼭지 -->
|
||
<div class="topic">
|
||
<div class="topic-row">
|
||
<div class="topic-title">단순 BIM의 적용이<br>D/X가 아닙니다</div>
|
||
<div class="topic-desc">BIM은 건설산업의 디지털전환을 수행하는 과정에서 가장 기초가 되는 일부분임을 인지하는 것이 매우 중요합니다.</div>
|
||
</div>
|
||
<div class="topic-row">
|
||
<div class="topic-title">건설산업에서의 BIM</div>
|
||
<div class="topic-desc">BIM은 설계, 시공, 유지관리 단계에서의 정보를 통합하고 협업을 촉진하여 인프라 건설 전 생애주기 과정의 효율성을 향상시킵니다.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 3. 이미지 그리드 -->
|
||
<div class="img-grid">
|
||
<img src="figma-assets/image_grid_left.png" alt="">
|
||
<img src="figma-assets/image_grid_right.png" alt="">
|
||
</div>
|
||
|
||
<!-- 4. 산맥 -->
|
||
<div class="mountain">
|
||
<img src="figma-assets/mountain_viz.png" alt="">
|
||
</div>
|
||
|
||
<!-- 5. 비교 박스 -->
|
||
<div class="compare-boxes">
|
||
<div class="cbox">
|
||
<img src="figma-assets/compare_box_left.png" alt="">
|
||
<div class="cbox-text">
|
||
<div class="label">D/X</div>
|
||
<div class="sub">디지털 기술을 활용한<br>협업 프로세스</div>
|
||
</div>
|
||
</div>
|
||
<div class="vs-badge">VS</div>
|
||
<div class="cbox">
|
||
<img src="figma-assets/compare_box_right.png" alt="">
|
||
<div class="cbox-text">
|
||
<div class="label">BIM</div>
|
||
<div class="sub">시설물의 전 생애주기 동안<br>정보의 생성 및 관리</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 6. 비교 테이블 (HTML) -->
|
||
<div class="compare-table">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>BIM</th>
|
||
<th>VS</th>
|
||
<th>D/X</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>• Only 3D</td>
|
||
<td>BIM · D/X</td>
|
||
<td>• BIM ≪ D/X (ENG. + Management 포함)</td>
|
||
</tr>
|
||
<tr>
|
||
<td>• 모델 제작용 상용 S/W<br>(Civil 3D, Revit, Navisworks, Autocad)</td>
|
||
<td>S/W</td>
|
||
<td>• 제작 및 운영(상용 + 전용 40~80개)<br>[Rhino, Sketchup, Blender...] + [EG-BIM 등]</td>
|
||
</tr>
|
||
<tr>
|
||
<td>• 기존 2D 설계방식 유지</td>
|
||
<td>프로세스</td>
|
||
<td>• 근본적 문제의식을 통한 개선</td>
|
||
</tr>
|
||
<tr>
|
||
<td>• 3D 모델 중심<br>• 기존 성과품 유지</td>
|
||
<td>성과물</td>
|
||
<td>• 공학 정보 및 콘텐츠 연계에 집중<br>• 도면, 수량, 시공계획 등 일식</td>
|
||
</tr>
|
||
<tr>
|
||
<td>• 3D 모델에 의한 일반적 이해 향상</td>
|
||
<td>활용</td>
|
||
<td>• 설계/시공의 혁신(개념의 재정립)</td>
|
||
</tr>
|
||
<tr>
|
||
<td>• (설계/시공/운영) 분야별 단절</td>
|
||
<td>확장성</td>
|
||
<td>• 전 생애주기 활용 시스템</td>
|
||
</tr>
|
||
<tr>
|
||
<td>• 단순화(오류) - 수동적/집단적 동질화</td>
|
||
<td>수행개념</td>
|
||
<td>• 구체화(복잡) - 적극/구체적 실현 방안</td>
|
||
</tr>
|
||
<tr>
|
||
<td>• 소극적, 상용 기술에 의존</td>
|
||
<td>CIVIL + IT</td>
|
||
<td>• 적극적, 주체적인 기술 접목/융합</td>
|
||
</tr>
|
||
<tr>
|
||
<td>• S/W 제작사 판매 정책에 의존</td>
|
||
<td>주체</td>
|
||
<td>• 자체 수행능력 - 지속가능성 확보</td>
|
||
</tr>
|
||
<tr>
|
||
<td>• 평준화, 국내 중심</td>
|
||
<td>발주처</td>
|
||
<td>• 차별화 및 경쟁력 확보, 해외 진출</td>
|
||
</tr>
|
||
<tr>
|
||
<td>• 소규모 BIM팀 운영 + 단순교육에 집중</td>
|
||
<td>설계사</td>
|
||
<td>• IT + CIVIL ENG 220명 운영 + 기술 개발</td>
|
||
</tr>
|
||
<tr>
|
||
<td>• 국내 토목 소극적/ 해외 토목증가</td>
|
||
<td>시공사</td>
|
||
<td>• 분야 확장 모델 및 시스템</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 7. 원형 라벨 (CSS) -->
|
||
<div class="circle-label-section">
|
||
<div class="circle-outer">
|
||
<div class="circle-inner">
|
||
<div class="main">단계별<br>BIM의 활용</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 8. 카드 3열 (HTML + 개별 이미지) -->
|
||
<div class="cards-section">
|
||
<div class="cards-row">
|
||
<div class="card card-design">
|
||
<img class="card-img" src="figma-assets/card_img_design.png" alt="설계">
|
||
<div class="card-body">
|
||
<div class="card-stage">설계단계</div>
|
||
<div class="card-stage-en">Design Stage</div>
|
||
<div class="card-divider"></div>
|
||
<ul>
|
||
<li>고도화된 BIM 구현</li>
|
||
<li>최첨단 디지털트윈</li>
|
||
<li>시뮬레이션 분석 & 성능평가</li>
|
||
<li>지속가능한 인프라개발</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="card card-construction">
|
||
<img class="card-img" src="figma-assets/card_img_construction.png" alt="시공">
|
||
<div class="card-body">
|
||
<div class="card-stage">시공 단계</div>
|
||
<div class="card-stage-en">Construction Stage</div>
|
||
<div class="card-divider"></div>
|
||
<ul>
|
||
<li>향상된 건설 계획과 공정 순서 관리</li>
|
||
<li>Big Room 등 환경을 통한 협업 및 조정</li>
|
||
<li>정확한 수량산출서와 비용 산정</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="card card-maintenance">
|
||
<img class="card-img" src="figma-assets/card_img_maintenance.png" alt="유지관리">
|
||
<div class="card-body">
|
||
<div class="card-stage">유지관리 단계</div>
|
||
<div class="card-stage-en">Maintenance Stage</div>
|
||
<div class="card-divider"></div>
|
||
<ul>
|
||
<li>자산 정보 및 데이터 관리</li>
|
||
<li>예측 기반 유지보수 및 생애주기 분석</li>
|
||
<li>효율적인 시설 운영 및 지속가능한 관리</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|