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>
238 lines
8.0 KiB
HTML
238 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=1280">
|
||
<title>효율적인 정보의 관리와 활용 (Frame 1171281179)</title>
|
||
<!--
|
||
Frame: 182:3024, 1207 × 861 px (Frame 1171281179)
|
||
Source: file 9S6LsQyO6zlRxtiqZccOUM, page 29:373
|
||
Scale: min(1280/1207, 720/861) = 720/861 = 0.83624 (height fit)
|
||
Block in slide: 1009 × 720 (centered horizontally, white margin sides)
|
||
패턴: framework-3section-label-body
|
||
구조: 헤더 (icon + title) / 좌 브라운 라벨 ×3 / 우 흰 카드 ×3 (불릿 본문 + 우측 장식 이미지)
|
||
-->
|
||
<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 {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.inner {
|
||
width: 1207px; height: 861px;
|
||
position: relative;
|
||
zoom: 0.83624;
|
||
}
|
||
|
||
/* ① 헤더 (title row) */
|
||
.title-row {
|
||
position: absolute;
|
||
left: 0; top: 0;
|
||
width: 1166px; height: 94px;
|
||
display: flex; align-items: center; gap: 15px;
|
||
}
|
||
.title-icon {
|
||
flex: none;
|
||
width: 50px; height: 61px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.title-icon img {
|
||
width: 50px; height: 50px;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
.title-text {
|
||
flex: none;
|
||
font-family: 'Noto Sans KR', sans-serif;
|
||
font-weight: 700;
|
||
white-space: pre;
|
||
text-shadow: 0 0 4px #322C1E;
|
||
line-height: 1;
|
||
}
|
||
.title-text .part-1 {
|
||
font-size: 50px;
|
||
background-image: linear-gradient(180deg, #296B55 0%, #123328 100%);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
}
|
||
.title-text .part-2 {
|
||
font-size: 65px;
|
||
background-image: linear-gradient(180deg, rgb(0,0,0) 0%, rgb(136,55,0) 100%);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
color: transparent;
|
||
}
|
||
|
||
/* ② 좌측 브라운 라벨 (3개) */
|
||
.label-box {
|
||
position: absolute;
|
||
left: 18px;
|
||
width: 282px; height: 230px;
|
||
background: rgba(50, 31, 9, 0.8);
|
||
border-top-right-radius: 20px;
|
||
border-bottom-right-radius: 20px;
|
||
display: flex; flex-direction: column;
|
||
align-items: center; justify-content: center;
|
||
padding: 9px 22px;
|
||
}
|
||
.label-box--shadow {
|
||
filter: drop-shadow(0 4px 2px rgba(0,0,0,0.25));
|
||
}
|
||
.label-box .kr {
|
||
font-family: 'Noto Sans KR', sans-serif;
|
||
font-weight: 700;
|
||
font-size: 40px;
|
||
color: white;
|
||
line-height: 70px;
|
||
text-align: center;
|
||
text-shadow: 0 4px 4px rgba(0,0,0,0.25);
|
||
}
|
||
.label-box .en {
|
||
font-family: 'Noto Sans KR', sans-serif;
|
||
font-weight: 700;
|
||
font-size: 53px;
|
||
color: #FFE100;
|
||
line-height: 70px;
|
||
text-align: center;
|
||
text-shadow: 0 4px 4px rgba(0,0,0,0.25);
|
||
}
|
||
.label--what { top: 124px; }
|
||
.label--how { top: 378px; }
|
||
.label--when { top: 631px; }
|
||
|
||
/* ③ 우측 흰 카드 (3개) */
|
||
.card-box {
|
||
position: absolute;
|
||
height: 230px;
|
||
background: white;
|
||
border: 3px solid #A5BBB4;
|
||
border-top-right-radius: 20px;
|
||
border-bottom-right-radius: 20px;
|
||
}
|
||
.card-box--what { left: 315px; top: 124px; width: 877px; }
|
||
.card-box--how { left: 315px; top: 378px; width: 877px; }
|
||
.card-box--when { left: 313px; top: 631px; width: 879px; }
|
||
|
||
/* ④ 카드 우측 장식 이미지 (3개, 같은 src) */
|
||
.card-decor {
|
||
position: absolute;
|
||
width: 383px; height: 177px;
|
||
border-bottom-left-radius: 17px;
|
||
overflow: hidden;
|
||
}
|
||
.card-decor img {
|
||
width: 100%; height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
.card-decor--what { left: 804px; top: 176px; }
|
||
.card-decor--how { left: 805px; top: 428px; }
|
||
.card-decor--when { left: 803px; top: 680px; }
|
||
|
||
/* ⑤ 본문 텍스트 (3 섹션 공통) */
|
||
.body-text {
|
||
position: absolute;
|
||
font-family: 'Noto Sans KR', sans-serif;
|
||
font-weight: 500;
|
||
color: black;
|
||
}
|
||
.body-text p { margin: 0; line-height: 65px; }
|
||
.body-text .bullet { font-size: 35px; line-height: 65px; letter-spacing: 0; }
|
||
.body-text .text { font-size: 35px; line-height: 65px; letter-spacing: -2px; }
|
||
.body-text .accent {
|
||
font-weight: 700;
|
||
font-size: 40px;
|
||
line-height: 65px;
|
||
color: #CC5200;
|
||
letter-spacing: -2.2px;
|
||
}
|
||
|
||
.body-text--what { left: 321px; top: 143px; width: 880px; height: 193px; }
|
||
.body-text--how { left: 319px; top: 396px; width: 888px; height: 194px; }
|
||
.body-text--when { left: 319px; top: 653px; width: 868px; height: 177px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="slide">
|
||
<div class="block">
|
||
<div class="inner">
|
||
|
||
<!-- ① 헤더 -->
|
||
<div class="title-row">
|
||
<div class="title-icon"><img src="assets/title_icon.png" alt=""></div>
|
||
<div class="title-text"><span class="part-1">효율적인 </span><span class="part-2">정보의 관리와 활용</span></div>
|
||
</div>
|
||
|
||
<!-- ② 좌측 브라운 라벨 ×3 -->
|
||
<div class="label-box label-box--shadow label--what">
|
||
<div class="kr">무슨 정보</div>
|
||
<div class="en">What</div>
|
||
</div>
|
||
<div class="label-box label-box--shadow label--how">
|
||
<div class="kr">어떻게 연계</div>
|
||
<div class="en">HOW</div>
|
||
</div>
|
||
<div class="label-box label--when">
|
||
<div class="kr">언제 사용</div>
|
||
<div class="en">WHEN</div>
|
||
</div>
|
||
|
||
<!-- ③ 우측 흰 카드 ×3 (배경) -->
|
||
<div class="card-box card-box--what"></div>
|
||
<div class="card-box card-box--how"></div>
|
||
<div class="card-box card-box--when"></div>
|
||
|
||
<!-- ④ 카드 우측 장식 이미지 -->
|
||
<div class="card-decor card-decor--what"><img src="assets/card_decor.png" alt=""></div>
|
||
<div class="card-decor card-decor--how"><img src="assets/card_decor.png" alt=""></div>
|
||
<div class="card-decor card-decor--when"><img src="assets/card_decor.png" alt=""></div>
|
||
|
||
<!-- ⑤ 본문 텍스트 — What -->
|
||
<div class="body-text body-text--what">
|
||
<p><span class="bullet">‧</span><span class="text">수량, CBS 내역, 단가, 공사일정, 자원 투입계획 등 </span><span class="accent">계획 정보</span></p>
|
||
<p><span class="bullet">‧</span><span class="text">일일 작업수량, 실제 투입 자원 등 </span><span class="accent">공사 실행 정보</span></p>
|
||
<p><span class="bullet">‧</span><span class="text">품질/안전/환경 등 점검일지, 체크리스트, 사진 등 </span><span class="accent">공사 결과</span></p>
|
||
</div>
|
||
|
||
<!-- ⑤ 본문 텍스트 — HOW -->
|
||
<div class="body-text body-text--how">
|
||
<p><span class="bullet">‧</span><span class="text">3D 형상 </span><span class="accent">산출속성과 연계</span><span class="text">하여 S/W를 통해 정의</span></p>
|
||
<p><span class="bullet">‧</span><span class="text">객체별 품질 검사 기준 등은 </span><span class="accent">시방규정과 연계</span><span class="text">하여 S/W로 정의</span></p>
|
||
<p><span class="bullet">‧</span><span class="text">객체별 필요정보를 Text기반 형식으로 </span><span class="accent">사용자가 입력</span></p>
|
||
</div>
|
||
|
||
<!-- ⑤ 본문 텍스트 — WHEN -->
|
||
<div class="body-text body-text--when">
|
||
<p><span class="bullet">‧</span><span class="accent">착수 전</span><span class="text"> 공정계획, 시공계획 등 계획 수립</span></p>
|
||
<p><span class="bullet">‧</span><span class="accent">개별 공사 전</span><span class="text"> 시공상세도를 기반으로 한 작업 내용 확인</span></p>
|
||
<p><span class="bullet">‧</span><span class="accent">개별 공사 후</span><span class="text"> 실적 관리, 공사관련 문서 작성, 업무 보고</span></p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|