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>
314 lines
11 KiB
HTML
314 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=1280">
|
||
<title>BIM 수행실정 (Frame 1171281193)</title>
|
||
<!--
|
||
Frame: 45:18, 2226×1766 px
|
||
Scale: 1280 / 2226 = 0.575022 → 1280×1015 px
|
||
Pattern: quadrant-2x2-issues
|
||
-->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;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;
|
||
padding: 20px;
|
||
}
|
||
.slide {
|
||
width: 1280px;
|
||
height: 1015px;
|
||
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: 1015px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.inner {
|
||
position: absolute;
|
||
left: 0; top: 0;
|
||
width: 2226px;
|
||
height: 1766px;
|
||
transform: scale(0.575022);
|
||
transform-origin: top left;
|
||
}
|
||
|
||
/* ─── 카드 배경 (4 cards) ─── CSS gradient로 전환
|
||
픽셀 분석: 수직 gradient #f2f2f2 (top) → #ffffff (bottom), 단색에 가까움
|
||
border-radius: 50px (Figma) */
|
||
.card-bg {
|
||
position: absolute;
|
||
width: 1080px;
|
||
height: 270.183px;
|
||
background: linear-gradient(180deg, #f2f2f2 0%, #ffffff 100%);
|
||
}
|
||
|
||
/* 상단 (rounded top corners) */
|
||
.card-bg.tl { left: 5px; top: 0; border-radius: 50px 50px 0 0; }
|
||
.card-bg.tr { left: 1142px; top: 0; border-radius: 50px 50px 0 0; }
|
||
|
||
/* 하단 (gradient 반전 + rounded bottom corners) */
|
||
.card-bg.bl { left: 5px; top: 1495.69px; border-radius: 0 0 50px 50px; background: linear-gradient(0deg, #f2f2f2 0%, #ffffff 100%); }
|
||
.card-bg.br { left: 1146px; top: 1495.69px; border-radius: 0 0 50px 50px; background: linear-gradient(0deg, #f2f2f2 0%, #ffffff 100%); }
|
||
|
||
/* ─── Header ribbons (4 카테고리) ─── CSS gradient로 전환
|
||
SVG gradient_math.py 계산 결과:
|
||
TL/BL: linear-gradient(270deg, rgba(165,161,150,0.5) -26.87%, #39321E 73.13%)
|
||
TR/BR: linear-gradient(270deg, rgba(41,107,85,0.5) 0%, #032118 100%)
|
||
border-radius: 50px (SVG path r=50)
|
||
*/
|
||
.header-ribbon {
|
||
position: absolute;
|
||
width: 1080px;
|
||
height: 119px;
|
||
border-radius: 50px;
|
||
}
|
||
.header-ribbon .text {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-weight: 900;
|
||
font-size: 60px;
|
||
color: #ffffff;
|
||
text-shadow: 0 0 4px #322c1e;
|
||
z-index: 2;
|
||
}
|
||
|
||
/* TL/BL: warm gradient (올리브→갈색) */
|
||
.header-ribbon.tl {
|
||
left: 5px; top: 0;
|
||
background: linear-gradient(270deg, rgba(165,161,150,0.5) -26.87%, #39321E 73.13%);
|
||
}
|
||
.header-ribbon.bl {
|
||
left: 5px; top: 1646.86px;
|
||
background: linear-gradient(270deg, rgba(165,161,150,0.5) -26.87%, #39321E 73.13%);
|
||
}
|
||
/* TR/BR: teal gradient (청록→진녹) — 방향 반전 (원본 SVG rotate 180) → 90deg */
|
||
.header-ribbon.tr {
|
||
left: 1142px; top: 0;
|
||
background: linear-gradient(90deg, rgba(41,107,85,0.5) 0%, #032118 100%);
|
||
}
|
||
.header-ribbon.br {
|
||
left: 1146px; top: 1646.99px;
|
||
background: linear-gradient(90deg, rgba(41,107,85,0.5) 0%, #032118 100%);
|
||
}
|
||
|
||
/* ─── 가운데 원 (인용구 배경) ─── */
|
||
.center-quote {
|
||
position: absolute;
|
||
left: 809.01px;
|
||
top: 581.87px;
|
||
width: 644.99px;
|
||
height: 584.43px;
|
||
}
|
||
.center-quote img {
|
||
width: 100%; height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
.center-quote .text {
|
||
position: absolute;
|
||
/* center: (1132.46, 880.59) - (552.41/2, 220.93/2) → (856.25, 770.13) - quote 좌상단 */
|
||
left: 47.24px; top: 188.26px; /* 856.25-809.01, 770.13-581.87 */
|
||
width: 552.41px;
|
||
height: 220.93px;
|
||
font-weight: 700;
|
||
font-size: 55px;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
line-height: normal;
|
||
}
|
||
|
||
/* ─── 빨간 헤드라인 (Figma에서 모두 한 줄) ─── */
|
||
.red-h {
|
||
position: absolute;
|
||
font-weight: 700;
|
||
font-size: 55px;
|
||
line-height: 65px;
|
||
color: #ff0000;
|
||
white-space: nowrap; /* Figma 원본: 모두 single line */
|
||
}
|
||
.red-h.right {
|
||
/* translate-x-full → text-right at left=2225 */
|
||
right: 1px; /* (2226 - 2225) */
|
||
text-align: right;
|
||
}
|
||
|
||
/* ─── 본문 (검정 bullet) ─── */
|
||
.body-text {
|
||
position: absolute;
|
||
font-weight: 400;
|
||
font-size: 42px;
|
||
line-height: 60px;
|
||
color: #000000;
|
||
word-break: keep-all; /* 한글: 단어 단위 줄바꿈 */
|
||
}
|
||
.body-text ul { list-style: disc; margin: 0; padding-left: 63px; }
|
||
.body-text ul li { word-break: keep-all; }
|
||
.body-text.right {
|
||
right: 21px; /* 2226 - 2205 */
|
||
text-align: right;
|
||
}
|
||
.body-text.right ul { list-style-position: inside; padding-left: 0; }
|
||
|
||
/* ─── 헤드라인/본문 위치 ─── */
|
||
.h-tl-1 { left: 12px; top: 151.22px; width: 771px; }
|
||
.b-tl-1 { left: 8px; top: 222.25px; width: 993px; height: 239.75px; }
|
||
|
||
.h-tr-1 { right: 1px; top: 151.22px; width: 771px; text-align: right; }
|
||
.b-tr-1 { right: 21px; top: 222.25px; width: 1058px; height: 299.69px; text-align: right; }
|
||
|
||
.h-tl-2 { left: 12px; top: 565.27px; width: 885px; }
|
||
.b-tl-2 { left: 8px; top: 645.49px; width: 870px; height: 239.75px; }
|
||
|
||
.h-tr-2 { right: 1px; top: 564.35px; width: 807px; text-align: right; }
|
||
.b-tr-2 { right: 21px; top: 635.35px; width: 915px; height: 119.88px; text-align: right; }
|
||
.b-tr-3 { right: 21px; top: 775.45px; width: 751px; height: 119.38px; text-align: right; }
|
||
|
||
.h-bl-1 { left: 12px; top: 957.17px; width: 657px; }
|
||
.b-bl-1 { left: 8px; top: 1035.56px; width: 972px; height: 179.81px; }
|
||
|
||
.h-br-1 { right: 1px; top: 957.17px; width: 539px; text-align: right; }
|
||
.b-br-1 { right: 21px; top: 1028.17px; width: 880px; height: 119.88px; text-align: right; }
|
||
.b-br-2 { right: 21px; top: 1154.20px; width: 1025px; height: 119.88px; text-align: right; }
|
||
|
||
.h-bl-2 { left: 12px; top: 1298.36px; width: 771px; }
|
||
.b-bl-2 { left: 0; top: 1367.52px; width: 1082px; height: 239.75px; }
|
||
|
||
.h-br-2 { right: 1px; top: 1312.18px; width: 820px; text-align: right; }
|
||
.b-br-3 { right: 21px; top: 1379.50px; width: 1074px; height: 239.75px; text-align: right; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="slide">
|
||
<div class="block">
|
||
<div class="inner">
|
||
|
||
<!-- 카드 배경 4개 -->
|
||
<!-- card-bg: CSS gradient 전환 -->
|
||
<div class="card-bg tl"></div>
|
||
<div class="card-bg tr"></div>
|
||
<div class="card-bg bl"></div>
|
||
<div class="card-bg br"></div>
|
||
|
||
<!-- 헤더 ribbons -->
|
||
<!-- ribbons: CSS gradient 전환 (SVG gradient_math.py 기반) -->
|
||
<div class="header-ribbon tl">
|
||
<div class="text">정책 집행</div>
|
||
</div>
|
||
<div class="header-ribbon tr">
|
||
<div class="text">수행 개념</div>
|
||
</div>
|
||
<div class="header-ribbon bl">
|
||
<div class="text">근본 취지의 이해부족</div>
|
||
</div>
|
||
<div class="header-ribbon br">
|
||
<div class="text">지속적 투자 의지 부재</div>
|
||
</div>
|
||
|
||
<!-- 가운데 원 (Rome wasn't Built in a day!) -->
|
||
<div class="center-quote">
|
||
<img src="assets/shared/922ee6f4bea1434652ffc08f962086052286b6c5.png" alt="">
|
||
<div class="text">Rome wasn't<br>Built in a day!</div>
|
||
</div>
|
||
|
||
<!-- ─── 좌상 (정책 집행) ─── -->
|
||
<p class="red-h h-tl-1">인정주의 정책 집행</p>
|
||
<div class="body-text b-tl-1">
|
||
<ul>
|
||
<li>수행능력이 없는 업체 선정 후 품질을 낮추어 시행하고 낮은 수준의 성과품을 실적으로 수용</li>
|
||
<li>모든 설계사가 할 수 있다는 전제하에 정책 시행</li>
|
||
<li>발주처의 책임회피를 위한 제도 운영</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<p class="red-h h-tl-2">적용효과도 사례도 없는 방침부터 남발</p>
|
||
<div class="body-text b-tl-2">
|
||
<ul>
|
||
<li>효과 검증도 없는 지침부터 만들고보는 현실</li>
|
||
<li>BIM/DX 적용효과를 판단할 사례 부재</li>
|
||
<li>대부분 홍보목적으로 포장되어 투자 대비 효과 없음</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- ─── 우상 (수행 개념) ─── -->
|
||
<p class="red-h h-tr-1">공학적 개념 정립 부재</p>
|
||
<div class="body-text right b-tr-1">
|
||
<ul>
|
||
<li>DX 개념과 BIM 기술의 차이점의 이해부족으로 전략적 접근방식과 기술적 도구 사이의 혼란만 가중</li>
|
||
<li>인프라시설의 DX의 기본은 단순 모델이 아닌 위치기반 3D 모델(BIM)을 활용한 과정(Process)의 혁신</li>
|
||
<li>기술적 도구인 3D 모델 제작S/W에 과도하게 의존</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<p class="red-h h-tr-2">'본업 기술력 확보' 우선의 개념 부재</p>
|
||
<div class="body-text right b-tr-2">
|
||
<ul>
|
||
<li>깊은 기반지식 바탕의 기술이 축적된 메뉴얼에 대한 중요성 및 필요성에 대한 이해 부족</li>
|
||
</ul>
|
||
</div>
|
||
<div class="body-text right b-tr-3">
|
||
<ul>
|
||
<li>자체 기술개발 없이 국내 발주처의 지침과 방침에만 의존한 낮은 기술력</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- ─── 좌하 (근본 취지의 이해부족) ─── -->
|
||
<p class="red-h h-bl-1">기술투자 없는 성과 창출 기대</p>
|
||
<div class="body-text b-bl-1">
|
||
<ul>
|
||
<li>이전의 CAD 도입·확장 시기처럼 상용화된 BIM S/W만 구입·구독하면 될거라는 안일한 생각</li>
|
||
<li>기술개발 노력없이 과거처럼 하면 된다는 착각</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<p class="red-h h-bl-2">엔지니어링 S/W에 대한 개념 부재</p>
|
||
<div class="body-text b-bl-2">
|
||
<ul>
|
||
<li>다양한 엔지니어링 S/W의 특성에 대한 깊은 이해없이 단기 비용절감에 치우쳐 범용 S/W 선택</li>
|
||
<li>대형 Global S/W 회사에 과도한 의존과 이에 예속되는 방침 남발로 전용S/W 소멸</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- ─── 우하 (지속적 투자 의지 부재) ─── -->
|
||
<p class="red-h h-br-1">근본적인 역할은 회피</p>
|
||
<div class="body-text right b-br-1">
|
||
<ul>
|
||
<li>엔지니어의 근본적인 역할인 과정의 혁신과 결과물의 변화에 대한 고민 부재</li>
|
||
</ul>
|
||
</div>
|
||
<div class="body-text right b-br-2">
|
||
<ul>
|
||
<li>기술자가 직접 3D 모델을 만들고 수정하며 설계를 수행해야하는데 정작 모델제작은 외주처리</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<p class="red-h h-br-2">과거의 타성에 머무르고 있는 업계</p>
|
||
<div class="body-text right b-br-3">
|
||
<ul>
|
||
<li>설계/감리/시공 임직원들의 디지털무지와 전략적 무지</li>
|
||
<li>S/W 판매업체의 기능적 사용법을 BIM 교육으로 착각</li>
|
||
<li>교육을 통한 인재양성보다는 당장 실무활용이 가능한 타사의 인력을 빼오기에 집중</li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|