kyeongmin
beb5fd0c61
- 10단계 변환 프로세스 (PROCESS.md) - 수학 공식 레퍼런스 (MATH.md, gradient_math.py) - CSS 보정 규칙 R1~R16 (RULES.md) - 작업 규율 7개 규칙 (PROCESS-CONTROL.md) - 8개 Figma 프레임 1:1 HTML 변환물 (block-tests/) - 8개 Jinja2 템플릿 staging (templates_staging/) - 변환 완료 도서관 + 디자인 인사이트 (blocks_index.md) - 사용법 가이드 (README.md) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
323 lines
14 KiB
HTML
323 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=1280">
|
||
<title>건설산업의 목표 (BIM의 목적) — 원형 다이어그램</title>
|
||
<!--
|
||
============================================================
|
||
Figma → HTML 수학적 변환 (bottom-up)
|
||
============================================================
|
||
원본 Frame: 2195.21 × 1195 px (node 45:14, Frame 1171281189)
|
||
타겟: 1280 × 720 px (16:9)
|
||
Scale S = 1280 / 2195.21 = 0.58309
|
||
스케일 후: 1280 × 696.8 px
|
||
|
||
leaf 노드: 48개 (타이틀 2 삭제 → 46개 렌더링)
|
||
"오른쪽 상단" 그룹 offset: (133, 77) → scaled (77.6, 44.9)
|
||
============================================================
|
||
-->
|
||
<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>
|
||
/* S = 0.58309 */
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
display: flex; justify-content: center; align-items: center;
|
||
min-height: 100vh; background: #f5f5f5;
|
||
font-family: 'Noto Sans KR', sans-serif;
|
||
}
|
||
.slide {
|
||
width: 1280px; height: 720px; background: #fff;
|
||
position: relative; display: flex; justify-content: center; align-items: center;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
|
||
}
|
||
/* 블록: 2195.21×1195 → 1280×697 */
|
||
.block {
|
||
width: 1280px; height: 697px;
|
||
background: #ffffff; /* 미리보기용 흰색 */
|
||
position: relative; overflow: hidden;
|
||
}
|
||
|
||
/* ============================================
|
||
배경 도형 (4개)
|
||
OX=133, OY=77 → scaled OX=77.6, OY=44.9
|
||
============================================ */
|
||
|
||
/* 17:1316 Rectangle 42333 — abs(415, 718) 763×351
|
||
grad(-90deg, transparent 14% → #D5AA89 84%) r=175.5 0 0 175.5
|
||
→ scaled (242, 419) 445×205, r=102 0 0 102 */
|
||
/* 배경 도형: gradient 각도 = 90 - Figma각도
|
||
border-radius는 PNG에서 확인한 방향 */
|
||
|
||
/* 래퍼 회전 방식:
|
||
- 래퍼: pre-rotation 위치/크기 + transform: rotate()
|
||
- 도형: Figma 값 그대로, 래퍼 채움 */
|
||
|
||
/* 42335: Figma grad=90° → CSS rotate(-90°) */
|
||
.wrap-42335 {
|
||
position: absolute;
|
||
left: 464.5px; top: 154.5px; width: 424px; height: 205px;
|
||
transform: rotate(-90deg);
|
||
}
|
||
.shape-42335 {
|
||
width: 100%; height: 100%;
|
||
border-radius: 102px 0 0 102px;
|
||
background: linear-gradient(90deg, rgba(217,162,104,1) 37%, rgba(220,103,14,0) 89%);
|
||
}
|
||
|
||
/* 42334: Figma grad=0° → 회전 없음 */
|
||
.wrap-42334 {
|
||
position: absolute;
|
||
left: 671px; top: 420px; width: 381px; height: 206px;
|
||
}
|
||
.shape-42334 {
|
||
width: 100%; height: 100%;
|
||
border-radius: 0 0 139px 139px;
|
||
background: linear-gradient(90deg, rgba(96,164,81,1) 0%, rgba(37,62,31,0) 79%);
|
||
}
|
||
|
||
/* 42333: Figma grad=-90° → CSS rotate(90°) */
|
||
.wrap-42333 {
|
||
position: absolute;
|
||
left: 362px; top: 299px; width: 205px; height: 445px;
|
||
transform: rotate(90deg);
|
||
}
|
||
.shape-42333 {
|
||
width: 100%; height: 100%;
|
||
border-radius: 102px 0 0 102px;
|
||
background: linear-gradient(90deg, rgba(115,115,115,0) 14%, rgba(213,170,137,1) 84%);
|
||
}
|
||
|
||
/* 17:1315 배경 이미지 — abs(272, 921) 1768×274
|
||
→ scaled (159, 537) 1031×160 */
|
||
.bg-image {
|
||
position: absolute;
|
||
left: 159px; top: 537px; width: 1031px; height: 160px;
|
||
overflow: hidden;
|
||
}
|
||
.bg-image img {
|
||
width: 100%; height: 100%; object-fit: cover;
|
||
}
|
||
|
||
/* ============================================
|
||
큰 원 공통 (3개)
|
||
outer: 350→204, inner: 280→163
|
||
============================================ */
|
||
.big-circle {
|
||
position: absolute; width: 204px; height: 204px;
|
||
border-radius: 50%;
|
||
mix-blend-mode: multiply; /* Figma blend mode — MCP 미제공, 사용자 확인 */
|
||
}
|
||
.big-circle-inner {
|
||
position: absolute; width: 163px; height: 163px;
|
||
border-radius: 50%;
|
||
border: 2.9px solid #FFF; /* 5×S */
|
||
box-shadow: 0 0 5.8px 0 rgba(0,0,0,1); /* 10×S */
|
||
}
|
||
.big-circle-text {
|
||
position: absolute;
|
||
font-weight: 700; font-size: 29.2px; /* 50×S */
|
||
line-height: 1; letter-spacing: -0.05em;
|
||
text-align: center; color: #FFF;
|
||
padding-bottom: 7px; /* descender 보정 */
|
||
}
|
||
|
||
/* 생산성 향상 — Group abs(827, 718) → scaled (482, 419) */
|
||
.circle-productivity { left: 482px; top: 419px; background: linear-gradient(219deg, #D5AA89 14%, #737373 100%); }
|
||
.circle-productivity-inner { left: 502px; top: 439px; background: linear-gradient(154deg, #897445 6%, #3E3523 62%); }
|
||
.circle-productivity-text { left: 507px; top: 491px; width: 153px; /* 262.92×S */ }
|
||
|
||
/* 안전과 품질 — Group abs(986, 444) → scaled (575, 259) */
|
||
.circle-safety { left: 575px; top: 259px; background: linear-gradient(145deg, #FDC69E 5%, #E0782C 50%); }
|
||
.circle-safety-inner { left: 595px; top: 279px; background: linear-gradient(145deg, #BC652B 5%, #A24200 50%); }
|
||
.circle-safety-text { left: 600px; top: 331px; width: 153px; text-shadow: 0 0 2.9px #CC5200; }
|
||
|
||
/* 소통과 신뢰 — Group abs(1142, 718) → scaled (666, 419) */
|
||
.circle-comm { left: 666px; top: 419px; background: linear-gradient(146deg, #FFF 3%, #253E1F 94%); }
|
||
.circle-comm-inner { left: 686px; top: 439px; background: linear-gradient(154deg, #296B55 6%, #123328 62%); }
|
||
.circle-comm-text { left: 692px; top: 487px; width: 153px; }
|
||
|
||
/* ============================================
|
||
작은 원 공통 (6개)
|
||
outer: 130.9→76, inner: 78.96→46
|
||
============================================ */
|
||
.sm-circle {
|
||
position: absolute; width: 76px; height: 76px;
|
||
border-radius: 50%;
|
||
mix-blend-mode: multiply;
|
||
}
|
||
.sm-circle-inner {
|
||
position: absolute; width: 46px; height: 46px;
|
||
border-radius: 50%;
|
||
border: 1.2px solid #FFF; /* 2×S */
|
||
box-shadow: 0 0 5.8px 0 rgba(0,0,0,1);
|
||
}
|
||
.sm-circle-text {
|
||
position: absolute;
|
||
font-weight: 700; font-size: 26.2px; /* 45×S */
|
||
line-height: 1.111; letter-spacing: -0.05em;
|
||
text-align: center; color: #FFF;
|
||
text-shadow: 0 0 2.9px #CC5200;
|
||
}
|
||
|
||
/* 速 — abs(688, 721) → (401, 420) */
|
||
.sm-speed { left: 401px; top: 420px; background: linear-gradient(219deg, #D5AA89 14%, #737373 100%); }
|
||
.sm-speed-inner { left: 416px; top: 435px; background: linear-gradient(154deg, #897445 6%, #3E3523 62%); }
|
||
.sm-speed-text { left: 411px; top: 445px; width: 57px; }
|
||
|
||
/* 利 — abs(688, 927) → (401, 540) */
|
||
.sm-profit { left: 401px; top: 540px; background: linear-gradient(219deg, #D5AA89 14%, #737373 100%); }
|
||
.sm-profit-inner { left: 416px; top: 555px; background: linear-gradient(154deg, #897445 6%, #3E3523 62%); }
|
||
.sm-profit-text { left: 411px; top: 565px; width: 57px; }
|
||
|
||
/* 安 — abs(992, 260) → (579, 152) */
|
||
.sm-safe { left: 579px; top: 152px; background: linear-gradient(146deg, #D9C868 3%, #DC670E 94%); }
|
||
.sm-safe-inner { left: 594px; top: 167px; background: linear-gradient(145deg, #BC652B 5%, #A24200 50%); }
|
||
.sm-safe-text { left: 588px; top: 176px; width: 57px; }
|
||
|
||
/* 質 — abs(1204, 260) → (702, 152) */
|
||
.sm-quality { left: 702px; top: 152px; background: linear-gradient(146deg, #D9C868 3%, #DC670E 94%); }
|
||
.sm-quality-inner { left: 717px; top: 167px; background: linear-gradient(145deg, #BC652B 5%, #A24200 50%); }
|
||
.sm-quality-text { left: 712px; top: 176px; width: 57px; }
|
||
|
||
/* 通 — abs(1505, 721) → (878, 420) */
|
||
.sm-connect { left: 878px; top: 420px; background: linear-gradient(146deg, #60A451 3%, #253E1F 94%); }
|
||
.sm-connect-inner { left: 893px; top: 435px; background: linear-gradient(154deg, #296B55 6%, #123328 62%); }
|
||
.sm-connect-text { left: 887px; top: 445px; width: 57px; }
|
||
|
||
/* 信 — abs(1505, 927) → (878, 540) */
|
||
.sm-trust { left: 878px; top: 540px; background: linear-gradient(146deg, #60A451 3%, #253E1F 94%); }
|
||
.sm-trust-inner { left: 893px; top: 555px; background: linear-gradient(154deg, #296B55 6%, #123328 62%); }
|
||
.sm-trust-text { left: 887px; top: 565px; width: 57px; }
|
||
|
||
/* 점선 타원 → SVG로 전환 (CSS 제거) */
|
||
|
||
/* ============================================
|
||
텍스트 그룹 (6×2 = 12개)
|
||
제목: 700 40px→23.3px, 설명: 500 30px→17.5px
|
||
descender 보정: padding-bottom 5px
|
||
(Noto Sans KR, 23.3px: half_leading = (1-1.448)/2 × 23.3 = -5.22 → pb:6)
|
||
(17.5px: half_leading = |(1.167-1.448)/2| × 17.5 = 2.46 → pb:3)
|
||
============================================ */
|
||
.txt-title {
|
||
position: absolute;
|
||
font-weight: 700; font-size: 23.3px; /* 40×S */
|
||
line-height: 2.375;
|
||
padding-bottom: 6px;
|
||
white-space: nowrap;
|
||
/* Figma에서는 1줄이지만 Chrome에서 글자 넓이 차이로 줄바꿈 발생 방지 */
|
||
}
|
||
.txt-desc {
|
||
position: absolute;
|
||
font-weight: 500; font-size: 17.5px; /* 30×S */
|
||
line-height: 1.167;
|
||
color: #525151;
|
||
padding-bottom: 3px;
|
||
}
|
||
|
||
/* 좌상: 안전성 제고 */
|
||
.txt-safe-t { left: 454px; top: 139px; width: 113px; color: #CC5200; text-align: right; }
|
||
.txt-safe-d { left: 271px; top: 184px; width: 296px; text-align: right; }
|
||
|
||
/* 우상: 품질 향상 */
|
||
.txt-qual-t { left: 797px; top: 139px; width: 92px; color: #CC5200; text-align: right; }
|
||
.txt-qual-d { left: 797px; top: 184px; width: 296px; text-align: left; }
|
||
|
||
/* 좌중: 신속ㆍ정확성 증진 */
|
||
.txt-fast-t { left: 78px; top: 405px; width: 310px; color: #604F32; text-align: right; }
|
||
.txt-fast-d { left: 108px; top: 457px; width: 279px; text-align: right; }
|
||
|
||
/* 우중: 소통ㆍ이해 원할 */
|
||
.txt-comm-t { left: 963px; top: 405px; width: 156px; color: #124133; text-align: left; }
|
||
.txt-comm-d { left: 963px; top: 454px; width: 250px; text-align: left; }
|
||
|
||
/* 좌하: 비용저감ㆍ부가가치 창출 */
|
||
.txt-cost-t { left: 127px; top: 525px; width: 260px; color: #604F32; text-align: right; }
|
||
.txt-cost-d { left: 137px; top: 567px; width: 250px; text-align: right; }
|
||
|
||
/* 우하: 신뢰ㆍ투명성 강화 */
|
||
.txt-trust-t { left: 963px; top: 526px; width: 177px; color: #124133; text-align: left; }
|
||
.txt-trust-d { left: 963px; top: 579px; width: 317px; text-align: left; }
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="slide">
|
||
<div class="block">
|
||
|
||
<!-- ===== Figma 레이어 순서 (뒤→앞) ===== -->
|
||
|
||
<!-- 1~4: 배경 도형 (래퍼 회전 방식) + 이미지 -->
|
||
<div class="wrap-42335"><div class="shape-42335"></div></div>
|
||
<div class="wrap-42334"><div class="shape-42334"></div></div>
|
||
<div class="bg-image"><img src="assets/bg_bottom_image.png" alt="bg"></div>
|
||
<div class="wrap-42333"><div class="shape-42333"></div></div>
|
||
|
||
<!-- 5~7: 큰 원 3개 -->
|
||
<div class="big-circle circle-productivity"></div>
|
||
<div class="big-circle-inner circle-productivity-inner"></div>
|
||
<div class="big-circle-text circle-productivity-text">생산성<br>향상</div>
|
||
|
||
<div class="big-circle circle-safety"></div>
|
||
<div class="big-circle-inner circle-safety-inner"></div>
|
||
<div class="big-circle-text circle-safety-text">안전과<br>품질</div>
|
||
|
||
<div class="big-circle circle-comm"></div>
|
||
<div class="big-circle-inner circle-comm-inner"></div>
|
||
<div class="big-circle-text circle-comm-text">소통과<br>신뢰</div>
|
||
|
||
<!-- 8~13: 텍스트 6그룹 -->
|
||
<div class="txt-title txt-trust-t">신뢰ㆍ투명성 강화</div>
|
||
<div class="txt-desc txt-trust-d">3D 모델을 통한 오류<br>최소화 및 Claim 예방</div>
|
||
<div class="txt-title txt-comm-t">소통ㆍ이해 원할</div>
|
||
<div class="txt-desc txt-comm-d">성과품, Solution을 통한<br>사용 편리성, 협업 및 의사소통 강화</div>
|
||
<div class="txt-title txt-fast-t">신속ㆍ정확성 증진</div>
|
||
<div class="txt-desc txt-fast-d">Analogue 기반 업무를<br>Digital화 하는 Process 혁신</div>
|
||
<div class="txt-title txt-cost-t">비용저감ㆍ부가가치 창출</div>
|
||
<div class="txt-desc txt-cost-d">건설비용 및 유지관리비 감소,<br>인력투입 최소화 등 생산성 향상</div>
|
||
<div class="txt-title txt-qual-t">품질 향상</div>
|
||
<div class="txt-desc txt-qual-d">Copy & Paste로 하향 평준화된<br>기존 성과물의 품질 향상</div>
|
||
<div class="txt-title txt-safe-t">안전성 제고</div>
|
||
<div class="txt-desc txt-safe-d">시설물의 요구성능의 만족,<br>건설중 및 운영중 안전확보</div>
|
||
|
||
<!-- 14~15: 커브 599, 597 -->
|
||
<img src="assets/ellipse_599.svg" style="position:absolute;left:617px;top:217px;width:122px;height:58px;">
|
||
<img src="assets/ellipse_597.svg" style="position:absolute;left:443px;top:459px;width:58px;height:122px;">
|
||
|
||
<!-- 16~17: 작은원 速, 利 -->
|
||
<div class="sm-circle sm-speed"></div>
|
||
<div class="sm-circle-inner sm-speed-inner"></div>
|
||
<div class="sm-circle-text sm-speed-text">速</div>
|
||
<div class="sm-circle sm-profit"></div>
|
||
<div class="sm-circle-inner sm-profit-inner"></div>
|
||
<div class="sm-circle-text sm-profit-text">利</div>
|
||
|
||
<!-- 18: 커브 600 (速/利 위에!) -->
|
||
<img src="assets/ellipse_600.svg" style="position:absolute;left:853px;top:459px;width:58px;height:122px;">
|
||
|
||
<!-- 19~22: 작은원 安, 質, 通, 信 -->
|
||
<div class="sm-circle sm-safe"></div>
|
||
<div class="sm-circle-inner sm-safe-inner"></div>
|
||
<div class="sm-circle-text sm-safe-text">安</div>
|
||
<div class="sm-circle sm-quality"></div>
|
||
<div class="sm-circle-inner sm-quality-inner"></div>
|
||
<div class="sm-circle-text sm-quality-text">質</div>
|
||
<div class="sm-circle sm-connect"></div>
|
||
<div class="sm-circle-inner sm-connect-inner"></div>
|
||
<div class="sm-circle-text sm-connect-text">通</div>
|
||
<div class="sm-circle sm-trust"></div>
|
||
<div class="sm-circle-inner sm-trust-inner"></div>
|
||
<div class="sm-circle-text sm-trust-text">信</div>
|
||
|
||
<!-- 텍스트: 우하 신뢰ㆍ투명성 -->
|
||
<div class="txt-title txt-trust-t">신뢰ㆍ투명성 강화</div>
|
||
<div class="txt-desc txt-trust-d">3D 모델을 통한 오류<br>최소화 및 Claim 예방</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|