commit beb5fd0c610ebbdd0203281ba37535516db347cd Author: kyeongmin Date: Mon Apr 13 11:16:33 2026 +0900 Figma-to-HTML 에이전트 초기 커밋 - 10단계 변환 프로세스 (PROCESS.md) - 수학 공식 레퍼런스 (MATH.md, gradient_math.py) - CSS 보정 규칙 R1~R16 (RULES.md) - 작업 규율 7개 규칙 (PROCESS-CONTROL.md) - 8개 Figma 프레임 1:1 HTML 변환물 (block-tests/) - 8개 Jinja2 템플릿 staging (templates_staging/) - 변환 완료 도서관 + 디자인 인사이트 (blocks_index.md) - 사용법 가이드 (README.md) Co-Authored-By: Claude Opus 4.6 (1M context) diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..f13d763 --- /dev/null +++ b/.gitignore @@ -0,0 +1,29 @@ +# Legacy / 임시 파일 +block_index.faiss +block_metadata.json +figma_beps_full.json +figma_center_elements.json +figma_center_full.json +figma_frames.json +figma-analysis/ +figma-assets/ +figma-screenshots/ +figma_ref/ +previews/ +FIGMA-COMPONENT-EXTRACTION-PLAN.md +FIGMA-CONVERSION-REVIEW.md +FIGMA-DESIGN-LANGUAGE.md +FIGMA-EXTRACTION.md +INSIGHT-GRADIENT.md +PHASE-FIGMA-BLOCKS.md +PLAN.md +RESEARCH.md + +# Selenium 렌더 결과 / 비교 스크린샷 +block-tests/_renders/ +block-tests/*.png + +# Python +__pycache__/ +*.pyc +scripts/__pycache__/ diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..b12e1e0 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,131 @@ +# Figma → HTML Agent + +Figma 프레임을 **수학적으로 정확하게** HTML/CSS로 변환하고, 변환물을 **재사용 가능한 블록 라이브러리**로 축적하는 에이전트. + +## 목적 + +사용자가 Figma 파일에서 프레임을 선택하면: +1. 그 프레임을 16:9 슬라이드(1280×720) 안의 HTML 블록으로 100% 동일하게 변환한다 +2. 변환물의 "변형 가능 축"을 기록한다 (원 개수, 색상, 라벨 등) +3. 같은 패턴이 반복되면 Jinja2 템플릿으로 추상화하여 design_agent의 블록 라이브러리에 편입한다 + +## 핵심 원칙 (절대 어기지 않음) + +1. **수학적 계산만 허용** — 시행착오 px 조정 금지. Figma 좌표 → 스케일 → CSS 값 수학적 도출 +2. **Bottom-up 프로세스** — leaf 노드 플래튼 → 2개씩 묶기 → 계층 쌓기. top-down하면 누락 +3. **이상 탐지 필수** — 모든 노드에 bbox 비율 검사, 회전 감지, 중복 감지 수행 +4. **AI가 먼저 발견** — 디테일(1px, 1° 차이)을 사용자 피드백 전에 AI가 스스로 찾음 +5. **하드코딩 금지** — 결과물을 수동으로 고치지 말고 프로세스를 고친다 +6. **AI 역할 분담** — AI는 분류(고르기)만, 구성(만들기)은 코드. LLM은 px을 못 본다 +7. **컨텍스트 관리는 compact로** — 한 세션에서 여러 프레임을 연속 작업할 수 있다. 컨텍스트가 무거워지면 `/compact` 로 핵심만 요약하고 계속 진행. 이유: 핵심 결정/구조/규칙은 모두 파일(CLAUDE.md, PROCESS.md, RULES.md, blocks_index.md, 산출물)에 박혀있어 compact 후에도 보존됨. 손실되는 건 시행착오/디버깅 과정 뿐이며, 이건 잃어도 OK. 매 프레임마다 새 세션을 강제하면 누적 학습이 silo되어 R13 같은 sub-pattern 발견의 즉시 적용이 불가능해짐. +8. **순수 CSS 우선, SVG는 곡선/필터에만** — 동적 재구성 위해 가능한 한 HTML div + linear-gradient 사용 +9. **프로모션은 사용자 승인 후 진행** — 1:1 HTML 검증 완료 후, 사용자 승인을 받아 `templates/blocks/new/`에 블록을 생성하고 `templates/blocks/svg/`에 이미지를 정리한다. catalog.yaml 등록과 blocks_index.md 업데이트까지 에이전트가 수행한다. 단, 사용자 승인 없이 프로모션하지 않는다. +10. **시맨틱 우선, Figma 평면 레이어 그대로 옮기지 말 것** — Figma의 평면 레이어 구조는 디자인 도구의 한계일 뿐, 의미 구조가 아니다. 마커+텍스트는 list item, 카드 묶음은 column unit, 등 시맨틱하게 재그룹핑하여 작성한다. RULES.md R13 (Custom-marker bullet list) 참조. 새로 발견되는 sub-pattern은 [blocks_index.md](blocks_index.md) "디자인 인사이트" 섹션에 누적한다. +11. **모든 슬롯은 기본 optional** — 1:1 단계에서 모든 슬롯이 채워져 있다고 해서 "이 블록은 필수" 로 해석하지 않는다. 같은 블록이 사진 없는/짧은/긴 mdx에 모두 매칭되어야 한다는 가정으로 설계한다. + +## 변환 프로세스 (10단계) + +전체 절차는 [PROCESS.md](PROCESS.md) 참조. + +``` +0-A. 에이전트: blocks_index.md 한 번 읽기 (지난 변환 패턴 확인) +0-B. 사용자: Figma에서 프레임 선택 +1. get_metadata ← 구조 + bbox +2. get_design_context ← gradient/filter/text 정보 +3. get_screenshot ← Figma 원본 (검증 비교용) +4. 자산 → block-tests/assets/shared/{hash} 캐시 +5. flat.md 작성 ← bottom-up + 이상 탐지 + 변형 축 메모 +6. 그라데이션 수학 변환 ← scripts/gradient_math.py 호출 +7. HTML 작성 ← 순수 CSS 우선, transform: scale() 균일 축소 +8. Selenium 스크린샷 ← Figma 프리뷰와 사람 눈 비교 +9. block-tests/{slug}.html + flat.md 저장 +10. blocks_index.md 1줄 업데이트 +``` + +**패턴 발견 트리거:** 동일 구조의 프레임이 **2번째** 등장하는 순간 → `templates_staging/{pattern_id}.html.j2` 로 Jinja2화. 이게 staging 종착점. + +**프로모션 게이트:** staging까지가 에이전트 책임. 그 다음은 사용자가 직접 검수하고 [design_agent/templates/blocks/](../templates/blocks/) 로 이전 + [catalog.yaml](../templates/catalog.yaml) 등록. **에이전트는 design_agent/templates/ 를 절대 건드리지 않는다.** + +## 도구 + +| 도구 | 용도 | +|------|------| +| Figma MCP `get_metadata` | 프레임 구조 + 절대 좌표 | +| Figma MCP `get_design_context` | gradient/filter/font 등 stylable 데이터 | +| Figma MCP `get_screenshot` | Figma 원본 PNG (눈 검증용) | +| `scripts/gradient_math.py` | SVG `` → CSS `linear-gradient(...)` 수학 변환 | +| Selenium (headless Chrome) | HTML 렌더링 + 검증 스크린샷 | +| Pillow | 스크린샷 자르기/비교 | + +## 입출력 + +**입력:** Figma 파일 + 노드 ID (또는 현재 선택 노드) +**출력 (변환):** +- `block-tests/{slug}.html` — 1:1 변환 결과 +- `block-tests/{slug}_flat.md` — 플래튼/이상 탐지/변형 축 메모 +- `assets/shared/...` — 공유 자산 캐시 +- `blocks_index.md` 한 줄 추가 + +**출력 (프로모션, 사용자 승인 후):** +- `templates/blocks/new/{pattern}.html` — AI가 재디자인 가능한 블록 (CSS + Jinja2) +- `templates/blocks/svg/{name}.png/svg` — 블록 공용 이미지 +- `templates/catalog.yaml` — 블록 등록 (content_structure, when, not_for) +- `blocks_index.md` 상태 → promoted + +## 폴더 구조 + +``` +figma_to_html_agent/ ← 에이전트 작업 영역 (staging) +├── CLAUDE.md ← 이 파일 (에이전트 명세) +├── PROCESS.md ← 10단계 운영 절차 (변환 핸드북) +├── MATH.md ← 수학 공식 레퍼런스 +├── RULES.md ← CSS 보정 규칙 (R1~R16) +├── PROCESS-CONTROL.md ← "찍어맞추기 금지" 규칙 +├── README.md ← 사용법 가이드 +├── blocks_index.md ← 변환 완료 도서관 +│ +├── scripts/ +│ ├── __init__.py ← 빈 파일 (패키지 인식용) +│ └── gradient_math.py ← SVG→CSS 그라데이션 변환 함수 +│ +├── block-tests/ ← Stage 1: 정적 1:1 변환물 +│ ├── {slug}.html +│ ├── {slug}_flat.md +│ ├── _renders/ ← Selenium 검증 스크린샷 +│ └── assets/ +│ ├── shared/ ← 해시 기반 자산 캐시 (재사용) +│ └── frame_{id}/ ← 프레임 전용 자산 (legacy) +│ +└── templates_staging/ ← Stage 2: Jinja2 추상화 (legacy, 현재 미사용) + +──────────────────────────────────────────────────────── +프로모션 (사용자 승인 후 에이전트가 실행) +──────────────────────────────────────────────────────── + +design_agent/templates/ +├── blocks/ +│ ├── new/ ← Figma 추출 블록 (에이전트가 작성) +│ ├── svg/ ← 블록 공용 이미지 (에이전트가 정리) +│ ├── slide-base.html ← 고정 슬라이드 배경 +│ └── cards/, emphasis/, ... ← 기존 블록 +└── catalog.yaml ← 블록 등록 (에이전트가 업데이트) +``` + +**중요:** 프로모션(블록 생성, 이미지 정리, catalog 등록)은 사용자가 1:1 HTML을 검증하고 승인한 후에만 진행한다. 사용자 승인 없이 templates/ 를 수정하지 않는다. + +## 금지 사항 + +- 시행착오 px 조정 (1씩 늘려보기 등) +- 사용자에게 "맞나요?" 반복 질문 (스스로 검증) +- line-height 등 CSS 속성을 감으로 보정 (폰트 메트릭에서 수학적 도출) +- 흰 텍스트 스트로크 (`-webkit-text-stroke: white`) 사용 +- 블록 배경을 검정으로 표시 (미리보기는 항상 흰색 배경) +- **이미지 해석으로 gradient 방향 판단** (멀티모달 금지, 데이터로만 판단 — PROCESS-CONTROL.md 참조) +- **한 번에 여러 값 동시 수정** (gradient 각도와 border-radius 동시 변경 금지) +- **장식 요소를 이미지 슬롯(img src)으로 넣기** — gradient bar, ribbon, pill, badge, 오버레이 등은 CSS로 구현. AI가 색상/크기를 조정할 수 없는 이미지 의존 블록은 쓸 수 없다 +- **사용자 승인 없이 templates/ 수정** — 프로모션은 사용자 승인 후에만 +- **여러 프레임을 한 세션에 변환** (1세션 1프레임 원칙) +- **plus-darker 블렌드 사용** (Safari 전용 → multiply로 교체, RULES.md R10) +- **Figma 인벤토리/지문/군집 같은 사전 분류** (work-creating-work, 패턴은 bottom-up으로 발견) +- **`design_agent/templates/` 직접 수정** (프로모션 게이트는 사용자 전용. 에이전트는 staging까지만) +- **사용자에게 "templates/ 에 옮겨드릴까요?" 같은 제안** (월권. 사용자가 알아서 함) diff --git a/MATH.md b/MATH.md new file mode 100644 index 0000000..d8190bf --- /dev/null +++ b/MATH.md @@ -0,0 +1,362 @@ +# 수학 공식 레퍼런스 + +Figma → HTML 변환에서 사용하는 모든 수학 공식. 이 문서의 공식만 사용하고, 직관/감으로 보정하지 않는다. + +--- + +## §1. 스케일 팩터 + +### 정의 + +``` +S = 1280 / W_원본_프레임 +``` + +`1280`은 16:9 슬라이드 가로 폭. 모든 프레임은 가로 1280에 맞춰 축소된다. + +### 적용 방법: CSS transform scale (권장) + +```html +
+
+ ... 모든 요소 (Figma 원본 px) ... +
+
+``` + +```css +.block { + width: 1280px; + height: {H × S}px; + overflow: hidden; + position: relative; +} +.inner { + position: absolute; + left: 0; top: 0; + width: {W}px; /* 원본 그대로 */ + height: {H}px; + transform: scale({S}); + transform-origin: top left; +} +``` + +**왜 transform이 좋은가:** +- 위치/크기/폰트/그림자/스트로크/blur radius 모두 한 번에 균일 축소 +- 매 값 수동 곱셈하면 누적 오차 + 검증 어려움 +- transform은 GPU 가속, 계산 정확 + +### 적용 대상 + +| 적용 | 미적용 | +|------|------| +| 위치 (x, y) | 색상 | +| 크기 (width, height) | 그라데이션 방향 (각도 그대로) | +| 폰트 크기 | 그라데이션 stop 퍼센트 (그대로) | +| 스트로크 너비 | 폰트 굵기 | +| 간격 (gap, padding) | line-height 비율 (1.5 등) | +| 그림자 (blur, offset) | border-radius 비율 (50% 등) | +| border-radius (px) | | + +--- + +## §2. SVG `` → CSS `linear-gradient()` + +### 입력 + +SVG에서: +```xml + + + + +``` + +### 변환 공식 + +``` +1. dx = x2 - x1 + dy = y2 - y1 + L_svg = √(dx² + dy²) + +2. SVG 벡터 각도 (y-down 좌표계, 0°=오른쪽, +CW): + svg_angle = atan2(dy, dx) (단위: 라디안) + +3. CSS 각도 (12시 방향=0°, +CW): + css_angle = degrees(svg_angle) + 90 + css_angle = css_angle mod 360 + +4. CSS 그라데이션 선 길이 (W×H 박스 안): + α = radians(css_angle) + L_css = |W × sin(α)| + |H × cos(α)| + +5. 박스 중심의 t 파라미터 (SVG 벡터 위, 0=시작, 1=끝): + t_center = ((W/2 - x1)·dx + (H/2 - y1)·dy) / L_svg² + +6. CSS 0% / 100%가 SVG t-space의 어디에 매핑되는지: + half = (L_css / 2) / L_svg + t0 = t_center - half ← CSS 0% + t1 = t_center + half ← CSS 100% + +7. SVG 각 stop offset (0~1)을 CSS percent로: + pct = (offset - t0) / (t1 - t0) × 100 +``` + +### 예시 + +SVG: +```xml + + + + +``` + +박스 W=H=350일 때: + +``` +dx = 108.65, dy = 156.77 +L_svg = √(108.65² + 156.77²) = 190.74 +svg_angle = atan2(156.77, 108.65) = 0.9646 rad = 55.27° +css_angle = 55.27 + 90 = 145.27° +α = 2.535 rad +L_css = 350 × |sin 145.27°| + 350 × |cos 145.27°| + = 350 × 0.5696 + 350 × 0.8220 + = 487.06 +t_center = ((175 - 110.833)·108.65 + (175 - 18.229)·156.77) / 190.74² + = (6971.7 + 24577.3) / 36382 + = 0.8672 +half = (487.06 / 2) / 190.74 = 1.2767 +t0 = 0.8672 - 1.2767 = -0.4095 +t1 = 0.8672 + 1.2767 = 2.1439 +SVG offset 0 → pct = (0 - (-0.4095)) / 2.5534 × 100 = 16.04% +SVG offset 1 → pct = (1 - (-0.4095)) / 2.5534 × 100 = 55.20% +``` + +CSS: +```css +background: linear-gradient(145.27deg, #FDC69E 16.04%, #E0782C 55.20%); +``` + +### 코드: `scripts/gradient_math.py` + +```python +from scripts.gradient_math import svg_to_css + +svg_to_css(W=350, H=350, + x1=110.833, y1=18.2292, x2=219.479, y2=175, + stops=[(0, '#FDC69E'), (1, '#E0782C')]) +# → "linear-gradient(145.27deg, #FDC69E 16.04%, #E0782C 55.20%)" +``` + +--- + +## §3. 회전 감지 (bbox 비율 검사) + +Figma MCP는 `rotation` 속성을 출력하지 않으므로 bbox 비율로 추론: + +``` +단일 문자 텍스트: + width > height × 1.5 → 90° 회전 (가로로 누움) + +일반 텍스트: + width < fontSize × 0.8 → 좁은 박스 세로 배치 (writing-mode 아님,
로 줄바꿈) +``` + +CSS 적용: +```css +.rotated { + transform: rotate(90deg); /* 또는 -90deg */ +} +``` + +--- + +## §4. Descender 보정 (padding-bottom) + +CSS `line-height: 1`이거나 `< font_content_area_ratio`이면 글리프 하강부(g, y, p, 쉼표)가 잘림. + +### 폰트별 메트릭 + +| 폰트 | UPM | typoAscender | typoDescender | content_area_ratio | +|------|-----|------|------|------| +| Noto Sans KR | 1000 | 1160 | 288 | 1.448 | +| Pretendard | 1000 | 1100 | 300 | 1.400 | + +### 공식 + +``` +content_area_ratio = (typoAscender + |typoDescender|) / UPM +half_leading = (line_height_ratio - content_area_ratio) / 2 + ↑ 음수면 잘림 발생 +clipped_px = |half_leading| × font_size +padding-bottom = ceil(clipped_px) +``` + +### 예시 (Noto Sans KR, font 27.1px, lh 1) + +``` +half_leading = (1.0 - 1.448) / 2 = -0.224 +clipped = 0.224 × 27.1 = 6.07 px +→ padding-bottom: 7px +``` + +### 예시 (Noto Sans KR, font 30px, lh 35px → ratio 1.167) + +``` +half_leading = (1.167 - 1.448) / 2 = -0.1405 +clipped = 0.1405 × 30 = 4.215 px +→ padding-bottom: 5px +``` + +--- + +## §5. SVG viewBox padding → CSS box-sizing 매핑 + +SVG가 drop-shadow blur 여백을 위해 viewBox를 확장해놓은 경우 (예: 280×280 fill을 310 viewBox에 넣음): + +### 케이스 A — Stroke가 fill 외부 (안전과 품질 ring 같은 케이스) + +``` +SVG: viewBox 310, fill r=140 (d=280), stroke r=142.5 width=5 (extends r=140 to 145) +visible: 290×290 (fill 280 + 5px stroke 외부 확장) +viewBox padding: 310 - 290 = 20 (각 변 10이 drop-shadow blur 패딩, 추가 5는 stroke) + +CSS: + div W=H=290 + border: 5px solid white + box-sizing: border-box + → border-box 290, padding-box 280 ← fill 영역 + position: Figma fill 위치 - (5, 5) ← stroke 외부 확장 보정 +``` + +### 케이스 B — Stroke가 fill 내부 (생산성/소통 ring 같은 케이스) + +``` +SVG: viewBox 300, fill r=140, stroke r=137.5 width=5 (extends r=135 to 140 — fill 외곽 5px overlap) +visible: 280×280 (stroke가 fill 외곽 5px를 덮음) +viewBox padding: 300 - 280 = 20 (전부 drop-shadow blur) + +CSS: + div W=H=280 + border: 5px solid white + box-sizing: border-box + background-origin: border-box ← gradient를 border-box 280에 매핑 + background-clip: border-box + → border 5가 외곽 fill을 덮어 그라데이션 가시 영역은 270 + position: Figma 위치 그대로 (offset 없음) +``` + +### 그라데이션 좌표 remap + +SVG `` 좌표는 viewBox 공간 기준. CSS box로 매핑할 때: + +``` +viewBox padding이 P (예: 15 또는 10)이라면: + CSS_x = SVG_x - P + CSS_y = SVG_y - P +``` + +이렇게 보정한 좌표를 §2의 svg_to_css 공식에 W=H=fill_size로 넣는다. + +--- + +## §6. Drop shadow: SVG `feGaussianBlur` ↔ CSS `box-shadow` + +SVG: +```xml + + + + +``` + +CSS 근사: +```css +box-shadow: 0 0 {2 × stdDeviation}px {color}; +``` + +`stdDeviation=5` → CSS `box-shadow: 0 0 10px black` + +**주의:** 정확한 픽셀 일치는 아님. 시각적으로 매우 유사하지만 SVG 가우시안과 CSS 블러 알고리즘이 다름. ±2px 차이는 허용. + +--- + +## §7. Blend mode 호환 + +### Figma가 사용하는 blend mode → CSS 호환 매핑 + +| Figma | CSS 정확 | CSS 호환 (Chrome/Firefox) | 비고 | +|-------|---------|----------------------|------| +| Normal | normal | normal | 기본 | +| Multiply | multiply | multiply | OK | +| **Plus darker** | plus-darker | **multiply** | plus-darker는 Safari 전용 | +| Darken | darken | darken | OK | +| Screen | screen | screen | OK | +| Overlay | overlay | overlay | OK | + +### Plus-darker vs Multiply 차이 + +``` +plus-darker(src, dst) = max(0, src + dst - 1) +multiply(src, dst) = src × dst +``` + +- 흰 배경: 둘 다 동일 (효과 없음) +- 어두운 배경: multiply가 plus-darker보다 강하게 어두워짐 +- 밝은 그라데이션 + 흰 배경 조합: 시각적 차이 거의 없음 (이 프로젝트 디자인 대부분 해당) + +→ **Chrome/Firefox 호환 위해 multiply로 통일.** RULES.md R10 참조. + +--- + +## §8. CSS `border-radius` 비율 변환 + +Figma `cornerRadius`는 px 단위. CSS도 px 단위 그대로 사용 + scale 적용. + +특수 케이스: +- 완전 원: `border-radius: 50%` +- 캡슐: `border-radius: {height/2}px` +- 한쪽만 둥근 사각: `border-radius: {tl} {tr} {br} {bl}` (개별 4값) + +스케일링 시: scale transform이 자동으로 px 값을 비율 유지하며 축소함. 별도 계산 불필요. + +--- + +## §9. 글자 수 추정 (블록 안에 들어갈 텍스트 양) + +블록 너비/높이에서 들어갈 수 있는 한글 글자 수를 미리 계산: + +``` +한 줄 글자 수 = 블록 너비(px) / (font_size × 한글_글자_너비_계수) +줄 수 = 블록 높이(px) / (font_size × line_height_ratio) +총 글자 수 = 한 줄 × 줄 수 × 안전계수(0.85) +``` + +### Pretendard / Noto Sans KR 한글 글자 너비 계수 = 0.97 + +| font-size | 한글 글자 너비 | line_height 1.6 줄 높이 | +|-----------|-------------|---------------------| +| 12px | 11.6px | 19.2px | +| 16px | 15.5px | 25.6px | +| 20px | 19.4px | 32.0px | +| 24px | 23.3px | 38.4px | +| 30px | 29.1px | 48.0px | + +이는 design_agent 텍스트 편집 단계에서 사용. 변환 단계에서는 직접 사용하지 않음. + +--- + +## 검증 체크리스트 + +변환 후 매번 확인: + +- [ ] §1 스케일 — `transform: scale(S)` 한 번만 사용했는가, 매 값 수동 곱셈은 없는가 +- [ ] §2 그라데이션 — gradient_math.py로 도출한 값을 그대로 사용했는가, 눈대중 각도/stop은 없는가 +- [ ] §3 회전 — bbox 비율로 회전 감지했는가 +- [ ] §4 descender — `line_height < content_area_ratio`인 텍스트에 padding-bottom 추가했는가 +- [ ] §5 viewBox — stroke 정렬 확인 (외부/내부)에 따라 box-sizing 적용했는가 +- [ ] §6 shadow — `box-shadow blur = 2 × stdDeviation`인가 +- [ ] §7 blend — `plus-darker`를 `multiply`로 교체했는가 diff --git a/PROCESS-CONTROL.md b/PROCESS-CONTROL.md new file mode 100644 index 0000000..0f86f60 --- /dev/null +++ b/PROCESS-CONTROL.md @@ -0,0 +1,66 @@ +# Figma → HTML 프로세스 제어 + +## 변경 전 반드시 확인 + +### 1. 소스는 Figma 데이터다 +- gradient 방향: Figma 데이터의 각도에서 CSS 변환 (CSS = 90 - Figma) +- border-radius: Figma 데이터 그대로 (스케일만) +- PNG를 보고 방향을 판단하지 않는다 +- PNG는 픽셀 데이터 분석으로만 교차 검증에 사용 + +### 2. 이미지 해석 금지 +- 멀티모달 이미지 해석으로 gradient 방향 판단 불가 (미묘한 alpha에서 틀림) +- 방향 확인이 필요하면 픽셀 데이터를 숫자로 분석 +- "보니까 ~인 것 같다" 금지. 데이터로 확인 + +### 3. 작동하는 것은 건드리지 않는다 +- 사용자가 A만 문제라고 하면 A만 수정 +- B, C가 "같은 이유로 틀릴 것 같다"고 추측해서 함께 바꾸지 않는다 +- 변경 전: 현재 값이 뭔지 기록 +- 변경 후: 변경한 값이 뭔지 기록 +- 되돌려야 할 때 정확히 어디로 돌아가는지 알아야 한다 + +### 4. 한 번에 하나만 바꾼다 +- gradient 각도와 border-radius를 동시에 바꾸지 않는다 +- 하나 바꾸고 확인, 맞으면 다음 하나 + +### 5. 사용자가 말한 것만 한다 +- 사용자의 피드백을 자의적으로 해석하지 않는다 +- "주황색 gradient가 안 맞다" → 주황색 gradient만 수정 +- 초록, 다른 요소는 건드리지 않는다 + +### 6. 찍어맞추기 금지 +- 0deg 안 되면 180deg, 그것도 안 되면 90deg... 이런 식 금지 +- 값을 바꾸기 전에 WHY를 먼저 설명할 수 있어야 한다 +- 설명 못하면 바꾸지 않는다 + +### 7. "쉬운 전면 재작성" 절대 금지 +- 80점 결과물에서 2가지 문제를 고칠 때, 구조를 flex/grid 등으로 **전면 재작성하지 않는다** +- 기존에 맞춘 수십 가지(pill 크기, 위치, 비율, border 걸침)가 전부 깨진다 +- **기존 구조 유지 + 문제만 정확히 수정**이 원칙 +- 보완이 안 되면 그 방식을 오답노트로 두고 **다른 방식으로 접근** +- 점점 나빠지면 **즉시 멈추고 마지막 OK 상태로 복원** +- 구조 변경이 불가피하면 **사전에 영향 범위 분석 + 사용자 확인 후** 진행 + +## Figma 도형 gradient 처리 프로세스 + +``` +1. Figma gradient 각도 확인 +2. gradient를 0으로 돌린 기본 상태 파악 + - border-radius: Figma 값 그대로 + - gradient: CSS 90deg (Figma 0 = 왼→오 = CSS 90deg) +3. CSS로 기본 상태 구현 +4. Figma gradient 각도 적용: CSS = 90 - Figma각도 +5. 위치(left, top)와 크기(width, height) 배치 +``` + +## Figma gradient 각도 체계 + +``` +Figma 0° = 왼쪽 진 → 오른쪽 옅 = CSS 90° +Figma -90° = 위 진 → 아래 옅 = CSS 180° +Figma -180° = 오른쪽 진 → 왼쪽 옅 = CSS 270° +Figma 90° = 아래 진 → 위 옅 = CSS 0° +``` + +변환: **CSS = 90 - Figma** diff --git a/PROCESS.md b/PROCESS.md new file mode 100644 index 0000000..6f6538b --- /dev/null +++ b/PROCESS.md @@ -0,0 +1,410 @@ +# 변환 절차 (10 STEP) + +Figma 프레임 1개를 HTML+template으로 변환할 때 매번 동일하게 따르는 운영 핸드북. + +> **원칙: 같은 세션에서 여러 프레임 연속 작업 OK.** 컨텍스트가 무거워지면 `/compact` 로 정리하고 계속 진행. 핵심 결정/규칙/산출물은 모두 파일에 박혀있어 compact 후에도 보존됨. 이렇게 해야 누적 학습(R13 등 sub-pattern)이 즉시 적용됨. CLAUDE.md 원칙 7 참조. + +> **원칙: 1 프레임 변환 = 1:1 reference + 템플릿 동시 작성.** 1번째 등장이라도 templates_staging/{pattern}.html.j2 + meta.yaml + example.yaml 까지 작성한다. 정적 HTML만 두는 것은 work-creating-work. 사용자가 final 검수 후 design_agent/templates/ 로 직접 프로모션. + +--- + +## STEP 0 — 준비 + +### 0-A. 에이전트: blocks_index.md 한 번 읽기 (필수) + +새 세션은 메모리가 없다. 패턴 발견 트리거(2번째 등장)가 작동하려면 **세션 시작 직후** [blocks_index.md](blocks_index.md)를 한 번 통으로 읽어야 한다. + +``` +Read figma_to_html_agent/blocks_index.md +``` + +확인할 것: +- "변환 완료 (현행 방법론)" 섹션의 패턴 목록 +- "패턴 카탈로그" 섹션의 등록 패턴 (등장 횟수) +- "templates_staging 대기열" 의 진행 중 패턴 + +### 0-B. 사용자: 프레임 선택 + +1. Figma desktop에서 변환할 프레임을 **선택** (클릭) 한다 +2. 에이전트에게 "이 프레임 변환해줘"라고 알린다 (프레임 ID/이름 명시 권장) + +### 0-C. 에이전트: 패턴 비교 + +STEP 1~3로 metadata + screenshot 받은 직후, 0-A에서 본 인덱스와 비교: + +- 비슷한 구조 발견 → "이거 X 패턴과 비슷합니다. 두 번째 등장이면 templates_staging/ 로 Jinja2 추출 진행할까요?" 사용자에게 확인 +- 비슷한 게 없음 → 일반 STEP 4 이하 진행 + +**확인사항:** +- Figma desktop 앱이 활성 탭에 올바른 파일이 떠 있는가 +- `.mcp.json`에 figma-desktop SSE 서버가 등록돼있는가 (`http://127.0.0.1:3845/sse`) + +--- + +## STEP 1~3 — 데이터 수집 (병렬) + +세 도구를 **단일 메시지에 multiple tool_use 블록**으로 동시 호출한다 (도구 호출 단위 병렬). 순차 호출하면 같은 노드 ID를 두 번 추출하느라 토큰만 낭비됨. + +``` +[single message, multiple tool_use blocks] +1. mcp__figma-desktop__get_metadata nodeId="" (현재 선택 노드) +2. mcp__figma-desktop__get_design_context nodeId="" (현재 선택 노드) +3. mcp__figma-desktop__get_screenshot nodeId="" (현재 선택 노드) +``` + +**주의:** nodeId를 비우면 현재 선택 노드를 사용하므로 metadata 응답을 기다릴 필요 없음. 셋 다 동시에 갈 수 있다. + +| 도구 | 얻는 것 | 사용처 | +|------|--------|-------| +| get_metadata | 모든 leaf 노드의 `id, type, name, x, y, width, height` (XML) | bottom-up 플래튼 | +| get_design_context | gradient/filter/font/color (React+Tailwind 코드) | CSS 변환 | +| get_screenshot | Figma가 렌더한 PNG | STEP 8 사람 눈 검증 | + +**주의:** +- get_metadata 응답이 100KB+ 면 frame이 너무 커서 자르지 않은 상태. 사용자에게 더 작은 단위 선택 요청 +- get_design_context는 응답이 매우 크므로 한 프레임당 1회만 호출 + +--- + +## STEP 4 — 자산 정리 (block-tests/assets/shared/ 캐시) + +design_context에서 `localhost:3845/assets/{hash}.png|svg` 패턴의 자산 URL 추출. + +각 자산에 대해: +1. URL 끝의 hash를 파일명으로 사용 +2. `block-tests/assets/shared/{hash}.{ext}` 가 **이미 있으면 다운로드 스킵** +3. 없으면 curl로 다운로드 + +```bash +cd block-tests/assets/shared +for url in $URLS; do + hash=$(basename "$url") + [ -f "$hash" ] || curl -sSo "$hash" "$url" +done +``` + +HTML에서 참조 시: +```html + +``` + +(`block-tests/{slug}.html` 기준으로 상대 경로 `assets/shared/`) + +**효과:** +- 동일 자산이 여러 프레임에서 등장해도 한 번만 다운로드 (해시 파일명이라 자동 dedup) +- 후속 프레임 변환 시간 단축 +- 토큰 절약 (이미 있는지 확인만) + +**프레임 매핑 메모:** `block-tests/{slug}_assets.txt`에 사용한 hash 목록 + 의미 라벨 기록 → 추후 재추출 시 빠른 매핑 + +``` +# bim-goals-3circles_assets.txt +84965807....png bg_texture +f05ebf15....png arc_top +2f0f1750....png arc_side +``` + +**legacy:** 이전에 다운로드한 자산이 `block-tests/assets/frame_{id}/` 에 있다면 그대로 두되, 새 변환부터는 `shared/` 만 사용한다. + +--- + +## STEP 5 — flat.md 작성 (분석 + 이상 탐지) + +`block-tests/{slug}_flat.md` 파일 생성. 다음 섹션을 반드시 포함: + +### 섹션 1. 메타 +```markdown +# Frame {ID} — {이름} + +> 원본: {W} × {H} px (node {ID}) +> Scale: × {S} → {1280} × {H×S} px +> 슬라이드 16:9 안 배치 +``` + +### 섹션 2. 계층 경로 (bottom-up) + +모든 leaf 노드를 들여쓰기 트리로 표현. 그룹별 누적 offset 표시. + +``` +Frame {root} ({W}×{H}) +├─ Group "X" (offset → 누적) +│ ├─ TEXT "..." (abs_x, abs_y) {w}×{h} +│ └─ ... +``` + +### 섹션 3. 이상 탐지 결과 + +| 검사 | 결과 | +|------|------| +| 회전 단일문자 (bbox 가로 > 세로 × 1.5) | 발견 노드 ID 또는 "없음" | +| 좁은 박스 세로 텍스트 (width < fontSize × 0.8) | ... | +| 중복 노드 (동일 좌표 + 동일 내용) | ... | +| Vector 좌표 metadata vs design_context 불일치 | ... (있으면 어느 쪽 신뢰) | + +### 섹션 4. 변형 가능 축 메모 + 슬롯 옵션 + +이 블록을 템플릿화한다면 무엇이 파라미터가 될지 1~5줄로. **각 슬롯이 required인지 optional인지 표시**: + +```markdown +## 변형 가능 축 +- columns[N=2~4] (required) + - badge (required) + - bullet_items[1~12] (required) + - bg_image (required) + - bottom_photo (optional) ← 사진 없는 mdx도 이 블록 매칭 가능 +- color_palette[N] (required, N과 일치) +``` + +이 메모가 STEP 10의 `blocks_index.md` 요약 + 향후 templates_staging meta.yaml 의 초안. + +### 섹션 5. Sub-pattern 식별 (재사용 가능한 atomic 단위) + +이 블록 안에 **다른 블록과 공유 가능한 sub-pattern**이 있는가? RULES.md R13~ 참조. + +```markdown +## Sub-patterns +- `bullet-list-with-marker` (R13) — 각 텍스트 앞에 장식 마커 + - 위치: 각 컬럼 본문 영역 + - 마커: checkbox PNG + - 적용 구조: .bullet-list / .bullet-row / .bullet-icon / .bullet-text +``` + +Sub-pattern을 **즉시 RULES.md에 등록할 필요는 없다**. 동일 sub-pattern이 2번째 등장하면 그때 R번호 부여해서 정식 등록. + +--- + +## STEP 6 — 그라데이션 수학 변환 + +각 SVG `` 데이터를 [scripts/gradient_math.py](scripts/gradient_math.py)로 CSS로 변환. + +```bash +python scripts/gradient_math.py \ + --w 350 --h 350 \ + --x1 110.833 --y1 18.2292 --x2 219.479 --y2 175 \ + --stops "0:#FDC69E,1:#E0782C" +``` + +출력: +``` +linear-gradient(145.28deg, #FDC69E 16.04%, #E0782C 55.20%) +``` + +수학 원리는 [MATH.md §2 참조](MATH.md). + +**여러 그라데이션을 한 번에 변환할 땐 Python 인라인 스크립트 사용:** + +```python +import sys, os +# scripts/ 디렉토리를 sys.path에 명시 추가 (작업 디렉토리 무관) +sys.path.insert(0, os.path.join('figma_to_html_agent', 'scripts')) +from gradient_math import svg_to_css + +svg_to_css(W=350, H=350, x1=110.833, y1=18.2292, x2=219.479, y2=175, + stops=[(0, '#FDC69E'), (1, '#E0782C')]) +``` + +**작업 디렉토리가 `figma_to_html_agent/` 인 경우:** +```python +import sys; sys.path.insert(0, 'scripts') +from gradient_math import svg_to_css +``` + +**또는 정식 패키지로 사용** (`scripts/__init__.py` 가 있으므로): +```python +# 작업 디렉토리가 figma_to_html_agent/ 일 때 +from scripts.gradient_math import svg_to_css +``` + +⚠️ **금지: 함수 코드를 인라인 Python에 복사 붙여넣기**. 한 번 만든 `gradient_math.py`를 항상 import해서 쓴다. 복사하면 버그 수정 시 여러 곳을 동시에 고쳐야 하고 수식이 미세하게 어긋날 위험. + +--- + +## STEP 7 — HTML 작성 + +### 7-A. 기본 구조 + +```html +
+
+
+ ... 모든 요소 (Figma 원본 좌표 사용) ... +
+
+
+``` + +```css +.inner { + position: absolute; + left: 0; top: 0; + width: {W}px; height: {H}px; + transform: scale({S}); + transform-origin: top left; +} +``` + +**왜 transform: scale을 쓰는가:** 모든 위치/크기/폰트/그림자/스트로크가 한 번의 transform으로 균일하게 축소됨. 매 값을 수동으로 ×S 곱하는 것보다 안전하고 검증 가능. ([MATH.md §1](MATH.md)) + +### 7-B. 요소 변환 우선순위 + +| 요소 종류 | 구현 방법 | 이유 | +|---------|---------|-----| +| 원/사각형 + gradient + blend | **HTML div** + `border-radius` + `linear-gradient` + `mix-blend-mode: multiply` | 동적 재구성 위해 | +| Stroke (경계선) | `border: Npx solid color` + `box-sizing: border-box` | gradient와 함께 사용 가능 | +| Drop shadow blur | `box-shadow: 0 0 {2×stdDev}px {color}` | SVG feGaussianBlur 근사 | +| 곡선 (아크, 비원형) | **SVG ``** 또는 미리 export된 PNG | CSS 불가능 | +| 텍스트 | HTML `
` 절대 배치 | 선택 가능, 접근성 | +| 실사 이미지 | `` PNG | 재현 불가 | +| 회전된 도형 | 래퍼 div + `transform: rotate()` ([INSIGHT-GRADIENT.md](INSIGHT-GRADIENT.md)) | gradient 동시 회전 | + +### 7-C. 보정 규칙 + +[RULES.md](RULES.md) R1~R16 모두 적용: +- R1: descender padding-bottom +- R2~R3: 회전/세로 텍스트 +- R4: 그라데이션 텍스트 +- R5: 다중 fills +- R6: 중복 노드 +- R7: 흰 배경 +- R8: 스케일 팩터 +- R9: 순수 CSS 우선 +- R10: blend mode 호환 +- R11: stroke 정렬 (inside/outside) +- R12: viewBox padding + +--- + +## STEP 8 — Selenium 렌더링 + 사람 눈 검증 + +```python +from selenium import webdriver +from selenium.webdriver.chrome.options import Options +from PIL import Image +import os, time + +# _renders/ 폴더 없으면 생성 +os.makedirs('block-tests/_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.abspath('block-tests/{slug}.html').replace('\\','/') +d.get('file:///' + p) +time.sleep(1.5) +d.save_screenshot('block-tests/_renders/{slug}_full.png') + +r = d.execute_script( + 'const r=document.querySelector(".slide").getBoundingClientRect();' + 'return [r.x,r.y,r.width,r.height];' +) +Image.open('block-tests/_renders/{slug}_full.png').crop( + (int(r[0]), int(r[1]), int(r[0]+r[2]), int(r[1]+r[3])) +).save('block-tests/_renders/{slug}.png') +d.quit() +``` + +**검증 방식:** +- 자동 픽셀 diff는 하지 않음 (font 렌더 차이로 노이즈만 많음) +- Figma `get_screenshot` 응답과 Selenium 결과를 **사람 눈**으로 비교 +- 차이 발견 시 STEP 5~7로 돌아가서 원인 파악 (값 수정 금지) + +--- + +## STEP 9 — 결과물 저장 + +``` +block-tests/ +├── {slug}.html ← 변환물 +├── {slug}_flat.md ← 플래튼/이상/변형 축 메모 +└── _renders/ + └── {slug}.png ← 검증 스크린샷 +``` + +`{slug}` 명명 규칙: 의미 기반 kebab-case (예: `bim-goals-3circles`, `cards-3col-icon`). +프레임 ID는 metadata로 추적 가능하므로 파일명에 넣지 않음. + +--- + +## STEP 10 — blocks_index.md 1줄 업데이트 + +`blocks_index.md` 끝에 한 줄 추가: + +```markdown +| {slug} | {프레임 ID} | {1줄 변형 축 요약} | {날짜} | +``` + +이 인덱스가 패턴 발견의 단서가 된다. 다음 변환 시작 전에 이 인덱스를 한 번 훑어서 "이미 비슷한 거 했나?" 확인. + +--- + +## 패턴 → 템플릿화 (1번째부터 즉시) + +**규칙: 1번째 등장부터 templates_staging 작성. 정적 HTML만 두는 것 금지.** + +| 등장 횟수 | 처리 | +|---------|------| +| **1번째** | `block-tests/{slug}.html` (1:1 reference) + `templates_staging/{pattern_id}.html.j2` (Jinja2 + meta.yaml + example.yaml) **함께 작성** | +| 2번째 | 기존 staging 템플릿이 새 데이터로 잘 렌더되는지 확인. 안 되면 템플릿 수정. example 추가. | +| 3번째 이후 | 동일 | + +**왜 1번째부터 템플릿화하나?** +- 변환의 목적은 **블록 라이브러리 구축**, 단순 HTML 복제가 아님 +- 1:1 단계에서 발견한 인사이트(R13 등)를 즉시 템플릿에 반영해야 잊지 않음 +- 사용자가 검수할 때 "이게 블록으로 어떻게 작동할지" 즉시 확인 가능 +- 2번째 등장을 기다리면 사용자 수동 복제 작업이 누적됨 (work-creating-work) + +**Stage 2 산출물:** +``` +templates_staging/ +├── {pattern_id}.html.j2 ← Jinja2 템플릿 본체 +└── {pattern_id}.meta.yaml ← when / slots / min_size_px / 변형 축 초안 +``` + +여기까지가 **에이전트 책임의 끝.** + +--- + +## 🚧 프로모션 게이트 (사용자 전용) + +> 이 게이트 이후 작업은 **에이전트가 절대 수행하지 않는다.** 모든 design_agent/templates/ 변경은 사용자 본인이 직접 한다. + +### 사용자가 수행할 작업 + +1. **검수**: `templates_staging/{pattern_id}.html.j2` 를 다양한 파라미터로 렌더 테스트 +2. **품질 게이트 통과 확인**: + - [ ] 1:1 변환물과 시각적으로 동일한가 + - [ ] 슬롯 파라미터를 바꿔도 깨지지 않는가 (원 4개, 라벨 0개 등 극단 케이스) + - [ ] meta.yaml의 when/slots가 design_agent의 다른 블록과 충돌 없는가 +3. **이동**: `templates_staging/{pattern_id}.html.j2` → `design_agent/templates/blocks/{category}/` +4. **등록**: `design_agent/templates/catalog.yaml` 에 when/slots/min_size_px 추가 +5. **상태 업데이트**: `blocks_index.md` 의 해당 행 상태 → `promoted` + +### 에이전트의 역할 + +- staging 작성까지만 +- 사용자 요청 없이 `design_agent/templates/` 를 절대 읽거나 쓰지 않음 +- "templates/ 에 옮겨드릴까요?" 같은 제안 금지 (월권) +- 사용자가 명시적으로 "이 staging 결과 검토해줘"라고 요청하면 → staging 폴더 내에서만 검토 + +--- + +## 안티 패턴 (하지 말 것) + +| ❌ 하지 말 것 | 이유 | +|------------|-----| +| 사전에 인벤토리/지문/군집 단계 | work-creating-work, 패턴은 변환하면서 발견됨 | +| 1번째 등장은 정적 HTML로만 두기 (templates_staging 미작성) | work-creating-work, 인사이트 잊혀짐. 1번째부터 템플릿 작성 | +| 컨텍스트 차면 강제 새 세션 | compact 사용. 핵심 결정은 모두 파일에 박혀있어 손실 없음 | +| Figma 데이터 안 보고 멀티모달 이미지로 추측 | 미묘한 alpha/blend에서 틀림 | +| "여기 1px 어색하니 다른 곳도 같이 바꾸자" | 사용자 피드백만 정확히 반영 | +| 같은 자산을 매번 새로 다운로드 | `block-tests/assets/shared/` 캐시 활용 | +| 그라데이션 각도/색을 눈대중으로 | gradient_math.py로 수학 도출 | +| gradient_math.py 함수 코드 인라인 복사 | import만 한다. 복사하면 수식 어긋남 | +| 세션 시작에 blocks_index.md 안 읽음 | 패턴 발견 트리거 영영 작동 안 함 | +| `design_agent/templates/` 직접 수정 | 프로모션은 사용자 전용. 에이전트는 staging까지만 | +| "templates/ 옮겨드릴까요?" 제안 | 월권. 사용자가 알아서 함 | +| `prerequisites-3col.html` 을 신규 변환 레퍼런스로 사용 | 구 방법론 (R8/R9 미적용). legacy 표시됨 | diff --git a/README.md b/README.md new file mode 100644 index 0000000..c6ed17d --- /dev/null +++ b/README.md @@ -0,0 +1,165 @@ +# Figma → HTML Agent + +Figma 디자인 프레임을 **수학적으로 정확하게** HTML/CSS로 변환하고, design_agent의 **블록 라이브러리**로 축적하는 독립 에이전트. + +--- + +## 이 에이전트는 뭘 하는가? + +1. Figma 파일에서 프레임을 선택하면 +2. MCP(Figma Dev Mode)로 구조/스타일/스크린샷을 가져와서 +3. 수학적 계산(scale, gradient 변환, shadow 등)으로 1:1 HTML/CSS를 만들고 +4. AI가 재디자인할 수 있는 블록(순수 CSS + Jinja2 슬롯)으로 변환하여 +5. design_agent의 블록 라이브러리(`templates/blocks/`)에 편입한다 + +**핵심:** AI redesigner가 색상/크기/구조를 조정할 수 있도록, 장식 요소는 **CSS로 구현**하고 이미지는 crop/곡선/일러스트/사진만 남긴다. + +--- + +## 폴더 구조 + +``` +figma_to_html_agent/ +├── README.md ← 이 파일 (사용법) +├── CLAUDE.md ← 에이전트 명세 (11개 원칙) +├── PROCESS.md ← 10단계 변환 절차 핸드북 +├── MATH.md ← 수학 공식 (§1~9) +├── RULES.md ← CSS 보정 규칙 (R1~R16) +├── PROCESS-CONTROL.md ← 작업 규율 (찍어맞추기 금지 등) +├── blocks_index.md ← 변환 완료 도서관 + 디자인 인사이트 +│ +├── scripts/ +│ └── gradient_math.py ← SVG → CSS gradient 수학 변환 도구 +│ +├── block-tests/ ← 1:1 HTML 변환물 (원본 검증용) +│ ├── {slug}.html ← Figma 원본과 100% 동일한 정적 HTML +│ ├── {slug}_flat.md ← 플래튼/이상탐지/변형축 메모 +│ └── assets/ ← 이미지 에셋 +│ ├── shared/ ← 해시 기반 공유 캐시 +│ └── frame_{id}/ ← 프레임 전용 (legacy) +│ +└── templates_staging/ ← Jinja2 템플릿 초안 (legacy, 현재 미사용) +``` + +### 산출물 최종 위치 (design_agent 본체) + +``` +design_agent/ +└── templates/ + └── blocks/ + ├── new/ ← Figma 추출 블록 (8개) + ├── svg/ ← 블록 공용 이미지 (33개) + ├── slide-base.html ← 고정 슬라이드 배경 (16:9) + └── cards/, emphasis/, headers/, media/, visuals/, BEPs/, redesign/ +``` + +--- + +## 사용법 + +### 사전 준비 + +1. **Figma Desktop** 앱에서 대상 파일을 열고 **Dev Mode** 활성화 +2. `.mcp.json`에 Figma Desktop SSE 서버 등록 확인: + ```json + { "url": "http://127.0.0.1:3845/sse" } + ``` +3. Claude Code 세션 시작 + +### 변환 실행 (10단계) + +``` +STEP 0 에이전트가 blocks_index.md 읽기 → 기존 패턴 확인 +STEP 1 get_metadata — 구조 + bbox (XML) +STEP 2 get_design_context — gradient/filter/font (React+Tailwind) +STEP 3 get_screenshot — Figma 원본 PNG (검증용) +STEP 4 자산 다운로드 — block-tests/assets/shared/ 캐시 +STEP 5 flat.md 작성 — bottom-up 플래튼 + 이상탐지 + 변형축 +STEP 6 gradient 수학 변환 — scripts/gradient_math.py +STEP 7 HTML 작성 — 순수 CSS 우선, transform: scale() 균일 축소 +STEP 8 검증 — Figma 스크린샷과 비교 +STEP 9 저장 — block-tests/{slug}.html + flat.md +STEP 10 인덱스 업데이트 — blocks_index.md 1줄 추가 +``` + +**상세:** [PROCESS.md](PROCESS.md) 참조 + +### 블록 프로모션 (block-tests → templates/blocks/) + +1:1 HTML이 검증되면: + +1. **CSS 전환** — SVG/PNG 장식 요소를 CSS gradient/border-radius/shadow로 변환 + - CSS 전환 대상: gradient bar, ribbon, pill, badge, 오버레이 등 + - 이미지 유지 대상: crop/프레임 배치(R16), 곡선 아크, 아이콘, 일러스트, 실사 사진 +2. **블록 작성** — `templates/blocks/new/{pattern}.html` + - flex layout, width: 100%, Jinja2 슬롯 + - 수학적 계산 주석 (Figma px → scale → CSS 값) + - 이미지는 `svg/` 폴더에서 참조 (`{{ slot | default('svg/파일명') }}`) +3. **이미지 정리** — `templates/blocks/svg/`에 의미 있는 이름으로 저장 +4. **catalog.yaml 등록** — content_structure, when, not_for 작성 +5. **blocks_index.md 상태** — `staged` → `promoted` 업데이트 + +--- + +## 핵심 원칙 요약 + +| # | 원칙 | 설명 | +|---|------|------| +| 1 | 수학적 계산만 | Figma 좌표 → scale → CSS. 시행착오 px 조정 금지 | +| 2 | Bottom-up | leaf 노드부터 → 2개씩 묶기 → 계층 쌓기 | +| 3 | 순수 CSS 우선 | AI가 색상/크기 조정할 수 있게. SVG는 곡선/필터만 | +| 4 | 이미지 해석 금지 | gradient 방향은 데이터로. "보니까 ~인 것 같다" 금지 | +| 5 | 하드코딩 금지 | 결과물을 고치지 말고 프로세스를 고친다 | +| 6 | 전면 재작성 금지 | 80점에서 2개 고칠 때 구조를 갈아엎지 말 것 | +| 7 | 모든 슬롯 optional | 블록이 다양한 MDX에 매칭될 수 있게 | + +**상세:** [CLAUDE.md](CLAUDE.md), [PROCESS-CONTROL.md](PROCESS-CONTROL.md), [RULES.md](RULES.md) + +--- + +## 도구 + +| 도구 | 용도 | +|------|------| +| Figma MCP `get_metadata` | 프레임 구조 + 절대 좌표 (XML) | +| Figma MCP `get_design_context` | gradient/filter/font (React+Tailwind 코드) | +| Figma MCP `get_screenshot` | Figma 원본 PNG | +| `scripts/gradient_math.py` | SVG linearGradient → CSS linear-gradient 수학 변환 | +| Pillow | 이미지 픽셀 분석 (gradient 색상 추출, 이미지 해석 아님) | + +--- + +## 수학 공식 요약 + +| 공식 | 용도 | 상세 | +|------|------|------| +| `S = 1280 / W_figma` | 균일 축소 scale | MATH.md §1 | +| `CSS_angle = 90 - Figma_angle` | gradient 각도 변환 | MATH.md §2 | +| SVG `` → CSS | gradient stop % 변환 | gradient_math.py | +| `plus-darker → multiply` | blend mode 호환 | RULES.md R10 | +| bbox 비율 ≠ 텍스트 비율 → 회전 | rotation 감지 | RULES.md R11 | + +--- + +## 현재 상태 (2026-04-13) + +### 프로모션 완료 블록 (8개) + +| 패턴 | 원본 프레임 | 블록 위치 | +|------|-----------|---------| +| statement-pill-highlight | 1171281207 | blocks/new/ | +| stacked-arrow-list | 1171281180 | blocks/new/ | +| split-panel-numbered | 1171281202 | blocks/new/ | +| issues-paired-rows | 1171281194 | blocks/new/ | +| compare-vs-rows | 1171281195 | blocks/new/ | +| quadrant-2x2-issues | 1171281193 | blocks/new/ | +| cards-3col-persona | 1171281191 | blocks/new/ | +| cycle-3way-intersect | 1171281211 | blocks/new/ | + +### 공용 이미지 (templates/blocks/svg/, 33개) + +화살표, 아크, 뱃지, 아이콘, 배경 텍스처, 사진 등. 블록에서 `svg/파일명`으로 참조. + +### 고정 슬라이드 배경 + +`templates/blocks/slide-base.html` — 16:9 (1280×720), 상단 제목 + 구분선 + 본문 영역 + 하단 결론 pill. diff --git a/RULES.md b/RULES.md new file mode 100644 index 0000000..184b392 --- /dev/null +++ b/RULES.md @@ -0,0 +1,466 @@ +# CSS 보정 규칙 + +Figma → HTML 변환 시 Figma와 CSS 렌더링 차이를 수학적으로 보정하는 규칙 모음. +**모든 규칙은 수학적 근거가 있어야 한다. 감으로 보정하지 않는다.** + +--- + +## R1. Descender 보정 (padding-bottom) + +**문제:** CSS `line-height: 1`이면 글리프 하강부(g, y, p, 쉼표)가 잘림. +Figma는 line-height에 관계없이 글리프를 항상 표시하지만, CSS는 line box 밖을 자른다. + +**원인:** 폰트의 content area > line box일 때 half-leading이 음수가 되어 잘림 발생. + +**계산:** +``` +content_area_ratio = (typoAscender + |typoDescender|) / UPM +half_leading = (line_height - content_area_ratio) / 2 ← 음수이면 잘림 +clipped_px = |half_leading| × font_size +padding-bottom = ceil(clipped_px) +``` + +**폰트별 값:** + +| 폰트 | UPM | Ascender | Descender | content_area_ratio | +|------|-----|----------|-----------|-------------------| +| Noto Sans KR | 1000 | 1160 | 288 | 1.448 | +| Pretendard | 1000 | 1100 | 300 | 1.400 | + +**예시 (Noto Sans KR, font-size 27.1px, line-height 1):** +``` +half_leading = (1 - 1.448) / 2 = -0.224 +clipped = 0.224 × 27.1 = 6.07px +→ padding-bottom: 7px +``` + +**적용:** `line-height < content_area_ratio`인 모든 텍스트 요소에 padding-bottom 추가. + +--- + +## R2. 회전 감지 (bbox 비율) + +**문제:** Figma MCP는 `rotation`/`transform` 속성을 출력하지 않음. + +**감지 방법:** 바운딩 박스의 가로세로 비율이 해당 글자의 정상 비율과 반대이면 회전. + +``` +단일 문자 "(" 정상: ~18×50 (세로가 김) +Figma bbox: 60×19 (가로가 김) +→ 가로:세로 = 3.2:1 → 90° 회전 확정 +``` + +**규칙:** +- 단일 문자 텍스트에서 `width > height × 1.5` → 90° 회전 +- 일반 텍스트에서 `width < fontSize × 0.8` → 세로 배치용 좁은 박스 (writing-mode 아님,
줄바꿈) + +**CSS 구현:** +```css +.rotated-bracket { transform: rotate(90deg); } /* 여는 괄호 */ +.rotated-bracket-close { transform: rotate(-90deg); } /* 닫는 괄호 */ +``` + +--- + +## R3. 세로 텍스트 (좁은 박스) + +**문제:** Figma에서 좁은 박스(width < fontSize) 안에 텍스트를 넣으면 글자가 한 줄에 하나씩 배치됨. + +**감지:** `bbox.width < fontSize × 0.8` + 2글자 이상 + +**CSS 구현:** `writing-mode` 사용하지 않음. HTML에서 `
`로 글자마다 줄바꿈. +```html +기
술 +``` +이유: `writing-mode: vertical-rl`은 Figma 원본과 다른 간격/정렬을 만듦. + +--- + +## R4. 그라데이션 텍스트 + +**Figma:** 텍스트 fills에 GRADIENT_LINEAR이 있으면 그라데이션 텍스트. + +**CSS:** +```css +.gradient-text { + background: linear-gradient(...); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} +``` + +**주의:** 흰 텍스트 스트로크(`-webkit-text-stroke: white`) 사용 금지. +HTML에서 보기 불편하므로 제거한다. + +--- + +## R5. 다중 fills 처리 + +**Figma:** 하나의 노드에 여러 fill이 쌓일 수 있음 (리스트 순서 = 위에서 아래). + +**규칙:** 첫 번째 fill이 불투명(opacity 1)이면 나머지는 가려짐 → 첫 번째만 사용. + +--- + +## R6. 중복 노드 + +**감지:** 동일 좌표 + 동일 내용 + 동일 크기 → Figma 복사 흔적. + +**처리:** 1개만 렌더링, 나머지 무시. flat 목록에 [중복] 표기. + +--- + +## R7. 미리보기 배경 + +**슬라이드 배경:** 항상 `#ffffff` (흰색) +**블록 배경:** 항상 `#ffffff` (미리보기용). 원본 배경색은 주석으로 기록. + +이유: 다크 배경에서 요소가 안 보이는 문제 방지. 위치/크기 확인이 우선. + +--- + +## R8. 스케일 팩터 + +**계산:** `Scale = 1280 / 원본_width` + +**적용 대상:** +- 위치 (x, y) +- 크기 (width, height) +- 폰트 크기 (fontSize) +- 스트로크 너비 (strokeWeight) +- 간격 (gap, padding) +- 그림자 (blur, offset) + +**적용하지 않는 것:** +- 색상 (그대로 유지) +- 그라데이션 방향/퍼센트 (그대로 유지) +- 폰트 굵기 (그대로 유지) +- line-height 비율 (그대로 유지) +- border-radius 비율 (스케일 적용) + +**구현 권장:** 매 값 수동 곱셈 대신 `transform: scale(S)` 한 번으로 균일 축소. MATH.md §1 참조. + +--- + +## R9. 순수 CSS 우선, SVG는 곡선/필터에만 + +블록 라이브러리의 동적 재구성을 위해 가능한 한 **HTML div + CSS**로 구현한다. + +| 요소 | 구현 | +|------|------| +| 원/사각형 + linear-gradient | `
` + `border-radius` + `background: linear-gradient(...)` | +| Stroke (경계선) | `border` + `box-sizing: border-box` | +| Drop shadow blur | `box-shadow: 0 0 {2×stdDev}px {color}` | +| **곡선 (아크, 비원형 path)** | **SVG `` 또는 PNG** ← CSS 불가능 | +| **복잡한 SVG filter chain** | **SVG ``** ← CSS 근사 불가 시 | +| 텍스트 | HTML `
` 절대 배치 | + +**이유:** SVG ``는 정적 파일. 색상/개수/위치 변경 시 매번 재export 필요. CSS는 변수/Jinja로 즉시 파라미터화 가능. + +--- + +## R10. Blend mode 호환 (plus-darker → multiply) + +**문제:** Figma의 `plus darker` blend mode는 Apple CoreGraphics 전용. CSS 스펙엔 `plus-darker`가 있지만 **Safari/WebKit만 지원**, Chrome/Firefox에서는 무시되어 효과 사라짐. + +**규칙:** +1. SVG/CSS에 `mix-blend-mode: plus-darker` 발견 시 → **`multiply`로 교체** +2. SVG 파일 내부의 `style="mix-blend-mode:plus-darker"`도 함께 교체 +3. 시각 차이 검증: 흰 배경 위 밝은 그라데이션은 거의 동일. 어두운 영역은 multiply가 더 강함 + +``` +plus-darker(src, dst) = max(0, src + dst - 1) [Safari only] +multiply(src, dst) = src × dst [모든 브라우저] +``` + +자세한 비교: MATH.md §7 + +--- + +## R11. Stroke 정렬: viewBox padding 처리 + +SVG는 stroke가 fill의 안/밖으로 확장될 수 있어 viewBox에 padding이 들어감. CSS 변환 시 두 케이스로 나뉨: + +### 케이스 A — Stroke가 fill **외부** + +예: `r=140 fill` + `r=142.5 stroke-width=5` → stroke가 r=140~145 (외부) + +```css +.ring { + width: 290px; height: 290px; /* fill 280 + 외부 stroke 5×2 */ + border: 5px solid white; + box-sizing: border-box; /* border 안쪽 padding-box = 280 = fill */ + background: linear-gradient(...); /* default origin: padding-box 280 */ + border-radius: 50%; +} +/* 위치: Figma fill 위치에서 (-5, -5) 오프셋 */ +``` + +### 케이스 B — Stroke가 fill **내부** (overlap) + +예: `r=140 fill` + `r=137.5 stroke-width=5` → stroke가 r=135~140 (fill 외곽 overlap) + +```css +.ring { + width: 280px; height: 280px; /* fill 280 그대로 */ + border: 5px solid white; + box-sizing: border-box; /* padding-box 270 */ + background: linear-gradient(...); + background-origin: border-box; /* gradient는 280 영역에 매핑 */ + background-clip: border-box; + border-radius: 50%; +} +/* 위치: Figma fill 위치 그대로 */ +``` + +판별: SVG 안의 stroke `r` 값이 fill `r`보다 **크면** 외부 (케이스 A), **작거나 같으면** 내부 (케이스 B). + +--- + +## R12. viewBox padding gradient remap + +viewBox padding이 있는 SVG의 그라데이션 좌표는 viewBox 공간 기준이므로, CSS 박스로 매핑할 때 **각 좌표에서 padding 만큼 빼야** 한다. + +```python +# SVG viewBox 310, 실제 fill 280, padding 15 +css_x1 = svg_x1 - 15 +css_y1 = svg_y1 - 15 +css_x2 = svg_x2 - 15 +css_y2 = svg_y2 - 15 +# 그 다음 svg_to_css(W=280, H=280, ...) +``` + +또는 `scripts/gradient_math.py`의 `svg_to_css_remap()` 사용: + +```python +svg_to_css_remap(css_W=280, css_H=280, viewbox_padding=15, + x1=..., y1=..., x2=..., y2=..., stops=[...]) +``` + +--- + +## R14. 한글 줄바꿈은 word-break: keep-all (전역 default) + +**문제:** Chrome 기본 동작은 한글을 글자 단위로 wrap (예: "수행공정의 쉬운이해로 관리 편의성 증" / "진"). Figma는 단어 단위 wrap이라 시각이 다름. + +**규칙:** 모든 변환물의 base CSS에 `word-break: keep-all` 적용. + +```css +body { + font-family: 'Noto Sans KR', sans-serif; + ... + word-break: keep-all; /* 한글 단어 단위 wrap (Figma matching) */ +} +``` + +또는 텍스트 컨테이너 단위로: +```css +.bullet-text, .left-text, .right-text, .body-text { + word-break: keep-all; +} +``` + +**언제 빼나:** +- `white-space: nowrap` 단일 라인 텍스트 (영향 없음, 안 빼도 무방) +- 코드/숫자 등 단어 경계가 없는 콘텐츠 + +**예외:** 영문/기호 혼합 텍스트는 `word-break: keep-all` 만으로는 부족할 수 있음. 그 경우 `overflow-wrap: anywhere` 또는 `
` 명시 split. + +--- + +## R15. 박스 vertical center align (Figma flex justify-center 모방) + +**문제:** Figma React 코드에서 자주 보이는 패턴: +```jsx +
+``` + +이는 **컨테이너 박스의 vertical center에 텍스트를 정렬**한다는 의미. 단순히 `top` 값만 받아서 박는 건 잘못 — 텍스트가 박스 top에 붙어 다른 요소(예: cat pill의 vertical center)와 어긋남. + +**올바른 변환:** + +```css +.text-box { + position: absolute; + top: ; /* Figma top - height/2 */ + height: ; + width: ; + display: flex; + flex-direction: column; + justify-content: center; /* vertical center */ +} +``` + +**또는 인접 박스(예: 옆에 있는 cat pill)와 동일한 top + height를 박고 flex justify-center 적용**하면 자동으로 가운데 align. 1:1 변환에서 가장 안전. + +**검증:** 인접 박스 center y 와 텍스트 박스 center y 가 같은지 측정. 차이 > 5px이면 잘못된 것. + +--- + +## R13. Custom-Marker Bullet List 패턴 (sub-pattern) + +**감지 조건 (3가지 모두 충족):** +1. 여러 텍스트 항목이 세로로 나열됨 +2. 각 항목 앞에 **장식 마커**가 있음 (체크박스 아이콘, 점, 화살표, 숫자, 원, PNG 등) +3. 마커는 인터랙티브하지 않고 순수 시각 요소 (실제 `` 가 아님) + +**Figma 원본에서는** 마커와 텍스트가 별도 요소로 평면 배치돼있을 수 있다. 그래도 **시맨틱적으로는 하나의 list item**으로 봐야 한다. + +### 구조 (CSS Flex Pair Pattern) + +```html +
+
+ + 텍스트 항목 +
+
+ + 긴 텍스트가
두 줄로 +
+
+``` + +### CSS + +```css +.bullet-list { + display: flex; + flex-direction: column; + /* 동일 top/bottom 정렬을 위해 컨테이너에 fixed height + space-between */ + justify-content: space-between; +} +.bullet-row { + display: flex; + align-items: flex-start; + --lh: 85px; /* 기본 라인 높이 */ +} +.bullet-row.compact { + --lh: 50px; /* 2-line 항목용 타이트 lh */ +} +.bullet-icon { + flex: none; + width: var(--icon-w); + height: var(--icon-h); + /* 핵심: 아이콘 vertical center를 첫 줄 vertical center에 align */ + margin-top: calc(var(--lh) / 2 - var(--icon-h) / 2); + /* 컬럼별 figma gap (text_left − icon_left − icon_w) */ + margin-right: var(--icon-gap); +} +.bullet-text { + flex: 1; + line-height: var(--lh); + white-space: normal; + word-break: keep-all; /* 한글: 단어 단위 줄바꿈 */ +} +``` + +### 핵심 수학 + +``` +icon margin-top = lh / 2 − icon_h / 2 (첫 줄 vertical center) +icon margin-right = text_left − icon_left − icon_w (Figma 데이터) +``` + +### 절대 하지 말 것 + +- 마커와 텍스트를 별도 요소로 절대 배치 (`
` × N) +- row에 fixed `height` 설정 (wrap 시 overlap) +- `white-space: nowrap` (텍스트가 컨테이너 밖으로 overflow) +- 모든 row에 동일한 top/bottom margin 강제 (텍스트 길이가 결정해야 함) + +### 정렬 원칙 + +3개 이상의 평행한 컬럼이 있을 때: +- **모든 컬럼은 동일한 top + 동일한 height** 로 시작 +- 컬럼별 자연 콘텐츠 합 중 **가장 큰 값**을 height로 사용 +- `justify-content: space-between` 으로 내부 균등 분포 +- 결과: 컬럼별 spacing은 다르지만 vertical extent는 동일 + +### 적용 사례 + +| 프레임 | 사용 | 비고 | +|--------|------|------| +| 1171281191 (cards-3col-persona) | 3 컬럼 × 6~7 마커-text 페어 | 첫 적용 | +| (앞으로 비슷한 패턴 발견 시 추가) | | | + +### 1:1 변환 단계의 임시 보정 (템플릿화 시 제거) + +다음은 1:1 시각 fidelity를 위한 **임시 보정**이며, 템플릿화 시 모두 제거해야 한다 (자연 wrap이 처리): + +- `letter-spacing: -1.5px` 등 — Chrome Noto Sans KR 너비가 Figma보다 약간 넓어 wrap이 일어나는 것을 방지하기 위한 보정 +- `
` 명시적 줄바꿈 — Figma의 의도된 split 위치 보존용. 템플릿화 시 자연 wrap이 알아서 처리 +- `class="compact"` 수동 지정 — 어떤 항목이 2-line인지 1:1 단계에선 수동, 템플릿화 시 텍스트 길이 자동 판정 + +이 보정들은 HTML 코멘트로 `` 표시한다. + +--- + +## R16. 이미지 프레임 배치 — overflow:hidden으로 부분 표시 + +**상황:** 하나의 원본 이미지에 양쪽 끝 모두 디자인 요소(곡선, 말림, 장식 등)가 있고, Figma에서 프레임(컨테이너)보다 이미지를 크게 배치하여 **한쪽만 보이게** 하는 경우. + +**Figma가 하는 것:** +- 프레임: 457.96px (표시 영역) +- 이미지: 664px (원본, 프레임보다 큼) +- 이미지를 프레임 안에서 `left`, `width`로 위치/크기 지정 +- 프레임에 `overflow: hidden` → 프레임 밖으로 나간 부분 안 보임 +- 결과: 이미지의 **원하는 쪽만** 프레임 안에 보임 + +**Figma가 주는 값의 의미:** +``` +left: -45.3%; width: 145.3% +→ 이미지를 좌측으로 45.3% 밀어서 배치 +→ 좌측 끝이 프레임 밖으로 나감 → 좌측 디자인 요소 안 보임 +→ 우측 디자인 요소만 프레임 안에 보임 + +left: 0; width: 151.25% +→ 이미지를 좌측 정렬, 우측이 프레임 밖으로 넘침 +→ 우측 디자인 요소 안 보임 +→ 좌측 디자인 요소만 프레임 안에 보임 +``` + +**이것은 crop이 아니다.** 이미지를 자르는 것이 아니라, 프레임 안에서 이미지의 **위치**를 조절하는 것. 이미지 원본은 그대로 유지. + +**CSS 구현:** +```css +.pill-frame { + position: relative; /* 또는 absolute */ + width: 457.96px; /* 프레임 크기 */ + height: 95.62px; + overflow: hidden; /* 핵심: 프레임 밖 숨김 */ +} +.pill-frame img { + position: absolute; + top: 0; + left: -45.3%; /* Figma 값 그대로 */ + width: 145.3%; /* Figma 값 그대로 */ + height: 100%; +} +``` + +**절대 하지 말 것:** +- `width: 100%; object-fit: fill` — 이미지가 찌그러져 양쪽 디자인 요소가 다 보임 +- `scaleX(-1)` 임의 추가 — Figma에 없는 변환 +- `object-fit: cover/contain` — 이미지 비율/위치가 달라짐 +- "crop"이라 부르기 — 이미지를 자르는 게 아니라 위치를 조절하는 것 + +**rotate(180deg) + 이미지 배치 주의:** + +부모에 `rotate(180deg)`가 적용된 경우 (예: 하단 pill), 이미지가 상하좌우 모두 뒤집힘. 이때 **이미지 배치(left/width)를 상단과 반대로** 적용해야 최종 결과가 올바른 방향이 됨. + +``` +상단 left-pill: left: -45.3%; width: 145.3% → 우측 보임 +하단 left-pill: rotate(180) + left: 0; width: 151.25% → 결과적으로 우측 보임 (뒤집혀서) + +상단 right-pill: left: 0; width: 151.25% → 좌측 보임 +하단 right-pill: rotate(180) + left: -45.3%; width: 145.3% → 결과적으로 좌측 보임 (뒤집혀서) +``` + +**검증 방법:** 각 pill을 개별 screenshot으로 뽑아서 Figma 원본 pill screenshot과 **곡선/직선 위치**를 1:1 대조. 양쪽 다 곡선이 보이면 이미지 배치가 잘못된 것. + +**적용 사례:** +| 프레임 | 사용 | 비고 | +|--------|------|------| +| 1171281194 (issues-paired-rows) | 두루마리 pill 8개 | 첫 적용. 상/하 배치 반전 패턴 발견. | diff --git a/block-tests/assets/bg_bottom_image.png b/block-tests/assets/bg_bottom_image.png new file mode 100644 index 0000000..bdb286b Binary files /dev/null and b/block-tests/assets/bg_bottom_image.png differ diff --git a/block-tests/assets/bracket_1377.png b/block-tests/assets/bracket_1377.png new file mode 100644 index 0000000..3e9ae57 Binary files /dev/null and b/block-tests/assets/bracket_1377.png differ diff --git a/block-tests/assets/bracket_1378.png b/block-tests/assets/bracket_1378.png new file mode 100644 index 0000000..c07ca02 Binary files /dev/null and b/block-tests/assets/bracket_1378.png differ diff --git a/block-tests/assets/ellipse_597.svg b/block-tests/assets/ellipse_597.svg new file mode 100644 index 0000000..f5e3471 --- /dev/null +++ b/block-tests/assets/ellipse_597.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/block-tests/assets/ellipse_599.svg b/block-tests/assets/ellipse_599.svg new file mode 100644 index 0000000..5a50146 --- /dev/null +++ b/block-tests/assets/ellipse_599.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/block-tests/assets/ellipse_600.svg b/block-tests/assets/ellipse_600.svg new file mode 100644 index 0000000..81a5bdf --- /dev/null +++ b/block-tests/assets/ellipse_600.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/block-tests/assets/ellipse_outer_comm.png b/block-tests/assets/ellipse_outer_comm.png new file mode 100644 index 0000000..e5b574b Binary files /dev/null and b/block-tests/assets/ellipse_outer_comm.png differ diff --git a/block-tests/assets/ellipse_outer_productivity.png b/block-tests/assets/ellipse_outer_productivity.png new file mode 100644 index 0000000..2e0da3d Binary files /dev/null and b/block-tests/assets/ellipse_outer_productivity.png differ diff --git a/block-tests/assets/ellipse_outer_safety.png b/block-tests/assets/ellipse_outer_safety.png new file mode 100644 index 0000000..1fe5d4f Binary files /dev/null and b/block-tests/assets/ellipse_outer_safety.png differ diff --git a/block-tests/assets/frame_1171281211/arc_side.png b/block-tests/assets/frame_1171281211/arc_side.png new file mode 100644 index 0000000..f4ff3e4 Binary files /dev/null and b/block-tests/assets/frame_1171281211/arc_side.png differ diff --git a/block-tests/assets/frame_1171281211/arc_top.png b/block-tests/assets/frame_1171281211/arc_top.png new file mode 100644 index 0000000..7c122b9 Binary files /dev/null and b/block-tests/assets/frame_1171281211/arc_top.png differ diff --git a/block-tests/assets/frame_1171281211/bg_texture.png b/block-tests/assets/frame_1171281211/bg_texture.png new file mode 100644 index 0000000..bdb286b Binary files /dev/null and b/block-tests/assets/frame_1171281211/bg_texture.png differ diff --git a/block-tests/assets/icon_asset.png b/block-tests/assets/icon_asset.png new file mode 100644 index 0000000..fb90ba4 Binary files /dev/null and b/block-tests/assets/icon_asset.png differ diff --git a/block-tests/assets/label_tech_group.png b/block-tests/assets/label_tech_group.png new file mode 100644 index 0000000..125dc3e Binary files /dev/null and b/block-tests/assets/label_tech_group.png differ diff --git a/block-tests/assets/rect_42333.png b/block-tests/assets/rect_42333.png new file mode 100644 index 0000000..ec80a26 Binary files /dev/null and b/block-tests/assets/rect_42333.png differ diff --git a/block-tests/assets/rect_42334.png b/block-tests/assets/rect_42334.png new file mode 100644 index 0000000..2023f4a Binary files /dev/null and b/block-tests/assets/rect_42334.png differ diff --git a/block-tests/assets/rect_42335.png b/block-tests/assets/rect_42335.png new file mode 100644 index 0000000..5c2d07d Binary files /dev/null and b/block-tests/assets/rect_42335.png differ diff --git a/block-tests/assets/shared/1550ec755fa7922dcfc1c90135a570d6b9df82cc.png b/block-tests/assets/shared/1550ec755fa7922dcfc1c90135a570d6b9df82cc.png new file mode 100644 index 0000000..ed46ae6 Binary files /dev/null and b/block-tests/assets/shared/1550ec755fa7922dcfc1c90135a570d6b9df82cc.png differ diff --git a/block-tests/assets/shared/1e3fb882a20698f92850f50778ce09d66decf2d4.png b/block-tests/assets/shared/1e3fb882a20698f92850f50778ce09d66decf2d4.png new file mode 100644 index 0000000..35ef664 Binary files /dev/null and b/block-tests/assets/shared/1e3fb882a20698f92850f50778ce09d66decf2d4.png differ diff --git a/block-tests/assets/shared/29c778b566aca6778f505874f21670de129351f8.svg b/block-tests/assets/shared/29c778b566aca6778f505874f21670de129351f8.svg new file mode 100644 index 0000000..4871c13 --- /dev/null +++ b/block-tests/assets/shared/29c778b566aca6778f505874f21670de129351f8.svg @@ -0,0 +1,3 @@ + + + diff --git a/block-tests/assets/shared/2a6a58e7bf7a645b5ede65115feb2890ccc414d1.png b/block-tests/assets/shared/2a6a58e7bf7a645b5ede65115feb2890ccc414d1.png new file mode 100644 index 0000000..7ec3442 Binary files /dev/null and b/block-tests/assets/shared/2a6a58e7bf7a645b5ede65115feb2890ccc414d1.png differ diff --git a/block-tests/assets/shared/2f95748966536058809971fd1c9ed646d3e1f3a7.png b/block-tests/assets/shared/2f95748966536058809971fd1c9ed646d3e1f3a7.png new file mode 100644 index 0000000..c4bbf6b Binary files /dev/null and b/block-tests/assets/shared/2f95748966536058809971fd1c9ed646d3e1f3a7.png differ diff --git a/block-tests/assets/shared/30a42d915fae64b2ac76c21c0b742c17a2604b9d.png b/block-tests/assets/shared/30a42d915fae64b2ac76c21c0b742c17a2604b9d.png new file mode 100644 index 0000000..db3f2f0 Binary files /dev/null and b/block-tests/assets/shared/30a42d915fae64b2ac76c21c0b742c17a2604b9d.png differ diff --git a/block-tests/assets/shared/39113493f6e3ae76d766e86e293b0f0dcbf55d91.png b/block-tests/assets/shared/39113493f6e3ae76d766e86e293b0f0dcbf55d91.png new file mode 100644 index 0000000..94c28bb Binary files /dev/null and b/block-tests/assets/shared/39113493f6e3ae76d766e86e293b0f0dcbf55d91.png differ diff --git a/block-tests/assets/shared/42b569ef8be40cb859fc5aa4fcbaa6310f2478c1.svg b/block-tests/assets/shared/42b569ef8be40cb859fc5aa4fcbaa6310f2478c1.svg new file mode 100644 index 0000000..3e5f3c2 --- /dev/null +++ b/block-tests/assets/shared/42b569ef8be40cb859fc5aa4fcbaa6310f2478c1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/block-tests/assets/shared/42dca7c1ca42ba8520aa274fd4471bd054dfe36b.png b/block-tests/assets/shared/42dca7c1ca42ba8520aa274fd4471bd054dfe36b.png new file mode 100644 index 0000000..b33a6d1 Binary files /dev/null and b/block-tests/assets/shared/42dca7c1ca42ba8520aa274fd4471bd054dfe36b.png differ diff --git a/block-tests/assets/shared/470d76de62f4864e6c42b25bcf7446e2aaef981a.png b/block-tests/assets/shared/470d76de62f4864e6c42b25bcf7446e2aaef981a.png new file mode 100644 index 0000000..9eb45d0 Binary files /dev/null and b/block-tests/assets/shared/470d76de62f4864e6c42b25bcf7446e2aaef981a.png differ diff --git a/block-tests/assets/shared/4a17cd1dddaba8a220b706df3ec052d2bfde4f47.png b/block-tests/assets/shared/4a17cd1dddaba8a220b706df3ec052d2bfde4f47.png new file mode 100644 index 0000000..8ca0a0a Binary files /dev/null and b/block-tests/assets/shared/4a17cd1dddaba8a220b706df3ec052d2bfde4f47.png differ diff --git a/block-tests/assets/shared/4b534ccf4e945fbe7436a0d8d96a6deffcfe5cef.png b/block-tests/assets/shared/4b534ccf4e945fbe7436a0d8d96a6deffcfe5cef.png new file mode 100644 index 0000000..ae82310 Binary files /dev/null and b/block-tests/assets/shared/4b534ccf4e945fbe7436a0d8d96a6deffcfe5cef.png differ diff --git a/block-tests/assets/shared/4ea963b9abbbbb2623d4ec41c2a6eea6ea2856d4.png b/block-tests/assets/shared/4ea963b9abbbbb2623d4ec41c2a6eea6ea2856d4.png new file mode 100644 index 0000000..d29a73a Binary files /dev/null and b/block-tests/assets/shared/4ea963b9abbbbb2623d4ec41c2a6eea6ea2856d4.png differ diff --git a/block-tests/assets/shared/527bd7809f4b2e5f3cd42f2e713ccbfb37537d82.png b/block-tests/assets/shared/527bd7809f4b2e5f3cd42f2e713ccbfb37537d82.png new file mode 100644 index 0000000..643451f Binary files /dev/null and b/block-tests/assets/shared/527bd7809f4b2e5f3cd42f2e713ccbfb37537d82.png differ diff --git a/block-tests/assets/shared/5577732e17bedec9eb1de4f77583cf67c8137f92.png b/block-tests/assets/shared/5577732e17bedec9eb1de4f77583cf67c8137f92.png new file mode 100644 index 0000000..12ea5e5 Binary files /dev/null and b/block-tests/assets/shared/5577732e17bedec9eb1de4f77583cf67c8137f92.png differ diff --git a/block-tests/assets/shared/5d27ecb194e670c9af26e98d11075b86c40efffa.svg b/block-tests/assets/shared/5d27ecb194e670c9af26e98d11075b86c40efffa.svg new file mode 100644 index 0000000..627e6eb --- /dev/null +++ b/block-tests/assets/shared/5d27ecb194e670c9af26e98d11075b86c40efffa.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/block-tests/assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png b/block-tests/assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png new file mode 100644 index 0000000..c3ab3f2 Binary files /dev/null and b/block-tests/assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png differ diff --git a/block-tests/assets/shared/6c4cc6c01d98a38c747e1748bb49dec957a68e88.png b/block-tests/assets/shared/6c4cc6c01d98a38c747e1748bb49dec957a68e88.png new file mode 100644 index 0000000..757d262 Binary files /dev/null and b/block-tests/assets/shared/6c4cc6c01d98a38c747e1748bb49dec957a68e88.png differ diff --git a/block-tests/assets/shared/6d311a18898deded5376b25996a13757e8c42d17.svg b/block-tests/assets/shared/6d311a18898deded5376b25996a13757e8c42d17.svg new file mode 100644 index 0000000..92678b8 --- /dev/null +++ b/block-tests/assets/shared/6d311a18898deded5376b25996a13757e8c42d17.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/block-tests/assets/shared/755384bd81ba10f62628933f16595eb054064846.png b/block-tests/assets/shared/755384bd81ba10f62628933f16595eb054064846.png new file mode 100644 index 0000000..3088b83 Binary files /dev/null and b/block-tests/assets/shared/755384bd81ba10f62628933f16595eb054064846.png differ diff --git a/block-tests/assets/shared/7713e15d6eaebd868c6ea632c1199b94603af2fd.svg b/block-tests/assets/shared/7713e15d6eaebd868c6ea632c1199b94603af2fd.svg new file mode 100644 index 0000000..31d826c --- /dev/null +++ b/block-tests/assets/shared/7713e15d6eaebd868c6ea632c1199b94603af2fd.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/block-tests/assets/shared/77f319979c880da34ff3d423fcd97827f636c01e.png b/block-tests/assets/shared/77f319979c880da34ff3d423fcd97827f636c01e.png new file mode 100644 index 0000000..aabc459 Binary files /dev/null and b/block-tests/assets/shared/77f319979c880da34ff3d423fcd97827f636c01e.png differ diff --git a/block-tests/assets/shared/7e7eb79fab4063fb496110af54e23e073145ec72.png b/block-tests/assets/shared/7e7eb79fab4063fb496110af54e23e073145ec72.png new file mode 100644 index 0000000..01c73d8 Binary files /dev/null and b/block-tests/assets/shared/7e7eb79fab4063fb496110af54e23e073145ec72.png differ diff --git a/block-tests/assets/shared/7e83d2e4d7df471367df19708e2628010d586ed2.png b/block-tests/assets/shared/7e83d2e4d7df471367df19708e2628010d586ed2.png new file mode 100644 index 0000000..c57cd3b Binary files /dev/null and b/block-tests/assets/shared/7e83d2e4d7df471367df19708e2628010d586ed2.png differ diff --git a/block-tests/assets/shared/81fe1c5f90621f31a1b2133b88eda46fcf96656b.png b/block-tests/assets/shared/81fe1c5f90621f31a1b2133b88eda46fcf96656b.png new file mode 100644 index 0000000..ed6ce17 Binary files /dev/null and b/block-tests/assets/shared/81fe1c5f90621f31a1b2133b88eda46fcf96656b.png differ diff --git a/block-tests/assets/shared/85beaf9dfc17b7ed4620729a086ba22143606517.png b/block-tests/assets/shared/85beaf9dfc17b7ed4620729a086ba22143606517.png new file mode 100644 index 0000000..9d63808 Binary files /dev/null and b/block-tests/assets/shared/85beaf9dfc17b7ed4620729a086ba22143606517.png differ diff --git a/block-tests/assets/shared/88055da8b5f893371359dd5073785804141dc86a.png b/block-tests/assets/shared/88055da8b5f893371359dd5073785804141dc86a.png new file mode 100644 index 0000000..84a0f1f Binary files /dev/null and b/block-tests/assets/shared/88055da8b5f893371359dd5073785804141dc86a.png differ diff --git a/block-tests/assets/shared/922ee6f4bea1434652ffc08f962086052286b6c5.png b/block-tests/assets/shared/922ee6f4bea1434652ffc08f962086052286b6c5.png new file mode 100644 index 0000000..0280bc6 Binary files /dev/null and b/block-tests/assets/shared/922ee6f4bea1434652ffc08f962086052286b6c5.png differ diff --git a/block-tests/assets/shared/9ac089fa9c5106b6b26d47727003641bb56ba4b0.png b/block-tests/assets/shared/9ac089fa9c5106b6b26d47727003641bb56ba4b0.png new file mode 100644 index 0000000..07f40d6 Binary files /dev/null and b/block-tests/assets/shared/9ac089fa9c5106b6b26d47727003641bb56ba4b0.png differ diff --git a/block-tests/assets/shared/9d86013a10b048eede6cceb2012f7958dfaf616c.png b/block-tests/assets/shared/9d86013a10b048eede6cceb2012f7958dfaf616c.png new file mode 100644 index 0000000..785f3c1 Binary files /dev/null and b/block-tests/assets/shared/9d86013a10b048eede6cceb2012f7958dfaf616c.png differ diff --git a/block-tests/assets/shared/README.md b/block-tests/assets/shared/README.md new file mode 100644 index 0000000..b35ee86 --- /dev/null +++ b/block-tests/assets/shared/README.md @@ -0,0 +1,51 @@ +# shared/ — 해시 기반 공통 자산 캐시 + +여러 프레임에서 등장하는 자산(배경 텍스처, 아이콘, 아크 등)을 **해시 파일명**으로 한 번만 저장한다. + +## 파일명 규칙 + +Figma MCP 가 자산 URL을 다음 형식으로 제공: +``` +http://localhost:3845/assets/849658071be46a26936e8666e3722b2dd548aee7.png +``` + +URL 끝의 hash (`849658071be46a26936e8666e3722b2dd548aee7`) 그대로 파일명 사용: +``` +shared/849658071be46a26936e8666e3722b2dd548aee7.png +``` + +## dedup 작동 원리 + +Figma는 같은 자산을 다른 노드에서 사용해도 동일 hash로 서빙한다. 따라서: + +``` +프레임 A: bg_texture (hash: 849658...) → 다운로드 → shared/849658....png +프레임 B: bg_texture (hash: 849658...) → 이미 있음 → 다운로드 스킵 +프레임 C: 새 아이콘 (hash: f05ebf...) → 다운로드 → shared/f05ebf....png +``` + +매 변환마다 다운로드 전 `[ -f "shared/${hash}.${ext}" ]` 체크. + +## 의미 매핑 + +해시 파일명은 사람이 못 읽으므로 의미 라벨을 따로 관리: + +1. **블록별 매핑**: `block-tests/{slug}_assets.txt` + ``` + 849658071be46a26936e8666e3722b2dd548aee7.png bg_texture + f05ebf15a1125b6c5809f9ffa35b4e4e750687d3.png arc_top + ``` + +2. **전체 카탈로그**: `blocks_index.md` 의 "발견된 공통 자산" 표 + +## HTML 참조 + +블록 HTML은 `block-tests/{slug}.html` 위치이므로 상대 경로: + +```html + +``` + +## legacy 자산 + +이전 변환물 ([bim-goals-3circles](../../bim-goals-3circles.html)) 의 자산은 `block-tests/assets/frame_1171281211/` 에 그대로 두었음. 새 변환부터는 shared/ 만 사용. diff --git a/block-tests/assets/shared/b0e9fad5b03f4d9e368524976c20c9886392e17b.png b/block-tests/assets/shared/b0e9fad5b03f4d9e368524976c20c9886392e17b.png new file mode 100644 index 0000000..fb90ba4 Binary files /dev/null and b/block-tests/assets/shared/b0e9fad5b03f4d9e368524976c20c9886392e17b.png differ diff --git a/block-tests/assets/shared/b47d2977a36ab6a0c180d8f090afff798c44ed27.png b/block-tests/assets/shared/b47d2977a36ab6a0c180d8f090afff798c44ed27.png new file mode 100644 index 0000000..8305949 Binary files /dev/null and b/block-tests/assets/shared/b47d2977a36ab6a0c180d8f090afff798c44ed27.png differ diff --git a/block-tests/assets/shared/b614390a7ec2f351fc8290d640bcd3e6b237bfb2.svg b/block-tests/assets/shared/b614390a7ec2f351fc8290d640bcd3e6b237bfb2.svg new file mode 100644 index 0000000..34b8f14 --- /dev/null +++ b/block-tests/assets/shared/b614390a7ec2f351fc8290d640bcd3e6b237bfb2.svg @@ -0,0 +1,3 @@ + + + diff --git a/block-tests/assets/shared/bd3796e13b417d32322b3cd6d3962f892c52ec9b.png b/block-tests/assets/shared/bd3796e13b417d32322b3cd6d3962f892c52ec9b.png new file mode 100644 index 0000000..af3788c Binary files /dev/null and b/block-tests/assets/shared/bd3796e13b417d32322b3cd6d3962f892c52ec9b.png differ diff --git a/block-tests/assets/shared/bf1755273910e17f7a012ce2d269a93cca9483ac.svg b/block-tests/assets/shared/bf1755273910e17f7a012ce2d269a93cca9483ac.svg new file mode 100644 index 0000000..7cbffce --- /dev/null +++ b/block-tests/assets/shared/bf1755273910e17f7a012ce2d269a93cca9483ac.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/block-tests/assets/shared/cab8c8284090fb4893d7f584cc6081370b115b11.svg b/block-tests/assets/shared/cab8c8284090fb4893d7f584cc6081370b115b11.svg new file mode 100644 index 0000000..c8b4209 --- /dev/null +++ b/block-tests/assets/shared/cab8c8284090fb4893d7f584cc6081370b115b11.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/block-tests/assets/shared/d2c070f200af83f563976b6b0f309d38321d204d.png b/block-tests/assets/shared/d2c070f200af83f563976b6b0f309d38321d204d.png new file mode 100644 index 0000000..2674ba8 Binary files /dev/null and b/block-tests/assets/shared/d2c070f200af83f563976b6b0f309d38321d204d.png differ diff --git a/block-tests/assets/shared/d40af52c505499e4cf2b5cf772805d9db5873b1e.png b/block-tests/assets/shared/d40af52c505499e4cf2b5cf772805d9db5873b1e.png new file mode 100644 index 0000000..458fd39 Binary files /dev/null and b/block-tests/assets/shared/d40af52c505499e4cf2b5cf772805d9db5873b1e.png differ diff --git a/block-tests/assets/shared/d6fa176ab42aa4d10111dbe343307115d03fa08b.png b/block-tests/assets/shared/d6fa176ab42aa4d10111dbe343307115d03fa08b.png new file mode 100644 index 0000000..655861b Binary files /dev/null and b/block-tests/assets/shared/d6fa176ab42aa4d10111dbe343307115d03fa08b.png differ diff --git a/block-tests/assets/shared/e64c967dd00302bfbef6cfbcbb4f7a4db5d9d96c.png b/block-tests/assets/shared/e64c967dd00302bfbef6cfbcbb4f7a4db5d9d96c.png new file mode 100644 index 0000000..0d8b924 Binary files /dev/null and b/block-tests/assets/shared/e64c967dd00302bfbef6cfbcbb4f7a4db5d9d96c.png differ diff --git a/block-tests/assets/shared/e837f8707efeffc9e357d084ad72b752a5fba0f9.png b/block-tests/assets/shared/e837f8707efeffc9e357d084ad72b752a5fba0f9.png new file mode 100644 index 0000000..edc4e6c Binary files /dev/null and b/block-tests/assets/shared/e837f8707efeffc9e357d084ad72b752a5fba0f9.png differ diff --git a/block-tests/assets/shared/fdcafc1b6ab639b9a4c75ce36014f3b16ea0fbc1.png b/block-tests/assets/shared/fdcafc1b6ab639b9a4c75ce36014f3b16ea0fbc1.png new file mode 100644 index 0000000..97e35d0 Binary files /dev/null and b/block-tests/assets/shared/fdcafc1b6ab639b9a4c75ce36014f3b16ea0fbc1.png differ diff --git a/block-tests/assets/shared/ff649c28fd98518d6b48b9e5451fe1da4c1e95d5.svg b/block-tests/assets/shared/ff649c28fd98518d6b48b9e5451fe1da4c1e95d5.svg new file mode 100644 index 0000000..dbb6914 --- /dev/null +++ b/block-tests/assets/shared/ff649c28fd98518d6b48b9e5451fe1da4c1e95d5.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/block-tests/bg-shapes-only.html b/block-tests/bg-shapes-only.html new file mode 100644 index 0000000..5f9adeb --- /dev/null +++ b/block-tests/bg-shapes-only.html @@ -0,0 +1,34 @@ + + + + + + + +
+
+
+ + diff --git a/block-tests/bim-3roles-cards.html b/block-tests/bim-3roles-cards.html new file mode 100644 index 0000000..e577145 --- /dev/null +++ b/block-tests/bim-3roles-cards.html @@ -0,0 +1,368 @@ + + + + + +BIM 3역할 목표 카드 (Frame 1171281191) + + + + + + + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+ + +
+ + +
+
+ + +
+
+ + +
+ + +
발주자목표
+
시공자목표
+
설계자목표
+ + + + + + +
+
+ + 민원, 재 작업 등의 예방 및 최소화 +
+
+ + 직관화로 품질 향상 및 안정성 제고 +
+
+ + 수행공정의 쉬운이해로 관리 편의성 증진 +
+
+ + 실무자와 발주자간의 소통 오류 최소화 +
+
+ + 행정 자동화와 최소화로 생산성 향상 +
+
+ + 건설정보의 통합관리로 활용성 강화 +
+
+ + 전 생애주기에 걸친 효율적 디지털 자산관리 +
+
+ + +
+
+ + 시공 오류예방 및 공사 Risk 최소화 +
+
+ + 시각화로 안전성 제고 및 품질 향상 +
+
+ + 중간태, 완성태 측량을 통한
시‧공간적 관리 편리성 향상 +
+
+ + 건설 관계자들 간의 의사소통 강화 +
+
+ + Model을 활용한 시공상세도 등의
관련도서 작성 용이 +
+
+ + System 구축을 통한 행정 간소화 +
+
+ + 기술개발을 통한 생산성 향상 +
+
+ + +
+
+ + 직관적 시각화로 원활한 소통 +
+
+ + 3D 모델 활용으로 오류 최소화 및
Claim 예방 +
+
+ + 발주자와의 상호 신뢰 증진 +
+
+ + 정보물 생산으로 부가가치 창출 +
+
+ + 고부가가치 창출산업으로 전환 +
+
+ + 프로젝트 정보의 일관성 유지 및
관리를 통한 오류 최소화 +
+
+ + + + +
+
+ +
+
+
+ + + diff --git a/block-tests/bim-3roles-cards_flat.md b/block-tests/bim-3roles-cards_flat.md new file mode 100644 index 0000000..077fe6f --- /dev/null +++ b/block-tests/bim-3roles-cards_flat.md @@ -0,0 +1,104 @@ +# Frame 1171281191 — BIM 3역할(발주자/시공자/설계자) 목표 카드 + +> 원본: 2600.998 × 1927.004 px +> Scale: × 0.49213 → 1280 × 948.5 px +> Node ID: 45:16 (Figma) +> 패턴 ID (잠정): `cards-3col-persona` +> 슬라이드 컨테이너: **1280 × 949** (16:9 초과. design_agent 본체 이전 시 재배치 필요) + +## 계층 경로 + +``` +Frame 45:16 "Frame 1171281191" (2600.998 × 1927.004) +└─ 17:1450 "오른쪽" (0,0) full size + ├─ 17:1451 Frame 1171276940 (0, 1204.82) 2600.998 × 677.02 — bottom area placeholder + ├─ 17:1452 Group 1171276418 (43, 82.30) 2508 × 1844.70 + │ └─ 17:1453 Group 1171276417 + │ ├─ 17:1454 image 2977 (43, 82.30) 833 × 1844.70 ← 좌 컬럼 BG + │ ├─ 17:1455 image 2978 (880, 82.30) 834 × 1844.70 ← 중 컬럼 BG (동일 src 2977) + │ └─ 17:1456 image 2979 (1718, 82.30) 833 × 1844.70 ← 우 컬럼 BG (동일 src 2977) + │ ├─ 17:1457 image 2986 (114.01, 180.66) 691 × 1510.49 opacity 0.80 ← 좌 오버레이 + │ ├─ 17:1458 image 2987 (948.01, 180.66) 692 × 1053.83 opacity 0.80 ← 중 오버레이 + │ ├─ 17:1459 image 2988 (1783.01, 180.66) 691 × 1128.10 opacity 0.80 ← 우 오버레이 + │ └─ 17:1460 image 3574 (108, 1150.18) 697 × 700.55 r=49 opacity 0.70 ← 좌하 사진 + ├─ 17:1461 Group 1171276695 "시공자 뱃지" (1092.88, 0) 396.02 × 397.47 + │ ├─ 17:1462 image 2984 outer (1092.88, 0) 396.02 × 397.47 + │ ├─ 17:1463 image 2981 inner (1139.46, 51.84) 301.83 × 301.91 + │ └─ 17:1464 TEXT "시공자 목표" center (1291.9, 256.94) 179.27 × 130.47 + │ #445a2f Bold, "시공자" 65px / "목표" 50px + ├─ 17:1465 Group 1171276696 "설계자 뱃지" (1945.7, 0) 396.02 × 397.47 + │ ├─ 17:1466 image 2985 outer + │ ├─ 17:1467 image 2982 inner + │ └─ 17:1468 TEXT "설계자 목표" #743002, 65/50px + ├─ 17:1469 Group 1171276694 "발주자 뱃지" (265.38, 0) 396.02 × 397.47 + │ ├─ 17:1470 image 2983 outer + │ ├─ 17:1471 image 2980 inner + │ └─ 17:1472 TEXT "발주자 목표" #285b4a, 65/50px + ├─ 17:1473 TEXT "발주자 본문" (171.18, 421.58) 643.4 × 750.34 + │ font 40 Medium black, leading 85, 7줄 + ├─ 17:1474 TEXT "시공자 본문" (1004.79, 417.52) 624.3 × 650.61 + │ font 40 Medium, mixed leading 50/85, 12+줄 (긴 본문) + ├─ 17:1475 TEXT "설계자 본문" (1842.01, 417.52) 664.7 × 750.34 + │ font 40 Medium, mixed, 8+줄 + ├─ 17:1476 image 3571 (948, 1150.18) 697 × 700.55 r=50 opacity 0.70 ← 중하 사진 + ├─ 17:1477 Group "체크박스 우 6개" (1794.78, 446.04~919.74) + │ 6개 아이콘 32.41×32.53 image 3005 (체크박스) + │ y: 446, 526, 661, 746, 833, 919 + ├─ 17:1484 Group "체크박스 중 7개" (961.20, 447.04~1056.84) + │ 7개 아이콘. y: 447, 530, 609, 744, 832, 969, 1056 + ├─ 17:1492 Group "체크박스 좌 7개" (127.63, 449.63~963.46) + │ 7개 아이콘. y: 449, 535, 620, 704, 791, 877, 963 + └─ 17:1500 image 3572 (1781, 1150.18) 697 × 700.55 r=50 opacity 0.70 ← 우하 사진 +``` + +## 이상 탐지 결과 + +| 검사 | 결과 | +|------|------| +| 회전 단일문자 | 없음 | +| 좁은 박스 세로 텍스트 | 없음 | +| 중복 노드 | image 2977이 image 2978/2979로 3번 사용됨 — 의도된 재사용 (각 컬럼의 BG가 동일 텍스처). image 3005는 20개 인스턴스 모두 동일 src — 체크박스 아이콘 | +| Vector metadata 회전 불일치 | 없음 (vector 노드 없음) | +| 텍스트 leading 혼합 | 17:1474 시공자 본문에서 leading 50/85/40 혼재 — Figma 원본의 line break 표현 의도 그대로 보존 | +| 색상 시스템 | 발주자 #285b4a (녹), 시공자 #445a2f (올리브), 설계자 #743002 (브라운). 각 컬럼 컬러 코드 | + +## 패턴 분류 + +이 패턴은 기존 `cycle-3way-intersect`와 **다름**: +- cycle: 3원 교차 다이어그램 (관계/통합) +- cards-3col-persona: 3 stakeholder 세로 카드 + 본문 리스트 (병렬/대조) + +기존 legacy `prerequisites-3col`와도 **다름**: +- legacy: 색상바 + 한자 라벨 + 키워드 카드 +- cards-3col-persona: 사진 배경 + 원형 뱃지 + 긴 본문 리스트 + +→ **새 패턴 등록.** 패턴 카탈로그에 `cards-3col-persona` 추가, 등장 횟수 1. + +## 변형 가능 축 + +- **columns[N]**: 현재 3, 가능 2~4 + - 각 column: bg_image, overlay_image, badge_outer, badge_inner, badge_label, role_color, body_text, checkbox_count, bottom_photo +- **role_colors[3]**: 현재 #285b4a / #445a2f / #743002 (역할별) +- **body_text_lines[]**: 각 컬럼당 6~10줄 +- **checkbox_count[col]**: 현재 7/7/6, 가능 5~10 +- **bottom_photos[N]**: 현재 3 (둥근 모서리 사진), 가능 0~N +- **badge_label_2lines**: "역할이름"/"목표" 형식 (변형 가능) + +## 자산 매핑 + +| hash | 의미 라벨 | 사용처 | +|------|---------|------| +| 4a17cd1d... | column_bg_texture | 3컬럼 BG (재사용 ×3) | +| e837f870... | overlay_left | 좌 컬럼 컬러 오버레이 | +| 755384bd... | overlay_mid | 중 컬럼 컬러 오버레이 | +| 5577732e... | overlay_right | 우 컬럼 컬러 오버레이 | +| 77f31997... | badge_outer_owner | 발주자 outer circle | +| e64c967d... | badge_inner_owner | 발주자 inner circle | +| 1550ec75... | badge_outer_builder | 시공자 outer circle | +| 85beaf9d... | badge_inner_builder | 시공자 inner circle | +| 9ac089fa... | badge_outer_designer | 설계자 outer circle | +| 4b534ccf... | badge_inner_designer | 설계자 inner circle | +| 6896d5c2... | checkbox_icon | 체크박스 (재사용 ×20) | +| d2c070f2... | bottom_photo_left | 하단 좌 사진 | +| 2a6a58e7... | bottom_photo_mid | 하단 중 사진 | +| 39113493... | bottom_photo_right | 하단 우 사진 | diff --git a/block-tests/bim-figma-devmode.html b/block-tests/bim-figma-devmode.html new file mode 100644 index 0000000..ea3f188 --- /dev/null +++ b/block-tests/bim-figma-devmode.html @@ -0,0 +1,98 @@ + + + + +BIM 목표 — Figma Dev Mode 직접 적용 + + + + + + +
+
+ + +
+ +
+
+
생산성
향상
+
+
+
안전과
품질
+
+
+
소통과
신뢰
+
3D 모델을 통한 오류
최소화 및 Claim 예방
+
신뢰ㆍ투명성 강화
+
성과품, Solution을 통한
사용 편리성, 협업 및 의사소통 강화
+
소통ㆍ이해 원할
+
Analogue 기반 업무를
Digital화 하는 Process 혁신
+
신속ㆍ정확성 증진
+
건설비용 및 유지관리비 감소,
인력투입 최소화 등 생산성 향상
+
비용저감ㆍ부가가치 창출
+
Copy & Paste로 하향 평준화된
기존 성과물의 품질 향상
+
품질 향상
+
시설물의 요구성능의 만족,
건설중 및 운영중 안전확보
+
안전성 제고
+
+
+
+
+
速
+
+
+
利
+
+
+
+
安
+
+
+
質
+
+
+
通
+
+
+
信
+
+
+
+
+
+
+ +
+
+ + + diff --git a/block-tests/bim-future-statement.html b/block-tests/bim-future-statement.html new file mode 100644 index 0000000..c9caeff --- /dev/null +++ b/block-tests/bim-future-statement.html @@ -0,0 +1,105 @@ + + + + + +BIM 미래 선언 (Frame 1171281207) + + + + + + + +
+
+
+ + +
+
+
+ + + diff --git a/block-tests/bim-future-statement_flat.md b/block-tests/bim-future-statement_flat.md new file mode 100644 index 0000000..40b830c --- /dev/null +++ b/block-tests/bim-future-statement_flat.md @@ -0,0 +1,58 @@ +# Frame 1171281207 — BIM 미래 선언 메시지 (pill banner) + +> 원본: 3547 × 163 px +> Scale: × 0.36088 → 1280 × 58.8 px (매우 wide & thin) +> Node ID: 51:170 (Figma) +> 패턴 ID (잠정): `statement-pill-highlight` +> 매우 단순한 단일 메시지 배너 + +## 계층 경로 + +``` +Frame 51:170 "Frame 1171281207" (3547 × 163) +├─ 17:2087 image 3668 (0, 0) 3547 × 163 — 배경 PNG, border-radius 97 (= 163/2 → 완전 캡슐) +└─ 17:2088 TEXT (205, 33) 2933 × 90 + center (1671.5, 78), font 80 Bold Noto Sans KR, white + text-shadow 0 0 4px rgba(0,0,0,0.5) + tracking -0.16px + inline span 분리: + "수행과정 연속화와 관리체계 일원화된 형태의 " (white) + "전용ㆍ전문 S/W 개발" (#fe3 yellow) + " 없이는 미래가 없다." (white) +``` + +## 이상 탐지 결과 + +| 검사 | 결과 | +|------|------| +| 회전 | 없음 | +| 좁은 박스 | 없음 | +| 중복 | 없음 | +| Vector metadata | N/A | + +## 패턴 분류 + +**새 패턴 발견.** 잠정 ID: `statement-pill-highlight` + +특징: +- pill 모양 (border-radius = height/2) +- 배경 PNG (어두운 그래프 텍스처) +- 단일 line 메시지, 일부 span만 highlighted color +- text-shadow로 가독성 강화 + +## 변형 가능 축 + +- text_segments[N]: 인라인 span들 (각각 텍스트 + 색상) +- bg_image (optional, default: dark texture) +- text_shadow_color (optional) +- block_w (zone width), block_h (자동 = font_size × 1.1 or fixed) + +## Sub-patterns + +없음 (atomic 단순 패턴) + +## 자산 매핑 + +| hash | 의미 | +|------|------| +| 527bd780... | bg_dark_texture | diff --git a/block-tests/bim-goal-circles.html b/block-tests/bim-goal-circles.html new file mode 100644 index 0000000..5d58939 --- /dev/null +++ b/block-tests/bim-goal-circles.html @@ -0,0 +1,322 @@ + + + + + +건설산업의 목표 (BIM의 목적) — 원형 다이어그램 + + + + + + + +
+
+ + + + +
+
+
bg
+
+ + +
+
+
생산성
향상
+ +
+
+
안전과
품질
+ +
+
+
소통과
신뢰
+ + +
신뢰ㆍ투명성 강화
+
3D 모델을 통한 오류
최소화 및 Claim 예방
+
소통ㆍ이해 원할
+
성과품, Solution을 통한
사용 편리성, 협업 및 의사소통 강화
+
신속ㆍ정확성 증진
+
Analogue 기반 업무를
Digital화 하는 Process 혁신
+
비용저감ㆍ부가가치 창출
+
건설비용 및 유지관리비 감소,
인력투입 최소화 등 생산성 향상
+
품질 향상
+
Copy & Paste로 하향 평준화된
기존 성과물의 품질 향상
+
안전성 제고
+
시설물의 요구성능의 만족,
건설중 및 운영중 안전확보
+ + + + + + +
+
+
速
+
+
+
利
+ + + + + +
+
+
安
+
+
+
質
+
+
+
通
+
+
+
信
+ + +
신뢰ㆍ투명성 강화
+
3D 모델을 통한 오류
최소화 및 Claim 예방
+ +
+
+ + + diff --git a/block-tests/bim-goals-3circles.html b/block-tests/bim-goals-3circles.html new file mode 100644 index 0000000..c7caf00 --- /dev/null +++ b/block-tests/bim-goals-3circles.html @@ -0,0 +1,475 @@ + + + + + +BIM 목표 3원 블록 (Frame 1171281211) — Pure CSS + + + + + + + +
+
+
+ + +
+ +
+
+
+
+
+
+
+ + +
+
+
+ + +
+
+ +
+
+ +
+
+ + +

