kyeongmin
9fbe3ac90c
전체 401 files (397 추가 + 4 수정), 14304 insertions.
추가:
- figma_to_html_agent/blocks/ — Figma 변환 결과 (32 frame, ~79MB).
각 frame folder = {analysis.md, flat.md, texts.md, index.html, assets/,
_renders/, _render.py, RELATIONSHIPS.md / STATUS.md / classification.md
(일부 frame)}.
Phase Z 의 *figma source layer* — runtime 에서 직접 사용 X, contract /
partial / builder adapter (미래 axis A) 의 source.
- figma_to_html_agent/DISCUSSION-SUMMARY-20260411.md — 변환 설계 회의 기록.
- figma_to_html_agent/HARNESS.md — 변환 검증 harness.
- figma_to_html_agent/scripts/fetch_figma_screenshots.py — Figma 스크린샷 자동 수집.
수정:
- figma_to_html_agent/PROCESS-CONTROL.md / PROCESS.md / RULES.md —
변환 프로세스 / 룰 갱신 (R8/R9 lock 강화 등).
- figma_to_html_agent/blocks_index.md — 32 frame 인덱스 갱신.
Phase Z 영향 0 (figma_to_html_agent/blocks/ 가 V4 catalog +
templates/phase_z2/families adapter 의 source — runtime 에서 직접 import X).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
402 lines
14 KiB
HTML
402 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=1280">
|
||
<title>시공단계 BIM 모델과 정보 활용 구분 (Frame 1171281182)</title>
|
||
<!--
|
||
Frame: 182:2523, 1248 × 1066 px (Frame 1171281182)
|
||
Source: file 9S6LsQyO6zlRxtiqZccOUM, page 29:373
|
||
Scale: min(1280/1248, 720/1066) = 720/1066 = 0.67542 (height fit)
|
||
Block in slide: 843 × 720 px (centered horizontally)
|
||
패턴: cards-3-category-with-bim-process-diagram
|
||
-->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap" rel="stylesheet">
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: 'Noto Sans KR', sans-serif;
|
||
background: #e8ecf0;
|
||
display: flex; justify-content: center; align-items: center;
|
||
min-height: 100vh;
|
||
word-break: keep-all;
|
||
}
|
||
.slide {
|
||
width: 1280px; height: 720px;
|
||
background: #fff;
|
||
position: relative; overflow: hidden;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,.15);
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.block {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.inner {
|
||
width: 1248px; height: 1066px;
|
||
position: relative;
|
||
zoom: 0.67542;
|
||
}
|
||
|
||
/* ────────────────────────────────────────────────
|
||
① 헤더
|
||
──────────────────────────────────────────────── */
|
||
.title-row {
|
||
position: absolute;
|
||
left: 0; top: 0;
|
||
display: flex; align-items: center; gap: 25px;
|
||
}
|
||
.title-icon { flex: none; width: 50px; height: 61px; display: flex; align-items: center; justify-content: center; }
|
||
.title-icon img { width: 50px; height: 50px; object-fit: cover; display: block; }
|
||
.title-text {
|
||
flex: none;
|
||
font-family: 'Noto Sans KR', sans-serif;
|
||
font-weight: 700;
|
||
font-size: 50px;
|
||
line-height: 1;
|
||
white-space: nowrap;
|
||
text-shadow: 0 0 4px #322C1E;
|
||
/* gradient bg-clip-text: 첫 레이어 솔리드 검정 → 텍스트 검정 */
|
||
background-image: linear-gradient(90deg, rgb(0,0,0) 0%, rgb(0,0,0) 100%);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
}
|
||
|
||
/* ────────────────────────────────────────────────
|
||
② 상단 3 카테고리 카드
|
||
──────────────────────────────────────────────── */
|
||
.label-box {
|
||
position: absolute;
|
||
width: 335px; height: 124px;
|
||
background: rgba(50, 31, 9, 0.8);
|
||
border-top-right-radius: 20px;
|
||
border-bottom-right-radius: 20px;
|
||
filter: drop-shadow(0 4px 2px rgba(0,0,0,0.25));
|
||
display: flex; flex-direction: column;
|
||
align-items: center; justify-content: center;
|
||
padding: 9px 22px;
|
||
}
|
||
.label-box .row1 { display: block; white-space: nowrap; letter-spacing: -1px; }
|
||
.label-box .row1 .yellow { color: #FFE100; font-weight: 700; font-size: 45px; line-height: 45px; }
|
||
.label-box .row1 .white { color: #fff; font-weight: 700; font-size: 38px; line-height: 45px; }
|
||
.label-box .row2 { color: #fff; font-weight: 700; font-size: 38px; line-height: 45px; white-space: nowrap; letter-spacing: -1px; }
|
||
|
||
.label--model { left: 21px; top: 116px; }
|
||
.label--object { left: 19px; top: 263px; }
|
||
.label--position { left: 21px; top: 411px; }
|
||
|
||
.card-box {
|
||
position: absolute;
|
||
height: 124px;
|
||
width: 870px;
|
||
background: white;
|
||
border: 3px solid #A5BBB4;
|
||
border-top-right-radius: 20px;
|
||
border-bottom-right-radius: 20px;
|
||
}
|
||
.card--model { left: 378px; top: 116px; }
|
||
.card--object { left: 376px; top: 263px; }
|
||
.card--position { left: 378px; top: 411px; }
|
||
|
||
.card-decor {
|
||
position: absolute;
|
||
height: 119px;
|
||
border-bottom-left-radius: 17px;
|
||
border-top-left-radius: 17px;
|
||
overflow: hidden;
|
||
}
|
||
.card-decor img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
.decor--model { left: 981px; top: 119px; width: 264px; height: 118px; }
|
||
.decor--object { left: 983px; top: 265px; width: 260px; }
|
||
.decor--position { left: 981px; top: 413px; width: 265px; }
|
||
|
||
.body-list {
|
||
position: absolute;
|
||
font-family: 'Noto Sans KR', sans-serif;
|
||
font-weight: 700;
|
||
height: 77px;
|
||
list-style: disc outside;
|
||
padding-left: 50px;
|
||
text-align: justify;
|
||
letter-spacing: -2px;
|
||
text-shadow: 0 4px 4px rgba(0,0,0,0.25);
|
||
}
|
||
.body-list li { line-height: 1.2; }
|
||
.body-list .text { font-size: 40px; color: #000; }
|
||
.body-list .accent {
|
||
font-size: 45px;
|
||
color: #144838;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.body--model { left: 378px; top: 148px; width: 821px; }
|
||
.body--object { left: 376px; top: 295px; width: 857px; }
|
||
.body--position { left: 378px; top: 442px; width: 821px; }
|
||
|
||
/* ────────────────────────────────────────────────
|
||
③ 하단 BIM ↔ Process 다이어그램
|
||
──────────────────────────────────────────────── */
|
||
.diagram-container {
|
||
position: absolute;
|
||
left: 66px; top: 660px;
|
||
width: 1084px; height: 370px;
|
||
border-radius: 69px;
|
||
overflow: hidden;
|
||
}
|
||
.diagram-container img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
|
||
/* wave_bg crop A (좌측, 4억대 스케일) */
|
||
.wave-crop-a {
|
||
position: absolute;
|
||
left: 62px; top: 656px;
|
||
width: 425px; height: 374px;
|
||
overflow: hidden;
|
||
pointer-events: none;
|
||
}
|
||
.wave-crop-a img {
|
||
position: absolute;
|
||
left: 0; top: 0; height: 100%;
|
||
width: 708.65%;
|
||
max-width: none;
|
||
display: block;
|
||
}
|
||
|
||
/* wave_bg crop B (우측, 음수 left translate) */
|
||
.wave-crop-b {
|
||
position: absolute;
|
||
left: 475px; top: 656px;
|
||
width: 675px; height: 374px;
|
||
overflow: hidden;
|
||
pointer-events: none;
|
||
}
|
||
.wave-crop-b img {
|
||
position: absolute;
|
||
left: -442.52%; top: 0; height: 100%;
|
||
width: 542.52%;
|
||
max-width: none;
|
||
display: block;
|
||
}
|
||
|
||
/* 좌/우 원 BG (square) */
|
||
.circle-bg {
|
||
position: absolute;
|
||
width: 294px; height: 294px;
|
||
pointer-events: none;
|
||
}
|
||
.circle-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
.circle-bg--left { left: 164px; top: 707px; }
|
||
.circle-bg--right { left: 590px; top: 707px; }
|
||
|
||
/* 좌측 원 안 BIM 모델 콘텐츠 */
|
||
.circle-content--left {
|
||
position: absolute;
|
||
left: 167px; top: 656px;
|
||
width: 374px; height: 374px;
|
||
pointer-events: none;
|
||
}
|
||
.circle-content--left img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
|
||
/* 좌측 원 안 추가 장식 */
|
||
.left-inner-decor {
|
||
position: absolute;
|
||
left: 192.7px; top: 742.55px;
|
||
width: 306.794px; height: 215.139px;
|
||
pointer-events: none;
|
||
}
|
||
.left-inner-decor img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
|
||
/* "BIM 모델" 텍스트 */
|
||
.bim-label {
|
||
position: absolute;
|
||
left: 233.29px; top: 801px;
|
||
width: 256.413px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
padding: 10px;
|
||
}
|
||
.bim-label p {
|
||
font-family: 'Noto Sans KR', sans-serif;
|
||
font-weight: 700;
|
||
font-size: 45px;
|
||
line-height: 60px;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
text-shadow: 0 7px 4px rgba(0,0,0,0.5);
|
||
background-image: linear-gradient(to right, #276853 0%, #B65320 100%);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
margin: 0;
|
||
}
|
||
|
||
/* 우측 원 안 콘텐츠 (페이퍼/문서) */
|
||
.circle-content--right {
|
||
position: absolute;
|
||
left: 671px; top: 656px;
|
||
width: 374px; height: 374px;
|
||
pointer-events: none;
|
||
}
|
||
.circle-content--right img { width: 100%; height: 100%; object-fit: cover; opacity: 0.95; display: block; }
|
||
|
||
/* 우측 추가 오버레이 */
|
||
.right-overlay {
|
||
position: absolute;
|
||
left: 820px; top: 771px;
|
||
width: 152px; height: 180px;
|
||
overflow: hidden;
|
||
pointer-events: none;
|
||
}
|
||
.right-overlay img {
|
||
position: absolute;
|
||
left: -3.68%; top: -4.32%;
|
||
width: 111.76%; height: 114.22%;
|
||
opacity: 0.7;
|
||
max-width: none;
|
||
display: block;
|
||
}
|
||
|
||
/* "공사 / Process 연계" 텍스트 */
|
||
.process-label {
|
||
position: absolute;
|
||
left: 720px; top: 717px;
|
||
width: 256.413px; height: 214.651px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
padding: 10px;
|
||
}
|
||
.process-label .gradient-text {
|
||
font-family: 'Noto Sans KR', sans-serif;
|
||
font-weight: 700;
|
||
font-size: 45px;
|
||
text-align: center;
|
||
text-shadow: 0 7px 4px rgba(0,0,0,0.5);
|
||
background-image: linear-gradient(to right, #276853 0%, #B65320 100%);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
white-space: nowrap;
|
||
}
|
||
.process-label .gradient-text p { line-height: 60px; margin: 0; }
|
||
|
||
/* 중앙 X-shape (2개 — 원본 + scale-y-100 mirror) */
|
||
.x-shape {
|
||
position: absolute;
|
||
width: 250.45px; height: 199.821px;
|
||
pointer-events: none;
|
||
}
|
||
.x-shape img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
.x-shape--top { left: 475px; top: 743.05px; }
|
||
.x-shape--bottom { left: 475px; top: 741px; transform: scaleY(-1); transform-origin: center; }
|
||
|
||
/* 작은 dot 장식 (5개) */
|
||
.dot {
|
||
position: absolute;
|
||
pointer-events: none;
|
||
}
|
||
.dot img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
.dot--a { left: 190px; top: 717px; width: 41px; height: 41px; }
|
||
.dot--b { left: 650.03px; top: 980px; width: 41.037px; height: 41px; }
|
||
.dot--c { left: 822px; top: 733px; width: 20.018px; height: 20px; }
|
||
.dot--d { left: 446px; top: 850px; width: 20.018px; height: 20px; }
|
||
.dot--e { left: 246px; top: 995px; width: 20.018px; height: 20px; }
|
||
|
||
/* 보조 장식 element 122 (2개) */
|
||
.elem122 {
|
||
position: absolute;
|
||
width: 122px; height: 122px;
|
||
pointer-events: none;
|
||
}
|
||
.elem122 img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
.elem122--left { left: 195px; top: 944px; }
|
||
.elem122--right { left: 772px; top: 682px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="slide">
|
||
<div class="block">
|
||
<div class="inner">
|
||
|
||
<!-- ① 헤더 -->
|
||
<div class="title-row">
|
||
<div class="title-icon"><img src="assets/title_icon.png" alt=""></div>
|
||
<p class="title-text">시공단계 BIM 모델과 정보 활용 구분</p>
|
||
</div>
|
||
|
||
<!-- ② Section 1 — Model-based -->
|
||
<div class="card-box card--model"></div>
|
||
<div class="card-decor decor--model"><img src="assets/card_decor.png" alt=""></div>
|
||
<div class="label-box label--model">
|
||
<div class="row1"><span class="yellow">모델</span><span class="white">기반</span></div>
|
||
<div class="row2">(Model-based)</div>
|
||
</div>
|
||
<ul class="body-list body--model">
|
||
<li><span class="text">최종 목적물의 전체 또는 부분</span><span class="accent"> 3D 형상정보 </span><span class="text">활용</span></li>
|
||
</ul>
|
||
|
||
<!-- ② Section 2 — Object-based -->
|
||
<div class="card-box card--object"></div>
|
||
<div class="card-decor decor--object"><img src="assets/card_decor.png" alt=""></div>
|
||
<div class="label-box label--object">
|
||
<div class="row1"><span class="yellow">객체</span><span class="white">기반</span></div>
|
||
<div class="row2">(Object-based)</div>
|
||
</div>
|
||
<ul class="body-list body--object">
|
||
<li><span class="text">Model의 개별 </span><span class="accent">객체</span><span class="text">에 정의된</span><span class="accent"> 건설정보 </span><span class="text">활용</span></li>
|
||
</ul>
|
||
|
||
<!-- ② Section 3 — Position-based -->
|
||
<div class="card-box card--position"></div>
|
||
<div class="card-decor decor--position"><img src="assets/card_decor.png" alt=""></div>
|
||
<div class="label-box label--position">
|
||
<div class="row1"><span class="yellow">위치</span><span class="white">기반</span></div>
|
||
<div class="row2">(Position-based)</div>
|
||
</div>
|
||
<ul class="body-list body--position">
|
||
<li><span class="text">공사 중 발생하는 데이터의 </span><span class="accent">위치정보</span><span class="text"> 활용</span></li>
|
||
</ul>
|
||
|
||
<!-- ③ 하단 다이어그램 -->
|
||
<div class="diagram-container"><img src="assets/container_bg.png" alt=""></div>
|
||
<div class="wave-crop-a"><img src="assets/wave_bg.png" alt=""></div>
|
||
<div class="wave-crop-b"><img src="assets/wave_bg.png" alt=""></div>
|
||
|
||
<!-- 좌측 BIM 모델 영역 -->
|
||
<div class="circle-bg circle-bg--left"><img src="assets/circle_bg.png" alt=""></div>
|
||
<div class="circle-content--left"><img src="assets/left_circle_content.png" alt=""></div>
|
||
<div class="left-inner-decor"><img src="assets/left_inner_decor.png" alt=""></div>
|
||
<div class="dot dot--a"><img src="assets/dot_small.png" alt=""></div>
|
||
<div class="dot dot--e"><img src="assets/dot_small.png" alt=""></div>
|
||
<div class="elem122 elem122--left"><img src="assets/element_122.png" alt=""></div>
|
||
<div class="bim-label"><p>BIM 모델</p></div>
|
||
|
||
<!-- 중앙 X-shape -->
|
||
<div class="x-shape x-shape--top"><img src="assets/x_shape_center.png" alt=""></div>
|
||
<div class="x-shape x-shape--bottom"><img src="assets/x_shape_center.png" alt=""></div>
|
||
<div class="dot dot--d"><img src="assets/dot_small.png" alt=""></div>
|
||
|
||
<!-- 우측 공사 Process 연계 영역 -->
|
||
<div class="circle-bg circle-bg--right"><img src="assets/circle_bg.png" alt=""></div>
|
||
<div class="circle-content--right"><img src="assets/right_circle_content.png" alt=""></div>
|
||
<div class="right-overlay"><img src="assets/right_overlay.png" alt=""></div>
|
||
<div class="dot dot--c"><img src="assets/dot_small.png" alt=""></div>
|
||
<div class="dot dot--b"><img src="assets/dot_small.png" alt=""></div>
|
||
<div class="elem122 elem122--right"><img src="assets/element_122.png" alt=""></div>
|
||
<div class="process-label">
|
||
<div class="gradient-text">
|
||
<p>공사</p>
|
||
<p>Process 연계</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|