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>
387 lines
15 KiB
HTML
387 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=1280">
|
||
<title>디지털 전환(DX)은 S/W가 필수다 (Frame 1171281198)</title>
|
||
<!--
|
||
Frame: 182:2766, 2734.634 × 910.775 px (Frame 1171281198)
|
||
Source: file 9S6LsQyO6zlRxtiqZccOUM, page 29:373
|
||
Scale: min(1280/2734.6, 720/910.8) = 1280/2734.6 = 0.46810 (width fit)
|
||
Block in slide: 1280 × 426 px
|
||
패턴: dx-banner-with-3perspective-cards
|
||
-->
|
||
<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 {
|
||
width: 1280px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.inner {
|
||
width: 2734.634px; height: 910.775px;
|
||
position: relative;
|
||
zoom: 0.46810;
|
||
}
|
||
|
||
/* ────────────────────────────────────────────────
|
||
① 상단 배너 — 가로 그라디언트 (녹 → 갈)
|
||
원본 3 PNG 들은 가장자리 alpha=0 (rounded corner) 이라 어떻게 합성해도 솔기 발생.
|
||
샘플링한 색상 stop 으로 CSS linear-gradient 로 재현 (R8: 디자인 의도 명확한 배경 허용).
|
||
──────────────────────────────────────────────── */
|
||
.header-bg-full {
|
||
position: absolute;
|
||
left: 0; top: 0;
|
||
width: 2735px; height: 199px;
|
||
background: linear-gradient(90deg,
|
||
rgb(15, 50, 30) 0%,
|
||
rgb(23, 62, 47) 5%,
|
||
rgb(29, 60, 45) 20%,
|
||
rgb(36, 59, 43) 30%,
|
||
rgb(41, 57, 41) 40%,
|
||
rgb(46, 56, 39) 50%,
|
||
rgb(51, 55, 38) 60%,
|
||
rgb(54, 54, 36) 70%,
|
||
rgb(57, 53, 35) 80%,
|
||
rgb(59, 52, 35) 90%,
|
||
rgb(60, 52, 34) 100%
|
||
);
|
||
}
|
||
|
||
.header-decor-l, .header-decor-r {
|
||
position: absolute;
|
||
width: 127.864px; height: 114.508px;
|
||
}
|
||
.header-decor-l { left: 30.94px; top: 37.51px; }
|
||
.header-decor-r { left: 2585.11px; top: 68.11px; transform: rotate(180deg); transform-origin: center; }
|
||
.header-decor-l img, .header-decor-r img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
|
||
/* ② 타이틀 텍스트 */
|
||
.title-text {
|
||
position: absolute;
|
||
/* center=(1369.38, 96.24), w=2730.503, h=190.518 */
|
||
left: 3.6px; /* 1369.38 - 2730.503/2 */
|
||
top: 0.98px; /* 96.24 - 190.518/2 */
|
||
width: 2730.503px;
|
||
height: 190.518px;
|
||
font-family: 'Noto Sans KR', sans-serif;
|
||
font-weight: 700;
|
||
font-size: 90px;
|
||
text-align: center;
|
||
display: flex; flex-direction: column; justify-content: center;
|
||
}
|
||
.title-text > p { margin: 0; line-height: 65px; }
|
||
.title-text .green { color: #90FA33; }
|
||
.title-text .white { color: #ffffff; }
|
||
|
||
/* ③ 본문 영역 BG */
|
||
.body-bg {
|
||
position: absolute;
|
||
left: 1.03px; top: 196.09px;
|
||
width: 2733.6px; height: 508.377px;
|
||
}
|
||
.body-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
|
||
.middle-overlay {
|
||
position: absolute;
|
||
left: 805.34px; top: 263.21px;
|
||
width: 1897.331px; height: 647.564px;
|
||
pointer-events: none;
|
||
}
|
||
.middle-overlay img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; display: block; }
|
||
|
||
.left-bg {
|
||
position: absolute;
|
||
left: 127.86px; top: 164.5px;
|
||
width: 888.858px; height: 719.625px;
|
||
pointer-events: none;
|
||
}
|
||
.left-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
|
||
.left-decor {
|
||
position: absolute;
|
||
left: 4.13px; top: 233.6px;
|
||
width: 639.318px; height: 612.027px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
pointer-events: none;
|
||
}
|
||
.left-decor-inner {
|
||
width: 612.027px; height: 639.318px;
|
||
transform: scaleY(-1) rotate(90deg);
|
||
}
|
||
.left-decor-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
|
||
.left-inner-bg {
|
||
position: absolute;
|
||
left: 27.84px; top: 256.3px;
|
||
width: 591.885px; height: 566.618px;
|
||
pointer-events: none;
|
||
}
|
||
.left-inner-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
|
||
.hanmaek-label {
|
||
position: absolute;
|
||
left: 142.3px; top: 374.76px;
|
||
width: 56.714px; height: 32.576px;
|
||
pointer-events: none;
|
||
}
|
||
.hanmaek-label img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; display: block; }
|
||
|
||
.dx-circle {
|
||
position: absolute;
|
||
left: 28.87px; top: 378.71px;
|
||
width: 592.916px; height: 320.82px;
|
||
pointer-events: none;
|
||
}
|
||
.dx-circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
|
||
/* ────────────────────────────────────────────────
|
||
카드 (3개)
|
||
──────────────────────────────────────────────── */
|
||
.card-frame {
|
||
position: absolute;
|
||
width: 515.579px; height: 377.767px;
|
||
}
|
||
.card-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
|
||
.card-header-bg {
|
||
position: absolute;
|
||
width: 378.435px; height: 85.881px;
|
||
}
|
||
.card-header-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
|
||
.card-bottom-decor {
|
||
position: absolute;
|
||
width: 515.579px; height: 185.746px;
|
||
}
|
||
.card-bottom-decor img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
|
||
/* 카드 1 (BIM 전면설계, x=913) */
|
||
.card-1-frame { left: 913.61px; top: 310.59px; }
|
||
.card-1-header { left: 974.45px; top: 310.59px; }
|
||
.card-1-decor { left: 913.61px; top: 642.27px; }
|
||
|
||
/* 카드 2 (디지털 전환 S/W, x=1500) */
|
||
.card-2-frame { left: 1500.34px; top: 310.59px; height: 376.908px; }
|
||
.card-2-header { left: 1558.08px; top: 310.59px; }
|
||
.card-2-decor { left: 1500.34px; top: 642.27px; }
|
||
|
||
/* 카드 3 (고부가가치 산업전환, x=2080) */
|
||
.card-3-frame { left: 2080.88px; top: 310.59px; height: 376.908px; }
|
||
.card-3-header { left: 2141.71px; top: 310.59px; }
|
||
.card-3-decor { left: 2081.91px; top: 642.27px; }
|
||
|
||
/* 카드 타이틀 — 40px Bold, 흰 fill + 컬러 stroke (Figma 실제 렌더 기준)
|
||
design_context 가 잘못 알려준 dark gradient 가 아니라 시각 검증으로 확정 */
|
||
.card-title {
|
||
position: absolute;
|
||
width: 389.778px; height: 64.164px;
|
||
font-family: 'Noto Sans KR', sans-serif;
|
||
font-weight: 700;
|
||
font-size: 40px;
|
||
line-height: 64.164px;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
color: #ffffff;
|
||
/* 외곽 다크 글로우 + 컬러 stroke (paint-order 로 fill 위에) */
|
||
}
|
||
.card-title-1 {
|
||
/* center=(1164.18, 355.51) → top-left=(969.29, 323.43) */
|
||
left: 969.29px; top: 323.43px;
|
||
-webkit-text-stroke: 1.5px #1d4d3e;
|
||
text-shadow: 0 0 4px #322c1e;
|
||
paint-order: stroke fill;
|
||
}
|
||
.card-title-2 {
|
||
/* center=(1743.69, 355.51) → top-left=(1548.8, 323.43) */
|
||
left: 1548.8px; top: 323.43px;
|
||
-webkit-text-stroke: 1.5px #cc5200;
|
||
text-shadow: 0 0 4px #322c1e;
|
||
paint-order: stroke fill;
|
||
}
|
||
.card-title-3 {
|
||
/* center=(2336.6, 355.51) → top-left=(2141.71, 323.43) */
|
||
left: 2141.71px; top: 323.43px;
|
||
-webkit-text-stroke: 1.5px #1d4d3e;
|
||
text-shadow: 0 0 4px #322c1e;
|
||
paint-order: stroke fill;
|
||
}
|
||
|
||
/* 본문 텍스트 — Figma leading-[0] + per-p leading-[60px] 패턴 */
|
||
.body-text {
|
||
position: absolute;
|
||
font-family: 'Noto Sans KR', sans-serif;
|
||
font-weight: 500;
|
||
font-size: 37px;
|
||
color: black;
|
||
line-height: 0; /* 부모 leading-0 (Figma) — 자식 <p> 가 자기 leading 가짐 */
|
||
}
|
||
.body-text p { margin: 0; line-height: 60px; }
|
||
.body-text p.blank { line-height: 60px; }
|
||
.body-text p.blank::before { content: "\200B"; } /* zero-width-space — Figma의 와 동일 */
|
||
|
||
/* card 1 — 3 단락 절대좌표 (bullet top - 10.86 에 align) */
|
||
.body-card-1-p1 {
|
||
left: 989.91px; top: 450.77px; /* 1st bullet 461.63 - 10.86 */
|
||
width: 426.233px;
|
||
letter-spacing: 0;
|
||
}
|
||
.body-card-1-p3 {
|
||
left: 989.91px; top: 532.70px; /* bullet 1.2 543.56 - 10.86 */
|
||
width: 426.233px;
|
||
letter-spacing: -0.48px;
|
||
}
|
||
.body-card-1-p5 {
|
||
left: 989.91px; top: 611.67px; /* bullet 1.3 622.53 - 10.86 */
|
||
width: 426.233px;
|
||
letter-spacing: -0.48px;
|
||
}
|
||
|
||
/* card 2 — 3 단락 (Figma 그대로 분리되어 있음) */
|
||
.body-card-2-p1 {
|
||
left: 1570.48px; top: 450.77px;
|
||
width: 453.964px;
|
||
letter-spacing: 0;
|
||
}
|
||
.body-card-2-p2 {
|
||
left: 1571.49px; top: 530.77px;
|
||
width: 453.964px;
|
||
letter-spacing: -0.64px;
|
||
}
|
||
.body-card-2-p3 {
|
||
left: 1568.11px; top: 612.29px;
|
||
width: 453.964px;
|
||
}
|
||
.body-card-2-p3 .seg-37-tight { font-size: 37px; letter-spacing: -2.22px; }
|
||
.body-card-2-p3 .seg-30 { font-size: 30px; letter-spacing: -1.8px; }
|
||
.body-card-2-p3 .seg-37-loose { font-size: 37px; letter-spacing: -1.48px; }
|
||
|
||
/* card 3 — 4 그룹 절대좌표 (p3+p4 는 한 컨테이너로 연속, p6 는 br 으로 2줄) */
|
||
.body-card-3-p1 {
|
||
left: 2154.09px; top: 450.77px;
|
||
width: 442.62px;
|
||
letter-spacing: -1.48px;
|
||
}
|
||
.body-card-3-p3p4 {
|
||
/* p3 "업무 본질..." 와 p4 "바탕으로..." 가 연속 (between blank 없음) */
|
||
left: 2154.09px; top: 532.70px; /* bullet 3.2 543.56 - 10.86 */
|
||
width: 442.62px;
|
||
}
|
||
.body-card-3-p3p4 .p3 { letter-spacing: -2.59px; }
|
||
.body-card-3-p3p4 .p4 { letter-spacing: -2.96px; }
|
||
.body-card-3-p6 {
|
||
left: 2154.09px; top: 667.94px; /* bullet 3.3 678.8 - 10.86 */
|
||
width: 442.62px;
|
||
}
|
||
.body-card-3-p6 .seg-37 { font-size: 37px; letter-spacing: -1.11px; }
|
||
.body-card-3-p6 .seg-33 { font-size: 33px; letter-spacing: -0.99px; }
|
||
|
||
/* 불릿 (▶ 화살표 9개) */
|
||
.bullet {
|
||
position: absolute;
|
||
width: 41.246px; height: 39.486px;
|
||
}
|
||
.bullet img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
.bullet-1-1 { left: 936.29px; top: 461.63px; }
|
||
.bullet-1-2 { left: 936.29px; top: 543.56px; }
|
||
.bullet-1-3 { left: 936.29px; top: 622.53px; }
|
||
.bullet-2-1 { left: 1520.96px; top: 461.63px; }
|
||
.bullet-2-2 { left: 1520.96px; top: 543.56px; }
|
||
.bullet-2-3 { left: 1520.96px; top: 625.5px; }
|
||
.bullet-3-1 { left: 2101.5px; top: 461.63px; }
|
||
.bullet-3-2 { left: 2101.5px; top: 543.56px; }
|
||
.bullet-3-3 { left: 2101.5px; top: 678.8px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="slide">
|
||
<div class="block">
|
||
<div class="inner">
|
||
|
||
<!-- ① 상단 배너 (가로 그라디언트, CSS) -->
|
||
<div class="header-bg-full"></div>
|
||
<div class="header-decor-l"><img src="assets/header_decor.png" alt=""></div>
|
||
<div class="header-decor-r"><img src="assets/header_decor.png" alt=""></div>
|
||
|
||
<!-- ② 타이틀 -->
|
||
<div class="title-text">
|
||
<p><span class="green">디지털 전환(DX)</span><span class="white">은</span><span class="green"> S/W</span><span class="white">가 필수다.</span></p>
|
||
</div>
|
||
|
||
<!-- ③ 본문 BG -->
|
||
<div class="body-bg"><img src="assets/body_bg.png" alt=""></div>
|
||
<div class="middle-overlay"><img src="assets/middle_overlay.png" alt=""></div>
|
||
<div class="left-bg"><img src="assets/left_bg.png" alt=""></div>
|
||
<div class="left-decor"><div class="left-decor-inner"><img src="assets/left_decor.png" alt=""></div></div>
|
||
<div class="left-inner-bg"><img src="assets/left_inner_bg.png" alt=""></div>
|
||
<div class="hanmaek-label"><img src="assets/hanmaek_label.png" alt=""></div>
|
||
<div class="dx-circle"><img src="assets/dx_circle.png" alt=""></div>
|
||
|
||
<!-- 카드 1 — BIM 전면설계 -->
|
||
<div class="card-frame card-1-frame"><img src="assets/card_frame.png" alt=""></div>
|
||
<div class="card-header-bg card-1-header"><img src="assets/card_header_bg.png" alt=""></div>
|
||
<div class="card-bottom-decor card-1-decor"><img src="assets/card_bottom_decor.png" alt=""></div>
|
||
<div class="card-title card-title-1">BIM 전면설계</div>
|
||
<div class="body-text body-card-1-p1"><p>건설산업 생산성 향상</p></div>
|
||
<div class="body-text body-card-1-p3"><p>고부가가치 산업으로의 전환</p></div>
|
||
<div class="body-text body-card-1-p5"><p>건설산업의 디지털전환(DX)<br>체계 마련 및 고도화 필요</p></div>
|
||
<div class="bullet bullet-1-1"><img src="assets/bullet_arrow.png" alt="▶"></div>
|
||
<div class="bullet bullet-1-2"><img src="assets/bullet_arrow.png" alt="▶"></div>
|
||
<div class="bullet bullet-1-3"><img src="assets/bullet_arrow.png" alt="▶"></div>
|
||
|
||
<!-- 카드 2 — 디지털 전환 S/W -->
|
||
<div class="card-frame card-2-frame"><img src="assets/card_frame.png" alt=""></div>
|
||
<div class="card-header-bg card-2-header"><img src="assets/card_header_bg.png" alt=""></div>
|
||
<div class="card-bottom-decor card-2-decor"><img src="assets/card_bottom_decor.png" alt=""></div>
|
||
<div class="card-title card-title-2">디지털 전환 S/W</div>
|
||
<div class="body-text body-card-2-p1"><p>노동집약형 업무 탈피</p></div>
|
||
<div class="body-text body-card-2-p2"><p class="p1">S/W의 지속적인 고도화 필요</p></div>
|
||
<div class="body-text body-card-2-p3">
|
||
<p><span class="seg-37-tight">충분한 투자</span><span class="seg-30">(인력, 비용, 시간 등)</span><span class="seg-37-tight">와</span><span class="seg-37-loose"> 엔지니어의 적극적 동참</span></p>
|
||
</div>
|
||
<div class="bullet bullet-2-1"><img src="assets/bullet_arrow.png" alt="▶"></div>
|
||
<div class="bullet bullet-2-2"><img src="assets/bullet_arrow.png" alt="▶"></div>
|
||
<div class="bullet bullet-2-3"><img src="assets/bullet_arrow.png" alt="▶"></div>
|
||
|
||
<!-- 카드 3 — 고부가가치 산업전환 -->
|
||
<div class="card-frame card-3-frame"><img src="assets/card_frame.png" alt=""></div>
|
||
<div class="card-header-bg card-3-header"><img src="assets/card_header_bg.png" alt=""></div>
|
||
<div class="card-bottom-decor card-3-decor"><img src="assets/card_bottom_decor.png" alt=""></div>
|
||
<div class="card-title card-title-3">고부가가치 산업전환</div>
|
||
<div class="body-text body-card-3-p1"><p>기본기술의 이해 & 발전 필요</p></div>
|
||
<div class="body-text body-card-3-p3p4">
|
||
<p class="p3">업무 본질에 대한 깊은 이해를</p>
|
||
<p class="p4">바탕으로 창의적 아이디어 발현</p>
|
||
</div>
|
||
<div class="body-text body-card-3-p6">
|
||
<p><span class="seg-37">업무환경 개선과 DX를 통한<br></span><span class="seg-33">Process</span><span class="seg-37"> 혁신과 </span><span class="seg-33">Product</span><span class="seg-37"> 개선</span></p>
|
||
</div>
|
||
<div class="bullet bullet-3-1"><img src="assets/bullet_arrow.png" alt="▶"></div>
|
||
<div class="bullet bullet-3-2"><img src="assets/bullet_arrow.png" alt="▶"></div>
|
||
<div class="bullet bullet-3-3"><img src="assets/bullet_arrow.png" alt="▶"></div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|