안전과

품질

+

생산성

향상

+

소통과

신뢰

+ + +
+
+
安
+ +
+
+
質
+ +
+
+
速
+ +
+
+
利
+ +
+
+
通
+ +
+
+
信
+ + +
안전성 제고
+
+

시설물의 요구성능의 만족,

+

건설중 및 운영중 안전확보

+
+
품질 향상
+
+

Copy & Paste로 하향 평준화된

+

기존 성과물의 품질 향상

+
+ + +
신속ㆍ정확성 증진
+
+

Analogue 기반 업무를

+

Digital화 하는 Process 혁신

+
+

비용저감ㆍ부가가치 창출

+
+

건설비용 및 유지관리비 감소,

+

인력투입 최소화 등 생산성 향상

+
+ + +
소통ㆍ이해 원할
+
+

성과품, Solution을 통한

+

사용 편리성, 협업 및 의사소통 강화

+
+
신뢰ㆍ투명성 강화
+
+

3D 모델을 통한 오류

+

최소화 및 Claim 예방

+
+ +
+
+
+ + + diff --git a/block-tests/bim-info-products.html b/block-tests/bim-info-products.html new file mode 100644 index 0000000..6f99e88 --- /dev/null +++ b/block-tests/bim-info-products.html @@ -0,0 +1,171 @@ + + + + + +시공상세 정보물 (Frame 1171281180) + + + + + +
+
+
+ +
+
시공 전 모델 기반 시공상세 정보물 이용한 시공계획 작성 지원
+ +
+
시공
상세
정보물
+ +
+
+
3차원 형상의 정보 모델과 Data Base (D/B)
+
+ +
+
+
목적물, 가시설 등의 단계별 시공 시뮬레이션
+
+ +
+
+
시공 및 안전교육에 도움이 되는 영상물 등 성과물
+
+ +
+
+
모델 또는 D/B, 시뮬레이션으로 부터 추출한 도면
+
+ +
+
+
모델에서 추출이 곤란한 안전, 유의사항, 개념도 등 상세 표현 도면
+
+ +
+
+
+ + diff --git a/block-tests/bim-info-products_flat.md b/block-tests/bim-info-products_flat.md new file mode 100644 index 0000000..c0d3da9 --- /dev/null +++ b/block-tests/bim-info-products_flat.md @@ -0,0 +1,27 @@ +# Frame 1171281180 — 시공상세 정보물 (stacked arrow list) + +> 원본: 1153 × 591.92 px +> Scale: × 1.11014 → 1280 × 657 px (슬라이드 720 내에 fit) +> Node ID: 45:5 (Figma) +> 패턴 ID: `stacked-arrow-list` + +## 구조 + +- 타이틀 (gradient text "시공상세 정보물" highlighted, 배경 bar) +- 5개 pill-row: 각각 다른 색 border-bottom + 화살표 마커 + 텍스트 +- 좌측 원호 장식 SVG ("시공 상세 정보물" 세로 텍스트) +- 각 row의 width와 left가 계단식으로 변화 (indent) + +## 변형 가능 축 + +- items[N=3~8]: { text, border_color } +- title_segments[]: { text, highlight? } +- left_decoration (optional, SVG arc) +- left_label (optional, 세로 텍스트) + +## 자산 + +| hash | 의미 | +|------|------| +| ff649c28... | left_arc_decoration (SVG) | +| 29c778b5... | arrow_marker (SVG) | diff --git a/block-tests/bim-issues-paired.html b/block-tests/bim-issues-paired.html new file mode 100644 index 0000000..5121786 --- /dev/null +++ b/block-tests/bim-issues-paired.html @@ -0,0 +1,166 @@ + + + + + +현황 및 문제점 (Frame 1171281194) + + + + + +
+
+
+ + +
+
+
현황 및 문제점
+
+ + +
+
+
BIM을 Digital 전환의 개념이 아닌, CAD의 확장판으로 해석하여 3D를 그리는 수단 정도로만 인식
+
단순 업무효율 증진을 위한 도구로만 인식하여, 기술자들이 도구로서 사용만 할 수 있도록 교육시키면 된다고 판단
+
개념 부재
+
잘못된 접근방식
+ + +
+
+ +
대형 S/W 개발 및 판매회사에서 제시된 내용과 방향대로 따라하므로써, 국내는 자체적 목표설정 기능을 상실
+
건축과 토목이 유사하다는 전제하에 Library를 활용하는 건축에서 수행하고 있는 방식을 토목에도 동일하게 적용
+
방향성 상실
+
전제조건 오류
+ + +
+
+
학자, 발주처 중심으로 S/W 판매회사에서 제시한 기술 수행 방식의 변화를 주도, 실행주체인 기업과 기술자들은 기존의 방식을 고수하면서 눈치만 보는 실정
+
기존 2D 설계의 결과가 옳다는 전제와 3D 설계를 수행/검토해본 경험이 없어, 전환설계의 개념으로 수행하므로써 비용과 시간이 추가로 소요, 높은 수준의 품질확보 불가
+
수행주체 혼란
+
수행방식 무지
+ + +
+
+
단순 외산 범용S/W만 사용하면 BIM이 될 수 있을 것이라는 안일한 생각으로 접근하므로 외국 대형S/W 회사에 기술예속 가속
+ +
도면작성 중심의 기존 설계방식과 동일한 개념으로 생각하여, 탁상용 개인 PC, Monitor 사용기반 정도에 머물러 있어 실무적용에 필요한 높은 수준의 모델 등의 표출은 한계
+
외산S/W 기술예속
+
H/W 미비
+ +
+
+
+ + diff --git a/block-tests/bim-issues-paired_flat.md b/block-tests/bim-issues-paired_flat.md new file mode 100644 index 0000000..897098a --- /dev/null +++ b/block-tests/bim-issues-paired_flat.md @@ -0,0 +1,32 @@ +# Frame 1171281194 — 현황 및 문제점 (paired issues rows) + +> 원본: 1857 × 1325.62 px +> Scale: × 0.689285 → 1280 × 913.5 px +> Node ID: 45:19 (Figma) +> 패턴 ID: `issues-paired-rows` + +## 구조 + +4개 행, 각 행 = rounded box (border 3px green) + 좌 본문 + 우 본문 + 가운데 세로선 + 좌 label pill + 우 label pill + +pill 위치: 행 1,3 = 상단 좌/우, 행 2,4 = 하단 좌/우 (교차) + +## 변형 가능 축 + +- rows[N=2~8] + - left: { label, body_text } + - right: { label, body_text } + - pill_position: top | bottom (교차 또는 고정) +- header: { icon, title } (optional) + +## Sub-patterns + +없음 + +## 자산 + +| hash | 의미 | 재사용 | +|------|------|------| +| b0e9fad5... | header_icon | ✓ (1195에서 등록) | +| b47d2977... | label_pill_bg | NEW | +| b614390a... | vertical_divider_svg | NEW | diff --git a/block-tests/bim-issues-quadrant.html b/block-tests/bim-issues-quadrant.html new file mode 100644 index 0000000..511a2ce --- /dev/null +++ b/block-tests/bim-issues-quadrant.html @@ -0,0 +1,313 @@ + + + + + +BIM 수행실정 (Frame 1171281193) + + + + + + + +
+
+
+ + + +
+
+
+
+ + + +
+
정책 집행
+
+
+
수행 개념
+
+
+
근본 취지의 이해부족
+
+
+
지속적 투자 의지 부재
+
+ + +
+ +
Rome wasn't
Built in a day!
+
+ + +

