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>
213 lines
6.6 KiB
HTML
213 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=1280">
|
||
<title>필수조건 3열 비교 (Frame 1171281190)</title>
|
||
<!--
|
||
Frame: 51:99, 2123×724 px
|
||
Scale: 1280 / 2123 = 0.60290
|
||
패턴: prerequisites-3col
|
||
구조: R17 콘텐츠 주도형 (3열 flex + 각 열 내부 flow)
|
||
- 텍스트 늘면 → 열 섹션이 늘고 → 전체가 자연 확장
|
||
- R19 zoom, R1 descender
|
||
-->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@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;
|
||
background: #fff; position: relative;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,.15);
|
||
}
|
||
.block { width: 1280px; position: relative; overflow: hidden; }
|
||
.inner {
|
||
width: 2123px;
|
||
height: 724px; /* 원본 Figma 프레임 높이 (누락 복원) */
|
||
zoom: 0.60290; /* R19 */
|
||
}
|
||
|
||
/* 타이틀 */
|
||
.title-text {
|
||
font-weight: 700; font-size: 70px; line-height: 1.4;
|
||
background: linear-gradient(180deg, #000 0%, #883700 100%);
|
||
-webkit-background-clip: text; background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
filter: drop-shadow(0 0 4px #322c1e);
|
||
padding: 0 0 10px 75px;
|
||
}
|
||
|
||
/* 3열 컨테이너 (flex row) */
|
||
.cols {
|
||
display: flex;
|
||
gap: 25px;
|
||
}
|
||
|
||
/* 각 열 */
|
||
.col {
|
||
flex: 1;
|
||
position: relative;
|
||
border-top: 2px solid #000;
|
||
border-bottom: 2px solid #000;
|
||
}
|
||
|
||
/* 색상 바 (좌측, flex none) */
|
||
.col-inner {
|
||
display: flex;
|
||
min-height: 500px;
|
||
}
|
||
.bar {
|
||
flex: none;
|
||
width: 152.5px;
|
||
position: relative;
|
||
}
|
||
.col--tech .bar { background: linear-gradient(180deg, #0D78D0 0%, #023056 100%); }
|
||
.col--people .bar { background: linear-gradient(180deg, #FF9A23 0%, #CC5200 100%); }
|
||
.col--nature .bar { background: linear-gradient(180deg, #39BE49 21%, #23742C 100%); }
|
||
|
||
/* 바 안 한자 + 세로 라벨 */
|
||
.bar-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
color: #fff;
|
||
font-weight: 700;
|
||
font-size: 50px;
|
||
text-align: center;
|
||
}
|
||
.bar-content .kanji {
|
||
line-height: 1;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
/* 본문 영역 (flex:1, 2섹션 flow) */
|
||
.col-body {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.col-section {
|
||
flex: 1;
|
||
padding: 15px 20px;
|
||
}
|
||
.col-section + .col-section {
|
||
border-top: 2px dashed #000;
|
||
}
|
||
|
||
/* 제목 (gradient text) */
|
||
.heading {
|
||
font-weight: 700; font-size: 45px; line-height: 45px;
|
||
-webkit-background-clip: text; background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
padding-bottom: 11px; /* R1 */
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
/* 설명 */
|
||
.desc {
|
||
font-weight: 500; font-size: 35px; line-height: 45px;
|
||
color: #3E3523;
|
||
padding-bottom: 3px; /* R1 */
|
||
}
|
||
|
||
/* 열별 gradient */
|
||
.col--tech .heading { background: linear-gradient(180deg, #0D78D0 0%, #134D7F 100%); -webkit-background-clip: text; background-clip: text; }
|
||
.col--people .heading { background: linear-gradient(180deg, #FE900C 0%, #D18B37 100%); -webkit-background-clip: text; background-clip: text; }
|
||
.col--nature .heading { background: linear-gradient(180deg, #3CA649 21%, #23742C 100%); -webkit-background-clip: text; background-clip: text; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="slide">
|
||
<div class="block">
|
||
<div class="inner">
|
||
|
||
<div class="title-text">필수조건</div>
|
||
|
||
<div class="cols">
|
||
|
||
<!-- 열1: 기술 -->
|
||
<div class="col col--tech">
|
||
<div class="col-inner">
|
||
<div class="bar">
|
||
<div class="bar-content">
|
||
<span class="kanji">技</span>
|
||
<span style="font-size:35px;">기술<br>(디지털)</span>
|
||
<span class="kanji">術</span>
|
||
</div>
|
||
</div>
|
||
<div class="col-body">
|
||
<div class="col-section">
|
||
<div class="heading">깊은 기반<br>(건설산업, 토목) 지식</div>
|
||
<div class="desc">건설단계별 근본적인 이해와<br>경험이 기반된 높은 전문지식 보유</div>
|
||
</div>
|
||
<div class="col-section">
|
||
<div class="heading">높은 S/W 기술<br>(Digital Technology)</div>
|
||
<div class="desc">다양한 기술적도구(S/W,H/W)와<br>Process의 효과적인 통합</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 열2: 사람 -->
|
||
<div class="col col--people">
|
||
<div class="col-inner">
|
||
<div class="bar">
|
||
<div class="bar-content">
|
||
<span class="kanji">人</span>
|
||
<span style="font-size:35px;">사람<br>(역량)</span>
|
||
<span class="kanji">材</span>
|
||
</div>
|
||
</div>
|
||
<div class="col-body">
|
||
<div class="col-section">
|
||
<div class="heading">분야별 전문지식<br>역량을 갖춘 기술자</div>
|
||
<div class="desc">엔지니어의 Know-how와<br>디지털지식이 융합된 지식의 축적</div>
|
||
</div>
|
||
<div class="col-section">
|
||
<div class="heading">디지털화 역량 및<br>개발경험 많은 개발자</div>
|
||
<div class="desc">다양한 형태의 Solution S/W<br>개발 역량 Programmer</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 열3: 자연 -->
|
||
<div class="col col--nature">
|
||
<div class="col-inner">
|
||
<div class="bar">
|
||
<div class="bar-content">
|
||
<span class="kanji">天</span>
|
||
<span style="font-size:35px;">자연<br>(여건)</span>
|
||
<span class="kanji">地</span>
|
||
</div>
|
||
</div>
|
||
<div class="col-body">
|
||
<div class="col-section">
|
||
<div class="heading">받아들일 수 있는<br>사회ㆍ기업ㆍ제도 등의 여건</div>
|
||
<div class="desc">목표설정형 지침에서 탈피하여<br>수행사례, 효과검증을 통해 시행</div>
|
||
</div>
|
||
<div class="col-section">
|
||
<div class="heading">지속적ㆍ장기적 투자를<br>수행할 능력과 의지</div>
|
||
<div class="desc">기술 개발을 위한 대규모 투자 및<br>Process 혁신을 위한 지속적인 투자</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|