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>
191 lines
6.3 KiB
HTML
191 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=1280">
|
||
<title>현존 상용 S/W의 현실 (Frame 1171281209)</title>
|
||
<!--
|
||
Frame: 145:8523, 1697 × 582 px (Frame 1171281209)
|
||
Source: file 9S6LsQyO6zlRxtiqZccOUM, page 29:373
|
||
Scale: min(1280/1697, 720/582) = 1280/1697 = 0.75427 (width fit)
|
||
Block in slide: 1280 × 439 px
|
||
패턴: bordered-3paragraphs-with-3emphasis-labels
|
||
구조: 외곽 빨간 테두리 + 상단 타이틀 pill + 좌(본문 3단 with 화살표 불릿) / 우(강조 라벨 3개, gradient text)
|
||
-->
|
||
<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: 1697px; height: 582px;
|
||
position: relative;
|
||
zoom: 0.75427;
|
||
}
|
||
|
||
/* ① 우측 그라디언트 패널 (BG, behind everything) */
|
||
.right-panel {
|
||
position: absolute;
|
||
left: 752px; top: 16px;
|
||
width: 941px; height: 564px;
|
||
border-top-right-radius: 20px;
|
||
border-bottom-right-radius: 20px;
|
||
background-image: linear-gradient(to left, #F5D4C7 33.032%, white 91.365%);
|
||
}
|
||
|
||
/* ② 외곽 빨간 테두리 */
|
||
.outer-border {
|
||
position: absolute;
|
||
left: 0; top: 12.43px;
|
||
width: 1697px; height: 569.573px;
|
||
border: 10px solid #9C0E0E;
|
||
border-radius: 20px;
|
||
background: transparent;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* ③ 상단 타이틀 pill BG */
|
||
.title-pill {
|
||
position: absolute;
|
||
left: 527px; top: 0;
|
||
width: 628px; height: 97.345px;
|
||
}
|
||
.title-pill img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
|
||
/* ④ 타이틀 텍스트 */
|
||
.title-text {
|
||
position: absolute;
|
||
left: 571px; top: 9.32px;
|
||
/* center=(841, 42.46), w=540, h=66.278 */
|
||
width: 540px; height: 66.278px;
|
||
font-family: 'Noto Sans KR', sans-serif;
|
||
font-weight: 700;
|
||
font-size: 50px;
|
||
color: white;
|
||
text-align: center;
|
||
line-height: 66.278px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* ⑤ 좌 본문 3단 — bullet icon + paragraph */
|
||
.bullet-icon {
|
||
position: absolute;
|
||
left: 39px;
|
||
width: 30px; height: 31.068px;
|
||
}
|
||
.bullet-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
.icon-1 { top: 130.48px; }
|
||
.icon-2 { top: 306.54px; }
|
||
.icon-3 { top: 437.02px; }
|
||
|
||
.body {
|
||
position: absolute;
|
||
left: 80px;
|
||
font-family: 'Noto Sans KR', sans-serif;
|
||
font-weight: 400;
|
||
font-size: 30px;
|
||
color: black;
|
||
line-height: 40px;
|
||
letter-spacing: -1px;
|
||
}
|
||
.body p { margin: 0; line-height: 40px; }
|
||
.body .accent {
|
||
font-weight: 700;
|
||
color: #CC5200;
|
||
letter-spacing: -1px;
|
||
}
|
||
.body-1 { top: 130.48px; width: 883px; height: 124.27px; }
|
||
.body-2 { top: 302.39px; width: 1076px; height: 82.847px; }
|
||
.body-3 { top: 432.88px; width: 1021px; height: 82.847px; }
|
||
|
||
/* ⑥ 우 강조 라벨 — bg-clip-text 그라디언트 */
|
||
.emphasis {
|
||
position: absolute;
|
||
font-family: 'Noto Sans KR', sans-serif;
|
||
font-weight: 900;
|
||
font-size: 60px;
|
||
height: 74.562px;
|
||
text-align: center;
|
||
line-height: 74.562px;
|
||
text-shadow: 0 10px 6px rgba(0,0,0,0.25);
|
||
background-image: linear-gradient(to top, red 0%, #711E1E 79.5%);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
white-space: nowrap;
|
||
}
|
||
.em-1 { left: 1237px; top: 124.27px; width: 414px; } /* center=1443.99 - w/2=1237 */
|
||
.em-2 { left: 1333px; top: 259.93px; width: 221px; } /* center=1443.49 - w/2=1333 */
|
||
.em-3 { left: 1237px; top: 395.59px; width: 414px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="slide">
|
||
<div class="block">
|
||
<div class="inner">
|
||
|
||
<!-- ① 우측 그라디언트 BG 패널 -->
|
||
<div class="right-panel"></div>
|
||
|
||
<!-- ② 외곽 빨간 테두리 -->
|
||
<div class="outer-border"></div>
|
||
|
||
<!-- ③ 타이틀 pill 배경 -->
|
||
<div class="title-pill"><img src="assets/title_pill.png" alt=""></div>
|
||
|
||
<!-- ④ 타이틀 텍스트 -->
|
||
<div class="title-text">현존 상용 S/W의 현실</div>
|
||
|
||
<!-- ⑤ 좌 본문 3단 (bullet icon + paragraph) -->
|
||
<div class="bullet-icon icon-1"><img src="assets/bullet_arrow.png" alt="▶"></div>
|
||
<div class="body body-1">
|
||
<p><span>토목 분야는 </span><span class="accent">각 영역이 고도로 세분화</span><span>되어 있음에도,</span></p>
|
||
<p><span>현재는 건축용으로 개발된 S/W를 일부 수정하여 적용하는 수준에 그침.</span></p>
|
||
<p><span>이는 각 분야의 특수성을 반영한 </span><span class="accent">전문성 및 효율성 확보에 큰 걸림돌</span><span>이 됨.</span></p>
|
||
</div>
|
||
|
||
<div class="bullet-icon icon-2"><img src="assets/bullet_arrow.png" alt="▶"></div>
|
||
<div class="body body-2">
|
||
<p><span class="accent">현존 상용 소프트웨어</span><span>는 사용자 확보 및 판매 수입이라는 한계로 인해 </span><span class="accent">범용적 개발에 집중</span></p>
|
||
<p><span>이 때문에 특정 분야에 최적화된 전문가용 수준의 </span><span class="accent">전용 소프트웨어 개발에는 한계</span><span>가 따름.</span></p>
|
||
</div>
|
||
|
||
<div class="bullet-icon icon-3"><img src="assets/bullet_arrow.png" alt="▶"></div>
|
||
<div class="body body-3">
|
||
<p><span>각 분야의 시장 주도업체 소프트웨어조차 </span><span class="accent">시공 및 유지관리 기능은 개념적인 수준</span><span>임.</span></p>
|
||
<p><span>결과적으로 </span><span class="accent">실무에 직접 적용할 수 있는 프로그램은 전무</span><span>한 실정임.</span></p>
|
||
</div>
|
||
|
||
<!-- ⑥ 우 강조 라벨 3개 -->
|
||
<p class="emphasis em-1">토목 전문성 부족</p>
|
||
<p class="emphasis em-2">비효율성</p>
|
||
<p class="emphasis em-3">실무 적용 불가능</p>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|