인정주의 정책 집행

+
+
    +
  • 수행능력이 없는 업체 선정 후 품질을 낮추어 시행하고 낮은 수준의 성과품을 실적으로 수용
    • +
  • 모든 설계사가 할 수 있다는 전제하에 정책 시행
    • +
  • 발주처의 책임회피를 위한 제도 운영
    • +
+
+ +

적용효과도 사례도 없는 방침부터 남발

+
+
    +
  • 효과 검증도 없는 지침부터 만들고보는 현실
    • +
  • BIM/DX 적용효과를 판단할 사례 부재
    • +
  • 대부분 홍보목적으로 포장되어 투자 대비 효과 없음
    • +
+
+ + +

공학적 개념 정립 부재

+
+
    +
  • DX 개념과 BIM 기술의 차이점의 이해부족으로 전략적 접근방식과 기술적 도구 사이의 혼란만 가중
    • +
  • 인프라시설의 DX의 기본은 단순 모델이 아닌 위치기반 3D 모델(BIM)을 활용한 과정(Process)의 혁신
    • +
  • 기술적 도구인 3D 모델 제작S/W에 과도하게 의존
    • +
+
+ +

'본업 기술력 확보' 우선의 개념 부재

+
+
    +
  • 깊은 기반지식 바탕의 기술이 축적된 메뉴얼에 대한 중요성 및 필요성에 대한 이해 부족
    • +
