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>
This commit is contained in:
222
04. design_agent/docs/test-layered-v2.html
Normal file
222
04. design_agent/docs/test-layered-v2.html
Normal file
@@ -0,0 +1,222 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>DX와 BIM의 개념적 구분과 재정립</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; }
|
||||
body { font-family: 'Pretendard Variable', sans-serif; background: #f0f4f8; display: flex; justify-content: center; padding: 20px; }
|
||||
|
||||
.slide {
|
||||
width: 1280px;
|
||||
height: 720px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ═══ Layer 1: 배경 텍스처 ═══ */
|
||||
.bg { position: absolute; inset: 0; z-index: 1; }
|
||||
.bg img { width: 100%; height: 100%; object-fit: cover; }
|
||||
|
||||
/* ═══ Layer 2: 연결선 (SVG) ═══ */
|
||||
.lines-layer {
|
||||
position: absolute; inset: 0; z-index: 2;
|
||||
}
|
||||
|
||||
/* ═══ Layer 3: 원 (각각 개별) ═══ */
|
||||
.node {
|
||||
position: absolute; z-index: 5;
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
}
|
||||
.node-circle {
|
||||
width: 90px; height: 90px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
border: 3px solid #d0dce8;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 2rem;
|
||||
}
|
||||
.node-label {
|
||||
margin-top: 8px; text-align: center;
|
||||
}
|
||||
.node-label .title {
|
||||
font-size: 1rem; font-weight: 800; color: #1e293b;
|
||||
}
|
||||
.node-label .desc {
|
||||
font-size: 0.72rem; color: #64748b; line-height: 1.5; margin-top: 3px;
|
||||
}
|
||||
.node-label .highlight {
|
||||
color: #2563eb; font-weight: 700;
|
||||
}
|
||||
|
||||
/* 중앙 큰 원 */
|
||||
.center-node {
|
||||
position: absolute; z-index: 5;
|
||||
left: 530px; top: 390px;
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
}
|
||||
.center-circle {
|
||||
width: 160px; height: 160px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #e8f4fd 100%);
|
||||
border: 4px solid #2563eb;
|
||||
box-shadow: 0 0 40px rgba(37, 99, 235, 0.3), 0 0 80px rgba(37, 99, 235, 0.1);
|
||||
display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center;
|
||||
}
|
||||
.center-circle .main-text {
|
||||
font-size: 1.2rem; font-weight: 900; color: #1e293b; text-align: center; line-height: 1.4;
|
||||
}
|
||||
.center-circle .sub-text {
|
||||
font-size: 0.7rem; color: #64748b; margin-top: 4px;
|
||||
}
|
||||
|
||||
/* ═══ Layer 4: 제목 ═══ */
|
||||
.slide-title {
|
||||
position: absolute; top: 18px; left: 30px; z-index: 10;
|
||||
font-size: 1.5rem; font-weight: 900; color: #1e293b;
|
||||
border-bottom: 3px solid #2563eb; padding-bottom: 6px;
|
||||
}
|
||||
|
||||
/* ═══ Layer 5: 하단 좌우 박스 ═══ */
|
||||
.bottom-box {
|
||||
position: absolute; z-index: 10; bottom: 45px;
|
||||
background: rgba(255,255,255,0.85);
|
||||
border: 1px solid #d0dce8;
|
||||
border-radius: 25px;
|
||||
padding: 10px 24px;
|
||||
text-align: center;
|
||||
}
|
||||
.bottom-left { left: 40px; }
|
||||
.bottom-right { right: 40px; }
|
||||
.bottom-box .box-label {
|
||||
font-size: 0.65rem; color: #94a3b8; font-weight: 500;
|
||||
}
|
||||
.bottom-box .box-text {
|
||||
font-size: 0.9rem; font-weight: 700; color: #1e293b; line-height: 1.5;
|
||||
}
|
||||
.bottom-box .arrow {
|
||||
font-size: 1.2rem; color: #2563eb; font-weight: 900;
|
||||
}
|
||||
.bottom-left-wrap, .bottom-right-wrap {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
}
|
||||
|
||||
/* ═══ Layer 6: 결론 바 ═══ */
|
||||
.conclusion {
|
||||
position: absolute; bottom: 0; left: 0; right: 0; z-index: 10;
|
||||
background: #1e293b;
|
||||
color: white; text-align: center;
|
||||
padding: 10px 40px;
|
||||
font-size: 0.95rem; font-weight: 700;
|
||||
}
|
||||
|
||||
/* ═══ 5개 노드 위치 ═══ */
|
||||
.node-1 { left: 50px; top: 170px; width: 130px; }
|
||||
.node-2 { left: 250px; top: 80px; width: 140px; }
|
||||
.node-3 { left: 510px; top: 40px; width: 130px; }
|
||||
.node-4 { left: 770px; top: 80px; width: 150px; }
|
||||
.node-5 { left: 1000px; top: 170px; width: 140px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="slide">
|
||||
|
||||
<!-- Layer 1: 배경 텍스처만 -->
|
||||
<div class="bg">
|
||||
<img src="bg-texture-only.png" alt="">
|
||||
</div>
|
||||
|
||||
<!-- Layer 2: 연결선 SVG -->
|
||||
<svg class="lines-layer" viewBox="0 0 1280 720" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- 5개 원에서 중앙 원으로 곡선 -->
|
||||
<path d="M 115,260 Q 300,400 610,470" stroke="#b0c4de" stroke-width="1.5" fill="none" opacity="0.5"/>
|
||||
<path d="M 320,170 Q 420,350 610,470" stroke="#b0c4de" stroke-width="1.5" fill="none" opacity="0.5"/>
|
||||
<path d="M 575,130 Q 590,300 610,470" stroke="#b0c4de" stroke-width="1.5" fill="none" opacity="0.5"/>
|
||||
<path d="M 845,170 Q 750,350 610,470" stroke="#b0c4de" stroke-width="1.5" fill="none" opacity="0.5"/>
|
||||
<path d="M 1070,260 Q 850,400 610,470" stroke="#b0c4de" stroke-width="1.5" fill="none" opacity="0.5"/>
|
||||
</svg>
|
||||
|
||||
<!-- Layer 3: 슬라이드 제목 -->
|
||||
<div class="slide-title">DX와 BIM의 개념적 구분과 재정립</div>
|
||||
|
||||
<!-- Layer 4: 상단 5개 노드 (각각 원 + 아이콘 + 텍스트) -->
|
||||
<div class="node node-1">
|
||||
<div class="node-circle">📋</div>
|
||||
<div class="node-label">
|
||||
<div class="title">용어 혼용</div>
|
||||
<div class="desc">DX와 BIM 개념이<br><span class="highlight">정립되지 않은 채</span><br>혼용되어 사용</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="node node-2">
|
||||
<div class="node-circle">🏛️</div>
|
||||
<div class="node-label">
|
||||
<div class="title">정책 사례</div>
|
||||
<div class="desc">건설기술진흥 기본계획<br><span class="highlight">BIM 도입 = 디지털화</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="node node-3">
|
||||
<div class="node-circle">📐</div>
|
||||
<div class="node-label">
|
||||
<div class="title">BIM</div>
|
||||
<div class="desc">3D 모델 기반<br><span class="highlight">정보 통합·관리</span> 도구</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="node node-4">
|
||||
<div class="node-circle">🔄</div>
|
||||
<div class="node-label">
|
||||
<div class="title">DX</div>
|
||||
<div class="desc">디지털 기술 기반<br><span class="highlight">산업 패러다임 전환</span><br>업무방식·가치 구조 변혁</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="node node-5">
|
||||
<div class="node-circle">🔗</div>
|
||||
<div class="node-label">
|
||||
<div class="title">기술 융합</div>
|
||||
<div class="desc"><span class="highlight">GIS + BIM + DT</span><br>기술 융합으로만<br>DX 실현 가능</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Layer 5: 중앙 큰 원 -->
|
||||
<div class="center-node">
|
||||
<div class="center-circle">
|
||||
<div class="main-text">DX와 BIM의<br>관계</div>
|
||||
<div class="sub-text">개념적 구분과 재정립</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Layer 6: 하단 좌우 박스 -->
|
||||
<div class="bottom-box bottom-left">
|
||||
<div class="bottom-left-wrap">
|
||||
<span class="arrow">→</span>
|
||||
<div>
|
||||
<div class="box-label">상위 개념</div>
|
||||
<div class="box-text">산업 패러다임 전환<br>프로세스 혁신</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-box bottom-right">
|
||||
<div class="bottom-right-wrap">
|
||||
<div>
|
||||
<div class="box-label">핵심 기초 기술</div>
|
||||
<div class="box-text">건설정보 통합 관리<br>디지털 협업 인프라</div>
|
||||
</div>
|
||||
<span class="arrow">←</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Layer 7: 결론 바 -->
|
||||
<div class="conclusion">
|
||||
BIM은 건설산업의 디지털전환(DX)을 수행하는 과정에서 가장 기초가 되는 일부분이다
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user