kyeongmin
51548fdc41
figma_to_html_agent/: - Figma MCP 기반 블록 추출 에이전트 (CLAUDE.md, PLAN.md, PROCESS.md 등) - block-tests/: Figma→HTML 변환 결과물 (bim-3roles-cards 등) - templates_staging/: Jinja2 템플릿 + meta.yaml + example.yaml - figma-analysis/, figma-assets/: Figma 분석 데이터 + 에셋 - scripts/: gradient_math.py 등 유틸리티 설정: - .mcp.json: Figma MCP 서버 연결 설정 - .claude/settings.json: Claude Code 프로젝트 설정 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
369 lines
19 KiB
HTML
369 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=1280">
|
||
<title>BIM 3역할 목표 카드 (Frame 1171281191)</title>
|
||
<!--
|
||
============================================================
|
||
Figma → HTML 수학적 변환 (bottom-up, Pure CSS)
|
||
============================================================
|
||
원본 Frame: 2600.998 × 1927.004 px (node 45:16, Frame 1171281191)
|
||
Scale factor S = 1280 / 2600.998 = 0.49213
|
||
블록 높이 = 1927.004 × S ≈ 948.5 px
|
||
|
||
⚠️ 본 프레임은 16:9 (720) 보다 높음. 1:1 변환 단계는 슬라이드를 1280×949 로 만들어
|
||
원본을 그대로 보존. design_agent 본체 이전 시 컨텐츠 재배치 필요.
|
||
|
||
구현 전략: CSS transform: scale(S) 균일 축소
|
||
→ .inner 컨테이너는 Figma 원본 좌표(2601 × 1927) 그대로
|
||
→ 모든 위치/크기/폰트는 Figma 원본 px
|
||
|
||
플래튼: bim-3roles-cards_flat.md
|
||
============================================================
|
||
-->
|
||
<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;
|
||
padding: 20px;
|
||
}
|
||
|
||
/* 1280×949 (16:9 초과 — 본 프레임 전용) */
|
||
.slide {
|
||
width: 1280px;
|
||
height: 948.5px;
|
||
background: #ffffff;
|
||
position: relative;
|
||
display: flex; align-items: center; justify-content: center;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,.15);
|
||
}
|
||
|
||
.block {
|
||
width: 1280px;
|
||
height: 948.5px;
|
||
background: #ffffff;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.inner {
|
||
position: absolute;
|
||
left: 0; top: 0;
|
||
width: 2600.998px;
|
||
height: 1927.004px;
|
||
transform: scale(0.492129);
|
||
transform-origin: top left;
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────
|
||
레이어 1 — 3 컬럼 배경 (image 2977 × 3, same src)
|
||
각 컬럼 833/834 wide, 1844.7 tall, top 82.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; }
|
||
|
||
/* ─────────────────────────────────────────────────────────
|
||
레이어 2 — 컬러 오버레이 (CSS 단색 + opacity 0.80)
|
||
Figma MCP 확인: opacity-80, 각 컬럼 다른 색상
|
||
픽셀 분석: left=#d6e7c4, mid=#e1efe1, right=#d0c0ad
|
||
border-radius 추정: ~30px (이미지 모서리 anti-alias 패턴)
|
||
───────────────────────────────────────────────────────── */
|
||
.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; }
|
||
|
||
/* ─────────────────────────────────────────────────────────
|
||
레이어 3 — 하단 사진 카드 3개 (둥근 모서리, opacity 0.70)
|
||
───────────────────────────────────────────────────────── */
|
||
.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; }
|
||
|
||
/* ─────────────────────────────────────────────────────────
|
||
레이어 4 — 상단 원형 뱃지 3개 (outer + inner + 2줄 텍스트)
|
||
각 뱃지: 396.024 × 397.468, top 0
|
||
───────────────────────────────────────────────────────── */
|
||
.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; display: block;
|
||
}
|
||
.badge img.badge-inner {
|
||
position: absolute;
|
||
width: 301.829px; height: 302.93px;
|
||
object-fit: cover; display: block;
|
||
}
|
||
|
||
.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; }
|
||
|
||
/* 뱃지 라벨 (2줄: 큰 글씨 65px / 작은 글씨 50px) */
|
||
.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; }
|
||
|
||
/* 발주자: center x = 464.4 (badge_left + 199), top 191.7 */
|
||
.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; }
|
||
/* 설계자 (label width 179.274) — translate-x-1/2 left=2143.71 → left = 2054.07 */
|
||
.badge-label--designer { left: 2054.08px; top: 191.7px; width: 179.274px; height: 136.496px; color: #743002; }
|
||
.badge-label--designer .ln1 { line-height: 1.2; }
|
||
|
||
/* ─────────────────────────────────────────────────────────
|
||
레이어 5 — 본문 텍스트 3 컬럼 (font 40 medium)
|
||
───────────────────────────────────────────────────────── */
|
||
/* ─────────────────────────────────────────────────────────
|
||
본문 bullet 리스트 — 시맨틱: 커스텀 marker가 있는 list
|
||
각 .bullet-list 가 column, .bullet-row 가 list item.
|
||
.bullet-icon 은 marker (장식), .bullet-text 는 본문.
|
||
|
||
수학 (CSS 변수로 자동 도출):
|
||
icon_margin_top = lh/2 − icon_h/2 = lh/2 − 16.265
|
||
→ 아이콘 vertical center를 텍스트 첫 줄 center에 align
|
||
icon_margin_right = text_left − icon_left − icon_w (Figma값)
|
||
───────────────────────────────────────────────────────── */
|
||
.bullet-list {
|
||
position: absolute;
|
||
display: flex;
|
||
flex-direction: column;
|
||
/* 핵심: 모든 컬럼 동일 top/bottom. 페어들이 컨테이너 안에서 균등 분포.
|
||
같은 height 기준으로 페어 간 spacing이 컬럼별로 다름 (적은 아이템 = 더 넓은 spacing) */
|
||
justify-content: space-between;
|
||
font-family: 'Noto Sans KR', sans-serif;
|
||
font-weight: 500;
|
||
font-size: 40px;
|
||
color: #000000;
|
||
/* Per-column 인라인: width, height, --icon-gap */
|
||
}
|
||
.bullet-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
--lh: 85px; /* 기본 line-height — 모든 single-line row 균일 */
|
||
/* fixed height 없음. row 높이는 내용으로 결정 (1줄 = lh, 2줄 wrap = 2×lh).
|
||
wrap 되어도 다음 row가 자동 시프트 → overlap 없음 */
|
||
}
|
||
.bullet-row.compact {
|
||
--lh: 50px; /* 2-line item: 더 타이트한 lh, 자연 wrap으로 2줄 */
|
||
}
|
||
.bullet-icon {
|
||
flex: none;
|
||
width: 32.411px;
|
||
height: 32.529px;
|
||
/* 수학: 아이콘 center를 첫 줄 center에 align */
|
||
margin-top: calc(var(--lh) / 2 - 16.265px);
|
||
/* 수학: 컬럼별 Figma gap (text_left − icon_left − icon_w) */
|
||
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);
|
||
/* wrap 허용: 텍스트가 컬럼 너비를 초과하면 자연 줄바꿈 */
|
||
white-space: normal;
|
||
word-break: keep-all; /* 한글: 단어 단위 줄바꿈 */
|
||
}
|
||
|
||
.body--owner { left: 171.18px; top: 421.58px; width: 643.423px; height: 750.343px; }
|
||
.body--builder { left: 1004.79px; top: 417.52px; width: 624.306px; height: 650.611px; }
|
||
.body--designer { left: 1842.01px; top: 417.52px; width: 664.695px; height: 750.343px; }
|
||
|
||
/* (체크박스는 페어 .bullet-icon으로 통합. standalone 클래스 제거) */
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="slide">
|
||
<div class="block">
|
||
<div class="inner">
|
||
|
||
<!-- 레이어 1: 3 컬럼 배경 (image 2977 × 3) -->
|
||
<div class="col-bg col-bg--left"><img src="assets/shared/4a17cd1dddaba8a220b706df3ec052d2bfde4f47.png" alt=""></div>
|
||
<div class="col-bg col-bg--mid"><img src="assets/shared/4a17cd1dddaba8a220b706df3ec052d2bfde4f47.png" alt=""></div>
|
||
<div class="col-bg col-bg--right"><img src="assets/shared/4a17cd1dddaba8a220b706df3ec052d2bfde4f47.png" alt=""></div>
|
||
|
||
<!-- 레이어 2: 컬러 오버레이 — 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>
|
||
|
||
<!-- 레이어 3: 하단 사진 카드 (좌하 — image 3574) -->
|
||
<div class="bottom-photo bottom-photo--left"><img src="assets/shared/d2c070f200af83f563976b6b0f309d38321d204d.png" alt=""></div>
|
||
|
||
<!-- 레이어 4: 상단 원형 뱃지 3개 -->
|
||
<div class="badge badge--owner">
|
||
<img class="badge-outer" src="assets/shared/77f319979c880da34ff3d423fcd97827f636c01e.png" alt="">
|
||
<img class="badge-inner" src="assets/shared/e64c967dd00302bfbef6cfbcbb4f7a4db5d9d96c.png" alt="">
|
||
</div>
|
||
<div class="badge badge--builder">
|
||
<img class="badge-outer" src="assets/shared/1550ec755fa7922dcfc1c90135a570d6b9df82cc.png" alt="">
|
||
<img class="badge-inner" src="assets/shared/85beaf9dfc17b7ed4620729a086ba22143606517.png" alt="">
|
||
</div>
|
||
<div class="badge badge--designer">
|
||
<img class="badge-outer" src="assets/shared/9ac089fa9c5106b6b26d47727003641bb56ba4b0.png" alt="">
|
||
<img class="badge-inner" src="assets/shared/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>
|
||
|
||
<!--
|
||
레이어 5: 본문 페어 (체크박스 + 텍스트) — flex 구조
|
||
템플릿화 준비: 각 row는 add/remove 가능, 텍스트 길이가 row 높이 결정
|
||
row의 height가 다음 row까지의 간격을 결정 (Figma 체크박스 y 차이 그대로)
|
||
-->
|
||
|
||
<!--
|
||
모든 row에 fixed height 없음. 자연 flex stacking.
|
||
single-line: lh 85 → row 85 tall (균일)
|
||
compact: lh 50 + 자연 wrap → row N×50 tall (텍스트 길이 결정)
|
||
wrap이 일어나도 next row가 자동으로 밀림 → overlap 없음
|
||
|
||
Letter-spacing은 Figma에서 wrap 방지를 위한 디자인 의도 (-0.8/-1.6 등)
|
||
→ 측정값 기반으로 약간 더 강하게 적용 (Chrome Noto Sans KR 너비 차이 보정)
|
||
-->
|
||
|
||
<!-- 발주자: list_left 127.63, list_w 686.97, icon_gap 11.14
|
||
top/height: 모든 컬럼 동일 (top 421.58, height 720) → bottom 1141.58 -->
|
||
<div class="bullet-list" style="left:127.63px;top:421.58px;width:686.97px;height:720px;--icon-gap:11.14px;">
|
||
<div class="bullet-row">
|
||
<span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
|
||
<span class="bullet-text">민원, 재 작업 등의 예방 및 최소화</span>
|
||
</div>
|
||
<div class="bullet-row">
|
||
<span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
|
||
<span class="bullet-text">직관화로 품질 향상 및 안정성 제고</span>
|
||
</div>
|
||
<div class="bullet-row">
|
||
<span class="bullet-icon"><img src="assets/shared/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/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
|
||
<span class="bullet-text">실무자와 발주자간의 소통 오류 최소화</span>
|
||
</div>
|
||
<div class="bullet-row">
|
||
<span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
|
||
<span class="bullet-text">행정 자동화와 최소화로 생산성 향상</span>
|
||
</div>
|
||
<div class="bullet-row">
|
||
<span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
|
||
<span class="bullet-text">건설정보의 통합관리로 활용성 강화</span>
|
||
</div>
|
||
<div class="bullet-row">
|
||
<span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
|
||
<span class="bullet-text" style="letter-spacing:-3.5px;">전 생애주기에 걸친 효율적 디지털 자산관리</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 시공자: list_left 961.20, list_w 667.90, icon_gap 11.18 (top/height 동일) -->
|
||
<div class="bullet-list" style="left:961.20px;top:421.58px;width:667.90px;height:720px;--icon-gap:11.18px;">
|
||
<div class="bullet-row">
|
||
<span class="bullet-icon"><img src="assets/shared/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/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
|
||
<span class="bullet-text">시각화로 안전성 제고 및 품질 향상</span>
|
||
</div>
|
||
<div class="bullet-row compact">
|
||
<span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
|
||
<span class="bullet-text">중간태, 완성태 측량을 통한<br>시‧공간적 관리 편리성 향상</span>
|
||
</div>
|
||
<div class="bullet-row">
|
||
<span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
|
||
<span class="bullet-text">건설 관계자들 간의 의사소통 강화</span>
|
||
</div>
|
||
<div class="bullet-row compact">
|
||
<span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
|
||
<span class="bullet-text">Model을 활용한 시공상세도 등의<br>관련도서 작성 용이</span>
|
||
</div>
|
||
<div class="bullet-row">
|
||
<span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
|
||
<span class="bullet-text">System 구축을 통한 행정 간소화</span>
|
||
</div>
|
||
<div class="bullet-row">
|
||
<span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
|
||
<span class="bullet-text">기술개발을 통한 생산성 향상</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 설계자: list_left 1794.78, list_w 711.93, icon_gap 14.82 (top/height 동일) -->
|
||
<div class="bullet-list" style="left:1794.78px;top:421.58px;width:711.93px;height:720px;--icon-gap:14.82px;">
|
||
<div class="bullet-row">
|
||
<span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
|
||
<span class="bullet-text">직관적 시각화로 원활한 소통</span>
|
||
</div>
|
||
<div class="bullet-row compact">
|
||
<span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
|
||
<span class="bullet-text">3D 모델 활용으로 오류 최소화 및<br>Claim 예방</span>
|
||
</div>
|
||
<div class="bullet-row">
|
||
<span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
|
||
<span class="bullet-text">발주자와의 상호 신뢰 증진</span>
|
||
</div>
|
||
<div class="bullet-row">
|
||
<span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
|
||
<span class="bullet-text">정보물 생산으로 부가가치 창출</span>
|
||
</div>
|
||
<div class="bullet-row">
|
||
<span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
|
||
<span class="bullet-text">고부가가치 창출산업으로 전환</span>
|
||
</div>
|
||
<div class="bullet-row compact">
|
||
<span class="bullet-icon"><img src="assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" alt=""></span>
|
||
<span class="bullet-text">프로젝트 정보의 일관성 유지 및<br>관리를 통한 오류 최소화</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 체크박스는 페어 내부 .bullet-icon으로 통합됨 (이전 standalone 21개 제거) -->
|
||
|
||
<!-- 하단 사진 (중/우) — 레이어 순서상 마지막 -->
|
||
<div class="bottom-photo bottom-photo--mid"><img src="assets/shared/2a6a58e7bf7a645b5ede65115feb2890ccc414d1.png" alt=""></div>
|
||
<div class="bottom-photo bottom-photo--right"><img src="assets/shared/39113493f6e3ae76d766e86e293b0f0dcbf55d91.png" alt=""></div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|