+
+
+
    +
  • 자체 기술개발 없이 국내 발주처의 지침과 방침에만 의존한 낮은 기술력
    • +
+
+ + +

기술투자 없는 성과 창출 기대

+
+
    +
  • 이전의 CAD 도입·확장 시기처럼 상용화된 BIM S/W만 구입·구독하면 될거라는 안일한 생각
    • +
  • 기술개발 노력없이 과거처럼 하면 된다는 착각
    • +
+
+ +

엔지니어링 S/W에 대한 개념 부재

+
+
    +
  • 다양한 엔지니어링 S/W의 특성에 대한 깊은 이해없이 단기 비용절감에 치우쳐 범용 S/W 선택
    • +
  • 대형 Global S/W 회사에 과도한 의존과 이에 예속되는 방침 남발로 전용S/W 소멸
    • +
+
+ + +

근본적인 역할은 회피

+
+
    +
  • 엔지니어의 근본적인 역할인 과정의 혁신과 결과물의 변화에 대한 고민 부재
    • +
+
+
+
    +
  • 기술자가 직접 3D 모델을 만들고 수정하며 설계를 수행해야하는데 정작 모델제작은 외주처리
    • +
+
+ +

과거의 타성에 머무르고 있는 업계

+
+
    +
  • 설계/감리/시공 임직원들의 디지털무지와 전략적 무지
    • +
  • S/W 판매업체의 기능적 사용법을 BIM 교육으로 착각
    • +
  • 교육을 통한 인재양성보다는 당장 실무활용이 가능한 타사의 인력을 빼오기에 집중
    • +
+
+ +
+
+
+ + + diff --git a/block-tests/bim-issues-quadrant_flat.md b/block-tests/bim-issues-quadrant_flat.md new file mode 100644 index 0000000..1ea38da --- /dev/null +++ b/block-tests/bim-issues-quadrant_flat.md @@ -0,0 +1,52 @@ +# Frame 1171281193 — BIM 수행실정 2×2 issues quadrant + +> 원본: 2226 × 1766 px +> Scale: × 0.575022 → 1280 × 1015 px +> Node ID: 45:18 (Figma) +> 패턴 ID (잠정): `quadrant-2x2-issues` + +## 구조 + +``` +Frame 45:18 (2226×1766) +├─ 4 quadrant cards (2 columns × 2 rows) +│ 각 카드: +│ - rounded card (top: rounded-t-50) +│ - quadrant header ribbon (top/bottom) +│ - red headline (Bold 55px) +│ - bullet body (Regular 42px, lh 60) +│ +├─ 4 quadrants: +│ 상좌: "정책 집행" header / 인정주의 정책 집행, 적용효과도... (2 issues × headlines + bodies) +│ 상우: "수행 개념" header / 공학적 개념 정립 부재, 본업..., 깊은..., 자체... (multi) +│ 하좌: "근본 취지의 이해부족" header / 기술투자..., 엔지니어링... (multi) +│ 하우: "지속적 투자 의지 부재" header / 근본적인 역할은 회피, 과거의 타성... (multi) +│ +└─ 가운데 원 (background): 644.99×584.43 image + "Rome wasn't Built in a day!" (white 55px Bold) +``` + +## 패턴: quadrant-2x2-issues + +특징: +- 2×2 그리드 (4개 카테고리) +- 각 카테고리 = ribbon header + N개의 (red headline + bullet body) +- 가운데 원형 인용구 (optional) +- 카드 배경: 둥근 모서리 (top), 진한 색 + +## 변형 가능 축 + +- quadrants[4] (보통 4 fixed, 2 또는 6도 가능) + - header_label + - issues[N=1~5]: { headline, body_bullets[] } +- center_quote (optional): { image, text } + +## 자산 + +| hash | 의미 | +|------|------| +| fdcafc1b... | card_bg_dark | +| 922ee6f4... | center_quote_circle | +| 5d27ecb1... | header_ribbon_right (수행개념) | +| 6d311a18... | header_ribbon_left (정책 집행) | +| cab8c828... | header_ribbon_right_bot | +| 42b569ef... | header_ribbon_left_bot | diff --git a/block-tests/bim-sw-overview.html b/block-tests/bim-sw-overview.html new file mode 100644 index 0000000..b19ea9f --- /dev/null +++ b/block-tests/bim-sw-overview.html @@ -0,0 +1,212 @@ + + + + + +Model에 특화된 Engn. S/W (Frame 1171281202) + + + + + +
+
+
+ +
+
Model에 특화된 Engn. S/W
+
+ + +
+ + +
+
+
+ + +
GIS
+
Modeler
+
Simulation & Video
+ + +
· ArcGIS, QGIS
· 천지인
+
· Rhino, Blender, Sketch-up
· EG-BIM Modeller · Revit
· Civil 3D(+KG Road), Naviswork
+
· Twin Highway
· Infraworks
+ + +
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+ + +
Model 구축에 필요한 기능 위주
+
고가, 고사양, 복잡, 전문가용
+
Engn. S/W간에 호환 안됨
+
성과물 제작은 별도
+
시공 현장상황 반영에 한계
+ + +
+
+
+
+
+
+
+
+ + diff --git a/block-tests/bim-sw-overview_flat.md b/block-tests/bim-sw-overview_flat.md new file mode 100644 index 0000000..441ee74 --- /dev/null +++ b/block-tests/bim-sw-overview_flat.md @@ -0,0 +1,26 @@ +# Frame 1171281202 — Model에 특화된 Engn. S/W (split-panel-numbered) + +> 원본: 1863.31 × 834 px +> Scale: × 0.68706 → 1280 × 573 px +> Node ID: 45:27 (Figma) +> 패턴 ID: `split-panel-numbered` + +## 구조 + +- 좌측 패널: 그라데이션 배경 이미지(image 3844) + 3 카테고리 (GIS / Modeler / Simulation & Video) 각각 헤더바 + SW 리스트 +- 중간 세로 장식 이미지(image 3855 + 3845) +- 우측 패널: 5개 번호 badge (01~05 PNG) + 설명 텍스트 + 배경 bar + 우상단 화살표 아이콘 +- 상단 타이틀: gradient text "Model" + "에 특화된 Engn. S/W" + +## 변형 가능 축 + +- left_categories[N=2~5]: { header_text, sw_list[] } +- right_items[N=3~8]: { number_badge_image, description } +- title_segments[]: highlighted text + +## 특이사항 + +- 이미지 에셋 15+ 개 (대부분 장식/배지). 이미지 의존 높은 패턴. +- 템플릿화 시 이미지 의존도가 높아 블록 재사용성 낮을 수 있음. 콘텐츠 구조(좌: 카테고리 리스트 / 우: 번호 설명)는 재사용 가능. + +## 자산: 15개 (shared 캐시) diff --git a/block-tests/bim-vs-dx-table.html b/block-tests/bim-vs-dx-table.html new file mode 100644 index 0000000..d33954b --- /dev/null +++ b/block-tests/bim-vs-dx-table.html @@ -0,0 +1,264 @@ + + + + + +BIM vs DX 비교 표 (Frame 1171281195) + + + + + + + +
+
+
+ + +
+
+
BIM과 DX의 이해
+
+ + +
+
BIM
+
vs.
+
DX
+
+ + + + +
BIM/DX
+
• Only 3D
+
• BIM << DX (ENG. + Management 포함)
+ + +
S/W
+
• 모델 제작용 상용 S/W
[Civil 3D, Revit, Navisworks, Autocad]
+
• 제작 및 운영 (상용 + 전용 40~80개)
[Rhino, Sketchup, Blender ..] + [EG-BIM 등]
+ + +
프로세스
+
• 기존 2D 설계방식 유지
+
• 근본적 문제의식을 통한 개선
+ + +
성과물
+
• 3D 모델 중심
• 기존 성과품 유지
+
• 공학 정보 및 콘텐츠 연계에 집중
• 도면, 수량, 시공계획 등 일식
+ + +
활  용
+
• 3D 모델에 의한 일반적 이해 향상
+
• 설계/시공의 혁신(개념의 재정립)
+ + +
확장성
+
• (설계/시공/운영) 분야별 단절
+
• 전 생애주기 활용 시스템
+ + +
수행개념
+
• 단순화(오류) - 수동적/집단적 동질화
+
• 구체화(복잡) - 적극/구체적 실현 방안
+ + +
CIVIL + IT
+
• 소극적, 상용 기술에 의존
+
• 적극적, 주체적인 기술 접목/융합
+ + +
주  체
+
• S/W 제작사 판매 정책에 의존
+
• 자체 수행능력 - 지속가능성 확보
+ + +
발주처
+
• 평준화, 국내 중심
+
• 차별화 및 경쟁력 확보, 해외 진출
+ + +
설계사
+
• 소규모 BIM팀 운영 + 단순교육에 집중
+
• IT + CIVIL ENG 220명 운영 + 기술 개발
+ + +
시공사
+
• 국내 토목 소극적/해외 토목증가
+
• 분야 확장 모델 및 시스템
+ + +
+
+

BIM은 건설산업의 DX(디지털전환)을 수행하는 과정에서

+

가장 기초가 되는 일부분임을 인지하는 것이 매우 중요

+
+
+ +
+
+
+ + + diff --git a/block-tests/bim-vs-dx-table_flat.md b/block-tests/bim-vs-dx-table_flat.md new file mode 100644 index 0000000..1129e59 --- /dev/null +++ b/block-tests/bim-vs-dx-table_flat.md @@ -0,0 +1,66 @@ +# Frame 1171281195 — BIM vs DX 비교 표 + +> 원본: 1868 × 1908 px +> Scale: × 0.685225 → 1280 × 1307 px (16:9 720 초과) +> Node ID: 45:20 (Figma) +> 패턴 ID (잠정): `compare-vs-rows` + +## 계층 경로 + +``` +Frame 45:20 "Frame 1171281195" (1868 × 1908) +├─ 헤더 영역 +│ ├─ 17:1937~1940 "BIM과 DX의 이해" (gradient text + icon, top:0) +│ ├─ 17:1990 main title pill bg (65, 103) 1803×75 — gradient +│ └─ 17:1991 "BIM vs. DX" text (331, 100) +│ +├─ 12 row × 3 col 비교 표 (top: 205~1755) +│ 각 row: { 좌 BIM 텍스트, 가운데 카테고리 pill, 우 DX 텍스트 } +│ 카테고리: BIM/DX, S/W, 프로세스, 성과물, 활용, 확장성, +│ 수행개념, CIVIL+IT, 주체, 발주처, 설계사, 시공사 +│ +│ 좌 컬럼 (text-right, color #5c3714 brown): +│ 17:1941 ~ 17:1952 (12개) +│ 가운데 컬럼 (white text on gradient pill, 242×varies): +│ 17:1954/1956/1958/1960/1962/1964/1966/1968/1970/1972/1974/1976 +│ 우 컬럼 (text-left, color #285b4a green): +│ 17:1978 ~ 17:1989 (12개) +│ +└─ 하단 결론 영역 + ├─ 17:1992 Rectangle 42631 (427, 1738) 1214×170 — SVG box + ├─ 17:1993 결론 텍스트 "BIM은 건설산업의 DX..." (446, 1730) + └─ 17:1994 화살표 vector (좌하단) +``` + +## 패턴 분류 + +**새 패턴.** ID: `compare-vs-rows` + +특징: +- 12개 비교 행 (N=variable) +- 각 행: 좌(text) | 중앙(pill 라벨) | 우(text) +- 헤더 + 메인 타이틀 pill +- 좌/우 색상 대조 (brown vs green) +- 하단 결론 박스 + +## 변형 가능 축 + +- header: { icon, title, gradient_colors, optional } +- main_pill_title: { text_left, text_center, text_right (e.g. "BIM vs. DX") } +- rows[N=2~15]: 각 행 + - left: { text, color, sub_text? } + - center: { label, height_variant } + - right: { text, color, sub_text? } +- conclusion_box: { text_segments (with highlights), arrow_image, optional } + +## Sub-patterns + +- 좌/우 대조 텍스트 페어 (없는 sub-pattern, 1번째 등장이라 미등록) + +## 자산 + +| hash | 의미 | +|------|------| +| b0e9fad5... | bim_dx_header_icon | +| 7713e15d... | conclusion_box_svg | +| bf175527... | arrow_vector | diff --git a/block-tests/card-image.html b/block-tests/card-image.html new file mode 100644 index 0000000..8e4e6b7 --- /dev/null +++ b/block-tests/card-image.html @@ -0,0 +1,219 @@ + + + + +블록 테스트: card-image + + + +
+ + +
+ +
+ + 설계단계 + +
+
설계단계
+
Design Stage
+
+
    + +
  • 고도화된 BIM 구현
    • + +
  • 최첨단 디지털트윈
    • + +
  • 시뮬레이션 분석 & 성능평가
    • + +
  • 지속가능한 인프라개발
    • + +
+ +
+
+ +
+ + 시공 단계 + +
+
시공 단계
+
Construction Stage
+
+
    + +
  • 향상된 건설 계획과 공정 순서 관리
    • + +
  • Big Room 등 환경을 통한 협업 및 조정
    • + +
  • 정확한 수량산출서와 비용 산정
    • + +
+ +
+
+ +
+ + 유지관리 단계 + +
+
유지관리 단계
+
Maintenance Stage
+
+
    + +
  • 자산 정보 및 데이터 관리
    • + +
  • 예측 기반 유지보수 및 생애주기 분석
    • + +
  • 효율적인 시설 운영 및 지속가능한 관리
    • + +
+ +
+
+ +
+ + +
+ + \ No newline at end of file diff --git a/block-tests/cards_card-compare-3col.html b/block-tests/cards_card-compare-3col.html new file mode 100644 index 0000000..b41990f --- /dev/null +++ b/block-tests/cards_card-compare-3col.html @@ -0,0 +1,162 @@ + +cards/card-compare-3col +
+ +
+ +
+
+
상용 S/W
+
Commercial
+
+ + +
    + +
  • Autodesk, Bentley 등
    • + +
  • 범용 기능 제공
    • + +
  • 라이선스 비용 높음
    • + +
+ +
+ +
+
+
3rd Party 범용
+
General Purpose
+
+ + +
    + +
  • Rhino, Sketchup 등
    • + +
  • 특정 분야 특화
    • + +
  • 상대적 저비용
    • + +
+ +
+ +
+
+
전문·전용 S/W
+
Specialized
+
+ + +
    + +
  • 자체 개발 솔루션
    • + +
  • 업무 프로세스 최적화
    • + +
  • 지속적 업그레이드 가능
    • + +
+ +
+ +
+ +
\ No newline at end of file diff --git a/block-tests/cards_card-dark-overlay.html b/block-tests/cards_card-dark-overlay.html new file mode 100644 index 0000000..8d3f80d --- /dev/null +++ b/block-tests/cards_card-dark-overlay.html @@ -0,0 +1,174 @@ + + + + +cards/card-dark-overlay + + +
+ +
+ +
+ + + +
+
협업지원
+
팀원간 협업 원활히하여 +프로젝트 관리 개선
+
+
+ +
+ + + +
+
오류감소
+
설계 오류 최소화 +품질 향상
+
+
+ +
+ + + +
+
생산성 향상
+
반복적 작업의 자동화 +시간과 노력 절약
+
+
+ +
+ + + +
+
비용절감
+
설계 변경 최소화 +공사비 절감
+
+
+ +
+ + + +
+
데이터 관리
+
체계적 정보 관리 +생애주기 활용
+
+
+ +
+ +
+ \ No newline at end of file diff --git a/block-tests/cards_card-icon-desc.html b/block-tests/cards_card-icon-desc.html new file mode 100644 index 0000000..394247b --- /dev/null +++ b/block-tests/cards_card-icon-desc.html @@ -0,0 +1,114 @@ + + +cards/card-icon-desc + +
+ +
+ +
+
🔧
+
기술 기반
+
건설 분야별 +전문지식과 경험
+
+ +
+
💻
+
S/W 역량
+
디지털 도구와 +Process 통합
+
+ +
+
🌏
+
여건 조성
+
사회·기업·제도 +수용 환경 구축
+
+ +
+ +
\ No newline at end of file diff --git a/block-tests/cards_card-image-3col.html b/block-tests/cards_card-image-3col.html new file mode 100644 index 0000000..02589b9 --- /dev/null +++ b/block-tests/cards_card-image-3col.html @@ -0,0 +1,199 @@ + + + + +cards/card-image-3col + + +
+ +
+ +
+ + 설계단계 + +
+
설계단계
+
Design Stage
+
+
    + +
  • 고도화된 BIM 구현
    • + +
  • 최첨단 디지털트윈
    • + +
  • 시뮬레이션 분석 & 성능평가
    • + +
  • 지속가능한 인프라개발
    • + +
+ +
+
+ +
+ + 시공 단계 + +
+
시공 단계
+
Construction Stage
+
+
    + +
  • 향상된 건설 계획과 공정 순서 관리
    • + +
  • Big Room 등 환경을 통한 협업 및 조정
    • + +
  • 정확한 수량산출서와 비용 산정
    • + +
+ +
+
+ +
+ + 유지관리 단계 + +
+
유지관리 단계
+
Maintenance Stage
+
+
    + +
  • 자산 정보 및 데이터 관리
    • + +
  • 예측 기반 유지보수 및 생애주기 분석
    • + +
  • 효율적인 시설 운영 및 지속가능한 관리
    • + +
+ +
+
+ +
+ +
+ \ No newline at end of file diff --git a/block-tests/cards_card-image-round.html b/block-tests/cards_card-image-round.html new file mode 100644 index 0000000..d14c29f --- /dev/null +++ b/block-tests/cards_card-image-round.html @@ -0,0 +1,133 @@ + +cards/card-image-round +
+ +
+ +
+ +
+ 설계 혁신 +
+ +
설계 혁신
+
3D 모델 기반 +통합 설계
+
+ +
+ +
+ 시공 효율 +
+ +
시공 효율
+
디지털 관리 +품질 향상
+
+ +
+ +
+ 유지관리 +
+ +
유지관리
+
생애주기 +자산 관리
+
+ +
+ +
\ No newline at end of file diff --git a/block-tests/cards_card-numbered.html b/block-tests/cards_card-numbered.html new file mode 100644 index 0000000..1bd827b --- /dev/null +++ b/block-tests/cards_card-numbered.html @@ -0,0 +1,136 @@ + +cards/card-numbered +
+ +
+ +
+
1
+
+
요구사항 분석
+
디지털 전환 목표 수립 +사용자 요구사항 수집
+
+
+ +
+
2
+
+
S/W 개발
+
건설산업 디지털화를 위한 +솔루션 개발 및 업그레이드
+
+
+ +
+
3
+
+
System 통합
+
기존 시스템 호환성 분석 +API 데이터 통합
+
+
+ +
+
4
+
+
교육/피드백
+
사용자 교육 프로그램 +지속적 모니터링 & 개선
+
+
+ +
+ +
\ No newline at end of file diff --git a/block-tests/cards_card-stat-number.html b/block-tests/cards_card-stat-number.html new file mode 100644 index 0000000..0c1a536 --- /dev/null +++ b/block-tests/cards_card-stat-number.html @@ -0,0 +1,129 @@ + +cards/card-stat-number +
+ +
+ +
+
+ 30% +
+
공기/공사비 절감
+ +
+ +
+
+ 40% +
+
안전사고 감소
+ +
+ +
+
+ 220명+ +
+
IT+CIVIL ENG 인력
+ +
+ +
+
+ 80개+ +
+
전용 S/W 개발
+ +
+ +
+ +
\ No newline at end of file diff --git a/block-tests/cards_card-step-vertical.html b/block-tests/cards_card-step-vertical.html new file mode 100644 index 0000000..bb6b1c0 --- /dev/null +++ b/block-tests/cards_card-step-vertical.html @@ -0,0 +1,170 @@ + +cards/card-step-vertical +
+ +
+ +
+
+
설계단계
+
+
+
BIM 기반 3D 설계
+ +
• 고도화된 BIM 구현 +• 시뮬레이션 분석 & 성능평가
+
+
+ +
+
+
+ + +
+
+
시공단계
+
+
+
현장 디지털 관리
+ +
• 공정 순서 관리 +• Big Room 협업 환경
+
+
+ +
+
+
+ + +
+
+
운영단계
+
+
+
디지털 트윈 운영
+ +
• 실시간 모니터링 +• 예측 기반 유지보수
+
+
+ + +
+ +
\ No newline at end of file diff --git a/block-tests/cards_card-tag-image.html b/block-tests/cards_card-tag-image.html new file mode 100644 index 0000000..0d6ef15 --- /dev/null +++ b/block-tests/cards_card-tag-image.html @@ -0,0 +1,132 @@ + + +cards/card-tag-image + +
+ +
+ +
+
제조
+ +
제조업 현장
+
반복적 공정 +표준화된 부품 +자동화 라인
+
+ +
+
건축
+ +
건축 현장
+
수직적 작업공간 +Library 기반 설계 +반복 요소 활용
+
+ +
+
인프라/토목
+ +
인프라 현장
+
수평적 작업공간 +비반복적 공정 +GIS 기반 위치정보 필수
+
+ +
+ +
\ No newline at end of file diff --git a/block-tests/cards_card-text-grid.html b/block-tests/cards_card-text-grid.html new file mode 100644 index 0000000..2e07ce2 --- /dev/null +++ b/block-tests/cards_card-text-grid.html @@ -0,0 +1,137 @@ + + + + +cards/card-text-grid + + +
+
+ +
+ +
건설산업
+ 종합산업 +
다양한 시설물을 광범위한 기술을 통합·융합하여 만들어내는 종합산업
+ +
+ +
+ +
BIM
+ 핵심 인프라 기술 +
시설물 생애주기 정보를 3D 모델 기반으로 통합·관리하는 도구
+
국토교통부, 2020
+
+ +
+ +
DX
+ 패러다임 변화 +
디지털 기술 기반으로 업무방식과 가치 창출 구조를 전환하는 과정
+
IBM, 2011
+
+ +
+ +
+ \ No newline at end of file diff --git a/block-tests/circle-label.html b/block-tests/circle-label.html new file mode 100644 index 0000000..762b99d --- /dev/null +++ b/block-tests/circle-label.html @@ -0,0 +1,133 @@ + + + + +블록 테스트: circle-label + + + +
+ + +
+
+
+
단계별 +BIM의 활용
+ +
+
+
+ + +
+ + \ No newline at end of file diff --git a/block-tests/compare-box.html b/block-tests/compare-box.html new file mode 100644 index 0000000..7f3e8d5 --- /dev/null +++ b/block-tests/compare-box.html @@ -0,0 +1,124 @@ + + + + +compare-box + + +
+ +
+
+
+
디지털 기술을 활용한 +협업 프로세스
+ +
+
+
VS
+
+
+
시설물의 전 생애주기 동안 +정보의 생성 및 관리
+ +
+
+
+ +
+ \ No newline at end of file diff --git a/block-tests/comparison-table.html b/block-tests/comparison-table.html new file mode 100644 index 0000000..c815298 --- /dev/null +++ b/block-tests/comparison-table.html @@ -0,0 +1,278 @@ + + + + +comparison-table + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ BIM + + VS + + D/X +
• Only 3DBIM · D/X• BIM ≪ D/X (ENG. + Management 포함)
• 모델 제작용 상용 S/W +(Civil 3D, Revit, Navisworks, Autocad)S/W• 제작 및 운영(상용 + 전용 40~80개) +[Rhino, Sketchup, Blender...] + [EG-BIM 등]
• 기존 2D 설계방식 유지프로세스• 근본적 문제의식을 통한 개선
• 3D 모델 중심 +• 기존 성과품 유지성과물• 공학 정보 및 콘텐츠 연계에 집중 +• 도면, 수량, 시공계획 등 일식
• 3D 모델에 의한 일반적 이해 향상활용• 설계/시공의 혁신(개념의 재정립)
• (설계/시공/운영) 분야별 단절확장성• 전 생애주기 활용 시스템
• 단순화(오류) - 수동적/집단적 동질화수행개념• 구체화(복잡) - 적극/구체적 실현 방안
• 소극적, 상용 기술에 의존CIVIL + IT• 적극적, 주체적인 기술 접목/융합
• S/W 제작사 판매 정책에 의존주체• 자체 수행능력 - 지속가능성 확보
• 평준화, 국내 중심발주처• 차별화 및 경쟁력 확보, 해외 진출
• 소규모 BIM팀 운영 + 단순교육에 집중설계사• IT + CIVIL ENG 220명 운영 + 기술 개발
• 국내 토목 소극적/ 해외 토목증가시공사• 분야 확장 모델 및 시스템
+
+ +
+ \ No newline at end of file diff --git a/block-tests/conclusion-bar.html b/block-tests/conclusion-bar.html new file mode 100644 index 0000000..868fe5d --- /dev/null +++ b/block-tests/conclusion-bar.html @@ -0,0 +1,93 @@ + + + + +conclusion-bar + + +
+ +
+
핵심 요약
+
BIM은 건설산업의 디지털전환(DX)을 수행하는 과정에서 가장 기초가 되는 일부분이다
+
+ +
+ \ No newline at end of file diff --git a/block-tests/emphasis_banner-gradient.html b/block-tests/emphasis_banner-gradient.html new file mode 100644 index 0000000..562b32e --- /dev/null +++ b/block-tests/emphasis_banner-gradient.html @@ -0,0 +1,88 @@ + + + + +emphasis/banner-gradient + + +
+ +
+
Engineering Software는 건설산업 DX를 실현하기 위한 핵심 도구입니다
+
단순 도구가 아닌, 엔지니어의 전문지식과 프로세스를 디지털화하는 기반 기술
+
+ +
+ \ No newline at end of file diff --git a/block-tests/emphasis_callout-solution.html b/block-tests/emphasis_callout-solution.html new file mode 100644 index 0000000..d9c8ec6 --- /dev/null +++ b/block-tests/emphasis_callout-solution.html @@ -0,0 +1,104 @@ + +emphasis/callout-solution +
+ +
+
💡
+
+
Solution 제시 포인트
+
지금의 방식 속에서도 앞으로도 지속적으로 가능할까? +건설산업의 디지털 전환을 위해 근본적인 변화가 필요한 시점입니다.
+
건설산업 DX 전략 보고서
+
+
+ +
\ No newline at end of file diff --git a/block-tests/emphasis_callout-warning.html b/block-tests/emphasis_callout-warning.html new file mode 100644 index 0000000..bcb47d6 --- /dev/null +++ b/block-tests/emphasis_callout-warning.html @@ -0,0 +1,95 @@ + +emphasis/callout-warning +
+ +
+
⚠️
+
+
현재 접근 방식의 한계
+
단순 BIM S/W 도입만으로는 DX를 달성할 수 없습니다. +기존 2D 설계방식 위에 3D를 덧씌우는 접근은 +비용 증가와 효율 저하를 초래합니다.
+
+
+ +
\ No newline at end of file diff --git a/block-tests/emphasis_comparison-2col.html b/block-tests/emphasis_comparison-2col.html new file mode 100644 index 0000000..2d59197 --- /dev/null +++ b/block-tests/emphasis_comparison-2col.html @@ -0,0 +1,111 @@ + + + + +emphasis/comparison-2col + + +
+
+
+
잘못된 인식
+ +
• BIM 기술 도입 = DX 완성 +• DX를 단순 기술 도입으로 한정 +• 개별 기술 중심의 접근
+
+
+
+
올바른 이해
+ +
• DX는 BIM을 포함한 상위 개념 +• 산업 패러다임의 근본적 변화 +• GIS-BIM-디지털트윈 기술 융합 필수
+
+
+ +
+ \ No newline at end of file diff --git a/block-tests/emphasis_conclusion-accent-bar.html b/block-tests/emphasis_conclusion-accent-bar.html new file mode 100644 index 0000000..109070e --- /dev/null +++ b/block-tests/emphasis_conclusion-accent-bar.html @@ -0,0 +1,94 @@ + + + + +emphasis/conclusion-accent-bar + + +
+ +
+
핵심 요약
+
BIM은 건설산업의 디지털전환(DX)을 수행하는 과정에서 가장 기초가 되는 일부분이다
+
+ +
+ \ No newline at end of file diff --git a/block-tests/emphasis_dark-bullet-list.html b/block-tests/emphasis_dark-bullet-list.html new file mode 100644 index 0000000..7c1782b --- /dev/null +++ b/block-tests/emphasis_dark-bullet-list.html @@ -0,0 +1,105 @@ + + +emphasis/dark-bullet-list + +
+ +
+
건설산업 DX의 핵심 과제
+
    + +
  • 기존 2D 설계방식의 근본적 한계 인식
    • + +
  • 3D 모델 기반의 정보 통합·관리 체계 구축
    • + +
  • 전 생애주기 데이터 연계 및 활용 시스템 도입
    • + +
  • 디지털 트윈 기반 시뮬레이션 및 의사결정 지원
    • + +
