kyeongmin
29f56187c0
포함 내용: - 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>
427 lines
12 KiB
Python
427 lines
12 KiB
Python
"""이상적인 슬라이드 시뮬레이션 v2.
|
|
|
|
콘텐츠의 전달 의도를 정확히 반영한 블록 배치.
|
|
핵심: "DX와 BIM은 다르다. BIM은 DX의 일부다."를 독자가 이해하게 하는 것.
|
|
|
|
Kei API 불필요 — 순수 렌더링만.
|
|
"""
|
|
from __future__ import annotations
|
|
|
|
import asyncio
|
|
import json
|
|
import sys
|
|
from pathlib import Path
|
|
|
|
ROOT = Path(__file__).parent.parent
|
|
sys.path.insert(0, str(ROOT))
|
|
|
|
# 직접 HTML을 작성하여 렌더링
|
|
SLIDE_HTML = """<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>건설산업 DX의 올바른 이해</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; }
|
|
|
|
.slide {
|
|
width: 1280px;
|
|
height: 720px;
|
|
overflow: hidden;
|
|
background: #ffffff;
|
|
font-family: 'Pretendard Variable', sans-serif;
|
|
color: #1e293b;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
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: 16px;
|
|
padding: 36px 40px 24px;
|
|
}
|
|
|
|
/* ── 제목 ── */
|
|
.header {
|
|
grid-area: header;
|
|
font-size: 28px;
|
|
font-weight: 900;
|
|
color: #1e293b;
|
|
border-bottom: 3px solid #2563eb;
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
/* ── Body ── */
|
|
.body {
|
|
grid-area: body;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── 배경: 문제 제기 (간결한 1블록) ── */
|
|
.problem-box {
|
|
background: linear-gradient(135deg, #1e293b, #0f172a);
|
|
border-radius: 8px;
|
|
padding: 16px 24px;
|
|
color: #fff;
|
|
}
|
|
.problem-title {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: #93c5fd;
|
|
margin-bottom: 6px;
|
|
}
|
|
.problem-text {
|
|
font-size: 13px;
|
|
line-height: 1.7;
|
|
color: #e2e8f0;
|
|
}
|
|
.problem-text strong {
|
|
color: #fbbf24;
|
|
font-weight: 700;
|
|
}
|
|
.problem-cases {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
.case-card {
|
|
background: rgba(255,255,255,0.08);
|
|
border-radius: 6px;
|
|
padding: 10px 14px;
|
|
border-left: 3px solid #60a5fa;
|
|
}
|
|
.case-label {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
color: #93c5fd;
|
|
margin-bottom: 4px;
|
|
}
|
|
.case-content {
|
|
font-size: 11px;
|
|
color: #cbd5e1;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ── 본심: 핵심 관계 시각화 ── */
|
|
.core-section {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
.core-label {
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
color: #2563eb;
|
|
text-align: center;
|
|
}
|
|
|
|
/* 포함 관계 시각화 */
|
|
.hierarchy-visual {
|
|
flex: 1;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.dx-outer {
|
|
width: 100%;
|
|
max-width: 620px;
|
|
border: 3px solid #2563eb;
|
|
border-radius: 16px;
|
|
padding: 16px 20px 14px;
|
|
position: relative;
|
|
background: linear-gradient(135deg, #eff6ff, #dbeafe);
|
|
}
|
|
.dx-label {
|
|
position: absolute;
|
|
top: -12px;
|
|
left: 20px;
|
|
background: #2563eb;
|
|
color: white;
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
padding: 2px 16px;
|
|
border-radius: 10px;
|
|
}
|
|
.dx-desc {
|
|
font-size: 11px;
|
|
color: #1e40af;
|
|
margin-bottom: 10px;
|
|
text-align: center;
|
|
}
|
|
.tech-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
.tech-card {
|
|
background: white;
|
|
border: 2px solid #93c5fd;
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
text-align: center;
|
|
}
|
|
.tech-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #93c5fd, #2563eb);
|
|
color: white;
|
|
font-size: 16px;
|
|
font-weight: 900;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 6px;
|
|
}
|
|
.tech-name {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: #1e293b;
|
|
margin-bottom: 3px;
|
|
}
|
|
.tech-desc {
|
|
font-size: 10px;
|
|
color: #64748b;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* 핵심 메시지 */
|
|
.core-message {
|
|
background: #f0f9ff;
|
|
border: 2px solid #bae6fd;
|
|
border-radius: 8px;
|
|
padding: 10px 16px;
|
|
text-align: center;
|
|
}
|
|
.core-message-text {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: #0c4a6e;
|
|
line-height: 1.5;
|
|
}
|
|
.core-message-text em {
|
|
color: #dc2626;
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
}
|
|
|
|
/* ── Sidebar ── */
|
|
.sidebar {
|
|
grid-area: sidebar;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
border-left: 1px solid #e2e8f0;
|
|
padding-left: 20px;
|
|
}
|
|
.sidebar-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #94a3b8;
|
|
}
|
|
.sidebar-label::before, .sidebar-label::after {
|
|
content: '';
|
|
flex: 1;
|
|
height: 1px;
|
|
background: #e2e8f0;
|
|
}
|
|
.def-item {
|
|
background: #f8fafc;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
padding: 12px 14px;
|
|
}
|
|
.def-num {
|
|
display: inline-flex;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
background: #2563eb;
|
|
color: white;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 8px;
|
|
vertical-align: middle;
|
|
}
|
|
.def-title {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: #1e293b;
|
|
display: inline;
|
|
vertical-align: middle;
|
|
}
|
|
.def-desc {
|
|
font-size: 12px;
|
|
color: #475569;
|
|
line-height: 1.6;
|
|
margin-top: 6px;
|
|
}
|
|
.def-source {
|
|
font-size: 10px;
|
|
color: #94a3b8;
|
|
font-style: italic;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* ── Footer ── */
|
|
.footer {
|
|
grid-area: footer;
|
|
background: linear-gradient(135deg, #006aff, #00aaff);
|
|
border-radius: 8px;
|
|
padding: 14px 30px;
|
|
text-align: center;
|
|
color: white;
|
|
}
|
|
.footer-text {
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
}
|
|
.footer-sub {
|
|
font-size: 11px;
|
|
opacity: 0.85;
|
|
margin-top: 2px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="slide">
|
|
<div class="header">건설산업 DX의 올바른 이해</div>
|
|
|
|
<div class="body">
|
|
<!-- 배경: 문제 제기 + 사례 (1블록에 통합) -->
|
|
<div class="problem-box">
|
|
<div class="problem-title">현실 — 용어의 혼용</div>
|
|
<div class="problem-text">
|
|
건설산업에서 <strong>DX와 BIM이 동일 개념으로 인식</strong>되고 있다.
|
|
DX는 산업 전반의 프로세스를 혁신하는 상위개념이며, BIM은 하위 기술에 해당한다.
|
|
</div>
|
|
<div class="problem-cases">
|
|
<div class="case-card">
|
|
<div class="case-label">스마트 건설 활성화 방안 (2022.07)</div>
|
|
<div class="case-content">추진과제: 건설산업 디지털화<br>실행과제: BIM 전면 도입, BIM 전문인력 양성</div>
|
|
</div>
|
|
<div class="case-card">
|
|
<div class="case-label">제7차 건설기술진흥 기본계획 (2023.12)</div>
|
|
<div class="case-content">추진방향: 디지털 전환을 통한 스마트 건설 확산<br>추진과제: BIM 도입으로 건설산업 디지털화</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 본심: DX ⊃ BIM 포함 관계 시각화 -->
|
|
<div class="core-section">
|
|
<div class="core-label">DX와 핵심기술의 올바른 관계</div>
|
|
<div class="hierarchy-visual">
|
|
<div class="dx-outer">
|
|
<div class="dx-label">DX — 디지털 전환 (상위개념)</div>
|
|
<div class="dx-desc">BIM, GIS, 디지털 트윈 등 핵심기술의 융합을 통해서만 실현 가능</div>
|
|
<div class="tech-row">
|
|
<div class="tech-card">
|
|
<div class="tech-icon">G</div>
|
|
<div class="tech-name">GIS</div>
|
|
<div class="tech-desc">지리적 데이터를 공간 분석하여 시각적으로 표현, 위치기반 정보 제공</div>
|
|
</div>
|
|
<div class="tech-card">
|
|
<div class="tech-icon">B</div>
|
|
<div class="tech-name">BIM</div>
|
|
<div class="tech-desc">시설물 생애주기 정보를 3차원 모델 기반으로 통합·관리하는 도구</div>
|
|
</div>
|
|
<div class="tech-card">
|
|
<div class="tech-icon">T</div>
|
|
<div class="tech-name">디지털 트윈</div>
|
|
<div class="tech-desc">현실 세계의 물리적 객체를 디지털 환경에 동일하게 구현</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="core-message">
|
|
<div class="core-message-text">
|
|
DX는 이들 기술을 통합하여 업무방식과 가치 창출 구조를 근본적으로 전환하는 과정이다.<br>
|
|
<em>BIM ≠ DX</em> — BIM은 DX를 실현하기 위한 핵심 기술 중 하나일 뿐이다.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sidebar">
|
|
<div class="sidebar-label">용어 정의</div>
|
|
|
|
<div class="def-item">
|
|
<span class="def-num">1</span>
|
|
<span class="def-title">건설산업</span>
|
|
<div class="def-desc">부동산 개발, 설계, 시공, 유지보수를 포괄하는 종합산업으로, 광범위한 기술을 통합·융합하여 인프라를 만드는 산업</div>
|
|
</div>
|
|
|
|
<div class="def-item">
|
|
<span class="def-num">2</span>
|
|
<span class="def-title">BIM</span>
|
|
<div class="def-desc">형상정보와 속성정보가 포함된 3D 모델로, 시설물의 생애주기 동안 발생한 모든 정보를 3차원 모델 기반으로 통합·관리하는 정보 관리 도구</div>
|
|
<div class="def-source">건설산업 BIM 기본지침, 국토교통부, 2020</div>
|
|
</div>
|
|
|
|
<div class="def-item">
|
|
<span class="def-num">3</span>
|
|
<span class="def-title">DX (디지털 전환)</span>
|
|
<div class="def-desc">디지털 기술을 활용하여 업무방식과 가치 창출 구조를 전환하는 과정 및 결과. 단순한 기술 도입이 아닌, 산업의 새로운 방향을 정립</div>
|
|
<div class="def-source">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
|
|
import base64
|
|
|
|
out_dir = ROOT / "data" / "runs" / "ideal_v2"
|
|
out_dir.mkdir(parents=True, exist_ok=True)
|
|
|
|
# 렌더링 + 측정
|
|
m = await asyncio.to_thread(measure_rendered_heights, SLIDE_HTML)
|
|
s = await asyncio.to_thread(capture_slide_screenshot, SLIDE_HTML)
|
|
|
|
(out_dir / "ideal_v2.html").write_text(SLIDE_HTML, encoding="utf-8")
|
|
if s:
|
|
(out_dir / "ideal_v2_screenshot.png").write_bytes(base64.b64decode(s))
|
|
|
|
print("=== 이상적인 슬라이드 v2 ===")
|
|
slide = m.get("slide", {})
|
|
print(f" slide: {slide.get('scrollHeight', 0)}px / 720px {'✅' if not slide.get('overflowed') else '❌'}")
|
|
for name, data in m.get("zones", {}).items():
|
|
status = "✅" if not data.get("overflowed") else f"❌ +{data.get('excess_px', 0)}px"
|
|
print(f" {name}: {data.get('scrollHeight', 0)}px / {data.get('clientHeight', 0)}px {status}")
|
|
print(f"\n결과: {out_dir}/ideal_v2_screenshot.png")
|
|
|
|
|
|
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())
|