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>
303 lines
12 KiB
HTML
303 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=1280">
|
||
<title>Process/Products 혁신 (Frame 1171281210)</title>
|
||
<!--
|
||
Frame: 181:2519, 3848 × 1388 px (Frame 1171281210)
|
||
Source: file 9S6LsQyO6zlRxtiqZccOUM, page 29:373
|
||
Scale: 1280 / 3848 = 0.33270 (zoom on .inner per R19)
|
||
패턴: process-products-2col-banner-top
|
||
구조: 좌(Process) / 우(Products) 2 컬럼 + 상단 둥근 헤더 배너
|
||
좌측 배너는 figma 에서 rotate(180°) 로 거울 처리되어 있으므로
|
||
후처리(post-rotation) 외관 그대로 CSS 로 작성: 둥근 모서리 우측, 그라디언트 방향 좌→우
|
||
순수 CSS — 배경 SVG 3 개는 모두 linear-gradient + border-radius 로 재현 (R8/R9 준수)
|
||
유일한 비트맵 자산: arrow.png (일러스트성 그라디언트 화살표)
|
||
-->
|
||
<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;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: 3848px; height: 1388px;
|
||
position: relative;
|
||
zoom: 0.33270;
|
||
}
|
||
|
||
/* ────────────────────────────────────────────────
|
||
① 본문 영역 배경 (3845 × 933, 상단만)
|
||
좌(0~1923): #39321E α0.3 (top) → white α0.3 (bottom)
|
||
우(1921~3845): #296B55 α0.3 (top) → white α0.3 (bottom)
|
||
──────────────────────────────────────────────── */
|
||
.body-bg-left {
|
||
position: absolute;
|
||
left: 0; top: 0;
|
||
width: 1923px; height: 933.002px;
|
||
background: linear-gradient(to bottom,
|
||
rgba(57, 50, 30, 0.3) 0%,
|
||
rgba(255, 255, 255, 0.3) 100%);
|
||
}
|
||
.body-bg-right {
|
||
position: absolute;
|
||
left: 1921px; top: 0;
|
||
width: 1924px; height: 933.002px;
|
||
background: linear-gradient(to bottom,
|
||
rgba(41, 107, 85, 0.3) 0%,
|
||
rgba(255, 255, 255, 0.3) 100%);
|
||
}
|
||
|
||
/* ────────────────────────────────────────────────
|
||
② 헤더 배너 (좌·우)
|
||
좌측: 둥근 우측 r=71 (post-rotation 외관)
|
||
원본 grad x1=2437.15(#A5A196 α0.1) → x2=516.146(#39321E α1.0)
|
||
viewBox 0..1921 안에서 t=0.269 ~ 1.269
|
||
회전 180° 후 좌→우: rgba(136,131,118,.343) 0% → #39321E 73.1% → #39321E 100%
|
||
우측: 둥근 좌측 r=71
|
||
원본 grad x1=1925(#296B55 α0.1) → x2=0(#032118 α1.0)
|
||
방향 그대로 좌→우: #032118 0% → rgba(41,107,85,.1) 100%
|
||
──────────────────────────────────────────────── */
|
||
.header-bg {
|
||
position: absolute;
|
||
height: 142px;
|
||
}
|
||
.header-bg--left {
|
||
left: 0; top: 62px; width: 1921px;
|
||
border-radius: 0 71px 71px 0;
|
||
background: linear-gradient(to right,
|
||
rgba(136, 131, 118, 0.343) 0%,
|
||
#39321E 73.1%,
|
||
#39321E 100%);
|
||
}
|
||
.header-bg--right {
|
||
left: 1923px; top: 62px; width: 1925px;
|
||
border-radius: 71px 0 0 71px;
|
||
background: linear-gradient(to right,
|
||
#032118 0%,
|
||
rgba(41, 107, 85, 0.1) 100%);
|
||
}
|
||
|
||
/* ────────────────────────────────────────────────
|
||
③ 헤더 텍스트 (bg-clip-text — 솔리드 + dark glow)
|
||
원본 layer1 = 90deg solid → bg-clip 결과는 솔리드.
|
||
──────────────────────────────────────────────── */
|
||
.header-text {
|
||
position: absolute;
|
||
font-family: 'Noto Sans KR', sans-serif;
|
||
font-weight: 900;
|
||
font-size: 70px;
|
||
letter-spacing: 3.5px;
|
||
text-shadow: 0 0 4px #322C1E;
|
||
display: flex; flex-direction: column; justify-content: center;
|
||
white-space: nowrap;
|
||
}
|
||
.header-text--left {
|
||
/* center=(1342.45, 133.5), w=1076.897, h=143 → top-left=(803.99, 62) */
|
||
left: 803.99px; top: 62px;
|
||
width: 1076.897px; height: 143px;
|
||
text-align: center;
|
||
color: #3E3523;
|
||
}
|
||
.header-text--right {
|
||
/* left=2135, center_y=133, h=116 → top=75 */
|
||
left: 2135px; top: 75px;
|
||
width: 1114.411px; height: 116px;
|
||
color: #225F4A;
|
||
}
|
||
|
||
/* ────────────────────────────────────────────────
|
||
④ 섹션 타이틀 (50px Black)
|
||
──────────────────────────────────────────────── */
|
||
.section-title {
|
||
position: absolute;
|
||
font-family: 'Noto Sans KR', sans-serif;
|
||
font-weight: 900;
|
||
font-size: 50px;
|
||
line-height: 95px;
|
||
}
|
||
.section-title--left { color: #5C3714; }
|
||
.section-title--right { color: #084C56; }
|
||
|
||
/* ────────────────────────────────────────────────
|
||
⑤ 본문 불릿 리스트 (40px Bold black, list-disc, leading 70)
|
||
──────────────────────────────────────────────── */
|
||
.bullets {
|
||
position: absolute;
|
||
font-family: 'Noto Sans KR', sans-serif;
|
||
font-weight: 700;
|
||
font-size: 40px;
|
||
color: #000;
|
||
list-style: disc outside;
|
||
padding-left: 60px;
|
||
margin: 0;
|
||
}
|
||
.bullets > li { line-height: 70px; }
|
||
|
||
.aster-small { font-size: 25.8px; }
|
||
|
||
.bullets-aster {
|
||
position: absolute;
|
||
font-family: 'Noto Sans KR', sans-serif;
|
||
font-weight: 700;
|
||
font-size: 40px;
|
||
color: #000;
|
||
}
|
||
.bullets-aster ul {
|
||
list-style: disc outside;
|
||
padding-left: 60px;
|
||
margin: 0;
|
||
}
|
||
.bullets-aster ul > li { line-height: 70px; }
|
||
.bullets-aster .footnote {
|
||
padding-left: 60px;
|
||
line-height: 70px;
|
||
white-space: pre-wrap;
|
||
}
|
||
.bullets-aster .footnote .indent {
|
||
display: inline-block;
|
||
width: 6ch;
|
||
}
|
||
|
||
/* ────────────────────────────────────────────────
|
||
⑥ 화살표 (AS-IS → TO-BE) — 비트맵 유지 (일러스트성)
|
||
──────────────────────────────────────────────── */
|
||
.arrow-img {
|
||
position: absolute;
|
||
left: 763px; top: 400px;
|
||
width: 252px; height: 90px;
|
||
}
|
||
.arrow-img img {
|
||
width: 100%; height: 100%;
|
||
object-fit: contain;
|
||
display: block;
|
||
pointer-events: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="slide">
|
||
<div class="block">
|
||
<div class="inner">
|
||
|
||
<!-- ① 본문 배경 -->
|
||
<div class="body-bg-left"></div>
|
||
<div class="body-bg-right"></div>
|
||
|
||
<!-- ② 헤더 배너 -->
|
||
<div class="header-bg header-bg--left"></div>
|
||
<div class="header-bg header-bg--right"></div>
|
||
|
||
<!-- ③ 헤더 텍스트 -->
|
||
<div class="header-text header-text--left">과정 (Process)의 혁신</div>
|
||
<div class="header-text header-text--right">결과 (Products)의 혁신</div>
|
||
|
||
<!-- ────────── 좌측 컬럼 (Process) ────────── -->
|
||
|
||
<div class="section-title section-title--left"
|
||
style="left:82.0195px; top:237px; width:1250.7188px;">
|
||
Analogue 개념 기반 업무의 Digital Transformation
|
||
</div>
|
||
|
||
<ul class="bullets"
|
||
style="left:125.0117px; top:340px; width:539.368px;">
|
||
<li>개념, 도서, 행정 절차 중심</li>
|
||
<li>2D 도면, 전문가, 규정</li>
|
||
<li>업무 구분(단절), 책임</li>
|
||
</ul>
|
||
|
||
<div class="arrow-img"><img src="assets/arrow.png" alt="→"></div>
|
||
|
||
<ul class="bullets"
|
||
style="left:1075.027px; top:340px; width:671.896px;">
|
||
<li>시각화된 목적물, 소통, 투명성 중심</li>
|
||
<li>3D 모델, 참여자, 실체</li>
|
||
<li>협업(융∙복합), 창의성</li>
|
||
</ul>
|
||
|
||
<div class="section-title section-title--left"
|
||
style="left:82.0195px; top:600px; width:991.3354px;">
|
||
위치기반의 3D 모델을 사용하는 Process 혁신
|
||
</div>
|
||
|
||
<ul class="bullets"
|
||
style="left:125.0352px; top:722px; width:1465.7486px;">
|
||
<li>위치기반(지리적, 지형, 지반상태 포함)의 GIS와 3D 모델(형상, 내용속성) 기반의 건설 정보를 포함하는 BIM의 연계를 통한 Process 혁신</li>
|
||
</ul>
|
||
|
||
<div class="section-title section-title--left"
|
||
style="left:82.0195px; top:916px; width:991.3354px;">
|
||
사용자 중심의 Solution(S/W) 제공
|
||
</div>
|
||
|
||
<ul class="bullets"
|
||
style="left:125px; top:1038px; width:1465.7703px;">
|
||
<li>인프라 건설산업의 1차적인 Process 혁신은 등고선 중심의 지형도가 아닌<br>속성이 포함된 수치지형도와 본태 측량에서 획득한 3D 지반모델 구축 필수</li>
|
||
<li>설계와 시공에 관련된 기술을 정리하고 디지털화하여 S/W 로 기술 축적</li>
|
||
<li>서로 다른 S/W로 작성되어 분절화된 Analogue 방식의 성과물과 정보물을<br>연계가 가능하도록 설계, 시공 Solution 제공</li>
|
||
</ul>
|
||
|
||
<!-- ────────── 우측 컬럼 (Products) ────────── -->
|
||
|
||
<div class="section-title section-title--right"
|
||
style="left:2135px; top:237px; width:1324.0727px;">
|
||
Copy & Paste로 인한 하향 평준화된 기존 성과품의 품질 향상
|
||
</div>
|
||
|
||
<ul class="bullets"
|
||
style="left:2178.0352px; top:351px; width:1465.7486px;">
|
||
<li>과거 수작업으로 시행하면서 발생하던 오류 등의 최소화</li>
|
||
<li>정확한 Data에 기반한 계획과 개선된 높은 품질의 성과물</li>
|
||
</ul>
|
||
|
||
<div class="section-title section-title--right"
|
||
style="left:2135px; top:538px; width:1430.154px;">
|
||
Analogue 기반 도서 외 Digital 기반 정보물 추가
|
||
</div>
|
||
|
||
<div class="bullets-aster"
|
||
style="left:2178.0117px; top:652px; width:1471.1506px;">
|
||
<ul>
|
||
<li>규정에만 의존한 도면, 수량, 계산서, 시방서 등의 성과물<span class="aster-small">＊</span>에 3D 모델, 시뮬레이션 등의 Digital 기반 정보물(Information Data and Products)이 추가</li>
|
||
</ul>
|
||
<p class="footnote"><span class="indent"></span><span class="aster-small">＊</span> 정확한 숫자 확인 및 진행과정의 확인 등을 위해 성과물은 지속적으로 존속</p>
|
||
</div>
|
||
|
||
<div class="section-title section-title--right"
|
||
style="left:2135px; top:916px; width:1324.0727px;">
|
||
Solution을 이용한 업무효율화<span style="font-size:40px;">(사용자 편의, 협업 및 의사소통 강화 등)</span>
|
||
</div>
|
||
|
||
<ul class="bullets"
|
||
style="left:2178.0117px; top:1030px; width:1555.868px;">
|
||
<li>디지털 기반 성과물인 Graphic 중심의 3D 모델, 시뮬레이션을 제대로 활용하기 위해서는 기존의 낮은 수준이 아니라 공학용 사이니지(H/W) 시스템이 필수로 갖춰야야만 함</li>
|
||
<li>Engn. Solution을 통해 프로젝트에 관한 이슈를 함께 검토하고 논의하고 다양한 건설단계별 정보를 디지털 데이터로 저장하여 건설의 전 과정을 통합관리</li>
|
||
</ul>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|