+
+ +
\ No newline at end of file diff --git a/block-tests/emphasis_divider-text.html b/block-tests/emphasis_divider-text.html new file mode 100644 index 0000000..f6ff5ec --- /dev/null +++ b/block-tests/emphasis_divider-text.html @@ -0,0 +1,80 @@ + +emphasis/divider-text +
+ +
+
+
핵심 요약
+
+
+ +
\ No newline at end of file diff --git a/block-tests/emphasis_highlight-strip.html b/block-tests/emphasis_highlight-strip.html new file mode 100644 index 0000000..847df5b --- /dev/null +++ b/block-tests/emphasis_highlight-strip.html @@ -0,0 +1,87 @@ + +emphasis/highlight-strip +
+ +
+ +
+ 상용 +
+ +
+ 3rd Party(범용) +
+ +
+ 전문·전용 S/W +
+ +
+ +
\ No newline at end of file diff --git a/block-tests/emphasis_quote-big-mark.html b/block-tests/emphasis_quote-big-mark.html new file mode 100644 index 0000000..2e80ac1 --- /dev/null +++ b/block-tests/emphasis_quote-big-mark.html @@ -0,0 +1,107 @@ + +emphasis/quote-big-mark +
+ +
+
❝
+
+
건설산업의 디지털 전환 논의에서 DX와 BIM이 개념적으로 명확히 정립되지 않은 채 혼용되어 사용되고 있으며, 이로 인해 BIM 기술의 도입을 DX의 완성으로 오인하는 인식이 확산되고 있다
+
— 건설산업 DX 분석 보고서
+
+
❞
+
+ +
\ No newline at end of file diff --git a/block-tests/emphasis_quote-left-border.html b/block-tests/emphasis_quote-left-border.html new file mode 100644 index 0000000..f22a555 --- /dev/null +++ b/block-tests/emphasis_quote-left-border.html @@ -0,0 +1,85 @@ + + + + +emphasis/quote-left-border + + +
+
+
BIM은 건설산업의 디지털전환을 수행하는 과정에서 가장 기초가 되는 일부분이다
+
건설산업 BIM 기본지침, 국토교통부, 2020
+
+ +
+ \ No newline at end of file diff --git a/block-tests/emphasis_quote-question.html b/block-tests/emphasis_quote-question.html new file mode 100644 index 0000000..e62a62d --- /dev/null +++ b/block-tests/emphasis_quote-question.html @@ -0,0 +1,92 @@ + + + + +emphasis/quote-question + + +
+ +
+
지금의 상황 속에서도 앞으로도, +지속적으로 가능할까?
+
지금의 방식으로 복잡해지는 건설 환경에 대응할 수 있을지, 근본적인 변화가 필요한 시점입니다.
+
+ +
+ \ No newline at end of file diff --git a/block-tests/emphasis_tab-label-row.html b/block-tests/emphasis_tab-label-row.html new file mode 100644 index 0000000..72c89c5 --- /dev/null +++ b/block-tests/emphasis_tab-label-row.html @@ -0,0 +1,95 @@ + +emphasis/tab-label-row +
+ +
+ +
+ 제조 +
+ +
+ 건축 +
+ +
+ 인프라/토목 +
+ +
+ +
\ No newline at end of file diff --git a/block-tests/frame_1171281190_flat.md b/block-tests/frame_1171281190_flat.md new file mode 100644 index 0000000..bc2958b --- /dev/null +++ b/block-tests/frame_1171281190_flat.md @@ -0,0 +1,196 @@ +# Frame 1171281190 — 전체 Leaf 노드 플래튼 + +> 원본: 2123.13 × 724 px +> Scale: × 0.60290 → 1280 × 436.5 px +> 모든 좌표는 **프레임 원점(0,0) 기준 절대 좌표** + +## 계층 경로 → 절대 좌표 누적 + +``` +Frame 45:15 (0,0) +└─ Group 33:52 (0,0) → 누적 (0,0) + ├─ Group "오른쪽 하단" (0,129) → 누적 (0,129) + │ ├─ Group "기술" (0,0) → 누적 (0,129) + │ ├─ Group "사람" (715.04,0) → 누적 (715.04,129) + │ └─ Group "자연" (1429,0) → 누적 (1429,129) + ├─ Group "기술(디지털)" label (0,250) → 누적 (0,250) + ├─ Group "사람(역량)" label (715,294) → 누적 (715,294) + ├─ Group "자연(여건)" label (1429,294) → 누적 (1429,294) + ├─ TEXT "필수조건" (75,0) → 누적 (75,0) + └─ FRAME icon (0,13) → 누적 (0,13) +``` + +--- + +## STEP 1: 전체 Leaf 노드 목록 (절대 좌표) + +### 1-A. 타이틀 영역 + +| # | ID | 타입 | 이름/텍스트 | abs X | abs Y | W | H | 폰트 | 색상/fills | +|---|-----|------|-----------|-------|-------|---|---|------|-----------| +| 1 | 17:1395 | TEXT | **필수조건** | 75 | 0 | 984 | 98 | 700 70px lh1.448 | gradient(#000→#883700) + shadow(0 0 4px #322C1E) | +| 2 | 17:1399 | RECT(IMG) | 1자산 4@2x (아이콘) | 0 | 13 | 50 | 50 | — | imageRef: b0e9fad5... | + +### 1-B. 열1 "기술" (부모 abs: 0, 129) + +| # | ID | 타입 | 이름/텍스트 | abs X | abs Y | W | H | 비고 | +|---|-----|------|-----------|-------|-------|---|---|------| +| 3 | 17:1266 | RECT | 색상바 | 0 | 129 | 152.5 | 595 | gradient(#0D78D0→#023056) | +| 4 | 17:1267 | TEXT | 깊은 기반\n(건설산업, 토목) 지식 | 171.89 | 159.01 | 488 | 93.13 | 700 45px lh1 / gradient(#0D78D0→#134D7F) / stroke #FFF 1.5px | +| 5 | 17:1269 | TEXT | [4번과 동일 — 중복 노드] | 171.89 | 159.01 | 488 | 93.13 | 동일 위치, 동일 내용 → 렌더링 시 1개만 | +| 6 | 17:1270 | TEXT | [4번과 동일 — 중복 노드] | 171.89 | 159.01 | 488 | 93.13 | 동일 위치, 동일 내용 → 렌더링 시 1개만 | +| 7 | 17:1272 | TEXT | 건설단계별 근본적인 이해와\n경험이 기반된 높은 전문지식 보유 | 171.9 | 286.29 | 518.25 | 140 | 500 35px lh1.286 / #3E3523 / 부모 FRAME(171.9,286.29) 518.49×144.87 | +| 8 | 17:1268 | TEXT | 높은 S/W 기술\n(Digital Technology) | 171.89 | 451.34 | 488.38 | 93.13 | 700 45px lh1 / gradient(#0D78D0→#023056) / stroke #FFF 2px | +| 9 | 17:1274 | TEXT | 다양한 기술적도구(S/W,H/W)와\nProcess의 효과적인 통합 | 171.9 | 569.82 | 530.02 | 140 | 500 35px lh1.286 / #3E3523 / 부모 FRAME(171.9,569.82) 518.49×144.87 | +| 10 | 17:1281 | TEXT | **技** | 90.65 | 165.71 | 42.36 | 217.3 | 700 50px lh4.2 center / #FFF | +| 11 | 17:1280 | TEXT | **術** | 90.65 | 469.44 | 42.36 | 217.3 | 700 50px lh4.2 center / #FFF | +| 12 | 17:1275 | SVG | Vector 927 (상단 가로선) | 0 | 129 | 688.77 | 0 | stroke #000 2px solid | +| 13 | 17:1276 | SVG | Vector 928 (하단 가로선) | 0 | 722.97 | 688.77 | 0 | stroke #000 2px solid | +| 14 | 17:1277 | SVG | Vector 929 (중간 가로 점선) | 152.5 | 427.02 | 536.28 | 0 | stroke #000 2px dashed 4,4 | +| 15 | 17:1278 | SVG | Vector 931 (중간 짧은 점선) | 76.25 | 427.02 | 76.25 | 0 | stroke #84D1F4 2px dashed 4,4 | +| 16 | 17:1279 | SVG | Vector 930 (세로 점선) | 76.25 | 130.03 | 0 | 593.97 | stroke #84D1F4 2px dashed 4,4 | + +### 1-C. 열2 "사람" (부모 abs: 715.04, 129) + +| # | ID | 타입 | 이름/텍스트 | abs X | abs Y | W | H | 비고 | +|---|-----|------|-----------|-------|-------|---|---|------| +| 17 | 17:1298 | RECT | 색상바 | 715.04 | 129 | 152.5 | 595 | gradient(#FF9A23→#CC5200) | +| 18 | 17:1299 | TEXT | 분야별 전문지식\n역량을 갖춘 기술자 | 886.92 | 159.01 | 448.67 | 109.48 | 700 45px lh1 / gradient(#FE900C→#D18B37) / stroke #FFF 2px | +| 19 | 17:1302 | TEXT | 엔지니어의 Know-how와\n디지털지식이 융합된 지식의 축적 | 886.94 | 286.29 | 530.02 | 140 | 500 35px lh1.286 / #3E3523 | +| 20 | 17:1300 | TEXT | 디지털화 역량 및\n개발경험 많은 개발자 | 886.92 | 451.34 | 501.52 | 139.7 | 700 45px lh1 / gradient(#F58806→#CE7914) / stroke #FFF 2px | +| 21 | 17:1304 | TEXT | 다양한 형태의 Solution S/W\n개발 역량 Programmer | 886.94 | 569.76 | 530.02 | 140 | 500 35px lh1.286 / #3E3523 | +| 22 | 17:1311 | TEXT | **人** | 805.69 | 165.71 | 42.36 | 217.3 | 700 50px lh4.2 center / #FFF | +| 23 | 17:1310 | TEXT | **材** | 805.69 | 469.44 | 42.36 | 217.3 | 700 50px lh4.2 center / #FFF | +| 24 | 17:1305 | SVG | Vector 927 (상단 가로선) | 715.04 | 129 | 688.77 | 0 | stroke #000 2px solid | +| 25 | 17:1306 | SVG | Vector 928 (하단 가로선) | 715.04 | 722.97 | 688.77 | 0 | stroke #000 2px solid | +| 26 | 17:1307 | SVG | Vector 929 (중간 가로 점선) | 867.54 | 427.02 | 536.28 | 0 | stroke #000 2px dashed 4,4 | +| 27 | 17:1308 | SVG | Vector 931 (중간 짧은 점선) | 791.29 | 427.02 | 76.25 | 0 | stroke #FFF 2px dashed 4,4 | +| 28 | 17:1309 | SVG | Vector 930 (세로 점선) | 791.29 | 130.03 | 0 | 593.97 | stroke #FFF 2px dashed 4,4 | + +### 1-D. 열3 "자연" (부모 abs: 1429, 129) + +| # | ID | 타입 | 이름/텍스트 | abs X | abs Y | W | H | 비고 | +|---|-----|------|-----------|-------|-------|---|---|------| +| 29 | 17:1283 | RECT | 색상바 | 1429 | 129 | 152.5 | 595 | gradient(#39BE49 21%→#23742C) | +| 30 | 17:1284 | TEXT | 받아들일 수 있는\n사회·기업·제도 등의 여건 | 1600.89 | 159.01 | 522.24 | 93.13 | 700 45px lh1 / gradient(#3CA649 21%→#23742C) / stroke #FFF 2px | +| 31 | 17:1287 | TEXT | 목표설정형 지침에서 탈피하여\n수행사례, 효과검증을 통해 시행 | 1600.9 | 286.29 | 479.83 | 140 | 500 35px lh1.286 / #3E3523 | +| 32 | 17:1285 | TEXT | 지속적·장기적 투자를\n수행할 능력과 의지 | 1600.89 | 451.34 | 521.84 | 93.13 | 700 45px lh1 / gradient(#3CA649→#23742C) / stroke #FFF 2px | +| 33 | 17:1289 | TEXT | 기술 개발을 위한 대규모 투자 및 Process 혁신을 위한 지속적인 투자 | 1600.9 | 569.82 | 517.77 | 140 | 500 35px lh1.286 / #3E3523 | +| 34 | 17:1296 | TEXT | **天** | 1519.65 | 165.71 | 42.36 | 217.3 | 700 50px lh4.2 center / #FFF | +| 35 | 17:1295 | TEXT | **地** | 1519.65 | 469.44 | 42.36 | 217.3 | 700 50px lh4.2 center / #FFF | +| 36 | 17:1290 | SVG | Vector 927 (상단 가로선) | 1429 | 129 | 688.77 | 0 | stroke #000 2px solid | +| 37 | 17:1291 | SVG | Vector 928 (하단 가로선) | 1429 | 722.97 | 688.77 | 0 | stroke #000 2px solid | +| 38 | 17:1292 | SVG | Vector 929 (중간 가로 점선) | 1581.5 | 427.02 | 536.28 | 0 | stroke #000 2px dashed 4,4 | +| 39 | 17:1293 | SVG | Vector 931 (중간 짧은 점선) | 1505.25 | 427.02 | 76.25 | 0 | stroke #FFF 2px dashed 4,4 | +| 40 | 17:1294 | SVG | Vector 930 (세로 점선) | 1505.25 | 130.03 | 0 | 593.97 | stroke #FFF 2px dashed 4,4 | + +### 1-E. 세로 라벨 (열 위에 오버레이) + +#### "기술(디지털)" 라벨 그룹 (abs: 0, 250) + +| # | ID | 타입 | 텍스트 | abs X | abs Y | W | H | 비고 | +|---|-----|------|-------|-------|-------|---|---|------| +| 41 | 17:1375 | TEXT | 기\n술 | 17.79 | 250 | 37.03 | 120 | 700 50px lh1.2 center / #FFF | +| 42 | 17:1376 | TEXT | 디지털 | 17.79 | 398.05 | 37.03 | 180 | 700 50px lh1.2 center / #FFF | +| 43 | 17:1377 | TEXT | ( | 12 | 379 | 60 | 19 | 700 50px lh1.2 center / #FFF | +| 44 | 17:1378 | TEXT | ( | 0 | 584 | 60 | 19 | 700 50px lh1.2 center / #FFF | + +#### "사람(역량)" 라벨 그룹 (abs: 715, 294) + +| # | ID | 타입 | 텍스트 | abs X | abs Y | W | H | 비고 | +|---|-----|------|-------|-------|-------|---|---|------| +| 45 | 17:1380 | TEXT | 사\n람 | 732.83 | 294 | 37.03 | 120 | 700 50px lh1.2 center / #FFF | +| 46 | 17:1381 | TEXT | 역량 | 732.83 | 442 | 37.03 | 120 | 700 50px lh1.2 center / #FFF | +| 47 | 17:1382 | TEXT | ( | 727 | 423 | 60 | 19 | 700 50px lh1.2 center / #FFF | +| 48 | 17:1383 | TEXT | ( | 715 | 568 | 60 | 19 | 700 50px lh1.2 center / #FFF | + +#### "자연(여건)" 라벨 그룹 (abs: 1429, 294) + +| # | ID | 타입 | 텍스트 | abs X | abs Y | W | H | 비고 | +|---|-----|------|-------|-------|-------|---|---|------| +| 49 | 17:1385 | TEXT | 자연 | 1446.79 | 294 | 37.03 | 120 | 700 50px lh1.2 center / #FFF | +| 50 | 17:1386 | TEXT | 여건 | 1446.79 | 442 | 37.03 | 120 | 700 50px lh1.2 center / #FFF | +| 51 | 17:1387 | TEXT | ( | 1441 | 423 | 60 | 19 | 700 50px lh1.2 center / #FFF | +| 52 | 17:1388 | TEXT | ( | 1429 | 568 | 60 | 19 | 700 50px lh1.2 center / #FFF | + +--- + +## STEP 2: 패턴 분석 (bottom-up 그룹핑) + +### Level 0: 중복 제거 +- #5, #6 (17:1269, 17:1270)은 #4 (17:1267)와 동일 위치/내용 → **제거** (Figma 복사 흔적) +- 유효 leaf 노드: **50개** (52 - 2중복) + +### Level 1: 최소 단위 묶음 (2개씩) + +``` +[묶음 A] 항목 = 제목 + 설명 + A1: #4 "깊은 기반..." + #7 "건설단계별..." ← 기술/상단항목 + A2: #8 "높은 S/W..." + #9 "다양한 기술적도구..." ← 기술/하단항목 + A3: #18 "분야별..." + #19 "엔지니어의..." ← 사람/상단항목 + A4: #20 "디지털화..." + #21 "다양한 형태의..." ← 사람/하단항목 + A5: #30 "받아들일..." + #31 "목표설정형..." ← 자연/상단항목 + A6: #32 "지속적..." + #33 "기술 개발을..." ← 자연/하단항목 + +[묶음 B] 한자 쌍 + B1: #10 "技" + #11 "術" ← 기술 바 안 한자 + B2: #22 "人" + #23 "材" ← 사람 바 안 한자 + B3: #34 "天" + #35 "地" ← 자연 바 안 한자 + +[묶음 C] 테두리선 세트 (열당 5개) + C1: #12,#13,#14,#15,#16 ← 기술 열 선 + C2: #24,#25,#26,#27,#28 ← 사람 열 선 + C3: #36,#37,#38,#39,#40 ← 자연 열 선 + +[묶음 D] 세로 라벨 + D1: #41 "기\n술" + #42 "디지털" + #43,#44 괄호 ← 기술 라벨 + D2: #45 "사\n람" + #46 "역량" + #47,#48 괄호 ← 사람 라벨 + D3: #49 "자연" + #50 "여건" + #51,#52 괄호 ← 자연 라벨 +``` + +### Level 2: 중간 단위 (열 구성) + +``` +[열1 기술] = 색상바(#3) + 한자(B1) + 상단항목(A1) + 하단항목(A2) + 선(C1) + 라벨(D1) +[열2 사람] = 색상바(#17) + 한자(B2) + 상단항목(A3) + 하단항목(A4) + 선(C2) + 라벨(D2) +[열3 자연] = 색상바(#29) + 한자(B3) + 상단항목(A5) + 하단항목(A6) + 선(C3) + 라벨(D3) +``` + +### Level 3: 전체 블록 + +``` +[블록] = 타이틀(#1 "필수조건" + #2 아이콘) + 열1 + 열2 + 열3 +``` + +--- + +## STEP 3: 공통 타이포그래피 정리 + +| 용도 | 폰트 | 굵기 | 크기 | 행간 | 정렬 | +|------|------|------|------|------|------| +| 메인 타이틀 "필수조건" | Noto Sans KR | 700 | 70px | 1.448em | LEFT/TOP | +| 항목 제목 (그라데이션) | Noto Sans KR | 700 | 45px | 1em | LEFT/TOP | +| 항목 설명 (본문) | Noto Sans KR | 500 | 35px | 1.286em | LEFT/TOP | +| 한자 (바 안) | Noto Sans KR | 700 | 50px | 4.2em | CENTER | +| 세로 라벨 | Noto Sans KR | 700 | 50px | 1.2em | CENTER | + +## STEP 4: 공통 색상 정리 + +| 용도 | 색상 | +|------|------| +| 기술 바 | gradient(#0D78D0 → #023056) | +| 기술 제목 상단 | gradient(#0D78D0 → #134D7F) | +| 기술 제목 하단 | gradient(#0D78D0 → #023056) | +| 사람 바 | gradient(#FF9A23 → #CC5200) | +| 사람 제목 상단 | gradient(#FE900C → #D18B37) | +| 사람 제목 하단 | gradient(#F58806 → #CE7914) | +| 자연 바 | gradient(#39BE49 21% → #23742C) | +| 자연 제목 상단 | gradient(#3CA649 21% → #23742C) | +| 자연 제목 하단 | gradient(#3CA649 → #23742C) | +| 설명 텍스트 | #3E3523 | +| 흰색 (한자, 라벨, 스트로크) | #FFFFFF | +| 테두리 실선 | #000000 | +| 기술 열 세로/짧은점선 | #84D1F4 | +| 사람/자연 열 세로/짧은점선 | #FFFFFF | +| 타이틀 그라데이션 | gradient(#000 → #883700) | +| 타이틀 쉐도우 | 0 0 4px #322C1E | diff --git a/block-tests/frame_1171281211_flat.md b/block-tests/frame_1171281211_flat.md new file mode 100644 index 0000000..feb5cfc --- /dev/null +++ b/block-tests/frame_1171281211_flat.md @@ -0,0 +1,107 @@ +# Frame 1171281211 — BIM 3-Circles (건설산업의 목표) + +> 원본: 2062.205 × 956.998 px +> Scale: × 0.620694 → 1280 × 593.96 px (슬라이드 16:9 안에 배치) +> Node ID: 66:310 (Figma) +> 전략: CSS `transform: scale()` 균일 축소 → 내부는 Figma 원본 좌표계 유지 + +## 계층 경로 + +``` +Frame 66:310 "Frame 1171281211" (2062.21 × 956.998) +├─ 배경 이미지 64:244 "1자산 8@4x 1" (139, 683) 1768×274 mix-blend-multiply +├─ 데코 그룹 66:306 "Frame 1171281208" (71, 38) 685.48×836.28 rotate(-120°) +│ └─ 66:309 "Frame 1171281211" (inner) 763×351 scaleY(-1) +│ └─ 64:245 Rectangle 42333 763×351 rounded-bl/tl 175.5 linear-gradient +│ +├─ [메인 3원] 안전과 품질 (top) +│ ├─ 64:251 Ellipse 589 outer (853, 206) 350×350 linear #FDC69E→#E0782C plus-darker +│ ├─ 64:252 Ellipse 590 ring (887.06, 240.06) 280×280 (viewBox 310 inset -5.36%) +│ │ 3×linear orange + white 5px stroke + drop-shadow blur 5 +│ └─ 64:253 text "안전과 품질" center (1027.92, 387.53) w262.92 h114.08 +│ font 50 bold white lh 50 tracking -2.5 text-shadow 0 0 5 #cc5200 +│ +├─ [메인 3원] 생산성 향상 (bottom-left) +│ ├─ 64:247 Ellipse 591 outer (694, 480) 350×350 linear #D5AA89→#737373 plus-darker +│ ├─ 64:248 Ellipse 592 ring (728.06, 514.06) 280×280 (inset -3.57%) +│ │ linear #897445→#3E3523 + white 5px stroke +│ └─ 64:249 text "생산성 향상" center (868.92, 661.53) w262.92 h114.08 +│ +├─ [메인 3원] 소통과 신뢰 (bottom-right) +│ ├─ 64:255 Ellipse 585 outer (1009, 480) 350×350 linear white→#253E1F plus-darker +│ ├─ 64:256 Ellipse 586 ring (1043.06, 514.06) 280×280 (inset -3.57%) +│ │ linear #296B55→#123328 + white 5px stroke +│ └─ 64:257 text "소통과 신뢰" center (1185.09, 654.49) w262.92 h114.08 +│ +├─ [액센트 6개, 130.9 outer + 78.96 inner (viewBox 102.97 inset -15.2%) + 한자] +│ ├─ 64:288~290 安 outer (859, 22) / inner (884.47, 47.47) / text (875.25, 63.60) +│ ├─ 64:292~294 質 outer (1071, 22) / inner (1096.47, 47.47)/ text (1087.25, 63.60) +│ ├─ 64:279~281 速 outer (555, 483) / inner (580.47, 508.47)/ text (571.25, 524.60) +│ ├─ 64:283~285 利 outer (555, 689) / inner (580.47, 714.47)/ text (571.25, 730.60) +│ ├─ 64:296~298 通 outer (1372, 483)/ inner (1397.47, 508.47)/ text (1388.25, 524.60) +│ └─ 64:300~302 信 outer (1372, 689)/ inner (1397.47, 714.47)/ text (1388.25, 730.60) +│ outer: yellow-orange 탑(安質) / khaki 좌(速利) / green 우(通信), plus-darker 0.3 +│ inner: 3×orange(安質) / dark khaki(速利) / dark green(通信) + white 2px stroke + drop-shadow +│ 한자: font 45 bold white lh 50 tracking -2.25 text-shadow 0 0 5 #cc5200 +│ +├─ [연결 아크 3개, PNG] +│ ├─ 64:276 Ellipse 599 wrapper (926, 134) 209×99 rotate(180) [안-질 사이] +│ ├─ 64:277 Ellipse 597 wrapper (627, 549) 99×209 ← 209×99 rot90 [速利 쪽 아크] +│ └─ 64:286 Ellipse 600 wrapper (1329, 549) 99×209 ← 209×99 rot-90 [通信 쪽 아크] +│ +└─ [텍스트 라벨 12개] + # 상단 (top=0, font 40 bold #cc5200 lh95 + desc font 30 medium #525151 lh35) + ├─ 64:275 "안전성 제고" (645, 0) w194 h95 text-right + ├─ 64:274 "시설물의..." (331, 78) w508.48 h91 text-right (2줄) + ├─ 64:272 "품질 향상" (1233, 0) w157 h95 text-right + ├─ 64:271 "Copy&Paste..." (1233, 78) w508.48 h91 text-left (2줄) + # 좌측 (font 40 bold #604f32 + desc #525151) + ├─ 64:266 "신속ㆍ정확성 증진" (0, 456) w531.39 h95.35 text-right + ├─ 64:265 "Analogue..." (52.01, 546) w478.73 h70.56 text-right (2줄) + ├─ 64:269 "비용저감ㆍ부가가치 창출" (84.67, 661.79) w446.05 h96.42 text-right (flex-center) + ├─ 64:268 "건설비용..." (102.02, 734) w428.31 h91.34 text-right (2줄, flex-center) + # 우측 (font 40 bold #124133 + desc #525151) + ├─ 64:263 "소통ㆍ이해 원할" (1518, 456) w267.02 h95 text-left + ├─ 64:262 "성과품..." (1518, 541) w429.01 text-left (2줄) + ├─ 64:260 "신뢰ㆍ투명성 강화" (1518, 664) w304.02 h95 text-left + └─ 64:259 "3D 모델..." (1518, 754.21) w544.2 h70.56 text-left (2줄, flex-center) +``` + +## 이상 탐지 결과 (STEP 3) + +| 검사 | 결과 | +|------|------| +| 회전 단일문자 (bbox반전) | 없음 — 한자 6개는 98.33×42.67로 가로 > 세로 정상 | +| 좁은 박스 세로배치 | 없음 | +| 중복 노드 (동일 좌표+내용) | 없음 | +| 특수 line-height | desc 2줄 lh=35 on font 30 → Noto content_area(1.448) 초과 불가, descender 5px 클리핑 위험 → padding-bottom 5px 보정 | +| Vector 좌표 이상 | 64:276/64:277/64:286 arc의 metadata bbox와 React wrapper bbox 불일치 → **React wrapper 좌표 신뢰** (Figma 회전 변환이 반영된 렌더 좌표) | + +## 스케일 계산 (STEP 5) + +``` +Scale = 1280 / 2062.205 = 0.6206940... +블록 높이 = 956.998 × 0.6206940 = 593.96 px +``` + +**구현 방식:** CSS `transform: scale(0.620694)`로 내부 컨테이너 균일 축소. +모든 내부 요소는 Figma 원본 좌표계(px)를 그대로 사용. 폰트/여백/그림자 모두 비율대로 축소됨. + +## 에셋 (assets/frame_1171281211/) + +| 파일 | 용도 | 원본 크기 | +|------|------|---------| +| bg_texture.png | 배경 텍스처 (mix-blend-multiply) | 1768×274 | +| arc_top.png | 안-질 연결 아크 | 209×99 | +| arc_side.png | 좌/우 연결 아크 (양쪽 공용) | 209×99 | +| big_fill_safety.svg / big_ring_safety.svg | 안전과 품질 베이스/링 | 350 / 310 | +| big_fill_productivity.svg / big_ring_productivity.svg | 생산성 향상 베이스/링 | 350 / 300 | +| big_fill_trust.svg / big_ring_trust.svg | 소통과 신뢰 베이스/링 | 350 / 300 | +| acc_outer_safety.svg | 안/질 액센트 outer (노랑→오렌지) | 130.9 | +| acc_outer_speed.svg | 속/리 액센트 outer (탠→그레이) | 130.9 | +| acc_outer_comm.svg | 통/신 액센트 outer (다크그린) | 130.9 | +| acc_inner_safety.svg | 安 inner (오렌지) | 102.97 | +| acc_inner_quality.svg | 質 inner (오렌지) | 102.97 | +| acc_inner_speed.svg | 速 inner (다크 카키) | 102.97 | +| acc_inner_profit.svg | 利 inner (다크 카키) | 102.97 | +| acc_inner_comm.svg | 通/信 inner (다크 그린) | 102.97 | diff --git a/block-tests/headers_section-header-bar.html b/block-tests/headers_section-header-bar.html new file mode 100644 index 0000000..313b7d8 --- /dev/null +++ b/block-tests/headers_section-header-bar.html @@ -0,0 +1,83 @@ + + +headers/section-header-bar + +
+ +
+
Eng. S/W의 구성
+
Engineering Software Components
+
+ +
\ No newline at end of file diff --git a/block-tests/headers_section-title-with-bg.html b/block-tests/headers_section-title-with-bg.html new file mode 100644 index 0000000..276d52b --- /dev/null +++ b/block-tests/headers_section-title-with-bg.html @@ -0,0 +1,123 @@ + + + + +headers/section-title-with-bg + + +
+ +
+ + + + +
건설산업에서의 디지털전환 › BIM
+ +
+
Building Information Modeling
+
건설정보모델링(BIM)
+
+
+ +
+ \ No newline at end of file diff --git a/block-tests/headers_topic-center.html b/block-tests/headers_topic-center.html new file mode 100644 index 0000000..6e0afe5 --- /dev/null +++ b/block-tests/headers_topic-center.html @@ -0,0 +1,91 @@ + +headers/topic-center +
+ +
+
디지털전환을 위한 +S/W 필요성
+
Software Requirements for DX
+
건설산업의 DX를 실현하기 위해서는 기존 상용 S/W의 한계를 넘어 +전문·전용 소프트웨어의 개발과 도입이 필수적입니다.
+
+ +
\ No newline at end of file diff --git a/block-tests/headers_topic-left-right.html b/block-tests/headers_topic-left-right.html new file mode 100644 index 0000000..c3cbd19 --- /dev/null +++ b/block-tests/headers_topic-left-right.html @@ -0,0 +1,95 @@ + + + + +headers/topic-left-right + + +
+ +
+
단순 BIM의 적용이 +D/X가 아닙니다
+
BIM은 건설산업의 디지털전환을 수행하는 과정에서 가장 기초가 되는 일부분임을 인지하는 것이 매우 중요합니다.
+
+ +
+ \ No newline at end of file diff --git a/block-tests/headers_topic-numbered.html b/block-tests/headers_topic-numbered.html new file mode 100644 index 0000000..536b56d --- /dev/null +++ b/block-tests/headers_topic-numbered.html @@ -0,0 +1,105 @@ + +headers/topic-numbered +
+ +
+
+
1
+
건설산업의 디지털전환(DX)
+
+
+
건설산업은 디지털 기술의 발전에 따라 빠르게 변화하고 있으며, 생산성 향상과 안전성 강화를 목표로 디지털전환이 가속화되고 있습니다.
+
+ +
\ No newline at end of file diff --git a/block-tests/image-row.html b/block-tests/image-row.html new file mode 100644 index 0000000..a626d25 --- /dev/null +++ b/block-tests/image-row.html @@ -0,0 +1,120 @@ + + + + +블록 테스트: image-row + + + +
+ + +
+ +
+ 현장1 + +
+ +
+ 현장2 + +
+ +
+ + +
+ + \ No newline at end of file diff --git a/block-tests/media_image-before-after.html b/block-tests/media_image-before-after.html new file mode 100644 index 0000000..b3c18de --- /dev/null +++ b/block-tests/media_image-before-after.html @@ -0,0 +1,108 @@ + +media/image-before-after +
+ +
+
+
기존 방식
+ before +
+
→
+
+
DX 적용 후
+ after +
+
+
건설 현장의 디지털 전환 전후 비교
+ +
\ No newline at end of file diff --git a/block-tests/media_image-full-caption.html b/block-tests/media_image-full-caption.html new file mode 100644 index 0000000..da7dd90 --- /dev/null +++ b/block-tests/media_image-full-caption.html @@ -0,0 +1,80 @@ + +media/image-full-caption +
+ +
+ 건설 현장 전경 +
[사진] 인프라 건설 현장 전경 — 디지털 전환의 현장 적용
+
+ +
\ No newline at end of file diff --git a/block-tests/media_image-grid-2x2.html b/block-tests/media_image-grid-2x2.html new file mode 100644 index 0000000..c2a4f68 --- /dev/null +++ b/block-tests/media_image-grid-2x2.html @@ -0,0 +1,111 @@ + + + + +media/image-grid-2x2 + + +
+ +
+ +
+ 현장1 +
항공측량 데이터
+
+ +
+ 현장2 +
시공 현장
+
+ +
+ 설계 +
3D 지형 모델
+
+ +
+ 시공 +
시공 BIM 모델
+
+ +
+ +
+ \ No newline at end of file diff --git a/block-tests/media_image-row-2col.html b/block-tests/media_image-row-2col.html new file mode 100644 index 0000000..6e4df59 --- /dev/null +++ b/block-tests/media_image-row-2col.html @@ -0,0 +1,100 @@ + + + + +media/image-row-2col + + +
+ +
+ +
+ 시공 현장 1 + +
+ +
+ 시공 현장 2 + +
+ +
+ +
+ \ No newline at end of file diff --git a/block-tests/media_image-side-text.html b/block-tests/media_image-side-text.html new file mode 100644 index 0000000..81c8499 --- /dev/null +++ b/block-tests/media_image-side-text.html @@ -0,0 +1,130 @@ + + + + +media/image-side-text + + +
+ +
+
+ 3D 지형 모델 +
+
+
고도화된 BIM 설계
+
최첨단 디지털트윈 기술을 활용하여 시뮬레이션 분석 및 성능평가를 수행합니다.
+ +
    + +
  • 3D 지형 모델 기반 설계
    • + +
  • 시뮬레이션 분석 & 성능평가
    • + +
  • 지속가능한 인프라 개발
    • + +
