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-bim-auto.html
+++ b/design_agent/docs/test-bim-auto.html
@@ -0,0 +1,806 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8">
+<title>건설정보모델링(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' 'topic1' 'topic2' 'images' 'mountain' 'compare' 'table' 'circle' 'cards';
+    grid-template-columns: 1fr;
+    grid-template-rows: 500px auto auto 354px auto auto auto auto auto;
+}
+
+.slide-1 .area-header {
+    grid-area: header;
+}
+
+.slide-1 .area-topic1 {
+    grid-area: topic1;
+}
+
+.slide-1 .area-topic2 {
+    grid-area: topic2;
+}
+
+.slide-1 .area-images {
+    grid-area: images;
+}
+
+.slide-1 .area-compare {
+    grid-area: compare;
+}
+
+.slide-1 .area-table {
+    grid-area: table;
+}
+
+.slide-1 .area-circle {
+    grid-area: circle;
+}
+
+.slide-1 .area-cards {
+    grid-area: cards;
+}
+
+
+
+/* 다중 페이지: 페이지 간 간격 */
+.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;">건설정보모델링(BIM)</div>
+    
+
+    
+    <div class="area-header">
+        <!-- 섹션 타이틀: 배경 헤더 위 영문+한글 타이틀 오버레이 -->
+<!--
+  📋 section-title
+  ─────────────────
+  용도: 자세히보기 페이지 상단, 배경 이미지 위에 타이틀 표시
+  슬롯: title_ko (필수), title_en (선택), breadcrumb (선택), bg_image (선택)
+  Figma 원본: 공통 > section_title + bg 컴포넌트
+-->
+<div class="block-section-title">
+  
+  <img class="st-bg" src="figma-assets/bg_header.png" alt="">
+  
+  
+  <div class="st-breadcrumb">건설산업에서의 디지털전환 › BIM</div>
+  
+  <div class="st-text">
+    <div class="st-en">Building Information Modeling</div>
+    <div class="st-ko">건설정보모델링(BIM)</div>
+  </div>
+</div>
+
+<style>
+.block-section-title {
+  position: relative;
+  width: 100%;
+  height: 500px;
+  overflow: hidden;
+}
+.st-bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 1;
+}
+.st-bg-default {
+  background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 50%, #4dc4ff 100%);
+}
+.st-breadcrumb {
+  position: absolute;
+  top: 18px;
+  left: 89px;
+  z-index: 5;
+  font-size: 13px;
+  color: rgba(255,255,255,0.7);
+}
+.st-text {
+  position: absolute;
+  bottom: 40px;
+  left: 89px;
+  z-index: 5;
+}
+.st-en {
+  font-size: 15px;
+  font-weight: var(--weight-normal, 400);
+  color: #ffffff;
+  opacity: 0.85;
+  margin-bottom: 4px;
+}
+.st-ko {
+  font-size: 35px;
+  font-weight: var(--weight-bold, 700);
+  color: #ffffff;
+  line-height: 1.3;
+}
+</style>
+    </div>
+    
+    <div class="area-topic1">
+        <!-- 꼭지 제목+설명: 좌측 질문/소제목 + 우측 설명 -->
+<!--
+  📋 topic-header
+  ─────────────────
+  용도: 각 꼭지의 시작부, 좌측에 파란 굵은 제목 + 우측에 본문 설명
+  슬롯: title (필수), description (필수)
+  비율: 좌 240px : 우 나머지
+  Figma 원본: sub_제목,내용 (742x68~78)
+-->
+<div class="block-topic-header">
+  <div class="th-title">단순 BIM의 적용이 D/X가 아닙니다</div>
+  <div class="th-desc">BIM은 건설산업의 디지털전환을 수행하는 과정에서 가장 기초가 되는 일부분임을 인지하는 것이 매우 중요합니다.</div>
+</div>
+
+<style>
+.block-topic-header {
+  display: flex;
+  gap: 20px;
+  padding: 12px 0;
+}
+.th-title {
+  width: 240px;
+  flex-shrink: 0;
+  font-size: 24px;
+  font-weight: var(--weight-bold, 700);
+  color: var(--color-accent-deep, #004cbe);
+  line-height: 1.4;
+  word-break: keep-all;
+}
+.th-desc {
+  flex: 1;
+  font-size: 16px;
+  font-weight: var(--weight-normal, 400);
+  color: var(--color-text, #000000);
+  line-height: 1.7;
+  word-break: keep-all;
+}
+</style>
+    </div>
+    
+    <div class="area-topic2">
+        <!-- 꼭지 제목+설명: 좌측 질문/소제목 + 우측 설명 -->
+<!--
+  📋 topic-header
+  ─────────────────
+  용도: 각 꼭지의 시작부, 좌측에 파란 굵은 제목 + 우측에 본문 설명
+  슬롯: title (필수), description (필수)
+  비율: 좌 240px : 우 나머지
+  Figma 원본: sub_제목,내용 (742x68~78)
+-->
+<div class="block-topic-header">
+  <div class="th-title">건설산업에서의 BIM</div>
+  <div class="th-desc">BIM은 설계, 시공, 유지관리 단계에서의 정보를 통합하고 협업을 촉진하여 인프라 건설 전 생애주기 과정의 효율성을 향상시킵니다.</div>
+</div>
+
+<style>
+.block-topic-header {
+  display: flex;
+  gap: 20px;
+  padding: 12px 0;
+}
+.th-title {
+  width: 240px;
+  flex-shrink: 0;
+  font-size: 24px;
+  font-weight: var(--weight-bold, 700);
+  color: var(--color-accent-deep, #004cbe);
+  line-height: 1.4;
+  word-break: keep-all;
+}
+.th-desc {
+  flex: 1;
+  font-size: 16px;
+  font-weight: var(--weight-normal, 400);
+  color: var(--color-text, #000000);
+  line-height: 1.7;
+  word-break: keep-all;
+}
+</style>
+    </div>
+    
+    <div class="area-images">
+        <!-- 이미지 행: 2~4장 이미지 나란히 -->
+<!--
+  📋 image-row
+  ─────────────────
+  용도: 시공 사진, 근거 자료, 현장 이미지 나란히 배치
+  슬롯: images[] 배열 (각 이미지에 src, alt, caption)
+  Figma 원본: 2-1_02 > image grid (460x354 x 2)
+-->
+<div class="block-image-row" style="--ir-count: 2">
+  
+  <div class="ir-item">
+    <img src="figma-assets/image_grid_left.png" alt="현장1">
+    
+  </div>
+  
+  <div class="ir-item">
+    <img src="figma-assets/image_grid_right.png" alt="현장2">
+    
+  </div>
+  
+</div>
+
+<style>
+.block-image-row {
+  display: grid;
+  grid-template-columns: repeat(var(--ir-count, 2), 1fr);
+  gap: 0;
+}
+.ir-item {
+  overflow: hidden;
+}
+.ir-item img {
+  width: 100%;
+  height: 354px;
+  object-fit: cover;
+  display: block;
+}
+.ir-caption {
+  font-size: 11px;
+  color: var(--color-text-light, #94a3b8);
+  text-align: center;
+  padding: 4px;
+}
+</style>
+    </div>
+    
+    <div class="area-compare">
+        <!-- 비교 박스: 이미지 배경 + 텍스트 오버레이 + VS 라벨 -->
+<!--
+  📋 compare-box
+  ─────────────────
+  용도: 2개 개념을 시각적으로 대비 (배경 이미지 + 텍스트 오버레이)
+  슬롯: left_label, left_sub, right_label, right_sub, left_bg (선택), right_bg (선택)
+  Figma 원본: 2-1_02 > Group 1171281597/1598
+-->
+<div class="block-compare-box">
+  <div class="cb-item">
+    
+    <div class="cb-bg cb-bg-default cb-bg-left"></div>
+    
+    <div class="cb-overlay">
+      <div class="cb-label">D/X</div>
+      <div class="cb-sub">디지털 기술을 활용한
+협업 프로세스</div>
+    </div>
+  </div>
+  <div class="cb-vs">VS</div>
+  <div class="cb-item">
+    
+    <div class="cb-bg cb-bg-default cb-bg-right"></div>
+    
+    <div class="cb-overlay">
+      <div class="cb-label">BIM</div>
+      <div class="cb-sub">시설물의 전 생애주기 동안
+정보의 생성 및 관리</div>
+    </div>
+  </div>
+</div>
+
+<style>
+.block-compare-box {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 0;
+}
+.cb-item {
+  position: relative;
+  width: 327px;
+  height: 116px;
+  border-radius: 10px;
+  overflow: hidden;
+}
+.cb-bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 1;
+}
+.cb-bg-default {
+  background: linear-gradient(135deg, #006aff 0%, #004cbe 100%);
+}
+.cb-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  text-align: center;
+}
+.cb-label {
+  font-size: 20px;
+  font-weight: var(--weight-bold, 700);
+}
+.cb-sub {
+  font-size: 12px;
+  opacity: 0.85;
+  margin-top: 4px;
+  line-height: 1.5;
+}
+.cb-vs {
+  background: #ffffff;
+  border-radius: 8px;
+  padding: 8px 18px;
+  font-size: 20px;
+  font-weight: var(--weight-bold, 700);
+  color: var(--color-accent-bright, #006eff);
+  flex-shrink: 0;
+}
+</style>
+    </div>
+    
+    <div class="area-table">
+        <!-- 비교 테이블 블록: 다항목 비교 -->
+<div class="block-table">
+    <table class="comparison-table">
+        <thead>
+            <tr>
+                
+                <th class="table-row-header">BIM</th>
+                
+                <th>VS</th>
+                
+                <th>D/X</th>
+                
+            </tr>
+        </thead>
+        <tbody>
+            
+            <tr>
+                
+                <td class="table-row-header">Only 3D</td>
+                
+                <td>BIM·D/X</td>
+                
+                <td>BIM ≪ D/X (ENG.+Management 포함)</td>
+                
+            </tr>
+            
+            <tr>
+                
+                <td class="table-row-header">모델 제작용 상용 S/W</td>
+                
+                <td>S/W</td>
+                
+                <td>제작 및 운영(상용+전용 40~80개)</td>
+                
+            </tr>
+            
+            <tr>
+                
+                <td class="table-row-header">기존 2D 설계방식 유지</td>
+                
+                <td>프로세스</td>
+                
+                <td>근본적 문제의식을 통한 개선</td>
+                
+            </tr>
+            
+            <tr>
+                
+                <td class="table-row-header">3D 모델 중심, 기존 성과품 유지</td>
+                
+                <td>성과물</td>
+                
+                <td>공학 정보 및 콘텐츠 연계에 집중</td>
+                
+            </tr>
+            
+            <tr>
+                
+                <td class="table-row-header">3D 모델에 의한 일반적 이해 향상</td>
+                
+                <td>활용</td>
+                
+                <td>설계/시공의 혁신(개념의 재정립)</td>
+                
+            </tr>
+            
+            <tr>
+                
+                <td class="table-row-header">(설계/시공/운영) 분야별 단절</td>
+                
+                <td>확장성</td>
+                
+                <td>전 생애주기 활용 시스템</td>
+                
+            </tr>
+            
+        </tbody>
+    </table>
+</div>
+
+<style>
+.block-table {
+    overflow: auto;
+    height: 100%;
+    display: flex;
+    align-items: flex-start;
+}
+.comparison-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--font-caption);
+    line-height: var(--line-height-ko);
+}
+.comparison-table th {
+    background: var(--color-primary);
+    color: white;
+    font-weight: var(--weight-bold);
+    padding: var(--spacing-small) var(--spacing-inner);
+    text-align: left;
+    font-size: var(--font-caption);
+}
+.comparison-table td {
+    padding: var(--spacing-small) var(--spacing-inner);
+    border-bottom: var(--border-width) solid var(--color-border);
+    font-size: var(--font-caption);
+    vertical-align: top;
+}
+.comparison-table tbody tr:nth-child(even) {
+    background: var(--color-bg-subtle);
+}
+.table-row-header {
+    font-weight: var(--weight-bold);
+    color: var(--color-primary);
+    white-space: nowrap;
+}
+</style>
+    </div>
+    
+    <div class="area-circle">
+        <!-- 원형 라벨: CSS 그라데이션 원 + 중앙 텍스트 -->
+<!--
+  📋 circle-label
+  ─────────────────
+  용도: 섹션 전환점, 핵심 키워드 강조, 시각적 구분자
+  슬롯: label (필수), sub_label (선택)
+  Figma 원본: 2-1_02 > Group 1171281590 (190x190)
+-->
+<div class="block-circle-label">
+  <div class="cl-outer">
+    <div class="cl-inner">
+      <div class="cl-text">단계별
+BIM의 활용</div>
+      
+    </div>
+  </div>
+</div>
+
+<style>
+.block-circle-label {
+  display: flex;
+  justify-content: center;
+  padding: 20px 0;
+}
+.cl-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;
+}
+.cl-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: #ffffff;
+  text-align: center;
+}
+.cl-text {
+  font-size: 20px;
+  font-weight: var(--weight-bold, 700);
+  line-height: 1.4;
+}
+.cl-sub {
+  font-size: 12px;
+  opacity: 0.8;
+  margin-top: 4px;
+}
+</style>
+    </div>
+    
+    <div class="area-cards">
+        <!-- 이미지 카드: 상단 이미지 + 하단 텍스트 (2~4열) -->
+<!--
+  📋 card-image
+  ─────────────────
+  용도: 단계별 설명, 카테고리별 설명 (이미지가 핵심인 카드)
+  슬롯: cards[] 배열 (각 카드에 image, title, title_en, items[])
+  Figma 원본: 2-1_02 > Group 1171281594 (카드 3열)
+-->
+<div class="block-card-image" style="--ci-count: 3">
+  
+  <div class="ci-card">
+    
+    <img class="ci-img" src="figma-assets/card_img_design.png" alt="설계단계">
+    
+    <div class="ci-body">
+      <div class="ci-title" style="color: #00aaff">설계단계</div>
+      <div class="ci-title-en">Design Stage</div>
+      <div class="ci-divider"></div>
+      <ul class="ci-list">
+        
+        <li>고도화된 BIM 구현</li>
+        
+        <li>최첨단 디지털트윈</li>
+        
+        <li>시뮬레이션 분석 & 성능평가</li>
+        
+        <li>지속가능한 인프라개발</li>
+        
+      </ul>
+      
+    </div>
+  </div>
+  
+  <div class="ci-card">
+    
+    <img class="ci-img" src="figma-assets/card_img_construction.png" alt="시공 단계">
+    
+    <div class="ci-body">
+      <div class="ci-title" style="color: #006aff">시공 단계</div>
+      <div class="ci-title-en">Construction Stage</div>
+      <div class="ci-divider"></div>
+      <ul class="ci-list">
+        
+        <li>향상된 건설 계획과 공정 순서 관리</li>
+        
+        <li>Big Room 등 환경을 통한 협업 및 조정</li>
+        
+        <li>정확한 수량산출서와 비용 산정</li>
+        
+      </ul>
+      
+    </div>
+  </div>
+  
+  <div class="ci-card">
+    
+    <img class="ci-img" src="figma-assets/card_img_maintenance.png" alt="유지관리 단계">
+    
+    <div class="ci-body">
+      <div class="ci-title" style="color: #004cbe">유지관리 단계</div>
+      <div class="ci-title-en">Maintenance Stage</div>
+      <div class="ci-divider"></div>
+      <ul class="ci-list">
+        
+        <li>자산 정보 및 데이터 관리</li>
+        
+        <li>예측 기반 유지보수 및 생애주기 분석</li>
+        
+        <li>효율적인 시설 운영 및 지속가능한 관리</li>
+        
+      </ul>
+      
+    </div>
+  </div>
+  
+</div>
+
+<style>
+.block-card-image {
+  display: grid;
+  grid-template-columns: repeat(var(--ci-count, 3), 1fr);
+  gap: 16px;
+}
+.ci-card {
+  background: var(--color-bg, #ffffff);
+  border-radius: var(--radius, 8px);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.ci-img {
+  width: 100%;
+  height: 160px;
+  object-fit: contain;
+  background: #f8f9fb;
+  padding: 10px;
+}
+.ci-body {
+  padding: 16px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.ci-title {
+  font-size: 14px;
+  font-weight: var(--weight-bold, 700);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  margin-bottom: 2px;
+}
+.ci-title-en {
+  font-size: 12px;
+  font-weight: var(--weight-normal, 400);
+  color: var(--color-text-secondary, #666);
+  margin-bottom: 10px;
+}
+.ci-divider {
+  width: 100%;
+  height: 1px;
+  background: #000;
+  margin-bottom: 10px;
+}
+.ci-list {
+  list-style: disc;
+  padding-left: 18px;
+  font-size: 13px;
+  line-height: 1.7;
+  color: var(--color-text, #000);
+  flex: 1;
+}
+.ci-list li {
+  margin-bottom: 3px;
+}
+.ci-source {
+  font-size: 11px;
+  color: var(--color-text-light, #94a3b8);
+  font-style: italic;
+  margin-top: 8px;
+  border-top: 1px solid var(--color-border, #e2e8f0);
+  padding-top: 6px;
+}
+</style>
+    </div>
+    
+</div>
+
+</body>
+</html>