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>
185 lines
12 KiB
HTML
185 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=1280">
|
||
<title>BIM 3역할 목표 카드 (Frame 1171281191)</title>
|
||
<!--
|
||
Frame: 100:132, 2601×1927 px
|
||
Scale: 1280 / 2601 = 0.49213
|
||
패턴: cards-3col-persona
|
||
MCP: Figma Desktop Dev Mode (2026-04-16)
|
||
텍스트 노드: 전수 반영
|
||
-->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700&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;
|
||
background: #fff; position: relative;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,.15);
|
||
}
|
||
.block { width: 1280px; position: relative; overflow: hidden; }
|
||
.inner {
|
||
width: 2600.998px; height: 1927.004px;
|
||
zoom: 0.492129; /* R19 */
|
||
position: relative;
|
||
}
|
||
|
||
/* 3 컬럼 배경 */
|
||
.col-bg { position: absolute; top: 82.3px; height: 1844.701px; }
|
||
.col-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
.col-bg--left { left: 43px; width: 833px; }
|
||
.col-bg--mid { left: 880px; width: 834px; }
|
||
.col-bg--right { left: 1718px; width: 833px; }
|
||
|
||
/* 컬러 오버레이 — CSS 단색 (MCP opacity-80) */
|
||
.col-overlay { position: absolute; top: 180.66px; opacity: 0.80; border-radius: 30px; }
|
||
.col-overlay--left { left: 114.01px; width: 691px; height: 1510.487px; background: #d6e7c4; }
|
||
.col-overlay--mid { left: 948.01px; width: 692px; height: 1053.828px; background: #e1efe1; }
|
||
.col-overlay--right { left: 1783.01px; width: 691px; height: 1128.098px; background: #d0c0ad; }
|
||
|
||
/* 하단 사진 (opacity 0.70, radius 50px) */
|
||
.bottom-photo {
|
||
position: absolute; top: 1150.18px;
|
||
width: 697px; height: 700.545px;
|
||
border-radius: 50px; opacity: 0.70; overflow: hidden;
|
||
}
|
||
.bottom-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
.bottom-photo--left { left: 108px; border-radius: 49px; }
|
||
.bottom-photo--mid { left: 948px; }
|
||
.bottom-photo--right { left: 1781px; }
|
||
|
||
/* 뱃지 */
|
||
.badge { position: absolute; top: 0; width: 396.024px; height: 397.468px; }
|
||
.badge img.badge-outer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
|
||
.badge img.badge-inner { position: absolute; width: 301.829px; height: 302.93px; object-fit: cover; }
|
||
.badge--owner { left: 265.38px; }
|
||
.badge--owner .badge-inner { left: 47.6px; top: 53.88px; width: 300.816px; height: 302.93px; }
|
||
.badge--builder { left: 1092.88px; }
|
||
.badge--builder .badge-inner { left: 46.59px; top: 51.84px; width: 301.829px; height: 301.913px; }
|
||
.badge--designer { left: 1945.7px; }
|
||
.badge--designer .badge-inner { left: 47.6px; top: 59.98px; width: 300.816px; height: 302.93px; }
|
||
|
||
/* 뱃지 라벨 */
|
||
.badge-label {
|
||
position: absolute;
|
||
width: 179.274px; font-weight: 700;
|
||
text-align: center; letter-spacing: -1.3px;
|
||
display: flex; flex-direction: column; justify-content: flex-start;
|
||
}
|
||
.badge-label .ln1 { font-size: 65px; line-height: 1; }
|
||
.badge-label .ln2 { font-size: 50px; line-height: 1.2; }
|
||
.badge-label--owner { left: 374.76px; top: 191.7px; height: 130.474px; color: #285b4a; }
|
||
.badge-label--builder { left: 1202.27px; top: 191.7px; height: 130.474px; color: #445a2f; }
|
||
.badge-label--designer { left: 2054.08px; top: 191.7px; width: 179.274px; height: 136.496px; color: #743002; }
|
||
|
||
/* 불릿 리스트 (R13: marker+text flex pair) */
|
||
.bullet-list {
|
||
position: absolute;
|
||
display: flex; flex-direction: column;
|
||
justify-content: space-between;
|
||
font-family: 'Noto Sans KR', sans-serif;
|
||
font-weight: 500; font-size: 40px; color: #000;
|
||
}
|
||
.bullet-row { display: flex; align-items: flex-start; --lh: 85px; }
|
||
.bullet-row.compact { --lh: 50px; }
|
||
.bullet-icon {
|
||
flex: none; width: 32.411px; height: 32.529px;
|
||
margin-top: calc(var(--lh) / 2 - 16.265px);
|
||
margin-right: var(--icon-gap, 11px);
|
||
}
|
||
.bullet-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
.bullet-text { flex: 1; line-height: var(--lh); white-space: normal; word-break: keep-all; }
|
||
|
||
.body--owner { left: 127.63px; top: 421.58px; width: 686.97px; height: 720px; --icon-gap: 11.14px; }
|
||
.body--builder { left: 961.20px; top: 417.52px; width: 667.90px; height: 720px; --icon-gap: 11.18px; }
|
||
.body--designer { left: 1794.78px; top: 417.52px; width: 711.93px; height: 720px; --icon-gap: 14.82px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="slide">
|
||
<div class="block">
|
||
<div class="inner">
|
||
|
||
<!-- 3 컬럼 배경 -->
|
||
<div class="col-bg col-bg--left"><img src="assets/4a17cd1dddaba8a220b706df3ec052d2bfde4f47.png" alt=""></div>
|
||
<div class="col-bg col-bg--mid"><img src="assets/4a17cd1dddaba8a220b706df3ec052d2bfde4f47.png" alt=""></div>
|
||
<div class="col-bg col-bg--right"><img src="assets/4a17cd1dddaba8a220b706df3ec052d2bfde4f47.png" alt=""></div>
|
||
|
||
<!-- 컬러 오버레이 — CSS -->
|
||
<div class="col-overlay col-overlay--left"></div>
|
||
<div class="col-overlay col-overlay--mid"></div>
|
||
<div class="col-overlay col-overlay--right"></div>
|
||
|
||
<!-- 하단 사진 좌 -->
|
||
<div class="bottom-photo bottom-photo--left"><img src="assets/d2c070f200af83f563976b6b0f309d38321d204d.png" alt=""></div>
|
||
|
||
<!-- 뱃지 3개 -->
|
||
<div class="badge badge--owner">
|
||
<img class="badge-outer" src="assets/77f319979c880da34ff3d423fcd97827f636c01e.png" alt="">
|
||
<img class="badge-inner" src="assets/e64c967dd00302bfbef6cfbcbb4f7a4db5d9d96c.png" alt="">
|
||
</div>
|
||
<div class="badge badge--builder">
|
||
<img class="badge-outer" src="assets/1550ec755fa7922dcfc1c90135a570d6b9df82cc.png" alt="">
|
||
<img class="badge-inner" src="assets/85beaf9dfc17b7ed4620729a086ba22143606517.png" alt="">
|
||
</div>
|
||
<div class="badge badge--designer">
|
||
<img class="badge-outer" src="assets/9ac089fa9c5106b6b26d47727003641bb56ba4b0.png" alt="">
|
||
<img class="badge-inner" src="assets/4b534ccf4e945fbe7436a0d8d96a6deffcfe5cef.png" alt="">
|
||
</div>
|
||
|
||
<!-- 뱃지 라벨 -->
|
||
<div class="badge-label badge-label--owner"><span class="ln1">발주자</span><span class="ln2">목표</span></div>
|
||
<div class="badge-label badge-label--builder"><span class="ln1">시공자</span><span class="ln2">목표</span></div>
|
||
<div class="badge-label badge-label--designer"><span class="ln1">설계자</span><span class="ln2">목표</span></div>
|
||
|
||
<!-- 발주자 불릿 -->
|
||
<div class="bullet-list body--owner">
|
||
<div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">민원, 재 작업 등의 예방 및 최소화</span></div>
|
||
<div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">직관화로 품질 향상 및 안정성 제고</span></div>
|
||
<div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text" style="letter-spacing:-1.5px;">수행공정의 쉬운이해로 관리 편의성 증진</span></div>
|
||
<div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">실무자와 발주자간의 소통 오류 최소화</span></div>
|
||
<div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">행정 자동화와 최소화로 생산성 향상</span></div>
|
||
<div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">건설정보의 통합관리로 활용성 강화</span></div>
|
||
<div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text" style="letter-spacing:-3.5px;">전 생애주기에 걸친 효율적 디지털 자산관리</span></div>
|
||
</div>
|
||
|
||
<!-- 시공자 불릿 -->
|
||
<div class="bullet-list body--builder">
|
||
<div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text" style="letter-spacing:-1.5px;">시공 오류예방 및 공사 Risk 최소화</span></div>
|
||
<div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">시각화로 안전성 제고 및 품질 향상</span></div>
|
||
<div class="bullet-row compact"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">중간태, 완성태 측량을 통한<br>시‧공간적 관리 편리성 향상</span></div>
|
||
<div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">건설 관계자들 간의 의사소통 강화</span></div>
|
||
<div class="bullet-row compact"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">Model을 활용한 시공상세도 등의<br>관련도서 작성 용이</span></div>
|
||
<div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">System 구축을 통한 행정 간소화</span></div>
|
||
<div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">기술개발을 통한 생산성 향상</span></div>
|
||
</div>
|
||
|
||
<!-- 설계자 불릿 -->
|
||
<div class="bullet-list body--designer">
|
||
<div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">직관적 시각화로 원활한 소통</span></div>
|
||
<div class="bullet-row compact"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">3D 모델 활용으로 오류 최소화 및<br>Claim 예방</span></div>
|
||
<div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">발주자와의 상호 신뢰 증진</span></div>
|
||
<div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">정보물 생산으로 부가가치 창출</span></div>
|
||
<div class="bullet-row"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">고부가가치 창출산업으로 전환</span></div>
|
||
<div class="bullet-row compact"><span class="bullet-icon"><img src="assets/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span><span class="bullet-text">프로젝트 정보의 일관성 유지 및<br>관리를 통한 오류 최소화</span></div>
|
||
</div>
|
||
|
||
<!-- 하단 사진 중/우 -->
|
||
<div class="bottom-photo bottom-photo--mid"><img src="assets/2a6a58e7bf7a645b5ede65115feb2890ccc414d1.png" alt=""></div>
|
||
<div class="bottom-photo bottom-photo--right"><img src="assets/39113493f6e3ae76d766e86e293b0f0dcbf55d91.png" alt=""></div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|