kyeongmin
9bd9dad9ac
## IMPROVEMENT (Phase A~D) - A-1: 4단계 Sonnet 디자인 조정 (_adjust_design) — CSS 변수 cascade - A-2: 5단계 HTML 전문 프롬프트 전달 - A-3: shrink/expand 하드코딩 제거 → Sonnet target_ratio 기반 - A-4: rewrite action 구현 - A-5: overflow: visible (area 레벨 텍스트 잘림 방지) - A-6: object-fit cover → contain (이미지 crop 방지) - A-7: table-layout: fixed - A-8: container query 폰트 스케일링 - B-1: details-block 템플릿 신규 (CSS 변수만 사용) - B-2: 인쇄 시 details 자동 펼침 JS - B-3: catalog에 details-block 등록 - B-4/B-5: images[]/tables[] 상세 판단 + fallback 3곳 동기화 - B-8: fallback card-grid → topic-header + char_guide 제거 - C-1: CLAUDE.md gradient 원칙 완화 - C-3: border-radius 9개 파일 var(--radius) 통일 - C-4: box-shadow 2레벨 → 1레벨 - D-0: 이미지 경로 입력 UI + API base_path - D-1: Pillow 의존성 + image_utils.py - D-2~D-4: 이미지 비율/축소방지 프롬프트 전달 - D-5: HTML에 이미지 base64 삽입 ## Phase 2 (다른 Claude 작업) - P2-A: FAISS 블록 검색 (bge-m3, 46개 블록) - P2-B: SVG N개 자동 배치 (svg_calculator.py) - P2-C: Opus 블록 추천 (Kei API 경유) - P2-D: 5단계 재검토 루프 강화 (MAX_REVIEW_ROUNDS=2) - P2-E: details-block fallback 연동 ## 버그 수정 (BF-8~10) - BF-8: 컨테이너 예산 기반 블록 배치 - BF-9: grid와 Sonnet 역할 분리 - BF-10: catalog mtime 캐시 자동 갱신 ## 블록 라이브러리 - 46개 블록 (6 카테고리), catalog/BLOCK_SLOTS/INDEX 동기화 - 구 블록 제거 (quote-block, card-grid, comparison) - 13개 _legacy 블록 보존 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>
|