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
parent 0e4b8c091c
commit 29f56187c0
44 changed files with 9431 additions and 313 deletions
--- a/scripts/test_ideal_v2.py
+++ b/scripts/test_ideal_v2.py
@@ -0,0 +1,426 @@
+"""이상적인 슬라이드 시뮬레이션 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())