04. design_agent 추가 — 콘텐츠 시각 구조화 슬라이드 생성기

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>
2026-03-25 18:47:13 +09:00
parent 9b905a4313
commit 688ddbbb17
244 changed files with 23955 additions and 0 deletions
--- a/design_agent/docs/test-slide-output.html
+++ b/design_agent/docs/test-slide-output.html
@@ -0,0 +1,402 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<title>DX와 BIM의 개념적 구분과 재정립</title>
+<style>
+/* Design Agent — 디자인 토큰 */
+/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
+
+:root {
+    /* 색상 */
+    --color-primary: #1e293b;
+    --color-accent: #2563eb;
+    --color-neutral: #64748b;
+    --color-bg: #ffffff;
+    --color-bg-subtle: #f8fafc;
+    --color-border: #e2e8f0;
+    --color-danger: #dc2626;
+    --color-success: #16a34a;
+    --color-text: #1e293b;
+    --color-text-secondary: #64748b;
+    --color-text-light: #94a3b8;
+
+    /* 폰트 크기 */
+    --font-title: 2rem;
+    --font-subtitle: 1.25rem;
+    --font-body: 0.95rem;
+    --font-caption: 0.8rem;
+    --font-small: 0.7rem;
+
+    /* 폰트 두께 */
+    --weight-normal: 400;
+    --weight-medium: 500;
+    --weight-bold: 700;
+    --weight-black: 900;
+
+    /* 여백 */
+    --spacing-page: 40px;
+    --spacing-block: 20px;
+    --spacing-inner: 16px;
+    --spacing-small: 8px;
+
+    /* 기타 */
+    --radius: 6px;
+    --border-width: 1px;
+    --accent-border: 3px;
+    --line-height-ko: 1.7;
+}
+
+/* Design Agent — 기본 슬라이드 스타일 */
+
+@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;
+}
+
+/* 슬라이드 컨테이너: 16:9 고정 비율 */
+.slide {
+    width: 1280px;
+    height: 720px;
+    aspect-ratio: 16 / 9;
+    overflow: hidden;
+    background: var(--color-bg);
+    font-family: 'Pretendard Variable', 'Pretendard', 'Noto Sans KR', sans-serif;
+    color: var(--color-text);
+    font-size: var(--font-body);
+    line-height: var(--line-height-ko);
+    word-break: keep-all;
+    padding: var(--spacing-page);
+    display: grid;
+    gap: var(--spacing-block);
+}
+
+/* 슬라이드 제목 */
+.slide-title {
+    font-size: var(--font-title);
+    font-weight: var(--weight-black);
+    color: var(--color-primary);
+    border-bottom: var(--accent-border) solid var(--color-accent);
+    padding-bottom: var(--spacing-small);
+}
+
+/* 섹션 제목 */
+.section-title {
+    font-size: var(--font-subtitle);
+    font-weight: var(--weight-bold);
+    color: var(--color-primary);
+    margin-bottom: var(--spacing-small);
+}
+
+/* 본문 */
+.body-text {
+    font-size: var(--font-body);
+    color: var(--color-text);
+    line-height: var(--line-height-ko);
+}
+
+/* 캡션/출처 */
+.caption {
+    font-size: var(--font-caption);
+    color: var(--color-text-light);
+    font-style: italic;
+}
+
+/* 강조 텍스트 */
+.highlight {
+    color: var(--color-accent);
+    font-weight: var(--weight-bold);
+}
+
+/* 경고/문제 강조 */
+.danger {
+    color: var(--color-danger);
+    font-weight: var(--weight-bold);
+}
+
+</style>
+<style>
+
+.slide-1 {
+    grid-template-areas: 'header header' 'left right' 'footer footer';
+    grid-template-columns: 6.5fr 3.5fr;
+    grid-template-rows: auto 1fr auto;
+}
+
+.slide-1 .area-header {
+    grid-area: header;
+}
+
+.slide-1 .area-left {
+    grid-area: left;
+}
+
+.slide-1 .area-right {
+    grid-area: right;
+}
+
+.slide-1 .area-footer {
+    grid-area: footer;
+}
+
+
+
+/* 다중 페이지: 페이지 간 간격 */
+.slide + .slide {
+    margin-top: 40px;
+}
+
+/* 인쇄 시 페이지 분리 */
+@media print {
+    .slide {
+        page-break-after: always;
+    }
+    .slide + .slide {
+        margin-top: 0;
+    }
+}
+</style>
+</head>
+<body>
+
+<div class="slide slide-1">
+    
+    <div class="slide-title" style="grid-area: header;">DX와 BIM의 개념적 구분과 재정립</div>
+    
+
+    
+    <div class="area-header">
+        <!-- 강조 인용 블록: 문제 제기, 핵심 메시지 -->
+<div class="block-quote">
+    <div class="quote-text">건설산업의 디지털 전환 논의에서 DX와 BIM이 개념적으로 명확히 정립되지 않은 채 혼용되어 사용되고 있으며, BIM 기술의 도입을 DX의 완성으로 오인하거나 DX를 BIM 기술 도입 수준으로 한정하는 인식이 확산되고 있다.</div>
+    
+</div>
+
+<style>
+.block-quote {
+    background: var(--color-bg-subtle);
+    border-left: var(--accent-border) solid var(--color-danger);
+    padding: var(--spacing-inner) var(--spacing-block);
+    border-radius: 0 var(--radius) var(--radius) 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+.quote-text {
+    font-size: var(--font-body);
+    color: var(--color-text);
+    line-height: var(--line-height-ko);
+    font-weight: var(--weight-medium);
+}
+.quote-source {
+    font-size: var(--font-caption);
+    color: var(--color-text-light);
+    font-style: italic;
+    margin-top: var(--spacing-small);
+}
+</style>
+    </div>
+    
+    <div class="area-left">
+        <!-- 카드 그리드 블록: 2~4열 카드 배열 -->
+<div class="block-card-grid" style="--card-count: 2">
+    
+    <div class="card" style="border-top-color: None">
+        
+        <div class="card-title">제7차 건설기술진흥 기본계획</div>
+        <span class="card-category">국토교통부, 2023</span>
+        <div class="card-description">추진방향: 디지털 전환을 통한 스마트 건설 확산
+추진과제: BIM 도입으로 건설산업 디지털화</div>
+        
+    </div>
+    
+    <div class="card" style="border-top-color: None">
+        
+        <div class="card-title">스마트 건설 활성화 방안</div>
+        <span class="card-category">국토교통부, 2022</span>
+        <div class="card-description">추진과제: 건설산업 디지털화
+세부내용: BIM 전면 도입 및 제도 정비, BIM 전문인력 양성</div>
+        
+    </div>
+    
+</div>
+
+<style>
+.block-card-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--card-count, 3), 1fr);
+    gap: var(--spacing-inner);
+    height: 100%;
+}
+.card {
+    background: var(--color-bg);
+    border: var(--border-width) solid var(--color-border);
+    border-top: var(--accent-border) solid var(--color-accent);
+    border-radius: var(--radius);
+    padding: var(--spacing-inner);
+    display: flex;
+    flex-direction: column;
+}
+.card-icon {
+    font-size: 1.5rem;
+    margin-bottom: var(--spacing-small);
+}
+.card-title {
+    font-size: var(--font-subtitle);
+    font-weight: var(--weight-bold);
+    color: var(--color-primary);
+    margin-bottom: 4px;
+}
+.card-category {
+    font-size: var(--font-small);
+    font-weight: var(--weight-medium);
+    color: var(--color-accent);
+    background: #dbeafe;
+    padding: 2px 8px;
+    border-radius: 12px;
+    display: inline-block;
+    margin-bottom: var(--spacing-small);
+    width: fit-content;
+}
+.card-description {
+    font-size: var(--font-body);
+    color: var(--color-text);
+    line-height: var(--line-height-ko);
+    flex: 1;
+}
+.card-source {
+    font-size: var(--font-small);
+    color: var(--color-text-light);
+    font-style: italic;
+    margin-top: var(--spacing-small);
+    border-top: var(--border-width) solid var(--color-border);
+    padding-top: var(--spacing-small);
+}
+</style>
+    </div>
+    
+    <div class="area-right">
+        <!-- 카드 그리드 블록: 2~4열 카드 배열 -->
+<div class="block-card-grid" style="--card-count: 3">
+    
+    <div class="card" style="border-top-color: None">
+        
+        <div class="card-title">BIM</div>
+        <span class="card-category">디지털 전환 핵심 기술</span>
+        <div class="card-description">시설물 생애주기 정보를 3D 모델 기반으로 통합·관리하는 인프라 기술</div>
+        <div class="card-source">건설산업 BIM 기본지침, 국토교통부, 2020</div>
+    </div>
+    
+    <div class="card" style="border-top-color: None">
+        
+        <div class="card-title">건설산업</div>
+        <span class="card-category">종합산업</span>
+        <div class="card-description">다양한 시설물을 광범위한 기술을 통합·융합하여 만들어내는 종합산업</div>
+        
+    </div>
+    
+    <div class="card" style="border-top-color: None">
+        
+        <div class="card-title">DX</div>
+        <span class="card-category">산업 패러다임 변화</span>
+        <div class="card-description">디지털 기술 기반으로 업무방식과 가치 창출 구조를 전환하는 과정 및 결과</div>
+        <div class="card-source">IBM, 2011 / Agile Elephant, 2015</div>
+    </div>
+    
+</div>
+
+<style>
+.block-card-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--card-count, 3), 1fr);
+    gap: var(--spacing-inner);
+    height: 100%;
+}
+.card {
+    background: var(--color-bg);
+    border: var(--border-width) solid var(--color-border);
+    border-top: var(--accent-border) solid var(--color-accent);
+    border-radius: var(--radius);
+    padding: var(--spacing-inner);
+    display: flex;
+    flex-direction: column;
+}
+.card-icon {
+    font-size: 1.5rem;
+    margin-bottom: var(--spacing-small);
+}
+.card-title {
+    font-size: var(--font-subtitle);
+    font-weight: var(--weight-bold);
+    color: var(--color-primary);
+    margin-bottom: 4px;
+}
+.card-category {
+    font-size: var(--font-small);
+    font-weight: var(--weight-medium);
+    color: var(--color-accent);
+    background: #dbeafe;
+    padding: 2px 8px;
+    border-radius: 12px;
+    display: inline-block;
+    margin-bottom: var(--spacing-small);
+    width: fit-content;
+}
+.card-description {
+    font-size: var(--font-body);
+    color: var(--color-text);
+    line-height: var(--line-height-ko);
+    flex: 1;
+}
+.card-source {
+    font-size: var(--font-small);
+    color: var(--color-text-light);
+    font-style: italic;
+    margin-top: var(--spacing-small);
+    border-top: var(--border-width) solid var(--color-border);
+    padding-top: var(--spacing-small);
+}
+</style>
+    </div>
+    
+    <div class="area-footer">
+        <!-- 결론 바 블록: 하단 핵심 한 줄 -->
+<div class="block-conclusion">
+    <div class="conclusion-label">핵심 요약</div>
+    <div class="conclusion-text">BIM은 건설산업의 디지털전환(DX)을 수행하는 과정에서 가장 기초가 되는 일부분이다</div>
+</div>
+
+<style>
+.block-conclusion {
+    background: var(--color-primary);
+    color: white;
+    padding: var(--spacing-inner) var(--spacing-block);
+    border-radius: var(--radius);
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 4px;
+}
+.conclusion-label {
+    font-size: var(--font-caption);
+    color: var(--color-text-light);
+    font-weight: var(--weight-medium);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+.conclusion-text {
+    font-size: var(--font-subtitle);
+    font-weight: var(--weight-bold);
+    line-height: var(--line-height-ko);
+}
+</style>
+    </div>
+    
+</div>
+
+</body>
+</html>