+ +
+
+ +
+ \ No newline at end of file diff --git a/block-tests/prerequisites-3col.html b/block-tests/prerequisites-3col.html new file mode 100644 index 0000000..8a5bd6b --- /dev/null +++ b/block-tests/prerequisites-3col.html @@ -0,0 +1,265 @@ + + + + + +필수조건 3열 비교 블록 (LEGACY) + + + + + + + +
+
+ + + + +
+
+
+
+
+
+
+ 技 + 術 + 기
술 + 디
지
털 + ( + ( +
깊은 기반
(건설산업, 토목) 지식
+
건설단계별 근본적인 이해와
경험이 기반된 높은 전문지식 보유
+
높은 S/W 기술
(Digital Technology)
+
다양한 기술적도구(S/W,H/W)와
Process의 효과적인 통합
+
+ + +
+
+
+
+
+
+
+ 人 + 材 + 사
람 + 역
량 + ( + ( +
분야별 전문지식
역량을 갖춘 기술자
+
엔지니어의 Know-how와
디지털지식이 융합된 지식의 축적
+
디지털화 역량 및
개발경험 많은 개발자
+
다양한 형태의 Solution S/W
개발 역량 Programmer
+
+ + +
+
+
+
+
+
+
+ 天 + 地 + 자
연 + 여
건 + ( + ( +
받아들일 수 있는
사회·기업·제도 등의 여건
+
목표설정형 지침에서 탈피하여
수행사례, 효과검증을 통해 시행
+
지속적·장기적 투자를
수행할 능력과 의지
+
기술 개발을 위한 대규모 투자 및
Process 혁신을 위한 지속적인 투자
+
+ +
+
+ + + diff --git a/block-tests/quote-block.html b/block-tests/quote-block.html new file mode 100644 index 0000000..ff957b4 --- /dev/null +++ b/block-tests/quote-block.html @@ -0,0 +1,105 @@ + + + + +블록 테스트: quote-block + + + +
+ +
+
BIM은 건설산업의 디지털전환을 수행하는 과정에서 가장 기초가 되는 일부분이다
+
건설산업 BIM 기본지침, 국토교통부, 2020
+
+ + +
+ + \ No newline at end of file diff --git a/block-tests/section-title.html b/block-tests/section-title.html new file mode 100644 index 0000000..4b09758 --- /dev/null +++ b/block-tests/section-title.html @@ -0,0 +1,143 @@ + + + + +블록 테스트: section-title + + + +
+ + +
+ + + + +
건설산업에서의 디지털전환 › BIM
+ +
+
Building Information Modeling
+
건설정보모델링(BIM)
+
+
+ + +
+ + \ No newline at end of file diff --git a/block-tests/tables_compare-2col-split.html b/block-tests/tables_compare-2col-split.html new file mode 100644 index 0000000..0b29762 --- /dev/null +++ b/block-tests/tables_compare-2col-split.html @@ -0,0 +1,141 @@ + +tables/compare-2col-split +
+ +
+
+
GIS
+
구분
+
BIM
+
+ +
+
지리적 데이터를 +공간 분석하여 시각적 표현
+
개념
+
3D 모델 기반 +건설 정보 통합 관리
+
+ +
+
Surface Shape 분석 +지형/지질 해석
+
분석
+
Object Shape 분석 +구조/설비 해석
+
+ +
+
GIS, 지도, 배치도
+
도면
+
CAD, BIM 모델
+
+ +
+
GIS ↔ SPCC
+
발전
+
CAD → BIM
+
+ +
+ +
\ No newline at end of file diff --git a/block-tests/tables_compare-3col-badge.html b/block-tests/tables_compare-3col-badge.html new file mode 100644 index 0000000..2b1d598 --- /dev/null +++ b/block-tests/tables_compare-3col-badge.html @@ -0,0 +1,219 @@ + + + + +tables/compare-3col-badge + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ BIM + + VS + + D/X +
• Only 3DBIM · D/X• BIM ≪ D/X (ENG. + Management 포함)
• 모델 제작용 상용 S/W +(Civil 3D, Revit, Navisworks)S/W• 제작 및 운영(상용 + 전용 40~80개) +[Rhino, Sketchup, Blender...]
• 기존 2D 설계방식 유지프로세스• 근본적 문제의식을 통한 개선
• 3D 모델 중심 +• 기존 성과품 유지성과물• 공학 정보 및 콘텐츠 연계에 집중 +• 도면, 수량, 시공계획 등 일식
• 3D 모델에 의한 일반적 이해 향상활용• 설계/시공의 혁신(개념의 재정립)
• (설계/시공/운영) 분야별 단절확장성• 전 생애주기 활용 시스템
+
+ +
+ \ No newline at end of file diff --git a/block-tests/tables_table-simple-striped.html b/block-tests/tables_table-simple-striped.html new file mode 100644 index 0000000..e811cf2 --- /dev/null +++ b/block-tests/tables_table-simple-striped.html @@ -0,0 +1,154 @@ + +tables/table-simple-striped +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
구분현재목표비고
BIM 적용률30%100%2025 목표
디지털 전환 수준초기고도화단계적 추진
전문 인력50명220명+IT+CIVIL
자체 S/W5개80개+지속 개발
+
+ +
\ No newline at end of file diff --git a/block-tests/topic-header.html b/block-tests/topic-header.html new file mode 100644 index 0000000..947c98f --- /dev/null +++ b/block-tests/topic-header.html @@ -0,0 +1,115 @@ + + + + +블록 테스트: topic-header + + + +
+ + +
+
단순 BIM의 적용이 +D/X가 아닙니다
+
BIM은 건설산업의 디지털전환을 수행하는 과정에서 가장 기초가 되는 일부분임을 인지하는 것이 매우 중요합니다.
+
+ + +
+ + \ No newline at end of file diff --git a/block-tests/visuals_circle-gradient.html b/block-tests/visuals_circle-gradient.html new file mode 100644 index 0000000..aa37107 --- /dev/null +++ b/block-tests/visuals_circle-gradient.html @@ -0,0 +1,113 @@ + + + + +visuals/circle-gradient + + +
+ +
+
+
+
단계별 +BIM의 활용
+ +
+
+
+ +
+ \ No newline at end of file diff --git a/block-tests/visuals_compare-pill-pair.html b/block-tests/visuals_compare-pill-pair.html new file mode 100644 index 0000000..ce2dfe8 --- /dev/null +++ b/block-tests/visuals_compare-pill-pair.html @@ -0,0 +1,131 @@ + + + + +visuals/compare-pill-pair + + +
+ +
+
+
+
+
디지털 기술을 활용한 +협업 프로세스
+ +
+
+
+
VS
+
+
+
+
시설물의 전 생애주기 동안 +정보의 생성 및 관리
+ +
+
+
+
+ +
+ \ No newline at end of file diff --git a/block-tests/visuals_flow-arrow-horizontal.html b/block-tests/visuals_flow-arrow-horizontal.html new file mode 100644 index 0000000..ee893d5 --- /dev/null +++ b/block-tests/visuals_flow-arrow-horizontal.html @@ -0,0 +1,104 @@ + +visuals/flow-arrow-horizontal +
+ +
+ + + + + GIS + + + + + + + + + SPCC + + + + + + + + + 토공 + + + + + + + + + BIM + + + + +
+ +
\ No newline at end of file diff --git a/block-tests/visuals_keyword-circle-row.html b/block-tests/visuals_keyword-circle-row.html new file mode 100644 index 0000000..cba9363 --- /dev/null +++ b/block-tests/visuals_keyword-circle-row.html @@ -0,0 +1,153 @@ + +visuals/keyword-circle-row +
+ +
+ +
+ + + + + + + + + G + +
Geographic
+
지리적 위치 +공간 정보
+
+ +
+ + + + + + + + + S + +
Structure
+
구조물 +형상 정보
+
+ +
+ + + + + + + + + I + +
Information
+
건설 정보 +속성 데이터
+
+ +
+ + + + + + + + + M + +
Model
+
3D 모델 +통합 관리
+
+ +
+ +
\ No newline at end of file diff --git a/block-tests/visuals_layer-diagram.html b/block-tests/visuals_layer-diagram.html new file mode 100644 index 0000000..e4e131b --- /dev/null +++ b/block-tests/visuals_layer-diagram.html @@ -0,0 +1,134 @@ + +visuals/layer-diagram +
+ +
+
건설산업 DX 기술 레이어
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Digital Twin (가상환경) + + + + + + BIM (건설정보모델링) + + + + + + GIS (공간정보시스템) + + + + + + 실세계 인프라 + + +
+ +
\ No newline at end of file diff --git a/block-tests/visuals_process-horizontal.html b/block-tests/visuals_process-horizontal.html new file mode 100644 index 0000000..46e1d22 --- /dev/null +++ b/block-tests/visuals_process-horizontal.html @@ -0,0 +1,142 @@ + + + + +visuals/process-horizontal + + +
+
+ +
+
1
+
요구사항 분석
+
목표 수립
+
+ +
→
+ + +
+
2
+
S/W 개발
+
솔루션 개발
+
+ +
→
+ + +
+
3
+
System 통합
+
데이터 통합
+
+ +
→
+ + +
+
4
+
교육/피드백
+
지속 개선
+
+ + +
+ +
+ \ No newline at end of file diff --git a/block-tests/visuals_pyramid-hierarchy.html b/block-tests/visuals_pyramid-hierarchy.html new file mode 100644 index 0000000..cd6dfdd --- /dev/null +++ b/block-tests/visuals_pyramid-hierarchy.html @@ -0,0 +1,121 @@ + +visuals/pyramid-hierarchy +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + DX (디지털 전환) + + + + + + BIM + GIS + Digital Twin + + + + + + 프로세스 혁신 + S/W 개발 + + + + + + 기반 인프라 + 인력 양성 + + +
+ +
\ No newline at end of file diff --git a/block-tests/visuals_timeline-horizontal.html b/block-tests/visuals_timeline-horizontal.html new file mode 100644 index 0000000..42efa82 --- /dev/null +++ b/block-tests/visuals_timeline-horizontal.html @@ -0,0 +1,113 @@ + +visuals/timeline-horizontal +
+ +
+ + + + + + + + + + 2020 + + BIM 기본지침 + + + + + + + + 2022 + + 스마트건설 방안 + + + + + + + + 2023 + + 7차 기본계획 + + + + + + + + 2025 + + 전면 BIM + + + +
+ +
\ No newline at end of file diff --git a/block-tests/visuals_timeline-vertical.html b/block-tests/visuals_timeline-vertical.html new file mode 100644 index 0000000..82d64d5 --- /dev/null +++ b/block-tests/visuals_timeline-vertical.html @@ -0,0 +1,167 @@ + +visuals/timeline-vertical +
+ +
+ +
+
+ + + + +
+
+
+
2020
+
건설산업 BIM 기본지침
+
BIM 도입의 법적 근거 마련
+
+
+ +
+
+ + + + +
+
+
+
2022.07
+
스마트 건설 활성화 방안
+
BIM 전면 도입 + 전문인력 양성
+
+
+ +
+
+ + + + +
+
+
+
2023.12
+
제7차 건설기술진흥 기본계획
+
디지털 전환을 통한 스마트 건설 확산
+
+
+ +
+
+ + + + + +
+
+
2025
+
전면 BIM 적용
+
공공 건설사업 BIM 의무화 목표
+
+
+ +
+ +
\ No newline at end of file diff --git a/block-tests/visuals_venn-2items-p2.html b/block-tests/visuals_venn-2items-p2.html new file mode 100644 index 0000000..d05acf0 --- /dev/null +++ b/block-tests/visuals_venn-2items-p2.html @@ -0,0 +1,151 @@ + +venn-2items +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + BIM + + + + + GIS + + + + Digital Transformation + DX (2개) + + + + + +
2개 요소의 기술 융합 구조
+ +
+ +
\ No newline at end of file diff --git a/block-tests/visuals_venn-3items-p2.html b/block-tests/visuals_venn-3items-p2.html new file mode 100644 index 0000000..271d8d0 --- /dev/null +++ b/block-tests/visuals_venn-3items-p2.html @@ -0,0 +1,161 @@ + +venn-3items +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + GIS + + + + + BIM + + + + + DT + + + + Digital Transformation + DX (3개) + + + + + +
3개 요소의 기술 융합 구조
+ +
+ +
\ No newline at end of file diff --git a/block-tests/visuals_venn-3items.html b/block-tests/visuals_venn-3items.html new file mode 100644 index 0000000..5a5807a --- /dev/null +++ b/block-tests/visuals_venn-3items.html @@ -0,0 +1,165 @@ + + + + +venn-3items + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + GIS + + + BIM + + + DT + + + + 건설산업의 DX + + Digital Transformation + + + + +
건설산업의 DX는 GIS, BIM, 디지털 트윈의 기술 융합을 통해서만 실현 가능
+ +
+ +
+ \ No newline at end of file diff --git a/block-tests/visuals_venn-4items-p2.html b/block-tests/visuals_venn-4items-p2.html new file mode 100644 index 0000000..c40833b --- /dev/null +++ b/block-tests/visuals_venn-4items-p2.html @@ -0,0 +1,171 @@ + +venn-4items +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 설계 + + + + + 시공 + + + + + 유지관리 + + + + + 운영 + + + + Digital Transformation + DX (4개) + + + + + +
4개 요소의 기술 융합 구조
+ +
+ +
\ No newline at end of file diff --git a/block-tests/visuals_venn-4items.html b/block-tests/visuals_venn-4items.html new file mode 100644 index 0000000..bf0a6e2 --- /dev/null +++ b/block-tests/visuals_venn-4items.html @@ -0,0 +1,175 @@ + + + + +venn-4items + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 설계 + + + 시공 + + + 유지관리 + + + 운영 + + + + 생애주기 + + Life Cycle + + + + +
설계 → 시공 → 유지관리 → 운영의 전 생애주기 관리
+ +
+ +
+ \ No newline at end of file diff --git a/block-tests/visuals_venn-5items-p2.html b/block-tests/visuals_venn-5items-p2.html new file mode 100644 index 0000000..8f25446 --- /dev/null +++ b/block-tests/visuals_venn-5items-p2.html @@ -0,0 +1,181 @@ + +venn-5items +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 기술 + + + + + S/W + + + + + 인력 + + + + + 여건 + + + + + 투자 + + + + Digital Transformation + DX (5개) + + + + + +
5개 요소의 기술 융합 구조
+ +
+ +
\ No newline at end of file diff --git a/block-tests/visuals_venn-5items.html b/block-tests/visuals_venn-5items.html new file mode 100644 index 0000000..d8364d0 --- /dev/null +++ b/block-tests/visuals_venn-5items.html @@ -0,0 +1,185 @@ + + + + +venn-5items + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 기술기반 + + + S/W + + + 인력 + + + 여건 + + + 투자 + + + + DX 성공 요건 + + 5대 필수 요건 + + + + +
디지털 전환 성공을 위해 기술, S/W, 인력, 여건, 투자 5가지 요건이 필요
+ +
+ +
+ \ No newline at end of file diff --git a/block-tests/visuals_venn-7items-p2.html b/block-tests/visuals_venn-7items-p2.html new file mode 100644 index 0000000..27b139c --- /dev/null +++ b/block-tests/visuals_venn-7items-p2.html @@ -0,0 +1,201 @@ + +venn-7items +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + GIS + + + + + BIM + + + + + DT + + + + + IoT + + + + + AI + + + + + Cloud + + + + + Robot + + + + Digital Transformation + DX (7개) + + + + + +
7개 요소의 기술 융합 구조
+ +
+ +
\ No newline at end of file diff --git a/block-tests/visuals_venn-diagram.html b/block-tests/visuals_venn-diagram.html new file mode 100644 index 0000000..2339424 --- /dev/null +++ b/block-tests/visuals_venn-diagram.html @@ -0,0 +1,172 @@ + + + + +venn-diagram + + +
+ +
+
+ + + + +
+
건설산업의 DX
+
Digital Transformation
+
+ +
+ +
GIS
+ +
BIM
+ +
DT
+ +
+
+ + +
건설산업의 DX는 GIS, BIM, 디지털 트윈의 기술 융합을 통해서만 실현 가능
+ +
+ +
+ \ No newline at end of file diff --git a/block-tests/visuals_venn-premium.html b/block-tests/visuals_venn-premium.html new file mode 100644 index 0000000..27f3518 --- /dev/null +++ b/block-tests/visuals_venn-premium.html @@ -0,0 +1,104 @@ + + + + +venn-premium v6 + + + +
+
+
+ +
+
Digital Transformation
+
디지털 전환(D/X)
+
+
+
Digital Twin
+
(Metaverse)
+
+
+
BIM
+
+
+
GIS
+
+
+
건설산업의 DX는 GIS, BIM, 디지털 트윈의 기술 융합을 통해서만 실현 가능
+
+
+ + \ No newline at end of file diff --git a/block-tests/visuals_venn-svg-premium.html b/block-tests/visuals_venn-svg-premium.html new file mode 100644 index 0000000..3c49b3c --- /dev/null +++ b/block-tests/visuals_venn-svg-premium.html @@ -0,0 +1,121 @@ + + + + +venn SVG premium test + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Digital Transformation + 디지털 전환(D/X) + + + Digital Twin + (Metaverse) + + + BIM + + + GIS + + +
건설산업의 DX는 GIS, BIM, 디지털 트윈의 기술 융합을 통해서만 실현 가능
+ +
+ + \ No newline at end of file diff --git a/blocks_index.md b/blocks_index.md new file mode 100644 index 0000000..33e0151 --- /dev/null +++ b/blocks_index.md @@ -0,0 +1,254 @@ +# 변환 완료 블록 도서관 + +> 변환된 모든 블록의 1줄 요약 + 변형 가능 축. **새 변환 시작 전 (PROCESS.md STEP 0-A) 이 파일을 먼저 읽어** 지난 패턴과 비교한다. +> +> 패턴이 **2번째** 등장하는 순간 → `templates_staging/` 에 Jinja2 추출. 그 다음 사용자가 검수 후 design_agent 본체로 프로모션. + +--- + +## 사용 방법 + +``` +새 프레임 변환 시작: + STEP 0-A. 이 파일 읽기 (필수) + ↓ + STEP 0-C. 첫 metadata/screenshot 후 비교 + ↓ + 비슷한 구조 발견 → 두 번째 → templates_staging/ 로 Jinja2 추출 + 비슷한 구조 없음 → 일반 변환 → 새 행 추가 +``` + +## 컬럼 의미 + +| 컬럼 | 의미 | +|------|------| +| slug | block-tests/{slug}.html 파일명 | +| frame | Figma 노드 ID + 이름 | +| size | 원본 W×H px | +| pattern | 구조적 패턴 (사이클/비교/카드/표/...) | +| 변형 축 | 템플릿화 시 파라미터가 될 것들 (1줄) | +| 상태 | static / staged / promoted | +| date | 변환 날짜 | + +**상태 의미:** +- `static`: block-tests/ 정적 변환물만 존재 (Stage 1) +- `staged`: templates_staging/ 에 Jinja2 템플릿 작성됨 (Stage 2, 사용자 검수 대기) +- `promoted`: 사용자가 design_agent/templates/ 본체로 이전 + catalog.yaml 등록 완료 + +--- + +## 변환 완료 (현행 방법론) + +| slug | frame | size | pattern | 상태 | date | +|------|-------|------|---------|------|------| +| [bim-goals-3circles](block-tests/bim-goals-3circles.html) | 66:310 / Frame 1171281211 | 2062×957 | cycle-3way-intersect | **promoted** → [block](../../templates/blocks/new/cycle-3way-intersect.html) + [catalog](../../templates/catalog.yaml) | 2026-04-13 | +| [bim-3roles-cards](block-tests/bim-3roles-cards.html) | 45:16 / Frame 1171281191 | 2601×1927 | cards-3col-persona | **promoted** → [block](../../templates/blocks/new/cards-3col-persona.html) + [catalog](../../templates/catalog.yaml) | 2026-04-13 | +| [bim-future-statement](block-tests/bim-future-statement.html) | 51:170 / Frame 1171281207 | 3547×163 | statement-pill-highlight | **promoted** → [block](../../templates/blocks/new/statement-pill-highlight.html) + [catalog](../../templates/catalog.yaml) | 2026-04-13 | +| [bim-vs-dx-table](block-tests/bim-vs-dx-table.html) | 45:20 / Frame 1171281195 | 1868×1908 | compare-vs-rows | **promoted** → [block](../../templates/blocks/new/compare-vs-rows.html) + [catalog](../../templates/catalog.yaml) | 2026-04-13 | +| [bim-issues-quadrant](block-tests/bim-issues-quadrant.html) | 45:18 / Frame 1171281193 | 2226×1766 | quadrant-2x2-issues | **promoted** → [block](../../templates/blocks/new/quadrant-2x2-issues.html) + [catalog](../../templates/catalog.yaml) | 2026-04-13 | +| [bim-issues-paired](block-tests/bim-issues-paired.html) | 45:19 / Frame 1171281194 | 1857×1326 | issues-paired-rows | **promoted** → [block](../../templates/blocks/new/issues-paired-rows.html) + [catalog](../../templates/catalog.yaml) | 2026-04-13 | +| [bim-info-products](block-tests/bim-info-products.html) | 45:5 / Frame 1171281180 | 1153×592 | stacked-arrow-list | **promoted** → [block](../../templates/blocks/new/stacked-arrow-list.html) + [catalog](../../templates/catalog.yaml) | 2026-04-13 | +| [bim-sw-overview](block-tests/bim-sw-overview.html) | 45:27 / Frame 1171281202 | 1863×834 | split-panel-numbered | **promoted** → [block](../../templates/blocks/new/split-panel-numbered.html) + [catalog](../../templates/catalog.yaml) | 2026-04-13 | + +### 변형 축 + 슬롯 옵션 (각 변환물 상세) + +#### bim-goals-3circles +``` +circles[3] (required) + ├─ label (required) + ├─ gradient_from / gradient_to (required) + └─ accents[N=0~3] (optional) + └─ char (한자/문자) + color +side_labels[N=0~12] (optional) ← 라벨 없는 mdx도 가능 +arcs[3] (optional, 곡선 PNG) +deco_gradient (optional) +bg_texture (optional) +``` +Sub-patterns: 없음 (특수 패턴, 재사용성 낮음) + +#### bim-3roles-cards +``` +columns[N=2~4] (required) + ├─ role_label (required, 2-line: ["역할", "목표"]) + ├─ role_color (required) + ├─ badge (required) + │ ├─ outer_image (required) + │ └─ inner_image (required) + ├─ bg_image (required) + ├─ overlay_image (required) + ├─ bullet_items[N=1~12] (required, 한 줄당 1개 sentence) + └─ bottom_photo (optional) ← 사진 없는 mdx도 이 블록 매칭 가능 +``` +Sub-patterns: **bullet-list-with-marker (R13)** — 각 컬럼의 bullet_items 영역 + +--- + +## 패턴 카탈로그 (전체 블록 단위) + +| pattern_id | 설명 | 등장 횟수 | 변환물 | 템플릿화 | +|-----------|------|---------|--------|---------| +| cycle-3way-intersect | 3개 큰 원이 교차하며 사이드 라벨 + 한자 액센트 | 1 | bim-goals-3circles | **✓ templates_staging/cycle-3way-intersect.html.j2** (1 example 검증) | +| cards-3col-persona | N stakeholder 세로 카드 (BG 사진 + 오버레이 + 원형 뱃지 + bullet list + optional 하단 사진) | 1 | bim-3roles-cards | **✓ templates_staging/cards-3col-persona.html.j2** (2 examples 검증: 사진 있음/없음) | +| statement-pill-highlight | 단일 line 메시지 banner. pill 모양 + optional bg image + inline highlighted span | 1 | bim-future-statement | **✓ templates_staging/statement-pill-highlight.html.j2** | +| compare-vs-rows | N개 카테고리 비교 표. 각 행 = 좌(A) \| 중앙(라벨) \| 우(B). + 헤더 + 메인 pill + optional 결론 박스 | 1 | bim-vs-dx-table | **✓ templates_staging/compare-vs-rows.html.j2** | +| quadrant-2x2-issues | 2×2 카테고리 그리드 (issue/diagnosis). 각 카테고리에 N개의 (red headline + bullet body). + optional 가운데 인용구 원 | 1 | bim-issues-quadrant | **✓ templates_staging/quadrant-2x2-issues.html.j2** | +| issues-paired-rows | N개 행, 각 행 = 좌/우 이슈 (라벨 pill + 본문), 가운데 구분선, pill 위치 교차 | 1 | bim-issues-paired | **✓ templates_staging/issues-paired-rows.html.j2** | +| stacked-arrow-list | N개 항목 계단식 리스트 (rounded pill + 색상 border + 화살표 마커 + optional 좌측 arc 장식) | 1 | bim-info-products | **✓ templates_staging/stacked-arrow-list.html.j2** | +| split-panel-numbered | 좌: 카테고리별 리스트 (BG + 헤더) / 우: 번호 badge + 설명 N개 | 1 | bim-sw-overview | **✓ templates_staging/split-panel-numbered.html.j2** | + +## Sub-pattern 카탈로그 (atomic 재사용 단위) + +블록 안에 들어있는 작은 재사용 가능 패턴. 여러 다른 블록에서 반복 등장 가능. + +| sub_pattern_id | RULES.md | 설명 | 등장 횟수 | 발견 위치 | +|---------------|---------|------|---------|---------| +| bullet-list-with-marker | **R13** | 각 텍스트 앞에 장식 마커(체크박스/점/화살표/숫자/PNG) + flex pair 구조 | 1 | cards-3col-persona의 컬럼 본문 | +| (다른 sub-pattern은 발견 시 추가) | | | | | + +**Sub-pattern 등록 규칙:** +- 1번째 발견: blocks_index.md에만 메모 (여기 표에 추가) +- 2번째 발견: RULES.md에 R번호 부여하여 정식 등록 + 두 변환물 모두 동일 구조 사용 확인 + +--- + +## 프로모션 완료 + +> 8개 블록 모두 `templates/blocks/new/`로 프로모션 완료 (2026-04-13). +> 이미지 33개 `templates/blocks/svg/`로 통합. catalog.yaml 등록 완료. + +--- + +## 디자인 인사이트 (변환 중 발견된 원칙) + +> 매 변환에서 발견되는 재사용 가능한 디자인 원칙. RULES.md에 박힌 기술 규칙과 별개로, "이런 상황에서는 이렇게 접근한다" 류의 사고 원칙. + +### I-1. 마커 + 텍스트 = 시맨틱 list (R13 sub-pattern) + +**상황:** Figma에서 체크박스 PNG / 점 / 화살표 / 숫자 등이 텍스트 앞에 있을 때. + +**잘못된 접근 (피해야 함):** +- Figma의 평면 레이어 그대로 → 마커들을 별도 absolute 요소로 흩뿌림 +- 텍스트와 마커가 분리된 상태로 동기화 시도 +- 각 텍스트의 wrap 여부를 마커 위치에 반영 시도 (cascade 깨짐) + +**올바른 접근:** +- 마커 + 텍스트 = **하나의 시맨틱 list item** 으로 묶음 (`.bullet-row` 또는 `
  • `) +- flex row 구조: icon + text +- 마커는 CSS marker 역할 (장식, 텍스트와 align) +- list 컨테이너는 `flex-direction: column` +- 텍스트 길이가 row 높이 결정 → 다음 row 자동 시프트 +- **모든 픽셀 위치 절대 배치 금지** + +**적용:** RULES.md R13 참조. + +### I-2. 평행 컬럼은 동일 top/bottom + +**상황:** 3개 이상의 평행 컬럼 (e.g., 발주자/시공자/설계자 카드) + +**원칙:** 모든 컬럼이 **동일한 top + 동일한 height + 동일한 bottom**. 컬럼별 콘텐츠 양에 따라 **내부 spacing이 자동 분배**되도록. + +**구현:** +- 컨테이너 height = 가장 긴 컬럼의 자연 콘텐츠 합 (or zone 입력) +- `justify-content: space-between` 으로 내부 균등 분포 +- 적은 콘텐츠 컬럼은 더 넓은 spacing +- 많은 콘텐츠 컬럼은 더 좁은 spacing + +**적용:** cards-3col-persona (1171281191) + +### I-3. Optional 슬롯으로 콘텐츠 변형 흡수 + +**상황:** 같은 블록을 사진 있는/없는 mdx 모두에 적용해야 함 + +**원칙:** 슬롯에 `required: false` 표시. 템플릿 단계에서 `{% if slot %}...{% endif %}`로 처리. 블록 height는 auto 또는 max(used slots). + +**핵심:** 1:1 단계의 변환물에 모든 슬롯이 채워져 있다고 해서 "이 블록은 필수" 라고 해석하면 안 됨. 슬롯은 기본 optional 가정. + +### I-5. 절대 "쉬운 방식으로 전면 재작성" 하지 말 것 + +**상황:** 80점짜리 결과물에서 2가지 문제를 고쳐야 할 때. + +**잘못된 접근 (실제 발생):** +- 기존 absolute 구조를 flex/grid로 **전면 재작성** → pill 크기/위치/비율 전부 망가짐 → 65점으로 하락 +- "flex가 텍스트 겹침을 자동으로 해결할 것" 이라는 기대로 구조를 갈아엎음 +- 결과: 기존에 맞던 것(pill 크기, 박스 border 위 걸침, 이미지 비율)이 전부 깨짐 + +**올바른 접근:** +- **기존 구조 유지 + 문제 2가지만 정확히 수정** +- 구조를 바꾸면 이전에 맞춘 수십 가지가 다시 깨짐 +- 보완이 안 되면 **그 방식 자체를 오답노트로 두고 다른 방식으로 접근** +- 점점 나빠지면 **즉시 멈추고 마지막 OK 상태로 복원** + +**원칙:** +- 80점 → 90점을 만들 때, 20%를 고치려다 80%를 깨뜨리지 말 것 +- "조금 보완하려고 가장 쉬운 방식(전면 재작성)"은 **절대 금지** +- 구조 변경이 필요하면 **사전에 영향 범위를 분석**하고 사용자 확인 후 진행 + +**적용:** bim-issues-paired.html — absolute(80점) → flex(65점) 하락 사건 + +### I-6. 이미지 프레임 배치 — overflow:hidden으로 부분 표시 (R16) + +**상황:** 원본 이미지에 양 끝 다 디자인 요소가 있고, Figma에서 한쪽만 보여주는 경우. + +**핵심:** 이미지를 프레임보다 크게 넣고, overflow:hidden으로 한쪽을 숨김. **crop이 아니라 위치 조절.** + +**잘못된 접근:** +- `width: 100%; object-fit: fill` → 이미지 찌그러져 양쪽 다 보임 +- `scaleX(-1)` 임의 추가 → Figma에 없는 변환 +- Figma 값 무시하고 추측으로 CSS 작성 + +**올바른 접근:** +- Figma가 준 `left`, `width` 값 **그대로** 적용 +- `overflow: hidden`이 프레임 밖 부분을 숨김 +- rotate(180) 적용된 하단 요소는 **이미지 배치를 상단과 반대로** + +**적용:** RULES.md R16 참조. issues-paired-rows (1171281194)에서 발견. + +### I-4. 1:1 단계의 임시 보정 vs 영구 결정 + +**임시 보정 (템플릿화 시 제거):** +- `letter-spacing` 측정값 → 자연 wrap에 맡김 +- 명시적 `
    ` → 자연 wrap에 맡김 +- 수동 `class="compact"` → 텍스트 길이 자동 판정 +- 고정 `top/width/height` px → CSS 변수 + zone 기반 + +**영구 결정 (그대로 유지):** +- flex 구조, 시맨틱 markup, CSS 변수 기반 계산 +- justify-content 분배 전략 +- icon margin-top calc 공식 + +**구분 표시:** 임시 보정은 HTML 코멘트로 `` 명시. + +--- + +## 발견된 공통 자산 (block-tests/assets/shared/) + +해시 파일명을 키로 한 dedup 캐시. 여러 프레임에서 같은 자산이 등장하면 자동 재사용. + +| hash | 첫 출처 프레임 | 의미 라벨 | +|------|-------------|---------| +| 4a17cd1d... | 1171281191 | column_bg_texture (3컬럼 BG, 동일 src ×3) | +| e837f870... | 1171281191 | overlay_left (좌 컬럼 컬러 오버레이) | +| 755384bd... | 1171281191 | overlay_mid | +| 5577732e... | 1171281191 | overlay_right | +| 77f31997... | 1171281191 | badge_outer_owner | +| e64c967d... | 1171281191 | badge_inner_owner | +| 1550ec75... | 1171281191 | badge_outer_builder | +| 85beaf9d... | 1171281191 | badge_inner_builder | +| 9ac089fa... | 1171281191 | badge_outer_designer | +| 4b534ccf... | 1171281191 | badge_inner_designer | +| 6896d5c2... | 1171281191 | checkbox_icon (재사용 ×20) | +| d2c070f2... | 1171281191 | bottom_photo_left | +| 2a6a58e7... | 1171281191 | bottom_photo_mid | +| 39113493... | 1171281191 | bottom_photo_right | + +(1171281211 자산은 legacy 위치 `block-tests/assets/frame_1171281211/` 에 있음. shared/ 는 1171281191 부터 사용 시작) + +--- + +## 🗂 구 방법론 변환물 (legacy, 참조 금지) + +> 아래 변환물은 **현행 방법론(R8/R9) 도입 이전**의 결과물입니다. 패턴이 비슷해 보여도 **레퍼런스로 베끼지 마십시오**. 동일 패턴 재등장 시에는 신규 방법론으로 처음부터 변환하여 위 "변환 완료" 섹션에 등록합니다. + +| slug | frame | pattern | 위반 사항 | 처리 | +|------|-------|---------|--------|------| +| [prerequisites-3col](block-tests/prerequisites-3col.html) | 45:15 / Frame 1171281190 | 3-column-comparison (legacy) | R8 위반 (수동 ×0.60290 곱셈, transform: scale 미사용), R9 미적용 (gradient text만, div 패턴 없음) | 재변환 권장. 동일 패턴 등장 시 신규 변환물 작성 후 이 행은 archive 처리. | diff --git a/scripts/__init__.py b/scripts/__init__.py new file mode 100644 index 0000000..1c8e5a4 --- /dev/null +++ b/scripts/__init__.py @@ -0,0 +1,3 @@ +# scripts 패키지 인식용 빈 파일 +# 사용법: from scripts.gradient_math import svg_to_css +# (작업 디렉토리가 figma_to_html_agent/ 일 때) diff --git a/scripts/gradient_math.py b/scripts/gradient_math.py new file mode 100644 index 0000000..de841d5 --- /dev/null +++ b/scripts/gradient_math.py @@ -0,0 +1,239 @@ +""" +SVG `` → CSS `linear-gradient(...)` 수학 변환. + +수학 원리: ../MATH.md §2 + +사용법 (모듈): + from scripts.gradient_math import svg_to_css + + css = svg_to_css( + W=350, H=350, + x1=110.833, y1=18.2292, x2=219.479, y2=175, + stops=[(0, '#FDC69E'), (1, '#E0782C')] + ) + # → "linear-gradient(145.27deg, #FDC69E 16.04%, #E0782C 55.20%)" + +사용법 (CLI): + python scripts/gradient_math.py \\ + --w 350 --h 350 \\ + --x1 110.833 --y1 18.2292 --x2 219.479 --y2 175 \\ + --stops "0:#FDC69E,1:#E0782C" +""" + +import math +from typing import List, Tuple + + +def svg_to_css( + W: float, + H: float, + x1: float, + y1: float, + x2: float, + y2: float, + stops: List[Tuple[float, str]], +) -> str: + """ + SVG linearGradient (userSpaceOnUse) → CSS linear-gradient 문자열. + + Args: + W, H: CSS 박스 크기 (background-origin이 적용되는 영역) + x1, y1: SVG 그라데이션 벡터 시작점 (이미 viewBox padding 보정된 값) + x2, y2: SVG 그라데이션 벡터 끝점 + stops: [(offset, color), ...] + offset: 0.0 ~ 1.0 (SVG stop offset) + color: CSS 색상 문자열 (#RGB, #RRGGBB, rgba(), 등) + + Returns: + "linear-gradient(Ndeg, color P%, color Q%, ...)" + + 수식: + dx, dy = x2-x1, y2-y1 + L_svg = √(dx² + dy²) + css_angle= degrees(atan2(dy, dx)) + 90 (SVG y-down → CSS 12-o'clock CW) + L_css = |W·sin α| + |H·cos α| (α = radians(css_angle)) + t_center = ((W/2 - x1)·dx + (H/2 - y1)·dy) / L_svg² + half = (L_css / 2) / L_svg + t0, t1 = t_center ∓ half (CSS 0%, 100% in SVG t-space) + pct = (offset - t0) / (t1 - t0) × 100 + + 참조: ../MATH.md §2 + """ + if not stops: + raise ValueError("stops 비어있음") + + dx = x2 - x1 + dy = y2 - y1 + L_svg_sq = dx * dx + dy * dy + if L_svg_sq == 0: + raise ValueError(f"그라데이션 벡터 길이 0: ({x1},{y1})→({x2},{y2})") + L_svg = math.sqrt(L_svg_sq) + + # SVG 벡터 각도 → CSS 각도 (12시 방향 0°, +CW) + svg_angle_deg = math.degrees(math.atan2(dy, dx)) + css_angle = (svg_angle_deg + 90) % 360 + + # CSS 그라데이션 선 길이 + a = math.radians(css_angle) + L_css = abs(W * math.sin(a)) + abs(H * math.cos(a)) + + # 박스 중심의 t 파라미터 (SVG 벡터 위에서 0=시작, 1=끝) + t_center = ((W / 2 - x1) * dx + (H / 2 - y1) * dy) / L_svg_sq + + # CSS 0% / 100% ↔ SVG t-space + half = (L_css / 2) / L_svg + t0 = t_center - half + t1 = t_center + half + span = t1 - t0 + if span == 0: + raise ValueError("L_css = 0 (퇴화 케이스)") + + # 각 stop을 CSS percent로 + parts = [f"{css_angle:.2f}deg"] + for offset, color in stops: + pct = (offset - t0) / span * 100 + parts.append(f"{color} {pct:.2f}%") + + return "linear-gradient(" + ", ".join(parts) + ")" + + +def svg_to_css_remap( + css_W: float, + css_H: float, + viewbox_padding: float, + x1: float, + y1: float, + x2: float, + y2: float, + stops: List[Tuple[float, str]], +) -> str: + """ + viewBox padding이 있는 SVG (drop-shadow 여백 등)에서 CSS box로 좌표 remap 후 변환. + + 예: SVG viewBox 310×310, 실제 fill 영역 280×280 (각 변 15 padding) + → svg_to_css_remap(css_W=280, css_H=280, viewbox_padding=15, ...) + + 참조: ../MATH.md §5 + """ + return svg_to_css( + W=css_W, + H=css_H, + x1=x1 - viewbox_padding, + y1=y1 - viewbox_padding, + x2=x2 - viewbox_padding, + y2=y2 - viewbox_padding, + stops=stops, + ) + + +def parse_stops(stops_str: str) -> List[Tuple[float, str]]: + """ + "0:#FDC69E,1:#E0782C" → [(0.0, '#FDC69E'), (1.0, '#E0782C')] + """ + out = [] + for piece in stops_str.split(","): + piece = piece.strip() + if not piece: + continue + offset_s, color = piece.split(":", 1) + out.append((float(offset_s), color.strip())) + return out + + +def _cli(): + import argparse + + p = argparse.ArgumentParser( + description="SVG linearGradient → CSS linear-gradient (수학적 변환)" + ) + p.add_argument("--w", type=float, required=True, help="CSS 박스 너비") + p.add_argument("--h", type=float, required=True, help="CSS 박스 높이") + p.add_argument("--x1", type=float, required=True) + p.add_argument("--y1", type=float, required=True) + p.add_argument("--x2", type=float, required=True) + p.add_argument("--y2", type=float, required=True) + p.add_argument( + "--stops", + required=True, + help='"offset:color,offset:color" (예: "0:#FDC69E,1:#E0782C")', + ) + p.add_argument( + "--viewbox-padding", + type=float, + default=0, + help="viewBox padding (drop-shadow 여백 등)", + ) + + args = p.parse_args() + stops = parse_stops(args.stops) + + if args.viewbox_padding: + css = svg_to_css_remap( + css_W=args.w, + css_H=args.h, + viewbox_padding=args.viewbox_padding, + x1=args.x1, + y1=args.y1, + x2=args.x2, + y2=args.y2, + stops=stops, + ) + else: + css = svg_to_css( + W=args.w, + H=args.h, + x1=args.x1, + y1=args.y1, + x2=args.x2, + y2=args.y2, + stops=stops, + ) + + print(css) + + +# ─── Self-test ───────────────────────────────────────────── +def _test(): + """1171281211 frame의 12개 그라데이션이 예상 값과 일치하는지 회귀 테스트""" + cases = [ + # (label, args, expected_substring) + ( + "big-safety outer", + dict(W=350, H=350, x1=110.833, y1=18.2292, x2=219.479, y2=175, + stops=[(0, "#FDC69E"), (1, "#E0782C")]), + "145.28deg", + ), + ( + "big-productivity outer", + dict(W=350, H=350, x1=300.084, y1=48.7416, x2=57.5503, y2=350, + stops=[(0, "#D5AA89"), (1, "#737373")]), + "218.84deg", + ), + ( + "big-trust outer", + dict(W=350, H=350, x1=56.9631, y1=11.1577, x2=272.483, y2=329.446, + stops=[(0, "#FFFFFF"), (1, "#253E1F")]), + "145.90deg", + ), + ] + failed = 0 + for label, args, expected in cases: + css = svg_to_css(**args) + ok = expected in css + mark = "✓" if ok else "✗" + print(f" {mark} {label}: {css}") + if not ok: + failed += 1 + print(f" expected substring: {expected}") + print(f"\n{len(cases) - failed}/{len(cases)} passed") + return failed == 0 + + +if __name__ == "__main__": + import sys + + if len(sys.argv) > 1 and sys.argv[1] == "--test": + ok = _test() + sys.exit(0 if ok else 1) + else: + _cli() diff --git a/templates_staging/README.md b/templates_staging/README.md new file mode 100644 index 0000000..d59c4d4 --- /dev/null +++ b/templates_staging/README.md @@ -0,0 +1,77 @@ +# templates_staging/ + +**Stage 2 — Jinja2 추상화 staging 영역** + +블록이 2번째로 등장한 순간 여기에 Jinja2 템플릿으로 추출된다. 사용자가 직접 검수한 뒤 design_agent 본체로 프로모션한다. + +## 파일 구조 + +``` +templates_staging/ +├── README.md ← 이 파일 +├── {pattern_id}.html.j2 ← Jinja2 템플릿 본체 +└── {pattern_id}.meta.yaml ← when/slots/min_size_px 초안 +``` + +## meta.yaml 형식 (초안) + +```yaml +pattern_id: cycle-3way-intersect +category: visuals +when: + relation_type: [hierarchy, cycle] + min_circles: 2 + max_circles: 5 +not_for: + - linear_process + - simple_list +slots: + - name: circles + type: list + min: 2 + max: 5 + item: + label: string + gradient_from: color + gradient_to: color + accents: list + - name: side_labels + type: list + min: 0 + max: 20 +min_size_px: + width: 1024 + height: 480 +provenance: + source_frames: + - 66:310 (Frame 1171281211) + - {2번째 등장 frame ID} + reference_html: block-tests/bim-goals-3circles.html +``` + +## 흐름 + +``` +1. block-tests/{slug_a}.html ← 1번째 등장 + ↓ +2. block-tests/{slug_b}.html ← 2번째 등장 (같은 패턴 발견) + ↓ +3. templates_staging/{pattern_id}.html.j2 ← Jinja2 추출 (NOW) + templates_staging/{pattern_id}.meta.yaml + ↓ +4. 🚧 사용자 검수 게이트 🚧 + - 다양한 파라미터로 렌더 테스트 + - 시각 충실도 확인 + - meta.yaml 정밀화 + ↓ +5. design_agent/templates/blocks/{category}/{pattern_id}.html.j2 (사용자 직접) + design_agent/templates/catalog.yaml 등록 (사용자 직접) + ↓ +6. blocks_index.md 상태 → "promoted" +``` + +## 금지 + +- 에이전트가 4단계 이후를 자동 수행하는 것 +- meta.yaml 없이 .html.j2 만 작성하는 것 +- 1개 등장만 보고 미리 templates_staging 작성 (반드시 2번째 등장 후) diff --git a/templates_staging/_renders/_full1.png b/templates_staging/_renders/_full1.png new file mode 100644 index 0000000..8c6b4d4 Binary files /dev/null and b/templates_staging/_renders/_full1.png differ diff --git a/templates_staging/_renders/_full2.png b/templates_staging/_renders/_full2.png new file mode 100644 index 0000000..7b54003 Binary files /dev/null and b/templates_staging/_renders/_full2.png differ diff --git a/templates_staging/_renders/_full_cmp.png b/templates_staging/_renders/_full_cmp.png new file mode 100644 index 0000000..5781e4a Binary files /dev/null and b/templates_staging/_renders/_full_cmp.png differ diff --git a/templates_staging/_renders/_full_cycle.png b/templates_staging/_renders/_full_cycle.png new file mode 100644 index 0000000..f6490b0 Binary files /dev/null and b/templates_staging/_renders/_full_cycle.png differ diff --git a/templates_staging/_renders/_full_example-no-photos.png b/templates_staging/_renders/_full_example-no-photos.png new file mode 100644 index 0000000..6d94fca Binary files /dev/null and b/templates_staging/_renders/_full_example-no-photos.png differ diff --git a/templates_staging/_renders/_full_example.png b/templates_staging/_renders/_full_example.png new file mode 100644 index 0000000..d200781 Binary files /dev/null and b/templates_staging/_renders/_full_example.png differ diff --git a/templates_staging/_renders/_full_pill.png b/templates_staging/_renders/_full_pill.png new file mode 100644 index 0000000..a811b87 Binary files /dev/null and b/templates_staging/_renders/_full_pill.png differ diff --git a/templates_staging/_renders/_full_quad.png b/templates_staging/_renders/_full_quad.png new file mode 100644 index 0000000..3944cd7 Binary files /dev/null and b/templates_staging/_renders/_full_quad.png differ diff --git a/templates_staging/_renders/_paired_tmpl.png b/templates_staging/_renders/_paired_tmpl.png new file mode 100644 index 0000000..a54541b Binary files /dev/null and b/templates_staging/_renders/_paired_tmpl.png differ diff --git a/templates_staging/_renders/cards-3col-persona.example-no-photos.html b/templates_staging/_renders/cards-3col-persona.example-no-photos.html new file mode 100644 index 0000000..7b37cd9 --- /dev/null +++ b/templates_staging/_renders/cards-3col-persona.example-no-photos.html @@ -0,0 +1,418 @@ + + + + + +BIM 3역할 목표 (사진 없는 mdx, 검증용) + + + + + + + +
    + +
    + + +
    + + + + 발주자 + 목표 + +
    + + +
    + + + + + + +
      + +
    • + + 민원, 재 작업 등의 예방 및 최소화 +
      • + +
    • + + 직관화로 품질 향상 및 안정성 제고 +
      • + +
    • + + 수행공정의 쉬운이해로 관리 편의성 증진 +
      • + +
    • + + 실무자와 발주자간의 소통 오류 최소화 +
      • + +
    • + + 행정 자동화와 최소화로 생산성 향상 +
      • + +
    • + + 건설정보의 통합관리로 활용성 강화 +
      • + +
    • + + 전 생애주기에 걸친 효율적 디지털 자산관리 +
      • + +
    + + + +
    +
    + +
    + + +
    + + + + 시공자 + 목표 + +
    + + +
    + + + + + + +
      + +
    • + + 시공 오류예방 및 공사 Risk 최소화 +
      • + +
    • + + 시각화로 안전성 제고 및 품질 향상 +
      • + +
    • + + 중간태, 완성태 측량을 통한 시‧공간적 관리 편리성 향상 +
      • + +
    • + + 건설 관계자들 간의 의사소통 강화 +
      • + +
    • + + Model을 활용한 시공상세도 등의 관련도서 작성 용이 +
      • + +
    • + + System 구축을 통한 행정 간소화 +
      • + +
    • + + 기술개발을 통한 생산성 향상 +
      • + +
    + + + +
    +
    + +
    + + +
    + + + + 설계자 + 목표 + +
    + + +
    + + + + + + +
      + +
    • + + 직관적 시각화로 원활한 소통 +
      • + +
    • + + 3D 모델 활용으로 오류 최소화 및 Claim 예방 +
      • + +
    • + + 발주자와의 상호 신뢰 증진 +
      • + +
    • + + 정보물 생산으로 부가가치 창출 +
      • + +
    • + + 고부가가치 창출산업으로 전환 +
      • + +
    • + + 프로젝트 정보의 일관성 유지 및 관리를 통한 오류 최소화 +
      • + +
    + + + +
    +
    + +
    + + + \ No newline at end of file diff --git a/templates_staging/_renders/cards-3col-persona.example-no-photos.png b/templates_staging/_renders/cards-3col-persona.example-no-photos.png new file mode 100644 index 0000000..847925f Binary files /dev/null and b/templates_staging/_renders/cards-3col-persona.example-no-photos.png differ diff --git a/templates_staging/_renders/cards-3col-persona.example.html b/templates_staging/_renders/cards-3col-persona.example.html new file mode 100644 index 0000000..76b9026 --- /dev/null +++ b/templates_staging/_renders/cards-3col-persona.example.html @@ -0,0 +1,430 @@ + + + + + +BIM 3역할 목표 카드 (Frame 1171281191) — 템플릿 렌더 검증 + + + + + + + +
    + +
    + + +
    + + + + 발주자 + 목표 + +
    + + +
    + + + + + + +
      + +
    • + + 민원, 재 작업 등의 예방 및 최소화 +
      • + +
    • + + 직관화로 품질 향상 및 안정성 제고 +
      • + +
    • + + 수행공정의 쉬운이해로 관리 편의성 증진 +
      • + +
    • + + 실무자와 발주자간의 소통 오류 최소화 +
      • + +
    • + + 행정 자동화와 최소화로 생산성 향상 +
      • + +
    • + + 건설정보의 통합관리로 활용성 강화 +
      • + +
    • + + 전 생애주기에 걸친 효율적 디지털 자산관리 +
      • + +
    + + + +
    + +
    + +
    +
    + +
    + + +
    + + + + 시공자 + 목표 + +
    + + +
    + + + + + + +
      + +
    • + + 시공 오류예방 및 공사 Risk 최소화 +
      • + +
    • + + 시각화로 안전성 제고 및 품질 향상 +
      • + +
    • + + 중간태, 완성태 측량을 통한 시‧공간적 관리 편리성 향상 +
      • + +
    • + + 건설 관계자들 간의 의사소통 강화 +
      • + +
    • + + Model을 활용한 시공상세도 등의 관련도서 작성 용이 +
      • + +
    • + + System 구축을 통한 행정 간소화 +
      • + +
    • + + 기술개발을 통한 생산성 향상 +
      • + +
    + + + +
    + +
    + +
    +
    + +
    + + +
    + + + + 설계자 + 목표 + +
    + + +
    + + + + + + +
      + +
    • + + 직관적 시각화로 원활한 소통 +
      • + +
    • + + 3D 모델 활용으로 오류 최소화 및 Claim 예방 +
      • + +
    • + + 발주자와의 상호 신뢰 증진 +
      • + +
    • + + 정보물 생산으로 부가가치 창출 +
      • + +
    • + + 고부가가치 창출산업으로 전환 +
      • + +
    • + + 프로젝트 정보의 일관성 유지 및 관리를 통한 오류 최소화 +
      • + +
    + + + +
    + +
    + +
    +
    + +
    + + + \ No newline at end of file diff --git a/templates_staging/_renders/cards-3col-persona.example.png b/templates_staging/_renders/cards-3col-persona.example.png new file mode 100644 index 0000000..aa25e6d Binary files /dev/null and b/templates_staging/_renders/cards-3col-persona.example.png differ diff --git a/templates_staging/_renders/compare-vs-rows.example.html b/templates_staging/_renders/compare-vs-rows.example.html new file mode 100644 index 0000000..9178ea7 --- /dev/null +++ b/templates_staging/_renders/compare-vs-rows.example.html @@ -0,0 +1,273 @@ + + + + +BIM vs DX 비교 표 (Frame 1171281195) + + + + + + + +
    + +
    +
    +
    BIM과 DX의 이해
    +
    + + +
    +
    BIM
    +
    vs.
    +
    DX
    +
    + +
    + +
    +
    Only 3D
    +
    BIM/DX
    +
    BIM << DX (ENG. + Management 포함)
    +
    + +
    +
    모델 제작용 상용 S/W
    [Civil 3D, Revit, Navisworks, Autocad]
    +
    S/W
    +
    제작 및 운영 (상용 + 전용 40~80개)
    [Rhino, Sketchup, Blender ..] + [EG-BIM 등]
    +
    + +
    +
    기존 2D 설계방식 유지
    +
    프로세스
    +
    근본적 문제의식을 통한 개선
    +
    + +
    +
    3D 모델 중심
    기존 성과품 유지
    +
    성과물
    +
    공학 정보 및 콘텐츠 연계에 집중
    도면, 수량, 시공계획 등 일식
    +
    + +
    +
    3D 모델에 의한 일반적 이해 향상
    +
    활 용
    +
    설계/시공의 혁신(개념의 재정립)
    +
    + +
    +
    (설계/시공/운영) 분야별 단절
    +
    확장성
    +
    전 생애주기 활용 시스템
    +
    + +
    +
    단순화(오류) - 수동적/집단적 동질화
    +
    수행개념
    +
    구체화(복잡) - 적극/구체적 실현 방안
    +
    + +
    +
    소극적, 상용 기술에 의존
    +
    CIVIL + IT
    +
    적극적, 주체적인 기술 접목/융합
    +
    + +
    +
    S/W 제작사 판매 정책에 의존
    +
    주 체
    +
    자체 수행능력 - 지속가능성 확보
    +
    + +
    +
    평준화, 국내 중심
    +
    발주처
    +
    차별화 및 경쟁력 확보, 해외 진출
    +
    + +
    +
    소규모 BIM팀 운영 + 단순교육에 집중
    +
    설계사
    +
    IT + CIVIL ENG 220명 운영 + 기술 개발
    +
    + +
    +
    국내 토목 소극적/해외 토목증가
    +
    시공사
    +
    분야 확장 모델 및 시스템
    +
    + +
    + + +
    +
    +
    + BIM은 건설산업의 DX(디지털전환)을 수행하는 과정에서 가장 기초가 되는 일부분임을 인지하는 것이 매우 중요 +
    +
    + +
    + + + \ No newline at end of file diff --git a/templates_staging/_renders/compare-vs-rows.example.png b/templates_staging/_renders/compare-vs-rows.example.png new file mode 100644 index 0000000..60e14bc Binary files /dev/null and b/templates_staging/_renders/compare-vs-rows.example.png differ diff --git a/templates_staging/_renders/cycle-3way-intersect.example.html b/templates_staging/_renders/cycle-3way-intersect.example.html new file mode 100644 index 0000000..1d36c16 --- /dev/null +++ b/templates_staging/_renders/cycle-3way-intersect.example.html @@ -0,0 +1,470 @@ + + + + + +BIM 3원 교차 다이어그램 (Frame 1171281211) — 템플릿 렌더 검증 + + + + + + + +
    +
    +
    + + + +
    + + + + +
    +
    +
    + + + + +
    +
    +
    + + + + +
    +
    +
    +
    +
    +

    안전과

    품질

    +
    + +
    +
    +
    +
    +
    +

    생산성

    향상

    +
    + +
    +
    +
    +
    +
    +

    소통과

    신뢰

    +
    + + + + + +
    +
    +
    +
    +
    安
    + + + +
    +
    +
    +
    +
    質
    + + + +
    +
    +
    +
    +
    速
    + + + +
    +
    +
    +
    +
    利
    + + + +
    +
    +
    +
    +
    通
    + + + +
    +
    +
    +
    +
    信
    + + + + + + + +
    안전성 제고
    + + +
    +

    시설물의 요구성능의 만족,

    건설중 및 운영중 안전확보

    +
    + + + + + +
    품질 향상
    + + +
    +

    Copy & Paste로 하향 평준화된

    기존 성과물의 품질 향상

    +
    + + + + + +
    신속ㆍ정확성 증진
    + + +
    +

    Analogue 기반 업무를

    Digital화 하는 Process 혁신

    +
    + + + + + +
    소통ㆍ이해 원할
    + + +
    +

    성과품, Solution을 통한

    사용 편리성, 협업 및 의사소통 강화

    +
    + + + + + +
    비용저감ㆍ부가가치 창출
    + + +
    +

    건설비용 및 유지관리비 감소,

    인력투입 최소화 등 생산성 향상

    +
    + + + + + +
    신뢰ㆍ투명성 강화
    + + +
    +

    3D 모델을 통한 오류

    최소화 및 Claim 예방

    +
    + + + + +
    +
    +
    + + + \ No newline at end of file diff --git a/templates_staging/_renders/cycle-3way-intersect.example.png b/templates_staging/_renders/cycle-3way-intersect.example.png new file mode 100644 index 0000000..74c6d26 Binary files /dev/null and b/templates_staging/_renders/cycle-3way-intersect.example.png differ diff --git a/templates_staging/_renders/issues-paired-rows.example.html b/templates_staging/_renders/issues-paired-rows.example.html new file mode 100644 index 0000000..36e2796 --- /dev/null +++ b/templates_staging/_renders/issues-paired-rows.example.html @@ -0,0 +1,245 @@ + + + + +현황 및 문제점 (Frame 1171281194) + + + + + + +
    + +
    +
    +
    현황 및 문제점
    +
    + + +
    + +
    + + +
    +
    + + 개념 부재 +
    +
    + + 잘못된 접근방식 +
    +
    + + +
    +
    BIM을 Digital 전환의 개념이 아닌, CAD의 확장판으로 해석하여 3D를 그리는 수단 정도로만 인식
    +
    +
    단순 업무효율 증진을 위한 도구로만 인식하여, 기술자들이 도구로서 사용만 할 수 있도록 교육시키면 된다고 판단
    +
    + + +
    + +
    + + +
    +
    대형 S/W 개발 및 판매회사에서 제시된 내용과 방향대로 따라하므로써, 국내는 자체적 목표설정 기능을 상실
    +
    +
    건축과 토목이 유사하다는 전제하에 Library를 활용하는 건축에서 수행하고 있는 방식을 토목에도 동일하게 적용
    +
    + + + +
    +
    + + 방향성 상실 +
    +
    + + 전제조건 오류 +
    +
    + +
    + +
    + + +
    +
    + + 수행주체 혼란 +
    +
    + + 수행방식 무지 +
    +
    + + +
    +
    학자, 발주처 중심으로 S/W 판매회사에서 제시한 기술 수행 방식의 변화를 주도, 실행주체인 기업과 기술자들은 기존의 방식을 고수하면서 눈치만 보는 실정
    +
    +
    기존 2D 설계의 결과가 옳다는 전제와 3D 설계를 수행/검토해본 경험이 없어, 전환설계의 개념으로 수행하므로써 비용과 시간이 추가로 소요, 높은 수준의 품질확보 불가
    +
    + + +
    + +
    + + +
    +
    단순 외산 범용S/W만 사용하면 BIM이 될 수 있을 것이라는 안일한 생각으로 접근하므로 외국 대형S/W 회사에 기술예속 가속
    +
    +
    도면작성 중심의 기존 설계방식과 동일한 개념으로 생각하여, 탁상용 개인 PC, Monitor 사용기반 정도에 머물러 있어 실무적용에 필요한 높은 수준의 모델 등의 표출은 한계
    +
    + + + +
    +
    + + 외산S/W 기술예속 +
    +
    + + H/W 미비 +
    +
    + +
    + +
    +
    + + \ No newline at end of file diff --git a/templates_staging/_renders/issues-paired-rows.example.png b/templates_staging/_renders/issues-paired-rows.example.png new file mode 100644 index 0000000..0e26c07 Binary files /dev/null and b/templates_staging/_renders/issues-paired-rows.example.png differ diff --git a/templates_staging/_renders/quadrant-2x2-issues.example.html b/templates_staging/_renders/quadrant-2x2-issues.example.html new file mode 100644 index 0000000..3d7a201 --- /dev/null +++ b/templates_staging/_renders/quadrant-2x2-issues.example.html @@ -0,0 +1,255 @@ + + + + +BIM 수행실정 — 2x2 진단 (Frame 1171281193) + + + + + + + +
    + + + +
    +
    정책 집행
    +
    + +
    +
    인정주의 정책 집행
    +
      +
    • 수행능력이 없는 업체 선정 후 품질을 낮추어 시행하고 낮은 수준의 성과품을 실적으로 수용
    • 모든 설계사가 할 수 있다는 전제하에 정책 시행
    • 발주처의 책임회피를 위한 제도 운영
      • +
    +
    + +
    +
    적용효과도 사례도 없는 방침부터 남발
    +
      +
    • 효과 검증도 없는 지침부터 만들고보는 현실
    • BIM/DX 적용효과를 판단할 사례 부재
    • 대부분 홍보목적으로 포장되어 투자 대비 효과 없음
      • +
    +
    + +
    +
    + + +
    +
    수행 개념
    +
    + +
    +
    공학적 개념 정립 부재
    +
      +
    • DX 개념과 BIM 기술의 차이점의 이해부족으로 전략적 접근방식과 기술적 도구 사이의 혼란만 가중
    • 인프라시설의 DX의 기본은 단순 모델이 아닌 위치기반 3D 모델(BIM)을 활용한 과정(Process)의 혁신
    • 기술적 도구인 3D 모델 제작S/W에 과도하게 의존
      • +
    +
    + +
    +
    '본업 기술력 확보' 우선의 개념 부재
    +
      +
    • 깊은 기반지식 바탕의 기술이 축적된 메뉴얼에 대한 중요성 및 필요성에 대한 이해 부족
    • 자체 기술개발 없이 국내 발주처의 지침과 방침에만 의존한 낮은 기술력
      • +
    +
    + +
    +
    + + +
    +
    근본 취지의 이해부족
    +
    + +
    +
    기술투자 없는 성과 창출 기대
    +
      +
    • 이전의 CAD 도입·확장 시기처럼 상용화된 BIM S/W만 구입·구독하면 될거라는 안일한 생각
    • 기술개발 노력없이 과거처럼 하면 된다는 착각
      • +
    +
    + +
    +
    엔지니어링 S/W에 대한 개념 부재
    +
      +
    • 다양한 엔지니어링 S/W의 특성에 대한 깊은 이해없이 단기 비용절감에 치우쳐 범용 S/W 선택
    • 대형 Global S/W 회사에 과도한 의존과 이에 예속되는 방침 남발로 전용S/W 소멸
      • +
    +
    + +
    +
    + + +
    +
    지속적 투자 의지 부재
    +
    + +
    +
    근본적인 역할은 회피
    +
      +
    • 엔지니어의 근본적인 역할인 과정의 혁신과 결과물의 변화에 대한 고민 부재
    • 기술자가 직접 3D 모델을 만들고 수정하며 설계를 수행해야하는데 정작 모델제작은 외주처리
      • +
    +
    + +
    +
    과거의 타성에 머무르고 있는 업계
    +
      +
    • 설계/감리/시공 임직원들의 디지털무지와 전략적 무지
    • S/W 판매업체의 기능적 사용법을 BIM 교육으로 착각
    • 교육을 통한 인재양성보다는 당장 실무활용이 가능한 타사의 인력을 빼오기에 집중
      • +
    +
    + +
    +
    + + + +
    + +
    Rome wasn't +Built in a day!
    +
    + +
    + + + \ No newline at end of file diff --git a/templates_staging/_renders/quadrant-2x2-issues.example.png b/templates_staging/_renders/quadrant-2x2-issues.example.png new file mode 100644 index 0000000..a0d59ff Binary files /dev/null and b/templates_staging/_renders/quadrant-2x2-issues.example.png differ diff --git a/templates_staging/_renders/statement-pill-highlight.example.html b/templates_staging/_renders/statement-pill-highlight.example.html new file mode 100644 index 0000000..aaaac02 --- /dev/null +++ b/templates_staging/_renders/statement-pill-highlight.example.html @@ -0,0 +1,91 @@ + + + + + +BIM 미래 선언 메시지 (Frame 1171281207) — 템플릿 검증 + + + + + + + +
    + +
    + + + \ No newline at end of file diff --git a/templates_staging/_renders/statement-pill-highlight.example.png b/templates_staging/_renders/statement-pill-highlight.example.png new file mode 100644 index 0000000..ac439a2 Binary files /dev/null and b/templates_staging/_renders/statement-pill-highlight.example.png differ diff --git a/templates_staging/cards-3col-persona.example-no-photos.yaml b/templates_staging/cards-3col-persona.example-no-photos.yaml new file mode 100644 index 0000000..f0aca00 --- /dev/null +++ b/templates_staging/cards-3col-persona.example-no-photos.yaml @@ -0,0 +1,59 @@ +# Example 2: 사진 없는 mdx 케이스 +# 같은 블록이 사진 없는 콘텐츠도 매칭/렌더 가능한지 검증. +# bottom_photo 필드 생략 → no-photo 모드로 자동 렌더. + +title: "BIM 3역할 목표 (사진 없는 mdx, 검증용)" + +marker_icon: "../../block-tests/assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" + +columns: + - role_label: ["발주자", "목표"] + role_color: "#285b4a" + bg_image: "../../block-tests/assets/shared/4a17cd1dddaba8a220b706df3ec052d2bfde4f47.png" + overlay_image: "../../block-tests/assets/shared/e837f8707efeffc9e357d084ad72b752a5fba0f9.png" + badge: + outer_image: "../../block-tests/assets/shared/77f319979c880da34ff3d423fcd97827f636c01e.png" + inner_image: "../../block-tests/assets/shared/e64c967dd00302bfbef6cfbcbb4f7a4db5d9d96c.png" + bullet_items: + - { text: "민원, 재 작업 등의 예방 및 최소화" } + - { text: "직관화로 품질 향상 및 안정성 제고" } + - { text: "수행공정의 쉬운이해로 관리 편의성 증진" } + - { text: "실무자와 발주자간의 소통 오류 최소화" } + - { text: "행정 자동화와 최소화로 생산성 향상" } + - { text: "건설정보의 통합관리로 활용성 강화" } + - { text: "전 생애주기에 걸친 효율적 디지털 자산관리" } + # bottom_photo 생략 ★ + + - role_label: ["시공자", "목표"] + role_color: "#445a2f" + bg_image: "../../block-tests/assets/shared/4a17cd1dddaba8a220b706df3ec052d2bfde4f47.png" + overlay_image: "../../block-tests/assets/shared/755384bd81ba10f62628933f16595eb054064846.png" + badge: + outer_image: "../../block-tests/assets/shared/1550ec755fa7922dcfc1c90135a570d6b9df82cc.png" + inner_image: "../../block-tests/assets/shared/85beaf9dfc17b7ed4620729a086ba22143606517.png" + bullet_items: + - { text: "시공 오류예방 및 공사 Risk 최소화" } + - { text: "시각화로 안전성 제고 및 품질 향상" } + - { text: "중간태, 완성태 측량을 통한 시‧공간적 관리 편리성 향상", compact: true } + - { text: "건설 관계자들 간의 의사소통 강화" } + - { text: "Model을 활용한 시공상세도 등의 관련도서 작성 용이", compact: true } + - { text: "System 구축을 통한 행정 간소화" } + - { text: "기술개발을 통한 생산성 향상" } + + - role_label: ["설계자", "목표"] + role_color: "#743002" + bg_image: "../../block-tests/assets/shared/4a17cd1dddaba8a220b706df3ec052d2bfde4f47.png" + overlay_image: "../../block-tests/assets/shared/5577732e17bedec9eb1de4f77583cf67c8137f92.png" + badge: + outer_image: "../../block-tests/assets/shared/9ac089fa9c5106b6b26d47727003641bb56ba4b0.png" + inner_image: "../../block-tests/assets/shared/4b534ccf4e945fbe7436a0d8d96a6deffcfe5cef.png" + bullet_items: + - { text: "직관적 시각화로 원활한 소통" } + - { text: "3D 모델 활용으로 오류 최소화 및 Claim 예방", compact: true } + - { text: "발주자와의 상호 신뢰 증진" } + - { text: "정보물 생산으로 부가가치 창출" } + - { text: "고부가가치 창출산업으로 전환" } + - { text: "프로젝트 정보의 일관성 유지 및 관리를 통한 오류 최소화", compact: true } + +# 슬라이드 height를 짧게 (사진 없으므로) +block_h: 720 diff --git a/templates_staging/cards-3col-persona.example.yaml b/templates_staging/cards-3col-persona.example.yaml new file mode 100644 index 0000000..9963099 --- /dev/null +++ b/templates_staging/cards-3col-persona.example.yaml @@ -0,0 +1,63 @@ +# Example data for cards-3col-persona template +# Reproduces frame 1171281191 (BIM 발주자/시공자/설계자 목표) content as template input. +# +# Use with: python templates_staging/render.py cards-3col-persona example + +title: "BIM 3역할 목표 카드 (Frame 1171281191) — 템플릿 렌더 검증" + +# 마커 (모든 컬럼 공통). 1:1 ref와 동일 자산 재사용. +marker_icon: "../../block-tests/assets/shared/6896d5c231e51de7cb844b99905e40b846863cd5.png" + +columns: + # ─── 발주자 컬럼 ─── + - role_label: ["발주자", "목표"] + role_color: "#285b4a" + bg_image: "../../block-tests/assets/shared/4a17cd1dddaba8a220b706df3ec052d2bfde4f47.png" + overlay_image: "../../block-tests/assets/shared/e837f8707efeffc9e357d084ad72b752a5fba0f9.png" + badge: + outer_image: "../../block-tests/assets/shared/77f319979c880da34ff3d423fcd97827f636c01e.png" + inner_image: "../../block-tests/assets/shared/e64c967dd00302bfbef6cfbcbb4f7a4db5d9d96c.png" + bullet_items: + - { text: "민원, 재 작업 등의 예방 및 최소화" } + - { text: "직관화로 품질 향상 및 안정성 제고" } + - { text: "수행공정의 쉬운이해로 관리 편의성 증진" } + - { text: "실무자와 발주자간의 소통 오류 최소화" } + - { text: "행정 자동화와 최소화로 생산성 향상" } + - { text: "건설정보의 통합관리로 활용성 강화" } + - { text: "전 생애주기에 걸친 효율적 디지털 자산관리" } + bottom_photo: "../../block-tests/assets/shared/d2c070f200af83f563976b6b0f309d38321d204d.png" + + # ─── 시공자 컬럼 ─── + - role_label: ["시공자", "목표"] + role_color: "#445a2f" + bg_image: "../../block-tests/assets/shared/4a17cd1dddaba8a220b706df3ec052d2bfde4f47.png" + overlay_image: "../../block-tests/assets/shared/755384bd81ba10f62628933f16595eb054064846.png" + badge: + outer_image: "../../block-tests/assets/shared/1550ec755fa7922dcfc1c90135a570d6b9df82cc.png" + inner_image: "../../block-tests/assets/shared/85beaf9dfc17b7ed4620729a086ba22143606517.png" + bullet_items: + - { text: "시공 오류예방 및 공사 Risk 최소화" } + - { text: "시각화로 안전성 제고 및 품질 향상" } + - { text: "중간태, 완성태 측량을 통한 시‧공간적 관리 편리성 향상", compact: true } + - { text: "건설 관계자들 간의 의사소통 강화" } + - { text: "Model을 활용한 시공상세도 등의 관련도서 작성 용이", compact: true } + - { text: "System 구축을 통한 행정 간소화" } + - { text: "기술개발을 통한 생산성 향상" } + bottom_photo: "../../block-tests/assets/shared/2a6a58e7bf7a645b5ede65115feb2890ccc414d1.png" + + # ─── 설계자 컬럼 ─── + - role_label: ["설계자", "목표"] + role_color: "#743002" + bg_image: "../../block-tests/assets/shared/4a17cd1dddaba8a220b706df3ec052d2bfde4f47.png" + overlay_image: "../../block-tests/assets/shared/5577732e17bedec9eb1de4f77583cf67c8137f92.png" + badge: + outer_image: "../../block-tests/assets/shared/9ac089fa9c5106b6b26d47727003641bb56ba4b0.png" + inner_image: "../../block-tests/assets/shared/4b534ccf4e945fbe7436a0d8d96a6deffcfe5cef.png" + bullet_items: + - { text: "직관적 시각화로 원활한 소통" } + - { text: "3D 모델 활용으로 오류 최소화 및 Claim 예방", compact: true } + - { text: "발주자와의 상호 신뢰 증진" } + - { text: "정보물 생산으로 부가가치 창출" } + - { text: "고부가가치 창출산업으로 전환" } + - { text: "프로젝트 정보의 일관성 유지 및 관리를 통한 오류 최소화", compact: true } + bottom_photo: "../../block-tests/assets/shared/39113493f6e3ae76d766e86e293b0f0dcbf55d91.png" diff --git a/templates_staging/cards-3col-persona.html.j2 b/templates_staging/cards-3col-persona.html.j2 new file mode 100644 index 0000000..ea20af6 --- /dev/null +++ b/templates_staging/cards-3col-persona.html.j2 @@ -0,0 +1,269 @@ + + + + + +{{ title|default("cards-3col-persona") }} + + + + + + + +
    + {% for col in columns %} +
    + + +
    + + + + {{ col.role_label[0] }} + {{ col.role_label[1] }} + +
    + + +
    + + {% if col.overlay_image %} + + {% endif %} + + +
      + {% for item in col.bullet_items %} +
    • + + {{ item.text|safe }} +
      • + {% endfor %} +
    + + + {% if col.bottom_photo %} +
    + +
    + {% endif %} +
    +
    + {% endfor %} +
    + + + diff --git a/templates_staging/cards-3col-persona.meta.yaml b/templates_staging/cards-3col-persona.meta.yaml new file mode 100644 index 0000000..001dfff --- /dev/null +++ b/templates_staging/cards-3col-persona.meta.yaml @@ -0,0 +1,127 @@ +pattern_id: cards-3col-persona +category: cards +version: 0.1.0 # staging draft +provenance: + source_frame: "45:16 / Frame 1171281191" + reference_html: ../block-tests/bim-3roles-cards.html + reference_render: ../block-tests/_renders/bim-3roles-cards_v8.png + +description: | + N개의 평행한 stakeholder/관점/카테고리 카드. 각 카드는 상단 원형 뱃지(역할 라벨), + 배경 이미지+컬러 오버레이, 본문 bullet 리스트(custom marker), 그리고 optional 하단 사진을 포함. + R13 (Custom-Marker Bullet List) sub-pattern을 카드 본문에 사용. + +# AI 블록 선택기가 매칭에 사용하는 조건 +when: + relation_type: + - parallel-stakeholders # 발주자/시공자/설계자 같이 여러 주체의 관점 + - multi-perspective # 같은 주제를 여러 시각으로 + - role-comparison # 역할별 책임/목표/특징 나열 + - parallel-categories # N개 카테고리의 병렬 항목 나열 + content_shape: + columns_count: { min: 2, max: 4 } + items_per_column: { min: 1, max: 12 } + +not_for: + - linear_process # 순차적 단계 + - single_main_message # 단일 핵심 메시지 + - hierarchical_tree # 트리/계층 + +# 슬롯 정의 +slots: + marker_icon: + type: image + required: true + description: bullet 마커 (체크박스/점/화살표/PNG 등). 모든 컬럼 공통. + + columns: + type: list + required: true + min: 2 + max: 4 + item: + role_label: + type: tuple + items: [string, string] # ["발주자", "목표"] — 2 line label + required: true + + role_color: + type: color # CSS color (hex, rgb, hsl) + required: true + description: 뱃지 라벨 색 + (옵션) overlay tint + + bg_image: + type: image + required: true + description: 카드 배경 사진/일러스트 + + overlay_image: + type: image + required: false # 없으면 단색 BG만 + description: 배경 위 컬러 오버레이 (보통 80% opacity) + + badge: + type: object + required: true + properties: + outer_image: { type: image, required: true } + inner_image: { type: image, required: true } + + bullet_items: + type: list + required: true + min: 1 + max: 12 + item: + text: + type: string + required: true + max_chars: 25 # zone width 기준 가이드 + compact: + type: boolean + default: false + description: 2줄 들어가는 긴 항목인 경우 true. 텍스트 길이로 자동 결정 가능. + + bottom_photo: + type: image + required: false # ★ 사진 없는 mdx도 매칭 가능 + description: 카드 하단 보조 사진. 없으면 bullet-list가 더 많은 공간 사용. + +# 디자인 토큰 (외부 override 가능) +tokens: + block_w: { default: 1280, unit: px } + block_h: { default: 948, unit: px } + font_body_size: { default: "0.95rem" } + font_body_lh: { default: 2.125 } # 단일 line item line-height ratio + font_body_lh_compact: { default: 1.25 } # 2-line item line-height ratio + col_gap: { default: "0.3%" } + card_padding_top: { default: "4.3%" } + marker_w: { default: "1.25rem" } + marker_h: { default: "1.25rem" } + marker_gap: { default: "0.45rem" } + +# zone 적합성 +min_size_px: + width: 720 + height: 540 +max_size_px: + width: 2600 + height: 2000 + +# 적용 sub-pattern +sub_patterns: + - id: bullet-list-with-marker + rule: R13 + location: card-body > .bullet-list + +# 우선순위 (다른 블록과 경합 시) +priority: 50 + +# 1:1 reference 와의 차이 (intentional) +diff_from_reference: + - "Figma 절대 좌표 → flex layout (반응형)" + - "Figma 픽셀 fixed values → CSS 변수 + % 비율" + - "letter-spacing 보정 제거 → 자연 wrap" + - "explicit
    제거 → 자연 wrap (텍스트 길이로 결정)" + - "compact class 수동 → 텍스트 길이로 자동 (또는 외부 입력)" + - "사진 absolute → flex item, optional" diff --git a/templates_staging/compare-vs-rows.example.yaml b/templates_staging/compare-vs-rows.example.yaml new file mode 100644 index 0000000..7e34894 --- /dev/null +++ b/templates_staging/compare-vs-rows.example.yaml @@ -0,0 +1,56 @@ +# Example: Frame 1171281195 (BIM vs DX 비교 표) +title: "BIM vs DX 비교 표 (Frame 1171281195)" + +header: + title: "BIM과 DX의 이해" + icon: "../../block-tests/assets/shared/b0e9fad5b03f4d9e368524976c20c9886392e17b.png" + +left_label: "BIM" +right_label: "DX" +vs_label: "vs." + +rows: + - category: "BIM/DX" + left: "Only 3D" + right: 'BIM << DX (ENG. + Management 포함)' + - category: "S/W" + left: '모델 제작용 상용 S/W
    [Civil 3D, Revit, Navisworks, Autocad]' + right: '제작 및 운영 (상용 + 전용 40~80개)
    [Rhino, Sketchup, Blender ..] + [EG-BIM 등]' + - category: "프로세스" + left: "기존 2D 설계방식 유지" + right: "근본적 문제의식을 통한 개선" + - category: "성과물" + left: "3D 모델 중심
    기존 성과품 유지" + right: "공학 정보 및 콘텐츠 연계에 집중
    도면, 수량, 시공계획 등 일식" + - category: "활 용" + left: "3D 모델에 의한 일반적 이해 향상" + right: "설계/시공의 혁신(개념의 재정립)" + - category: "확장성" + left: "(설계/시공/운영) 분야별 단절" + right: "전 생애주기 활용 시스템" + - category: "수행개념" + left: "단순화(오류) - 수동적/집단적 동질화" + right: "구체화(복잡) - 적극/구체적 실현 방안" + - category: "CIVIL + IT" + left: "소극적, 상용 기술에 의존" + right: "적극적, 주체적인 기술 접목/융합" + - category: "주 체" + left: "S/W 제작사 판매 정책에 의존" + right: "자체 수행능력 - 지속가능성 확보" + - category: "발주처" + left: "평준화, 국내 중심" + right: "차별화 및 경쟁력 확보, 해외 진출" + - category: "설계사" + left: "소규모 BIM팀 운영 + 단순교육에 집중" + right: "IT + CIVIL ENG 220명 운영 + 기술 개발" + - category: "시공사" + left: "국내 토목 소극적/해외 토목증가" + right: "분야 확장 모델 및 시스템" + +conclusion: + arrow: "../../block-tests/assets/shared/bf1755273910e17f7a012ce2d269a93cca9483ac.svg" + segments: + - text: "BIM은 건설산업의 DX(디지털전환)을 수행하는 과정에서 " + - text: "가장 기초가 되는 일부분" + highlight: true + - text: "임을 인지하는 것이 매우 중요" diff --git a/templates_staging/compare-vs-rows.html.j2 b/templates_staging/compare-vs-rows.html.j2 new file mode 100644 index 0000000..ac1a898 --- /dev/null +++ b/templates_staging/compare-vs-rows.html.j2 @@ -0,0 +1,209 @@ + + + + +{{ title|default("compare-vs-rows") }} + + + + + + + +
    + {% if header %} +
    + {% if header.icon %}
    {% endif %} +
    {{ header.title }}
    +
    + {% endif %} + +
    +
    {{ left_label }}
    +
    {{ vs_label|default("vs.") }}
    +
    {{ right_label }}
    +
    + +
    + {% for row in rows %} +
    +
    {{ row.left|safe }}
    +
    {{ row.category }}
    +
    {{ row.right|safe }}
    +
    + {% endfor %} +
    + + {% if conclusion %} +
    + {% if conclusion.arrow %}
    {% endif %} +
    + {% for seg in conclusion.segments -%} + {%- if seg.highlight -%}{{ seg.text }}{%- else -%}{{ seg.text }}{%- endif -%} + {%- endfor %} +
    +
    + {% endif %} +
    + + + diff --git a/templates_staging/compare-vs-rows.meta.yaml b/templates_staging/compare-vs-rows.meta.yaml new file mode 100644 index 0000000..253de06 --- /dev/null +++ b/templates_staging/compare-vs-rows.meta.yaml @@ -0,0 +1,86 @@ +pattern_id: compare-vs-rows +category: tables +version: 0.1.0 +provenance: + source_frame: "45:20 / Frame 1171281195" + reference_html: ../block-tests/bim-vs-dx-table.html + reference_render: ../block-tests/_renders/bim-vs-dx-table.png + +description: | + N개의 카테고리별 비교 행. 각 행 = 좌(A 진영) | 중앙(카테고리 라벨 pill) | 우(B 진영). + + 헤더(타이틀 + icon, optional) + 메인 pill (A vs. B) + 결론 박스(optional). + 좌/우는 색상으로 대조 (A: brown, B: green). + +when: + relation_type: + - comparison-2way-categorical + - vs-tabular + - before-after-multiline + - approach-comparison + content_shape: + rows: { min: 2, max: 20 } + has_categories: true + +not_for: + - single-statement + - hierarchical-tree + - cyclic-process + +slots: + header: + type: object + required: false + properties: + title: { type: string, required: true } + icon: { type: image, required: false } + + left_label: { type: string, required: true, description: "예: BIM" } + right_label: { type: string, required: true, description: "예: DX" } + vs_label: { type: string, default: "vs." } + + rows: + type: list + required: true + min: 2 + max: 20 + item: + category: { type: string, required: true } + left: { type: html_string, required: true, description: "… 가능" } + right: { type: html_string, required: true } + + conclusion: + type: object + required: false + properties: + arrow: { type: image, required: false } + segments: + type: list + item: + text: { type: string, required: true } + highlight: { type: boolean, default: false } + + # 색상 토큰 (per side) + left_color: { type: color, default: "#5c3714" } + right_color: { type: color, default: "#285b4a" } + pill_bg_from: { type: color, default: "rgb(40,91,74)" } + pill_bg_to: { type: color, default: "rgb(74,64,38)" } + conclusion_color: { type: color, default: "#000" } + conclusion_highlight: { type: color, default: "#ae3607" } + +tokens: + block_w: { default: 1280 } + row_font_size: { default: "1.4rem" } + cat_pill_w: { default: "16%" } + +min_size_px: { width: 800, height: 400 } +max_size_px: { width: 1920, height: 1500 } + +sub_patterns: [] +priority: 50 + +diff_from_reference: + - "absolute pixel positions → CSS grid + flex (반응형)" + - "12 rows hardcoded → {% for row in rows %}" + - "left/right color → CSS 변수" + - "헤더/결론 모두 optional" + - "main pill 텍스트 형식 → 좌/우/vs 별 슬롯" diff --git a/templates_staging/cycle-3way-intersect.example.yaml b/templates_staging/cycle-3way-intersect.example.yaml new file mode 100644 index 0000000..4488e42 --- /dev/null +++ b/templates_staging/cycle-3way-intersect.example.yaml @@ -0,0 +1,193 @@ +# Example data for cycle-3way-intersect template +# Reproduces frame 1171281211 (BIM 안전과 품질 / 생산성 향상 / 소통과 신뢰) content + +title: "BIM 3원 교차 다이어그램 (Frame 1171281211) — 템플릿 렌더 검증" + +# 기존 1:1 reference의 frame_1171281211 자산 디렉토리 사용 +bg_texture: "../../block-tests/assets/frame_1171281211/bg_texture.png" +decoration: true +arcs: + top: "../../block-tests/assets/frame_1171281211/arc_top.png" + left: "../../block-tests/assets/frame_1171281211/arc_side.png" + right: "../../block-tests/assets/frame_1171281211/arc_side.png" + +circles: + top: # 안전과 품질 (orange) + label: ["안전과", "품질"] + fill: + angle: "145.28deg" + from: "#FDC69E" + from_pct: "16.04%" + to: "#E0782C" + to_pct: "55.20%" + ring: + angle: "145.28deg" + from: "#BC652B" + from_pct: "16.04%" + to: "#A24200" + to_pct: "55.20%" + text_shadow: "#cc5200" + + bot_left: # 생산성 향상 (olive/grey) + label: ["생산성", "향상"] + fill: + angle: "218.84deg" + from: "#D5AA89" + from_pct: "14.08%" + to: "#737373" + to_pct: "92.67%" + ring: + angle: "153.95deg" + from: "#897445" + from_pct: "15.27%" + to: "#3E3523" + to_pct: "61.74%" + + bot_right: # 소통과 신뢰 (white→dark green) + label: ["소통과", "신뢰"] + fill: + angle: "145.90deg" + from: "#FFFFFF" + from_pct: "8.47%" + to: "#253E1F" + to_pct: "87.56%" + ring: + angle: "153.95deg" + from: "#296B55" + from_pct: "15.27%" + to: "#123328" + to_pct: "61.74%" + +accents: + # 안전과 품질 위 (top-left, top-right) → 安, 質 + top_left: + char: "安" + outer: + angle: "145.90deg" + from: "#D9C868" + from_pct: "8.47%" + to: "#DC670E" + to_pct: "87.56%" + inner: + angle: "145.28deg" + from: "#BC652B" + from_pct: "16.04%" + to: "#A24200" + to_pct: "55.20%" + top_right: + char: "質" + outer: + angle: "145.90deg" + from: "#D9C868" + from_pct: "8.47%" + to: "#DC670E" + to_pct: "87.56%" + inner: + angle: "145.28deg" + from: "#BC652B" + from_pct: "16.04%" + to: "#A24200" + to_pct: "55.20%" + + # 생산성 향상 좌 (left-top, left-bot) → 速, 利 + left_top: + char: "速" + outer: + angle: "218.84deg" + from: "#D5AA89" + from_pct: "14.08%" + to: "#737373" + to_pct: "92.67%" + inner: + angle: "153.95deg" + from: "#897445" + from_pct: "15.27%" + to: "#3E3523" + to_pct: "61.73%" + left_bot: + char: "利" + outer: + angle: "218.84deg" + from: "#D5AA89" + from_pct: "14.08%" + to: "#737373" + to_pct: "92.67%" + inner: + angle: "153.95deg" + from: "#897445" + from_pct: "15.27%" + to: "#3E3523" + to_pct: "61.73%" + + # 소통과 신뢰 우 (right-top, right-bot) → 通, 信 + right_top: + char: "通" + outer: + angle: "145.90deg" + from: "#60A451" + from_pct: "8.47%" + to: "#253E1F" + to_pct: "87.56%" + inner: + angle: "153.95deg" + from: "#296B55" + from_pct: "15.27%" + to: "#123328" + to_pct: "61.73%" + right_bot: + char: "信" + outer: + angle: "145.90deg" + from: "#60A451" + from_pct: "8.47%" + to: "#253E1F" + to_pct: "87.56%" + inner: + angle: "153.95deg" + from: "#296B55" + from_pct: "15.27%" + to: "#123328" + to_pct: "61.73%" + +side_labels: + # 안전과 품질 위 (top) + top_left: + title: "안전성 제고" + color: "#cc5200" + desc: + - "시설물의 요구성능의 만족," + - "건설중 및 운영중 안전확보" + top_right: + title: "품질 향상" + color: "#cc5200" + desc: + - "Copy & Paste로 하향 평준화된" + - "기존 성과물의 품질 향상" + + # 생산성 향상 옆 (mid-left, bot-left) + mid_left: + title: "신속ㆍ정확성 증진" + color: "#604f32" + desc: + - "Analogue 기반 업무를" + - "Digital화 하는 Process 혁신" + bot_left: + title: "비용저감ㆍ부가가치 창출" + color: "#604f32" + desc: + - "건설비용 및 유지관리비 감소," + - "인력투입 최소화 등 생산성 향상" + + # 소통과 신뢰 옆 (mid-right, bot-right) + mid_right: + title: "소통ㆍ이해 원할" + color: "#124133" + desc: + - "성과품, Solution을 통한" + - "사용 편리성, 협업 및 의사소통 강화" + bot_right: + title: "신뢰ㆍ투명성 강화" + color: "#124133" + desc: + - "3D 모델을 통한 오류" + - "최소화 및 Claim 예방" diff --git a/templates_staging/cycle-3way-intersect.html.j2 b/templates_staging/cycle-3way-intersect.html.j2 new file mode 100644 index 0000000..4af792b --- /dev/null +++ b/templates_staging/cycle-3way-intersect.html.j2 @@ -0,0 +1,349 @@ + + + + + +{{ title|default("cycle-3way-intersect") }} + + + + + + + +
    +
    +
    + + {# ─── Optional 배경 텍스처 ─── #} + {% if bg_texture %} +
    + {% endif %} + + {# ─── Optional 데코 그라데이션 ─── #} + {% if decoration %} +
    +
    +
    + {% endif %} + + {# ─── Optional 연결 아크 3개 ─── #} + {% if arcs %} +
    +
    +
    + {% endif %} + + {# ─── 메인 3원 outer ─── #} + {% for pos, c in [('top', circles.top), ('bot-left', circles.bot_left), ('bot-right', circles.bot_right)] %} +
    +
    +
    +
    +
    +

    {{ c.label[0] }}

    {{ c.label[1] }}

    +
    + {% endfor %} + + {# ─── 액센트 6원 (3 main circles × 2 corners each) ─── #} + {% for pos, a in [ + ('top-left', accents.top_left), ('top-right', accents.top_right), + ('left-top', accents.left_top), ('left-bot', accents.left_bot), + ('right-top', accents.right_top), ('right-bot', accents.right_bot)] %} + {% if a %} +
    +
    +
    +
    +
    {{ a.char }}
    + {% endif %} + {% endfor %} + + {# ─── 사이드 라벨 6 위치 × (title + desc) = 최대 12개 ─── #} + {% for pos, lbl in [ + ('top-left', side_labels.top_left), ('top-right', side_labels.top_right), + ('mid-left', side_labels.mid_left), ('mid-right', side_labels.mid_right), + ('bot-left', side_labels.bot_left), ('bot-right', side_labels.bot_right)] %} + {% if lbl %} + {% if lbl.title %} +
    {{ lbl.title }}
    + {% endif %} + {% if lbl.desc %} +
    + {% for line in lbl.desc %}

    {{ line }}

    {% endfor %} +
    + {% endif %} + {% endif %} + {% endfor %} + +
    +
    +
    + + + diff --git a/templates_staging/cycle-3way-intersect.meta.yaml b/templates_staging/cycle-3way-intersect.meta.yaml new file mode 100644 index 0000000..f5935e1 --- /dev/null +++ b/templates_staging/cycle-3way-intersect.meta.yaml @@ -0,0 +1,146 @@ +pattern_id: cycle-3way-intersect +category: visuals +version: 0.1.0 +provenance: + source_frame: "66:310 / Frame 1171281211" + reference_html: ../block-tests/bim-goals-3circles.html + reference_render: ../block-tests/bim_goals_final.png + +description: | + 3개의 큰 원이 교차하는 Venn-like 다이어그램. 각 원에 라벨, 컬러, + 코너 액센트 (한자/문자), 사이드 텍스트 라벨이 부착됨. + + 이 패턴은 기하학적으로 3-원에 특화되어 있음. 2-원이나 4-원은 별도 패턴 + (cycle-2way-intersect, cycle-4way-intersect)으로 분리. + +when: + relation_type: + - intersection # 3개의 개념이 교차/공통 + - venn-3 # 3원 벤 + - integration # 3 영역의 통합 + - holistic-view # 전체적 조감 + content_shape: + main_concepts: { exact: 3 } + has_visual_emphasis: true + +not_for: + - linear_process + - simple_list + - hierarchical_tree + - parallel_2_or_4 + +slots: + # 3 main circles at fixed geometric positions + circles: + type: object + required: true + properties: + top: + type: object + required: true + properties: + label: { type: tuple, items: [string, string], required: true } # ["안전과", "품질"] + fill: { type: gradient, required: true } # {from, to, angle?, from_pct?, to_pct?} + ring: { type: gradient, required: true } + text_shadow: { type: color, required: false } # 글로우 효과 색 + bot_left: + type: object + required: true + properties: + label: { type: tuple, items: [string, string], required: true } + fill: { type: gradient, required: true } + ring: { type: gradient, required: true } + text_shadow: { type: color, required: false } + bot_right: + type: object + required: true + properties: + label: { type: tuple, items: [string, string], required: true } + fill: { type: gradient, required: true } + ring: { type: gradient, required: true } + text_shadow: { type: color, required: false } + + # 6 accent positions, all optional + accents: + type: object + required: false + description: 각 main circle의 코너에 부착되는 작은 액센트 원 + 한자/문자 + properties: + top_left: { type: accent, required: false } # 안전과 품질 위 좌 + top_right: { type: accent, required: false } # 안전과 품질 위 우 + left_top: { type: accent, required: false } # 생산성 향상 좌 위 + left_bot: { type: accent, required: false } # 생산성 향상 좌 아래 + right_top: { type: accent, required: false } # 소통과 신뢰 우 위 + right_bot: { type: accent, required: false } # 소통과 신뢰 우 아래 + accent_schema: + char: { type: string, required: true, max_length: 2 } + outer: { type: gradient, required: true } + inner: { type: gradient, required: true } + + # 6 side label positions × (title + desc) = max 12 + side_labels: + type: object + required: false + description: 각 main circle 옆/위에 붙는 보조 텍스트 라벨 + properties: + top_left: { type: label, required: false } + top_right: { type: label, required: false } + mid_left: { type: label, required: false } + mid_right: { type: label, required: false } + bot_left: { type: label, required: false } + bot_right: { type: label, required: false } + label_schema: + title: { type: string, required: false } + color: { type: color, default: "#000" } + desc: { type: list, items: string, required: false, max_lines: 3 } + + # Optional decorative elements + bg_texture: + type: image + required: false + description: 하단 배경 텍스처 (multiply blend) + decoration: + type: boolean + required: false + default: false + description: 회전 그라데이션 데코 표시 여부 + arcs: + type: object + required: false + description: 원 사이 연결 아크 (PNG) + properties: + top: { type: image, required: false } + left: { type: image, required: false } + right: { type: image, required: false } + +# 디자인 토큰 +tokens: + block_w: { default: 1280, unit: px } + block_h: { default: 594, unit: px } + scale: { default: 0.620694, description: "1280 / 2062.205 (Figma 원본 너비)" } + +# zone 적합성 +min_size_px: + width: 960 + height: 480 +max_size_px: + width: 1920 + height: 900 + +# 적용 sub-pattern +sub_patterns: [] + +# 우선순위 +priority: 60 + +# 1:1 reference 와의 차이 +diff_from_reference: + - "콘텐츠 (라벨/색상/한자/사이드 텍스트) → 슬롯 변수화" + - "위치 hardcoded 유지 (3-way 기하학은 패턴 자체가 결정)" + - "bg_texture / decoration / arcs / accents / side_labels 모두 optional" + +# 향후 확장 메모 +future_patterns: + - cycle-2way-intersect: 2 원 교차 (별도 템플릿) + - cycle-4way-intersect: 4 원 교차 (별도 템플릿, 정사각 배치) + - cycle-Nway-circular: N 원이 원형으로 둘러싼 형태 (cos/sin 자동 배치) diff --git a/templates_staging/issues-paired-rows.example.yaml b/templates_staging/issues-paired-rows.example.yaml new file mode 100644 index 0000000..700abc1 --- /dev/null +++ b/templates_staging/issues-paired-rows.example.yaml @@ -0,0 +1,22 @@ +title: "현황 및 문제점 (Frame 1171281194)" + +header: + title: "현황 및 문제점" + icon: "../../block-tests/assets/shared/b0e9fad5b03f4d9e368524976c20c9886392e17b.png" + +pill_bg: "../../block-tests/assets/shared/b47d2977a36ab6a0c180d8f090afff798c44ed27.png" + +rows: + - left: { label: "개념 부재", text: "BIM을 Digital 전환의 개념이 아닌, CAD의 확장판으로 해석하여 3D를 그리는 수단 정도로만 인식" } + right: { label: "잘못된 접근방식", text: "단순 업무효율 증진을 위한 도구로만 인식하여, 기술자들이 도구로서 사용만 할 수 있도록 교육시키면 된다고 판단" } + + - left: { label: "방향성 상실", text: "대형 S/W 개발 및 판매회사에서 제시된 내용과 방향대로 따라하므로써, 국내는 자체적 목표설정 기능을 상실" } + right: { label: "전제조건 오류", text: "건축과 토목이 유사하다는 전제하에 Library를 활용하는 건축에서 수행하고 있는 방식을 토목에도 동일하게 적용" } + pills_bottom: true + + - left: { label: "수행주체 혼란", text: "학자, 발주처 중심으로 S/W 판매회사에서 제시한 기술 수행 방식의 변화를 주도, 실행주체인 기업과 기술자들은 기존의 방식을 고수하면서 눈치만 보는 실정" } + right: { label: "수행방식 무지", text: "기존 2D 설계의 결과가 옳다는 전제와 3D 설계를 수행/검토해본 경험이 없어, 전환설계의 개념으로 수행하므로써 비용과 시간이 추가로 소요, 높은 수준의 품질확보 불가" } + + - left: { label: "외산S/W 기술예속", text: "단순 외산 범용S/W만 사용하면 BIM이 될 수 있을 것이라는 안일한 생각으로 접근하므로 외국 대형S/W 회사에 기술예속 가속" } + right: { label: "H/W 미비", text: "도면작성 중심의 기존 설계방식과 동일한 개념으로 생각하여, 탁상용 개인 PC, Monitor 사용기반 정도에 머물러 있어 실무적용에 필요한 높은 수준의 모델 등의 표출은 한계" } + pills_bottom: true diff --git a/templates_staging/issues-paired-rows.html.j2 b/templates_staging/issues-paired-rows.html.j2 new file mode 100644 index 0000000..48c9c50 --- /dev/null +++ b/templates_staging/issues-paired-rows.html.j2 @@ -0,0 +1,185 @@ + + + + +{{ title|default("issues-paired-rows") }} + + + + + + +
    + {% if header %} +
    + {% if header.icon %}
    {% endif %} +
    {{ header.title }}
    +
    + {% endif %} + +
    + {% for row in rows %} +
    + {% if not row.pills_bottom %} + +
    +
    + {% if pill_bg %}{% endif %} + {{ row.left.label }} +
    +
    + {% if pill_bg %}{% endif %} + {{ row.right.label }} +
    +
    + {% endif %} + +
    +
    {{ row.left.text|safe }}
    +
    +
    {{ row.right.text|safe }}
    +
    + + {% if row.pills_bottom %} + +
    +
    + {% if pill_bg %}{% endif %} + {{ row.left.label }} +
    +
    + {% if pill_bg %}{% endif %} + {{ row.right.label }} +
    +
    + {% endif %} +
    + {% endfor %} +
    +
    + + diff --git a/templates_staging/issues-paired-rows.meta.yaml b/templates_staging/issues-paired-rows.meta.yaml new file mode 100644 index 0000000..332bd40 --- /dev/null +++ b/templates_staging/issues-paired-rows.meta.yaml @@ -0,0 +1,33 @@ +pattern_id: issues-paired-rows +category: tables +version: 0.1.0 +provenance: + source_frame: "45:19 / Frame 1171281194" + reference_html: ../block-tests/bim-issues-paired.html + +description: | + N개의 행, 각 행 = 좌 이슈 + 우 이슈 (라벨 pill + 본문). 가운데 세로 구분선. + pill 위치가 행마다 top/bottom 교차 가능. 현황 분석, 문제점 진단, 대조 분석에 적합. + +when: + relation_type: [paired-issues, dual-diagnosis, problem-pairs] + content_shape: + rows: { min: 2, max: 8 } + per_row: { exact: 2 } + +slots: + header: { type: object, required: false } + pill_bg: { type: image, required: false } + rows: + type: list + required: true + min: 2 + max: 8 + item: + left: { label: string, text: html_string } + right: { label: string, text: html_string } + pills_bottom: { type: boolean, default: false } + +min_size_px: { width: 800, height: 400 } +sub_patterns: [] +priority: 45 diff --git a/templates_staging/quadrant-2x2-issues.example.yaml b/templates_staging/quadrant-2x2-issues.example.yaml new file mode 100644 index 0000000..21a0621 --- /dev/null +++ b/templates_staging/quadrant-2x2-issues.example.yaml @@ -0,0 +1,57 @@ +# Example: Frame 1171281193 (BIM 수행실정) +title: "BIM 수행실정 — 2x2 진단 (Frame 1171281193)" + +card_bg_image: "../../block-tests/assets/shared/fdcafc1b6ab639b9a4c75ce36014f3b16ea0fbc1.png" + +quadrants: + - label: "정책 집행" + issues: + - headline: "인정주의 정책 집행" + bullets: + - "수행능력이 없는 업체 선정 후 품질을 낮추어 시행하고 낮은 수준의 성과품을 실적으로 수용" + - "모든 설계사가 할 수 있다는 전제하에 정책 시행" + - "발주처의 책임회피를 위한 제도 운영" + - headline: "적용효과도 사례도 없는 방침부터 남발" + bullets: + - "효과 검증도 없는 지침부터 만들고보는 현실" + - "BIM/DX 적용효과를 판단할 사례 부재" + - "대부분 홍보목적으로 포장되어 투자 대비 효과 없음" + + - label: "수행 개념" + issues: + - headline: "공학적 개념 정립 부재" + bullets: + - "DX 개념과 BIM 기술의 차이점의 이해부족으로 전략적 접근방식과 기술적 도구 사이의 혼란만 가중" + - "인프라시설의 DX의 기본은 단순 모델이 아닌 위치기반 3D 모델(BIM)을 활용한 과정(Process)의 혁신" + - "기술적 도구인 3D 모델 제작S/W에 과도하게 의존" + - headline: "'본업 기술력 확보' 우선의 개념 부재" + bullets: + - "깊은 기반지식 바탕의 기술이 축적된 메뉴얼에 대한 중요성 및 필요성에 대한 이해 부족" + - "자체 기술개발 없이 국내 발주처의 지침과 방침에만 의존한 낮은 기술력" + + - label: "근본 취지의 이해부족" + issues: + - headline: "기술투자 없는 성과 창출 기대" + bullets: + - "이전의 CAD 도입·확장 시기처럼 상용화된 BIM S/W만 구입·구독하면 될거라는 안일한 생각" + - "기술개발 노력없이 과거처럼 하면 된다는 착각" + - headline: "엔지니어링 S/W에 대한 개념 부재" + bullets: + - "다양한 엔지니어링 S/W의 특성에 대한 깊은 이해없이 단기 비용절감에 치우쳐 범용 S/W 선택" + - "대형 Global S/W 회사에 과도한 의존과 이에 예속되는 방침 남발로 전용S/W 소멸" + + - label: "지속적 투자 의지 부재" + issues: + - headline: "근본적인 역할은 회피" + bullets: + - "엔지니어의 근본적인 역할인 과정의 혁신과 결과물의 변화에 대한 고민 부재" + - "기술자가 직접 3D 모델을 만들고 수정하며 설계를 수행해야하는데 정작 모델제작은 외주처리" + - headline: "과거의 타성에 머무르고 있는 업계" + bullets: + - "설계/감리/시공 임직원들의 디지털무지와 전략적 무지" + - "S/W 판매업체의 기능적 사용법을 BIM 교육으로 착각" + - "교육을 통한 인재양성보다는 당장 실무활용이 가능한 타사의 인력을 빼오기에 집중" + +center_quote: + text: "Rome wasn't\nBuilt in a day!" + image: "../../block-tests/assets/shared/922ee6f4bea1434652ffc08f962086052286b6c5.png" diff --git a/templates_staging/quadrant-2x2-issues.html.j2 b/templates_staging/quadrant-2x2-issues.html.j2 new file mode 100644 index 0000000..1cb07aa --- /dev/null +++ b/templates_staging/quadrant-2x2-issues.html.j2 @@ -0,0 +1,181 @@ + + + + +{{ title|default("quadrant-2x2-issues") }} + + + + + + + +
    + {% set positions = [('tl', 0), ('tr', 1), ('bl', 2), ('br', 3)] %} + {% for pos, idx in positions %} + {% set q = quadrants[idx] %} +
    +
    {{ q.label }}
    +
    + {% for issue in q.issues %} +
    +
    {{ issue.headline }}
    +
      + {% for b in issue.bullets %}
    • {{ b }}
      • {% endfor %} +
    +
    + {% endfor %} +
    +
    + {% endfor %} + + {% if center_quote %} +
    + {% if center_quote.image %}{% endif %} +
    {{ center_quote.text }}
    +
    + {% endif %} +
    + + + diff --git a/templates_staging/quadrant-2x2-issues.meta.yaml b/templates_staging/quadrant-2x2-issues.meta.yaml new file mode 100644 index 0000000..93f8357 --- /dev/null +++ b/templates_staging/quadrant-2x2-issues.meta.yaml @@ -0,0 +1,71 @@ +pattern_id: quadrant-2x2-issues +category: emphasis +version: 0.1.0 +provenance: + source_frame: "45:18 / Frame 1171281193" + reference_html: ../block-tests/bim-issues-quadrant.html + reference_render: ../block-tests/_renders/bim-issues-quadrant.png + +description: | + 2×2 그리드 진단 패턴. 4개 카테고리 각각에 N개의 issue (red headline + bullet body). + 중앙에 optional 인용구 원 (강조 메시지/명언). 문제 진단, SWOT, 4-quadrant 분석에 적합. + +when: + relation_type: + - 4-quadrant-diagnosis + - issue-categorization + - swot + - 2x2-comparison + content_shape: + quadrants: { exact: 4 } + issues_per_quadrant: { min: 1, max: 5 } + +not_for: + - linear-process + - single-statement + +slots: + quadrants: + type: list + required: true + min: 4 + max: 4 + item: + label: { type: string, required: true } + issues: + type: list + required: true + min: 1 + max: 5 + item: + headline: { type: string, required: true } + bullets: { type: list, items: string, min: 1 } + + center_quote: + type: object + required: false + properties: + text: { type: string, required: true } + image: { type: image, required: false } + + card_bg_image: { type: image, required: false } + headline_color: { type: color, default: "#ff0000" } + body_color: { type: color, default: "#ffffff" } + header_bg: { type: gradient_string, default: "linear-gradient(90deg, #4a4028 0%, #285b4a 100%)" } + header_text_color: { type: color, default: "#ffffff" } + +tokens: + block_w: { default: 1280 } + row_gap: { default: "0.6rem" } + +min_size_px: { width: 800, height: 600 } +max_size_px: { width: 1920, height: 1500 } + +sub_patterns: [] +priority: 50 + +diff_from_reference: + - "absolute pixel positions → CSS grid 2×2" + - "4 quadrants는 fixed (2x2 패턴 정의)" + - "issues[N] 개수 자유" + - "center quote optional" diff --git a/templates_staging/render.py b/templates_staging/render.py new file mode 100644 index 0000000..72d4889 --- /dev/null +++ b/templates_staging/render.py @@ -0,0 +1,71 @@ +""" +Jinja2 템플릿 렌더러 — templates_staging/ 검증용. + +사용법: + python render.py {pattern_id} {example_suffix} + + 예: + python render.py cards-3col-persona example + → templates_staging/cards-3col-persona.example.yaml 데이터로 + templates_staging/cards-3col-persona.html.j2 템플릿 렌더 + → 결과: templates_staging/_renders/cards-3col-persona.example.html + + python render.py cards-3col-persona example-no-photos + → 사진 없는 케이스 검증 + +작업 디렉토리: figma_to_html_agent/templates_staging/ +""" + +import os +import sys +from pathlib import Path + +try: + import yaml +except ImportError: + print("yaml 미설치. pip install pyyaml") + sys.exit(1) + +try: + from jinja2 import Template +except ImportError: + print("jinja2 미설치. pip install jinja2") + sys.exit(1) + + +def render(pattern_id: str, example_suffix: str = "example") -> str: + base = Path(__file__).parent + + template_path = base / f"{pattern_id}.html.j2" + data_path = base / f"{pattern_id}.{example_suffix}.yaml" + output_dir = base / "_renders" + output_dir.mkdir(exist_ok=True) + output_path = output_dir / f"{pattern_id}.{example_suffix}.html" + + if not template_path.exists(): + raise FileNotFoundError(f"템플릿 없음: {template_path}") + if not data_path.exists(): + raise FileNotFoundError(f"데이터 없음: {data_path}") + + with open(template_path, "r", encoding="utf-8") as f: + template = Template(f.read()) + + with open(data_path, "r", encoding="utf-8") as f: + data = yaml.safe_load(f) + + html = template.render(**data) + + with open(output_path, "w", encoding="utf-8") as f: + f.write(html) + + print(f"✓ 렌더 완료: {output_path}") + return str(output_path) + + +if __name__ == "__main__": + if len(sys.argv) < 2: + print(__doc__) + sys.exit(1) + pattern_id = sys.argv[1] + suffix = sys.argv[2] if len(sys.argv) > 2 else "example" + render(pattern_id, suffix) diff --git a/templates_staging/split-panel-numbered.html.j2 b/templates_staging/split-panel-numbered.html.j2 new file mode 100644 index 0000000..baf64bf --- /dev/null +++ b/templates_staging/split-panel-numbered.html.j2 @@ -0,0 +1,122 @@ + + + + +{{ title|default("split-panel-numbered") }} + + + + + +
    + {% if header %} +
    + {% if header.icon %}
    {% endif %} +
    {% for seg in header.segments -%} + {%- if seg.style == 'highlight' -%}{{ seg.text }} + {%- elif seg.style == 'sub' -%}{{ seg.text }} + {%- else -%}{{ seg.text }}{%- endif -%} + {%- endfor %}
    +
    + {% endif %} + +
    +
    + {% if left_bg %}{% endif %} +
    + {% for cat in left_categories %} +
    +
    + {% if cat.header_image %}{% endif %} + {{ cat.title }} +
    +
    {{ cat.items|join('
    ')|safe }}
    +
    + {% endfor %} +
    +
    + +
    + {% for item in right_items %} +
    + {% if item.bar_bg %}{% endif %} + {% if item.badge %}
    {% endif %} +
    {{ item.text }}
    +
    + {% endfor %} +
    +
    +
    + + diff --git a/templates_staging/split-panel-numbered.meta.yaml b/templates_staging/split-panel-numbered.meta.yaml new file mode 100644 index 0000000..6f4d8c4 --- /dev/null +++ b/templates_staging/split-panel-numbered.meta.yaml @@ -0,0 +1,43 @@ +pattern_id: split-panel-numbered +category: cards +version: 0.1.0 +provenance: + source_frame: "45:27 / Frame 1171281202" + reference_html: ../block-tests/bim-sw-overview.html + +description: | + 좌: 카테고리별 리스트 (BG 이미지 + 헤더 bar + 항목 나열) + 우: 번호 badge + 설명 텍스트 N개 + 중간 장식 (optional). 소프트웨어 개요, 도구 설명, 기능 분류 등에 적합. + +when: + relation_type: [tool-overview, software-catalog, split-detail] + content_shape: + left_categories: { min: 2, max: 5 } + right_items: { min: 3, max: 8 } + +slots: + header: { type: object, required: false } + left_bg: { type: image, required: false } + left_categories: + type: list + required: true + min: 2 + max: 5 + item: + title: string + header_image: { type: image, required: false } + items: { type: list, items: string } + right_items: + type: list + required: true + min: 3 + max: 8 + item: + badge: { type: image, required: false } + bar_bg: { type: image, required: false } + text: string + +min_size_px: { width: 800, height: 400 } +sub_patterns: [] +priority: 40 diff --git a/templates_staging/stacked-arrow-list.example.yaml b/templates_staging/stacked-arrow-list.example.yaml new file mode 100644 index 0000000..85bf7c2 --- /dev/null +++ b/templates_staging/stacked-arrow-list.example.yaml @@ -0,0 +1,19 @@ +title: "시공상세 정보물 (Frame 1171281180)" + +title_segments: + - { text: "시공 전 모델 기반 " } + - { text: "시공상세 정보물", highlight: true } + - { text: " 이용한 시공계획 작성 지원" } + +arrow_icon: "../../block-tests/assets/shared/29c778b566aca6778f505874f21670de129351f8.svg" + +left_decoration: + arc: "../../block-tests/assets/shared/ff649c28fd98518d6b48b9e5451fe1da4c1e95d5.svg" + label: "시공
    상세
    정보물" + +items: + - { text: "3차원 형상의 정보 모델과 Data Base (D/B)", color: "#fb5915" } + - { text: "목적물, 가시설 등의 단계별 시공 시뮬레이션", color: "#e79000" } + - { text: "시공 및 안전교육에 도움이 되는 영상물 등 성과물", color: "#e9a804" } + - { text: "모델 또는 D/B, 시뮬레이션으로 부터 추출한 도면", color: "#919f00" } + - { text: "모델에서 추출이 곤란한 안전, 유의사항, 개념도 등 상세 표현 도면", color: "#0d6361" } diff --git a/templates_staging/stacked-arrow-list.html.j2 b/templates_staging/stacked-arrow-list.html.j2 new file mode 100644 index 0000000..89639be --- /dev/null +++ b/templates_staging/stacked-arrow-list.html.j2 @@ -0,0 +1,120 @@ + + + + +{{ title|default("stacked-arrow-list") }} + + + + + +
    +
    +
    +
    {% for seg in title_segments -%} + {%- if seg.highlight -%}{{ seg.text }}{%- else -%}{{ seg.text }}{%- endif -%} + {%- endfor %}
    +
    +
    + {% if left_decoration %} +
    +
    + {% if left_decoration.label %} +
    {{ left_decoration.label|safe }}
    + {% endif %} +
    + {% endif %} +
    + {% for item in items %} +
    + {% if arrow_icon %}
    {% endif %} +
    {{ item.text }}
    +
    + {% endfor %} +
    +
    +
    + + diff --git a/templates_staging/stacked-arrow-list.meta.yaml b/templates_staging/stacked-arrow-list.meta.yaml new file mode 100644 index 0000000..d036e6f --- /dev/null +++ b/templates_staging/stacked-arrow-list.meta.yaml @@ -0,0 +1,32 @@ +pattern_id: stacked-arrow-list +category: cards +version: 0.1.0 +provenance: + source_frame: "45:5 / Frame 1171281180" + reference_html: ../block-tests/bim-info-products.html + +description: | + N개의 항목이 세로로 쌓인 리스트. 각 항목은 rounded pill + 색상 border-bottom + 화살표 마커. + 좌측 optional arc 장식 + 세로 라벨. 항목별 색상이 다른 계단식 시각 리스트. + +when: + relation_type: [enumerated-list, tiered-items, stepped-breakdown] + content_shape: + items: { min: 3, max: 8 } + +slots: + title_segments: { type: list, item: { text: string, highlight: boolean }, required: true } + arrow_icon: { type: image, required: false } + left_decoration: { type: object, required: false, properties: { arc: image, label: html_string } } + items: + type: list + required: true + min: 3 + max: 8 + item: + text: { type: string, required: true } + color: { type: color, required: true, description: "border-bottom 색" } + +min_size_px: { width: 640, height: 300 } +sub_patterns: [] +priority: 40 diff --git a/templates_staging/statement-pill-highlight.example.yaml b/templates_staging/statement-pill-highlight.example.yaml new file mode 100644 index 0000000..6bdb128 --- /dev/null +++ b/templates_staging/statement-pill-highlight.example.yaml @@ -0,0 +1,14 @@ +# Example: Frame 1171281207 (BIM future statement) +title: "BIM 미래 선언 메시지 (Frame 1171281207) — 템플릿 검증" + +bg_image: "../../block-tests/assets/shared/527bd7809f4b2e5f3cd42f2e713ccbfb37537d82.png" + +text_segments: + - text: "수행과정 연속화와 관리체계 일원화된 형태의 " + - text: "전용ㆍ전문 S/W 개발" + highlight: true + - text: " 없이는 미래가 없다." + +block_w: 1280 +block_h: 60 +font_size: "1.7rem" diff --git a/templates_staging/statement-pill-highlight.html.j2 b/templates_staging/statement-pill-highlight.html.j2 new file mode 100644 index 0000000..a00cac4 --- /dev/null +++ b/templates_staging/statement-pill-highlight.html.j2 @@ -0,0 +1,97 @@ + + + + + +{{ title|default("statement-pill-highlight") }} + + + + + + + +
    + +
    + + + diff --git a/templates_staging/statement-pill-highlight.meta.yaml b/templates_staging/statement-pill-highlight.meta.yaml new file mode 100644 index 0000000..5fdfb4b --- /dev/null +++ b/templates_staging/statement-pill-highlight.meta.yaml @@ -0,0 +1,64 @@ +pattern_id: statement-pill-highlight +category: emphasis +version: 0.1.0 +provenance: + source_frame: "51:170 / Frame 1171281207" + reference_html: ../block-tests/bim-future-statement.html + reference_render: ../block-tests/_renders/bim-future-statement.png + +description: | + 단일 line 메시지 banner. pill 모양 (border-radius = height/2). 인라인 highlight span 지원. + 강조 메시지, 결론, 명언, 슬로건에 적합. + +when: + relation_type: + - emphasis-statement + - conclusion-message + - slogan + - quote-emphasis + content_shape: + text_length: { min: 5, max: 80 chars } + has_highlight: optional + +not_for: + - multi-line-content + - list + - structured-data + +slots: + text_segments: + type: list + required: true + min: 1 + item: + text: { type: string, required: true } + highlight: { type: boolean, default: false } + + bg_image: { type: image, required: false, description: "배경 PNG (없으면 bg_color 단색)" } + bg_color: { type: color, default: "#3a4a2f" } + text_color: { type: color, default: "#ffffff" } + highlight_color: { type: color, default: "#fe3" } + text_shadow_color: { type: color, default: "rgba(0,0,0,0.5)" } + text_shadow_blur: { type: string, default: "4px" } + font_size: { type: string, default: "1.6rem" } + font_weight: { type: number, default: 700 } + +tokens: + block_w: { default: 1280, unit: px } + block_h: { default: 60, unit: px } + slide_h: { default: 720, unit: px } + +min_size_px: + width: 480 + height: 40 +max_size_px: + width: 1920 + height: 120 + +sub_patterns: [] +priority: 30 + +diff_from_reference: + - "bg_image optional → bg_color fallback" + - "text_segments list → 임의 개수의 highlight span 지원" + - "font/색상/그림자 모두 CSS 변수"