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:
303
figma_to_html_agent/DISCUSSION-SUMMARY-20260411.md
Normal file
303
figma_to_html_agent/DISCUSSION-SUMMARY-20260411.md
Normal file
@@ -0,0 +1,303 @@
|
|||||||
|
# Design Agent 구조 재정리를 위한 논의 요약 (2026-04-11)
|
||||||
|
|
||||||
|
> 이 문서는 figma_to_html_agent 세션에서 논의된 핵심 사항을 정리한 것.
|
||||||
|
> design_agent 총괄 AI에게 전달하여 전체 파이프라인 재구성에 참고하기 위한 브리핑.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. Figma → HTML 변환 구조
|
||||||
|
|
||||||
|
### 1.1 전체 흐름
|
||||||
|
|
||||||
|
```
|
||||||
|
피그마 프레임 (디자인 원본)
|
||||||
|
↓ MCP 도구로 데이터 수집 (구조, 스타일, 스크린샷)
|
||||||
|
실측 기록부 (flat.md)
|
||||||
|
↓ 그라데이션 수학 변환 + CSS 작성
|
||||||
|
블록 HTML (1:1 정적 변환물)
|
||||||
|
↓ Selenium 자동 검증
|
||||||
|
블록 라이브러리 등록 (catalog.yaml)
|
||||||
|
```
|
||||||
|
|
||||||
|
### 1.2 산출물 3종 세트
|
||||||
|
|
||||||
|
| 파일 | 역할 | 비유 |
|
||||||
|
|------|------|------|
|
||||||
|
| **flat.md** | 원본 피그마의 모든 요소 위치·크기·각도·폰트·색상 기록 | 현장 실측 기록부 |
|
||||||
|
| **{블록}.html** | HTML+CSS+이미지 참조. 실제 렌더되는 파일 | 표준 설계도면 |
|
||||||
|
| **catalog.yaml** | 블록 용도·조건·슬롯 메타 정보 | 건축 자재 카탈로그 |
|
||||||
|
|
||||||
|
### 1.3 AI vs 코드 역할 분담
|
||||||
|
|
||||||
|
| 구간 | 주체 | 오차 |
|
||||||
|
|------|------|------|
|
||||||
|
| 데이터 수집 (좌표, 색, 폰트) | **코드** (Figma MCP) | 0 |
|
||||||
|
| 그라데이션 좌표→각도 변환 | **코드** (gradient_math.py) | 0 |
|
||||||
|
| HTML 렌더링 | **코드** (Selenium) | 0 |
|
||||||
|
| 구조 해석, HTML 설계, 검증 판단 | **AI** | 존재 |
|
||||||
|
|
||||||
|
**핵심:** AI는 블록 템플릿을 **1회 설계**하는 데만 관여. 이후 런타임 사용은 **100% 코드** (Jinja2 + CSS).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. 블록 선택 방식 — 결론: TF-IDF 직접 매칭
|
||||||
|
|
||||||
|
### 2.1 검토한 방식들
|
||||||
|
|
||||||
|
| 방식 | 적합성 | 이유 |
|
||||||
|
|------|--------|------|
|
||||||
|
| **FAISS (임베딩 벡터)** | ❌ 불필요 | 35개 블록에 오버스펙. 같은 도메인 텍스트는 벡터가 비슷해서 구분 어려움 |
|
||||||
|
| **RAG (LLM 판단)** | ❌ 불필요 | 입력이 이미 구조화(MDX)되어 있고 블록 수가 적어 AI 판단 불필요 |
|
||||||
|
| **BM25 + Kiwi** | ⚠️ 가능 | catalog 설명 품질에 의존. 설명이 잘 되어있으면 작동 |
|
||||||
|
| **구조 태그 매칭 (코드)** | ✅ 가능 | MDX 파싱 → item_count, relation_type → catalog 태그 비교 |
|
||||||
|
| **TF-IDF 직접 매칭** | ✅ **최적** | 디자인 안의 실제 텍스트와 MDX 텍스트를 직접 비교 |
|
||||||
|
|
||||||
|
### 2.2 TF-IDF 직접 매칭이 최적인 이유
|
||||||
|
|
||||||
|
**핵심 전제:** MDX 텍스트와 Figma 디자인 안의 텍스트가 **같은 원본 문서에서 나온 것**이라 핵심 키워드가 자연스럽게 겹침.
|
||||||
|
|
||||||
|
```
|
||||||
|
[1회성 사전 준비]
|
||||||
|
각 Figma 디자인(35개)에서 텍스트 추출 → 블록별 텍스트 저장
|
||||||
|
|
||||||
|
[매칭 실행]
|
||||||
|
MDX 텍스트 → TF-IDF로 35개 블록 텍스트와 유사도 계산 → 최고 점수 디자인 선택 → 텍스트 교체
|
||||||
|
```
|
||||||
|
|
||||||
|
**장점:**
|
||||||
|
- AI 비용 0원 (100% 코드)
|
||||||
|
- 결정론적 (같은 입력 → 같은 결과)
|
||||||
|
- 35개 전수 비교에 0.01초
|
||||||
|
- 디버깅 용이 ("이 단어들이 겹쳐서 선택됨" 즉시 설명 가능)
|
||||||
|
- catalog.yaml 설명 품질에 의존 안 함 (디자인 안의 실제 텍스트로 매칭)
|
||||||
|
- FAISS, RAG, 임베딩 모델 등 복잡한 인프라 불필요
|
||||||
|
|
||||||
|
**실증:** BM25 테스트에서 콘텐츠A(기술/사람/자연)→3열블록, 콘텐츠B(Process/Product)→2열블록 정확 매칭 확인.
|
||||||
|
|
||||||
|
### 2.3 이 방식이 성립하는 조건
|
||||||
|
|
||||||
|
1. 블록 수가 30~35개 수준 (소규모)
|
||||||
|
2. 각 디자인의 텍스트가 서로 충분히 다름 (같은 문서 내 다른 섹션)
|
||||||
|
3. MDX 콘텐츠가 Figma 디자인의 원본 텍스트와 동일 도메인
|
||||||
|
4. 매칭 후 "텍스트만 업데이트"하는 구조 (디자인 구조 자체는 변경 안 함)
|
||||||
|
|
||||||
|
**한계 시점:** 블록이 수백 개가 되거나, 완전히 새로운 도메인 콘텐츠가 들어오면 구조 분석(AI) 또는 임베딩 검색 추가 필요.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. 전체 파이프라인 재정리 제안
|
||||||
|
|
||||||
|
### 3.1 현재 파이프라인 (복잡)
|
||||||
|
|
||||||
|
```
|
||||||
|
MDX → Kei 실장(AI) 구조분석 → catalog 태그 매칭(코드) → 블록 선택
|
||||||
|
→ Kei 편집자(AI) 텍스트 편집 → Jinja2 렌더(코드) → 슬라이드
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3.2 단순화된 파이프라인 (제안)
|
||||||
|
|
||||||
|
```
|
||||||
|
MDX → TF-IDF 매칭(코드) → 디자인 선택 → 텍스트 교체(코드) → 슬라이드
|
||||||
|
```
|
||||||
|
|
||||||
|
**AI가 필요한 시점:**
|
||||||
|
- 매칭 결과가 애매할 때 (점수 차이가 미미한 후보 2~3개 중 선택)
|
||||||
|
- 텍스트가 디자인 공간에 안 맞을 때 (요약/편집 필요)
|
||||||
|
- 새로운 패턴의 디자인이 필요할 때 (블록 신규 제작)
|
||||||
|
|
||||||
|
**AI가 불필요한 시점:**
|
||||||
|
- 디자인 선택 (TF-IDF 매칭)
|
||||||
|
- 텍스트 삽입 (Jinja2 치환)
|
||||||
|
- 렌더링 (CSS + 브라우저)
|
||||||
|
|
||||||
|
### 3.3 블록 선택에서 AI 개입 최소화 구조
|
||||||
|
|
||||||
|
```
|
||||||
|
MDX 텍스트
|
||||||
|
↓
|
||||||
|
[코드] TF-IDF 매칭 → 후보 1~3개 + 점수
|
||||||
|
↓
|
||||||
|
점수 차이 크면 (예: 1위가 2위보다 2배 이상) → 코드가 자동 확정
|
||||||
|
점수 차이 작으면 → AI가 후보 중 최종 선택 (최소 개입)
|
||||||
|
↓
|
||||||
|
[코드] 텍스트 교체 + 렌더
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. Figma MCP 관련 발견 사항
|
||||||
|
|
||||||
|
### 4.1 MCP 2종류
|
||||||
|
|
||||||
|
| MCP | 제공자 | 장단점 |
|
||||||
|
|-----|-------|--------|
|
||||||
|
| Framelink Figma MCP | 커뮤니티 (REST API) | rotation/blend mode 미제공 |
|
||||||
|
| Figma Desktop Dev Mode MCP | Figma 공식 (로컬 SSE) | rotation/blend/정확한 CSS 모두 제공 |
|
||||||
|
|
||||||
|
**결론:** Figma Desktop Dev Mode MCP (`127.0.0.1:3845/sse`)가 정답. Framelink MCP는 rotation 등 핵심 정보 부재로 한계.
|
||||||
|
|
||||||
|
### 4.2 Figma Dev Mode HTML 직접 활용
|
||||||
|
|
||||||
|
Figma Dev Mode에서 프레임 전체를 HTML 코드로 export 가능:
|
||||||
|
- transform: rotate() 포함
|
||||||
|
- background-blend-mode 포함
|
||||||
|
- 모든 좌표/크기/색상 포함
|
||||||
|
- 이 HTML을 기반으로 scale 조정 후 직접 사용 가능
|
||||||
|
|
||||||
|
### 4.3 MCP 한계 (확인됨)
|
||||||
|
|
||||||
|
- rotation 속성 미제공 (Framelink MCP)
|
||||||
|
- dimensions가 bounding box (회전 포함된 크기) — 원본 크기와 다를 수 있음
|
||||||
|
- gradient 각도: Figma 좌표계 vs CSS 좌표계 차이 → 수학 변환 필요
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. CSS 구현 원칙
|
||||||
|
|
||||||
|
### 5.1 왜 SVG가 아닌 CSS인가
|
||||||
|
|
||||||
|
| 이유 | 설명 |
|
||||||
|
|------|------|
|
||||||
|
| **한글 텍스트** | CSS는 자동 줄바꿈·어절 처리. SVG `<text>`는 수작업 줄바꿈 |
|
||||||
|
| **레이아웃** | CSS flex/grid/aspect-ratio. SVG는 레이아웃 시스템 없음 |
|
||||||
|
| **혼합 콘텐츠** | 도형+이미지+텍스트 섞기. HTML이 자연스러움 |
|
||||||
|
| **템플릿화** | Jinja2 변수 치환이 CSS에서 자연스러움 |
|
||||||
|
| **예외** | 곡선 아크, 복잡한 필터 → SVG/PNG 유지 |
|
||||||
|
|
||||||
|
### 5.2 그라데이션 수학 변환
|
||||||
|
|
||||||
|
- SVG: 좌표 기반 (x1, y1, x2, y2)
|
||||||
|
- CSS: 각도 기반 (Xdeg)
|
||||||
|
- 변환: `atan2(y2-y1, x2-x1)` → `scripts/gradient_math.py`
|
||||||
|
- 회전+그라데이션 합성: 래퍼 구조(`transform: rotate()`)로 분리해서 수학 합성 회피
|
||||||
|
|
||||||
|
### 5.3 회전 처리
|
||||||
|
|
||||||
|
- 도형 자체를 회전하지 않고, **래퍼(wrapper) 컨테이너를 회전**
|
||||||
|
- border-radius와 gradient가 같이 돌아감
|
||||||
|
- Figma Dev Mode가 자동으로 이 래퍼 구조를 생성해줌
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. 핵심 결론
|
||||||
|
|
||||||
|
1. **블록 선택은 TF-IDF 직접 매칭으로 충분** — RAG/FAISS 불필요
|
||||||
|
2. **AI는 "블록 템플릿 1회 제작"에만 관여** — 런타임은 100% 코드
|
||||||
|
3. **Figma Desktop Dev Mode MCP가 정답** — Framelink MCP는 한계
|
||||||
|
4. **CSS 우선, SVG는 곡선만** — 한글 텍스트 처리와 템플릿화 때문
|
||||||
|
5. **복잡한 구조(RAG/임베딩/구조분석)보다 단순한 구조(TF-IDF+코드)가 현재 규모에 최적**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 7. 산출물 구조 확정 (프레임당 4종)
|
||||||
|
|
||||||
|
### 7.1 프레임별 산출물
|
||||||
|
|
||||||
|
```
|
||||||
|
figma_to_html_agent/
|
||||||
|
├── CLAUDE.md, PROCESS.md, RULES.md ... ← 프로세스 문서
|
||||||
|
├── scripts/gradient_math.py ← 수학 변환
|
||||||
|
├── blocks_index.md ← 변환 완료 인덱스
|
||||||
|
│
|
||||||
|
├── block-tests/ ← 프레임별 산출물
|
||||||
|
│ ├── {slug}.html ← ① HTML 블록
|
||||||
|
│ ├── {slug}_flat.md ← ② 노드별 실측 기록
|
||||||
|
│ └── {slug}_texts.md ← ③ 텍스트만 모은 목록 (TF-IDF용, 신규)
|
||||||
|
│
|
||||||
|
└── texts_index/ ← TF-IDF 매칭 인덱스 (신규)
|
||||||
|
└── (35개 프레임 텍스트 인덱스)
|
||||||
|
```
|
||||||
|
|
||||||
|
- ①②는 기존 프로세스
|
||||||
|
- ③은 신규: 프레임 안의 **모든 텍스트를 빠짐없이** 추출해서 별도 목록으로 저장
|
||||||
|
- texts_index/는 ③들을 모아 TF-IDF 인덱스로 구축
|
||||||
|
|
||||||
|
### 7.2 ③ texts.md가 필요한 이유
|
||||||
|
|
||||||
|
현재 flat.md의 문제:
|
||||||
|
- 텍스트가 노드 계층 설명 안에 **산발적으로 흩어져** 있음
|
||||||
|
- 일부 노드는 텍스트 내용이 **생략**됨 (예: `17:1941 ~ 17:1952 (12개)`)
|
||||||
|
- TF-IDF 매칭용으로 쓰려면 프레임별 **텍스트만 모은 깨끗한 목록** 필요
|
||||||
|
|
||||||
|
### 7.3 산출물의 사용처
|
||||||
|
|
||||||
|
```
|
||||||
|
① {slug}.html → templates/에 프로모션 (블록 렌더링용)
|
||||||
|
② {slug}_flat.md → yaml 메타 정보 + HTML 제작 근거
|
||||||
|
③ {slug}_texts.md → TF-IDF 인덱스 (블록 자동 선택용)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 8. TF-IDF 선택 근거 (왜 다른 유사도 방법이 아닌가)
|
||||||
|
|
||||||
|
### 8.1 매칭 신호 = "단어 겹침"
|
||||||
|
|
||||||
|
MDX와 Figma 텍스트는 같은 원본 문서에서 나온 것이라 **같은 단어가 직접 겹침**.
|
||||||
|
의미 추론이 아니라 단어 일치가 매칭 근거.
|
||||||
|
|
||||||
|
### 8.2 IDF의 역할
|
||||||
|
|
||||||
|
```
|
||||||
|
"건설" → 35개 프레임 전부에 등장 → IDF 낮음 → 구분 못 함
|
||||||
|
"3D모델" → 3개 프레임에만 → IDF 높음 → 구분 가능
|
||||||
|
"Copy&Paste" → 1개 프레임에만 → IDF 매우 높음 → 확정적
|
||||||
|
```
|
||||||
|
|
||||||
|
"모든 프레임에 나오는 흔한 단어는 무시, 특정 프레임에만 나오는 희귀 단어는 강조"
|
||||||
|
|
||||||
|
### 8.3 다른 방법이 안 맞는 이유
|
||||||
|
|
||||||
|
| 방법 | 문제 |
|
||||||
|
|------|------|
|
||||||
|
| FAISS/임베딩 | 같은 도메인 단어를 **뭉개서** 프레임 구분 못 함. "병렬"≈"교차"로 취급 |
|
||||||
|
| RAG | 35개에 AI 판단은 오버스펙. 비용 발생 |
|
||||||
|
| Jaccard | 단어 희귀성 무시. "건설"이든 "Copy&Paste"든 동일 1점 |
|
||||||
|
| Word2Vec/BERT | 의미 유사도는 불필요 (단어가 직접 겹치므로). 한국어 도메인 모델 품질 불확실 |
|
||||||
|
| BM25 | 가능하지만 35개 수준에서 TF-IDF와 차이 없음. TF-IDF가 더 단순 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 9. 정리 완료 현황 (2026-04-16)
|
||||||
|
|
||||||
|
### 9.1 templates/ (완료)
|
||||||
|
|
||||||
|
```
|
||||||
|
templates/
|
||||||
|
├── blocks/
|
||||||
|
│ └── slide-base.html ← 유일하게 남긴 것
|
||||||
|
└── catalog.yaml ← 초기화
|
||||||
|
```
|
||||||
|
|
||||||
|
기존 104개 파일 삭제 완료.
|
||||||
|
|
||||||
|
### 9.2 figma_to_html_agent/ (완료)
|
||||||
|
|
||||||
|
```
|
||||||
|
figma_to_html_agent/
|
||||||
|
├── CLAUDE.md, PROCESS.md, MATH.md, RULES.md, PROCESS-CONTROL.md, README.md
|
||||||
|
├── DISCUSSION-SUMMARY-20260411.md
|
||||||
|
├── INSIGHT-GRADIENT.md
|
||||||
|
├── blocks_index.md
|
||||||
|
└── scripts/gradient_math.py
|
||||||
|
```
|
||||||
|
|
||||||
|
구 파일(FIGMA-EXTRACTION.md, block_index.faiss, figma_beps_full.json, block-tests/, figma-analysis/ 등) 전부 삭제 완료.
|
||||||
|
|
||||||
|
### 9.3 다음 단계
|
||||||
|
|
||||||
|
깨끗한 상태에서 35개 프레임을 1개씩 재추출:
|
||||||
|
1. Figma Desktop MCP 또는 Dev Mode HTML로 데이터 수집
|
||||||
|
2. 프레임당 3종 산출물 생성 (html + flat.md + texts.md)
|
||||||
|
3. texts_index/ 에 TF-IDF 인덱스 누적
|
||||||
|
4. templates/에 프로모션 (사용자 승인 후)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 10. design_agent 총괄에게 전달할 질문/제안
|
||||||
|
|
||||||
|
1. **Phase Q 블록 선택 단계**를 TF-IDF 직접 매칭으로 단순화할 수 있는가?
|
||||||
|
2. **Kei 실장의 "구조 분석" 역할**이 TF-IDF 매칭으로 대체 가능한 범위는?
|
||||||
|
3. **catalog.yaml의 content_structure/when/not_for 필드**를 유지하되, 1차 매칭은 TF-IDF로 하고 AI는 fallback으로만 쓰는 구조가 합리적인가?
|
||||||
|
4. **Figma Desktop Dev Mode MCP**를 PROCESS.md STEP 1~3에 공식 반영할 것인가?
|
||||||
|
5. **산출물 3종 → 4종 (texts.md 추가)** 으로 PROCESS.md 업데이트할 것인가?
|
||||||
294
figma_to_html_agent/HARNESS.md
Normal file
294
figma_to_html_agent/HARNESS.md
Normal file
@@ -0,0 +1,294 @@
|
|||||||
|
# 변환 하네스 (Conversion Harness)
|
||||||
|
|
||||||
|
> **이 체크리스트의 모든 항목을 순서대로 통과해야 한다. 건너뛰기 금지.**
|
||||||
|
> 각 항목에서 "확인"이 안 되면 다음으로 넘어가지 않는다.
|
||||||
|
> **2층 구조: 1층(행동 통제) → 2층(구현)**. 1층을 통과하지 않으면 2층 진입 금지.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# ═══ 1층: 행동 통제 하네스 ═══
|
||||||
|
|
||||||
|
## A. 사용자 요청 해석
|
||||||
|
|
||||||
|
- [ ] 사용자가 실제로 말한 문제를 **한 문장으로** 다시 적었는가?
|
||||||
|
- [ ] 내가 하려는 수정이 **그 문제에 직접 대응**하는가?
|
||||||
|
- [ ] 사용자가 말하지 않은 구조 변경을 하려면 **사전 합의**가 필요한가?
|
||||||
|
- [ ] "이것도 같이 바꾸면 좋겠다"는 생각이 들면 → **멈추고 물어본다**
|
||||||
|
|
||||||
|
## B. 블록 분류 (patch / rewrite / hold)
|
||||||
|
|
||||||
|
작업 시작 전 반드시 분류하고 근거를 3줄로 적는다.
|
||||||
|
|
||||||
|
```
|
||||||
|
이 블록은 무엇인가?
|
||||||
|
├── patch — 구조는 살아 있고 특정 부분만 수정하면 됨
|
||||||
|
│ 근거: ___
|
||||||
|
├── rewrite — 구조 자체가 틀어져서 처음부터 다시 해야 함
|
||||||
|
│ 근거: ___
|
||||||
|
└── hold — 지금 건드리지 않고 보류
|
||||||
|
근거: ___
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] 분류 결정함 → `blocks/{id}/classification.md`에 기록
|
||||||
|
- [ ] 근거 3줄 적음
|
||||||
|
- [ ] **patch가 아닌 블록에 임의 구조 전환 금지**
|
||||||
|
- [ ] **rewrite 블록은 사용자 확인 후에만 착수**
|
||||||
|
|
||||||
|
## C. 변경 범위 제한
|
||||||
|
|
||||||
|
- [ ] **이번 수정의 단일 목표**를 한 문장으로 적었는가?
|
||||||
|
- [ ] 이번 수정에서 바꾸는 축은 **1개**인가?
|
||||||
|
- 예: spacing만 / bullet model만 / gradient CSS 변환만
|
||||||
|
- [ ] 다른 축은 건드리지 않았는가?
|
||||||
|
- [ ] 현재 정상 동작하는 요소를 **변경 금지 목록**으로 적었는가?
|
||||||
|
|
||||||
|
```
|
||||||
|
변경 대상: ___
|
||||||
|
변경하지 않는 것: ___
|
||||||
|
```
|
||||||
|
|
||||||
|
## D. 변경 전 기록
|
||||||
|
|
||||||
|
- [ ] 수정 전 현재 값/구조 기록 (되돌릴 수 있도록)
|
||||||
|
- [ ] 변경 전 렌더링 스크린샷 baseline 저장
|
||||||
|
|
||||||
|
## E. 중단 조건
|
||||||
|
|
||||||
|
아래 상황 발생 시 **즉시 멈추고 사용자에게 보고**:
|
||||||
|
|
||||||
|
- [ ] 인코딩 깨짐 발견
|
||||||
|
- [ ] MCP 좌표와 렌더 결과가 크게 다름 (30px+ 이상 차이)
|
||||||
|
- [ ] 패치하려던 블록이 구조 붕괴 상태
|
||||||
|
- [ ] 한 군데 고치니 다른 곳이 깨짐 (cascade failure)
|
||||||
|
- [ ] 사용자 요청과 다른 방향으로 가고 있음을 인지
|
||||||
|
|
||||||
|
→ patch 중단
|
||||||
|
→ rewrite required로 분류 전환
|
||||||
|
→ `blocks/{id}/STATUS.md` 남기고 다음 블록으로
|
||||||
|
|
||||||
|
## F. 완료 판정
|
||||||
|
|
||||||
|
patch 또는 rewrite가 끝났다고 판단하기 전에:
|
||||||
|
|
||||||
|
- [ ] 사용자가 지적한 문제가 **실제로 사라졌는가** (렌더링 확인)
|
||||||
|
- [ ] 새로 생긴 **부작용이 없는가**
|
||||||
|
- [ ] baseline 대비 **더 나빠진 요소가 없는가**
|
||||||
|
- [ ] 아래 4개 산출물을 남겼는가:
|
||||||
|
- before screenshot
|
||||||
|
- after screenshot
|
||||||
|
- 변경 요약 3줄
|
||||||
|
- classification 결과 (patch/rewrite/hold)
|
||||||
|
|
||||||
|
위 전부 통과해야 "완료". 하나라도 안 되면 미완료.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# ═══ 2층: 구현 하네스 ═══
|
||||||
|
|
||||||
|
> **1층 A~F를 모두 통과한 후에만 아래 진행**
|
||||||
|
|
||||||
|
## 0. 시작 전 — 규칙 파일 읽기 + 행동 원칙 확인
|
||||||
|
|
||||||
|
- [ ] RULES.md 읽음 (R1~R19 전부)
|
||||||
|
- [ ] PROCESS-CONTROL.md 읽음 (규칙 1~8)
|
||||||
|
- [ ] PROCESS.md 읽음 (STEP 0~10)
|
||||||
|
- [ ] HARNESS.md 읽음 (이 파일)
|
||||||
|
- [ ] blocks_index.md 읽음 (기존 패턴 확인)
|
||||||
|
|
||||||
|
### 행동 원칙 (PROCESS-CONTROL에서, 매 작업 전 상기)
|
||||||
|
- [ ] **소스는 Figma 데이터다** — PNG를 보고 판단하지 않음 (규칙1)
|
||||||
|
- [ ] **이미지 해석 금지** — 멀티모달로 gradient 방향 추측 안 함 (규칙2)
|
||||||
|
- [ ] **작동하는 것은 건드리지 않는다** — A만 문제면 A만 수정 (규칙3)
|
||||||
|
- [ ] **한 번에 하나만 바꾼다** — gradient 각도와 border-radius 동시 변경 금지 (규칙4)
|
||||||
|
- [ ] **사용자가 말한 것만 한다** — 자의적 해석 금지 (규칙5)
|
||||||
|
- [ ] **찍어맞추기 금지** — 값을 바꾸기 전에 WHY를 먼저 설명 (규칙6)
|
||||||
|
- [ ] **쉬운 전면 재작성 금지** — 80점에서 2개 고칠 때 구조를 갈아엎지 않음 (규칙7)
|
||||||
|
- [ ] **MCP 데이터 전수 반영** — "핵심만", "단순화" 금지 (규칙8)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. MCP 데이터 수집
|
||||||
|
|
||||||
|
- [ ] get_metadata 호출 → 모든 노드 ID, 위치, 크기 확보
|
||||||
|
- [ ] get_design_context 호출 → gradient, font, style, rotation 확보
|
||||||
|
- [ ] 에셋 URL 목록 추출
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. 에셋 분류 — R9 CSS vs 이미지 판정 (에셋마다 반드시 수행)
|
||||||
|
|
||||||
|
각 에셋에 대해:
|
||||||
|
|
||||||
|
```
|
||||||
|
이 에셋이 뭔가?
|
||||||
|
├── 단순 사각형 + gradient → CSS linear-gradient + border-radius [R9]
|
||||||
|
├── 단순 원 + gradient → CSS border-radius:50% + linear-gradient [R9]
|
||||||
|
├── 단순 직선/점선 → CSS border [R9]
|
||||||
|
├── 단색 사각형 → CSS background-color [R9]
|
||||||
|
├── plus-darker blend → multiply로 교체 [R10]
|
||||||
|
└── 복잡 path / 사진 / 아이콘 / 곡선 → 이미지 유지
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] 모든 에셋 분류 완료
|
||||||
|
- [ ] CSS 대체 가능한 에셋은 다운로드하지 않음
|
||||||
|
- [ ] 이미지 유지 에셋만 다운로드
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. gradient 변환 — R9 CSS 대체 에셋
|
||||||
|
|
||||||
|
CSS로 대체하기로 한 에셋마다:
|
||||||
|
|
||||||
|
- [ ] SVG 파일을 열어 linearGradient 데이터 추출
|
||||||
|
- [ ] gradient_math.py로 CSS linear-gradient 변환 (인라인 복사 금지)
|
||||||
|
- [ ] viewBox padding이 있으면 R12 remap 적용
|
||||||
|
- [ ] 변환 결과 기록
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. 구조 결정 — R17 레이아웃 타입
|
||||||
|
|
||||||
|
```
|
||||||
|
이 블록의 레이아웃은?
|
||||||
|
├── 순차 행 (비교표, 이슈 목록, 불릿 리스트)
|
||||||
|
│ → flex column (행 간) + flex row (행 내부) [R17]
|
||||||
|
│ → 텍스트 늘면 행이 밀림
|
||||||
|
│
|
||||||
|
├── 표 (행×열 구조)
|
||||||
|
│ → CSS grid [R17]
|
||||||
|
│ → border가 곧 그리드 라인
|
||||||
|
│ → 셀 높이 auto
|
||||||
|
│
|
||||||
|
├── 2D 다이어그램 (원, 노드, 겹침)
|
||||||
|
│ → absolute + 명시 height + zoom [R19]
|
||||||
|
│ → 겹침이 있으므로 flex 불가
|
||||||
|
│
|
||||||
|
└── 좌우 분할 (좌:이미지 / 우:목록)
|
||||||
|
→ display:flex (좌:flex-none / 우:flex column)
|
||||||
|
```
|
||||||
|
|
||||||
|
- [ ] 레이아웃 타입 결정
|
||||||
|
- [ ] zoom 적용 (transform:scale 금지) [R19]
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. HTML 작성 — 요소별 체크
|
||||||
|
|
||||||
|
### 5-A. DOM 순서
|
||||||
|
- [ ] MCP metadata 순서 = HTML DOM 순서 (나중 요소가 위에 렌더)
|
||||||
|
- [ ] z-index 별도 지정 필요 없음 (DOM 순서로 해결)
|
||||||
|
|
||||||
|
### 5-B. 텍스트 요소
|
||||||
|
- [ ] 본문 텍스트에 position:absolute 사용 안 함 [R17]
|
||||||
|
- [ ] overflow:hidden으로 텍스트 숨기기 안 함 [R17]
|
||||||
|
- [ ] 고정 height로 텍스트 제한 안 함 [R17]
|
||||||
|
- [ ] word-break: keep-all 적용 [R14]
|
||||||
|
- [ ] descender 보정 필요한가? [R1]
|
||||||
|
- line-height / font-size < 1.448 (Noto Sans KR) → padding-bottom 계산
|
||||||
|
- [ ] gradient 텍스트인가? → background-clip: text [R4]
|
||||||
|
- [ ] 다중 fills인가? → 첫 번째 불투명 fill만 사용 [R5]
|
||||||
|
- [ ] 중복 노드인가? (동일 좌표 + 동일 내용) → 1개만 렌더 [R6]
|
||||||
|
- [ ] 세로 텍스트인가? (width < fontSize × 0.8) → `<br>` 줄바꿈, writing-mode 사용 금지 [R3]
|
||||||
|
- [ ] vertical center 정렬이 필요한가? → flex justify-center [R15]
|
||||||
|
- [ ] 불필요한 `<br>` 삽입 안 함 (자연 wrap에 맡김)
|
||||||
|
|
||||||
|
### 5-C. 불릿/마커 리스트 [R13]
|
||||||
|
- [ ] `<ul><li>` 사용 안 함
|
||||||
|
- [ ] R13 flex pair 구조 사용:
|
||||||
|
```html
|
||||||
|
<div class="bullet-row">
|
||||||
|
<span class="marker">•</span>
|
||||||
|
<span class="text">내용</span>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
- [ ] 2줄째가 첫째 줄 텍스트 시작점에 정렬되는가?
|
||||||
|
- [ ] level 2 (- dash)는 padding-left로 한 단계 더 들여쓰기
|
||||||
|
- [ ] 우측 배치: bullet-row 자체는 좌→우 읽기, 컨테이너가 우측 정렬
|
||||||
|
|
||||||
|
### 5-D. 회전 요소 [R2]
|
||||||
|
- [ ] MCP bbox가 회전된 상태인가? (width > height × 1.5 for 단일 문자)
|
||||||
|
- [ ] 회전 bbox의 x좌표를 그대로 left에 넣지 않음 [R2 addendum]
|
||||||
|
- [ ] 같은 축 요소들의 center_x를 기준으로 정렬
|
||||||
|
- [ ] design_context의 center 좌표 + translate(-50%,-50%) 사용
|
||||||
|
|
||||||
|
### 5-E. 이미지 프레임 [R16]
|
||||||
|
- [ ] overflow:hidden + left/width로 부분 표시
|
||||||
|
- [ ] rotate(180deg) 하단은 이미지 배치 반전
|
||||||
|
- [ ] crop variant와 label position 분리 [R18]
|
||||||
|
- [ ] pill 접합이 있는 경우: seam 메타데이터 기록 (pill_seam_meta.md)
|
||||||
|
- left_seam, right_seam, flat_start, flat_end 측정
|
||||||
|
- label anchor는 현재 designer-tuned fallback, 장기 computed
|
||||||
|
|
||||||
|
### 5-F. CSS gradient/도형 [R9]
|
||||||
|
- [ ] 단순 도형은 CSS div + border-radius + linear-gradient
|
||||||
|
- [ ] gradient_math.py 결과값 사용 (감으로 넣지 않음)
|
||||||
|
- [ ] stroke: border로 변환 [R11 케이스A/B]
|
||||||
|
|
||||||
|
### 5-G. 배경/장식
|
||||||
|
- [ ] .slide 배경은 항상 #fff [R7]
|
||||||
|
- [ ] 장식 요소(배경 텍스처, 아크 등)는 absolute OK
|
||||||
|
- [ ] 장식 요소의 mix-blend-mode 반영 (multiply 등)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. Flexible 구조 검증
|
||||||
|
|
||||||
|
- [ ] 텍스트를 2배로 늘렸을 때 겹치지 않는가?
|
||||||
|
- [ ] 텍스트를 절반으로 줄였을 때 빈 공간이 방치되지 않는가?
|
||||||
|
- [ ] 불릿 항목을 추가했을 때 아래 요소가 자연스럽게 밀리는가?
|
||||||
|
- [ ] 표의 경우: 셀 텍스트 늘면 행이 늘고 border가 따라가는가?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 7. 산출물 작성
|
||||||
|
|
||||||
|
- [ ] texts.md — 콘텐츠 텍스트만 (TF-IDF용)
|
||||||
|
- 구조 메타(노드 ID, 블릿 개수, 역할 설명) 넣지 않음
|
||||||
|
- 섹션별 그룹핑은 가독성 위해 OK
|
||||||
|
- 한자/괄호/장식 문자 제외
|
||||||
|
- [ ] flat.md — 모든 노드 좌표/크기/속성, 변형 축, sub-pattern
|
||||||
|
- "간략하게" 금지 — 실측 기록부에 간략은 없다
|
||||||
|
- 이상 탐지 결과 포함 (회전, 세로 텍스트, 중복)
|
||||||
|
- [ ] index.html — 위 체크 모두 통과한 HTML
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 8. 검증
|
||||||
|
|
||||||
|
- [ ] Selenium 스크린샷
|
||||||
|
- [ ] Figma 원본과 시각 비교
|
||||||
|
- [ ] texts.md의 모든 텍스트가 index.html에 존재
|
||||||
|
- [ ] flat.md의 모든 시각 요소가 index.html에 반영
|
||||||
|
- [ ] CSS 대체한 에셋의 assets/ 폴더에서 삭제 확인
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 9. 완료 후
|
||||||
|
|
||||||
|
- [ ] blocks_index.md에 1줄 추가 (STEP 10)
|
||||||
|
- [ ] 기존 패턴과 비교 — 2번째 등장이면 templates_staging 진행 여부 확인
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 수정 시 추가 체크 (기존 블록 수정할 때)
|
||||||
|
|
||||||
|
- [ ] 수정 전 현재 값 기록 (변경 전)
|
||||||
|
- [ ] 수정 후 변경한 값 기록 (변경 후)
|
||||||
|
- [ ] 되돌려야 할 때 어디로 돌아가는지 알아야 한다 (PROCESS-CONTROL 규칙3)
|
||||||
|
- [ ] A만 문제면 A만 수정 — B, C를 "같은 이유로 틀릴 것 같다"고 함께 바꾸지 않음
|
||||||
|
- [ ] 구조 변경이 불가피하면 사전에 영향 범위 분석 + 사용자 확인 후 진행
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 절대 하지 말 것 (매번 확인)
|
||||||
|
|
||||||
|
- [ ] PNG/SVG를 CSS로 안 바꾸고 img src로 넣기 [R9 위반]
|
||||||
|
- **단순 gradient bar, rectangle, circle, line은 기본적으로 CSS다.**
|
||||||
|
- **이미지 유지가 필요하면 "왜 CSS 불가인지"를 먼저 적고 진행한다.**
|
||||||
|
- [ ] 본문 텍스트를 absolute로 배치 [R17 위반]
|
||||||
|
- [ ] overflow:hidden으로 텍스트 숨기기 [R17 위반]
|
||||||
|
- [ ] transform:scale 사용 (zoom 사용) [R19 위반]
|
||||||
|
- [ ] `<ul><li>` 불릿 사용 (flex pair 사용) [R13 위반]
|
||||||
|
- [ ] gradient 값을 감으로 넣기 (gradient_math.py 사용)
|
||||||
|
- [ ] MCP 회전 bbox x좌표를 그대로 left에 넣기 [R2 위반]
|
||||||
|
- [ ] 규칙 파일 안 읽고 작업 시작
|
||||||
@@ -42,6 +42,22 @@
|
|||||||
- 점점 나빠지면 **즉시 멈추고 마지막 OK 상태로 복원**
|
- 점점 나빠지면 **즉시 멈추고 마지막 OK 상태로 복원**
|
||||||
- 구조 변경이 불가피하면 **사전에 영향 범위 분석 + 사용자 확인 후** 진행
|
- 구조 변경이 불가피하면 **사전에 영향 범위 분석 + 사용자 확인 후** 진행
|
||||||
|
|
||||||
|
### 8. MCP 데이터 전수 반영 (단순화/생략 절대 금지)
|
||||||
|
- MCP get_design_context 응답의 **모든 요소**를 HTML에 반영한다
|
||||||
|
- "핵심만 골라서", "단순화해서", "비슷하게" → **전부 금지**
|
||||||
|
- MCP React+Tailwind 코드를 HTML/CSS로 **1:1 변환**한다
|
||||||
|
- 구조를 임의로 바꾸지 않는다 (래퍼 div 구조 유지)
|
||||||
|
- 반드시 반영해야 하는 속성:
|
||||||
|
- transform: rotate(), scaleY() 등 → 래퍼 div로 감싸는 구조 그대로
|
||||||
|
- mix-blend-mode: multiply 등 → 절대 생략 금지
|
||||||
|
- opacity → 절대 생략 금지
|
||||||
|
- border-radius, inset → Figma 값 그대로
|
||||||
|
- background-image (gradient) → gradient_math.py로 정확한 CSS 변환
|
||||||
|
- box-shadow, text-shadow → 값 그대로
|
||||||
|
- letter-spacing, line-height → 값 그대로
|
||||||
|
- 검증: MCP 응답에서 CSS 속성을 추출 → index.html에서 동일 속성이 있는지 전수 대조
|
||||||
|
- "나중에 추가하면 된다"는 생각 금지 → **처음부터 빠짐없이**
|
||||||
|
|
||||||
## Figma 도형 gradient 처리 프로세스
|
## Figma 도형 gradient 처리 프로세스
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|||||||
@@ -108,9 +108,27 @@ f05ebf15....png arc_top
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## STEP 5 — flat.md 작성 (분석 + 이상 탐지)
|
## STEP 5 — 산출물 3종 작성 (flat.md + texts.md + index.html)
|
||||||
|
|
||||||
`block-tests/{slug}_flat.md` 파일 생성. 다음 섹션을 반드시 포함:
|
### 산출물 폴더 구조 (프레임별)
|
||||||
|
|
||||||
|
```
|
||||||
|
blocks/{frame_id}/
|
||||||
|
├── index.html ← ① HTML 블록 (CSS gradient, transform: scale)
|
||||||
|
├── flat.md ← ② 실측 기록 (모든 노드 좌표/크기/속성)
|
||||||
|
└── texts.md ← ③ TF-IDF용 텍스트 (모든 텍스트 빠짐없이)
|
||||||
|
```
|
||||||
|
|
||||||
|
**texts.md 작성 규칙:**
|
||||||
|
- MCP get_design_context에서 모든 텍스트 노드의 텍스트를 추출
|
||||||
|
- 노드 계층 설명이 아니라 **텍스트만** 깨끗하게 나열
|
||||||
|
- 빠짐없이. "간략하게" 금지. flat.md에서 TEXT 타입 노드를 전수 추출
|
||||||
|
- 섹션별로 그룹핑 (열1, 열2, 열3 등)
|
||||||
|
- TF-IDF 인덱스 구축 시 이 파일을 직접 사용
|
||||||
|
|
||||||
|
### flat.md 작성 규칙
|
||||||
|
|
||||||
|
`blocks/{frame_id}/flat.md` 파일 생성. 다음 섹션을 반드시 포함:
|
||||||
|
|
||||||
### 섹션 1. 메타
|
### 섹션 1. 메타
|
||||||
```markdown
|
```markdown
|
||||||
@@ -245,6 +263,73 @@ from scripts.gradient_math import svg_to_css
|
|||||||
|
|
||||||
**왜 transform: scale을 쓰는가:** 모든 위치/크기/폰트/그림자/스트로크가 한 번의 transform으로 균일하게 축소됨. 매 값을 수동으로 ×S 곱하는 것보다 안전하고 검증 가능. ([MATH.md §1](MATH.md))
|
**왜 transform: scale을 쓰는가:** 모든 위치/크기/폰트/그림자/스트로크가 한 번의 transform으로 균일하게 축소됨. 매 값을 수동으로 ×S 곱하는 것보다 안전하고 검증 가능. ([MATH.md §1](MATH.md))
|
||||||
|
|
||||||
|
### 7-A1. 콘텐츠 주도형 구조 (R17/R19, 권장)
|
||||||
|
|
||||||
|
텍스트 분량 변화에 유연한 블록을 만들 때는 아래 구조를 사용한다:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="slide">
|
||||||
|
<div class="block">
|
||||||
|
<div class="inner"> <!-- zoom: S (transform:scale 대신, R19) -->
|
||||||
|
<div class="title">...</div>
|
||||||
|
<div class="rows"> <!-- flex column: 행 간 자연 flow -->
|
||||||
|
<section class="row"> <!-- flex column: pill → body → pill -->
|
||||||
|
<div class="pill-area">...</div>
|
||||||
|
<div class="body-area"> <!-- flex row: left | divider | right -->
|
||||||
|
<div class="body-left">텍스트 (자연 flow)</div>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<div class="body-right">텍스트 (자연 flow)</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
```css
|
||||||
|
.inner { width: {W}px; zoom: {S}; }
|
||||||
|
.rows { display: flex; flex-direction: column; }
|
||||||
|
.row { display: flex; flex-direction: column; }
|
||||||
|
.body-area { flex: 1; display: flex; }
|
||||||
|
.body-left, .body-right { flex: 1; }
|
||||||
|
```
|
||||||
|
|
||||||
|
**핵심 원칙:**
|
||||||
|
- 본문 텍스트에 absolute 금지 → flex/flow로 자연 배치
|
||||||
|
- 텍스트 늘면 body-area가 늘고, 아래 행이 밀림
|
||||||
|
- overflow:hidden으로 텍스트 숨기기 절대 금지
|
||||||
|
- pill 장식은 section 기준 상대 배치 (콘텐츠를 따름)
|
||||||
|
- pill의 crop variant와 label position은 분리 (R18)
|
||||||
|
|
||||||
|
**사용 시점:** 텍스트 분량이 가변적인 블록 (비교표, 이슈 목록, 불릿 리스트 등)
|
||||||
|
|
||||||
|
### 7-A2. MCP 데이터 → HTML 1:1 변환 원칙 (PROCESS-CONTROL 규칙 8)
|
||||||
|
|
||||||
|
MCP get_design_context 응답의 React+Tailwind 코드를 HTML/CSS로 변환할 때:
|
||||||
|
|
||||||
|
1. **모든 요소를 빠짐없이 반영** — "핵심만", "단순화" 금지
|
||||||
|
2. **래퍼 구조 유지** — MCP에 flex container + rotate 래퍼가 있으면 HTML에도 동일 구조
|
||||||
|
3. **시각 속성 절대 생략 금지**:
|
||||||
|
- `mix-blend-mode: multiply` → CSS에 반드시 포함
|
||||||
|
- `opacity-80`, `opacity-70` → CSS opacity 반드시 포함
|
||||||
|
- `transform: rotate()`, `scaleY()` → 래퍼 div 구조로
|
||||||
|
- `border-radius`, `inset` → Figma 값 그대로
|
||||||
|
- `background-image` (gradient) → gradient_math.py 변환 또는 MCP 값 직접 사용
|
||||||
|
- `box-shadow`, `text-shadow`, `letter-spacing` → 값 그대로
|
||||||
|
4. **검증**: 변환 후 MCP 응답의 CSS 속성 수 vs index.html CSS 속성 수 대조
|
||||||
|
|
||||||
|
**변환 순서:**
|
||||||
|
```
|
||||||
|
MCP className/style 읽기
|
||||||
|
→ 각 속성을 CSS로 매핑
|
||||||
|
→ position: absolute + MCP 좌표(left, top, width, height)
|
||||||
|
→ 래퍼가 있으면 래퍼 div 생성 + transform 적용
|
||||||
|
→ 시각 속성 (blend, opacity, radius, shadow) 전부 추가
|
||||||
|
→ 텍스트 내용 삽입
|
||||||
|
→ 완성 후 MCP 원본과 속성 수 대조
|
||||||
|
```
|
||||||
|
|
||||||
### 7-B. 요소 변환 우선순위
|
### 7-B. 요소 변환 우선순위
|
||||||
|
|
||||||
| 요소 종류 | 구현 방법 | 이유 |
|
| 요소 종류 | 구현 방법 | 이유 |
|
||||||
@@ -312,6 +397,40 @@ d.quit()
|
|||||||
- Figma `get_screenshot` 응답과 Selenium 결과를 **사람 눈**으로 비교
|
- Figma `get_screenshot` 응답과 Selenium 결과를 **사람 눈**으로 비교
|
||||||
- 차이 발견 시 STEP 5~7로 돌아가서 원인 파악 (값 수정 금지)
|
- 차이 발견 시 STEP 5~7로 돌아가서 원인 파악 (값 수정 금지)
|
||||||
|
|
||||||
|
### STEP 8-B. 전수 대조 검증 (필수, 다음 프레임 진행 전 반드시 통과)
|
||||||
|
|
||||||
|
**원칙: "간략하게", "핵심만", "중요한 것만" — 전부 금지. 전수 처리.**
|
||||||
|
|
||||||
|
프레임 완료 전 아래 3가지 검증을 모두 통과해야 다음 프레임으로 넘어갈 수 있다:
|
||||||
|
|
||||||
|
**① texts.md 전수 검증:**
|
||||||
|
- MCP get_design_context의 모든 텍스트 노드를 texts.md와 1:1 대조
|
||||||
|
- texts.md에 없는 텍스트 노드가 하나라도 있으면 실패
|
||||||
|
- 검증 방법: MCP 응답에서 텍스트 추출 → texts.md와 diff
|
||||||
|
|
||||||
|
**② flat.md 전수 검증:**
|
||||||
|
- MCP get_metadata의 모든 노드가 flat.md에 기록되어 있는지 대조
|
||||||
|
- 좌표, 크기, 타입, 이름이 빠짐없이 기록되어야 함
|
||||||
|
- "간략하게만 적었습니다" → 절대 금지. 실측 기록부에 간략은 없다
|
||||||
|
|
||||||
|
**③ index.html 전수 검증:**
|
||||||
|
- texts.md의 모든 텍스트가 index.html에 존재하는지 대조
|
||||||
|
- flat.md의 모든 시각 요소(bar, line, icon 등)가 index.html에 반영되어 있는지 대조
|
||||||
|
- 하나라도 누락되면 실패
|
||||||
|
|
||||||
|
**검증 실행 방법:**
|
||||||
|
```
|
||||||
|
# texts.md vs index.html 교차 대조
|
||||||
|
texts.md의 각 줄 텍스트 → index.html에서 grep → 없으면 FAIL
|
||||||
|
|
||||||
|
# MCP 텍스트 노드 수 vs texts.md 항목 수
|
||||||
|
MCP 텍스트 노드: N개
|
||||||
|
texts.md 항목: M개
|
||||||
|
N == M 이어야 PASS
|
||||||
|
```
|
||||||
|
|
||||||
|
**검증 미통과 시:** 다음 프레임 진행 금지. 누락 항목 수정 후 재검증.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## STEP 9 — 결과물 저장
|
## STEP 9 — 결과물 저장
|
||||||
|
|||||||
@@ -60,6 +60,38 @@ Figma bbox: 60×19 (가로가 김)
|
|||||||
.rotated-bracket-close { transform: rotate(-90deg); } /* 닫는 괄호 */
|
.rotated-bracket-close { transform: rotate(-90deg); } /* 닫는 괄호 */
|
||||||
```
|
```
|
||||||
|
|
||||||
|
**⚠️ 회전 bbox의 x,y 좌표를 그대로 left,top에 넣지 마라:**
|
||||||
|
|
||||||
|
MCP get_metadata가 보고하는 회전 텍스트의 `x, y`는 **회전 후 bbox의 top-left**이다. 회전 전 글자의 시각적 중심과 다르다. 같은 세로 축에 있는 요소들인데 MCP x 값이 제각각인 경우가 이것 때문이다.
|
||||||
|
|
||||||
|
```
|
||||||
|
예시: 세로 라벨 "기술 ( 디지털 )" — 모두 같은 세로 축
|
||||||
|
|
||||||
|
MCP 보고값:
|
||||||
|
"기 술" x=17.8 width=37 → center_x = 36.3
|
||||||
|
"(" x=72 width=60 → center_x = 102 ← bbox가 회전으로 이동
|
||||||
|
"디지털" x=17.8 width=37 → center_x = 36.3
|
||||||
|
"(" x=0 width=60 → center_x = 30 ← 반대쪽으로 이동
|
||||||
|
|
||||||
|
시각적 중심은 모두 x≈36.3인데, MCP bbox x는 0, 17.8, 72로 제각각.
|
||||||
|
```
|
||||||
|
|
||||||
|
**올바른 처리:**
|
||||||
|
1. 같은 세로 축에 있는 요소들을 먼저 식별 (같은 그룹, 같은 바 안 등)
|
||||||
|
2. 비회전 텍스트의 center_x를 기준축으로 확정: `center_x = left + width / 2`
|
||||||
|
3. 회전 요소의 컨테이너도 같은 center_x에 정렬: `container_left = center_x - container_width / 2`
|
||||||
|
4. **y값만 MCP에서 그대로 사용** (y는 회전 여부와 관계없이 정확)
|
||||||
|
|
||||||
|
```
|
||||||
|
기준: center_x = 17.8 + 37/2 = 36.3
|
||||||
|
괄호 컨테이너(60px): left = 36.3 - 30 = 6.3
|
||||||
|
→ 모든 요소가 x=36.3 중심으로 정렬
|
||||||
|
```
|
||||||
|
|
||||||
|
**절대 하지 말 것:**
|
||||||
|
- MCP의 회전 bbox x 값을 그대로 CSS left에 넣기 (72px, 0px 등)
|
||||||
|
- "MCP 데이터니까 맞겠지" 하고 검증 없이 사용
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## R3. 세로 텍스트 (좁은 박스)
|
## R3. 세로 텍스트 (좁은 박스)
|
||||||
@@ -74,6 +106,11 @@ Figma bbox: 60×19 (가로가 김)
|
|||||||
```
|
```
|
||||||
이유: `writing-mode: vertical-rl`은 Figma 원본과 다른 간격/정렬을 만듦.
|
이유: `writing-mode: vertical-rl`은 Figma 원본과 다른 간격/정렬을 만듦.
|
||||||
|
|
||||||
|
**동일 축 정렬 원칙:** 세로 텍스트 + 회전 괄호가 하나의 세로 라인을 이루면:
|
||||||
|
- 모든 요소의 **x 중심이 동일**해야 한다
|
||||||
|
- y만 변한다 (위에서 아래로 순서대로)
|
||||||
|
- R2의 "회전 bbox 좌표 함정" 규칙 적용 필수
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## R4. 그라데이션 텍스트
|
## R4. 그라데이션 텍스트
|
||||||
@@ -464,3 +501,111 @@ left: 0; width: 151.25%
|
|||||||
| 프레임 | 사용 | 비고 |
|
| 프레임 | 사용 | 비고 |
|
||||||
|--------|------|------|
|
|--------|------|------|
|
||||||
| 1171281194 (issues-paired-rows) | 두루마리 pill 8개 | 첫 적용. 상/하 배치 반전 패턴 발견. |
|
| 1171281194 (issues-paired-rows) | 두루마리 pill 8개 | 첫 적용. 상/하 배치 반전 패턴 발견. |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## R17. 콘텐츠 주도형 레이아웃 (absolute 금지, flex/flow 필수)
|
||||||
|
|
||||||
|
**문제:** 블록 내 모든 요소를 absolute + 고정 top/left로 배치하면, 텍스트 분량이 바뀔 때 겹치거나 빈 공간이 생긴다. overflow:hidden으로 숨기는 건 해결이 아니라 더 큰 문제.
|
||||||
|
|
||||||
|
**원칙:**
|
||||||
|
- CLAUDE.md: "텍스트를 자르지 않는다. 디자인이 텍스트에 맞춘다."
|
||||||
|
- CLAUDE.md: "빈 공간 방치 안 함"
|
||||||
|
- blocks_index.md I-1: "모든 픽셀 위치 절대 배치 금지"
|
||||||
|
|
||||||
|
**구조 (2단계):**
|
||||||
|
|
||||||
|
```
|
||||||
|
.inner (zoom: S — 뷰포트 맞춤)
|
||||||
|
.title (flow)
|
||||||
|
.rows (display: flex; flex-direction: column)
|
||||||
|
section.row (flex column — pill → body → pill)
|
||||||
|
.pill-area (flex: none)
|
||||||
|
.body-area (flex: 1, display: flex)
|
||||||
|
.body-left (flex: 1, 자연 flow)
|
||||||
|
.divider (flex: none)
|
||||||
|
.body-right (flex: 1, 자연 flow)
|
||||||
|
.pill-area (flex: none)
|
||||||
|
section.row ...
|
||||||
|
```
|
||||||
|
|
||||||
|
**1단계:** row 내부만 flex/flow (row 위치는 absolute top 유지)
|
||||||
|
**2단계:** row 간 배치도 flex column (행이 커지면 아래 행이 밀림)
|
||||||
|
|
||||||
|
**절대 하지 말 것:**
|
||||||
|
- 본문 텍스트에 position: absolute + 고정 top
|
||||||
|
- 텍스트 겹침을 overflow: hidden으로 숨기기
|
||||||
|
- 텍스트 높이를 고정값으로 제한
|
||||||
|
|
||||||
|
**적용 사례:**
|
||||||
|
| 프레임 | 전환 | 결과 |
|
||||||
|
|--------|------|------|
|
||||||
|
| 1171281194 | absolute → flex 2단계 | 텍스트-pill 겹침 해결, 행 간 자연 flow |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## R18. Crop variant / Label position 분리 (pill 2축 구조)
|
||||||
|
|
||||||
|
**문제:** pill 이미지의 crop 방향(어떤 곡면을 보여줄지)과 라벨 위치(행에서 좌/우 어디에 있는지)를 같은 클래스로 묶으면, 하단 pill(flip 적용)에서 라벨 위치가 뒤집힌다.
|
||||||
|
|
||||||
|
**원인:** crop-left/right는 이미지 방향 축, pos-left/right는 행 내 위치 축. 이 둘은 독립.
|
||||||
|
|
||||||
|
**규칙:** 두 축을 분리한다.
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* 축1: 이미지 crop (어떤 곡면 보일지) */
|
||||||
|
.crop-left { } /* 우측 곡선 보임 */
|
||||||
|
.crop-right { } /* 좌측 곡선 보임 */
|
||||||
|
|
||||||
|
/* 축2: 라벨 위치 (행에서 좌/우) */
|
||||||
|
.pos-left .label { left: ...; }
|
||||||
|
.pos-right .label { right: ...; text-align: right; }
|
||||||
|
```
|
||||||
|
|
||||||
|
**4가지 조합:**
|
||||||
|
|
||||||
|
| 상황 | crop | pos | 예 |
|
||||||
|
|------|------|-----|-----|
|
||||||
|
| 상단 좌 pill | crop-left | pos-left | 개념 부재 |
|
||||||
|
| 상단 우 pill | crop-right | pos-right | 잘못된 접근방식 |
|
||||||
|
| 하단 좌 pill (flip) | crop-right | pos-left | 방향성 상실 |
|
||||||
|
| 하단 우 pill (flip) | crop-left | pos-right | 전제조건 오류 |
|
||||||
|
|
||||||
|
**라벨 offset:**
|
||||||
|
- 현재: designer-tuned fallback (Figma 원본 값)
|
||||||
|
- 장기 목표: seam-based computed anchor (pill_seam_meta.md 참조)
|
||||||
|
- 라벨 offset은 crop visible area 기준으로 별도 조정 가능
|
||||||
|
|
||||||
|
**적용 사례:** 1171281194 (issues-paired-rows) — 하단 pill 라벨 위치 오류 수정
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## R19. zoom vs transform:scale
|
||||||
|
|
||||||
|
**문제:** `transform: scale(S)`는 시각적 크기만 줄이고 레이아웃 상의 높이는 원본 그대로. flex/flow 기반 콘텐츠와 함께 쓰면 하단에 큰 여백이 생긴다.
|
||||||
|
|
||||||
|
**규칙:** 콘텐츠 주도형 레이아웃(R17)에서는 `zoom`을 사용한다.
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* ✗ 문제: layout height가 원본 크기 */
|
||||||
|
.inner {
|
||||||
|
transform: scale(0.69);
|
||||||
|
transform-origin: top left;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ✓ 해결: layout height도 실제로 줄어듦 */
|
||||||
|
.inner {
|
||||||
|
zoom: 0.69;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**차이:**
|
||||||
|
|
||||||
|
| 속성 | 시각 크기 | 레이아웃 크기 | flow 호환 |
|
||||||
|
|------|----------|-------------|----------|
|
||||||
|
| transform: scale | 줄어듦 | 원본 그대로 | ✗ |
|
||||||
|
| zoom | 줄어듦 | 줄어듦 | ✓ |
|
||||||
|
|
||||||
|
**주의:** 기존 absolute 기반 블록(1:1 reference)에서는 transform:scale이 문제없음. R17 구조로 전환한 블록에서만 zoom 적용.
|
||||||
|
|
||||||
|
**브라우저 지원:** Chrome, Safari, Firefox 126+ (2024~) 모두 지원.
|
||||||
|
|||||||
1457
figma_to_html_agent/blocks/1171281171/texts.md
Normal file
1457
figma_to_html_agent/blocks/1171281171/texts.md
Normal file
File diff suppressed because it is too large
Load Diff
63
figma_to_html_agent/blocks/1171281172/analysis.md
Normal file
63
figma_to_html_agent/blocks/1171281172/analysis.md
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
# Frame 1171281172 — S/W 개발 방향 순환도
|
||||||
|
|
||||||
|
## 내용 설명
|
||||||
|
|
||||||
|
S/W 개발 방향을 6개 노드(기술기반·디지털전환·품질향상·S/W 한계·
|
||||||
|
개발목표·융합)의 순환/방사형 다이어그램으로 표현하는 디자인.
|
||||||
|
기술기반 중요성, 디지털전환 직관지 역할, 품질향상과 호환성,
|
||||||
|
기존 S/W 한계 인식, 개발목표 설정, 융합 필요성을 6개 노드로
|
||||||
|
배치해 S/W 개발의 다면적 방향을 시각화. 6개 병렬 개념 순환도
|
||||||
|
·S/W 개발 방향 다면 시각화에 적합. 3/4/5개 이하 항목·주체별
|
||||||
|
나열·시간 순서·2개 비교·단일 개념 심층에는 부적합.
|
||||||
|
|
||||||
|
## 후보 키워드
|
||||||
|
|
||||||
|
S/W개발, 개발방향, 개발목표, 기술기반, 디지털전환, 품질향상, S/W한계, 융합, 호환성, 직관지
|
||||||
|
|
||||||
|
## 정제 Anchor Sets
|
||||||
|
|
||||||
|
- **sw_development**: S/W개발, 개발방향, 개발목표
|
||||||
|
- **six_core_concepts**: 기술기반, 디지털전환, 품질향상, S/W한계, 융합, 호환성
|
||||||
|
- **directional_concepts**: 직관지
|
||||||
|
|
||||||
|
## 구조 매칭 정보
|
||||||
|
|
||||||
|
- **family**: diagram
|
||||||
|
- **layout**: circular-nodes-6
|
||||||
|
- **axis**: horizontal
|
||||||
|
- **relation_type**: parallel
|
||||||
|
- **cardinality**: ideal 6 / min 6 / max 6
|
||||||
|
- **slots** (7개, required 7개): title, node_1, node_2, node_3, node_4, node_5, node_6
|
||||||
|
- **source title**: S/W 개발 방향 순환도
|
||||||
|
- **original layout**: circular-nodes
|
||||||
|
|
||||||
|
## 적합/부적합 기준
|
||||||
|
|
||||||
|
### suits
|
||||||
|
- S/W 개발 방향 순환도
|
||||||
|
- 6개 병렬 개념 시각화
|
||||||
|
- 다면적 방향성 다이어그램
|
||||||
|
|
||||||
|
### not_suits
|
||||||
|
- 3개 또는 4개 이하 항목
|
||||||
|
- 주체별 나열 (발주자/시공자/설계자)
|
||||||
|
- 시간 순서
|
||||||
|
- 2개 비교
|
||||||
|
- 단일 개념 심층
|
||||||
|
- 필수요건 나열 (기술/사람/자연)
|
||||||
|
|
||||||
|
## 재구성 허용
|
||||||
|
|
||||||
|
- **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 1171281172 — S/W 개발 방향 순환도
|
||||||
|
|
||||||
|
## 구조
|
||||||
|
- **layout**: circular-nodes
|
||||||
|
- **detail**: 6개 노드 라벨(기술기반·디지털전환·품질향상·S/W한계·개발목표·융합)이 순환/방사형으로 배치된 다이어그램
|
||||||
|
|
||||||
|
## 내용
|
||||||
|
S/W 개발 방향 순환도 — 기술기반 중요성, 디지털전환 직관지 역할, 품질향상과 호환성, 기존 S/W 한계 인식, 개발목표 설정, 융합 필요성.
|
||||||
|
|
||||||
|
## 후보 키워드
|
||||||
|
S/W개발, 개발방향, 순환도, 기술기반, 디지털전환, 직관지, 품질향상, 호환성, S/W한계, 개발목표, 융합, 다이어그램
|
||||||
|
|
||||||
|
## 메타
|
||||||
|
- source: texts.md + flat.md
|
||||||
|
- schema_version: analysis-v1
|
||||||
|
- tagged_by: claude-opus-4-7
|
||||||
|
- tagged_at: 2026-04-21
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
27
figma_to_html_agent/blocks/1171281172/flat.md
Normal file
27
figma_to_html_agent/blocks/1171281172/flat.md
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
# Frame 1171281172 — 실측 기록 (flat)
|
||||||
|
|
||||||
|
> 원본: 1579 × 981 px (node 145:8352)
|
||||||
|
> 패턴: circular-nodes-6 (6개 원형 노드 다이어그램)
|
||||||
|
> Scale: 1280 / 1579 = 0.81064
|
||||||
|
|
||||||
|
## 구조
|
||||||
|
|
||||||
|
2D 공간에 6개 원형 노드 + 중앙 이미지 + 배경 + 연결 이미지.
|
||||||
|
absolute 배치 필수 (2D 시각 다이어그램).
|
||||||
|
|
||||||
|
## 노드 6개 (각각 원형 배경 + 내부 아이콘 + 라벨)
|
||||||
|
|
||||||
|
| 노드 | 라벨 | center 좌표 |
|
||||||
|
|------|------|------------|
|
||||||
|
| 145:8370 | 기술기반 중요성 | (180, 436) |
|
||||||
|
| 145:8374 | 디지털전환 직관지 역할 | (319, 837) |
|
||||||
|
| 145:8378 | 품질향상 & 호환성 | (896, 811) |
|
||||||
|
| 145:8382 | 기존 S/W 한계 인식 | (1394, 573) |
|
||||||
|
| 145:8386 | S/W 개발목표 설정 | (1293, 146) |
|
||||||
|
| 145:8390 | 융합의 필요성 | (707, 147) |
|
||||||
|
|
||||||
|
## 에셋 (9개, 모두 이미지)
|
||||||
|
|
||||||
|
image 4009: 노드 배경 원 (×6 동일)
|
||||||
|
image 4010: 노드 내부 아이콘 (×6 동일)
|
||||||
|
기타: 배경, 중앙 이미지, 연결선 등
|
||||||
130
figma_to_html_agent/blocks/1171281172/index.html
Normal file
130
figma_to_html_agent/blocks/1171281172/index.html
Normal file
@@ -0,0 +1,130 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ko">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=1280">
|
||||||
|
<title>S/W 개발 방향 다이어그램 (Frame 1171281172)</title>
|
||||||
|
<!--
|
||||||
|
Frame: 145:8352, 1579×981 px
|
||||||
|
Scale: 1280 / 1579 = 0.81064
|
||||||
|
패턴: circular-nodes-6
|
||||||
|
구조: 2D 다이어그램 → absolute + R19 zoom
|
||||||
|
텍스트 라벨: design_context center 좌표 + translate(-50%,-50%)
|
||||||
|
-->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&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;
|
||||||
|
}
|
||||||
|
.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: 1579px; height: 981px;
|
||||||
|
zoom: 0.81064; /* R19 */
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.abs { position: absolute; }
|
||||||
|
.abs img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||||
|
.node-label {
|
||||||
|
position: absolute;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
font-weight: 700; font-size: 45px; line-height: 60px;
|
||||||
|
color: #fff; text-align: center;
|
||||||
|
text-shadow: 0 0 4px rgba(0,0,0,0.5);
|
||||||
|
word-break: keep-all;
|
||||||
|
}
|
||||||
|
/* 회전 래퍼 */
|
||||||
|
.rot-wrap {
|
||||||
|
position: absolute; display: flex; align-items: center; justify-content: center;
|
||||||
|
}
|
||||||
|
.rot-wrap img { display: block; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="slide">
|
||||||
|
<div class="block">
|
||||||
|
<div class="inner">
|
||||||
|
|
||||||
|
<!-- 배경 -->
|
||||||
|
<div class="rot-wrap" style="left:0; top:37.26px; width:1579.22px; height:910.34px;">
|
||||||
|
<div style="flex:none; transform:rotate(-8.84deg);"><img src="assets/0b6599f832b0f69b2038ead1ba6d95cdcc42c4cf.png" style="width:1490.97px; height:689.31px;"></div>
|
||||||
|
</div>
|
||||||
|
<div class="rot-wrap" style="left:158.1px; top:144px; width:1237.22px; height:713.19px;">
|
||||||
|
<div style="flex:none; transform:rotate(-8.84deg);"><img src="assets/93b81ffe48e6fca68e58cef7a84def27cf91469e.png" style="width:1168.08px; height:540.03px; opacity:0.5;"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 중앙 이미지 -->
|
||||||
|
<div class="abs" style="left:490px; top:262px; width:622px; height:437px;"><img src="assets/a902e39ab83c931afd5c93afcab26780b7d330b9.png"></div>
|
||||||
|
<div class="abs" style="left:557px; top:323px; width:488px; height:287px;"><img src="assets/75bcffb34242270e352ef1b44dea1a9b6f3f4b7c.png"></div>
|
||||||
|
|
||||||
|
<!-- 장식 원 (동일 이미지 ×6) -->
|
||||||
|
<div class="abs" style="left:40.32px; top:294.18px; width:278.81px; height:278.81px;"><img src="assets/c6aa15ac498406ca8f65ac71b1585a13002cd194.png"></div>
|
||||||
|
<div class="abs" style="left:179.73px; top:698.58px; width:278.81px; height:278.81px;"><img src="assets/c6aa15ac498406ca8f65ac71b1585a13002cd194.png"></div>
|
||||||
|
<div class="abs" style="left:568px; top:5px; width:278.81px; height:278.81px;"><img src="assets/c6aa15ac498406ca8f65ac71b1585a13002cd194.png"></div>
|
||||||
|
<div class="abs" style="left:1150.97px; top:5px; width:278.81px; height:278.81px;"><img src="assets/c6aa15ac498406ca8f65ac71b1585a13002cd194.png"></div>
|
||||||
|
<div class="abs" style="left:1253.51px; top:432.44px; width:278.81px; height:278.81px;"><img src="assets/c6aa15ac498406ca8f65ac71b1585a13002cd194.png"></div>
|
||||||
|
<div class="abs" style="left:756.95px; top:670.93px; width:278.81px; height:278.81px;"><img src="assets/c6aa15ac498406ca8f65ac71b1585a13002cd194.png"></div>
|
||||||
|
|
||||||
|
<!-- 연결선 이미지들 -->
|
||||||
|
<div class="abs" style="left:331.81px; top:236.58px; width:261.53px; height:142.86px;"><img src="assets/a33ed237bbe2afff43a5bc9100be50c2331b6005.png"></div>
|
||||||
|
<div class="rot-wrap" style="left:867.24px; top:46.26px; width:297.47px; height:240.63px;">
|
||||||
|
<div style="flex:none; transform:rotate(25.2deg);"><img src="assets/a33ed237bbe2afff43a5bc9100be50c2331b6005.png" style="width:261.53px; height:142.86px;"></div>
|
||||||
|
</div>
|
||||||
|
<div class="rot-wrap" style="left:993.13px; top:587.98px; width:273.91px; height:167.03px;">
|
||||||
|
<div style="flex:none; transform:rotate(-174.56deg);"><img src="assets/a33ed237bbe2afff43a5bc9100be50c2331b6005.png" style="width:261.53px; height:142.86px;"></div>
|
||||||
|
</div>
|
||||||
|
<div class="rot-wrap" style="left:462px; top:698.58px; width:294.72px; height:224.14px;">
|
||||||
|
<div style="flex:none; transform:rotate(-159.87deg);"><img src="assets/a33ed237bbe2afff43a5bc9100be50c2331b6005.png" style="width:261.53px; height:142.86px;"></div>
|
||||||
|
</div>
|
||||||
|
<div class="rot-wrap" style="left:85.26px; top:587.98px; width:112.78px; height:196.81px;">
|
||||||
|
<div style="flex:none; transform:rotate(-10.33deg);"><img src="assets/c21d9171275fc89f4db34d42d455fa41a006b348.png" style="width:80.85px; height:185.32px;"></div>
|
||||||
|
</div>
|
||||||
|
<div class="rot-wrap" style="left:1403.29px; top:246.32px; width:81.83px; height:185.74px;">
|
||||||
|
<div style="flex:none; transform:rotate(-179.69deg);"><img src="assets/c21d9171275fc89f4db34d42d455fa41a006b348.png" style="width:80.85px; height:185.32px;"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 노드 배경 + 아이콘 + 라벨 ×6 -->
|
||||||
|
<!-- 1: 기술기반 중요성 -->
|
||||||
|
<div class="abs" style="left:35px; top:290px; width:290px; height:290px;"><img src="assets/311e27c78b94633cbcdbdebf4f4382b3944947c0.png"></div>
|
||||||
|
<div class="abs" style="left:75px; top:332px; width:208px; height:208px;"><img src="assets/63887534bb17277ead4cfd833ab7ce939d9324d0.png"></div>
|
||||||
|
<div class="node-label" style="left:180.03px; top:436.21px;">기술기반<br>중요성</div>
|
||||||
|
|
||||||
|
<!-- 2: 디지털전환 직관지 역할 -->
|
||||||
|
<div class="abs" style="left:174px; top:691px; width:290px; height:290px;"><img src="assets/311e27c78b94633cbcdbdebf4f4382b3944947c0.png"></div>
|
||||||
|
<div class="abs" style="left:214px; top:733px; width:208px; height:208px;"><img src="assets/63887534bb17277ead4cfd833ab7ce939d9324d0.png"></div>
|
||||||
|
<div class="node-label" style="left:319.03px; top:837.21px;">디지털전환<br>직관지 역할</div>
|
||||||
|
|
||||||
|
<!-- 3: 품질향상 & 호환성 -->
|
||||||
|
<div class="abs" style="left:751px; top:665px; width:290px; height:290px;"><img src="assets/311e27c78b94633cbcdbdebf4f4382b3944947c0.png"></div>
|
||||||
|
<div class="abs" style="left:791px; top:707px; width:208px; height:208px;"><img src="assets/63887534bb17277ead4cfd833ab7ce939d9324d0.png"></div>
|
||||||
|
<div class="node-label" style="left:896.03px; top:811.21px; line-height:45px;">품질향상<br>&<br>호환성</div>
|
||||||
|
|
||||||
|
<!-- 4: 기존 S/W 한계 인식 -->
|
||||||
|
<div class="abs" style="left:1249px; top:427px; width:290px; height:290px;"><img src="assets/311e27c78b94633cbcdbdebf4f4382b3944947c0.png"></div>
|
||||||
|
<div class="abs" style="left:1289px; top:469px; width:208px; height:208px;"><img src="assets/63887534bb17277ead4cfd833ab7ce939d9324d0.png"></div>
|
||||||
|
<div class="node-label" style="left:1394.03px; top:573.21px;">기존 S/W<br>한계 인식</div>
|
||||||
|
|
||||||
|
<!-- 5: S/W 개발목표 설정 -->
|
||||||
|
<div class="abs" style="left:1148px; top:0; width:290px; height:290px;"><img src="assets/311e27c78b94633cbcdbdebf4f4382b3944947c0.png"></div>
|
||||||
|
<div class="abs" style="left:1188px; top:42px; width:208px; height:208px;"><img src="assets/63887534bb17277ead4cfd833ab7ce939d9324d0.png"></div>
|
||||||
|
<div class="node-label" style="left:1293.03px; top:146.21px;">S/W<br>개발목표<br>설정</div>
|
||||||
|
|
||||||
|
<!-- 6: 융합의 필요성 -->
|
||||||
|
<div class="abs" style="left:562px; top:1px; width:290px; height:290px;"><img src="assets/311e27c78b94633cbcdbdebf4f4382b3944947c0.png"></div>
|
||||||
|
<div class="abs" style="left:602px; top:43px; width:208px; height:208px;"><img src="assets/63887534bb17277ead4cfd833ab7ce939d9324d0.png"></div>
|
||||||
|
<div class="node-label" style="left:707.03px; top:147.21px;">융합의<br>필요성</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
10
figma_to_html_agent/blocks/1171281172/texts.md
Normal file
10
figma_to_html_agent/blocks/1171281172/texts.md
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
# Frame 1171281172 — 텍스트 (TF-IDF 매칭용)
|
||||||
|
|
||||||
|
## 노드 라벨
|
||||||
|
개발 패러다임
|
||||||
|
기술기반 중요성
|
||||||
|
디지털전환 직관지 역할
|
||||||
|
품질향상 & 호환성
|
||||||
|
기존 S/W 한계 인식
|
||||||
|
S/W 개발목표 설정
|
||||||
|
융합의 필요성
|
||||||
63
figma_to_html_agent/blocks/1171281173/analysis.md
Normal file
63
figma_to_html_agent/blocks/1171281173/analysis.md
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
# Frame 1171281173 — Engineering S/W 개발 (Domain knowledge 기반)
|
||||||
|
|
||||||
|
## 내용 설명
|
||||||
|
|
||||||
|
Engineering S/W 개발을 위한 기술기반을 4가지 관점(Open Source 혁명·
|
||||||
|
AI 발전·추론 기반 AI·코딩 기반 S/W)의 원형 라벨로 제시하는 디자인.
|
||||||
|
중앙 강조 메시지 + 하단 설명으로 Domain knowledge(토목공학 지식)가
|
||||||
|
기술에 반영되어야 함을 역설. 4가지 기술 트렌드 관점·Engineering S/W
|
||||||
|
개발 기술기반·Open Source/AI 중심 기술 생태계 설명에 적합. 3개
|
||||||
|
이하·5개 이상 항목·주체별 나열·시간 순서·필수요건 나열(기술/사람/
|
||||||
|
자연)·2개 비교에는 부적합.
|
||||||
|
|
||||||
|
## 후보 키워드
|
||||||
|
|
||||||
|
OpenSource, AI, 추론기반AI, 코딩기반SW, DomainKnowledge, 토목공학, 지식기반, 기술기반, Engineering, EngineeringSW, S/W개발
|
||||||
|
|
||||||
|
## 정제 Anchor Sets
|
||||||
|
|
||||||
|
- **tech_foundations**: OpenSource, AI, 추론기반AI, 코딩기반SW
|
||||||
|
- **domain_knowledge**: DomainKnowledge, 토목공학, 지식기반, 기술기반
|
||||||
|
- **engn_sw_dev**: Engineering, EngineeringSW, S/W개발
|
||||||
|
|
||||||
|
## 구조 매칭 정보
|
||||||
|
|
||||||
|
- **family**: cards
|
||||||
|
- **layout**: bullet-cards-4-plus-center
|
||||||
|
- **axis**: horizontal
|
||||||
|
- **relation_type**: parallel
|
||||||
|
- **cardinality**: ideal 4 / min 4 / max 4
|
||||||
|
- **slots** (7개, required 6개): title, pillar_1_label, pillar_2_label, pillar_3_label, pillar_4_label, center_message, description
|
||||||
|
- **source title**: Engineering S/W 개발 (Domain knowledge 기반)
|
||||||
|
- **original layout**: bullet-cards
|
||||||
|
|
||||||
|
## 적합/부적합 기준
|
||||||
|
|
||||||
|
### suits
|
||||||
|
- 4가지 기술 트렌드 관점
|
||||||
|
- Engineering S/W 개발 기술기반
|
||||||
|
- Open Source/AI 중심 기술 생태계
|
||||||
|
|
||||||
|
### not_suits
|
||||||
|
- 3개 이하 항목
|
||||||
|
- 5개 이상 항목
|
||||||
|
- 주체별 나열 (발주자/시공자/설계자)
|
||||||
|
- 시간 순서
|
||||||
|
- 필수요건 나열 (기술/사람/자연)
|
||||||
|
- 2개 비교
|
||||||
|
|
||||||
|
## 재구성 허용
|
||||||
|
|
||||||
|
- **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 1171281173 — Engineering S/W 개발 (Domain knowledge 기반)
|
||||||
|
|
||||||
|
## 구조
|
||||||
|
- **layout**: bullet-cards
|
||||||
|
- **detail**: 상단 4개 원형 라벨(Open Source 혁명, AI 발전, 추론 기반 AI, 코딩 기반 S/W) + 중앙 강조 + 하단 설명
|
||||||
|
|
||||||
|
## 내용
|
||||||
|
Domain knowledge(토목공학 지식)이 반영될 수 있는 기술기반 — Engineering S/W 개발을 위한 Open Source·AI·추론·코딩 관점 정리.
|
||||||
|
|
||||||
|
## 후보 키워드
|
||||||
|
Engineering, EngineeringSW, Domain knowledge, 토목공학, 지식기반, OpenSource, AI, 추론기반AI, 코딩기반SW, 기술기반, S/W개발
|
||||||
|
|
||||||
|
## 메타
|
||||||
|
- source: texts.md + flat.md
|
||||||
|
- schema_version: analysis-v1
|
||||||
|
- tagged_by: claude-opus-4-7
|
||||||
|
- tagged_at: 2026-04-21
|
||||||
47
figma_to_html_agent/blocks/1171281173/texts.md
Normal file
47
figma_to_html_agent/blocks/1171281173/texts.md
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
# Frame 1171281173 — 텍스트 (TF-IDF 매칭용)
|
||||||
|
|
||||||
|
> 프레임 안의 모든 텍스트를 빠짐없이 추출. nodeId: 182:2870
|
||||||
|
|
||||||
|
## 타이틀
|
||||||
|
|
||||||
|
Domain knowledge(토목공학 지식)이 반영될 수 있는 기술기반
|
||||||
|
|
||||||
|
## 서브타이틀
|
||||||
|
|
||||||
|
Engineering S/W 개발
|
||||||
|
|
||||||
|
## 원형 라벨 (상단 좌측 2개)
|
||||||
|
|
||||||
|
Open Source 혁명
|
||||||
|
|
||||||
|
AI 비약적 발전
|
||||||
|
|
||||||
|
## 원형 라벨 텍스트 (상단 오버레이)
|
||||||
|
|
||||||
|
AI
|
||||||
|
|
||||||
|
## 원형 라벨 (상단 우측 2개)
|
||||||
|
|
||||||
|
추론 기반 AI
|
||||||
|
|
||||||
|
코딩 기반 S/W
|
||||||
|
|
||||||
|
## 중앙 좌측 강조
|
||||||
|
|
||||||
|
시대적 변화
|
||||||
|
|
||||||
|
## 중앙 우측 강조
|
||||||
|
|
||||||
|
자료 중요성
|
||||||
|
|
||||||
|
## 하단 라벨 (좌측)
|
||||||
|
|
||||||
|
H/W 성능개선, S/W 고급화
|
||||||
|
|
||||||
|
## 하단 라벨 (우측)
|
||||||
|
|
||||||
|
S/W 개발 시 많은 시간 필요
|
||||||
|
|
||||||
|
## 하단 결론 바
|
||||||
|
|
||||||
|
정확한 지식기반 설계 메뉴얼
|
||||||
42
figma_to_html_agent/blocks/1171281174/_render.py
Normal file
42
figma_to_html_agent/blocks/1171281174/_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/1171281174/_renders/_full.png
Normal file
BIN
figma_to_html_agent/blocks/1171281174/_renders/_full.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 501 KiB |
BIN
figma_to_html_agent/blocks/1171281174/_renders/block.png
Normal file
BIN
figma_to_html_agent/blocks/1171281174/_renders/block.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 484 KiB |
BIN
figma_to_html_agent/blocks/1171281174/_renders/block_2x.png
Normal file
BIN
figma_to_html_agent/blocks/1171281174/_renders/block_2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
figma_to_html_agent/blocks/1171281174/_renders/slide.png
Normal file
BIN
figma_to_html_agent/blocks/1171281174/_renders/slide.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 487 KiB |
62
figma_to_html_agent/blocks/1171281174/analysis.md
Normal file
62
figma_to_html_agent/blocks/1171281174/analysis.md
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
# Frame 1171281174 — 국외 BIM 수행 현황
|
||||||
|
|
||||||
|
## 내용 설명
|
||||||
|
|
||||||
|
국외 BIM 및 설계 업무 수행의 4가지 주요 특징을 번호별 리스트로
|
||||||
|
제시하는 디자인. 항목: Claim 최소화 오류예방, 설계 업무 Data 정리
|
||||||
|
필수, 기술업무 Manual 작성, 데이터 통합 및 관리. 국외 선진 사례
|
||||||
|
특성 나열·자체 기술력 기반 수행 특징 정리·번호별 항목 4개 병렬
|
||||||
|
제시에 적합. 3개 이하·5개 이상 항목·주체별 나열·2개 비교·시간
|
||||||
|
순서 단계(step1→step2)·필수요건 나열에는 부적합.
|
||||||
|
|
||||||
|
## 후보 키워드
|
||||||
|
|
||||||
|
국외, BIM수행, Claim최소화, 오류예방, 설계Data, Manual, 기술업무, 데이터통합, 관리
|
||||||
|
|
||||||
|
## 정제 Anchor Sets
|
||||||
|
|
||||||
|
- **overseas_bim**: 국외, BIM수행
|
||||||
|
- **bim_practices**: Claim최소화, 오류예방, 설계Data, Manual, 기술업무, 데이터통합
|
||||||
|
- **management**: 관리, 기술업무
|
||||||
|
|
||||||
|
## 구조 매칭 정보
|
||||||
|
|
||||||
|
- **family**: list
|
||||||
|
- **layout**: list-numbered-4
|
||||||
|
- **axis**: vertical
|
||||||
|
- **relation_type**: parallel
|
||||||
|
- **cardinality**: ideal 4 / min 4 / max 4
|
||||||
|
- **slots** (5개, required 5개): title, item_1, item_2, item_3, item_4
|
||||||
|
- **source title**: 국외 BIM 수행 현황
|
||||||
|
- **original layout**: list-numbered
|
||||||
|
|
||||||
|
## 적합/부적합 기준
|
||||||
|
|
||||||
|
### suits
|
||||||
|
- 국외 선진 사례 특성 4항목
|
||||||
|
- 자체 기술력 기반 수행 특징
|
||||||
|
- 번호별 4 병렬 리스트
|
||||||
|
|
||||||
|
### not_suits
|
||||||
|
- 3개 이하 항목
|
||||||
|
- 5개 이상 항목
|
||||||
|
- 주체별 나열 (발주자/시공자/설계자)
|
||||||
|
- 2개 비교
|
||||||
|
- 시간 순서 단계
|
||||||
|
- 필수요건 나열 (기술/사람/자연)
|
||||||
|
|
||||||
|
## 재구성 허용
|
||||||
|
|
||||||
|
- **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 1171281174 — 국외 BIM 수행 현황
|
||||||
|
|
||||||
|
## 구조
|
||||||
|
- **layout**: list-numbered
|
||||||
|
- **detail**: 타이틀("국외") + 번호별 4개 항목 리스트(01~04)
|
||||||
|
|
||||||
|
## 내용
|
||||||
|
국외 BIM/설계 업무 수행 특징 — Claim 최소화, 설계 업무 Data 정리 필수, 기술업무 Manual 작성, 데이터 통합 및 관리.
|
||||||
|
|
||||||
|
## 후보 키워드
|
||||||
|
국외, BIM수행, Claim최소화, 오류예방, 설계Data, Manual, 기술업무, 데이터통합, 관리, 자체기술력
|
||||||
|
|
||||||
|
## 메타
|
||||||
|
- 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/1171281174/assets/arrow_chain.png
Normal file
BIN
figma_to_html_agent/blocks/1171281174/assets/arrow_chain.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
figma_to_html_agent/blocks/1171281174/assets/badge_01.png
Normal file
BIN
figma_to_html_agent/blocks/1171281174/assets/badge_01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
BIN
figma_to_html_agent/blocks/1171281174/assets/badge_02.png
Normal file
BIN
figma_to_html_agent/blocks/1171281174/assets/badge_02.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
figma_to_html_agent/blocks/1171281174/assets/badge_03.png
Normal file
BIN
figma_to_html_agent/blocks/1171281174/assets/badge_03.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
BIN
figma_to_html_agent/blocks/1171281174/assets/badge_04.png
Normal file
BIN
figma_to_html_agent/blocks/1171281174/assets/badge_04.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
BIN
figma_to_html_agent/blocks/1171281174/assets/globe.png
Normal file
BIN
figma_to_html_agent/blocks/1171281174/assets/globe.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
BIN
figma_to_html_agent/blocks/1171281174/assets/header_pill.png
Normal file
BIN
figma_to_html_agent/blocks/1171281174/assets/header_pill.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
figma_to_html_agent/blocks/1171281174/assets/pin_icon.png
Normal file
BIN
figma_to_html_agent/blocks/1171281174/assets/pin_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
figma_to_html_agent/blocks/1171281174/assets/scene.png
Normal file
BIN
figma_to_html_agent/blocks/1171281174/assets/scene.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 MiB |
BIN
figma_to_html_agent/blocks/1171281174/assets/text_bubble.png
Normal file
BIN
figma_to_html_agent/blocks/1171281174/assets/text_bubble.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
80
figma_to_html_agent/blocks/1171281174/flat.md
Normal file
80
figma_to_html_agent/blocks/1171281174/flat.md
Normal file
@@ -0,0 +1,80 @@
|
|||||||
|
# Frame 1171281174 — 실측 기록 (flat)
|
||||||
|
|
||||||
|
> 원본: 1728 × 657 px (node 182:2810, file 9S6LsQyO6zlRxtiqZccOUM, page 29:373)
|
||||||
|
> 패턴: scene-with-numbered-list-4 (좌:장면 이미지+글로브, 우:번호 4개 + brown pill 텍스트 버블)
|
||||||
|
> Scale: 1280 / 1728 = **0.74074** → 슬라이드 안 1280 × 486.7 px 차지
|
||||||
|
|
||||||
|
## 구조 (bottom-up)
|
||||||
|
|
||||||
|
```
|
||||||
|
Frame 182:2810 "Frame 1171281174" (1728 × 657)
|
||||||
|
├─ rounded-rect 182:2811 "image 3939" (0, 0) 447×133 ← header_pill.png (브라운 pill 배경)
|
||||||
|
├─ TEXT 182:2812 "국외" center=(223.5, 68), top-left=(46, 23) 355×90 — 60px Bold 흰색, tracking -1.8, line-height 90
|
||||||
|
├─ rounded-rect 182:2813 "image 3940" (0, 19) 75×88 ← pin_icon.png (pin/marker 아이콘)
|
||||||
|
│
|
||||||
|
├─ rounded-rect 182:2825 "image 3949" (53, 139) 815×465 ← scene.png (건설 현장 합성 이미지, opacity 0.7, radius 27)
|
||||||
|
├─ rounded-rect 182:2826 "image 3951" (718, 159) 127×126 ← globe.png (구 모양 아이콘, border 3 white, radius 132.5, opacity 0.8)
|
||||||
|
├─ rounded-rect 182:2828 "image 3957" (825, 86) 115×571 ← arrow_chain.png (수직 화살표 체인, 4개 노드를 연결)
|
||||||
|
│
|
||||||
|
├─ rounded-rect 182:2814 "image 3953" (954, 136) 760×97 ← text_bubble.png (브라운 둥근 막대)
|
||||||
|
├─ rounded-rect 182:2815 "image 3954" (954, 266) 760×97 ← text_bubble.png (재사용)
|
||||||
|
├─ rounded-rect 182:2816 "image 3955" (954, 407) 760×97 ← text_bubble.png (재사용)
|
||||||
|
├─ rounded-rect 182:2817 "image 3956" (954, 543) 760×97 ← text_bubble.png (재사용)
|
||||||
|
│
|
||||||
|
├─ TEXT 182:2818 "오류에 의한 Claim 최소화" (1033, 149) 695×60 — 45px Medium #11231D, leading 60, text-shadow
|
||||||
|
├─ TEXT 182:2819 "설계 업무 시 사업 Data 정리 필수" (1033, 285) 695×60
|
||||||
|
├─ TEXT 182:2820 "자체적인 기술업무 Manual 작성" (1033, 421) 695×60
|
||||||
|
├─ TEXT 182:2821 "데이터 통합 및 관리" (1033, 562) 695×60
|
||||||
|
│
|
||||||
|
├─ rounded-rect 182:2822 "01 2" (906, 117) 89×93 ← badge_01.png (번호 1 + 우측 화살표)
|
||||||
|
├─ rounded-rect 182:2823 "02 2" (906, 238) 89×93 ← badge_02.png
|
||||||
|
├─ rounded-rect 182:2824 "03 2" (906, 376) 89×93 ← badge_03.png
|
||||||
|
└─ rounded-rect 182:2827 "04 1" (906, 509) 89×93 ← badge_04.png (이름 suffix만 다름)
|
||||||
|
```
|
||||||
|
|
||||||
|
## 에셋 (10개)
|
||||||
|
|
||||||
|
| 파일 | 의미 | 크기 | 사용 횟수 |
|
||||||
|
|------|------|------|---------|
|
||||||
|
| `assets/header_pill.png` | 좌상단 브라운 pill 헤더 배경 | 447×133 | 1 |
|
||||||
|
| `assets/pin_icon.png` | pin/marker 아이콘 (헤더 위 겹침) | 75×88 | 1 |
|
||||||
|
| `assets/scene.png` | 건설 현장 합성 메인 이미지 (4.5MB) | 815×465 | 1 (opacity 0.7) |
|
||||||
|
| `assets/globe.png` | 구 모양 원형 아이콘 (장면 위) | 127×126 | 1 (opacity 0.8, white border) |
|
||||||
|
| `assets/arrow_chain.png` | 수직 화살표 체인 (장면→번호 연결) | 115×571 | 1 |
|
||||||
|
| `assets/text_bubble.png` | 브라운 둥근 막대 배경 | 760×97 | **4** (재사용) |
|
||||||
|
| `assets/badge_01.png` | 번호 1 (chevron 우측 화살표 포함) | 89×93 | 1 |
|
||||||
|
| `assets/badge_02.png` | 번호 2 | 89×93 | 1 |
|
||||||
|
| `assets/badge_03.png` | 번호 3 | 89×93 | 1 |
|
||||||
|
| `assets/badge_04.png` | 번호 4 (Figma 이름 suffix `_1` 다름, 비주얼 동일) | 89×93 | 1 |
|
||||||
|
|
||||||
|
## 이상 탐지 결과
|
||||||
|
|
||||||
|
| 검사 | 결과 |
|
||||||
|
|------|------|
|
||||||
|
| 회전 단일문자 | 없음 |
|
||||||
|
| 좁은 박스 세로 텍스트 | 없음 |
|
||||||
|
| 중복 노드 (동일 좌표 + 동일 내용) | 없음. text_bubble은 동일 src 4× 재사용 — 정상 |
|
||||||
|
| Vector 좌표 metadata vs design_context 불일치 | 일치 |
|
||||||
|
| 회전 적용 (bbox vs render 차이) | 없음 (모두 정사각형 또는 가로 배치) |
|
||||||
|
| z-order 비정상 | scene(이미지 3949)가 badges 01-03 다음 순서로 그려짐 → 시각 영향 없음 (위치 비겹침) |
|
||||||
|
|
||||||
|
## 변형 가능 축
|
||||||
|
|
||||||
|
- **list_items[N=4] (required)** — 번호 4개 항목, cardinality=4 고정 (analysis.md)
|
||||||
|
- `text` (required, 한 줄, 45px 분량)
|
||||||
|
- `header_pill` (required) — 좌상단 카테고리 헤더 ("국외" 외 다른 텍스트 가능)
|
||||||
|
- `header_pin` (optional) — pin 아이콘
|
||||||
|
- `scene_image` (optional) — 메인 합성 이미지. 없으면 박스 자리만 차지하거나 단색 fill
|
||||||
|
- `globe_overlay` (optional) — 원형 오버레이 아이콘
|
||||||
|
- `arrow_chain` (required) — 장면과 리스트 연결하는 수직 체인
|
||||||
|
- `numbered_badges[N=list_items.length]` (required) — 번호별 PNG 배지
|
||||||
|
|
||||||
|
## Sub-patterns
|
||||||
|
|
||||||
|
- `scene-photo-with-circle-overlay` — 큰 합성 이미지 + 원형 아이콘 오버레이 (R16 비슷한 프레임 배치 패턴)
|
||||||
|
- `numbered-pill-list` — 번호 배지 + 옆 pill 텍스트 막대 N개 (1171281180 stacked-arrow-list와 다름: 여기는 평행 배열, 1171281180은 계단)
|
||||||
|
|
||||||
|
## 임시 보정 (1:1, 템플릿화 시 재고려)
|
||||||
|
|
||||||
|
- 번호 배지를 PNG로 유지 (CSS 변환 시 1171281174의 chevron 모양 + 번호 폰트 동시 재현 필요 → 향후 svg/ 폴더로 정리)
|
||||||
|
- text_bubble을 PNG로 유지 (CSS gradient/border-radius로 변환 가능 → 프로모션 시 CSS화 후보)
|
||||||
205
figma_to_html_agent/blocks/1171281174/index.html
Normal file
205
figma_to_html_agent/blocks/1171281174/index.html
Normal file
@@ -0,0 +1,205 @@
|
|||||||
|
<!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>
|
||||||
25
figma_to_html_agent/blocks/1171281174/texts.md
Normal file
25
figma_to_html_agent/blocks/1171281174/texts.md
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
# Frame 1171281174 — 텍스트 (TF-IDF 매칭용)
|
||||||
|
|
||||||
|
> 프레임 안의 모든 텍스트를 빠짐없이 추출. nodeId: 182:2810
|
||||||
|
|
||||||
|
## 타이틀
|
||||||
|
|
||||||
|
국외
|
||||||
|
|
||||||
|
## 본문 (번호별 항목)
|
||||||
|
|
||||||
|
### 01
|
||||||
|
|
||||||
|
오류에 의한 Claim 최소화
|
||||||
|
|
||||||
|
### 02
|
||||||
|
|
||||||
|
설계 업무 시 사업 Data 정리 필수
|
||||||
|
|
||||||
|
### 03
|
||||||
|
|
||||||
|
자체적인 기술업무 Manual 작성
|
||||||
|
|
||||||
|
### 04
|
||||||
|
|
||||||
|
데이터 통합 및 관리
|
||||||
62
figma_to_html_agent/blocks/1171281175/analysis.md
Normal file
62
figma_to_html_agent/blocks/1171281175/analysis.md
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
# Frame 1171281175 — 국내 BIM 수행 관계도
|
||||||
|
|
||||||
|
## 내용 설명
|
||||||
|
|
||||||
|
국내 BIM 수행 주체 간 관계를 중앙 4각 관계도로 표현하는 다이어그램.
|
||||||
|
건설관리사·설계사·시공사·정부기관(발주처) 4주체 사이의 지침·규정·
|
||||||
|
기술 형식 관계를 라벨과 연결선으로 배치. 4개 주체·기관·이해당사자
|
||||||
|
간 관계 구조 설명·국내 BIM 생태계 관계 구도 제시에 적합.
|
||||||
|
3개 이하 주체·5개 이상 항목·주체별 효과 나열(table 형태)·시간 순서
|
||||||
|
·단일 주체 심층·필수요건 나열에는 부적합.
|
||||||
|
|
||||||
|
## 후보 키워드
|
||||||
|
|
||||||
|
건설관리사, 설계사, 시공사, 정부기관, 발주처, 지침, 규정, 기술형식, BIM수행, 국내
|
||||||
|
|
||||||
|
## 정제 Anchor Sets
|
||||||
|
|
||||||
|
- **bim_actors**: 건설관리사, 설계사, 시공사, 정부기관, 발주처
|
||||||
|
- **regulation_relations**: 지침, 규정, 기술형식, BIM수행
|
||||||
|
- **domestic_relations**: 국내
|
||||||
|
|
||||||
|
## 구조 매칭 정보
|
||||||
|
|
||||||
|
- **family**: diagram
|
||||||
|
- **layout**: quadrilateral-relations
|
||||||
|
- **axis**: horizontal
|
||||||
|
- **relation_type**: hierarchy
|
||||||
|
- **cardinality**: ideal 4 / min 4 / max 4
|
||||||
|
- **slots** (6개, required 5개): title, actor_1, actor_2, actor_3, actor_4, relations
|
||||||
|
- **source title**: 국내 BIM 수행 관계도
|
||||||
|
- **original layout**: diagram-labels
|
||||||
|
|
||||||
|
## 적합/부적합 기준
|
||||||
|
|
||||||
|
### suits
|
||||||
|
- 4주체 간 관계 구조
|
||||||
|
- 국내 BIM 생태계 관계 구도
|
||||||
|
- 이해당사자 관계도
|
||||||
|
|
||||||
|
### not_suits
|
||||||
|
- 3개 이하 주체
|
||||||
|
- 5개 이상 항목
|
||||||
|
- 주체별 기대효과 나열 (table)
|
||||||
|
- 시간 순서
|
||||||
|
- 단일 주체 심층
|
||||||
|
- 필수요건 나열 (기술/사람/자연)
|
||||||
|
|
||||||
|
## 재구성 허용
|
||||||
|
|
||||||
|
- **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 1171281175 — 국내 BIM 수행 관계도
|
||||||
|
|
||||||
|
## 구조
|
||||||
|
- **layout**: diagram-labels
|
||||||
|
- **detail**: 타이틀("국내") + 중앙 4각 관계도 (건설관리사·설계사·시공사·정부기관 관계)
|
||||||
|
|
||||||
|
## 내용
|
||||||
|
국내 BIM 수행 주체 간 관계 다이어그램 — 건설관리사·설계사·시공사·정부기관(발주처)의 지침·규정·기술 형식 관계.
|
||||||
|
|
||||||
|
## 후보 키워드
|
||||||
|
국내, BIM수행, 건설관리사, 설계사, 시공사, 정부기관, 발주처, 지침, 규정, 기술형식, 4각관계도, 주체별관계
|
||||||
|
|
||||||
|
## 메타
|
||||||
|
- source: texts.md + flat.md
|
||||||
|
- schema_version: analysis-v1
|
||||||
|
- tagged_by: claude-opus-4-7
|
||||||
|
- tagged_at: 2026-04-21
|
||||||
52
figma_to_html_agent/blocks/1171281175/texts.md
Normal file
52
figma_to_html_agent/blocks/1171281175/texts.md
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
# Frame 1171281175 — 텍스트 (TF-IDF 매칭용)
|
||||||
|
|
||||||
|
> 프레임 안의 모든 텍스트를 빠짐없이 추출. nodeId: 182:2829
|
||||||
|
|
||||||
|
## 타이틀
|
||||||
|
|
||||||
|
국내
|
||||||
|
|
||||||
|
## 다이어그램 라벨 (중앙 4각 관계도)
|
||||||
|
|
||||||
|
건설관리사
|
||||||
|
|
||||||
|
설계사
|
||||||
|
|
||||||
|
시공사
|
||||||
|
|
||||||
|
정부기관&발주처
|
||||||
|
|
||||||
|
## 다이어그램 강조 라벨 (빨간색)
|
||||||
|
|
||||||
|
지침
|
||||||
|
|
||||||
|
형식적
|
||||||
|
|
||||||
|
규정
|
||||||
|
|
||||||
|
설계기술
|
||||||
|
|
||||||
|
발전X
|
||||||
|
|
||||||
|
## 본문 (번호별 항목)
|
||||||
|
|
||||||
|
### 01
|
||||||
|
|
||||||
|
엔지니어링사 -> 정부에 지침 요구
|
||||||
|
|
||||||
|
- 정부주도 성과품 -> 기술수준 저하
|
||||||
|
- 보안/지식재산권 없이 성과품 공유
|
||||||
|
|
||||||
|
### 02
|
||||||
|
|
||||||
|
형식적 규정 수행 및 기술발전 저해
|
||||||
|
|
||||||
|
- 과거 수행 방식 답습
|
||||||
|
- 형식적인 규정 및 절차 증가
|
||||||
|
|
||||||
|
### 03
|
||||||
|
|
||||||
|
부족한 인력, 짧은 설계기간, 빠른 경제발전
|
||||||
|
|
||||||
|
- 차관사업(IBRD, ADB) -> 빠른 발전
|
||||||
|
- 기본적인 Data 정리 / Manual 작성 부재
|
||||||
63
figma_to_html_agent/blocks/1171281176/analysis.md
Normal file
63
figma_to_html_agent/blocks/1171281176/analysis.md
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
# Frame 1171281176 — 보상현황·민원 관리 (시각화 활용)
|
||||||
|
|
||||||
|
## 내용 설명
|
||||||
|
|
||||||
|
보상현황·민원 관리에서 시각화 도구를 어떻게 활용하는지를 좌측
|
||||||
|
사이드 다크 배경 타이틀 + 우측 불릿 리스트 본문 구조로 제시하는
|
||||||
|
디자인. 종합평면도/용지도 기반 토지·물건 현황 시각화, 보상서류/
|
||||||
|
사진/영상 필지별 정보 시각화, 위치기반 시각화로 민원 상세 분석
|
||||||
|
내용 나열. Frame 06(full-page-map)과 동일 주제지만 list 형식으로
|
||||||
|
세부 시각화 도구 나열. 시각화 도구·방법 나열형 설명·보상현황
|
||||||
|
민원관리 실무 도구 정리에 적합. 표/카드/다이어그램 나열·주체별
|
||||||
|
나열·비교 구조·단일 주제 심층에는 부적합.
|
||||||
|
|
||||||
|
## 후보 키워드
|
||||||
|
|
||||||
|
보상현황, 민원관리, 시각화, 종합평면도, 용지도, 토지현황, 물건현황, 필지별, 보상서류
|
||||||
|
|
||||||
|
## 정제 Anchor Sets
|
||||||
|
|
||||||
|
- **compensation_visualization**: 보상현황, 민원관리, 시각화
|
||||||
|
- **land_property_data**: 종합평면도, 용지도, 토지현황, 물건현황, 필지별, 보상서류
|
||||||
|
|
||||||
|
## 구조 매칭 정보
|
||||||
|
|
||||||
|
- **family**: cards
|
||||||
|
- **layout**: side-card-with-list
|
||||||
|
- **axis**: horizontal
|
||||||
|
- **relation_type**: parallel
|
||||||
|
- **cardinality**: ideal 3 / min 3 / max 5
|
||||||
|
- **slots** (4개, required 4개): title, item_1, item_2, item_3
|
||||||
|
- **source title**: 보상현황·민원 관리 (시각화 활용)
|
||||||
|
- **original layout**: side-card
|
||||||
|
|
||||||
|
## 적합/부적합 기준
|
||||||
|
|
||||||
|
### suits
|
||||||
|
- 시각화 도구·방법 나열
|
||||||
|
- 보상현황 민원관리 실무 도구 정리
|
||||||
|
- 토지/물건 현황 시각화 리스트
|
||||||
|
|
||||||
|
### not_suits
|
||||||
|
- 표/카드 형식 항목 나열
|
||||||
|
- 주체별 나열 (발주자/시공자/설계자)
|
||||||
|
- 비교 구조 (대조)
|
||||||
|
- 단일 주제 심층
|
||||||
|
- 2개 비교
|
||||||
|
- 필수요건 나열 (기술/사람/자연)
|
||||||
|
|
||||||
|
## 재구성 허용
|
||||||
|
|
||||||
|
- **split**: True
|
||||||
|
- **merge**: True
|
||||||
|
- **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 1171281176 — 보상현황·민원 관리 (시각화 활용)
|
||||||
|
|
||||||
|
## 구조
|
||||||
|
- **layout**: side-card
|
||||||
|
- **detail**: 좌측 사이드 다크 배경 타이틀("보상현황·민원 관리") + 우측 불릿 리스트 본문
|
||||||
|
|
||||||
|
## 내용
|
||||||
|
보상현황·민원 관리 시각화 활용 — 종합평면도·용지도 기반 토지/물건 현황 시각화, 보상서류/사진/영상 필지별 정보 시각화, 위치기반 시각화로 민원 상세 분석.
|
||||||
|
|
||||||
|
## 후보 키워드
|
||||||
|
보상현황, 민원관리, 시각화, 종합평면도, 용지도, 토지현황, 물건현황, 보상서류, 필지별, 위치기반시각화, 민원분석
|
||||||
|
|
||||||
|
## 메타
|
||||||
|
- source: texts.md + flat.md
|
||||||
|
- schema_version: analysis-v1
|
||||||
|
- tagged_by: claude-opus-4-7
|
||||||
|
- tagged_at: 2026-04-21
|
||||||
13
figma_to_html_agent/blocks/1171281176/texts.md
Normal file
13
figma_to_html_agent/blocks/1171281176/texts.md
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
# Frame 1171281176 — 텍스트 (TF-IDF 매칭용)
|
||||||
|
|
||||||
|
> 프레임 안의 모든 텍스트를 빠짐없이 추출. nodeId: 182:3046
|
||||||
|
|
||||||
|
## 사이드 타이틀 (좌측 다크 배경)
|
||||||
|
|
||||||
|
보상현황·민원 관리
|
||||||
|
|
||||||
|
## 본문 (불릿 리스트)
|
||||||
|
|
||||||
|
- 종합평면도, 용지도를 사용한 토지 및 물건 현황 시각화
|
||||||
|
- 보상서류, 사진 및 영상 등 필지별 보상 현황 정보 시각화
|
||||||
|
- 위치기반 시각화를 활용하여 민원에 대한 상세 분석 가능
|
||||||
61
figma_to_html_agent/blocks/1171281177/analysis.md
Normal file
61
figma_to_html_agent/blocks/1171281177/analysis.md
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
# Frame 1171281177 — 보상현황·민원 관리
|
||||||
|
|
||||||
|
## 내용 설명
|
||||||
|
|
||||||
|
보상현황과 민원 관리를 위한 위치 기반 시공 리스크 맵을 풀페이지로
|
||||||
|
제시하는 디자인. 상단 배너 타이틀 + 풀페이지 맵 시각화로 시공
|
||||||
|
리스크 사업 영역을 지리 정보 위에 표시. 위치 기반 리스크 시각화·
|
||||||
|
보상현황/민원관리 맵·사업 맵 기반 정보 제공에 적합.
|
||||||
|
표/카드/다이어그램 형식의 항목 나열·주체별 나열·시간 순서·
|
||||||
|
단일 개념 정의·다면 비교에는 부적합.
|
||||||
|
|
||||||
|
## 후보 키워드
|
||||||
|
|
||||||
|
보상현황, 민원관리, 보상, 민원, 시공리스크, 위치기반
|
||||||
|
|
||||||
|
## 정제 Anchor Sets
|
||||||
|
|
||||||
|
- **compensation_complaint**: 보상현황, 민원관리, 보상, 민원
|
||||||
|
- **site_risk_map**: 시공리스크, 위치기반
|
||||||
|
|
||||||
|
## 구조 매칭 정보
|
||||||
|
|
||||||
|
- **family**: map
|
||||||
|
- **layout**: full-page-map-banner
|
||||||
|
- **axis**: horizontal
|
||||||
|
- **relation_type**: definition
|
||||||
|
- **cardinality**: ideal 1 / min 1 / max 1
|
||||||
|
- **slots** (2개, required 2개): banner_title, map_area
|
||||||
|
- **source title**: 보상현황·민원 관리
|
||||||
|
- **original layout**: full-page-map
|
||||||
|
|
||||||
|
## 적합/부적합 기준
|
||||||
|
|
||||||
|
### suits
|
||||||
|
- 위치 기반 리스크 시각화
|
||||||
|
- 보상현황/민원관리 맵
|
||||||
|
- 사업 맵 기반 정보
|
||||||
|
|
||||||
|
### not_suits
|
||||||
|
- 표 형식 항목 나열
|
||||||
|
- 카드 형식 나열
|
||||||
|
- 주체별 나열 (발주자/시공자/설계자)
|
||||||
|
- 시간 순서
|
||||||
|
- 2개 이상 비교
|
||||||
|
- 필수요건 나열 (기술/사람/자연)
|
||||||
|
|
||||||
|
## 재구성 허용
|
||||||
|
|
||||||
|
- **split**: False
|
||||||
|
- **merge**: False
|
||||||
|
- **infer_missing_slot**: False
|
||||||
|
- **rewrite_label**: True
|
||||||
|
- **rewrite_body**: False
|
||||||
|
|
||||||
|
## 메타
|
||||||
|
|
||||||
|
- 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 1171281177 — 보상현황·민원 관리 (맵 기반)
|
||||||
|
|
||||||
|
## 구조
|
||||||
|
- **layout**: full-page-map
|
||||||
|
- **detail**: 상단 배너 타이틀("보상현황·민원 관리") + 풀페이지 맵 시각화 (시공 리스크 사업 맵)
|
||||||
|
|
||||||
|
## 내용
|
||||||
|
보상현황·민원 관리 맵 기반 — 시공 리스크와 사업 맵을 풀페이지로 시각화.
|
||||||
|
|
||||||
|
## 후보 키워드
|
||||||
|
보상현황, 민원관리, 맵, 시공리스크, 사업맵, 풀페이지시각화, 상단배너, 위치기반
|
||||||
|
|
||||||
|
## 메타
|
||||||
|
- source: texts.md + flat.md
|
||||||
|
- schema_version: analysis-v1
|
||||||
|
- tagged_by: claude-opus-4-7
|
||||||
|
- tagged_at: 2026-04-21
|
||||||
29
figma_to_html_agent/blocks/1171281177/texts.md
Normal file
29
figma_to_html_agent/blocks/1171281177/texts.md
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
# Frame 1171281177 — 텍스트 (TF-IDF 매칭용)
|
||||||
|
|
||||||
|
> 프레임 안의 모든 텍스트를 빠짐없이 추출. nodeId: 182:3053
|
||||||
|
|
||||||
|
## 타이틀 (상단 배너)
|
||||||
|
|
||||||
|
보상현황·민원 관리
|
||||||
|
|
||||||
|
## 서브타이틀
|
||||||
|
|
||||||
|
시공단계 토지 및 지장물에 대한 보상 현황과 다양한 민원 관리 업무 지원
|
||||||
|
|
||||||
|
## 본문 (불릿 항목)
|
||||||
|
|
||||||
|
- 종합 평면도와 용지도를 사용하여 토지 및 물건 현황, 필지별 보상현황 정보 시각화
|
||||||
|
|
||||||
|
- 시공현장에서 발생하는 보상 민원, 요구 민원, 불편 민원 등 유형별 발생 현황 및 처리결과 표출
|
||||||
|
|
||||||
|
## 하단 결론 바
|
||||||
|
|
||||||
|
사업 리스크의 조기 파악 및 선제 대응 가능
|
||||||
|
|
||||||
|
## 민원 태그 (지도 위 라벨)
|
||||||
|
|
||||||
|
이동 데크 추가 요청
|
||||||
|
|
||||||
|
토지보상 재결 승복 이후 재민원
|
||||||
|
|
||||||
|
배수 문제 발생
|
||||||
66
figma_to_html_agent/blocks/1171281178/analysis.md
Normal file
66
figma_to_html_agent/blocks/1171281178/analysis.md
Normal file
@@ -0,0 +1,66 @@
|
|||||||
|
# Frame 1171281178 — System 구성 (H/W + S/W BIGRoom)
|
||||||
|
|
||||||
|
## 내용 설명
|
||||||
|
|
||||||
|
BIGRoom 시스템의 구성 요소를 좌측 H/W (Server·Network·회의시스템·
|
||||||
|
CCTV·Drone·Sensor) + 우측 S/W (C.C.P·WatchBIM·Domainer)의 2열
|
||||||
|
페어드 리스트로 제시하는 디자인. IT 인프라와 소프트웨어를 나란히
|
||||||
|
배치해 하나의 통합 시스템 구성 요소를 보여줌. 이 디자인은 개념
|
||||||
|
비교(예: BIM vs DX)나 과정/결과 대조(Frame 29)가 아니라, 하나의
|
||||||
|
시스템을 H/W·S/W 두 축으로 분해하는 구성 관점. BIGRoom H/W+S/W
|
||||||
|
시스템 구성·IT 인프라 + S/W 분해 설명에 적합. BIM vs DX 다면
|
||||||
|
비교·과정/결과 2분할·주체별 나열·3개 이상 비교·시간 순서·단일
|
||||||
|
구성요소 심층에는 부적합.
|
||||||
|
|
||||||
|
## 후보 키워드
|
||||||
|
|
||||||
|
BIGRoom, System, H/W, Server, Network, 회의시스템, CCTV, Drone, Sensor, 센서, IoT, S/W, CCP, WatchBIM, Domainer
|
||||||
|
|
||||||
|
## 정제 Anchor Sets
|
||||||
|
|
||||||
|
- **bigroom_system**: BIGRoom, System
|
||||||
|
- **hw_components**: H/W, Server, Network, 회의시스템, CCTV, Drone, Sensor, 센서, IoT
|
||||||
|
- **sw_components**: S/W, CCP, WatchBIM, Domainer
|
||||||
|
|
||||||
|
## 구조 매칭 정보
|
||||||
|
|
||||||
|
- **family**: compare
|
||||||
|
- **layout**: 2col-paired-list
|
||||||
|
- **axis**: horizontal
|
||||||
|
- **relation_type**: compare
|
||||||
|
- **cardinality**: ideal 2 / min 2 / max 2
|
||||||
|
- **slots** (5개, required 5개): title, col_a_label, col_a_items, col_b_label, col_b_items
|
||||||
|
- **source title**: System 구성 (H/W + S/W BIGRoom)
|
||||||
|
- **original layout**: 2col-paired
|
||||||
|
|
||||||
|
## 적합/부적합 기준
|
||||||
|
|
||||||
|
### suits
|
||||||
|
- BIGRoom H/W+S/W 시스템 구성
|
||||||
|
- IT 인프라 + S/W 분해 설명
|
||||||
|
- 하나의 시스템을 2축으로 분해
|
||||||
|
|
||||||
|
### not_suits
|
||||||
|
- BIM vs DX 직접 대조
|
||||||
|
- 과정/결과 2분할 (Frame 29 주제)
|
||||||
|
- 주체별 나열 (발주자/시공자/설계자)
|
||||||
|
- 3개 이상 비교
|
||||||
|
- 시간 순서
|
||||||
|
- 단일 구성요소 심층
|
||||||
|
- 필수요건 나열 (기술/사람/자연)
|
||||||
|
|
||||||
|
## 재구성 허용
|
||||||
|
|
||||||
|
- **split**: False
|
||||||
|
- **merge**: True
|
||||||
|
- **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 1171281178 — System 구성 (H/W + S/W BIGRoom)
|
||||||
|
|
||||||
|
## 구조
|
||||||
|
- **layout**: 2col-paired
|
||||||
|
- **detail**: H/W 항목(Server·Network·회의시스템·CCTV·Drone·Sensor)과 S/W 항목(C.C.P·WatchBIM·Domainer) 2열 페어드 리스트
|
||||||
|
|
||||||
|
## 내용
|
||||||
|
BIGRoom 시스템 구성 — H/W(Server·Network·회의·CCTV·Drone·Sensor) + S/W(C.C.P·WatchBIM·Domainer) 상세 설명.
|
||||||
|
|
||||||
|
## 후보 키워드
|
||||||
|
System, BIGRoom, H/W, S/W, Server, Network, 회의시스템, CCTV, Drone, Sensor, 센서, IoT, CCP, WatchBIM, Domainer, 시공관리, 공사단계, 용지보상, 구성
|
||||||
|
|
||||||
|
## 메타
|
||||||
|
- source: texts.md + flat.md
|
||||||
|
- schema_version: analysis-v1
|
||||||
|
- tagged_by: claude-opus-4-7
|
||||||
|
- tagged_at: 2026-04-21
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 335.165 87.74" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path id="Rectangle 42079" d="M0 0H259.349C278.04 0 295.171 10.4254 303.759 27.0272L312.472 43.87L335.165 87.74H0V0Z" fill="var(--fill-0, #D16013)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 335 B |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 375 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 482 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
@@ -0,0 +1,5 @@
|
|||||||
|
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 406.561 6.0001" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id="Group 3697">
|
||||||
|
<line id="Line 1003" x1="9.20848e-08" y1="3" x2="406.561" y2="3.0001" stroke="var(--stroke-0, white)" stroke-width="6"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 332 B |
Binary file not shown.
|
After Width: | Height: | Size: 886 B |
@@ -0,0 +1,3 @@
|
|||||||
|
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 335.165 87.74" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path id="Rectangle 42078" d="M0 0H259.349C278.04 0 295.171 10.4254 303.759 27.0272L312.472 43.87L335.165 87.74H0V0Z" fill="var(--fill-0, #838486)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 335 B |
Binary file not shown.
|
After Width: | Height: | Size: 226 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
18
figma_to_html_agent/blocks/1171281178/flat.md
Normal file
18
figma_to_html_agent/blocks/1171281178/flat.md
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
# Frame 1171281178 — 실측 기록 (flat)
|
||||||
|
|
||||||
|
> 원본: 2446 × 1943 px (node 145:8394)
|
||||||
|
> 패턴: system-config-hw-sw (H/W + S/W 시스템 구성도)
|
||||||
|
> Scale: 1280 / 2446 = 0.52331
|
||||||
|
|
||||||
|
## 구조
|
||||||
|
|
||||||
|
좌: H/W 항목 7개 (Display, Server & Storage, Network, 회의시스템, CCTV, Dron Broadcasting, Sensor)
|
||||||
|
우: S/W 항목 6개 (C.C.P, WatchBIM, Domainer, BCMF, Twin Highway, B.E.Ps)
|
||||||
|
중앙: System 구성 원 (BIG Room)
|
||||||
|
하단: Ground 이미지
|
||||||
|
|
||||||
|
2D 복합 레이아웃 → absolute + zoom
|
||||||
|
|
||||||
|
## 에셋 (16개)
|
||||||
|
|
||||||
|
배경, 패널, 중앙 원, 장식 아이콘, 헤더 바 SVG 등. 모두 이미지 유지.
|
||||||
184
figma_to_html_agent/blocks/1171281178/index.html
Normal file
184
figma_to_html_agent/blocks/1171281178/index.html
Normal file
@@ -0,0 +1,184 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ko">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=1280">
|
||||||
|
<title>System 구성 H/W + S/W (Frame 1171281178)</title>
|
||||||
|
<!--
|
||||||
|
Frame: 145:8394, 2446×1943 px
|
||||||
|
Scale: 1280 / 2446 = 0.52331
|
||||||
|
패턴: system-config-hw-sw
|
||||||
|
구조: 2D 복합 레이아웃 → absolute + R19 zoom
|
||||||
|
좌: H/W 7항목, 우: S/W 6항목, 중앙: BIG Room
|
||||||
|
-->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&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: 2446px; height: 1943px;
|
||||||
|
zoom: 0.52331; /* R19 */
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.abs { position: absolute; }
|
||||||
|
.abs img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||||
|
|
||||||
|
/* 라벨 바 (CSS gradient) */
|
||||||
|
.hw-bar {
|
||||||
|
position: absolute; height: 52.44px;
|
||||||
|
background: linear-gradient(to right, rgba(255,255,255,0.5), #adb0af);
|
||||||
|
border-radius: 0 40px 40px 0;
|
||||||
|
}
|
||||||
|
.sw-bar {
|
||||||
|
position: absolute; height: 48.41px;
|
||||||
|
background: linear-gradient(to right, #fbefe8, #f8ae7c);
|
||||||
|
border-radius: 0 40px 40px 0;
|
||||||
|
}
|
||||||
|
.bar-label {
|
||||||
|
position: absolute; transform: translateY(-50%);
|
||||||
|
font-weight: 700; font-size: 40px; line-height: normal;
|
||||||
|
color: #000; display: flex; align-items: center; gap: 10px;
|
||||||
|
}
|
||||||
|
.bar-label img { width: 28px; height: 29px; flex: none; }
|
||||||
|
.body-text {
|
||||||
|
position: absolute;
|
||||||
|
font-weight: 500; font-size: 38px; line-height: 60px;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="slide">
|
||||||
|
<div class="block">
|
||||||
|
<div class="inner">
|
||||||
|
|
||||||
|
<!-- 배경 -->
|
||||||
|
<div class="abs" style="left:0; top:1577px; width:2446px; height:366px;"><img src="assets/b2accb7d555f4db0c2d35d1569011429edde1ade.png"></div>
|
||||||
|
<div class="abs" style="left:52.73px; top:77.65px; width:1144.49px; height:1819.35px;"><img src="assets/26130bd845450735906360cb922f58e3793148b7.png"></div>
|
||||||
|
<div class="abs" style="left:54.7px; top:87.74px; width:1142.52px; height:395.33px;"><img src="assets/d13b0ac6c9a0ff5028859102f433367cab26a98b.png"></div>
|
||||||
|
<div class="abs" style="left:1264.25px; top:92.78px; width:1118.86px; height:1803.21px;"><img src="assets/48d066e78784843a146e436d0edea28d91c9d007.png"></div>
|
||||||
|
<div class="abs" style="left:1264.25px; top:1509.85px; width:1118.86px; height:387.27px;"><img src="assets/151f041f6b2a897a0c3a57343474ded6aa2c720c.png"></div>
|
||||||
|
<div style="position:absolute; left:1260.31px; top:87.74px; width:1130.69px; height:391.3px; display:flex; align-items:center; justify-content:center;">
|
||||||
|
<div style="flex:none; transform:scaleY(-1);"><img src="assets/151f041f6b2a897a0c3a57343474ded6aa2c720c.png" style="width:1130.69px; height:391.3px;"></div>
|
||||||
|
</div>
|
||||||
|
<div class="abs" style="left:44.84px; top:1497.75px; width:1152.38px; height:399.37px;"><img src="assets/5c11126f4fafa3898129693842b176646a6cdec8.png"></div>
|
||||||
|
|
||||||
|
<!-- H/W 헤더 -->
|
||||||
|
<div class="abs" style="left:54.7px; top:1.01px; width:335.17px; height:87.74px;"><img src="assets/8b24ef76bacdfbd53e7ec3c4f029190aacbd722e.svg"></div>
|
||||||
|
<div style="position:absolute; left:196.65px; top:45.89px; transform:translate(-50%,-50%); font-weight:700; font-size:50px; color:#fff; text-align:center;">H/W</div>
|
||||||
|
|
||||||
|
<!-- S/W 헤더 -->
|
||||||
|
<div style="position:absolute; left:2055.83px; top:0; width:335.17px; height:87.74px; display:flex; align-items:center; justify-content:center;">
|
||||||
|
<div style="flex:none; transform:scaleY(-1) rotate(180deg);"><img src="assets/06d5951cfd9fc1902012bae433505eb88e04151b.svg" style="width:335.17px; height:87.74px;"></div>
|
||||||
|
</div>
|
||||||
|
<div style="position:absolute; left:2240.17px; top:43.87px; transform:translate(-50%,-50%); font-weight:700; font-size:50px; color:#fff; text-align:center;">S/W</div>
|
||||||
|
|
||||||
|
<!-- 중앙 원 -->
|
||||||
|
<div class="abs" style="left:883.74px; top:632.33px; width:671.18px; height:684.78px;"><img src="assets/922ee6f4bea1434652ffc08f962086052286b6c5.png"></div>
|
||||||
|
<div style="position:absolute; left:1217.79px; top:921.76px; transform:translate(-50%,-50%); text-align:center; font-weight:700; font-size:0; color:#fff;">
|
||||||
|
<p style="font-size:70px; line-height:normal; color:yellow;">System</p>
|
||||||
|
<p style="font-size:60px; line-height:normal;">구성</p>
|
||||||
|
</div>
|
||||||
|
<div style="position:absolute; left:1226.23px; top:1107.92px; transform:translate(-50%,-50%); font-weight:700; font-size:50px; color:#fff; text-align:center;">BIG Room</div>
|
||||||
|
|
||||||
|
<!-- ═══ H/W 항목 ═══ -->
|
||||||
|
|
||||||
|
<!-- Display -->
|
||||||
|
<div class="hw-bar" style="left:83.29px; top:129.09px; width:325.31px;"></div>
|
||||||
|
<div class="bar-label" style="left:83.29px; top:151.78px;"><img src="assets/7e260569216fd75f7df60441a94a25763e7f24c8.png">Display</div>
|
||||||
|
<div class="body-text" style="left:123.73px; top:189.6px; width:1098.3px;">범위가 넓고 긴 형태의 인프라 시설 규모에 적합한 대형 사이니지를 적용하여 벡터기반 도면, 3D정보 모델을 높은 정밀도로 표출</div>
|
||||||
|
|
||||||
|
<!-- Server & Storage -->
|
||||||
|
<div class="hw-bar" style="left:83.29px; top:361.05px; width:425.95px;"></div>
|
||||||
|
<div class="bar-label" style="left:83.29px; top:383.74px;"><img src="assets/7e260569216fd75f7df60441a94a25763e7f24c8.png">Server & Strorage</div>
|
||||||
|
<div class="body-text" style="left:123.73px; top:414.5px; width:1042.45px;">방대한 건설현장 데이터를 안전하게 저장하고 관리, 시공 및 공정, 기성 등 데이터베이스화 하여 실시간 접근 및 효율적인 정보공유와 관리 지원</div>
|
||||||
|
|
||||||
|
<!-- Network -->
|
||||||
|
<div class="hw-bar" style="left:74.42px; top:642.42px; width:325.31px;"></div>
|
||||||
|
<div class="bar-label" style="left:83.29px; top:667.13px;"><img src="assets/7e260569216fd75f7df60441a94a25763e7f24c8.png">Network</div>
|
||||||
|
<div class="body-text" style="left:123.73px; top:682.76px; width:1170.22px;">네트워크 서비스를 통한 실시간 데이터 수집 및 연계, 위치기반 안전관리, SaaS 기반 실시간 데이터 공유와 관리 가능</div>
|
||||||
|
|
||||||
|
<!-- 회의시스템 -->
|
||||||
|
<div class="hw-bar" style="left:74.42px; top:916.73px; width:325.31px;"></div>
|
||||||
|
<div class="bar-label" style="left:83.29px; top:943.46px;"><img src="assets/7e260569216fd75f7df60441a94a25763e7f24c8.png">회의시스템</div>
|
||||||
|
<div class="body-text" style="left:123.73px; top:982.29px; width:884.49px;">공사 현장, 개별 공구별 사무실, 사업단 회의시스템을 구축하여 신속한 의사결정을 바탕으로 업무효율성 증대</div>
|
||||||
|
|
||||||
|
<!-- CCTV -->
|
||||||
|
<div class="hw-bar" style="left:74.42px; top:1177.94px; width:325.31px;"></div>
|
||||||
|
<div class="bar-label" style="left:83.29px; top:1201.64px;"><img src="assets/7e260569216fd75f7df60441a94a25763e7f24c8.png">CCTV</div>
|
||||||
|
<div class="body-text" style="left:123.73px; top:1237.44px; width:967.95px;">각 현장에 설치된 실시간 CCTV와 연계하여 공사 진행과정과 위험 요소를 지속적으로 모니터링하여 사고를 사전에 예방</div>
|
||||||
|
|
||||||
|
<!-- Dron Broadcasting -->
|
||||||
|
<div class="hw-bar" style="left:74.42px; top:1425.02px; width:502.57px;"></div>
|
||||||
|
<div class="bar-label" style="left:84px; top:1446.7px;"><img src="assets/7e260569216fd75f7df60441a94a25763e7f24c8.png">Dron Broadcasting</div>
|
||||||
|
<div class="body-text" style="left:123.73px; top:1485.53px; width:1098.3px;">드론을 활용하여 건설 현장을 촬영하고 구조물의 상태를 실시간으로 확인 함으로써 공사의 품질을 높이며 안전한 작업 환경 조성</div>
|
||||||
|
|
||||||
|
<!-- Sensor -->
|
||||||
|
<div class="hw-bar" style="left:74.42px; top:1670.09px; width:325.31px;"></div>
|
||||||
|
<div class="bar-label" style="left:83.29px; top:1694.79px;"><img src="assets/7e260569216fd75f7df60441a94a25763e7f24c8.png">Sensor</div>
|
||||||
|
<!-- Sensor body: hw-bar bottom=1722.53 + 8px = 1731 (translateY(-50%) 제거) -->
|
||||||
|
<div class="body-text" style="left:123.73px; top:1731px; width:1067.52px;">현장에 IoT 위치기반 센서를 설치하여 사전에 균열, 진동, 기울기의 변화 등 위험요소를 실시간으로 확인하고 문제 발생 시 화면 표출</div>
|
||||||
|
|
||||||
|
<!-- ═══ S/W 항목 ═══ -->
|
||||||
|
|
||||||
|
<!-- C.C.P -->
|
||||||
|
<div class="sw-bar" style="left:1283.03px; top:129.09px; width:325.31px;"></div>
|
||||||
|
<div class="bar-label" style="left:1287.91px; top:151.78px;"><img src="assets/7e260569216fd75f7df60441a94a25763e7f24c8.png">C.C.P</div>
|
||||||
|
<!-- C.C.P body: sw-bar bottom=177.5 + 8px = 186 (translateY(-50%) 제거) -->
|
||||||
|
<div class="body-text" style="left:1341.14px; top:186px; width:1021.58px;">사업의 기본정보 및 공사진행과 관련된 모든 자료를 취합, 검증, 확인, 협업하는 효율적인 공사단계 프로세스 협업 및 관리 솔루션</div>
|
||||||
|
|
||||||
|
<!-- WatchBIM -->
|
||||||
|
<div class="sw-bar" style="left:1283.97px; top:374.16px; width:366.7px;"></div>
|
||||||
|
<div class="bar-label" style="left:1294.81px; top:398.86px;"><img src="assets/7e260569216fd75f7df60441a94a25763e7f24c8.png">WatchBIM</div>
|
||||||
|
<div class="body-text" style="left:1351.02px; top:436.68px; width:1011.65px;">공사중 단계별 건설과정을 설계모델의 시각화와 공정시뮬레이션을 통해 현장 공사진행사항을 직관적으로 확인 및 검증</div>
|
||||||
|
|
||||||
|
<!-- Domainer -->
|
||||||
|
<div class="sw-bar" style="left:1447.61px; top:650.49px; width:365.72px;"></div>
|
||||||
|
<div class="bar-label" style="left:1446.62px; top:672.17px;"><img src="assets/7e260569216fd75f7df60441a94a25763e7f24c8.png">Domainer</div>
|
||||||
|
<div class="body-text" style="left:1503.82px; top:715.03px; width:834.14px;">시공단계에서 민원 및 용지보상과 관련한 업무를 수행하는 솔루션으로 지번검색, 계약사항, 일정관리, 성과품, 협의자료 생성 등의 업무를 수행</div>
|
||||||
|
|
||||||
|
<!-- BCMF -->
|
||||||
|
<div class="sw-bar" style="left:1536.33px; top:1003.46px; width:263.74px;"></div>
|
||||||
|
<div class="bar-label" style="left:1536.33px; top:1025.15px;"><img src="assets/7e260569216fd75f7df60441a94a25763e7f24c8.png"><span style="font-size:0;"><span style="font-size:30px;">B</span><span style="font-size:40px;">CM</span><span style="font-size:30px;">F</span></span></div>
|
||||||
|
<!-- BCMF body: sw-bar bottom=1051.87 + 8px = 1060 (translateY(-50%) 제거) -->
|
||||||
|
<div class="body-text" style="left:1579.7px; top:1060px; width:786.66px;">건설 현장의 공사, 품질, 안전, 사업관리 등의 업무를 효율적으로 수행할 수 있는 BIM기반 현장 맞춤형 건설사업관리 솔루션</div>
|
||||||
|
|
||||||
|
<!-- Twin Highway -->
|
||||||
|
<div class="sw-bar" style="left:1297.77px; top:1350.39px; width:471.2px;"></div>
|
||||||
|
<div class="bar-label" style="left:1283.97px; top:1371.06px;"><img src="assets/7e260569216fd75f7df60441a94a25763e7f24c8.png">Twin Highway</div>
|
||||||
|
<!-- Twin Highway body: sw-bar bottom=1398.8 + 8px = 1407 (translateY(-50%) 제거) -->
|
||||||
|
<div class="body-text" style="left:1342.13px; top:1407px; width:1030.45px;">준공 후 가상세계의 정보모델을 실시간 데이터와 연결하여 다양한 시뮬레이션을 통해 효율적인 시설물 관리 및 운영전략 수립 지원</div>
|
||||||
|
|
||||||
|
<!-- B.E.Ps <참고> -->
|
||||||
|
<div class="sw-bar" style="left:1297.77px; top:1647.9px; width:352.91px;"></div>
|
||||||
|
<div class="bar-label" style="left:1283.97px; top:1668.57px;"><img src="assets/7e260569216fd75f7df60441a94a25763e7f24c8.png"><span style="font-size:0;"><span style="font-size:40px;">B.E.P</span><span style="font-size:30px;">s <참고></span></span></div>
|
||||||
|
<!-- B.E.Ps body: sw-bar bottom=1696.31 + 8px = 1705 (translateY(-50%) 제거) -->
|
||||||
|
<div class="body-text" style="left:1343.14px; top:1705px; width:1039.89px;">건설산업의 디지털전환을 위한 개념 및 BIM 수행을 위한 방법, 예시, 사례들을 모아놓은 사내용 시공 BIM 수행 메뉴얼 및 학습 시스템</div>
|
||||||
|
|
||||||
|
<!-- 장식 이미지들 -->
|
||||||
|
<div class="abs" style="left:338.61px; top:802.77px; width:118.29px; height:121.02px;"><img src="assets/f6d6c38d03350b0b72b994f44c10d41ac1ae67e0.png"></div>
|
||||||
|
<div class="abs" style="left:34px; top:513.33px; width:98.58px; height:100.85px;"><img src="assets/f6d6c38d03350b0b72b994f44c10d41ac1ae67e0.png"></div>
|
||||||
|
<div class="abs" style="left:577.16px; top:345.92px; width:47.32px; height:48.41px;"><img src="assets/501526da860c6430caa4bb133a8d6bd3ba1580f2.png"></div>
|
||||||
|
<div class="abs" style="left:973.45px; top:1461.33px; width:98.58px; height:100.85px;"><img src="assets/f6d6c38d03350b0b72b994f44c10d41ac1ae67e0.png"></div>
|
||||||
|
<div class="abs" style="left:1560.97px; top:732.18px; width:124.21px; height:127.07px;"><img src="assets/6a5c82585b829bba6812fb47fc12a2e3f419e62d.png"></div>
|
||||||
|
<div class="abs" style="left:1936.55px; top:1225.34px; width:54.22px; height:55.47px;"><img src="assets/1e43a4acb2f3f368932da59f33a8793ba8b95fc7.png"></div>
|
||||||
|
<div class="abs" style="left:776.29px; top:1323.16px; width:83.79px; height:85.72px;"><img src="assets/5f14763f6097e3a734ac3375813a675d341ae1f3.png"></div>
|
||||||
|
<div class="abs" style="left:348.46px; top:1619.66px; width:98.58px; height:100.85px;"><img src="assets/f6d6c38d03350b0b72b994f44c10d41ac1ae67e0.png"></div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
35
figma_to_html_agent/blocks/1171281178/texts.md
Normal file
35
figma_to_html_agent/blocks/1171281178/texts.md
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
# Frame 1171281178 — 텍스트 (TF-IDF 매칭용)
|
||||||
|
|
||||||
|
## H/W 항목
|
||||||
|
Display
|
||||||
|
범위가 넓고 긴 형태의 인프라 시설 규모에 적합한 대형 사이니지를 적용하여 벡터기반 도면, 3D정보 모델을 높은 정밀도로 표출
|
||||||
|
Server & Strorage
|
||||||
|
방대한 건설현장 데이터를 안전하게 저장하고 관리, 시공 및 공정, 기성 등 데이터베이스화 하여 실시간 접근 및 효율적인 정보공유와 관리 지원
|
||||||
|
Network
|
||||||
|
네트워크 서비스를 통한 실시간 데이터 수집 및 연계, 위치기반 안전관리, SaaS 기반 실시간 데이터 공유와 관리 가능
|
||||||
|
회의시스템
|
||||||
|
공사 현장, 개별 공구별 사무실, 사업단 회의시스템을 구축하여 신속한 의사결정을 바탕으로 업무효율성 증대
|
||||||
|
CCTV
|
||||||
|
각 현장에 설치된 실시간 CCTV와 연계하여 공사 진행과정과 위험 요소를 지속적으로 모니터링하여 사고를 사전에 예방
|
||||||
|
Dron Broadcasting
|
||||||
|
드론을 활용하여 건설 현장을 촬영하고 구조물의 상태를 실시간으로 확인 함으로써 공사의 품질을 높이며 안전한 작업 환경 조성
|
||||||
|
Sensor
|
||||||
|
현장에 IoT 위치기반 센서를 설치하여 사전에 균열, 진동, 기울기의 변화 등 위험요소를 실시간으로 확인하고 문제 발생 시 화면 표출
|
||||||
|
|
||||||
|
## S/W 항목
|
||||||
|
C.C.P
|
||||||
|
사업의 기본정보 및 공사진행과 관련된 모든 자료를 취합, 검증, 확인, 협업하는 효율적인 공사단계 프로세스 협업 및 관리 솔루션
|
||||||
|
WatchBIM
|
||||||
|
공사중 단계별 건설과정을 설계모델의 시각화와 공정시뮬레이션을 통해 현장 공사진행사항을 직관적으로 확인 및 검증
|
||||||
|
Domainer
|
||||||
|
시공단계에서 민원 및 용지보상과 관련한 업무를 수행하는 솔루션으로 지번검색, 계약사항, 일정관리, 성과품, 협의자료 생성 등의 업무를 수행
|
||||||
|
BCMF
|
||||||
|
건설 현장의 공사, 품질, 안전, 사업관리 등의 업무를 효율적으로 수행할 수 있는 BIM기반 현장 맞춤형 건설사업관리 솔루션
|
||||||
|
Twin Highway
|
||||||
|
준공 후 가상세계의 정보모델을 실시간 데이터와 연결하여 다양한 시뮬레이션을 통해 효율적인 시설물 관리 및 운영전략 수립 지원
|
||||||
|
B.E.Ps <참고>
|
||||||
|
건설산업의 디지털전환을 위한 개념 및 BIM 수행을 위한 방법, 예시, 사례들을 모아놓은 사내용 시공 BIM 수행 메뉴얼 및 학습 시스템
|
||||||
|
|
||||||
|
## 중앙
|
||||||
|
System 구성
|
||||||
|
BIG Room
|
||||||
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
|
||||||
|
|
||||||
|
### 본문
|
||||||
|
- **착수 전** 공정계획, 시공계획 등 계획 수립
|
||||||
|
- **개별 공사 전** 시공상세도를 기반으로 한 작업 내용 확인
|
||||||
|
- **개별 공사 후** 실적 관리, 공사관련 문서 작성, 업무 보고
|
||||||
BIN
figma_to_html_agent/blocks/1171281180/_renders/flex.png
Normal file
BIN
figma_to_html_agent/blocks/1171281180/_renders/flex.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
BIN
figma_to_html_agent/blocks/1171281180/_renders/slide_flex.png
Normal file
BIN
figma_to_html_agent/blocks/1171281180/_renders/slide_flex.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
62
figma_to_html_agent/blocks/1171281180/analysis.md
Normal file
62
figma_to_html_agent/blocks/1171281180/analysis.md
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
# Frame 1171281180 — 시공 전 모델 기반 시공상세 정보물
|
||||||
|
|
||||||
|
## 내용 설명
|
||||||
|
|
||||||
|
시공 전 모델 기반 시공상세 정보물을 활용한 시공계획 작성 지원
|
||||||
|
내용을 세로 스택 리스트로 제시하는 디자인. 타이틀 + 세로 라벨 +
|
||||||
|
여러 항목(정보물·모델·시뮬레이션·도면·성과물)을 수직으로 나열.
|
||||||
|
시공 전 계획 단계 정보물 나열·3D 모델 기반 시공 산출물 목록·
|
||||||
|
시공계획 작성 지원 도구 정리에 적합. 주체별 나열·비교 구조·
|
||||||
|
2개 대조·3개 이하 항목·시간 순서 단계·필수요건 나열에는 부적합.
|
||||||
|
|
||||||
|
## 후보 키워드
|
||||||
|
|
||||||
|
시공전모델, 시공상세정보물, 시공계획, 계획작성, 정보물, 모델, 시뮬레이션, 도면, 성과물, 3D모델, 지원
|
||||||
|
|
||||||
|
## 정제 Anchor Sets
|
||||||
|
|
||||||
|
- **pre_construction**: 시공전모델, 시공상세정보물, 시공계획, 계획작성
|
||||||
|
- **deliverables**: 정보물, 모델, 시뮬레이션, 도면, 성과물, 3D모델
|
||||||
|
- **support_context**: 지원
|
||||||
|
|
||||||
|
## 구조 매칭 정보
|
||||||
|
|
||||||
|
- **family**: list
|
||||||
|
- **layout**: list-stacked-vertical
|
||||||
|
- **axis**: vertical
|
||||||
|
- **relation_type**: parallel
|
||||||
|
- **cardinality**: ideal 5 / min 4 / max 6
|
||||||
|
- **slots** (3개, required 3개): title, side_label, items
|
||||||
|
- **source title**: 시공 전 모델 기반 시공상세 정보물
|
||||||
|
- **original layout**: list-stacked
|
||||||
|
|
||||||
|
## 적합/부적합 기준
|
||||||
|
|
||||||
|
### suits
|
||||||
|
- 시공 전 계획 단계 정보물 나열
|
||||||
|
- 3D 모델 기반 시공 산출물 목록
|
||||||
|
- 시공계획 도구 정리
|
||||||
|
|
||||||
|
### not_suits
|
||||||
|
- 주체별 나열 (발주자/시공자/설계자)
|
||||||
|
- 비교 구조 (대조)
|
||||||
|
- 2개 대조
|
||||||
|
- 3개 이하 항목
|
||||||
|
- 시간 순서 단계
|
||||||
|
- 필수요건 나열 (기술/사람/자연)
|
||||||
|
|
||||||
|
## 재구성 허용
|
||||||
|
|
||||||
|
- **split**: True
|
||||||
|
- **merge**: True
|
||||||
|
- **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 1171281180 — 시공 전 모델 기반 시공상세 정보물
|
||||||
|
|
||||||
|
## 구조
|
||||||
|
- **layout**: list-stacked
|
||||||
|
- **detail**: 타이틀("시공 전 모델 기반 시공상세 정보물 이용한 시공계획 작성 지원") + 세로 라벨 + 수직 리스트 항목들
|
||||||
|
|
||||||
|
## 내용
|
||||||
|
시공 전 모델 기반 시공상세 정보물 활용 — 시공계획 작성 지원을 위한 정보물·모델·시뮬레이션·도면·성과물 리스트.
|
||||||
|
|
||||||
|
## 후보 키워드
|
||||||
|
시공전모델, 시공상세정보물, 시공계획, 정보물, 모델, 시뮬레이션, 도면, 성과물, 계획작성, 지원, 3D모델
|
||||||
|
|
||||||
|
## 메타
|
||||||
|
- source: texts.md + flat.md
|
||||||
|
- schema_version: analysis-v1
|
||||||
|
- tagged_by: claude-opus-4-7
|
||||||
|
- tagged_at: 2026-04-21
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 22.4 16.8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path id="Vector" d="M21.4629 0.5L11.1191 15.8984L0.930664 0.5H21.4629Z" fill="var(--fill-0, black)" stroke="var(--stroke-0, white)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 316 B |
@@ -0,0 +1,30 @@
|
|||||||
|
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 210.699 489.919" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g id="Mask group" filter="url(#filter0_d_106_321)">
|
||||||
|
<mask id="mask0_106_321" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="201" height="475">
|
||||||
|
<path id="Intersect" d="M0 58.1721C0 62.7691 3.14483 66.7452 7.5533 68.0482C80.6773 89.662 134.036 157.329 134.036 237.46C134.036 317.59 80.677 385.255 7.55332 406.868C3.14484 408.171 0 412.148 0 416.745V465.118C0 471.337 5.62415 476.059 11.6872 474.677C119.925 450.01 200.699 353.169 200.699 237.46C200.699 121.751 119.925 24.9083 11.6872 0.241745C5.62413 -1.13998 0 3.58191 0 9.80042V58.1721Z" fill="url(#paint0_linear_106_321)"/>
|
||||||
|
</mask>
|
||||||
|
<g mask="url(#mask0_106_321)">
|
||||||
|
<rect id="Rectangle 43991" y="-0.00117085" width="270" height="95" fill="var(--fill-0, #FD9164)" fill-opacity="0.8"/>
|
||||||
|
<rect id="Rectangle 43992" y="94.9988" width="270" height="95" fill="var(--fill-0, #F29700)" fill-opacity="0.8"/>
|
||||||
|
<rect id="Rectangle 43993" x="-54" y="189.999" width="270" height="95" fill="var(--fill-0, #FCC948)" fill-opacity="0.8"/>
|
||||||
|
<rect id="Rectangle 43994" y="284.999" width="270" height="95" fill="var(--fill-0, #C3D601)" fill-opacity="0.8"/>
|
||||||
|
<rect id="Rectangle 43995" y="379.999" width="270" height="95" fill="var(--fill-0, #65C6C4)" fill-opacity="0.8"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<filter id="filter0_d_106_321" x="0" y="0" width="210.699" height="489.919" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||||
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||||
|
<feOffset dx="5" dy="10"/>
|
||||||
|
<feGaussianBlur stdDeviation="2.5"/>
|
||||||
|
<feComposite in2="hardAlpha" operator="out"/>
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
|
||||||
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_106_321"/>
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_106_321" result="shape"/>
|
||||||
|
</filter>
|
||||||
|
<linearGradient id="paint0_linear_106_321" x1="121.177" y1="-3.68723" x2="22.5301" y2="487.856" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#6FD6D8"/>
|
||||||
|
<stop offset="1" stop-color="#14706E"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
68
figma_to_html_agent/blocks/1171281180/flat.md
Normal file
68
figma_to_html_agent/blocks/1171281180/flat.md
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
# Frame 1171281180 — 실측 기록 (flat)
|
||||||
|
|
||||||
|
> 원본: 1153 × 592 px (node 112:87)
|
||||||
|
> 패턴: stacked-arrow-list (계단식 pill 리스트)
|
||||||
|
> Scale: 1280 / 1153 = 1.11015
|
||||||
|
|
||||||
|
## 구조
|
||||||
|
|
||||||
|
```
|
||||||
|
Frame 112:87 (1153 × 592)
|
||||||
|
├── 112:89 타이틀 바 (12, 47) 1141×29 — CSS: #fbd5b9, radius:5px, shadow
|
||||||
|
├── 112:90 TEXT 타이틀 center(592, 38) — mixed: 43px+50px gradient, #144838
|
||||||
|
│
|
||||||
|
├── 112:91 좌측 아크 장식 (12, 117) 200.7×474.9 — SVG mask group (이미지)
|
||||||
|
├── 112:117 TEXT "시공 상세 정보물" center(62.5, 342) — 45px Bold #144838, 세로 3줄
|
||||||
|
│
|
||||||
|
├── 5개 pill 행 (CSS: bg + border-bottom + radius + shadow)
|
||||||
|
│ ├── 112:111 행1 (65, 128.89) 1088×70 — border-bottom: 3px #fb5915
|
||||||
|
│ │ ├── 화살표 SVG (-rotate-90)
|
||||||
|
│ │ └── TEXT "3차원 형상의 정보 모델과 Data Base (D/B)" — 38px Medium
|
||||||
|
│ │
|
||||||
|
│ ├── 112:114 행2 (137, 220.89) 1016×70 — border-bottom: 3px #e79000
|
||||||
|
│ │ └── TEXT "목적물, 가시설 등의 단계별 시공 시뮬레이션"
|
||||||
|
│ │
|
||||||
|
│ ├── 112:108 행3 (166, 318.89) 987×70 — border-bottom: 3px #e9a804
|
||||||
|
│ │ └── TEXT "시공 및 안전교육에 도움이 되는 영상물 등 성과물"
|
||||||
|
│ │
|
||||||
|
│ ├── 112:102 행4 (137, 420.89) 1016×70 — border-bottom: 3px #919f00
|
||||||
|
│ │ └── TEXT "모델 또는 D/B, 시뮬레이션으로 부터 추출한 도면"
|
||||||
|
│ │
|
||||||
|
│ └── 112:105 행5 (65, 508.89) 1088×70 — border-bottom: 3px #0d6361
|
||||||
|
│ └── TEXT "모델에서 추출이 곤란한 안전, 유의사항, 개념도 등 상세 표현 도면"
|
||||||
|
```
|
||||||
|
|
||||||
|
## 에셋
|
||||||
|
|
||||||
|
| hash | 의미 |
|
||||||
|
|------|------|
|
||||||
|
| ff649c28...svg | 좌측 아크 장식 (복잡 mask, 이미지 유지) |
|
||||||
|
| 29c778b5...svg | 화살표 아이콘 (-rotate-90, 이미지 유지) |
|
||||||
|
|
||||||
|
## pill 행 CSS 속성 (공통)
|
||||||
|
|
||||||
|
- bg: rgba(255,255,255,0.5)
|
||||||
|
- border-bottom: 3px solid {color}
|
||||||
|
- border-radius: 30px
|
||||||
|
- box-shadow: 2px 4px 5px rgba(0,0,0,0.5)
|
||||||
|
- padding: 10px 20px
|
||||||
|
- display: flex; align-items: center; gap: 15px
|
||||||
|
|
||||||
|
## 계단 배치 패턴
|
||||||
|
|
||||||
|
| 행 | left | width | 색상 |
|
||||||
|
|----|------|-------|------|
|
||||||
|
| 1 | 65 | 1088 | #fb5915 |
|
||||||
|
| 2 | 137 | 1016 | #e79000 |
|
||||||
|
| 3 | 166 | 987 | #e9a804 |
|
||||||
|
| 4 | 137 | 1016 | #919f00 |
|
||||||
|
| 5 | 65 | 1088 | #0d6361 |
|
||||||
|
|
||||||
|
다이아몬드 형태: 넓→좁→좁→넓→넓
|
||||||
|
|
||||||
|
## 변형 가능 축
|
||||||
|
|
||||||
|
- items[N=3~7] (required) — 각 행: text + border_color
|
||||||
|
- stacking_pattern (required) — indent 패턴
|
||||||
|
- arc_decoration (optional)
|
||||||
|
- vertical_label (optional)
|
||||||
175
figma_to_html_agent/blocks/1171281180/index.html
Normal file
175
figma_to_html_agent/blocks/1171281180/index.html
Normal file
@@ -0,0 +1,175 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ko">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=1280">
|
||||||
|
<title>시공상세 정보물 (Frame 1171281180)</title>
|
||||||
|
<!--
|
||||||
|
Frame: 112:87, 1153×592 px
|
||||||
|
Scale: 1280 / 1153 = 1.11015
|
||||||
|
패턴: stacked-arrow-list
|
||||||
|
구조: R17 (pill 행 flex column) + R19 (zoom)
|
||||||
|
-->
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<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;
|
||||||
|
background: #fff; position: relative;
|
||||||
|
box-shadow: 0 4px 20px rgba(0,0,0,.15);
|
||||||
|
}
|
||||||
|
.block { width: 1280px; position: relative; overflow: hidden; }
|
||||||
|
.inner {
|
||||||
|
width: 1153px;
|
||||||
|
zoom: 1.11015; /* R19: layout 크기도 반영 */
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 타이틀 영역 */
|
||||||
|
.title-area {
|
||||||
|
position: relative;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
.title-bar {
|
||||||
|
position: absolute; left: 12px; top: 47px;
|
||||||
|
width: 1141px; height: 29px;
|
||||||
|
background: #fbd5b9; border-radius: 5px;
|
||||||
|
box-shadow: 0 4px 4px rgba(0,0,0,0.25);
|
||||||
|
}
|
||||||
|
.title-text {
|
||||||
|
position: absolute;
|
||||||
|
left: 592px; top: 38px;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
font-weight: 700; font-size: 0; line-height: 0;
|
||||||
|
color: #144838; text-align: center;
|
||||||
|
white-space: nowrap; letter-spacing: -2.25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 좌측 장식 (absolute, 콘텐츠 영역 위에 overlay) */
|
||||||
|
.arc-deco {
|
||||||
|
position: absolute; left: 12px; top: 117px;
|
||||||
|
width: 200.7px; height: 474.92px;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
.arc-deco img { width: 105%; height: 103.16%; display: block; }
|
||||||
|
|
||||||
|
.vlabel {
|
||||||
|
position: absolute;
|
||||||
|
left: 62.5px; top: 342px;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
font-weight: 700; font-size: 45px; line-height: 76px;
|
||||||
|
color: #144838; text-align: center;
|
||||||
|
text-shadow: 0 4px 4px rgba(0,0,0,0.25);
|
||||||
|
white-space: nowrap;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* pill 행 컨테이너 (flex column, R17) */
|
||||||
|
.pill-rows {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center; /* 계단 배치: 각 행이 개별 width */
|
||||||
|
gap: 22px;
|
||||||
|
padding-top: 29px; /* 타이틀 아래 여백 */
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* pill 행 (flex row: arrow + text) */
|
||||||
|
.pill-row {
|
||||||
|
height: 70px;
|
||||||
|
background: rgba(255,255,255,0.5);
|
||||||
|
border-radius: 30px;
|
||||||
|
box-shadow: 2px 4px 5px rgba(0,0,0,0.5);
|
||||||
|
border-bottom: 3px solid;
|
||||||
|
display: flex; align-items: center;
|
||||||
|
padding: 10px 20px; gap: 15px;
|
||||||
|
align-self: flex-start; /* 좌측 정렬 기본 */
|
||||||
|
}
|
||||||
|
.pill-row .arrow {
|
||||||
|
flex: none; width: 16.8px; height: 22.4px;
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
}
|
||||||
|
.pill-row .arrow img {
|
||||||
|
width: 22.4px; height: 16.8px;
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
.pill-row .text {
|
||||||
|
font-weight: 500; font-size: 38px; line-height: 75px;
|
||||||
|
color: #000; letter-spacing: -1.14px; white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 결론 바 영역 */
|
||||||
|
.conclusion {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 20px;
|
||||||
|
height: 109px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="slide">
|
||||||
|
<div class="block">
|
||||||
|
<div class="inner">
|
||||||
|
|
||||||
|
<!-- 타이틀 영역 -->
|
||||||
|
<div class="title-area">
|
||||||
|
<div class="title-bar"></div>
|
||||||
|
<div class="title-text">
|
||||||
|
<span style="font-size:43px; line-height:76px;">시공 전 모델 기반</span>
|
||||||
|
<span style="font-size:45px; line-height:76px;"> </span>
|
||||||
|
<span style="font-weight:900; font-size:50px; line-height:76px; background:linear-gradient(90deg, rgb(204,82,0), rgb(204,82,0)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;">시공상세 정보물</span>
|
||||||
|
<span style="font-size:45px; line-height:76px;"> </span>
|
||||||
|
<span style="font-size:43px; line-height:76px;">이용한 시공계획 작성 지원</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 좌측 장식 (absolute overlay) -->
|
||||||
|
<div class="arc-deco"><img src="assets/ff649c28fd98518d6b48b9e5451fe1da4c1e95d5.svg" alt=""></div>
|
||||||
|
<div class="vlabel">시공<br>상세<br>정보물</div>
|
||||||
|
|
||||||
|
<!-- pill 행 (flex column, R17 — 계단 배치) -->
|
||||||
|
<div class="pill-rows">
|
||||||
|
<!-- 행1: #fb5915, width:1088 -->
|
||||||
|
<div class="pill-row" style="width:1088px; margin-left:65px; border-color:#fb5915;">
|
||||||
|
<div class="arrow"><img src="assets/29c778b566aca6778f505874f21670de129351f8.svg" alt=""></div>
|
||||||
|
<div class="text">3차원 형상의 정보 모델과 Data Base (D/B)</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 행2: #e79000, width:1016 -->
|
||||||
|
<div class="pill-row" style="width:1016px; margin-left:137px; border-color:#e79000;">
|
||||||
|
<div class="arrow"><img src="assets/29c778b566aca6778f505874f21670de129351f8.svg" alt=""></div>
|
||||||
|
<div class="text">목적물, 가시설 등의 단계별 시공 시뮬레이션</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 행3: #e9a804, width:987 -->
|
||||||
|
<div class="pill-row" style="width:987px; margin-left:166px; border-color:#e9a804;">
|
||||||
|
<div class="arrow"><img src="assets/29c778b566aca6778f505874f21670de129351f8.svg" alt=""></div>
|
||||||
|
<div class="text">시공 및 안전교육에 도움이 되는 영상물 등 성과물</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 행4: #919f00, width:1016 -->
|
||||||
|
<div class="pill-row" style="width:1016px; margin-left:137px; border-color:#919f00;">
|
||||||
|
<div class="arrow"><img src="assets/29c778b566aca6778f505874f21670de129351f8.svg" alt=""></div>
|
||||||
|
<div class="text">모델 또는 D/B, 시뮬레이션으로 부터 추출한 도면</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 행5: #0d6361, width:1088 -->
|
||||||
|
<div class="pill-row" style="width:1088px; margin-left:65px; border-color:#0d6361;">
|
||||||
|
<div class="arrow"><img src="assets/29c778b566aca6778f505874f21670de129351f8.svg" alt=""></div>
|
||||||
|
<div class="text">모델에서 추출이 곤란한 안전, 유의사항, 개념도 등 상세 표현 도면</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
14
figma_to_html_agent/blocks/1171281180/texts.md
Normal file
14
figma_to_html_agent/blocks/1171281180/texts.md
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
# Frame 1171281180 — 텍스트 (TF-IDF 매칭용)
|
||||||
|
|
||||||
|
## 타이틀
|
||||||
|
시공 전 모델 기반 시공상세 정보물 이용한 시공계획 작성 지원
|
||||||
|
|
||||||
|
## 세로 라벨
|
||||||
|
시공 상세 정보물
|
||||||
|
|
||||||
|
## 항목
|
||||||
|
3차원 형상의 정보 모델과 Data Base (D/B)
|
||||||
|
목적물, 가시설 등의 단계별 시공 시뮬레이션
|
||||||
|
시공 및 안전교육에 도움이 되는 영상물 등 성과물
|
||||||
|
모델 또는 D/B, 시뮬레이션으로 부터 추출한 도면
|
||||||
|
모델에서 추출이 곤란한 안전, 유의사항, 개념도 등 상세 표현 도면
|
||||||
61
figma_to_html_agent/blocks/1171281181/analysis.md
Normal file
61
figma_to_html_agent/blocks/1171281181/analysis.md
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
# Frame 1171281181 — 현장 실효성 증대 기본사항
|
||||||
|
|
||||||
|
## 내용 설명
|
||||||
|
|
||||||
|
현장 실효성 증대를 위한 5가지 기본 요소(디지털 정보·S/W 솔루션·
|
||||||
|
PC 활용·직관적 인터페이스 등)를 방사형 다이어그램으로 제시하는
|
||||||
|
디자인. 각 요소는 현장 적용의 핵심 기반을 나타내며 동등한 5개
|
||||||
|
병렬 요소로 배치. 5가지 현장 적용 요소·디지털/S/W/PC 기반 인프라
|
||||||
|
5요소 제시에 적합. 3/4개 이하 항목·6개 이상·주체별 나열·시간
|
||||||
|
순서·2개 비교·필수요건 나열(기술/사람/자연)에는 부적합.
|
||||||
|
|
||||||
|
## 후보 키워드
|
||||||
|
|
||||||
|
현장실효성, 기본사항, 현장적용, 디지털정보, S/W솔루션, PC활용, 인터페이스
|
||||||
|
|
||||||
|
## 정제 Anchor Sets
|
||||||
|
|
||||||
|
- **field_effectiveness**: 현장실효성, 기본사항, 현장적용
|
||||||
|
- **tech_infrastructure**: 디지털정보, S/W솔루션, PC활용, 인터페이스
|
||||||
|
|
||||||
|
## 구조 매칭 정보
|
||||||
|
|
||||||
|
- **family**: diagram
|
||||||
|
- **layout**: radial-diagram-5
|
||||||
|
- **axis**: horizontal
|
||||||
|
- **relation_type**: parallel
|
||||||
|
- **cardinality**: ideal 5 / min 5 / max 5
|
||||||
|
- **slots** (6개, required 6개): title, element_1, element_2, element_3, element_4, element_5
|
||||||
|
- **source title**: 현장 실효성 증대 기본사항
|
||||||
|
- **original layout**: diagram-5
|
||||||
|
|
||||||
|
## 적합/부적합 기준
|
||||||
|
|
||||||
|
### suits
|
||||||
|
- 5가지 현장 적용 요소
|
||||||
|
- 디지털/S/W/PC 기반 인프라
|
||||||
|
- 5요소 방사형 제시
|
||||||
|
|
||||||
|
### not_suits
|
||||||
|
- 3개 또는 4개 이하 항목
|
||||||
|
- 6개 이상 항목
|
||||||
|
- 주체별 나열 (발주자/시공자/설계자)
|
||||||
|
- 시간 순서
|
||||||
|
- 2개 비교
|
||||||
|
- 필수요건 나열 (기술/사람/자연)
|
||||||
|
|
||||||
|
## 재구성 허용
|
||||||
|
|
||||||
|
- **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 1171281181 — 현장 실효성 증대 기본사항
|
||||||
|
|
||||||
|
## 구조
|
||||||
|
- **layout**: diagram-5
|
||||||
|
- **detail**: 타이틀("현장 실효성 증대 위한 기본사항") + 5개 다이어그램 항목(디지털정보·S/W솔루션·PC·직관 등)
|
||||||
|
|
||||||
|
## 내용
|
||||||
|
현장 실효성 증대를 위한 기본사항 — 디지털 정보·S/W 솔루션·PC 활용·직관적 인터페이스 등 5가지 요소 다이어그램.
|
||||||
|
|
||||||
|
## 후보 키워드
|
||||||
|
현장실효성, 기본사항, 디지털정보, S/W솔루션, PC활용, 직관성, 5요소, 다이어그램, 인터페이스, 현장적용
|
||||||
|
|
||||||
|
## 메타
|
||||||
|
- source: texts.md + flat.md
|
||||||
|
- schema_version: analysis-v1
|
||||||
|
- tagged_by: claude-opus-4-7
|
||||||
|
- tagged_at: 2026-04-21
|
||||||
24
figma_to_html_agent/blocks/1171281181/texts.md
Normal file
24
figma_to_html_agent/blocks/1171281181/texts.md
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
# Frame 1171281181 — 텍스트 (TF-IDF 매칭용)
|
||||||
|
|
||||||
|
> 프레임 안의 모든 텍스트를 빠짐없이 추출.
|
||||||
|
|
||||||
|
## 타이틀
|
||||||
|
현장 실효성 증대 위한 **기본사항**
|
||||||
|
|
||||||
|
## 본문 — 다이어그램 항목들
|
||||||
|
|
||||||
|
### 항목1
|
||||||
|
시스템 내 디지털 정보물 관리
|
||||||
|
|
||||||
|
### 항목2
|
||||||
|
특정 S/W 종속성 해소
|
||||||
|
|
||||||
|
### 항목3 (중앙 강조)
|
||||||
|
현장 맞춤형
|
||||||
|
Solution
|
||||||
|
|
||||||
|
### 항목4
|
||||||
|
일반PC 사용 가능
|
||||||
|
|
||||||
|
### 항목5
|
||||||
|
직관적 정보의 이해 및 활용
|
||||||
42
figma_to_html_agent/blocks/1171281182/_render.py
Normal file
42
figma_to_html_agent/blocks/1171281182/_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/1171281182/_renders/_full.png
Normal file
BIN
figma_to_html_agent/blocks/1171281182/_renders/_full.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 259 KiB |
BIN
figma_to_html_agent/blocks/1171281182/_renders/block.png
Normal file
BIN
figma_to_html_agent/blocks/1171281182/_renders/block.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 245 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user