Kyeongmin/C.E.L_Slide_test2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0a9327c50c3eca38cf64193fa6c9e2b4f0dc8e61
C.E.L_Slide_test2/scripts/test_3approaches.py
kyeongmin 29f56187c0 Phase P~S 전체 작업물: 검증 스크립트, 블록 템플릿, 설계 문서, 코드 수정 
포함 내용:
- Phase P/Q/R/S 설계 문서 (IMPROVEMENT-PHASE-*.md)
- 영역별 검증 스크립트 (scripts/verify_*.py, test_*.py)
- 블록 템플릿 추가 (cards, emphasis 변형)
- 코드 수정: block_search, content_editor, design_director, slide_measurer
- catalog.yaml 블록 목록 업데이트
- CLAUDE.md, PROGRESS.md, README.md 업데이트

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-31 08:38:06 +09:00

618 lines
31 KiB
Python
Raw Blame History

"""3가지 접근법 비교: 같은 콘텐츠, 다른 생성 방식.
접근 A: Few-Shot 직접 생성 — Claude가 디자인 토큰 안에서 HTML 직접 작성
접근 B: 레이아웃 프리미티브 조합 — 15개 기본 요소를 조합
접근 C: 참조 기반 생성 — ideal_v2를 참조하여 구조 유지하되 콘텐츠만 교체
Kei API 불필요 — 순수 렌더링만.
"""
from __future__ import annotations
import asyncio, json, sys, base64
from pathlib import Path
ROOT = Path(__file__).parent.parent
sys.path.insert(0, str(ROOT))
# ═══════════════════════════════════════
# 공통 디자인 토큰 (3가지 접근 모두 이 토큰만 사용)
# ═══════════════════════════════════════
DESIGN_TOKENS_CSS = """
:root {
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-accent-light: #93c5fd;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-bg-dark: #1e293b;
--color-bg-dark-deep: #0f172a;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-warning: #fbbf24;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
--color-text-on-dark: #e2e8f0;
--color-text-on-accent: #ffffff;
--font-title: 28px;
--font-section: 14px;
--font-body: 13px;
--font-small: 11px;
--font-caption: 10px;
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
--spacing-page: 36px 40px 24px;
--spacing-section: 16px;
--spacing-block: 12px;
--spacing-inner: 10px;
--spacing-small: 6px;
--radius: 8px;
--radius-small: 6px;
--line-height: 1.6;
}
"""
SLIDE_BASE_CSS = """
@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; }
.slide {
width: 1280px; height: 720px; overflow: hidden;
background: var(--color-bg);
font-family: 'Pretendard Variable', sans-serif;
color: var(--color-text);
font-size: var(--font-body);
line-height: var(--line-height);
word-break: keep-all;
display: grid;
grid-template-areas: 'header header' 'body sidebar' 'footer footer';
grid-template-columns: 65fr 35fr;
grid-template-rows: auto 1fr auto;
gap: var(--spacing-section);
padding: var(--spacing-page);
}
.header {
grid-area: header;
font-size: var(--font-title);
font-weight: var(--weight-black);
color: var(--color-primary);
border-bottom: 3px solid var(--color-accent);
padding-bottom: 8px;
}
.body { grid-area: body; display: flex; flex-direction: column; gap: var(--spacing-block); overflow: hidden; }
.sidebar { grid-area: sidebar; display: flex; flex-direction: column; gap: var(--spacing-block); border-left: 1px solid var(--color-border); padding-left: 20px; overflow: hidden; }
.footer { grid-area: footer; background: linear-gradient(135deg, #006aff, #00aaff); border-radius: var(--radius); padding: 14px 30px; text-align: center; color: var(--color-text-on-accent); }
.footer-text { font-size: 15px; font-weight: var(--weight-bold); }
.footer-sub { font-size: var(--font-small); opacity: 0.85; margin-top: 2px; }
"""
# ═══════════════════════════════════════
# 접근 A: Few-Shot 직접 생성
# Claude가 디자인 토큰만 보고 자유롭게 HTML 구성
# (여기서는 "Claude가 만들었을 법한" 결과를 시뮬레이션)
# ═══════════════════════════════════════
APPROACH_A_HTML = f"""<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>접근 A</title>
<style>{DESIGN_TOKENS_CSS}{SLIDE_BASE_CSS}
/* 접근 A: Claude가 콘텐츠에 맞게 자유 구성 */
.intro-bar {{
background: linear-gradient(135deg, var(--color-bg-dark), var(--color-bg-dark-deep));
border-radius: var(--radius);
padding: 14px 20px;
color: var(--color-text-on-dark);
}}
.intro-bar h3 {{
font-size: var(--font-body);
font-weight: var(--weight-bold);
color: var(--color-accent-light);
margin-bottom: var(--spacing-small);
}}
.intro-bar p {{
font-size: var(--font-body);
line-height: 1.7;
}}
.intro-bar strong {{ color: var(--color-warning); }}
.cases-row {{
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-inner);
margin-top: var(--spacing-inner);
}}
.case {{
background: rgba(255,255,255,0.07);
border-radius: var(--radius-small);
padding: 8px 12px;
border-left: 3px solid var(--color-accent-light);
}}
.case-title {{ font-size: var(--font-small); font-weight: var(--weight-bold); color: var(--color-accent-light); margin-bottom: 3px; }}
.case-text {{ font-size: var(--font-small); color: var(--color-text-light); line-height: 1.5; }}
.core-title {{ font-size: var(--font-section); font-weight: var(--weight-black); color: var(--color-accent); text-align: center; margin-bottom: var(--spacing-small); }}
.dx-container {{
border: 3px solid var(--color-accent);
border-radius: 14px;
padding: 14px 16px 12px;
background: linear-gradient(135deg, #eff6ff, #dbeafe);
position: relative;
flex: 1;
display: flex;
flex-direction: column;
}}
.dx-badge {{
position: absolute; top: -11px; left: 16px;
background: var(--color-accent); color: white;
font-size: var(--font-small); font-weight: var(--weight-black);
padding: 2px 14px; border-radius: var(--radius-small);
}}
.dx-desc {{
font-size: var(--font-small); color: #1e40af;
text-align: center; margin-bottom: var(--spacing-inner);
}}
.tech-grid {{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: var(--spacing-inner);
flex: 1;
}}
.tech {{
background: white; border: 2px solid var(--color-accent-light);
border-radius: var(--radius); padding: 8px; text-align: center;
display: flex; flex-direction: column; align-items: center;
}}
.tech-circle {{
width: 32px; height: 32px; border-radius: 50%;
background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent));
color: white; font-size: 15px; font-weight: var(--weight-black);
display: flex; align-items: center; justify-content: center;
margin-bottom: 4px;
}}
.tech b {{ font-size: var(--font-body); color: var(--color-primary); }}
.tech span {{ font-size: var(--font-caption); color: var(--color-text-secondary); line-height: 1.4; margin-top: 2px; }}
.key-msg {{
background: #f0f9ff; border: 2px solid #bae6fd;
border-radius: var(--radius); padding: 8px 14px; text-align: center;
}}
.key-msg p {{ font-size: var(--font-body); font-weight: var(--weight-bold); color: #0c4a6e; }}
.key-msg em {{ color: var(--color-danger); font-style: normal; font-weight: var(--weight-black); }}
.sidebar-label {{
display: flex; align-items: center; gap: 10px;
font-size: var(--font-small); font-weight: var(--weight-medium); color: var(--color-text-light);
}}
.sidebar-label::before, .sidebar-label::after {{ content: ''; flex: 1; height: 1px; background: var(--color-border); }}
.def {{
background: var(--color-bg-subtle); border: 1px solid var(--color-border);
border-radius: var(--radius); padding: 10px 12px;
}}
.def-head {{ display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }}
.def-num {{
width: 22px; height: 22px; border-radius: 50%; background: var(--color-accent);
color: white; font-size: var(--font-small); font-weight: var(--weight-black);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}}
.def-title {{ font-size: var(--font-body); font-weight: var(--weight-bold); }}
.def-desc {{ font-size: var(--font-small); color: var(--color-text-secondary); line-height: 1.6; }}
.def-src {{ font-size: var(--font-caption); color: var(--color-text-light); font-style: italic; margin-top: 3px; }}
</style></head><body>
<div class="slide">
<div class="header">건설산업 DX의 올바른 이해</div>
<div class="body">
<div class="intro-bar">
<h3>현실 — 용어의 혼용</h3>
<p>건설산업에서 <strong>DX와 BIM이 동일 개념으로 인식</strong>되고 있다. DX는 산업 전반의 프로세스를 혁신하는 상위개념이며, BIM은 3차원 모델 기반의 정보 관리 도구로서 DX의 하위 기술에 해당한다.</p>
<div class="cases-row">
<div class="case">
<div class="case-title">스마트 건설 활성화 방안 (2022.07)</div>
<div class="case-text">추진과제: 건설산업 디지털화<br>실행과제: BIM 전면 도입, BIM 전문인력 양성</div>
</div>
<div class="case">
<div class="case-title">제7차 건설기술진흥 기본계획 (2023.12)</div>
<div class="case-text">추진방향: 디지털 전환을 통한 스마트 건설 확산<br>추진과제: BIM 도입으로 건설산업 디지털화</div>
</div>
</div>
</div>
<div class="core-title">DX와 핵심기술의 올바른 관계</div>
<div class="dx-container">
<div class="dx-badge">DX — 디지털 전환 (상위개념)</div>
<div class="dx-desc">BIM, GIS, 디지털 트윈 등 핵심기술의 융합을 통해서만 실현 가능</div>
<div class="tech-grid">
<div class="tech">
<div class="tech-circle">G</div>
<b>GIS</b>
<span>지리적 데이터를 공간 분석하여 시각적으로 표현, 위치기반 정보 제공</span>
</div>
<div class="tech">
<div class="tech-circle">B</div>
<b>BIM</b>
<span>시설물 생애주기 정보를 3차원 모델 기반으로 통합·관리하는 도구</span>
</div>
<div class="tech">
<div class="tech-circle">T</div>
<b>디지털 트윈</b>
<span>현실 세계의 물리적 객체를 디지털 환경에 동일하게 구현</span>
</div>
</div>
</div>
<div class="key-msg">
<p><em>BIM ≠ DX</em> — BIM은 DX를 실현하기 위한 핵심 기술 중 하나일 뿐이다</p>
</div>
</div>
<div class="sidebar">
<div class="sidebar-label">용어 정의</div>
<div class="def">
<div class="def-head"><span class="def-num">1</span><span class="def-title">건설산업</span></div>
<div class="def-desc">부동산 개발, 설계, 시공, 유지보수를 포괄하는 종합산업으로, 광범위한 기술을 통합·융합하여 인프라를 만드는 산업</div>
</div>
<div class="def">
<div class="def-head"><span class="def-num">2</span><span class="def-title">BIM</span></div>
<div class="def-desc">형상정보와 속성정보가 포함된 3D 모델로, 시설물의 생애주기 동안 발생한 모든 정보를 3차원 모델 기반으로 통합·관리하는 정보 관리 도구</div>
<div class="def-src">건설산업 BIM 기본지침, 국토교통부, 2020</div>
</div>
<div class="def">
<div class="def-head"><span class="def-num">3</span><span class="def-title">DX (디지털 전환)</span></div>
<div class="def-desc">디지털 기술을 활용하여 업무방식과 가치 창출 구조를 전환하는 과정 및 결과. 단순한 기술 도입이 아닌, 산업의 새로운 방향을 정립</div>
<div class="def-src">IBM Institute for Business Value, 2011</div>
</div>
</div>
<div class="footer">
<div class="footer-text">BIM은 건설산업의 디지털전환(DX)을 수행하는 과정에서 가장 기초가 되는 일부분이다</div>
<div class="footer-sub">각 용어의 정의, 역할, 상호관계에 대한 체계적 정립 필요</div>
</div>
</div>
</body></html>"""
# ═══════════════════════════════════════
# 접근 B: 레이아웃 프리미티브 조합
# 15개 기본 요소 중 선택하여 조합
# ═══════════════════════════════════════
APPROACH_B_HTML = f"""<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>접근 B</title>
<style>{DESIGN_TOKENS_CSS}{SLIDE_BASE_CSS}
/* 접근 B: 프리미티브 조합 — callout + comparison-table + card-row + definition-list */
.prim-callout {{
background: linear-gradient(135deg, var(--color-bg-dark), var(--color-bg-dark-deep));
border-radius: var(--radius); padding: 12px 18px; color: var(--color-text-on-dark);
}}
.prim-callout-title {{ font-size: var(--font-body); font-weight: var(--weight-bold); color: var(--color-accent-light); margin-bottom: 4px; }}
.prim-callout-text {{ font-size: var(--font-small); line-height: 1.6; }}
.prim-callout-text strong {{ color: var(--color-warning); }}
.prim-compare {{
display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
border-radius: var(--radius); overflow: hidden; margin-top: var(--spacing-small);
}}
.prim-compare-head {{
font-size: var(--font-small); font-weight: var(--weight-bold);
padding: 6px 10px; text-align: center;
}}
.prim-compare-head.left {{ background: var(--color-accent); color: white; }}
.prim-compare-head.right {{ background: #475569; color: white; }}
.prim-compare-row {{ display: contents; }}
.prim-compare-cell {{
font-size: var(--font-caption); padding: 5px 10px;
background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border);
line-height: 1.5;
}}
.prim-compare-cell.left {{ color: var(--color-accent); font-weight: var(--weight-medium); }}
.prim-section-title {{
font-size: var(--font-section); font-weight: var(--weight-black);
color: var(--color-accent); text-align: center; padding: 4px 0;
}}
.prim-card-row {{
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--spacing-inner);
flex: 1;
}}
.prim-card {{
background: var(--color-bg-subtle); border: 1px solid var(--color-border);
border-radius: var(--radius); padding: 10px; text-align: center;
display: flex; flex-direction: column; align-items: center;
}}
.prim-card-icon {{
width: 32px; height: 32px; border-radius: 50%;
background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent));
color: white; font-size: 15px; font-weight: var(--weight-black);
display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
}}
.prim-card b {{ font-size: var(--font-body); }}
.prim-card span {{ font-size: var(--font-caption); color: var(--color-text-secondary); line-height: 1.4; margin-top: 2px; }}
.prim-highlight {{
background: #fef2f2; border: 2px solid #fecaca; border-radius: var(--radius);
padding: 8px 14px; text-align: center;
}}
.prim-highlight p {{ font-size: var(--font-body); font-weight: var(--weight-bold); color: var(--color-danger); }}
.sidebar-label {{ display: flex; align-items: center; gap: 10px; font-size: var(--font-small); font-weight: var(--weight-medium); color: var(--color-text-light); }}
.sidebar-label::before, .sidebar-label::after {{ content: ''; flex: 1; height: 1px; background: var(--color-border); }}
.prim-deflist {{ display: flex; flex-direction: column; gap: var(--spacing-inner); }}
.prim-def {{
background: var(--color-bg-subtle); border: 1px solid var(--color-border);
border-radius: var(--radius); padding: 10px 12px;
}}
.prim-def-head {{ display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }}
.prim-def-num {{
width: 20px; height: 20px; border-radius: 50%; background: var(--color-accent);
color: white; font-size: 10px; font-weight: var(--weight-black);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}}
.prim-def-title {{ font-size: var(--font-body); font-weight: var(--weight-bold); }}
.prim-def-desc {{ font-size: var(--font-small); color: var(--color-text-secondary); line-height: 1.5; }}
.prim-def-src {{ font-size: var(--font-caption); color: var(--color-text-light); font-style: italic; margin-top: 2px; }}
</style></head><body>
<div class="slide">
<div class="header">건설산업 DX의 올바른 이해</div>
<div class="body">
<!-- 프리미티브 1: callout (문제 제기) -->
<div class="prim-callout">
<div class="prim-callout-title">현실 — 용어의 혼용</div>
<div class="prim-callout-text">건설산업에서 <strong>DX와 BIM이 동일 개념으로 인식</strong>되고 있다. DX는 상위개념이며 BIM은 하위 기술에 해당한다.</div>
<!-- 프리미티브 2: compare (사례 비교) -->
<div class="prim-compare">
<div class="prim-compare-head left">스마트건설 활성화 방안 (2022.07)</div>
<div class="prim-compare-head right">제7차 건설기술진흥 기본계획 (2023.12)</div>
<div class="prim-compare-cell left">추진과제: 건설산업 디지털화</div>
<div class="prim-compare-cell">추진방향: 디지털 전환을 통한 스마트 건설 확산</div>
<div class="prim-compare-cell left">실행과제: BIM 전면 도입, 전문인력 양성</div>
<div class="prim-compare-cell">추진과제: BIM 도입으로 건설산업 디지털화</div>
</div>
</div>
<!-- 프리미티브 3: section-title -->
<div class="prim-section-title">DX와 핵심기술의 올바른 관계</div>
<!-- 프리미티브 4: card-row (기술 카드 3열) -->
<div class="prim-card-row">
<div class="prim-card">
<div class="prim-card-icon">G</div>
<b>GIS</b>
<span>지리적 데이터를 공간 분석하여 시각적으로 표현, 위치기반 정보 제공</span>
</div>
<div class="prim-card">
<div class="prim-card-icon">B</div>
<b>BIM</b>
<span>시설물 생애주기 정보를 3차원 모델 기반으로 통합·관리하는 도구</span>
</div>
<div class="prim-card">
<div class="prim-card-icon">T</div>
<b>디지털 트윈</b>
<span>현실 세계의 물리적 객체를 디지털 환경에 동일하게 구현</span>
</div>
</div>
<!-- 프리미티브 5: highlight (핵심 메시지) -->
<div class="prim-highlight">
<p>BIM ≠ DX — BIM은 DX를 실현하기 위한 핵심 기술 중 하나일 뿐이다</p>
</div>
</div>
<div class="sidebar">
<div class="sidebar-label">용어 정의</div>
<div class="prim-deflist">
<div class="prim-def">
<div class="prim-def-head"><span class="prim-def-num">1</span><span class="prim-def-title">건설산업</span></div>
<div class="prim-def-desc">부동산 개발, 설계, 시공, 유지보수를 포괄하는 종합산업으로, 광범위한 기술을 통합·융합하여 인프라를 만드는 산업</div>
</div>
<div class="prim-def">
<div class="prim-def-head"><span class="prim-def-num">2</span><span class="prim-def-title">BIM</span></div>
<div class="prim-def-desc">형상정보와 속성정보가 포함된 3D 모델로, 시설물의 생애주기 동안 발생한 모든 정보를 3차원 모델 기반으로 통합·관리하는 정보 관리 도구</div>
<div class="prim-def-src">건설산업 BIM 기본지침, 국토교통부, 2020</div>
</div>
<div class="prim-def">
<div class="prim-def-head"><span class="prim-def-num">3</span><span class="prim-def-title">DX (디지털 전환)</span></div>
<div class="prim-def-desc">디지털 기술을 활용하여 업무방식과 가치 창출 구조를 전환하는 과정 및 결과. 단순한 기술 도입이 아닌, 산업의 새로운 방향을 정립</div>
<div class="prim-def-src">IBM Institute for Business Value, 2011</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer-text">BIM은 건설산업의 디지털전환(DX)을 수행하는 과정에서 가장 기초가 되는 일부분이다</div>
<div class="footer-sub">각 용어의 정의, 역할, 상호관계에 대한 체계적 정립 필요</div>
</div>
</div>
</body></html>"""
# ═══════════════════════════════════════
# 접근 C: 참조 기반 생성
# ideal_v2의 구조를 참조하되, 디자인 토큰으로 스타일 통일
# + 포함관계를 더 명확하게 (DX 큰 원 안에 3개)
# ═══════════════════════════════════════
APPROACH_C_HTML = f"""<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>접근 C</title>
<style>{DESIGN_TOKENS_CSS}{SLIDE_BASE_CSS}
/* 접근 C: 참조(ideal_v2) 기반 + 디자인 토큰 통일 */
.ref-problem {{
background: linear-gradient(135deg, var(--color-bg-dark), var(--color-bg-dark-deep));
border-radius: var(--radius); padding: 14px 20px; color: var(--color-text-on-dark);
}}
.ref-problem h3 {{ font-size: var(--font-body); font-weight: var(--weight-bold); color: var(--color-accent-light); margin-bottom: var(--spacing-small); }}
.ref-problem p {{ font-size: var(--font-body); line-height: 1.7; }}
.ref-problem strong {{ color: var(--color-warning); }}
.ref-cases {{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-inner); margin-top: var(--spacing-inner); }}
.ref-case {{ background: rgba(255,255,255,0.07); border-radius: var(--radius-small); padding: 8px 12px; border-left: 3px solid var(--color-accent-light); }}
.ref-case-title {{ font-size: var(--font-small); font-weight: var(--weight-bold); color: var(--color-accent-light); margin-bottom: 3px; }}
.ref-case-text {{ font-size: var(--font-small); color: var(--color-text-light); line-height: 1.5; }}
.ref-core-title {{ font-size: var(--font-section); font-weight: var(--weight-black); color: var(--color-accent); text-align: center; }}
/* 포함관계: SVG 기반 벤 다이어그램 스타일 */
.ref-hierarchy {{
flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
position: relative;
}}
.ref-dx-ring {{
width: 100%; max-width: 600px;
border: 3px solid var(--color-accent); border-radius: 20px;
padding: 20px 16px 14px; position: relative;
background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
}}
.ref-dx-tag {{
position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
background: var(--color-accent); color: white;
font-size: 12px; font-weight: var(--weight-black);
padding: 3px 20px; border-radius: 12px; white-space: nowrap;
}}
.ref-dx-sub {{
text-align: center; font-size: var(--font-small); color: #1e40af;
margin-bottom: var(--spacing-inner);
}}
.ref-techs {{
display: flex; justify-content: center; gap: 16px;
}}
.ref-tech {{
width: 130px; text-align: center;
}}
.ref-tech-bubble {{
width: 50px; height: 50px; border-radius: 50%;
background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent));
color: white; font-size: 20px; font-weight: var(--weight-black);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 6px; box-shadow: 0 2px 8px rgba(37,99,235,0.3);
}}
.ref-tech b {{ display: block; font-size: var(--font-body); color: var(--color-primary); margin-bottom: 2px; }}
.ref-tech span {{ font-size: var(--font-caption); color: var(--color-text-secondary); line-height: 1.4; }}
.ref-arrow {{
text-align: center; font-size: 12px; color: var(--color-accent);
font-weight: var(--weight-bold); margin: 4px 0;
}}
.ref-msg {{
background: #f0f9ff; border: 2px solid #bae6fd;
border-radius: var(--radius); padding: 10px 16px; text-align: center;
margin-top: var(--spacing-small);
}}
.ref-msg p {{ font-size: var(--font-body); font-weight: var(--weight-bold); color: #0c4a6e; }}
.ref-msg em {{ color: var(--color-danger); font-style: normal; font-weight: var(--weight-black); }}
.sidebar-label {{ display: flex; align-items: center; gap: 10px; font-size: var(--font-small); font-weight: var(--weight-medium); color: var(--color-text-light); }}
.sidebar-label::before, .sidebar-label::after {{ content: ''; flex: 1; height: 1px; background: var(--color-border); }}
.ref-def {{
background: var(--color-bg-subtle); border: 1px solid var(--color-border);
border-radius: var(--radius); padding: 10px 12px;
}}
.ref-def-head {{ display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }}
.ref-def-num {{
width: 22px; height: 22px; border-radius: 50%; background: var(--color-accent);
color: white; font-size: var(--font-small); font-weight: var(--weight-black);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}}
.ref-def-title {{ font-size: var(--font-body); font-weight: var(--weight-bold); }}
.ref-def-desc {{ font-size: var(--font-small); color: var(--color-text-secondary); line-height: 1.6; }}
.ref-def-src {{ font-size: var(--font-caption); color: var(--color-text-light); font-style: italic; margin-top: 3px; }}
</style></head><body>
<div class="slide">
<div class="header">건설산업 DX의 올바른 이해</div>
<div class="body">
<div class="ref-problem">
<h3>현실 — 용어의 혼용</h3>
<p>건설산업에서 <strong>DX와 BIM이 동일 개념으로 인식</strong>되고 있다. DX는 산업 전반의 프로세스를 혁신하는 상위개념이며, BIM은 하위 기술에 해당한다.</p>
<div class="ref-cases">
<div class="ref-case">
<div class="ref-case-title">스마트 건설 활성화 방안 (2022.07)</div>
<div class="ref-case-text">추진과제: 건설산업 디지털화<br>실행과제: BIM 전면 도입, BIM 전문인력 양성</div>
</div>
<div class="ref-case">
<div class="ref-case-title">제7차 건설기술진흥 기본계획 (2023.12)</div>
<div class="ref-case-text">추진방향: 디지털 전환을 통한 스마트 건설 확산<br>추진과제: BIM 도입으로 건설산업 디지털화</div>
</div>
</div>
</div>
<div class="ref-core-title">DX와 핵심기술의 올바른 관계</div>
<div class="ref-hierarchy">
<div class="ref-dx-ring">
<div class="ref-dx-tag">DX — 디지털 전환 (상위개념)</div>
<div class="ref-dx-sub">업무방식과 가치 창출 구조를 근본적으로 전환하는 과정</div>
<div class="ref-techs">
<div class="ref-tech">
<div class="ref-tech-bubble">G</div>
<b>GIS</b>
<span>지리적 데이터를 공간 분석, 위치기반 정보 제공</span>
</div>
<div class="ref-tech">
<div class="ref-tech-bubble">B</div>
<b>BIM</b>
<span>시설물 생애주기 정보를 3차원 모델로 통합·관리</span>
</div>
<div class="ref-tech">
<div class="ref-tech-bubble">T</div>
<b>디지털 트윈</b>
<span>현실 객체를 디지털 환경에 동일하게 구현</span>
</div>
</div>
</div>
</div>
<div class="ref-msg">
<p><em>BIM ≠ DX</em> — BIM은 DX를 실현하기 위한 핵심 기술 중 하나일 뿐이다</p>
</div>
</div>
<div class="sidebar">
<div class="sidebar-label">용어 정의</div>
<div class="ref-def">
<div class="ref-def-head"><span class="ref-def-num">1</span><span class="ref-def-title">건설산업</span></div>
<div class="ref-def-desc">부동산 개발, 설계, 시공, 유지보수를 포괄하는 종합산업으로, 광범위한 기술을 통합·융합하여 인프라를 만드는 산업</div>
</div>
<div class="ref-def">
<div class="ref-def-head"><span class="ref-def-num">2</span><span class="ref-def-title">BIM</span></div>
<div class="ref-def-desc">형상정보와 속성정보가 포함된 3D 모델로, 시설물의 생애주기 동안 발생한 모든 정보를 3차원 모델 기반으로 통합·관리하는 정보 관리 도구</div>
<div class="ref-def-src">건설산업 BIM 기본지침, 국토교통부, 2020</div>
</div>
<div class="ref-def">
<div class="ref-def-head"><span class="ref-def-num">3</span><span class="ref-def-title">DX (디지털 전환)</span></div>
<div class="ref-def-desc">디지털 기술을 활용하여 업무방식과 가치 창출 구조를 전환하는 과정 및 결과. 단순한 기술 도입이 아닌, 산업의 새로운 방향을 정립</div>
<div class="ref-def-src">IBM Institute for Business Value, 2011</div>
</div>
</div>
<div class="footer">
<div class="footer-text">BIM은 건설산업의 디지털전환(DX)을 수행하는 과정에서 가장 기초가 되는 일부분이다</div>
<div class="footer-sub">각 용어의 정의, 역할, 상호관계에 대한 체계적 정립 필요</div>
</div>
</div>
</body></html>"""
async def main():
from src.slide_measurer import measure_rendered_heights, capture_slide_screenshot
out_dir = ROOT / "data" / "runs" / "3approaches"
out_dir.mkdir(parents=True, exist_ok=True)
for name, html in [("A_fewshot", APPROACH_A_HTML), ("B_primitives", APPROACH_B_HTML), ("C_reference", APPROACH_C_HTML)]:
print(f"\n=== 접근 {name} ===")
m = await asyncio.to_thread(measure_rendered_heights, html)
s = await asyncio.to_thread(capture_slide_screenshot, html)
(out_dir / f"{name}.html").write_text(html, encoding="utf-8")
if s:
(out_dir / f"{name}.png").write_bytes(base64.b64decode(s))
slide = m.get("slide", {})
print(f" slide: {slide.get('scrollHeight', 0)}px / 720px {'✅' if not slide.get('overflowed') else '❌'}")
print(f"\n결과물: {out_dir}")
print(" A_fewshot.png — 접근 A: Claude가 디자인 토큰 안에서 자유 생성")
print(" B_primitives.png — 접근 B: 15개 프리미티브 조합")
print(" C_reference.png — 접근 C: ideal_v2 참조 기반 + 더 큰 포함관계 시각화")
if __name__ == "__main__":
import logging
logging.basicConfig(level=logging.INFO, format="%(asctime)s %(levelname)s %(message)s", datefmt="%H:%M:%S")
logging.getLogger("selenium").setLevel(logging.WARNING)
logging.getLogger("urllib3").setLevel(logging.WARNING)
asyncio.run(main())
Reference in New Issue View Git Blame Copy Permalink