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>
206 lines
5.8 KiB
HTML
206 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=1280">
|
||
<title>국외 BIM 수행 현황 (Frame 1171281174)</title>
|
||
<!--
|
||
Frame: 182:2810, 1728 × 657 px (Frame 1171281174)
|
||
Source: file 9S6LsQyO6zlRxtiqZccOUM, page 29:373
|
||
Scale: 1280 / 1728 = 0.74074 (zoom on .inner per R19)
|
||
패턴: scene-with-numbered-list-4
|
||
구조: 좌(헤더 pill + scene + 글로브) / 우(수직 화살표 체인 + 번호 배지 4개 + 텍스트 버블)
|
||
-->
|
||
<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: 1728px; height: 657px;
|
||
position: relative;
|
||
zoom: 0.74074;
|
||
}
|
||
|
||
/* ① 메인 장면 이미지 (배경) */
|
||
.scene {
|
||
position: absolute;
|
||
left: 53px; top: 139px;
|
||
width: 815px; height: 465px;
|
||
border-radius: 27px;
|
||
overflow: hidden;
|
||
}
|
||
.scene img {
|
||
width: 100%; height: 100%;
|
||
object-fit: cover;
|
||
opacity: 0.7;
|
||
display: block;
|
||
}
|
||
|
||
/* ② 글로브 오버레이 (원형, 흰 테두리) */
|
||
.globe {
|
||
position: absolute;
|
||
left: 718px; top: 159px;
|
||
width: 127px; height: 126px;
|
||
border: 3px solid white;
|
||
border-radius: 132.5px;
|
||
overflow: hidden;
|
||
}
|
||
.globe img {
|
||
width: 100%; height: 100%;
|
||
object-fit: cover;
|
||
opacity: 0.8;
|
||
display: block;
|
||
}
|
||
|
||
/* ③ 좌상단 헤더 pill */
|
||
.header-pill {
|
||
position: absolute;
|
||
left: 0; top: 0;
|
||
width: 447px; height: 133.005px;
|
||
}
|
||
.header-pill img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
|
||
/* ④ pin 아이콘 (헤더 위에 겹침) */
|
||
.pin {
|
||
position: absolute;
|
||
left: 0; top: 19px;
|
||
width: 75px; height: 87.662px;
|
||
}
|
||
.pin img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
|
||
/* ⑤ "국외" 타이틀 텍스트 */
|
||
.title-text {
|
||
position: absolute;
|
||
left: 46px; top: 23px;
|
||
width: 355px; height: 90px;
|
||
font-family: 'Noto Sans KR', sans-serif;
|
||
font-weight: 700;
|
||
font-size: 60px;
|
||
color: white;
|
||
text-align: center;
|
||
letter-spacing: -1.8px;
|
||
line-height: 90px;
|
||
text-shadow: 0 0 4px rgba(0,0,0,0.5);
|
||
}
|
||
|
||
/* ⑥ 수직 화살표 체인 (장면 → 리스트) */
|
||
.arrow-chain {
|
||
position: absolute;
|
||
left: 825px; top: 86px;
|
||
width: 115px; height: 571px;
|
||
}
|
||
.arrow-chain img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
|
||
/* ⑦ 텍스트 버블 4개 (브라운 pill 배경) */
|
||
.bubble {
|
||
position: absolute;
|
||
left: 954px;
|
||
width: 760px; height: 97px;
|
||
}
|
||
.bubble img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
.bubble--1 { top: 136px; }
|
||
.bubble--2 { top: 266px; }
|
||
.bubble--3 { top: 407px; }
|
||
.bubble--4 { top: 543px; }
|
||
|
||
/* ⑧ 텍스트 라벨 4개 */
|
||
.label {
|
||
position: absolute;
|
||
left: 1033px;
|
||
width: 695px; height: 60px;
|
||
font-family: 'Noto Sans KR', sans-serif;
|
||
font-weight: 500;
|
||
font-size: 45px;
|
||
color: #11231D;
|
||
text-shadow: 0 0 4px rgba(0,0,0,0.5);
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.label > p { margin: 0; line-height: 60px; }
|
||
.label--1 { top: 149px; } /* center_y=179, h=60 → top=149 */
|
||
.label--2 { top: 285px; }
|
||
.label--3 { top: 421px; }
|
||
.label--4 { top: 562px; }
|
||
|
||
/* ⑨ 번호 배지 4개 */
|
||
.badge {
|
||
position: absolute;
|
||
left: 906px;
|
||
width: 89px; height: 93px;
|
||
}
|
||
.badge img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
.badge--1 { top: 117px; }
|
||
.badge--2 { top: 238px; }
|
||
.badge--3 { top: 376px; }
|
||
.badge--4 { top: 509px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="slide">
|
||
<div class="block">
|
||
<div class="inner">
|
||
|
||
<!-- ① 장면 이미지 (배경, opacity 0.7) -->
|
||
<div class="scene"><img src="assets/scene.png" alt=""></div>
|
||
|
||
<!-- ② 글로브 오버레이 -->
|
||
<div class="globe"><img src="assets/globe.png" alt=""></div>
|
||
|
||
<!-- ③ 좌상단 헤더 pill -->
|
||
<div class="header-pill"><img src="assets/header_pill.png" alt=""></div>
|
||
|
||
<!-- ④ pin 아이콘 -->
|
||
<div class="pin"><img src="assets/pin_icon.png" alt=""></div>
|
||
|
||
<!-- ⑤ "국외" 타이틀 -->
|
||
<div class="title-text">국외</div>
|
||
|
||
<!-- ⑥ 수직 화살표 체인 -->
|
||
<div class="arrow-chain"><img src="assets/arrow_chain.png" alt=""></div>
|
||
|
||
<!-- ⑦ 텍스트 버블 4개 -->
|
||
<div class="bubble bubble--1"><img src="assets/text_bubble.png" alt=""></div>
|
||
<div class="bubble bubble--2"><img src="assets/text_bubble.png" alt=""></div>
|
||
<div class="bubble bubble--3"><img src="assets/text_bubble.png" alt=""></div>
|
||
<div class="bubble bubble--4"><img src="assets/text_bubble.png" alt=""></div>
|
||
|
||
<!-- ⑧ 텍스트 라벨 4개 -->
|
||
<div class="label label--1"><p>오류에 의한 Claim 최소화</p></div>
|
||
<div class="label label--2"><p>설계 업무 시 사업 Data 정리 필수</p></div>
|
||
<div class="label label--3"><p>자체적인 기술업무 Manual 작성</p></div>
|
||
<div class="label label--4"><p>데이터 통합 및 관리</p></div>
|
||
|
||
<!-- ⑨ 번호 배지 4개 -->
|
||
<div class="badge badge--1"><img src="assets/badge_01.png" alt="1"></div>
|
||
<div class="badge badge--2"><img src="assets/badge_02.png" alt="2"></div>
|
||
<div class="badge badge--3"><img src="assets/badge_03.png" alt="3"></div>
|
||
<div class="badge badge--4"><img src="assets/badge_04.png" alt="4"></div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|