kyeongmin
688ddbbb17
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>
207 lines
5.3 KiB
HTML
207 lines
5.3 KiB
HTML
<!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; }
|
|
|
|
.slide {
|
|
width: 1280px;
|
|
height: 720px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Layer 1: 배경 이미지 */
|
|
.bg-layer {
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
z-index: 1;
|
|
}
|
|
.bg-layer img {
|
|
width: 100%; height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* Layer 2: 슬라이드 제목 */
|
|
.title-layer {
|
|
position: absolute;
|
|
top: 15px; left: 30px;
|
|
z-index: 10;
|
|
font-size: 1.6rem;
|
|
font-weight: 900;
|
|
color: #1e293b;
|
|
border-bottom: 3px solid #2563eb;
|
|
padding-bottom: 6px;
|
|
}
|
|
|
|
/* Layer 3: 상단 5개 원 위 아이콘 + 텍스트 */
|
|
.circle-labels {
|
|
position: absolute;
|
|
z-index: 10;
|
|
text-align: center;
|
|
}
|
|
.circle-labels .icon {
|
|
font-size: 1.8rem;
|
|
margin-bottom: 2px;
|
|
}
|
|
.circle-labels .label {
|
|
font-size: 0.95rem;
|
|
font-weight: 800;
|
|
color: #1e293b;
|
|
line-height: 1.3;
|
|
}
|
|
.circle-labels .desc {
|
|
font-size: 0.7rem;
|
|
color: #64748b;
|
|
line-height: 1.4;
|
|
margin-top: 2px;
|
|
}
|
|
.circle-labels .highlight {
|
|
color: #2563eb;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* 각 원 위치 (배경 이미지의 원 위치에 맞춤) */
|
|
.circle-1 { top: 175px; left: 52px; width: 120px; }
|
|
.circle-2 { top: 95px; left: 245px; width: 120px; }
|
|
.circle-3 { top: 50px; left: 460px; width: 120px; }
|
|
.circle-4 { top: 95px; left: 680px; width: 120px; }
|
|
.circle-5 { top: 175px; left: 870px; width: 140px; }
|
|
|
|
/* Layer 4: 중앙 큰 원 텍스트 */
|
|
.center-label {
|
|
position: absolute;
|
|
top: 410px; left: 440px;
|
|
width: 200px;
|
|
z-index: 10;
|
|
text-align: center;
|
|
}
|
|
.center-label .main {
|
|
font-size: 1.3rem;
|
|
font-weight: 900;
|
|
color: #1e293b;
|
|
line-height: 1.4;
|
|
}
|
|
.center-label .sub {
|
|
font-size: 0.75rem;
|
|
color: #64748b;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* Layer 5: 좌우 하단 박스 텍스트 */
|
|
.bottom-box {
|
|
position: absolute;
|
|
bottom: 35px;
|
|
z-index: 10;
|
|
padding: 8px 20px;
|
|
text-align: center;
|
|
}
|
|
.bottom-left {
|
|
left: 30px;
|
|
width: 260px;
|
|
}
|
|
.bottom-right {
|
|
right: 30px;
|
|
width: 260px;
|
|
}
|
|
.bottom-box .box-title {
|
|
font-size: 0.7rem;
|
|
color: #64748b;
|
|
margin-bottom: 2px;
|
|
}
|
|
.bottom-box .box-content {
|
|
font-size: 0.85rem;
|
|
font-weight: 700;
|
|
color: #1e293b;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Layer 6: 하단 결론 바 */
|
|
.conclusion-bar {
|
|
position: absolute;
|
|
bottom: 0; left: 0; right: 0;
|
|
z-index: 10;
|
|
background: #1e293b;
|
|
color: white;
|
|
text-align: center;
|
|
padding: 10px 40px;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
letter-spacing: -0.3px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="slide">
|
|
|
|
<!-- Layer 1: AI 생성 배경 이미지 -->
|
|
<div class="bg-layer">
|
|
<img src="test-bg-layer.png" alt="background">
|
|
</div>
|
|
|
|
<!-- Layer 2: 슬라이드 제목 -->
|
|
<div class="title-layer">DX와 BIM의 개념적 구분과 재정립</div>
|
|
|
|
<!-- Layer 3: 상단 5개 원 위 텍스트 -->
|
|
<div class="circle-labels circle-1">
|
|
<div class="icon">📋</div>
|
|
<div class="label">용어 혼용</div>
|
|
<div class="desc">DX와 BIM 개념이<br>명확히 <span class="highlight">정립되지 않은 채</span><br>혼용되어 사용</div>
|
|
</div>
|
|
|
|
<div class="circle-labels circle-2">
|
|
<div class="icon">🏛️</div>
|
|
<div class="label">정책 사례</div>
|
|
<div class="desc">건설기술진흥 기본계획<br><span class="highlight">BIM 도입 = 디지털화</span><br>로 표현</div>
|
|
</div>
|
|
|
|
<div class="circle-labels circle-3">
|
|
<div class="icon">📐</div>
|
|
<div class="label">BIM</div>
|
|
<div class="desc">3D 모델 기반<br><span class="highlight">정보 통합·관리</span> 도구<br>핵심 인프라 기술</div>
|
|
</div>
|
|
|
|
<div class="circle-labels circle-4">
|
|
<div class="icon">🔄</div>
|
|
<div class="label">DX</div>
|
|
<div class="desc">디지털 기술 기반<br><span class="highlight">산업 패러다임 전환</span><br>업무방식·가치 구조 변혁</div>
|
|
</div>
|
|
|
|
<div class="circle-labels circle-5">
|
|
<div class="icon">🔗</div>
|
|
<div class="label">기술 융합</div>
|
|
<div class="desc"><span class="highlight">GIS + BIM + DT</span><br>기술 융합으로만<br>DX 실현 가능</div>
|
|
</div>
|
|
|
|
<!-- Layer 4: 중앙 큰 원 텍스트 -->
|
|
<div class="center-label">
|
|
<div class="main">DX와 BIM의<br>관계</div>
|
|
<div class="sub">개념적 구분과 재정립</div>
|
|
</div>
|
|
|
|
<!-- Layer 5: 좌우 하단 박스 -->
|
|
<div class="bottom-box bottom-left">
|
|
<div class="box-title">상위 개념</div>
|
|
<div class="box-content">산업 패러다임 전환<br>프로세스 혁신</div>
|
|
</div>
|
|
|
|
<div class="bottom-box bottom-right">
|
|
<div class="box-title">핵심 기초 기술</div>
|
|
<div class="box-content">건설정보 통합 관리<br>디지털 협업 인프라</div>
|
|
</div>
|
|
|
|
<!-- Layer 6: 결론 바 -->
|
|
<div class="conclusion-bar">
|
|
BIM은 건설산업의 디지털전환(DX)을 수행하는 과정에서 가장 기초가 되는 일부분이다
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|