add: figma_to_html_agent/blocks/ + 변환 도구 docs 갱신
전체 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>
This commit is contained in:
42
figma_to_html_agent/blocks/1171281179/_render.py
Normal file
42
figma_to_html_agent/blocks/1171281179/_render.py
Normal file
@@ -0,0 +1,42 @@
|
||||
from selenium import webdriver
|
||||
from selenium.webdriver.chrome.options import Options
|
||||
from PIL import Image
|
||||
import os, time
|
||||
|
||||
here = os.path.dirname(os.path.abspath(__file__))
|
||||
renders = os.path.join(here, '_renders')
|
||||
os.makedirs(renders, exist_ok=True)
|
||||
|
||||
opts = Options()
|
||||
opts.add_argument('--headless=new')
|
||||
opts.add_argument('--hide-scrollbars')
|
||||
opts.add_argument('--force-device-scale-factor=1')
|
||||
opts.add_argument('--window-size=1600,900')
|
||||
d = webdriver.Chrome(options=opts)
|
||||
|
||||
p = os.path.join(here, 'index.html').replace(os.sep, '/')
|
||||
d.get('file:///' + p)
|
||||
time.sleep(2.0)
|
||||
full_png = os.path.join(renders, '_full.png')
|
||||
d.save_screenshot(full_png)
|
||||
|
||||
r = d.execute_script(
|
||||
'const r=document.querySelector(".slide").getBoundingClientRect();'
|
||||
'return [r.x,r.y,r.width,r.height];'
|
||||
)
|
||||
print('slide bounds:', r)
|
||||
Image.open(full_png).crop(
|
||||
(int(r[0]), int(r[1]), int(r[0]+r[2]), int(r[1]+r[3]))
|
||||
).save(os.path.join(renders, 'slide.png'))
|
||||
|
||||
b = d.execute_script(
|
||||
'const r=document.querySelector(".block").getBoundingClientRect();'
|
||||
'return [r.x,r.y,r.width,r.height];'
|
||||
)
|
||||
print('block bounds:', b)
|
||||
Image.open(full_png).crop(
|
||||
(int(b[0]), int(b[1]), int(b[0]+b[2]), int(b[1]+b[3]))
|
||||
).save(os.path.join(renders, 'block.png'))
|
||||
|
||||
d.quit()
|
||||
print('OK')
|
||||
BIN
figma_to_html_agent/blocks/1171281179/_renders/_full.png
Normal file
BIN
figma_to_html_agent/blocks/1171281179/_renders/_full.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 244 KiB |
BIN
figma_to_html_agent/blocks/1171281179/_renders/block.png
Normal file
BIN
figma_to_html_agent/blocks/1171281179/_renders/block.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 235 KiB |
BIN
figma_to_html_agent/blocks/1171281179/_renders/slide.png
Normal file
BIN
figma_to_html_agent/blocks/1171281179/_renders/slide.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 238 KiB |
BIN
figma_to_html_agent/blocks/1171281179/_renders/slide_2x.png
Normal file
BIN
figma_to_html_agent/blocks/1171281179/_renders/slide_2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
62
figma_to_html_agent/blocks/1171281179/analysis.md
Normal file
62
figma_to_html_agent/blocks/1171281179/analysis.md
Normal file
@@ -0,0 +1,62 @@
|
||||
# Frame 1171281179 — 효율적인 정보의 관리와 활용 (What/How/When)
|
||||
|
||||
## 내용 설명
|
||||
|
||||
효율적인 정보의 관리와 활용을 What(무슨 정보)·How(어떻게 관리)·
|
||||
When(언제 활용) 3가지 관점으로 정리하는 프레임워크 디자인. 3개
|
||||
섹션을 가로/세로로 분할해 각 관점별 내용을 병렬 제시. 정보
|
||||
관리/활용 프레임워크 3관점·What/How/When 방법론·효율성 체계
|
||||
정리에 적합. 주체별 나열·필수요건 나열(기술/사람/자연)·2개
|
||||
비교·4개 이상 항목·시간 순서 단계·단일 관점 심층에는 부적합.
|
||||
|
||||
## 후보 키워드
|
||||
|
||||
What, How, 무슨정보, 정보관리, 정보활용, 효율성
|
||||
|
||||
## 정제 Anchor Sets
|
||||
|
||||
- **what_how_when**: What, How, 무슨정보 _[min_hits=2, cap=0.75, exempt_if≥0.5]_
|
||||
- note: What/How/When은 범용 영어 의문사. 둘 이상 등장해도 이 템플릿 주제라 단정 불가. 정보관리·프레임워크 맥락 방증 필요.
|
||||
- **info_management**: 정보관리, 정보활용, 효율성
|
||||
|
||||
## 구조 매칭 정보
|
||||
|
||||
- **family**: cards
|
||||
- **layout**: 3-section-framework
|
||||
- **axis**: horizontal
|
||||
- **relation_type**: parallel
|
||||
- **cardinality**: ideal 3 / min 3 / max 3
|
||||
- **slots** (7개, required 7개): title, what_label, what_body, how_label, how_body, when_label, when_body
|
||||
- **source title**: 효율적인 정보의 관리와 활용 (What/How/When)
|
||||
- **original layout**: 3-section
|
||||
|
||||
## 적합/부적합 기준
|
||||
|
||||
### suits
|
||||
- What/How/When 3관점 프레임워크
|
||||
- 정보 관리/활용 체계 정리
|
||||
- 3관점 병렬 제시
|
||||
|
||||
### not_suits
|
||||
- 주체별 나열 (발주자/시공자/설계자)
|
||||
- 필수요건 나열 (기술/사람/자연)
|
||||
- 2개 비교
|
||||
- 4개 이상 항목
|
||||
- 시간 순서 단계
|
||||
- 단일 관점 심층
|
||||
|
||||
## 재구성 허용
|
||||
|
||||
- **split**: False
|
||||
- **merge**: False
|
||||
- **infer_missing_slot**: False
|
||||
- **rewrite_label**: True
|
||||
- **rewrite_body**: True
|
||||
|
||||
## 메타
|
||||
|
||||
- schema_version: template-fit-v1 mirror
|
||||
- source_of_truth: structure_ontology.yaml + keyword_base.yaml
|
||||
- structure_content_original_tagged_by: claude-opus-4-7 (2026-04-21)
|
||||
- keyword_base_sync_at: 2026-04-22
|
||||
- anchor_sets_cleaned_at: 2026-04-22
|
||||
@@ -0,0 +1,17 @@
|
||||
# Frame 1171281179 — 효율적인 정보 관리·활용 (What/How/When)
|
||||
|
||||
## 구조
|
||||
- **layout**: 3-section
|
||||
- **detail**: 타이틀("효율적인 정보의 관리와 활용") + 3개 섹션(What·How·When) 가로/세로 분할
|
||||
|
||||
## 내용
|
||||
효율적인 정보의 관리와 활용 프레임워크 — What(무슨 정보) · How(어떻게 관리) · When(언제 활용) 3관점.
|
||||
|
||||
## 후보 키워드
|
||||
정보관리, 정보활용, What, How, When, 3섹션, 효율성, 프레임워크, 무슨정보, 어떻게관리, 언제활용
|
||||
|
||||
## 메타
|
||||
- source: texts.md + flat.md
|
||||
- schema_version: analysis-v1
|
||||
- tagged_by: claude-opus-4-7
|
||||
- tagged_at: 2026-04-21
|
||||
BIN
figma_to_html_agent/blocks/1171281179/assets/card_decor.png
Normal file
BIN
figma_to_html_agent/blocks/1171281179/assets/card_decor.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
figma_to_html_agent/blocks/1171281179/assets/title_icon.png
Normal file
BIN
figma_to_html_agent/blocks/1171281179/assets/title_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
99
figma_to_html_agent/blocks/1171281179/flat.md
Normal file
99
figma_to_html_agent/blocks/1171281179/flat.md
Normal file
@@ -0,0 +1,99 @@
|
||||
# Frame 1171281179 — 실측 기록 (flat)
|
||||
|
||||
> 원본: 1207 × 861 px (node 182:3024, file 9S6LsQyO6zlRxtiqZccOUM, page 29:373)
|
||||
> 패턴: framework-3section-label-body (좌 라벨 / 우 카드 본문, 3 섹션)
|
||||
> Scale: **min(1280/1207, 720/861) = 720/861 = 0.83624** (height fit, 1009×720 block in 1280×720 slide)
|
||||
|
||||
## 구조 (bottom-up)
|
||||
|
||||
```
|
||||
Frame 182:3024 "Frame 1171281179" (1207 × 861)
|
||||
└─ Group 182:3025 "Group 1171285821" (0, 0) 1207×861
|
||||
│
|
||||
├─ ① 헤더 (title row, 0, 0) 1166×94
|
||||
│ └─ 항목 frame 182:3027: flex gap=15, items-center
|
||||
│ ├─ icon 50×61 (green circle, 50×50 image inside) — title_icon.png
|
||||
│ └─ TEXT 182:3030 "효율적인 정보의 관리와 활용"
|
||||
│ - "효율적인 " 50px Bold, gradient 180° (#296B55 → #123328)
|
||||
│ - "정보의 관리와 활용" 65px Bold, gradient 180° (#000 → #883700)
|
||||
│ - text-shadow: 0 0 4px #322C1E
|
||||
│
|
||||
├─ ② 좌측 브라운 라벨 (3개, 282×230, rgba(50,31,9,0.8), rounded right corners r=20)
|
||||
│ ├─ 182:3033 "What" label (18, 124) — drop-shadow 0 4 2 rgba(0,0,0,0.25)
|
||||
│ │ "무슨 정보" 40px Bold white + "What" 53px Bold #FFE100 (yellow)
|
||||
│ ├─ 182:3035 "HOW" label (18, 378) — drop-shadow 동일
|
||||
│ │ "어떻게 연계" 40px + "HOW" 53px #FFE100
|
||||
│ └─ 182:3031 "WHEN" label (18, 631) — drop-shadow 없음
|
||||
│ "언제 사용" 40px + "WHEN" 53px #FFE100
|
||||
│
|
||||
├─ ③ 우측 흰 카드 (3개, 877~879×230, white bg, 3px border #A5BBB4, rounded right r=20)
|
||||
│ ├─ 182:3037 (315, 124) 877×230 ← What 카드
|
||||
│ ├─ 182:3039 (315, 378) 877×230 ← HOW 카드
|
||||
│ └─ 182:3038 (313, 631) 879×230 ← WHEN 카드
|
||||
│
|
||||
├─ ④ 우측 카드 장식 이미지 (3개, 383×177, rounded-bl r=17, 동일 src 재사용)
|
||||
│ ├─ 182:3040 image 5624 (804, 176) — card_decor.png
|
||||
│ ├─ 182:3041 image 5625 (805, 428) — 동일
|
||||
│ └─ 182:3042 image 5626 (803, 680) — 동일
|
||||
│
|
||||
├─ ⑤ 본문 텍스트 (3 섹션)
|
||||
│ ├─ 182:3043 What 본문 (321, 143) 880×193 — 35px Medium black + 40px Bold #CC5200 강조
|
||||
│ │ • 수량, CBS 내역, 단가, 공사일정, 자원 투입계획 등 [계획 정보]
|
||||
│ │ • 일일 작업수량, 실제 투입 자원 등 [공사 실행 정보]
|
||||
│ │ • 품질/안전/환경 등 점검일지, 체크리스트, 사진 등 [공사 결과]
|
||||
│ │
|
||||
│ ├─ 182:3045 HOW 본문 (319, 396) 888×194
|
||||
│ │ • 3D 형상 [산출속성과 연계]하여 S/W를 통해 정의
|
||||
│ │ • 객체별 품질 검사 기준 등은 [시방규정과 연계]하여 S/W로 정의
|
||||
│ │ • 객체별 필요정보를 Text기반 형식으로 [사용자가 입력]
|
||||
│ │
|
||||
│ └─ 182:3044 WHEN 본문 (319, 653) 868×177
|
||||
│ • [착수 전] 공정계획, 시공계획 등 계획 수립
|
||||
│ • [개별 공사 전] 시공상세도를 기반으로 한 작업 내용 확인
|
||||
│ • [개별 공사 후] 실적 관리, 공사관련 문서 작성, 업무 보고
|
||||
│
|
||||
└─ ⑥ image 3341 placeholder (656, 517) 536×311 opacity 85
|
||||
— design_context에 src 미포함. WHEN 카드 영역 내 정체 불명 placeholder.
|
||||
— 시각 영향 없으므로 생략.
|
||||
```
|
||||
|
||||
## 에셋 (2개 + 1 missing)
|
||||
|
||||
| 파일 | 의미 | 크기 | 사용 |
|
||||
|------|------|------|------|
|
||||
| `assets/title_icon.png` | 타이틀 좌측 녹색 원형 아이콘 (1171281194에서도 사용) | 50×50 | 1× |
|
||||
| `assets/card_decor.png` | 카드 우측 장식 이미지 (3D 헥사곤/패턴) | 383×177 | **3×** (재사용) |
|
||||
| (image 3341) | metadata에는 있으나 design_context 미제공 | 536×311 | 생략 |
|
||||
|
||||
## 이상 탐지 결과
|
||||
|
||||
| 검사 | 결과 |
|
||||
|------|------|
|
||||
| 회전 단일문자 | 없음 |
|
||||
| 좁은 박스 세로 텍스트 | 없음 |
|
||||
| 중복 노드 | card_decor 동일 src 3× 재사용 — 정상 |
|
||||
| Vector 좌표 metadata vs design_context | 일치 |
|
||||
| **이상한 회전 nesting** | 좌측 라벨 3개 모두 `rotate-180` 래퍼 + 내부 컨텐츠도 `rotate-180` → 시각적으로 identity. Figma 자동 레이아웃 export 부산물. CSS에서는 회전 생략하고 `border-top-right-radius/bottom-right-radius: 20px`만 적용. |
|
||||
| **이상한 image transform** | 카드 장식 3개 모두 `-scale-y-100` + `rotate-180` → 시각적으로 identity. CSS에서 transform 생략. |
|
||||
| metadata에 있으나 design_context 미제공 | image 3341 (placeholder) — 무시 |
|
||||
|
||||
## 변형 가능 축
|
||||
|
||||
- **sections[N=3] (required)** — cardinality 3 고정 (analysis.md), label + body 페어 3쌍
|
||||
- `label_kr` (required, 40px) — "무슨 정보" / "어떻게 연계" / "언제 사용"
|
||||
- `label_en` (required, 53px yellow) — "What" / "HOW" / "WHEN"
|
||||
- `body_bullets[N=3]` (required) — 본문 불릿 (35px black + 40px Bold #CC5200 강조)
|
||||
- `title` (required) — "효율적인 정보의 관리와 활용" 형태, 두 부분 폰트 사이즈 다름 (50/65)
|
||||
- `title_icon` (required) — 녹색 원형 아이콘
|
||||
- `card_decor` (optional) — 카드 우측 장식 이미지. 없으면 흰 카드만
|
||||
|
||||
## Sub-patterns
|
||||
|
||||
- `label-body-rounded-right-pair` — 좌(브라운 라벨, rounded right) / 우(흰 카드, rounded right + border) 페어
|
||||
- `bullet-list-with-highlight` — 불릿 리스트에서 핵심어 색상/폰트 강조 (#CC5200, +5px)
|
||||
- `gradient-bg-clip-text-title` — 멀티 폰트 사이즈 + 멀티 색 그라디언트 텍스트 헤더 (1171281194의 title-row와 비슷)
|
||||
|
||||
## 임시 보정 (1:1, 템플릿화 시 재고려)
|
||||
|
||||
- 좌측 라벨의 `drop-shadow`는 What/HOW만 적용, WHEN에는 미적용 — Figma에서 의도된 차이일 수 있음 (검토 필요). 우선 보존.
|
||||
- 본문 tracking 값(letter-spacing) 마이크로 조정 (-1.75 ~ -2.8px). 템플릿에서는 자연 wrap에 맡김 권장.
|
||||
237
figma_to_html_agent/blocks/1171281179/index.html
Normal file
237
figma_to_html_agent/blocks/1171281179/index.html
Normal file
@@ -0,0 +1,237 @@
|
||||
<!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>
|
||||
33
figma_to_html_agent/blocks/1171281179/texts.md
Normal file
33
figma_to_html_agent/blocks/1171281179/texts.md
Normal file
@@ -0,0 +1,33 @@
|
||||
# Frame 1171281179 — 텍스트 (TF-IDF 매칭용)
|
||||
|
||||
> 프레임 안의 모든 텍스트를 빠짐없이 추출.
|
||||
|
||||
## 타이틀
|
||||
효율적인 정보의 관리와 활용
|
||||
|
||||
## 섹션1 — 무슨 정보 (What)
|
||||
무슨 정보
|
||||
What
|
||||
|
||||
### 본문
|
||||
- 수량, CBS 내역, 단가, 공사일정, 자원 투입계획 등 **계획 정보**
|
||||
- 일일 작업수량, 실제 투입 자원 등 **공사 실행 정보**
|
||||
- 품질/안전/환경 등 점검일지, 체크리스트, 사진 등 **공사 결과**
|
||||
|
||||
## 섹션2 — 어떻게 연계 (HOW)
|
||||
어떻게 연계
|
||||
HOW
|
||||
|
||||
### 본문
|
||||
- 3D 형상 **산출속성과 연계**하여 S/W를 통해 정의
|
||||
- 객체별 품질 검사 기준 등은 **시방규정과 연계**하여 S/W로 정의
|
||||
- 객체별 필요정보를 Text기반 형식으로 **사용자가 입력**
|
||||
|
||||
## 섹션3 — 언제 사용 (WHEN)
|
||||
언제 사용
|
||||
WHEN
|
||||
|
||||
### 본문
|
||||
- **착수 전** 공정계획, 시공계획 등 계획 수립
|
||||
- **개별 공사 전** 시공상세도를 기반으로 한 작업 내용 확인
|
||||
- **개별 공사 후** 실적 관리, 공사관련 문서 작성, 업무 보고
|
||||
Reference in New Issue
Block a user