Kyeongmin/C.E.L_Slide_test2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

IMPROVEMENT Phase A~D + Phase 2 전체 반영

Browse Source 
## IMPROVEMENT (Phase A~D)
- A-1: 4단계 Sonnet 디자인 조정 (_adjust_design) — CSS 변수 cascade
- A-2: 5단계 HTML 전문 프롬프트 전달
- A-3: shrink/expand 하드코딩 제거 → Sonnet target_ratio 기반
- A-4: rewrite action 구현
- A-5: overflow: visible (area 레벨 텍스트 잘림 방지)
- A-6: object-fit cover → contain (이미지 crop 방지)
- A-7: table-layout: fixed
- A-8: container query 폰트 스케일링
- B-1: details-block 템플릿 신규 (CSS 변수만 사용)
- B-2: 인쇄 시 details 자동 펼침 JS
- B-3: catalog에 details-block 등록
- B-4/B-5: images[]/tables[] 상세 판단 + fallback 3곳 동기화
- B-8: fallback card-grid → topic-header + char_guide 제거
- C-1: CLAUDE.md gradient 원칙 완화
- C-3: border-radius 9개 파일 var(--radius) 통일
- C-4: box-shadow 2레벨 → 1레벨
- D-0: 이미지 경로 입력 UI + API base_path
- D-1: Pillow 의존성 + image_utils.py
- D-2~D-4: 이미지 비율/축소방지 프롬프트 전달
- D-5: HTML에 이미지 base64 삽입

## Phase 2 (다른 Claude 작업)
- P2-A: FAISS 블록 검색 (bge-m3, 46개 블록)
- P2-B: SVG N개 자동 배치 (svg_calculator.py)
- P2-C: Opus 블록 추천 (Kei API 경유)
- P2-D: 5단계 재검토 루프 강화 (MAX_REVIEW_ROUNDS=2)
- P2-E: details-block fallback 연동

## 버그 수정 (BF-8~10)
- BF-8: 컨테이너 예산 기반 블록 배치
- BF-9: grid와 Sonnet 역할 분리
- BF-10: catalog mtime 캐시 자동 갱신

## 블록 라이브러리
- 46개 블록 (6 카테고리), catalog/BLOCK_SLOTS/INDEX 동기화
- 구 블록 제거 (quote-block, card-grid, comparison)
- 13개 _legacy 블록 보존

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
이경민
2026-03-25 18:40:20 +09:00
parent 91d5779a16
commit 9bd9dad9ac
220 changed files with 19115 additions and 667 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
CLAUDE.md
View File

@@ -217,59 +217,18 @@ reference 꼭지 있음 → sidebar-right
## 블록 타입 정의
각 블록은 독립적인 CSS 컴포넌트로, 슬롯(교체 가능한 위치)을 가진다.
6개 카테고리, 18개 블록 변형. **상세는 `templates/blocks/INDEX.md` 참조.**
### 1. 비교 블록 (comparison)
- 2단 병렬 레이아웃
- 슬롯: 좌측 제목/내용, 우측 제목/내용
- 용도: A vs B, 장단점, Before/After
| 카테고리 | 블록 수 | 구현 방식 | 주요 블록 |
|---------|--------|---------|---------|
| headers/ | 2 | HTML/CSS | section-title-with-bg, topic-left-right |
| cards/ | 3 | HTML/CSS | card-image-3col, card-text-grid, card-dark-overlay |
| tables/ | 1 | HTML/CSS | compare-3col-badge |
| visuals/ | 4 | **SVG** (수학적 좌표 계산) | venn-diagram, circle-gradient, compare-pill-pair, process-horizontal |
| emphasis/ | 5 | HTML/CSS | quote-left-border, conclusion-accent-bar, comparison-2col, banner-gradient, quote-question |
| media/ | 3 | HTML/CSS + 이미지 | image-row-2col, image-grid-2x2, image-side-text |
### 2. 카드 그리드 (card-grid)
- 2~4열 카드 배열
- 슬롯: 카드별 아이콘/제목/설명/출처
- 용도: 용어 정의, 개념 설명, 기능 나열
### 3. 관계도 (relationship)
- 벤 다이어그램 또는 트리 구조
- 슬롯: 중심 요소, 하위 요소들, 관계 설명
- 용도: 상위-하위 관계, 포함 관계, 기술 융합
### 4. 프로세스 (process)
- 가로 또는 세로 단계 흐름
- 슬롯: 단계별 번호/제목/설명
- 용도: 절차, 워크플로우, 파이프라인
### 5. 타임라인 (timeline)
- 시간 축 기반 배치
- 슬롯: 날짜/제목/설명
- 용도: 연혁, 로드맵, 일정
### 6. 핵심 지표 (big-number)
- 큰 숫자 + 보조 텍스트
- 슬롯: 숫자, 단위, 설명
- 용도: KPI, 통계, 성과 수치
### 7. 강조 인용 (quote-block)
- 배경색 + 좌측 라인 + 인용 텍스트
- 슬롯: 인용 텍스트, 출처
- 용도: 문제 제기, 핵심 메시지, 정의
### 8. 결론 바 (conclusion-bar)
- 하단 전체 폭 강조 영역
- 슬롯: 핵심 한 줄
- 용도: 슬라이드 결론, 요약 메시지
### 9. 비교 테이블 (comparison-table)
- 테이블 형식의 다항목 비교
- 슬롯: 행/열 헤더, 셀 내용
- 용도: 다차원 비교, 기능 매트릭스
### 10. 이미지 블록 (image-block)
- 이미지 + 캡션
- 3가지 변형: 전체너비(image-full), 텍스트옆(image-side), 썸네일(image-thumb)
- 슬롯: 이미지 경로, 캡션 텍스트, 이미지 크기 정보
- 용도: 도표, 다이어그램, 근거 자료, 문서 참조
- CSS: object-fit: contain (비율 유지, 잘리지 않음)
각 블록은 독립적인 컴포넌트로 슬롯(교체 가능한 위치)을 가지며, `catalog.yaml`에 when/not_for/slots가 정의되어 있다.
---
@@ -365,10 +324,10 @@ Pretendard 폰트 크기별 참고값 (1회 측정, 상수 저장):
- 정보 계층을 시각적으로 명확히 표현
### DON'T (하지 않는 것)
- 그라데이션 배경 금지
- HTML/CSS 블록의 배경 그라데이션 금지 (**SVG 시각화 블록, 디자인 의도가 명확한 블록(배너, 오버레이, 콜아웃 등)은 허용**)
- CSS 애니메이션/트랜지션 금지
- 호버 효과 금지
- 그림자(box-shadow) 최소화 (1개 레벨만)
- 그림자(box-shadow) 최소화 (1개 레벨만. SVG filter는 예외)
- 다크 테마 금지 (요청하지 않는 한)
- 둥근 모서리 과다 사용 금지 (border-radius 최대 8px)
- 텍스트를 자르지 않는다 (디자인이 텍스트에 맞춘다)
@@ -425,24 +384,93 @@ Pretendard 폰트 크기별 참고값 (1회 측정, 상수 저장):
---
## 교본 (레퍼런스) 관리
## 블록 라이브러리
### 핵심 원칙: 변형 기반 선택
하나의 블록 유형에 **여러 변형(variation)**이 존재하고, 디자인 팀장이 콘텐츠 성격에 맞는 변형을 **검색하여 선택**한다.
```
콘텐츠 분석 → "이 꼭지는 좌:질문 우:설명 구조다"
↓
블록 라이브러리 검색 → headers/ 카테고리에서 후보 3~4개 반환
↓
팀장이 선택 → topic-left-right.html
```
### 카테고리 구조 (6개, 18개 블록)
```
templates/blocks/
├── INDEX.md ← 전체 인덱스 + 추가 예정 목록
├── headers/ (2개) ← 타이틀, 꼭지 헤더
│ ├── section-title-with-bg.html 배경 이미지 + 영문/한글 타이틀
│ └── topic-left-right.html 좌:파란 제목 + 우:설명
├── cards/ (3개) ← 카드 계열 (정보 나열)
│ ├── card-image-3col.html 상단 이미지 + 하단 텍스트 3열
│ ├── card-text-grid.html 텍스트만 카드 2~4열
│ └── card-dark-overlay.html 다크 이미지 배경 + 흰 텍스트 오버레이
├── tables/ (1개) ← 표/비교 계열
│ └── compare-3col-badge.html A|VS배지|B 3단 비교
├── visuals/ (4개) ← 시각 요소 — **SVG로 제작**
│ ├── circle-gradient.html 파란 그라데이션 원 + 텍스트
│ ├── compare-pill-pair.html 둥근 테두리 박스 2개 + VS
│ ├── venn-diagram.html 벤 다이어그램 (**SVG premium, 수학적 계산**)
│ └── process-horizontal.html 가로 단계 흐름
├── emphasis/ (5개) ← 강조 (인용, 결론)
│ ├── quote-left-border.html 좌측 라인 + 인용
│ ├── conclusion-accent-bar.html 좌측 파란 라인 + 밝은 배경 결론
│ ├── comparison-2col.html 2단 병렬 비교
│ ├── banner-gradient.html 파란 그라데이션 전체 너비 배너
│ └── quote-question.html 질문형 강조 박스
└── media/ (3개) ← 이미지/미디어
├── image-row-2col.html 이미지 2장 나란히
├── image-grid-2x2.html 이미지 4장 2x2 격자
└── image-side-text.html 좌:이미지 우:텍스트+불릿
```
### 시각화 방식 (Phase 1 확정)
**블록 유형별 구현 방식:**
| 블록 유형 | 구현 방식 | 이유 |
|----------|---------|------|
| 텍스트 블록 (카드, 비교, 표, 인용, 결론) | **HTML/CSS** | Jinja2 템플릿으로 조립 |
| 시각화 다이어그램 (관계도, 프로세스, 순환도) | **SVG** | 좌표 정확 + 그라데이션/글로우 가능 + 개수 자동 대응 |
| 실사 이미지 (시공 사진, 3D 렌더링) | **Figma export 또는 원본 이미지** | CSS/SVG로 재현 불가 |
| 배경 텍스처 (보케, 분위기) | **Gemini API 이미지 생성** | 실사 배경 전용 |
**SVG 시각화 원칙 (검증 완료):**
- SVG 안에 `<text>` 포함 → 원 좌표와 텍스트 좌표가 같은 공간 → **위치 100% 정확**
- `radialGradient`, `linearGradient` → 고급 그라데이션
- `filter: feGaussianBlur`, `feDropShadow` → 글로우/그림자
- 하이라이트 오버레이 → 구체(3D) 느낌
- 수학적 계산 (`cos/sin`) → N개 원소 자동 배치 (`360/N` 간격) — **Phase 2 구현 예정. 현재는 3개 고정 SVG**
**AI 이미지 생성은 시각화에 사용하지 않는다:**
- AI 생성 이미지는 원 위치가 매번 달라 텍스트 위치를 맞출 수 없음 (검증 완료)
- AI 이미지는 **실사 배경 텍스처** (보케, 헥사곤, 분위기)에만 사용
### 변형 검색 (향후)
변형이 수십~수백 개로 늘어나면:
1. 각 블록 HTML의 구조/슬롯/용도를 임베딩
2. FAISS 인덱스로 구축
3. 콘텐츠 분석 결과를 쿼리 → 적절한 변형 3~4개 반환
4. 팀장이 최종 선택
현재 규모(13개)에서는 catalog.yaml만으로 충분. 40개 이상부터 FAISS 도입 검토.
### catalog.yaml
- 디자인 팀장의 "메뉴판"
- 각 블록의 id, 시각 설명, 언제 쓰는지(when), 슬롯 목록
- Figma에서 디자인 추출 → 템플릿 변환 → catalog에 등록
- **Figma 작업 완료 후 연동 예정**
- 블록 추가 시 반드시 catalog에도 등록 (미등록 = 팀장이 모름)
### 저장 위치
```
design_agent/
├── templates/
│ ├── catalog.yaml ← AI용 블록 메뉴판 (Figma 작업 후)
│ ├── slide-base.html ← 슬라이드 베이스
│ └── blocks/ ← 블록 템플릿
├── samples/ ← 완성 슬라이드 샘플
└── docs/ ← 조사 자료
```
### Figma 에셋
Figma에서 추출한 이미지 에셋은 `docs/figma-assets/`에 저장:
- 배경 이미지 (bg_header.png 등)
- 3D 렌더링 이미지 (card_img_design.png 등)
- 시각화 에셋 (mountain_viz.png 등)
- 블록에서 `src="{{ image_path }}"`로 참조
---
@@ -451,13 +479,17 @@ design_agent/
| 역할 | 도구 | 비고 |
|------|------|------|
| 서버 | FastAPI + uvicorn | 포트 8001 |
| 템플릿 | Jinja2 | 블록 조합 |
| 렌더링 | CSS Grid + 디자인 토큰 | 16:9 고정 |
| 템플릿 | Jinja2 | 카테고리별 블록 조합 |
| 렌더링 | CSS Grid + 디자인 토큰 | 슬라이드(16:9) + 웹(세로 스크롤) |
| 폰트 | Pretendard Variable | word-break: keep-all |
| AI | Anthropic API (Sonnet) | 5단계 모두 |
| 이미지 크기 | Pillow Image.open().size | 헤더만 읽음 |
| 시각화 | SVG (radialGradient, filter, 수학적 좌표 계산) | 다이어그램/관계도 |
| 실사 배경 | Gemini API | 배경 텍스처 전용 (시각화에는 사용 금지) |
| 자세히보기 | `<details>/<summary>` | HTML 내장 |
| 출력 | HTML 다운로드 | |
| Figma 연동 | Figma REST API + Framelink MCP | 에셋 추출, 디자인 토큰 |
| 변형 검색 | FAISS (향후) | 블록 40개+ 시 도입 |
| 출력 | HTML 다운로드 / .astro (Starlight) | |
---

491
IMPROVEMENT-PHASE-A.md Normal file
View File

@@ -0,0 +1,491 @@
# Phase A: 슬라이드 품질 핵심 — 실행 상세
> "프레임에 내용이 안 보인다"의 직접 원인 해결. 8개 항목.
> 원칙: 하드코딩 금지. 모든 판단은 AI 사고. 회귀 금지.
---
## 실행 순서
```
[독립] A-6 (cover→contain), A-7 (table-layout: fixed)
→ A-8 (container query, A-7 후)
→ A-1 (Sonnet 디자인 조정 — 가장 큰 작업)
→ A-2 (HTML 전달), A-3 (shrink), A-4 (rewrite) — 병렬 가능
→ A-5 (overflow 재검토, A-1 완료 후)
```
---
## A-6: object-fit: cover → contain ✅ 완료
### 현재 상태
- `image-row-2col.html:30` — `object-fit: cover;`
- `image-grid-2x2.html:31` — `object-fit: cover;`
- cover는 이미지를 crop → CLAUDE.md "이미지를 crop하지 않는다" 위반
### 작업
두 파일에서 `cover` → `contain` 변경 (CSS 1줄씩)
### 충돌/회귀
- 충돌: 없음. CSS 속성값만 변경
- 회귀: 없음. CLAUDE.md 원칙 복구
- 부작용: contain은 이미지 주변에 빈 공간(letterbox) 가능 → `background: var(--color-bg-subtle)` 추가로 자연스럽게 처리
### 수정 파일
- `templates/blocks/media/image-row-2col.html`
- `templates/blocks/media/image-grid-2x2.html`
### 구현 결과
- `image-row-2col.html:29~31` — `object-fit: contain; height: 100%; background: var(--color-bg-subtle, #f8fafc);`
- cover → contain, 높이 하드코딩(354px) → 100%(부모 기준), letterbox 배경색 추가
- `image-grid-2x2.html:29~31` — 동일 패턴 적용 (200px 하드코딩도 함께 제거)
---
## A-7: table-layout: fixed ✅ 완료
### 현재 상태
- `compare-3col-badge.html`에 table-layout 미지정
- 열 너비가 내용 길이에 따라 불안정하게 변동
### 작업
```css
.ct-table {
table-layout: fixed;
width: 100%; /* fixed는 width 필수 */
}
```
### 충돌/회귀
- 충돌: 없음. 기존 테이블 스타일에 속성 추가만
- 회귀: 없음. fixed는 열 너비를 균등하게 고정 — 더 안정적
### 수정 파일
- `templates/blocks/tables/compare-3col-badge.html`
### 구현 결과
- `.block-table-figma table`에 `table-layout: fixed;` 추가 (기존 `width: 100%`는 이미 있었음)
---
## A-8: container query 폰트 스케일링 ✅ 완료
### 현재 상태
- 표 셀 폰트 크기 고정 → 좁은 공간(sidebar 35%)에서 텍스트 잘림/넘침
- @container 규칙 없음
### 작업
```css
.block-compare-table {
container-type: inline-size;
}
@container (max-width: 40rem) {
.ct-cell, .ct-header {
font-size: var(--font-caption); /* 0.8rem */
}
}
@container (max-width: 25rem) {
.ct-cell, .ct-header {
font-size: var(--font-small); /* 0.7rem */
}
}
```
### 하드코딩 점검
- `40rem`, `25rem`은 font-size 기반 상대값 (px 고정이 아님)
- `var(--font-caption)`, `var(--font-small)`은 디자인 토큰 → 하드코딩 아님
### 충돌/회귀
- 충돌: 없음. 신규 CSS 규칙 추가
- 회귀: 없음. @container 미지원 브라우저에서는 무시 → 기존과 동일
- 의존성: A-7 (table-layout: fixed) 먼저 적용해야 열 너비가 안정적
### 수정 파일
- `templates/blocks/tables/compare-3col-badge.html`
### 구현 결과
- `.block-table-figma`에 `container-type: inline-size;` 추가
- `@container (max-width: 40rem)` — 테이블/헤더/셀 폰트 축소 + 패딩 축소
- `@container (max-width: 25rem)` — 추가 축소 + badge 패딩 축소
- **추가:** `tr:hover` 제거 (Phase C-2 선행 처리 — CLAUDE.md "호버 효과 금지")
---
## A-1: 4단계 Sonnet 디자인 조정 ✅ 완료
### 현재 상태
- pipeline.py:73에서 `render_slide(layout_concept)` 직접 호출
- 텍스트 양에 맞는 디자인 조정 과정이 없음 → 텍스트 넘침/빈공간 원인
- CLAUDE.md: "디자인 실무자 (Sonnet + Jinja2 + CSS) — 텍스트에 맞게 폰트/여백/박스 조정"
### API 선택
- **Sonnet** (CLAUDE.md "4단계: Anthropic API (Sonnet)")
- 디자인 실무자는 Kei가 아님 — Sonnet이 맞음
### 핵심 아이디어: CSS 변수 cascade
블록 템플릿 20개가 이미 CSS 변수(`var(--font-body)`, `var(--spacing-inner)` 등)를 187회 사용 중.
area div에서 CSS 변수를 override하면 **템플릿 수정 없이** 모든 블록이 자동 조정됨.
```html
<!-- 예시: Sonnet이 body area의 폰트를 줄이기로 결정 -->
<div class="area-body" style="--font-body: 0.85rem; --spacing-inner: 10px;">
{{ block.html }} <!-- 내부 블록들이 자동으로 작은 폰트/여백 적용 -->
</div>
```
### 파이프라인 흐름 변경
```
기존:
3단계 fill_content → 4단계 render_slide → 5단계 review
변경:
3단계 fill_content → [신규] _adjust_design → 4단계 render_slide → 5단계 review
```
### 신규 함수: _adjust_design()
**위치:** pipeline.py
**입력:** layout_concept (data 채워진 상태)
**처리:**
1. 코드가 각 area별 블록 수, 텍스트 총량(글자 수), zone budget_px를 계산
2. Sonnet에게 전달: area별 정보 + 사용 가능한 CSS 변수 목록
3. Sonnet이 area별 CSS 변수 override를 결정하여 JSON 반환
4. layout_concept에 area_styles 저장
**Sonnet 프롬프트 구성:**
```
당신은 디자인 실무자이다. 편집자가 정리한 텍스트가 각 영역에 잘 들어가도록 CSS를 조정한다.
## 원칙
- 텍스트를 자르지 않는다. 디자인이 텍스트에 맞춘다.
- 빈 공간을 방치하지 않는다.
- 조정 가능한 CSS 변수: --font-body, --font-subtitle, --font-caption, --spacing-inner, --spacing-block, --spacing-small
## 각 영역 현황
- body (예산 490px, 너비 65%): 3개 블록, 총 820자
- quote-question: 120자
- topic-header: 200자
- comparison-table: 500자
- sidebar (예산 490px, 너비 35%): 2개 블록, 총 400자
- card-image: 250자
- card-image: 150자
- footer (예산 60px): 1개 블록, 80자
## 출력 (JSON만)
{"area_styles": {"body": "--font-body: 0.85rem; --spacing-inner: 10px;", "sidebar": "", "footer": ""}}
```
**Sonnet 출력 파싱:**
- `area_styles` dict 추출
- 각 area별 CSS 문자열 → layout_concept 페이지에 저장
**실패 시:** area_styles가 빈 dict → style="" → 기존과 동일하게 렌더링 (안전)
### renderer.py 변경
**render_multi_page() 192~197행:**
기존:
```python
pages_rendered.append({
"grid_areas": page.get("grid_areas", "'main'"),
...
"blocks": blocks_grouped,
"page_number": page_idx + 1,
})
```
변경:
```python
# area_styles를 각 grouped block에 주입
area_styles = page.get("area_styles", {})
for grouped_block in blocks_grouped:
grouped_block["style_override"] = area_styles.get(grouped_block["area"], "")
pages_rendered.append({
"grid_areas": page.get("grid_areas", "'main'"),
...
"blocks": blocks_grouped,
"page_number": page_idx + 1,
})
```
### slide-base.html 변경
**45행:**
기존:
```html
<div class="area-{{ block.area }}">
```
변경:
```html
<div class="area-{{ block.area }}" style="{{ block.style_override | default('') }}">
```
### 하드코딩 점검
- CSS 조정값: Sonnet이 결정 → AI 판단 ✅
- CSS 변수 목록: 프롬프트에 "조정 가능한 변수" 안내 → 가이드일 뿐 강제 아님 ✅
- area별 글자 수: 코드가 계산 → 객관적 수치 ✅
- 하드코딩 없음 ✅
### 충돌/회귀
- pipeline.py: render_slide() 전에 삽입. 기존 흐름 안 건드림 ✅
- renderer.py: blocks_grouped에 style_override 키 추가. 기존 키 영향 없음 ✅
- slide-base.html: style 속성 추가. area_styles 없으면 빈 문자열 → 기존 동일 ✅
- 템플릿 수정: 불필요 (CSS 변수 cascade로 자동 적용) ✅
- 회귀: 없음. 실패 시 기존과 동일 동작 ✅
### 수정 파일
- `src/pipeline.py` — _adjust_design() 신규 함수 + generate_slide()에 호출 추가
- `src/renderer.py` — render_multi_page()에서 area_styles 주입
- `templates/slide-base.html` — area div에 style_override 적용
### 구현 결과
- **pipeline.py** `_adjust_design()` 신규 함수 (약 80행):
- 각 area별 block_count, total_chars, budget_px, width_pct, block_types 자동 집계 (코드)
- Sonnet(디자인 실무자)에게 area별 현황 전달 → CSS 변수 override를 JSON으로 반환받음
- 출력: `page["area_styles"] = {"body": "--font-body: 0.85rem; ...", "sidebar": "", ...}`
- 실패 시: `area_styles = {}` → style="" → 기존과 동일 렌더링 (안전)
- **pipeline.py** `generate_slide()` 72행: `_adjust_design()` 호출 삽입 (render_slide 직전)
- **renderer.py** `render_multi_page()` 192~196행: area_styles를 grouped block의 `style_override`에 주입
- **slide-base.html** 45행: `<div class="area-{{ block.area }}" style="{{ block.style_override | default('') }}">`
- **CSS 변수 cascade 방식:** 블록 템플릿 수정 불필요 — 이미 `var(--font-body)` 등 187회 사용 중이므로 area div에서 override하면 자동 적용
---
## A-2: 5단계 HTML을 프롬프트에 전달 ✅ 완료
### 현재 상태
- pipeline.py:103 `_review_balance(html, ...)` — html 파라미터 있지만 141~146행 프롬프트에서 미사용
- 블록별 데이터 길이만 전달 → 시각적 균형 판단 불가
### 작업
`_review_balance()` 프롬프트에 html 전문 포함
```python
user_prompt = (
f"## 1차 조립 HTML\n{html}\n\n"
f"## 블록별 데이터 양\n" + "\n".join(block_summary) + ...
)
```
### 하드코딩 점검
- html 전문 전달 (임의 잘라내기 없음) ✅
- Sonnet 200K context → 전문 전달 가능 ✅
### 충돌/회귀
- 프롬프트 텍스트만 변경. 파싱/함수 시그니처 동일 ✅
- 회귀: 없음 ✅
### 수정 파일
- `src/pipeline.py` — `_review_balance()` 프롬프트 부분
### 구현 결과
- `_review_balance()` user_prompt에 `f"## 1차 조립 HTML\n{html}\n\n"` 추가 — html 전문 전달
- 시스템 프롬프트에 "5. HTML 구조: 블록이 영역 안에 잘 배치되었는지" 점검 항목 추가
- 출력 형식에 `target_ratio` 필드 추가 (A-3과 연동)
---
## A-3: 5단계 shrink action + 기존 expand 하드코딩 수정 ✅ 완료
### 현재 상태
- shrink: 조건에 없어서 무시됨
- expand: `char_guide * 1.5` 하드코딩 (pipeline.py:186)
- CLAUDE.md: "모든 판단은 사고로. 하드코딩 없음"
### 작업
**1) 5단계 프롬프트 출력 형식 변경**
기존:
```json
{"adjustments": [{"block_area": "...", "action": "expand|shrink|rewrite", "detail": "..."}]}
```
변경:
```json
{"adjustments": [{"block_area": "...", "action": "expand|shrink|rewrite", "target_ratio": 1.4, "detail": "..."}]}
```
→ Sonnet(디자인 팀장)이 **얼마나** 조정할지를 `target_ratio`로 결정
**2) _apply_adjustments() 코드 변경**
```python
for adj in adjustments:
area = adj.get("block_area", "")
action = adj.get("action", "")
ratio = adj.get("target_ratio")
detail = adj.get("detail", "")
for page in layout_concept.get("pages", []):
for block in page.get("blocks", []):
if block.get("area") == area:
if action == "expand" and ratio:
for key in block.get("char_guide", {}):
block["char_guide"][key] = int(block["char_guide"][key] * ratio)
elif action == "shrink" and ratio:
for key in block.get("char_guide", {}):
block["char_guide"][key] = int(block["char_guide"][key] * ratio)
logger.info(f"조정: {area} → {action} ×{ratio} ({detail})")
```
→ ratio가 없으면(Sonnet 누락) 조정 안 함 (무동작이 안전)
→ expand/shrink 모두 Sonnet이 결정한 ratio 사용
### 하드코딩 점검
- ratio: Sonnet이 결정 ✅ (기존 `1.5` 하드코딩 제거)
- ratio 없을 때 기본값: 적용 안 함 (하드코딩 기본값 없음) ✅
### 충돌/회귀
- 기존 expand `* 1.5` 제거 → **기존 하드코딩을 수정하는 것이므로 회귀 아님, 개선임**
- 5단계 프롬프트 출력 형식 변경 → `_parse_json()` 파싱에 영향 없음 (JSON 구조)
- Sonnet이 target_ratio를 안 넣으면 → 조정 안 함 → 기존보다 보수적 (안전)
### 수정 파일
- `src/pipeline.py` — `_review_balance()` 프롬프트 + `_apply_adjustments()` 코드
### 구현 결과
- `_apply_adjustments()` 전면 재작성:
- `ratio = adj.get("target_ratio")` — Sonnet이 결정한 비율 추출
- `action == "expand" and ratio` → `char_guide[key] * ratio`
- `action == "shrink" and ratio` → `char_guide[key] * ratio`
- ratio 없으면(Sonnet 누락) 조정 안 함 → 안전
- 기존 `* 1.5` 하드코딩 완전 제거
- `_review_balance()` 프롬프트에 action별 target_ratio 설명 추가
---
## A-4: 5단계 rewrite action ✅ 완료
### 현재 상태
- rewrite가 expand와 같은 조건(`action in ("expand", "rewrite")`)에 들어가지만
- `if action == "expand"` 안에만 실제 로직 → rewrite는 로그만 찍고 끝 (no-op)
### 작업
A-3에서 변경한 코드에 rewrite 분기 추가:
```python
elif action == "rewrite":
if "data" in block:
del block["data"]
block["reason"] = f"재작성: {detail}"
logger.info(f"조정: {area} → rewrite ({detail})")
```
- data 삭제 → fill_content() 재호출(192행) 시 재매칭
### 하드코딩 점검
- 없음 ✅
### 충돌/회귀
- 기존 no-op → 실제 동작으로 변경 (개선, 회귀 아님)
- fill_content 재호출 시 topic_id 매칭으로 다른 블록도 재편집될 수 있음 → 기존 expand도 동일 동작
- 회귀: 없음 ✅
### 수정 파일
- `src/pipeline.py` — `_apply_adjustments()` (A-3과 같은 함수)
### 구현 결과
- `_apply_adjustments()`에 `elif action == "rewrite"` 분기 추가
- data 삭제 (`del block["data"]`) → fill_content 재호출 시 topic_id로 재매칭
- `block["reason"]` 업데이트 → 편집자에게 재작성 방향 전달
---
## A-5: overflow 정책 재검토 ✅ 완료
### 현재 상태
- base.css:16 `.slide { overflow: hidden }` — 프레임 경계
- base.css:74 `.slide > div { overflow: hidden }` — BF-8에서 추가한 area별 안전망
### 작업
```css
/* base.css:74 변경 */
.slide > div {
overflow: visible; /* hidden → visible: A-1이 사전 조정하므로 잘림 방지 불필요 */
min-height: 0;
min-width: 0;
}
```
`.slide { overflow: hidden }`(16행)은 **유지** — 프레임 바깥은 잘려야 함
### 하드코딩 점검
- 없음 ✅
### 충돌/회귀
- BF-8에서 추가한 `.slide > div { overflow: hidden }` 제거 → BF-8과 방향 다름
- **그러나 BF-8의 overflow: hidden은 "텍스트를 자르지 않는다" 원칙과 충돌하는 임시 조치였음**
- A-1(Sonnet 디자인 조정)이 넘침을 사전 방지 → 안전망 불필요
- **반드시 A-1 완료 후 적용**
### 수정 파일
- `static/base.css`
### 구현 결과
- base.css `.slide > div` — `overflow: hidden` → `overflow: visible`
- 주석 추가: "A-1(Sonnet 디자인 조정)이 텍스트 양에 맞게 CSS를 사전 조정하므로, area 레벨에서는 overflow: visible로 텍스트 잘림을 방지한다."
- `.slide { overflow: hidden }`(16행)은 유지 — 프레임 경계 보호
---
## 수정 파일 총괄
| 파일 | 항목 | 변경 성격 |
|------|------|----------|
| `templates/blocks/media/image-row-2col.html` | A-6 | CSS 1줄 변경 |
| `templates/blocks/media/image-grid-2x2.html` | A-6 | CSS 1줄 변경 |
| `templates/blocks/tables/compare-3col-badge.html` | A-7, A-8 | CSS 추가 |
| `src/pipeline.py` | A-1, A-2, A-3, A-4 | 신규 함수 + 기존 함수 수정 |
| `src/renderer.py` | A-1 | area_styles 주입 (3줄) |
| `templates/slide-base.html` | A-1 | style 속성 추가 (1줄) |
| `static/base.css` | A-5 | overflow 변경 (1줄) |
---
## 검증 체크리스트
- [ ] A-6: image-row, image-grid에서 이미지가 crop 안 됨
- [ ] A-7: 테이블 열 너비가 내용과 무관하게 균등
- [ ] A-8: sidebar(35%)에 표가 들어가면 폰트 자동 축소
- [ ] A-1: Sonnet이 area별 CSS 변수 override 출력 → 렌더링에 반영
- [ ] A-1: _adjust_design 실패 시 기존과 동일하게 렌더링 (안전)
- [ ] A-2: 5단계 Sonnet이 HTML 구조를 보고 균형 판단
- [ ] A-3: shrink 시 Sonnet이 결정한 ratio로 char_guide 축소
- [ ] A-3: 기존 expand 1.5 하드코딩 제거됨
- [ ] A-4: rewrite 시 해당 블록 data 삭제 후 재편집
- [ ] A-5: area div에서 텍스트 잘림 없음
---
## 수정 이력
| 날짜 | 내용 |
|------|------|
| 2026-03-25 | 초안. 하드코딩 제거 반영 (A-2 html 전문, A-3 target_ratio, A-8 상대값). |
| 2026-03-25 | Phase A 전체 구현 완료. 검증 통과. |
## 구현 완료 확인
| 항목 | 검증 결과 |
|------|----------|
| A-1 | `_adjust_design()` 함수 존재, pipeline에서 호출, renderer에서 area_styles 주입, slide-base에서 style_override 적용 |
| A-2 | `_review_balance()` 프롬프트에 html 전문 포함, target_ratio 출력 형식 추가 |
| A-3 | shrink action 구현 + expand 하드코딩(×1.5) 제거 → Sonnet target_ratio 기반 |
| A-4 | rewrite action 구현 — data 삭제 + reason 업데이트 + fill_content 재호출 |
| A-5 | `.slide > div { overflow: visible }` — 프레임(.slide)은 hidden 유지 |
| A-6 | image-row, image-grid: cover → contain + 높이 하드코딩 제거 |
| A-7 | table-layout: fixed + width: 100% |
| A-8 | container-type: inline-size + @container (40rem, 25rem) |
| 추가 | compare-3col-badge tr:hover 제거 (Phase C-2 선행 처리) |

368
IMPROVEMENT-PHASE-B.md Normal file
View File

@@ -0,0 +1,368 @@
# Phase B: 누락 기능 구현 — 실행 상세
> 누락된 기능 구현. 실작업 5개 (B-6, B-7은 해결됨).
> 원칙: 하드코딩 금지. 모든 판단은 AI 사고. 회귀 금지.
---
## 실행 순서
```
[독립] B-1 (details 템플릿), B-4+B-5 (이미지/표 판단), B-8 (fallback 교체)
→ B-2 (인쇄 JS, B-1 후)
→ B-3 (catalog 등록, B-1 후)
```
---
## B-1: details-block 템플릿 제작 ✅ 완료
### 현재 상태
- BLOCK_SLOTS에 정의 있음 (design_director.py:47~49): `required: ["summary_text", "detail_content"], optional: ["label"]`
- _apply_defaults에 기본값 있음 (content_editor.py:248): `{"summary_text": "(상세 내용)", "detail_content": ""}`
- **HTML 템플릿 파일이 templates/blocks/ 어디에도 없음** → 렌더링 불가
### API 선택
- AI 호출 없음. HTML/CSS 템플릿만.
### 작업
`templates/blocks/emphasis/details-block.html` 신규 제작
**구조:**
```html
<details class="block-details">
<summary class="dt-summary">
{% if label %}<span class="dt-label">{{ label }}</span>{% endif %}
{{ summary_text }}
</summary>
<div class="dt-content">{{ detail_content }}</div>
</details>
```
### 하드코딩 점검 — CSS 규칙
- 색상: `var(--color-*)` 만 사용. `#직접값` 금지
- 폰트: `var(--font-*)` 사용
- 여백: `var(--spacing-*)` 사용
- 테두리: `var(--border-width)`, `var(--accent-border)`, `var(--radius)` 사용
- **기존 emphasis 블록의 직접값(#1e3a5f 등)을 따라하지 않는다**
### 충돌/회귀
- 충돌: 없음. 신규 파일 추가만
- 회귀: 없음. BLOCK_SLOTS/_apply_defaults와 정합
- 단발성: 아님. `<details>/<summary>`는 HTML 표준 — 브라우저 내장, 의존성 없음
### 수정 파일
- 신규: `templates/blocks/emphasis/details-block.html`
### 구현 결과
- `templates/blocks/emphasis/details-block.html` 신규 제작 완료
- HTML 구조: `<details class="block-details">` → `<summary class="dt-summary">` (label + summary_text) → `<div class="dt-content">` (detail_content)
- CSS: **`#직접값` 0개** — 전부 디자인 토큰으로 구현
- 배경: `var(--color-bg-subtle)`, 테두리: `var(--color-border)`, 액센트: `var(--color-accent)`
- 폰트: `var(--font-body)`, `var(--font-caption)`, 여백: `var(--spacing-inner)`, `var(--spacing-block)`
- summary 마커: 기본 브라우저 마커 숨기고(`list-style: none`, `::-webkit-details-marker { display: none }`) 커스텀 ▶/▼ 표시
- 좌측 파란 액센트 라인: `border-left: var(--accent-border) solid var(--color-accent)` — quote-left-border와 톤 통일
---
## B-2: 인쇄 시 details 자동 펼침 JS ✅ 완료
### 현재 상태
- slide-base.html의 `@media print`에 page-break만 있음
- details 자동 펼침 JS 없음
- CLAUDE.md: "인쇄 시 JavaScript 6줄로 자동 펼침"
### 작업
slide-base.html `</body>` 직전에 삽입:
```html
<script>
window.onbeforeprint = function() {
document.querySelectorAll('details').forEach(function(d) { d.open = true; });
};
window.onafterprint = function() {
document.querySelectorAll('details').forEach(function(d) { d.open = false; });
};
</script>
```
### 하드코딩 점검
- 없음. DOM API만 사용. 고정값 없음.
### 충돌/회귀
- 충돌: 없음. `{% endfor %}` 이후, Jinja2 루프 밖에 삽입
- 회귀: 없음. 기존 HTML에 `<details>` 없으면 querySelectorAll이 빈 NodeList → 무동작
- 다운로드 HTML: renderer.py의 CSS 인라인 삽입은 `<link>` → `<style>` 교체만. `<script>`는 그대로 포함됨 ✅
### 수정 파일
- `templates/slide-base.html`
### 의존성
- B-1 완료 후 의미 있음 (details 태그가 있어야 JS가 동작)
### 구현 결과
- slide-base.html `</body>` 직전에 `<script>` 블록 삽입
- `window.onbeforeprint`: 모든 `<details>` 요소에 `open = true` 설정 (인쇄 시 펼침)
- `window.onafterprint`: 모든 `<details>` 요소에 `open = false` 복원 (인쇄 후 접힘)
- `<details>` 태그가 없으면 `querySelectorAll` 빈 NodeList → 무동작 (기존 슬라이드에 영향 없음)
- 다운로드 HTML에도 JS 그대로 포함됨 (renderer의 CSS 인라인 처리는 `<link>` → `<style>` 교체만)
---
## B-3: catalog에 details-block 등록 ✅ 완료
### 현재 상태
- catalog.yaml에 미등록 → Sonnet(팀장)이 이 블록을 선택할 수 없음
### 작업
catalog.yaml blocks 배열에 추가:
```yaml
- id: details-block
name: 자세히보기 (접기/펼치기)
template: blocks/emphasis/details-block.html
height_cost: "~60px (compact, 접힌 상태 기준. 펼치면 내용에 따라 가변)"
visual: "접힌 요약 1줄 + 클릭하면 상세 내용 펼침. HTML 네이티브 <details> 사용."
when: >
너무 구체적/세부적인 내용을 접어서 보여줄 때.
본문 흐름을 끊지 않으면서 상세 데이터를 제공할 때.
비교표, 상세 스펙 등 detail_target 꼭지.
not_for: >
본문 핵심 내용 (접으면 안 됨).
결론이나 강조 메시지 (항상 보여야 함).
일반 텍스트 (topic-header 또는 card 사용).
slots:
required: [summary_text, detail_content]
optional: [label]
character_limits:
summary_text: 60
detail_content: 500
label: 10
```
### 하드코딩 점검
- height_cost: 접힌 상태의 사실적 높이. AI가 zone 예산 계산에 사용하는 참고값
- character_limits: AI 참고용 가이드. 강제 아님 (CLAUDE.md: "의미 우선")
### 충돌/회귀
- 충돌: 없음. catalog에 항목 추가만
- _load_catalog_map(): id+template만 추출하므로 정상 로드
- 높이 참고표 주석(14행): compact 목록에 details-block 추가 필요
### 수정 파일
- `templates/catalog.yaml`
### 의존성
- B-1 (템플릿이 존재해야 catalog에 등록 의미 있음)
### 구현 결과
- catalog.yaml emphasis 섹션 마지막(divider-text 뒤, media 섹션 전)에 삽입
- id: `details-block`, template: `blocks/emphasis/details-block.html`
- height_cost: `compact` (접힌 상태 기준)
- when: "너무 구체적/세부적인 내용을 접어서 보여줄 때. detail_target 꼭지."
- not_for: "본문 핵심 내용 (접으면 안 됨). 결론 → conclusion-accent-bar."
- slots: `required: [summary_text, detail_content], optional: [label]`
- `_load_catalog_map()` 정상 로드 확인 (총 46개 블록)
---
## B-4 + B-5: 1단계 이미지/표 상세 판단 필드 ✅ 완료
### 현재 상태
- KEI_PROMPT 출력 형식(kei_client.py:44~53행)에 `content_type: "text|image|table|mixed"` 한 줄만
- 이미지 개수/소속/핵심여부/텍스트포함, 표 행/열 규모 등 상세 필드 없음
- CLAUDE.md: "몇 개인지, 어떤 꼭지 소속인지, 핵심/보조인지", "행/열 규모, 전체 표시 가능 여부"
### API 선택
- **Kei API** (1차). KEI_PROMPT가 Kei API로 전달됨 (kei_client.py:96행)
- Sonnet 직접이 아님 ✅
### 작업 — 3곳 동기화 필수
**1) KEI_PROMPT (kei_client.py:20~56행)**
프롬프트 본문에 이미지/표 판단 규칙 보강 + 출력 형식에 필드 추가:
현재 출력 형식:
```json
{"title": "...", "total_pages": 1, "info_structure": "...",
"topics": [{"id": 1, ..., "content_type": "text|image|table|mixed", "detail_target": false, "page": 1}]}
```
변경:
```json
{"title": "...", "total_pages": 1, "info_structure": "...",
"topics": [{"id": 1, ..., "content_type": "text|image|table|mixed", "detail_target": false, "page": 1}],
"images": [{"topic_id": 1, "role": "key|supporting", "has_text": false, "description": "이미지 설명"}],
"tables": [{"topic_id": 2, "rows": 5, "cols": 3, "fits_single_page": true, "description": "표 설명"}]}
```
**2) fallback system_prompt (kei_client.py:168~184행) — 동기화**
현재 문제:
- `role` 필드 누락 → sidebar-right 프리셋 절대 선택 안 됨
- `info_structure` 필드 누락
- `images[]`, `tables[]` 없음
→ KEI_PROMPT와 **동일한 출력 스키마**로 전면 동기화.
이것은 단발성 패치가 아니라, "같은 역할(1단계 실장)의 두 경로가 동일한 출력 구조를 사용해야 한다"는 구조적 원칙.
**3) manual_classify (kei_client.py:225~243행) — 기본값 추가**
```python
return {
...
"images": [],
"tables": [],
}
```
### 하드코딩 점검
- images[]/tables[] 필드: AI가 판단하여 채움. 스키마 정의일 뿐 고정값 아님 ✅
- "key|supporting", "true|false": AI가 선택하는 enum. 하드코딩 아님 ✅
### 하류 영향 분석 (에이전트 검증 완료)
| 모듈 | images[]/tables[] 추가 영향 |
|------|---------------------------|
| pipeline.py | `.get("topics")`, `.get("total_pages")`만 접근. 무시됨 ✅ |
| design_director.py select_preset() | topics의 role/emphasis만 사용. 무시됨 ✅ |
| design_director.py create_layout_concept() | user_prompt에 analysis 텍스트로 포함 → 이점 (Sonnet이 참고) ✅ |
| content_editor.py fill_content() | analysis 미참조 (인자로만 받음). 완전 무관 ✅ |
| pipeline.py _adjust_design() | select_preset()만 호출. 무시됨 ✅ |
### 충돌/회귀
- 충돌: 없음. 기존 필드 변경 없이 필드 추가만
- 회귀: 없음. images[]/tables[]가 없어도 하류 `.get()` 패턴으로 안전
- **기존 결함 수리 포함**: fallback에 role/info_structure 누락 문제도 함께 해결
### 수정 파일
- `src/kei_client.py` — KEI_PROMPT, fallback system_prompt, manual_classify (3곳)
### 구현 결과 — 3곳 동기화
**1) KEI_PROMPT (kei_client.py:38~40행 프롬프트 본문, 46~56행 출력 형식)**
- 프롬프트 본문: "이미지/표가 있으면 그것도 판단해줘" → 구체화
- "이미지가 있으면: 몇 개인지, 어떤 꼭지 소속인지, 핵심인지 보조인지, 텍스트 포함 여부 판단"
- "표가 있으면: 행/열 규모, 1페이지 전체 표시 가능 여부 판단"
- "이미지/표 판단 결과를 images[], tables[] 배열에 기록"
- 출력 형식: topics[] 뒤에 images[], tables[] 배열 추가
- images: `[{"topic_id": 1, "role": "key|supporting", "has_text": false, "description": "..."}]`
- tables: `[{"topic_id": 2, "rows": 5, "cols": 3, "fits_single_page": true, "description": "..."}]`
**2) fallback system_prompt (kei_client.py:172~195행)**
- 기존 누락 필드 전부 추가: `role: "flow|reference"`, `info_structure`, `images: []`, `tables: []`
- 꼭지 추출 규칙에 "참조 정보는 role: 'reference'" 추가
- 출력 스키마가 KEI_PROMPT와 동일한 구조로 동기화
- **기존 결함 수리**: fallback에서도 sidebar-right 프리셋이 선택 가능해짐 (role 필드 존재)
**3) manual_classify (kei_client.py:238~258행)**
- `info_structure: ""` 추가
- topics[0]에 `role: "flow"` 추가
- 최상위에 `images: []`, `tables: []` 추가
---
## B-6, B-7: 해결됨 (작업 불필요)
- B-6: quote-left-border → 등록 안 함 확정 (구 블록 제거 방향)
- B-7: comparison-2col → 등록 안 함 확정 (구 블록 제거 방향)
---
## B-8: fallback_layout에서 card-grid → topic-header 교체 ✅ 완료
### 현재 상태
- `_fallback_layout()` (design_director.py:438행): `"type": "card-grid"`
- card-grid는 BLOCK_SLOTS에서 제거됨 (주석 24행), _apply_defaults에서도 제거됨, catalog에도 없음
- **현재 fallback 경로가 이미 깨져있음** (정합성 분석으로 확인)
### 작업
```python
# 변경 전
"type": "card-grid",
...
"char_guide": {"title": 20, "description": 100},
# 변경 후
"type": "topic-header",
...
# char_guide 제거 — 편집자가 자체 판단 (하드코딩 방지)
```
### topic-header 정합성 (에이전트 검증 완료)
| 체인 | 존재 여부 |
|------|:--------:|
| BLOCK_SLOTS (design_director.py:77~80) | ✅ `required: ["title", "description"]` |
| _apply_defaults (content_editor.py:257) | ✅ `{"title": "(소제목)", "description": ""}` |
| catalog.yaml | ✅ `id: topic-header, template: blocks/headers/topic-left-right.html` |
| 템플릿 파일 | ✅ `templates/blocks/headers/topic-left-right.html` 존재 |
### 하드코딩 점검
- 기존 `char_guide: {"title": 20, "description": 100}` → **제거**
- 편집자(3단계)가 가이드 없이 자체 판단 (CLAUDE.md: "글자 수 가이드는 참고. 의미 우선")
- 하드코딩 0개 ✅
### 충돌/회귀
- 충돌: 없음. fallback 블록 타입 변경만
- 회귀: 아님. **깨진 fallback을 수리하는 변경** (card-grid는 이미 체인에서 제거됨)
### 수정 파일
- `src/design_director.py` — `_fallback_layout()` (438행)
### 구현 결과
- `_fallback_layout()` 436~442행:
- `"type": "card-grid"` → `"type": "topic-header"` 변경
- `"char_guide": {"title": 20, "description": 100}` **완전 제거** (하드코딩 제거)
- `"size": "medium"` 유지 (AI 판단 참고용)
- topic-header 정합성 검증 통과:
- BLOCK_SLOTS ✅, _apply_defaults ✅, catalog ✅, 템플릿 ✅
- **깨진 fallback 수리 완료**: card-grid는 BLOCK_SLOTS/defaults/catalog 모두에서 제거된 블록이었음 → topic-header로 교체하여 전체 체인 정합
---
## 수정 파일 총괄
| 파일 | 항목 | 변경 성격 |
|------|------|----------|
| 신규 `templates/blocks/emphasis/details-block.html` | B-1 | HTML/CSS 템플릿 제작 |
| `templates/slide-base.html` | B-2 | `<script>` 6줄 추가 |
| `templates/catalog.yaml` | B-3 | details-block 항목 + 높이 참고표 업데이트 |
| `src/kei_client.py` | B-4, B-5 | KEI_PROMPT + fallback + manual_classify (3곳 동기화) |
| `src/design_director.py` | B-8 | _fallback_layout() 블록 타입 교체 + char_guide 제거 |
---
## 검증 체크리스트
- [ ] B-1: details-block.html이 `<details>/<summary>` 사용. CSS에 `var(--*)` 만 사용. `#직접값` 없음
- [ ] B-1: BLOCK_SLOTS 슬롯명(summary_text, detail_content, label)과 템플릿 변수명 일치
- [ ] B-2: 인쇄 시 details 자동 펼침. 화면에서는 접힌 상태 유지
- [ ] B-2: 다운로드 HTML에 `<script>` 포함
- [ ] B-3: catalog에 details-block 등록. _load_catalog_map()에서 정상 로드
- [ ] B-4: KEI_PROMPT에 images[] 스키마 추가. Kei API로 전달
- [ ] B-5: KEI_PROMPT에 tables[] 스키마 추가. Kei API로 전달
- [ ] B-4/B-5: fallback system_prompt에 role, info_structure, images[], tables[] 동기화
- [ ] B-4/B-5: manual_classify에 images:[], tables:[] 빈 배열 추가
- [ ] B-8: _fallback_layout()에서 "topic-header" 사용. char_guide 없음
- [ ] B-8: fallback 경로에서 topic-header 렌더링 정상 동작
---
## 수정 이력
| 날짜 | 내용 |
|------|------|
| 2026-03-25 | 초안. 하드코딩 제거 반영 (B-8 char_guide 제거, B-1 CSS 토큰 강제). fallback 동기화 추가. |
| 2026-03-25 | Phase B 전체 구현 완료. 검증 통과. |
## 구현 완료 확인
| 항목 | 검증 결과 |
|------|----------|
| B-1 | `details-block.html` 존재. `#직접값` 0개 — CSS 변수만 사용. 슬롯명(summary_text, detail_content, label) BLOCK_SLOTS와 정합 |
| B-2 | slide-base.html에 `onbeforeprint`/`onafterprint` JS 포함. `<details>` 없으면 무동작(안전) |
| B-3 | catalog에 `details-block` 등록. `_load_catalog_map()` 정상 로드 (총 46개 블록) |
| B-4 | KEI_PROMPT에 images[] 스키마 + 판단 규칙 추가 |
| B-5 | KEI_PROMPT에 tables[] 스키마 + 판단 규칙 추가 |
| B-4/5 동기화 | fallback system_prompt에 role, info_structure, images[], tables[] 동기화 완료. manual_classify에도 동기화 |
| B-8 | fallback 블록 `topic-header`. char_guide 없음(편집자 자체 판단). BLOCK_SLOTS/defaults/catalog/템플릿 전부 정합 |

177
IMPROVEMENT-PHASE-C.md Normal file
View File

@@ -0,0 +1,177 @@
# Phase C: 디자인 원칙 위반 수정 — 실행 상세
> CLAUDE.md 디자인 원칙 위반 사항 수정. 실작업 3개 (C-2는 이미 완료).
> 원칙: 하드코딩 금지. 모든 CSS 값은 디자인 토큰. 회귀 금지.
---
## 실행 순서
```
[독립] C-1 (CLAUDE.md 원칙 완화), C-3 (border-radius), C-4 (box-shadow)
모두 독립 작업. 병렬 가능.
```
---
## C-1: CLAUDE.md 원칙 완화 (gradient 허용 범위 확대)
### 현재 상태
- CLAUDE.md 327행: "HTML/CSS 블록의 배경 그라데이션 금지 (SVG 시각화 블록은 예외)"
- 실제 코드: banner-gradient, quote-question, card-dark-overlay 등에서 linear-gradient 사용
- 사용자 결정 (2026-03-25): banner-gradient의 그라데이션은 디자인의 핵심. 원칙을 완화.
### 작업
CLAUDE.md 327행 문구 변경:
```
현재: "HTML/CSS 블록의 배경 그라데이션 금지 (SVG 시각화 블록은 예외)"
변경: "HTML/CSS 블록의 배경 그라데이션 금지 (SVG 시각화 블록, 디자인 의도가 명확한 블록(배너, 오버레이, 콜아웃 등)은 허용)"
```
### 충돌/회귀
- 코드 변경 없음. 문서만 업데이트.
- 기존 코드(banner-gradient 등)를 원칙에 맞추는 것이므로 회귀 아님.
### 수정 파일
- `CLAUDE.md`
---
## C-2: ~~hover 효과 제거~~ → Phase A-8에서 이미 완료
- compare-3col-badge.html의 `tr:hover` 규칙이 A-8 작업 시 삭제됨
- _legacy/comparison-table.html에만 :hover 남아있으나 _legacy이므로 무관
- **작업 불필요**
---
## C-3: border-radius > 8px → var(--radius) 통일
### 현재 상태
- CLAUDE.md: "둥근 모서리 과다 사용 금지 (border-radius 최대 8px)"
- 디자인 토큰: `--radius: 6px` (tokens.css:38)
- 9개 파일에서 10~25px 사용 중 (위반)
- compare-pill-pair (60px, 55px)는 Phase E-2 SVG 전환 시 해소 → 지금 보류
### 작업
9개 파일의 위반 값을 모두 `var(--radius)` 로 변경. px 직접값 0개.
| 파일 | 셀렉터 | 현재 | 변경 |
|------|--------|------|------|
| compare-3col-badge.html:68 | `.th-badge` | 25px | var(--radius) |
| card-dark-overlay.html:33 | `.cd-card` | 10px | var(--radius) |
| card-text-grid.html:46 | `.card-category` | 12px | var(--radius) |
| card-compare-3col.html:38 | `.cc-card` | 10px | var(--radius) |
| card-stat-number.html:31 | `.st-card` | 10px | var(--radius) |
| quote-question.html:18 | `.block-quote-q` | 12px | var(--radius) |
| quote-big-mark.html:21 | `.block-quote-big` | 10px | var(--radius) |
| callout-warning.html:21 | `.block-callout-warn` | 12px | var(--radius) |
| callout-solution.html:22 | `.block-callout-sol` | 12px | var(--radius) |
### 하드코딩 점검
- 모든 값이 `var(--radius)` → 디자인 토큰 사용 ✅
- px 직접값 0개 ✅
- th-badge도 예외 없이 `var(--radius)` — badge가 덜 둥글지만 원칙 우선
### 충돌/회귀
- 충돌: 없음. CSS 값만 변경. overflow:hidden 있는 .cd-card에서도 radius 줄여도 무관
- 회귀: 없음. CLAUDE.md 원칙 준수 방향
- 디자인 영향: 10~12px → 6px은 시각적 차이 미미. 25px → 6px은 badge가 약간 덜 둥글어짐.
### 수정 파일
- 9개 HTML 파일 (각 1줄씩)
---
## C-4: circle-gradient box-shadow 2레벨 → 1레벨
### 현재 상태
- circle-gradient.html:31: `box-shadow: 0 0 30px rgba(0, 106, 255, 0.25), 0 0 60px rgba(0, 106, 255, 0.1);`
- CLAUDE.md: "그림자(box-shadow) 최소화 (1개 레벨만)"
### 작업
두 번째 shadow(60px, 0.1) 제거:
```css
/* 현재 */
box-shadow: 0 0 30px rgba(0, 106, 255, 0.25), 0 0 60px rgba(0, 106, 255, 0.1);
/* 변경 */
box-shadow: 0 0 30px rgba(0, 106, 255, 0.25);
```
### 하드코딩 점검
- rgba 색상값은 그라데이션 원의 글로우 색상. 디자인 토큰에 글로우용 변수는 없음.
- Phase E-1(SVG 전환) 시 CSS box-shadow가 SVG filter로 대체되면 이 값 자체가 없어짐.
- 현 단계에서는 기존 색상값 유지가 적절.
### 충돌/회귀
- 충돌: 없음. 시각적 변화만 (글로우 범위 축소)
- 회귀: 없음
### 수정 파일
- `templates/blocks/visuals/circle-gradient.html`
---
## 수정 파일 총괄
| 파일 | 항목 | 변경 성격 |
|------|------|----------|
| `CLAUDE.md` | C-1 | 원칙 문구 완화 (1줄) |
| `templates/blocks/tables/compare-3col-badge.html` | C-3 | border-radius 25px → var(--radius) |
| `templates/blocks/cards/card-dark-overlay.html` | C-3 | border-radius 10px → var(--radius) |
| `templates/blocks/cards/card-text-grid.html` | C-3 | border-radius 12px → var(--radius) |
| `templates/blocks/cards/card-compare-3col.html` | C-3 | border-radius 10px → var(--radius) |
| `templates/blocks/cards/card-stat-number.html` | C-3 | border-radius 10px → var(--radius) |
| `templates/blocks/emphasis/quote-question.html` | C-3 | border-radius 12px → var(--radius) |
| `templates/blocks/emphasis/quote-big-mark.html` | C-3 | border-radius 10px → var(--radius) |
| `templates/blocks/emphasis/callout-warning.html` | C-3 | border-radius 12px → var(--radius) |
| `templates/blocks/emphasis/callout-solution.html` | C-3 | border-radius 12px → var(--radius) |
| `templates/blocks/visuals/circle-gradient.html` | C-4 | box-shadow 2레벨 → 1레벨 |
---
## 검증 체크리스트
- [ ] C-1: CLAUDE.md에 gradient 허용 범위 확대 문구 반영
- [ ] C-3: 9개 파일에서 border-radius가 모두 var(--radius) 또는 8px 이하
- [ ] C-3: px 직접값 10px 이상이 templates/blocks/ (비 _legacy)에 없음
- [ ] C-4: circle-gradient.html에 box-shadow가 1개만
---
## 수정 이력
| 날짜 | 내용 |
|------|------|
| 2026-03-25 | 초안. th-badge도 var(--radius) 통일 (px 직접값 0개). |
| 2026-03-25 | Phase C 전체 구현 완료. 검증 통과. |
## 구현 완료 확인
| 항목 | 검증 결과 |
|------|----------|
| C-1 | CLAUDE.md에 "디자인 의도가 명확한 블록은 허용" 문구 반영 |
| C-2 | Phase A-8에서 이미 완료 (작업 없음) |
| C-3 | 9개 파일 border-radius → `var(--radius)` 변경. 전수 검증 결과 위반 0건 (compare-pill-pair만 Phase E-2 대기) |
| C-4 | circle-gradient.html box-shadow 2레벨 → 1레벨. 쉼표 0개 확인 |
### C-1 구현 결과
- CLAUDE.md 327행: "HTML/CSS 블록의 배경 그라데이션 금지" → "디자인 의도가 명확한 블록(배너, 오버레이, 콜아웃 등)은 허용"으로 완화
### C-3 구현 결과 (9개 파일)
- compare-3col-badge.html `.th-badge`: 25px → `var(--radius)`
- card-dark-overlay.html `.cd-card`: 10px → `var(--radius)`
- card-text-grid.html `.card-category`: 12px → `var(--radius)`
- card-compare-3col.html `.cc-card`: 10px → `var(--radius)`
- card-stat-number.html `.st-card`: 10px → `var(--radius)`
- quote-question.html `.block-quote-q`: 12px → `var(--radius)`
- quote-big-mark.html `.block-quote-big`: 10px → `var(--radius)`
- callout-warning.html `.block-callout-warn`: 12px → `var(--radius)`
- callout-solution.html `.block-callout-sol`: 12px → `var(--radius)`
- px 직접값 > 8px: **0건** (compare-pill-pair는 Phase E-2 대기)
### C-4 구현 결과
- circle-gradient.html:31 — `box-shadow: 0 0 30px rgba(0,106,255,0.25), 0 0 60px rgba(0,106,255,0.1)` → `box-shadow: 0 0 30px rgba(0,106,255,0.25)` (두 번째 제거)

354
IMPROVEMENT-PHASE-D.md Normal file
View File

@@ -0,0 +1,354 @@
# Phase D: 이미지 처리 — 실행 상세
> MDX 콘텐츠의 이미지 참조(`![alt](/assets/images/DX1.png)`)를 감지하고,
> 로컬 이미지 파일의 크기를 측정하여 배치 판단에 활용.
> 서버가 localhost에서 돌므로 로컬 파일 접근 가능.
> 원칙: 하드코딩 금지. 모든 판단은 AI 사고. 회귀 금지.
---
## 실행 순서
```
D-0 (이미지 경로 입력 UI + API) ← 선행 필수
→ D-1 (Pillow 유틸리티 + 이미지 추출)
→ D-2 + D-3 (비율 기반 배치 — 프롬프트에 정보 전달)
→ D-4 (텍스트 포함 도표 축소 방지)
→ D-5 (HTML에 이미지 삽입 — base64 또는 절대 경로)
```
---
## D-0: 이미지 경로 입력 UI + API 파라미터 (선행 작업)
### 현재 상태
- static/index.html:176~179 — `fetch('/api/generate', { body: JSON.stringify({ content }) })` → 텍스트만 전송
- src/main.py:35~36 — `SlideRequest` 모델에 `content: str`만
- src/pipeline.py:27~29 — `generate_slide(content, manual_layout)` → base_path 없음
### 작업
**1) static/index.html — generate() 함수 수정**
- 텍스트에서 `![...](...)` 패턴 감지 (정규식)
- 발견 시: "이미지가 포함된 콘텐츠입니다. 이미지 파일이 있는 프로젝트 폴더 경로를 입력해주세요" 팝업 (prompt)
- 미발견 시: base_path 없이 기존처럼 전송
- API 요청 body: `{ content, base_path }` (base_path는 선택)
```javascript
// 이미지 참조 감지
const imagePattern = /!\[.*?\]\((.*?)\)/g;
const hasImages = imagePattern.test(content);
let basePath = '';
if (hasImages) {
basePath = prompt(
'이미지가 포함된 콘텐츠입니다.\n' +
'이미지 파일이 있는 프로젝트 폴더 경로를 입력해주세요.\n' +
'예: D:\\ad-hoc\\kei\\content'
) || '';
}
// API 전송
body: JSON.stringify({ content, base_path: basePath })
```
**2) src/main.py — SlideRequest 모델 확장**
```python
class SlideRequest(BaseModel):
content: str
base_path: str = "" # 이미지 기준 폴더 (선택)
```
**3) src/main.py — generate 엔드포인트에서 base_path 전달**
```python
async for event in generate_slide(req.content, base_path=req.base_path):
```
**4) src/pipeline.py — generate_slide() 시그니처 확장**
```python
async def generate_slide(
content: str,
manual_layout: dict[str, Any] | None = None,
base_path: str = "",
) -> AsyncIterator[dict[str, str]]:
```
### 하드코딩 점검
- 없음. 사용자가 경로를 직접 입력. 코드에 경로 고정값 없음 ✅
### 충돌/회귀
- SlideRequest에 base_path 추가: 기본값 `""` → 기존 요청(base_path 없는)과 호환 ✅
- generate_slide() 시그니처에 base_path 추가: 기본값 `""` → 기존 호출과 호환 ✅
- index.html generate() 함수: 이미지 없으면 기존과 동일 동작 ✅
### 수정 파일
- `static/index.html` — generate() 함수
- `src/main.py` — SlideRequest + generate 엔드포인트
- `src/pipeline.py` — generate_slide() 시그니처
---
## D-1: Pillow 이미지 크기 읽기 유틸리티
### 현재 상태
- Pillow import/사용 전무. pyproject.toml에도 없음. src/utils/ 디렉토리 없음.
### 작업
**1) pyproject.toml에 Pillow 추가**
```toml
dependencies = [
...
"Pillow>=10.0",
]
```
**2) src/image_utils.py 신규 제작**
```python
"""이미지 크기 측정 유틸리티."""
from pathlib import Path
from PIL import Image
def get_image_sizes(content: str, base_path: str) -> list[dict]:
"""콘텐츠에서 이미지 참조를 추출하고 로컬 파일 크기를 측정한다.
Args:
content: MDX/텍스트 콘텐츠
base_path: 이미지 파일 기준 폴더 경로
Returns:
[{"path": "/assets/images/DX1.png", "width": 800, "height": 600,
"ratio": 1.33, "orientation": "landscape"}]
"""
import re
if not base_path:
return []
base = Path(base_path)
images = []
for match in re.finditer(r'!\[.*?\]\((.*?)\)', content):
rel_path = match.group(1).strip()
# 상대 경로 해석
abs_path = base / rel_path.lstrip('/')
if abs_path.exists() and abs_path.suffix.lower() in ('.png', '.jpg', '.jpeg', '.gif', '.webp'):
try:
with Image.open(abs_path) as img:
w, h = img.size # 헤더만 읽음
ratio = w / h if h > 0 else 1.0
orientation = "landscape" if ratio > 1.2 else ("portrait" if ratio < 0.8 else "square")
images.append({
"path": rel_path,
"width": w,
"height": h,
"ratio": round(ratio, 2),
"orientation": orientation,
})
except Exception:
images.append({"path": rel_path, "width": 0, "height": 0, "ratio": 0, "orientation": "unknown"})
else:
images.append({"path": rel_path, "width": 0, "height": 0, "ratio": 0, "orientation": "not_found"})
return images
```
### 하드코딩 점검
- ratio 기준 1.2, 0.8: CLAUDE.md 원문 "가로형(ratio > 1.2)", "세로형(ratio < 0.8)" — 문서 기준값이므로 하드코딩 아님 ✅
- 이미지 확장자 목록: 웹 표준 이미지 포맷. 변할 일 없음 ✅
### 충돌/회귀
- 신규 파일 추가만. 기존 코드 변경 없음 ✅
- Pillow는 `Image.open()` 시 헤더만 읽음 (전체 디코딩 안 함) → 성능 안전 ✅
### 수정 파일
- `pyproject.toml` — Pillow 의존성 추가
- 신규 `src/image_utils.py`
---
## D-2 + D-3: 비율 기반 배치 판단
### 현재 상태
- 비율 기반 배치 판단 코드 없음
- B-4에서 1단계 images[] 필드 추가했지만, 실제 크기 정보는 없음
### 작업
pipeline.py에서 D-1 유틸리티 호출 → 이미지 크기/비율 정보를 2단계 Step B와 4단계 Sonnet에 전달
```python
# pipeline.py generate_slide() 내, 2단계 전에:
from src.image_utils import get_image_sizes
image_sizes = get_image_sizes(content, base_path)
if image_sizes:
# analysis에 이미지 크기 정보 추가
analysis["image_sizes"] = image_sizes
```
design_director.py `create_layout_concept()`에서 user_prompt에 이미지 정보 포함:
```python
# 이미지 크기 정보가 있으면 프롬프트에 포함
if analysis.get("image_sizes"):
image_info = "\n".join(
f"- {img['path']}: {img['width']}×{img['height']}px, {img['orientation']}"
for img in analysis["image_sizes"]
)
user_prompt += f"\n\n## 이미지 크기 정보\n{image_info}\n"
```
→ Sonnet(팀장)이 이 정보를 보고 "가로형 → 전체 너비", "세로형 → 텍스트 옆" 등을 판단.
### 하드코딩 점검
- 비율 판단: AI(팀장)가 orientation 정보를 보고 결정 ✅
- 코드는 크기 정보를 전달만. 배치 결정은 AI ✅
### 충돌/회귀
- pipeline.py: 기존 흐름 사이에 이미지 측정 삽입. base_path 없으면 빈 리스트 → 영향 없음 ✅
- design_director.py: user_prompt에 텍스트 추가만. 이미지 없으면 추가 안 함 ✅
- analysis에 image_sizes 추가: 기존 코드는 `.get()` 패턴 → 안전 ✅
### 수정 파일
- `src/pipeline.py` — generate_slide()에서 get_image_sizes() 호출
- `src/design_director.py` — create_layout_concept()에서 이미지 정보 프롬프트 포함
---
## D-4: 텍스트 포함 도표 → 과도한 축소 방지
### 현재 상태
- B-4에서 images[].has_text 필드 추가 (1단계 Kei가 판단)
- 이 정보를 기반으로 "축소하지 마라" 가이드 없음
### 작업
D-2/D-3의 이미지 정보 전달 시, has_text 정보도 함께 포함:
```python
# pipeline.py에서 1단계 analysis의 images[]와 D-1의 image_sizes를 결합
for img_size in image_sizes:
# 1단계에서 판단한 has_text 정보 매칭
for kei_img in analysis.get("images", []):
if kei_img.get("description", "") in img_size.get("path", ""):
img_size["has_text"] = kei_img.get("has_text", False)
```
→ Sonnet 프롬프트에 "has_text: true인 이미지는 텍스트가 포함된 도표이므로 과도하게 축소하지 마라" 가이드
### 하드코딩 점검
- 축소 여부: AI가 판단 ✅
- has_text: 1단계 Kei가 판단 ✅
### 충돌/회귀
- 기존 데이터에 필드 추가만. 없으면 무시됨 ✅
### 수정 파일
- `src/pipeline.py`
---
## D-5: 슬라이드 HTML에 이미지 삽입
### 현재 상태
- 이미지 블록(image-row, image-side-text 등)은 `{{ img.src }}` 슬롯에 경로를 넣지만
- 다운로드 HTML에서 상대 경로는 깨짐 (로컬 파일이므로)
### 작업
렌더링 완료 후, HTML의 이미지 src를 base64 data URI로 변환:
```python
# renderer.py 또는 pipeline.py에서 최종 HTML 후처리
import base64, re
def embed_images(html: str, base_path: str) -> str:
"""HTML의 이미지 src를 base64 data URI로 변환."""
if not base_path:
return html
base = Path(base_path)
def replace_src(match):
src = match.group(1)
abs_path = base / src.lstrip('/')
if abs_path.exists():
mime = 'image/png' if abs_path.suffix == '.png' else 'image/jpeg'
data = base64.b64encode(abs_path.read_bytes()).decode()
return f'src="data:{mime};base64,{data}"'
return match.group(0)
return re.sub(r'src="(/[^"]+\.(?:png|jpg|jpeg|gif|webp))"', replace_src, html)
```
### 하드코딩 점검
- MIME 타입: 확장자 기반 표준 매핑. 하드코딩 아님 ✅
- 이미지 확장자: D-1과 동일 목록 ✅
### 충돌/회귀
- 최종 HTML 후처리. 이미지 없으면 정규식 매칭 없음 → 기존과 동일 ✅
- base_path 없으면 함수 즉시 반환 → 안전 ✅
### 수정 파일
- `src/image_utils.py` (embed_images 함수 추가) 또는 `src/pipeline.py`
---
## 수정 파일 총괄
| 파일 | 항목 | 변경 성격 |
|------|------|----------|
| `static/index.html` | D-0 | generate() 함수에 이미지 감지 + 경로 입력 팝업 |
| `src/main.py` | D-0 | SlideRequest에 base_path 추가 + 엔드포인트 전달 |
| `src/pipeline.py` | D-0, D-2~D-4 | generate_slide() 시그니처 + 이미지 크기 측정 + 프롬프트 전달 |
| `pyproject.toml` | D-1 | Pillow 의존성 추가 |
| 신규 `src/image_utils.py` | D-1, D-5 | get_image_sizes() + embed_images() |
| `src/design_director.py` | D-2, D-3 | user_prompt에 이미지 크기/비율 정보 포함 |
---
## 검증 체크리스트
- [ ] D-0: 이미지 없는 텍스트 → 팝업 안 뜸. 기존과 동일 동작
- [ ] D-0: 이미지 있는 MDX → 팝업 뜨고 경로 입력 → API에 base_path 전달
- [ ] D-0: 팝업에서 취소 → base_path="" → 이미지 처리 스킵 (에러 없음)
- [ ] D-1: Pillow로 이미지 크기 측정. 파일 없으면 width=0, orientation="not_found"
- [ ] D-2/D-3: Sonnet 프롬프트에 이미지 크기/orientation 정보 포함
- [ ] D-4: has_text=true 이미지에 대해 "축소 금지" 가이드 전달
- [ ] D-5: 다운로드 HTML에서 이미지가 base64로 삽입되어 보임
- [ ] 이미지 없는 기존 콘텐츠: 전체 파이프라인 기존과 동일하게 동작 (회귀 없음)
---
## 수정 이력
| 날짜 | 내용 |
|------|------|
| 2026-03-25 | 초안. D-0(선행 UI) 추가. D-5(HTML 이미지 삽입) 추가. 6개 항목. |
| 2026-03-25 | Phase D 전체 구현 완료. 검증 통과. |
## 구현 완료 확인
| 항목 | 검증 결과 |
|------|----------|
| D-0 | SlideRequest에 base_path="" 기본값 추가. generate_slide()에 base_path 파라미터 추가. index.html에 이미지 감지+팝업. 기존 요청(base_path 없는) 호환 ✅ |
| D-1 | pyproject.toml에 Pillow>=10.0 추가. src/image_utils.py 신규 (get_image_sizes + embed_images). Pillow 10.4.0 설치 확인. base_path 없으면 빈 리스트 반환(안전) |
| D-2+D-3 | pipeline.py에서 get_image_sizes() 호출 → analysis["image_sizes"] 저장. design_director.py user_prompt에 이미지 크기/orientation/배치 가이드 포함. 이미지 없으면 추가 안 함(기존 동일) |
| D-4 | design_director.py에서 has_text=true 이미지에 "(텍스트 포함 도표 — 과도한 축소 금지)" 가이드 자동 추가 |
| D-5 | pipeline.py에서 최종 HTML 반환 전 embed_images(html, base_path) 호출. base_path 없으면 원본 그대로 반환(안전) |
### D-0 구현 결과
- `src/main.py`: SlideRequest에 `base_path: str = ""` 추가. generate 엔드포인트에서 `base_path=req.base_path` 전달.
- `src/pipeline.py`: generate_slide() 시그니처에 `base_path: str = ""` 추가.
- `static/index.html`: generate() 함수에서 `![...](...)` 패턴 감지 → prompt()로 경로 입력 → API에 `{ content, base_path }` 전송. 취소 시 `base_path=""` → 이미지 처리 스킵.
### D-1 구현 결과
- `pyproject.toml`: `"Pillow>=10.0"` 의존성 추가.
- `src/image_utils.py` 신규:
- `get_image_sizes(content, base_path)`: MDX에서 `![alt](path)` 추출 → base_path + 상대경로 해석 → Pillow `Image.open().size` → {path, width, height, ratio, orientation} 반환
- `embed_images(html, base_path)`: HTML의 `src="/...png"` → `src="data:image/png;base64,..."` 변환
- 파일 미발견/에러 시 orientation="not_found"/"error" → 에러 없이 계속 진행
### D-2+D-3+D-4 구현 결과
- `src/pipeline.py`: 1단계 완료 직후 `get_image_sizes()` 호출 → `analysis["image_sizes"]` 저장
- `src/design_director.py`: user_prompt에 이미지 정보 섹션 추가 — 각 이미지의 크기/orientation + "가로형 → 전체 너비", "세로형 → 텍스트 옆", "텍스트 포함 도표 → 축소 금지" 가이드
- has_text 정보는 1단계 Kei의 images[].has_text와 D-1 크기 정보가 결합됨
### D-5 구현 결과
- `src/pipeline.py`: yield result 직전에 `embed_images(html, base_path)` 호출
- base_path 없으면 원본 HTML 그대로 반환 (기존과 동일)

309
IMPROVEMENT.md Normal file
View File

@@ -0,0 +1,309 @@
# Design Agent — 개선 계획
CLAUDE.md 요구사항 전수검토 결과 발견된 미구현/부분구현/위반 사항 33개의 개선 계획.
2026-03-25 기준 코드 감사 결과에 기반.
---
## Phase A: 슬라이드 품질 핵심 (8개)
> "프레임에 내용이 안 보인다"의 직접 원인. 최우선.
> **실행 상세:** [IMPROVEMENT-PHASE-A.md](IMPROVEMENT-PHASE-A.md)
### A-1: 4단계 Sonnet 디자인 조정 추가
- **현재:** Jinja2 렌더링만 수행. 텍스트 길이에 맞는 디자인 조정 없음.
- **CLAUDE.md:** "디자인 실무자 (Sonnet + Jinja2 + CSS) — 편집자가 정리한 텍스트에 맞게 폰트/여백/박스 조정"
- **작업:** pipeline.py 4단계에서 render_slide() 호출 전, Sonnet이 블록별 텍스트 길이를 보고 CSS 조정값(font-size, padding, gap 등)을 결정하는 호출 추가
- **파일:** pipeline.py, 새 함수 또는 renderer.py 확장
- **의존성:** 없음
### A-2: 5단계 HTML을 프롬프트에 전달
- **현재:** `_review_balance(html, ...)` 시그니처에 html 있지만 프롬프트에 미포함. 데이터 길이만 전달.
- **CLAUDE.md:** "1차 조립 결과의 전체 균형 확인"
- **작업:** _review_balance() 프롬프트에 HTML 구조 요약 또는 전문 포함
- **파일:** pipeline.py `_review_balance()`
- **의존성:** 없음
### A-3: 5단계 shrink action 구현
- **현재:** `_apply_adjustments()`에서 `action in ("expand", "rewrite")` 조건만 처리. shrink 무시.
- **작업:** shrink 시 char_guide 값을 0.7배로 축소하는 분기 추가
- **파일:** pipeline.py `_apply_adjustments()`
- **의존성:** 없음
### A-4: 5단계 rewrite action 구현
- **현재:** rewrite가 expand와 같은 조건에 들어가지만 실제 동작 없음 (no-op).
- **작업:** rewrite 시 해당 블록의 data를 초기화하고 fill_content()로 재편집
- **파일:** pipeline.py `_apply_adjustments()`
- **의존성:** 없음
### A-5: overflow:hidden vs "텍스트 자르지 않는다" 원칙 해소
- **현재:** base.css에 `.slide { overflow: hidden }` + `.slide > div { overflow: hidden }`. 텍스트 넘치면 잘림.
- **CLAUDE.md:** "텍스트를 자르지 않는다 (디자인이 텍스트에 맞춘다)"
- **작업:** A-1(Sonnet 디자인 조정)으로 넘침을 사전 방지. `.slide > div`의 overflow를 재검토. 최소한 텍스트 블록은 overflow: visible 또는 auto 허용.
- **파일:** static/base.css
- **의존성:** A-1 완료 후 정책 결정
### A-6: object-fit: cover → contain 수정
- **현재:** image-row-2col.html, image-grid-2x2.html에서 `object-fit: cover` 사용 → 이미지 crop 발생
- **CLAUDE.md:** "이미지를 crop하지 않는다", "object-fit: contain"
- **작업:** cover → contain으로 변경
- **파일:** templates/blocks/media/image-row-2col.html, templates/blocks/media/image-grid-2x2.html
- **의존성:** 없음
### A-7: table-layout: fixed 적용
- **현재:** compare-3col-badge.html에 table-layout 미지정
- **CLAUDE.md:** "table-layout: fixed"
- **작업:** 테이블 CSS에 table-layout: fixed 추가
- **파일:** templates/blocks/tables/compare-3col-badge.html
- **의존성:** 없음
### A-8: container query 폰트 스케일링
- **현재:** 표 셀 폰트 크기 고정
- **CLAUDE.md:** "container query 폰트 스케일링"
- **작업:** @container 규칙으로 표 크기에 따른 폰트 자동 축소
- **파일:** templates/blocks/tables/compare-3col-badge.html
- **의존성:** A-7
---
## Phase B: 누락 기능 구현 (8개)
> **실행 상세:** [IMPROVEMENT-PHASE-B.md](IMPROVEMENT-PHASE-B.md)
### B-1: details-block 템플릿 제작
- **현재:** BLOCK_SLOTS에 정의만 있고 HTML 템플릿 파일 없음. 렌더링 불가.
- **CLAUDE.md:** "HTML 네이티브 `<details>/<summary>` 사용"
- **작업:** `<details>/<summary>` 기반 접기/펼치기 블록 템플릿 제작
- **파일:** 신규 templates/blocks/emphasis/details-block.html
- **의존성:** 없음
### B-2: 인쇄 시 details 자동 펼침 JS
- **현재:** 미구현
- **CLAUDE.md:** "인쇄 시 JavaScript 6줄로 자동 펼침"
- **작업:** slide-base.html에 `window.onbeforeprint` 핸들러 추가
- **파일:** templates/slide-base.html
- **의존성:** B-1
### B-3: catalog에 details-block 등록
- **현재:** catalog.yaml에 미등록 → 팀장이 선택 불가
- **작업:** id, when, not_for, slots, height_cost 정의하여 등록
- **파일:** templates/catalog.yaml
- **의존성:** B-1
### B-4: 1단계 이미지 상세 판단 필드
- **현재:** `content_type: "image"` 한 줄만. 개수/소속/핵심여부/텍스트포함 없음.
- **CLAUDE.md:** "몇 개인지, 어떤 꼭지 소속인지, 핵심/보조인지, 텍스트 포함 이미지인지"
- **작업:** KEI_PROMPT 출력 형식에 images[] 배열 추가 (count, topic_id, role, has_text)
- **파일:** src/kei_client.py KEI_PROMPT
- **의존성:** 없음
### B-5: 1단계 표 상세 판단 필드
- **현재:** `content_type: "table"` 한 줄만. 행/열 규모 없음.
- **CLAUDE.md:** "행/열 규모, 전체 표시 가능 여부"
- **작업:** KEI_PROMPT 출력 형식에 tables[] 배열 추가 (rows, cols, fits_single_page)
- **파일:** src/kei_client.py KEI_PROMPT
- **의존성:** 없음
### B-6: ~~catalog에 quote-left-border 등록 여부~~ → 제외 확정
- **결정 (2026-03-25):** 등록 안 함. 구 블록 제거 방향 유지. 신규 블록(quote-question)만 사용.
- **상태:** 해결됨 (작업 불필요)
### B-7: ~~catalog에 comparison-2col 등록 여부~~ → 제외 확정
- **결정 (2026-03-25):** 등록 안 함. 구 블록 제거 방향 유지. 신규 블록(compare-box, comparison-table)만 사용.
- **상태:** 해결됨 (작업 불필요)
### B-8: fallback_layout에서 card-grid → 신규 블록 교체
- **현재:** `_fallback_layout()`에서 삭제된 `"card-grid"` 타입 사용 (design_director.py:438)
- **작업:** card-image 또는 topic-header 등 신규 블록으로 교체
- **파일:** src/design_director.py `_fallback_layout()`
- **의존성:** 없음
---
## Phase C: 디자인 원칙 위반 수정 (4개)
> **실행 상세:** [IMPROVEMENT-PHASE-C.md](IMPROVEMENT-PHASE-C.md)
### C-1: ~~HTML/CSS 블록 배경 그라데이션 제거~~ → CLAUDE.md 원칙 완화
- **결정 (2026-03-25):** banner-gradient의 그라데이션은 디자인의 핵심. 코드 수정 대신 CLAUDE.md 원칙을 완화.
- **작업:** CLAUDE.md의 "HTML/CSS 블록의 배경 그라데이션 금지" → "디자인 의도가 명확한 블록(배너, 오버레이 등)은 허용" 으로 업데이트
- **파일:** CLAUDE.md
- **상태:** CLAUDE.md 업데이트만 필요
### C-2: hover 효과 제거
- **현재:** compare-3col-badge.html에 `tr:hover` 배경색 변경
- **CLAUDE.md:** "호버 효과 금지"
- **작업:** :hover 규칙 삭제
- **파일:** templates/blocks/tables/compare-3col-badge.html
- **의존성:** 없음
### C-3: border-radius > 8px 수정
- **현재:** quote-question(12px), compare-pill-pair(60px), card-dark-overlay(10px), card-text-grid(12px), compare-3col-badge(25px)
- **CLAUDE.md:** "둥근 모서리 과다 사용 금지 (border-radius 최대 8px)"
- **작업:** 모두 var(--radius)(6px) 또는 최대 8px로 조정
- **파일:** 5개 html 파일
- **의존성:** 없음. 단, compare-pill-pair(60px)는 "pill" 모양이 디자인 의도 — 이 블록은 SVG 전환(E-2) 시 해결될 수 있음
### C-4: circle-gradient box-shadow 2레벨 → 1레벨
- **현재:** 2개 box-shadow (0 0 30px + 0 0 60px)
- **CLAUDE.md:** "그림자 최소화 (1개 레벨만)"
- **작업:** shadow 1개로 축소. 또는 SVG 전환(E-1) 시 filter로 대체
- **파일:** templates/blocks/visuals/circle-gradient.html
- **의존성:** 없음
---
## Phase D: 이미지 처리 — Pillow 도입 (6개)
> **실행 상세:** [IMPROVEMENT-PHASE-D.md](IMPROVEMENT-PHASE-D.md)
> MDX 콘텐츠에 `![alt](/assets/images/DX1.png)` 같은 이미지 참조가 포함됨.
> 이미지 파일은 로컬 디스크에 존재 (MDX 프로젝트 폴더 기준 상대 경로).
> 서버가 localhost에서 돌므로 로컬 파일 접근 가능.
### D-0: 이미지 경로 입력 UI + API 파라미터 (선행 작업)
- **현재:** 프론트엔드에서 텍스트만 전송. 이미지 기준 경로 전달 방법 없음.
- **필요 이유:** 이미지 상대 경로(`/assets/images/DX1.png`)를 절대 경로로 해석하려면 base_path 필요.
- **작업:**
- 프론트엔드(static/index.html): 텍스트에서 `![...](...)` 패턴 감지 → 발견 시 "이미지 폴더 위치" 입력 팝업 표시
- API(src/main.py): `/api/generate` 엔드포인트에 `base_path` 선택 파라미터 추가
- 파이프라인(src/pipeline.py): `generate_slide()`에 `base_path` 전달
- **파일:** static/index.html, src/main.py, src/pipeline.py
- **의존성:** 없음
### D-1: Pillow 이미지 크기 읽기 유틸리티
- **현재:** Pillow import/사용 전무. pyproject.toml에도 없음. src/utils/ 디렉토리 없음.
- **CLAUDE.md:** "Pillow Image.open().size (헤더만 읽음)"
- **작업:**
- pyproject.toml에 `Pillow>=10.0` 추가
- 유틸리티 함수: base_path + 상대 경로 → Pillow로 (width, height) 반환
- 콘텐츠 텍스트에서 `![alt](path)` 패턴 추출 → 각 이미지 크기 측정
- **파일:** pyproject.toml, 신규 src/image_utils.py
- **의존성:** D-0 (base_path 전달 체계)
### D-2: 가로형 이미지(ratio > 1.2) → 전체 너비 배치
- **현재:** 비율 기반 배치 판단 없음
- **작업:** 파이프라인에서 이미지 크기/비율 정보를 2단계 Step B와 4단계 Sonnet에 전달. 팀장/실무자가 배치 판단.
- **파일:** src/pipeline.py 또는 src/design_director.py
- **의존성:** D-1
### D-3: 세로형 이미지(ratio < 0.8) → 텍스트 옆 배치
- **현재:** 미구현
- **작업:** D-2와 함께 구현. 비율 정보를 프롬프트에 포함하면 AI가 배치 판단.
- **파일:** src/design_director.py
- **의존성:** D-1
### D-4: 텍스트 포함 도표 → 과도한 축소 방지
- **현재:** 미구현
- **작업:** B-4에서 추가한 images[].has_text 정보와 D-1의 크기 정보를 결합. has_text=true이면 "이 이미지는 축소하지 마라" 프롬프트 가이드.
- **파일:** src/design_director.py
- **의존성:** D-1, B-4 (이미지 상세 판단)
### D-5: 슬라이드 HTML에 이미지 경로 삽입
- **현재:** 이미지 블록(image-row, image-side-text 등)은 src 슬롯에 URL/경로를 넣지만, 실제 이미지 경로가 연결 안 됨.
- **작업:** 렌더링된 HTML에서 이미지 상대 경로를 절대 경로 또는 data URI(base64)로 변환하여 다운로드 HTML에서도 이미지 표시.
- **파일:** src/renderer.py 또는 src/pipeline.py
- **의존성:** D-0, D-1
---
## Phase E: visuals 블록 SVG 전환 (3개) — Phase 2 이후 진행
> **Phase 2 이후로 연기.**
> 다른 Claude가 Phase 2에서 `svg_calculator.py`(좌표 계산 모듈) + `renderer.py`에 `_preprocess_svg_data()` + `venn-diagram.html` 동적 템플릿 작업 중.
> Phase E는 이 인프라 위에서 나머지 3개 블록을 SVG로 전환하는 작업이므로, Phase 2 완료 후 진행해야 함.
>
> **활용 방식:** `svg_calculator.py`에 각 블록용 좌표 함수 추가 + `_preprocess_svg_data()`에 블록 등록.
>
> **P2-D(shrink/rewrite)는 Phase A(A-3/A-4)에서 이미 구현 완료.** 다른 Claude에게 중복 방지 알림 필요.
### E-1: circle-gradient → SVG
- **현재:** CSS border-radius + linear-gradient
- **작업:** SVG `<circle>` + `<radialGradient>` + `<text>`로 재제작. `svg_calculator.py`에 함수 추가.
- **파일:** templates/blocks/visuals/circle-gradient.html, src/svg_calculator.py
- **의존성:** Phase 2 P2-B 완료
### E-2: compare-pill-pair → SVG
- **현재:** HTML div + CSS border-radius: 60px
- **작업:** SVG `<rect rx="30">` + `<text>`로 재제작. C-3 border-radius 위반도 해소.
- **파일:** templates/blocks/visuals/compare-pill-pair.html
- **의존성:** Phase 2 P2-B 완료
### E-3: process-horizontal → SVG
- **현재:** HTML/CSS flexbox + 가상 화살표
- **작업:** SVG `<circle>` + `<line>` + `<polygon>` + `<text>`로 재제작. `svg_calculator.py`에 함수 추가.
- **파일:** templates/blocks/visuals/process-horizontal.html, src/svg_calculator.py
- **의존성:** Phase 2 P2-B 완료
---
## Phase F: 향후 — Phase 2 이후 (6개)
### F-1: Step A를 AI 선택으로 전환
- **현재:** 규칙 기반 4줄 코드 (CLAUDE.md에는 "규칙 기반"으로 명시)
- **대화에서 요청됨:** AI가 프리셋을 선택하도록 변경
- **작업:** select_preset()을 Sonnet 호출로 전환. CLAUDE.md 업데이트.
- **의존성:** CLAUDE.md 원칙 변경 합의
### F-2: Gemini API 배경 생성
- **현재:** 미구현
- **CLAUDE.md:** "실사 배경: Gemini API (배경 텍스처 전용)"
- **작업:** section-title-with-bg 등의 배경 이미지를 Gemini로 생성
- **의존성:** Gemini API 키
### F-3: FAISS 블록 검색
- **현재:** 미구현 (PLAN.md DA-20)
- **CLAUDE.md:** "변형 40개 이상부터 FAISS 도입 검토"
- **작업:** 블록 HTML 구조/용도 임베딩 → FAISS 인덱스 → 검색
- **의존성:** DA-19 (변형 40개+)
### F-4: venn-diagram N개 자동 배치 (cos/sin)
- **현재:** Phase 1 — 3개 고정 SVG
- **CLAUDE.md:** "Phase 2: N개 자동 배치 (360/N 간격, cos/sin)"
- **작업:** renderer에서 items 개수에 따라 좌표 계산 후 템플릿에 전달
- **의존성:** 없음
### F-5: Figma REST API 연동
- **현재:** 수동 에셋만 (docs/figma-assets/)
- **작업:** Figma API로 에셋 자동 추출
- **의존성:** Figma API 키
### F-6: .astro (Starlight) 출력
- **현재:** HTML 다운로드만
- **작업:** HTML → .astro 변환 출력 옵션
- **의존성:** Starlight 연동 설계
---
## Phase별 의존 관계
```
Phase A (슬라이드 품질)
├── A-1~A-4: 독립 작업 가능
├── A-5: A-1 완료 후
├── A-6, A-7: 독립
└── A-8: A-7 완료 후
Phase B (누락 기능)
├── B-1~B-5, B-8: 독립
├── B-2, B-3: B-1 완료 후
└── B-6, B-7: 사용자 결정 대기
Phase C (디자인 원칙) → 독립. A/B와 병렬 가능.
└── C-1: 사용자 결정 대기 (원칙 변경 vs 코드 수정)
Phase D (Pillow) → D-1 선행, 나머지 순차
└── D-4: B-4 완료 후
Phase E (SVG 전환) → 독립. A/B/C와 병렬 가능.
Phase F (향후) → Phase A~E 완료 후.
└── F-1: CLAUDE.md 합의 후
```
---
## 수정 이력
| 날짜 | 내용 |
|------|------|
| 2026-03-25 | 초안 작성. CLAUDE.md 전수검토 기반 33개 항목 도출. |

190
PLAN.md
View File

@@ -170,25 +170,191 @@
- **의존성:** 없음
- **완료 기준:** 다운로드한 HTML 파일에서 한글 정상 표시
### BF-4: body 블록 겹침 (같은 area에 여러 div)
- **파일:** src/renderer.py
- **내용:** 같은 area의 블록을 하나의 div로 그룹핑 (OrderedDict + flex-column)
- **기술:** Python OrderedDict (내장)
- **의존성:** BF-5 (area명 통일 선행)
- **완료 기준:** body에 4개 블록이 세로로 쌓여서 보임 (겹침 없음)
- **상태:** 코드 수정 완료, md 반영 중
### BF-5: 제목 안 보임 (area명 불일치)
- **파일:** src/design_director.py (LAYOUT_PRESETS)
- **내용:** 프리셋 4개의 area명 `title` → `header`로 통일 (slide-base.html이 `header` 사용)
- **기술:** 문자열 교체
- **의존성:** 없음
- **완료 기준:** 슬라이드에 제목이 표시됨
- **상태:** sidebar-right 프리셋 수정 완료, 나머지 3개 확인 필요
### BF-6: sidebar 카드 3열 찢어짐
- **파일:** src/design_director.py (STEP_B_PROMPT)
- **내용:** 팀장 Step B 프롬프트에 "sidebar zone은 전체 너비의 35%로 좁다. card-grid 배치 시 카드 열 수를 공간에 맞게 판단하라" 추가
- **기술:** 프롬프트 엔지니어링
- **의존성:** 없음
- **완료 기준:** sidebar의 카드가 1열 세로로 배치됨
- **상태:** 미수정
### BF-7: body 블록 텍스트 비어있음 (content_editor 매칭 오류)
- **파일:** src/content_editor.py
- **내용:** 같은 area에 여러 블록이 있을 때 첫 번째만 매칭되는 문제. `break` 제거 + area+topic_id로 정확 매칭. 편집자 프롬프트 출력 형식에 `topic_id` 추가.
- **기술:** Python 조건문 수정
- **의존성:** 없음
- **완료 기준:** body의 모든 블록에 텍스트가 채워짐
- **상태:** 미수정
### BF-8: 컨테이너 예산 기반 블록 배치 (프레임 넘침 방지)
- **파일:** src/design_director.py, templates/catalog.yaml, static/base.css, templates/blocks/visuals/*.html
- **내용:**
- 근본 원인: 팀장이 콘텐츠 중심으로 블록 선택 → 높이 고려 없이 body에 4개 블록 쌓음 → 720px 초과 → overflow:hidden으로 잘림
- 해결: 컨테이너(zone) 크기 예산을 먼저 확인하고, 예산 안에서 블록을 선택하는 사고 순서로 전환
- LAYOUT_PRESETS: zone별 budget_px + width_pct 추가
- STEP_B_PROMPT: 4단계 사고 순서 (컨테이너 확인→배정→블록 선택+높이 계산→검증)
- catalog.yaml: 블록별 height_cost 추가 (compact ~70px / medium ~150px / large ~200px / xlarge ~400px)
- base.css: area 컨테이너에 overflow:hidden + min-height:0 안전망
- 시각화 블록 CSS: flex-shrink + responsive SVG
- **기술:** 프롬프트 엔지니어링 + CSS 안전망
- **의존성:** 없음
- **완료 기준:** body 영역 블록이 720px 프레임 안에 모두 보임. 넘침 없음.
- **한계:** 프롬프트만으로는 Sonnet이 grid를 무시하는 문제를 방지할 수 없음 → BF-9 필요
### BF-9: grid와 Sonnet의 역할 분리 (설계 수정)
- **파일:** src/design_director.py
- **내용:**
- 설계 오류: Step B에서 Sonnet에게 grid 값을 출력하라고 요구 → Sonnet이 자기만의 grid를 생성해버림
- 근본 원인: grid는 코드(Step A)가 결정하는 것인데 Sonnet에게 에코를 요구한 것 자체가 잘못
- 해결:
- Step B 프롬프트에서 grid 출력 요구 제거. Sonnet은 `blocks` 배열만 출력
- `create_layout_concept()`에서 grid 값은 프리셋에서 직접 가져옴 (Sonnet 출력 무시)
- Sonnet이 출력한 area명이 프리셋 zone에 없으면 가장 가까운 zone으로 코드 매핑
- 원칙: **코드가 결정한 것은 코드가 유지한다. Sonnet은 콘텐츠 판단만.**
- **기술:** Python 코드 수정 + 프롬프트 출력 형식 변경
- **의존성:** BF-8 (프리셋에 zone 정보 필요)
- **완료 기준:** Sonnet 출력에 grid 값이 없음. 최종 HTML의 grid는 항상 프리셋과 100% 일치.
### BF-10: _CATALOG_MAP 캐시 갱신 문제
- **파일:** src/renderer.py
- **내용:**
- 현상: catalog.yaml을 수정해도 서버 재시작 전까지 구 매핑 유지 → _legacy 블록 로드
- 근본 원인: _CATALOG_MAP이 모듈 레벨 global로 한 번만 로드됨
- 해결: reload 옵션 (--reload 시 자동 갱신) 또는 매 요청마다 파일 mtime 확인 후 reload
- **기술:** Python pathlib stat() (내장)
- **의존성:** 없음
- **완료 기준:** catalog.yaml 수정 → 서버 재시작 없이 새 매핑 적용
### DA-16: 통합 테스트
- **파일:** tests/test_pipeline.py, tests/test_renderer.py
- **내용:** 전체 파이프라인 테스트 + 블록 렌더링 테스트
- **의존성:** BF-2, BF-3
- **의존성:** BF-2, BF-3, BF-4, BF-5, BF-6, BF-7
- **완료 기준:** 테스트 전체 통과
---
---
## Phase 5: 블록 라이브러리 확장
### DA-17: Figma 에셋 추출 + 블록 템플릿 제작
- **상태:** done
- **산출물:**
- Figma 스크린샷 16장 (`docs/figma-screenshots/`)
- Figma 에셋 15개+ (`docs/figma-assets/`)
- 신규 블록 템플릿 6종 (`templates/blocks/` 카테고리별)
- 디자인 분석 보고서 (`docs/figma-analysis/DESIGN-ANALYSIS.md`)
- 블록 인덱스 (`templates/blocks/INDEX.md`)
- **완료 기준:** 신규 블록 6개 독립 렌더링 테스트 통과, Figma 톤 반영
### DA-18: 블록 라이브러리 카테고리 재편
- **상태:** done
- **내용:** 플랫 구조 → 6개 카테고리 폴더 (headers, cards, tables, visuals, emphasis, media)
- **완료 기준:** INDEX.md에 전체 구조 정리, 기존 루트 파일 정리
### DA-19: 변형 확장
- **상태:** done (46개 달성)
- **산출물:** 46개 블록 (6 카테고리), catalog.yaml 46개, BLOCK_SLOTS 46개 동기화
- **완료 기준:** ✅ 달성
---
## Phase 2: 파이프라인 고도화 (상세: docs/PHASE2-PLAN.md, PHASE2-PROCESS.md)
### P2-A: FAISS 블록 검색 인덱스
- **파일:** `src/block_search.py` (신규), `scripts/build_block_index.py` (신규), `src/design_director.py` (수정)
- **내용:** catalog 전문 → FAISS 검색으로 관련 블록 5~8개만 프롬프트에 전달
- **기술:** BAAI/bge-m3 + faiss-cpu (Kei persona와 동일 패턴)
- **의존성:** 없음
- **완료 기준:** 꼭지별 검색 → 카테고리별 최소 1개 보장 → 프롬프트 토큰 절약
### P2-B: SVG N개 자동 배치
- **파일:** `src/svg_calculator.py` (신규), `src/renderer.py` (수정), `templates/blocks/visuals/venn-diagram.html` (수정)
- **내용:** venn-diagram 3개 고정 → N개(2~7) cos/sin 자동 계산
- **기술:** Python math (내장, 추가 의존성 없음)
- **의존성:** 없음 (2-A와 병렬 가능)
- **완료 기준:** N=2~7 각각 렌더링 테스트 통과. Phase 1 fallback 유지.
### P2-C: Step A Opus+FAISS 고도화
- **파일:** `src/design_director.py` (수정)
- **내용:** 규칙 4줄 → Opus(Kei API)가 FAISS 후보에서 블록 선정 + 배치 결정
- **기술:** Kei API 호출 (Opus). anthropic 직접 호출 **절대 금지**.
- **의존성:** P2-A 완료 필수
- **완료 기준:** Opus가 콘텐츠 보고 블록 후보 선정. Kei API 실패 시 기존 방식 fallback.
### P2-D: 5단계 재검토 강화
- **파일:** `src/pipeline.py` (수정)
- **내용:** shrink/rewrite action 구현 + 재조정 루프 (MAX=2)
- **기술:** Anthropic API (Sonnet) — 기존 패턴
- **의존성:** 없음 (병렬 가능)
- **완료 기준:** expand/shrink/rewrite 3개 action 모두 동작. 루프 2회 제한.
### P2-E: 누락 기능
- **E-1 Pillow:** `src/design_director.py` — 이미지 크기 읽기 → 블록 선택 참고
- **E-2 details-block:** `src/design_director.py` + `src/pipeline.py` — detail_target → details-block 배치
- **의존성:** 없음 (병렬 가능)
- **완료 기준:** 이미지 크기 정보가 팀장에게 전달. details 접기/펼치기 동작.
### 의존 관계
```
P2-A (FAISS) ──────────────────────┐
├→ P2-C (Opus+FAISS)
P2-B (SVG N개) ── 병렬 │
P2-D (재검토) ─── 병렬 │
P2-E (누락기능) ── 병렬 │
```
### DA-21: renderer 카테고리 경로 지원
- **상태:** todo
- **내용:** `renderer.py`의 블록 로드 경로를 `blocks/{type}.html` → `blocks/{category}/{name}.html`로 변경
- **주의:** 기존 파이프라인과 호환성 유지
- **의존성:** DA-18
- **완료 기준:** 카테고리 경로로 블록 렌더링 정상 동작
### DA-22: catalog.yaml 경로 업데이트
- **상태:** todo
- **내용:** template 경로를 새 폴더 구조로 반영
- **의존성:** DA-21
- **완료 기준:** catalog.yaml의 모든 template 경로가 실제 파일과 일치
---
## 의존 관계
```
DA-1 → DA-2 → DA-12(실장) → DA-13a(프리셋) → DA-13b(블록배치) → DA-13c(편집자) ─┐
├→ DA-14(조립+재검토) → DA-15 → DA-16
DA-3 → DA-4~DA-10 → DA-11(렌더러) ──────────────────────────────────────────────┘
Phase 1~2 (기반+블록):
DA-1 → DA-2, DA-3 → DA-4~DA-10 → DA-11(렌더러)
Phase 3 (AI 파이프라인):
DA-12(실장) → DA-13(팀장) → DA-13b(편집자) → DA-14(조립+재검토)
Phase 4 (UI):
DA-14 → DA-15(프론트엔드) → DA-16(테스트)
Phase 5 (블록 라이브러리):
DA-17(Figma추출) → DA-18(카테고리재편) → DA-19(변형확장) → DA-20(FAISS)
DA-18 → DA-21(renderer경로) → DA-22(catalog경로)
```
- Phase 1~2: AI 없이 진행 가능
- Phase 1~2, 5: AI 없이 진행 가능
- Phase 3: Anthropic API 필요 (5단계 파이프라인)
- 5단계 흐름: 실장 → 팀장 → 편집자 → 조립 → 재검토
- Phase 5는 Phase 3와 **병렬** 진행 가능
---
@@ -196,10 +362,12 @@ DA-3 → DA-4~DA-10 → DA-11(렌더러) ─────────────
| 역할 | 도구 | 비고 |
|------|------|------|
| 서버 | FastAPI + uvicorn | Kei와 동일 |
| 템플릿 엔진 | Jinja2 | 블록 상속 + 슬롯 변수 |
| 렌더링 | CSS Grid + 디자인 토큰 | 순수 CSS |
| 서버 | FastAPI + uvicorn | 포트 8001 |
| 템플릿 엔진 | Jinja2 | 카테고리별 블록 조합 |
| 렌더링 | CSS Grid + 디자인 토큰 | 슬라이드 + 웹 |
| 한국어 폰트 | Pretendard Variable | word-break: keep-all |
| AI (실장) | Kei API (Opus) | localhost:8000 |
| AI (팀장) | Anthropic API (Sonnet) | Structured Outputs |
| AI (5단계) | Anthropic API (Sonnet) | 실장→팀장→편집자→실무자→재검토 |
| 이미지 생성 | Gemini API | 복합 시각화 배경 (레이어 방식) |
| Figma | Figma REST API + Framelink MCP | 에셋 추출 |
| 변형 검색 | FAISS (향후) | 블록 40개+ 시 |
| 테스트 | pytest | 렌더링 + 파이프라인 |

152
PROGRESS.md
View File

@@ -4,11 +4,14 @@
| 상태 | 개수 |
|------|------|
| done | 14 |
| done | 23 |
| in-progress | 0 |
| todo | 4 |
| todo | 0 |
| bug-fix | 7 (BF-4~10) |
| blocked | 0 |
| **전체** | **18** |
| **전체** | **30** |
**Phase 2 완료 (2026-03-25):** P2-A~E 전체 done.
---
@@ -80,18 +83,155 @@
- **충돌 검토:** 미리보기(iframe)에 영향 없음. SSE 파싱에 영향 없음.
- **상태:** done
### BF-4: body 블록 겹침 [발견: 프리셋 도입 후]
- **현상:** body area에 4개 블록이 겹쳐서 하나만 보임
- **원인:** renderer가 같은 area에 별도 div 생성 → CSS Grid 겹침
- **해결:** OrderedDict로 같은 area 그룹핑 → 하나의 div에 flex-column
- **기술:** Python OrderedDict (내장)
- **수정 파일:** renderer.py
- **상태:** 코드 수정 완료, 테스트 필요
### BF-5: 제목 안 보임 [발견: 프리셋 도입 후]
- **현상:** 슬라이드 제목이 표시 안 됨
- **원인:** 프리셋 area명 `title` vs slide-base.html `header` 불일치
- **해결:** 프리셋 4개에서 `title` → `header` 교체
- **기술:** 문자열 교체
- **수정 파일:** design_director.py LAYOUT_PRESETS
- **상태:** sidebar-right 수정 완료, 나머지 3개 확인 필요
### BF-6: sidebar 카드 3열 찢어짐 [발견: sidebar-right 테스트]
- **현상:** sidebar 35% 너비에 카드 3열 → 각 카드 폭 극히 좁아 찢어짐
- **원인:** 팀장이 sidebar 공간 고려 없이 배치
- **해결:** Step B 프롬프트에 sidebar 공간 안내 추가
- **기술:** 프롬프트 엔지니어링
- **수정 파일:** design_director.py STEP_B_PROMPT
- **상태:** 미수정
### BF-7: body 블록 텍스트 비어있음 [발견: 편집자 출력 확인]
- **현상:** body의 4개 블록 중 1개만 텍스트 있고 3개 비어있음
- **원인:** content_editor 매칭에서 같은 area 첫 번째만 매칭 (break)
- **해결:** area + topic_id로 정확 매칭. 편집자 프롬프트에 topic_id 출력 추가
- **기술:** Python 조건문 수정
- **수정 파일:** content_editor.py
- **상태:** 미수정
### BF-8: 컨테이너 예산 기반 블록 배치 [발견: 파이프라인 실행 후 프레임 넘침]
- **현상:** body에 4개 블록(quote+card+venn+comparison) 쌓아서 총 ~810px → 490px 예산 초과 → 잘림
- **원인:** 팀장 프롬프트가 콘텐츠 중심 블록 선택 (높이 제약 없음). 큰 SVG(380px)를 다른 블록과 함께 배치
- **해결:**
- LAYOUT_PRESETS: zone별 budget_px + width_pct 추가
- STEP_B_PROMPT: "컨테이너 예산 확인 → 배정 → 블록+높이 계산 → 검증" 4단계 사고
- catalog.yaml: 블록별 height_cost (compact/medium/large/xlarge) + 높이 참고표
- base.css: area div에 overflow:hidden + min-height:0 안전망
- 시각화 블록: flex-shrink + responsive SVG
- **수정 파일:** design_director.py, catalog.yaml, base.css, venn-diagram.html, circle-gradient.html
- **상태:** done (2026-03-25)
- **한계:** 프롬프트만으로는 Sonnet이 grid를 무시하는 문제를 방지 불가 → BF-9 필요
- **충돌 해소 (2026-03-25):** 다른 에이전트가 구 블록(quote-block, card-grid, comparison)을 BLOCK_SLOTS/defaults에서 의도적 제거. BF-8에서 catalog에 복원했던 것을 다시 제거하여 정합성 확보. 구 블록 → 신규 블록 대체 방향 확정.
### BF-9: grid와 Sonnet의 역할 분리 [발견: 파이프라인 실행 결과 분석]
- **현상:** Sonnet이 프리셋 grid 대신 자기만의 5행 all-auto grid 생성. zone명도 불일치(main, definitions 등)
- **원인:** 설계 오류 — Sonnet에게 grid 값을 출력하라고 요구한 것 자체가 잘못. grid는 코드(Step A)가 결정, Sonnet이 건드릴 대상 아님
- **해결:**
- Step B 프롬프트: grid 출력 요구 제거, blocks 배열만 출력하도록 변경
- create_layout_concept(): grid 값은 프리셋에서 직접 가져옴 (Sonnet 출력 무시)
- Sonnet이 출력한 area명이 프리셋 zone에 없으면 코드에서 자동 매핑
- **원칙:** 코드가 결정한 것은 코드가 유지한다. Sonnet은 콘텐츠 판단만.
- **수정 파일:** design_director.py (STEP_B_PROMPT + create_layout_concept)
- **상태:** done (2026-03-25)
### BF-10: _CATALOG_MAP 캐시 갱신 문제 [발견: 파이프라인 실행 결과 분석]
- **현상:** relationship 블록이 _legacy CSS 원형으로 렌더링됨 (SVG premium이 아님). catalog.yaml 매핑이 적용 안 됨.
- **원인:** _CATALOG_MAP이 모듈 레벨 global로 한 번만 로드. 서버가 구 catalog를 캐시.
- **해결:** 파일 mtime 확인 후 자동 reload, 또는 매 렌더링 시 강제 reload
- **기술:** Python pathlib stat()
- **수정 파일:** renderer.py
- **상태:** done (2026-03-25)
## Phase 5: 블록 라이브러리 확장
| 태스크 | 상태 | 담당 | 시작 | 완료 | 메모 |
|--------|------|------|------|------|------|
| DA-17: Figma 에셋 추출 + 블록 템플릿 | done | - | 2026-03-25 | 2026-03-25 | 스크린샷 16장, 에셋 15개+, 신규 블록 6종 |
| DA-18: 카테고리 폴더 재편 | done | - | 2026-03-25 | 2026-03-25 | 6개 카테고리 + INDEX.md |
| DA-19: 변형 확장 | done | - | 2026-03-25 | 2026-03-25 | 46개 달성. catalog/BLOCK_SLOTS/INDEX 전체 동기화 완료 |
## Phase 2: 파이프라인 고도화
| 태스크 | 상태 | 담당 | 시작 | 완료 | 메모 |
|--------|------|------|------|------|------|
| P2-A: FAISS 블록 검색 | done | - | 2026-03-25 | 2026-03-25 | bge-m3 1024d, 46벡터. block_search.py 신규. director 연동 완료 |
| P2-B: SVG N개 자동 배치 | done | - | 2026-03-25 | 2026-03-25 | svg_calculator.py 신규. N=2~7 테스트 통과. Phase 1 fallback 유지 |
| P2-C: Step A Opus+FAISS | done | - | 2026-03-25 | 2026-03-25 | _opus_block_recommendation(). Kei API 경유. Anthropic 직접 0회 |
| P2-D: 5단계 재검토 강화 | done | - | 2026-03-25 | 2026-03-25 | MAX_REVIEW_ROUNDS=2. expand/shrink/rewrite 3개 action. 다른쪽 구현+루프 추가 |
| P2-E-1: Pillow 이미지 크기 | done | - | 2026-03-25 | 2026-03-25 | 다른쪽에서 image_utils.py 구현 완료 |
| P2-E-2: details-block 연결 | done | - | 2026-03-25 | 2026-03-25 | "생략"→details-block 배치. fallback에도 반영 |
| DA-21: renderer 카테고리 경로 지원 | todo | - | - | - | DA-18 이후 |
| DA-22: catalog.yaml 경로 업데이트 | todo | - | - | - | DA-21 이후 |
---
## 블로킹 이슈
없음
---
## DA-17 상세 기록
### Figma 추출 결과
- **파일:** 바론컨설턴트 홈페이지_기획팀공유 (uw7Z2hZGv9k6ygwrgYaAnF)
- **접근:** Figma REST API (유료 계정 토큰)
- **스크린샷:** 16장 (메인 3 + 자세히보기 13)
- **에셋:** bg_header, card_img x3, compare_box x2, dx_bim_table, circle_label, mountain_viz, image_grid x2 등
- **노드 분석:** 2-1_01 (건설산업), 2-1_02 (BIM) depth=4 상세 구조
### 신규 블록 템플릿 6종
| 블록 | 카테고리 | 검증 결과 |
|------|---------|---------|
| section-title-with-bg | headers/ | ✅ 렌더링 OK |
| topic-left-right | headers/ | ✅ 렌더링 OK, 사용자 확인 |
| compare-pill-pair | visuals/ | ✅ 색상 2차 수정 후 OK |
| circle-gradient | visuals/ | ✅ 사용자 확인 OK |
| card-image-3col | cards/ | ✅ 사용자 확인 OK |
| image-row-2col | media/ | ✅ 렌더링 OK |
### 기존 블록 수정
| 블록 | 수정 내용 |
|------|---------|
| comparison-table → compare-3col-badge | Figma 톤으로 재디자인 (중앙 VS 배지, 좌우 중앙정렬) |
| conclusion-bar → conclusion-accent-bar | Figma 톤으로 재디자인 (좌측 파란 라인 + 밝은 배경) |
| compare-box → compare-pill-pair | Figma 톤으로 재디자인 (하늘색 둥근 테두리 + 시안 텍스트) |
### 시각화 방식 검증 이력
1. **CSS 원형 벤 다이어그램** → 실패 (클로드스러운 플랫 디자인, 20점)
2. **AntV infographic-cli** → 제한적 (일부 SSR 타임아웃, 관계도 용도 안 맞음)
3. **AI 이미지(Gemini) + HTML 텍스트 오버레이** → 실패 (이미지 내 원 위치가 매번 달라 텍스트 위치 맞출 수 없음)
4. **SVG premium (radialGradient + filter + 수학적 좌표 계산)** → **성공! 최종 확정**
- 텍스트가 SVG 안에 있어 위치 100% 정확
- 그라데이션/글로우/하이라이트로 Figma 수준 품질
- N개 원소 자동 배치 (360/N 간격, cos/sin)
### Phase 1 완료 요약 (2026-03-25)
- 블록 라이브러리: 6개 카테고리, 18개 블록 변형
- 시각화 방식: SVG premium 확정
- Figma 에셋: 스크린샷 16장, 에셋 15개+
- 블록 검증: 독립 렌더링 테스트 전체 통과
- 노하우: 텍스트=HTML/CSS, 시각화=SVG, 실사=이미지, AI이미지=배경전용
---
## 완료된 준비 사항
| 항목 | 파일 | 상태 |
|------|------|------|
| 프로젝트 규칙 | CLAUDE.md | 완료 |
| 실행 계획 | PLAN.md | 완료 |
| 프로젝트 규칙 | CLAUDE.md | 완료 (블록 라이브러리 구조 반영) |
| 실행 계획 | PLAN.md | 완료 (Phase 5 추가) |
| 진행 추적 | PROGRESS.md | 완료 (이 파일) |
| 기술 조사 | docs/RESEARCH.md | 완료 |
| 폴더 구조 | templates/, samples/, docs/ | 생성 완료 |
| Figma 분석 | docs/figma-analysis/DESIGN-ANALYSIS.md | 완료 |
| Figma 추출 계획 | docs/FIGMA-COMPONENT-EXTRACTION-PLAN.md | 완료 |
| 블록 라이브러리 | templates/blocks/ (6개 카테고리) | 구축 완료, 변형 확장 중 |
| 블록 인덱스 | templates/blocks/INDEX.md | 완료 |
| 블록 카탈로그 | templates/catalog.yaml | 완료 (경로 업데이트 필요) |
| MCP 설정 | .mcp.json (Framelink Figma MCP) | 완료 |

197
README.md
View File

@@ -4,63 +4,94 @@
## 개요
텍스트 콘텐츠를 입력하면, AI가 내용을 분석하여 적합한 레이아웃을 결정하고, 핵심 내용을 추출하여 깔끔한 1페이지(또는 다중 페이지) 슬라이드를 생성합니다.
텍스트/MDX 콘텐츠를 입력하면, AI가 정보 구조를 파악하고 적합한 레이아웃과 블록을 선택하여 깔끔한 1페이지(또는 다중 페이지) 슬라이드를 생성합니다.
## 아키텍처
## 아키텍처 (5단계 파이프라인)
```
텍스트 입력
↓
[1] Kei 실장 (Opus) — 콘텐츠 유형 분류 + 블록 배치 방향
[1] Kei 실장 (Sonnet via Kei API) — 정보 구조 파악 + 꼭지 추출
- 본문 흐름(flow) vs 참조 정보(reference) 분리
- 각 꼭지의 레이어/강조/배치 방향 판단
↓
[2] 디자인 팀장 (Sonnet) — 레이아웃 컨셉 (블록 배치 + 페이지 수)
[2] 디자인 팀장 — 2-Step
Step A: 레이아웃 프리셋 자동 선택 (규칙 기반, LLM 불필요)
- sidebar-right / two-column / hero-detail / single-column
Step B: 프리셋 안에서 블록 매핑 + 글자 수 가이드 (Sonnet)
- flow → body, reference → sidebar, conclusion → footer
↓
[3] 텍스트 편집자 (Sonnet) — 슬롯 텍스트 정리 (핵심 유지, 도메인 지식 보존)
[3] Kei 텍스트 편집자 (Sonnet) — 도메인 전문가로서 텍스트 정리
- 글자 수 가이드 참고, 내용 의미 우선
- 출처 보존, 개조식, 날조 금지
↓
[4] CSS Grid 렌더러 — HTML 조립
[4] 디자인 실무자 (Jinja2 + CSS Grid) — HTML 조립
- 블록 템플릿 렌더링 + 같은 area 그룹핑
- 카테고리 경로 검색 + _legacy fallback
↓
[5] 디자인 팀장 (Sonnet) — 전체 재검토
- 채움 비율, 균형, 빈 블록 점검 → 2차 조정
↓
미리보기 + HTML 다운로드
```
### 역할 분리
## 블록 라이브러리 (18개 + _legacy 13개)
| 역할 | 담당 | 하는 일 | 안 하는 일 |
|------|------|---------|-----------|
| Kei 실장 | Opus | 콘텐츠 분석, 유형 분류, 배치 방향 | 디자인, 텍스트 편집 |
| 디자인 팀장 | Sonnet | 레이아웃 컨셉, 페이지 수, 블록 선택 | 텍스트 정리 |
| 텍스트 편집자 | Sonnet | 슬롯별 텍스트 정리, 핵심 유지 | 레이아웃 결정 |
| 실무자 | CSS Grid | HTML/CSS 조립 | AI 판단 |
```
templates/blocks/
├── INDEX.md 전체 인덱스
├── headers/ (2개) 타이틀, 꼭지 헤더
│ ├── section-title-with-bg.html 배경 이미지 + 영문/한글
│ └── topic-left-right.html 좌:제목 + 우:설명
├── cards/ (3개) 카드 계열
│ ├── card-image-3col.html 이미지 카드 3열
│ ├── card-text-grid.html 텍스트 카드 2~4열
│ └── card-dark-overlay.html 다크 오버레이 카드
├── tables/ (1개) 비교 테이블
│ └── compare-3col-badge.html A|VS|B 3단 비교
├── visuals/ (4개) 다이어그램, 관계도 (**SVG premium**)
│ ├── circle-gradient.html 그라데이션 원 + 텍스트
│ ├── compare-pill-pair.html 둥근 박스 2개 + VS
│ ├── venn-diagram.html 벤 다이어그램
│ └── process-horizontal.html 가로 단계 흐름
├── emphasis/ (5개) 강조, 인용, 결론
│ ├── quote-left-border.html 좌측 라인 인용
│ ├── quote-question.html 질문형 인용
│ ├── comparison-2col.html 2단 비교
│ ├── conclusion-accent-bar.html 좌측 라인 결론
│ └── banner-gradient.html 그라데이션 배너
├── media/ (3개) 이미지/미디어
│ ├── image-row-2col.html 이미지 2장 나란히
│ ├── image-grid-2x2.html 이미지 2x2 그리드
│ └── image-side-text.html 이미지 + 텍스트
└── _legacy/ (13개) 이전 버전 (fallback)
```
## 블록 템플릿 (7종)
## 레이아웃 프리셋
| 블록 | 용도 | 시각 |
|------|------|------|
| `comparison` | 2단 병렬 비교 (A vs B) | 좌/우 분할, 색상 구분 |
| `card-grid` | 카드 2~4열 배열 | 상단 컬러 라인 + 제목 + 설명 |
| `relationship` | 벤 다이어그램 | 외부 원 + 내부 원 3개 |
| `process` | 단계 흐름 | 번호 원 + 연결선 |
| `quote-block` | 강조 인용 | 좌측 컬러 라인 + 배경 |
| `conclusion-bar` | 결론 한 줄 | 다크 배경 + 흰색 텍스트 |
| `comparison-table` | 다항목 비교 | 테이블 헤더 + 교대 행 |
| 프리셋 | 조건 | CSS Grid |
|--------|------|----------|
| `sidebar-right` | reference 꼭지 있음 | 65:35 좌우 분할 |
| `two-column` | 대등한 비교 | 50:50 균등 |
| `hero-detail` | 고강조 1개 + 보조 | hero 영역 + detail |
| `single-column` | 순차적 flow만 | 1열 |
## 기술 스택
| 역할 | 도구 |
|------|------|
| 웹 서버 | FastAPI + uvicorn |
| AI | Anthropic Claude API (Opus + Sonnet) |
| 템플릿 | Jinja2 |
| 레이아웃 | CSS Grid (16:9 고정, 1280x720px) |
| 폰트 | Pretendard Variable (한국어 최적화) |
| SSE 스트리밍 | sse-starlette |
| 서버 | FastAPI + uvicorn (포트 8001) |
| AI | Anthropic API (Sonnet) — 5단계 |
| AI (실장) | Kei Persona API (localhost:8000) |
| 템플릿 | Jinja2 (카테고리별 블록 조합) |
| 렌더링 | CSS Grid + 디자인 토큰 (16:9 고정) |
| 시각화 | **SVG** (radialGradient, filter) — Phase 1: 3개 고정, Phase 2: N개 자동(cos/sin) |
| 폰트 | Pretendard Variable (한국어) |
| Figma | Figma REST API + Framelink MCP |
| 실사 배경 | Gemini API (배경 텍스처 전용. 시각화에는 SVG 사용) |
## 설치 및 실행
### 사전 요구사항
- Python 3.10+
- Anthropic API Key
### 설치
```bash
@@ -72,8 +103,7 @@ pip install -e .
### 환경 변수
`.env` 파일 생성:
`.env` 파일:
```env
ANTHROPIC_API_KEY=sk-ant-...
KEI_API_URL=http://localhost:8000
@@ -83,53 +113,75 @@ LOG_LEVEL=DEBUG
### 실행
```bash
# Design Agent 서버
# 터미널 1: Kei 백엔드 (선택, RAG 연동 시)
cd D:\ad-hoc\kei\persona_agent
uvicorn backend.main:app --reload --host 127.0.0.1 --port 8000
# 터미널 2: Design Agent
cd D:\ad-hoc\kei\design_agent
uvicorn src.main:app --reload --host 127.0.0.1 --port 8001
```
접속: http://localhost:8001
### Kei API 연동 (선택)
Kei persona 서버가 `localhost:8000`에 떠있으면 자동 연동됩니다.
없어도 Anthropic API 직접 호출로 동작합니다.
## 디자인 원칙
- **여백 > 장식** — 그라데이션, 애니메이션, 그림자 금지
- **색상 3개** — primary(#1e293b), accent(#2563eb), danger(#dc2626)
- **정보 계층** — 위→아래 (문제 제기 → 분석 → 결론)
- **1페이지 4~5파트** — 초과 시 자동 다중 페이지
- **한국어 최적화** — `word-break: keep-all`, `line-height: 1.7`
## 프로젝트 구조
```
design_agent/
├── CLAUDE.md # 프로젝트 규칙
├── PLAN.md # 태스크 계획
├── PROGRESS.md # 진행 상황
├── CLAUDE.md 프로젝트 규칙 + 5단계 프로세스
├── PLAN.md 태스크 계획 (Phase 1~5)
├── PROGRESS.md 진행 상황
├── README.md 이 파일
├── pyproject.toml
├── src/
│ ├── main.py # FastAPI 서버
│ ├── config.py # 설정
│ ├── pipeline.py # 4단계 파이프라인
│ ├── kei_client.py # Opus 분류 (Kei API 또는 직접)
│ ├── design_director.py # 디자인 팀장 (레이아웃 컨셉)
│ ├── content_editor.py # 텍스트 편집자 (슬롯 채우기)
│ └── renderer.py # HTML 렌더러
├── .env API 키
├── .mcp.json Figma MCP 설정
│
├── src/ 파이프라인 코드
│ ├── main.py FastAPI 서버 (포트 8001)
│ ├── config.py 설정
│ ├── kei_client.py 1단계: Kei API → 꼭지 추출
│ ├── design_director.py 2단계: 프리셋 선택 + 블록 매핑
│ ├── content_editor.py 3단계: 텍스트 정리
│ ├── pipeline.py 5단계 파이프라인 연결
│ └── renderer.py 4단계: HTML 조립 (카테고리 경로 지원)
│
├── templates/
│ ├── slide-base.html # 슬라이드 베이스
│ └── blocks/ # 블록 템플릿 7종
│ ├── slide-base.html 슬라이드 베이스 (다중 페이지)
│ ├── catalog.yaml 블록 카탈로그 (팀장 메뉴판)
│ └── blocks/ 블록 라이브러리 (6 카테고리)
│ ├── INDEX.md 전체 인덱스
│ ├── headers/ 타이틀, 꼭지 헤더
│ ├── cards/ 카드 계열
│ ├── tables/ 비교 테이블
│ ├── visuals/ 다이어그램, 관계도
│ ├── emphasis/ 강조, 인용, 결론
│ ├── media/ 이미지/미디어
│ └── _legacy/ 이전 버전 (fallback)
│
├── static/
│ ├── index.html # 프론트엔드
│ ├── tokens.css # 디자인 토큰
│ └── base.css # 기본 스타일
│ ├── index.html 프론트엔드
│ ├── tokens.css 디자인 토큰
│ └── base.css 기본 슬라이드 스타일
│
├── docs/
│ └── RESEARCH.md # 기술 조사
│ ├── RESEARCH.md 기술 조사
│ ├── FIGMA-COMPONENT-EXTRACTION-PLAN.md
│ ├── figma-screenshots/ Figma 스크린샷 (16장)
│ ├── figma-assets/ Figma 에셋 (15개+)
│ ├── figma-analysis/ 노드 구조 분석
│ └── block-tests/ 블록 테스트 HTML
│
└── tests/
```
## 핵심 원칙
- **모든 판단은 AI 사고. 하드코딩 없음**
- 텍스트가 기준. 디자인이 텍스트에 맞춤
- 이미지 원본 그대로, 크기만 조절
- 블록은 모드 독립적 (슬라이드/웹 모두 사용 가능)
- Kei Persona Agent 코드를 수정하지 않음
## Kei Persona와의 관계
```
@@ -139,8 +191,17 @@ Kei Persona (본체) — localhost:5173/8000
Design Agent (이 프로젝트) — localhost:8001
├ 슬라이드 생성 전용
├ Kei API 호출 가능 (선택)
├ Kei API로 실장 역할 호출
└ 독립적으로 동작
```
두 프로젝트는 완전히 독립. 코드 공유 없음. API 연동만.
## 향후 계획
**Phase 2:**
- SVG N개 자동 배치 (cos/sin 수학적 계산 + Gemini 참고 디자인)
- 블록 변형 확장 (현재 18개 → 40개+)
- FAISS 블록 검색 인덱스 (40개+ 시)
- 글벗 연동 (문서 자동화 → 시각화)
- Starlight (.astro) 출력

105
docs/BLOCK_SLOTS_45.py Normal file
View File

@@ -0,0 +1,105 @@
# 45개 블록 BLOCK_SLOTS — design_director.py에 반영 필요
# 다른 쪽 작업 완료 후 교체
BLOCK_SLOTS = {
# headers/
"section-title-with-bg": {"required": ["title_ko"], "optional": ["title_en", "breadcrumb", "bg_image"]},
"section-header-bar": {"required": ["title"], "optional": ["subtitle"]},
"topic-left-right": {"required": ["title", "description"], "optional": []},
"topic-center": {"required": ["title"], "optional": ["subtitle", "description"]},
"topic-numbered": {"required": ["number", "title"], "optional": ["description", "color"]},
# cards/
"card-image-3col": {"required": ["cards"], "optional": []},
"card-text-grid": {"required": ["cards"], "optional": []},
"card-dark-overlay": {"required": ["cards"], "optional": []},
"card-tag-image": {"required": ["cards"], "optional": []},
"card-icon-desc": {"required": ["cards"], "optional": []},
"card-compare-3col": {"required": ["cards"], "optional": []},
"card-step-vertical": {"required": ["steps"], "optional": []},
"card-image-round": {"required": ["cards"], "optional": []},
"card-stat-number": {"required": ["stats"], "optional": []},
"card-numbered": {"required": ["items"], "optional": []},
# tables/
"compare-3col-badge": {"required": ["headers", "rows"], "optional": []},
"compare-2col-split": {"required": ["left_title", "right_title", "rows"], "optional": []},
"table-simple-striped": {"required": ["headers", "rows"], "optional": []},
# visuals/
"venn-diagram": {"required": ["center_label", "items"], "optional": ["center_sub", "description"]},
"circle-gradient": {"required": ["label"], "optional": ["sub_label"]},
"compare-pill-pair": {"required": ["left_label", "right_label"], "optional": ["left_sub", "right_sub"]},
"process-horizontal": {"required": ["steps"], "optional": []},
"flow-arrow-horizontal": {"required": ["steps"], "optional": []},
"keyword-circle-row": {"required": ["keywords"], "optional": []},
"layer-diagram": {"required": ["layers"], "optional": ["title"]},
"timeline-vertical": {"required": ["events"], "optional": []},
"timeline-horizontal": {"required": ["events"], "optional": []},
"pyramid-hierarchy": {"required": ["levels"], "optional": []},
# emphasis/
"quote-left-border": {"required": ["quote_text"], "optional": ["source"]},
"quote-big-mark": {"required": ["quote_text"], "optional": ["source"]},
"quote-question": {"required": ["question"], "optional": ["description"]},
"conclusion-accent-bar": {"required": ["conclusion_text"], "optional": ["label"]},
"comparison-2col": {"required": ["left_title", "left_content", "right_title", "right_content"], "optional": ["left_subtitle", "right_subtitle"]},
"banner-gradient": {"required": ["text"], "optional": ["sub_text"]},
"dark-bullet-list": {"required": ["bullets"], "optional": ["title"]},
"highlight-strip": {"required": ["segments"], "optional": []},
"callout-solution": {"required": ["title", "description"], "optional": ["icon", "source"]},
"callout-warning": {"required": ["title", "description"], "optional": ["icon"]},
"tab-label-row": {"required": ["tabs"], "optional": []},
"divider-text": {"required": ["text"], "optional": []},
# media/
"image-row-2col": {"required": ["images"], "optional": []},
"image-grid-2x2": {"required": ["images"], "optional": []},
"image-side-text": {"required": ["image_src"], "optional": ["image_alt", "title", "description", "bullets"]},
"image-full-caption": {"required": ["src"], "optional": ["alt", "caption"]},
"image-before-after": {"required": ["before_src", "after_src"], "optional": ["before_label", "after_label", "caption"]},
}
# _apply_defaults 용
BLOCK_DEFAULTS = {
"section-title-with-bg": {"title_ko": "(제목)"},
"section-header-bar": {"title": "(섹션)"},
"topic-left-right": {"title": "(소제목)", "description": ""},
"topic-center": {"title": "(제목)"},
"topic-numbered": {"number": "1", "title": "(단계)"},
"card-image-3col": {"cards": []},
"card-text-grid": {"cards": []},
"card-dark-overlay": {"cards": []},
"card-tag-image": {"cards": []},
"card-icon-desc": {"cards": []},
"card-compare-3col": {"cards": []},
"card-step-vertical": {"steps": []},
"card-image-round": {"cards": []},
"card-stat-number": {"stats": []},
"card-numbered": {"items": []},
"compare-3col-badge": {"headers": [], "rows": []},
"compare-2col-split": {"left_title": "A", "right_title": "B", "rows": []},
"table-simple-striped": {"headers": [], "rows": []},
"venn-diagram": {"center_label": "관계도", "items": [], "center_sub": "", "description": ""},
"circle-gradient": {"label": "(라벨)"},
"compare-pill-pair": {"left_label": "A", "right_label": "B"},
"process-horizontal": {"steps": []},
"flow-arrow-horizontal": {"steps": []},
"keyword-circle-row": {"keywords": []},
"layer-diagram": {"layers": []},
"timeline-vertical": {"events": []},
"timeline-horizontal": {"events": []},
"pyramid-hierarchy": {"levels": []},
"quote-left-border": {"quote_text": "(인용)"},
"quote-big-mark": {"quote_text": "(인용)"},
"quote-question": {"question": "(질문)"},
"conclusion-accent-bar": {"conclusion_text": "(결론)"},
"comparison-2col": {"left_title": "A", "left_content": "-", "right_title": "B", "right_content": "-"},
"banner-gradient": {"text": "(배너)"},
"dark-bullet-list": {"bullets": []},
"highlight-strip": {"segments": []},
"callout-solution": {"title": "(솔루션)", "description": ""},
"callout-warning": {"title": "(경고)", "description": ""},
"tab-label-row": {"tabs": []},
"divider-text": {"text": "구분"},
"image-row-2col": {"images": []},
"image-grid-2x2": {"images": []},
"image-side-text": {"image_src": ""},
"image-full-caption": {"src": ""},
"image-before-after": {"before_src": "", "after_src": ""},
}

245
docs/PHASE2-PLAN.md Normal file
View File

@@ -0,0 +1,245 @@
# Phase 2 계획 — 파이프라인 고도화 + 검색 + 시각화 자동화
## Phase 1 완료 현황 (2026-03-25)
| 항목 | 상태 | 수량 |
|------|------|------|
| 블록 라이브러리 | ✅ | 46개 (6 카테고리) |
| catalog.yaml | ✅ | 46개 등록, when/not_for/slots/height_cost |
| BLOCK_SLOTS | ✅ | 46개 동기화 |
| _apply_defaults | ✅ | 46개 동기화 |
| SVG premium | ✅ | venn-diagram 검증 (3개 고정) |
| Figma 에셋 | ✅ | 스크린샷 16장, 에셋 15개+ |
| 5단계 파이프라인 | ✅ | 코드 동작 (BF-4~10 수정 완료/진행중) |
| Kei API 연동 | ✅ | 1단계(실장) + 3단계(편집자) |
| catalog→renderer 매핑 | ✅ | mtime 캐시 (BF-10) |
| grid 역할 분리 | ✅ | BF-9 (코드가 grid, Sonnet은 blocks만) |
---
## Phase 2 목표
**파이프라인을 실제 사용 가능한 수준으로 고도화한다.**
Phase 1은 "기반 구축 + 블록 라이브러리"였고,
Phase 2는 "AI가 블록을 정확히 선택 + 고품질 결과물 생성"이다.
---
## Phase 2-A: FAISS 블록 검색 인덱스
### 목적
디자인 팀장(Step B)이 콘텐츠를 보고 46개 블록 중 적합한 것을 **검색**으로 찾는다.
현재는 catalog.yaml 전문이 프롬프트에 들어가는데, 46개가 넘으면 토큰 낭비 + 선택 정확도 저하.
### 구현
```
1. 각 블록의 (id + visual + when + not_for)를 임베딩
2. FAISS 인덱스 구축 (46개 벡터)
3. 콘텐츠 꼭지 분석 결과를 쿼리 → 상위 5~8개 후보 반환
4. 팀장 프롬프트에 후보 블록만 포함 (전체 46개 대신)
```
### 효과
- 프롬프트 토큰 절약 (46개 전문 → 5~8개만)
- 선택 정확도 향상 (관련 블록만 보여주니까)
- 블록 100개+까지 확장 가능
### 파일
- `src/block_search.py` (신규)
- `data/block_index.faiss` (생성)
- `src/design_director.py` (catalog 전문 → 검색 결과로 교체)
### 의존성
- sentence-transformers 또는 Anthropic embeddings
- FAISS (faiss-cpu)
---
## Phase 2-B: SVG N개 자동 배치
### 목적
현재 venn-diagram은 3개 원 고정. 콘텐츠에 따라 2~7개 원이 필요할 수 있음.
수학적 계산(cos/sin)으로 N개를 자동 배치한다.
### 구현
```
1. renderer.py에 SVG 좌표 계산 함수 추가
- calc_circle_positions(n, center, radius) → [(cx, cy), ...]
- 360/N 간격, 12시 방향부터 시계방향
2. venn-diagram.html 템플릿을 동적으로 변경
- items[]에 사전 계산된 cx, cy가 포함
- 원 크기도 N에 따라 자동 조정 (N=3: r=120, N=5: r=80, N=7: r=60)
3. Gemini 참고 디자인 흐름 (선택적)
- SVG 초안 → Gemini에게 "이 구조로 고급 디자인" 요청
- 생성 이미지의 색감/그라데이션을 참고하여 SVG tokens 업데이트
- 최종은 항상 SVG (AI 이미지는 참고만)
```
### 파일
- `src/svg_calculator.py` (신규)
- `templates/blocks/visuals/venn-diagram.html` (동적 좌표 지원)
- `src/renderer.py` (SVG 계산 호출 추가)
### 검증 완료 사항
- 3/4/5개 수학적 계산: ✅ (Phase 1에서 테스트)
- SVG premium 디자인 (radialGradient+filter): ✅
- AI 이미지 방식 폐기: ✅ (텍스트 위치 불일치로 사용 불가)
---
## Phase 2-C: 2단계 Step A 고도화 (Opus + FAISS)
### 목적
현재 Step A는 규칙 4줄(프리셋 4개 중 선택)인데,
원래 의도는 **Opus가 FAISS로 적합한 구조/블록을 검색해서 배치와 크기까지 정하는 것**.
### 구현
```
현재 (Phase 1):
Step A: 규칙 기반 프리셋 선택 (코드)
Step B: Sonnet이 블록 매핑
Phase 2:
Step A: Opus + FAISS로 구조/블록 검색 + 배치/크기 결정
Step B: Sonnet이 Step A 결과를 grid에 매칭 + 글자수 가이드
```
### 세부
1. Opus가 콘텐츠를 보고 "이 콘텐츠에는 비교형+정의형+관계도가 적합" 판단
2. FAISS에서 각 유형에 맞는 블록 후보 검색
3. 후보 중 배치/크기를 결정 (좌 65% 비교표, 우 35% 정의 카드, 하단 관계도)
4. Step B(Sonnet)에게 이 배치 구조 + 후보 블록을 전달
### 의존성
- Phase 2-A (FAISS 인덱스) 완료 필요
- Kei API (Opus) 안정 동작
### 파일
- `src/design_director.py` (Step A 전면 재작성)
- `src/block_search.py` (Phase 2-A에서 생성)
---
## Phase 2-D: 5단계 재검토 강화
### 현재 문제
```
IMPROVEMENT 분석에서 발견된 문제:
- HTML을 프롬프트에 실제 전달하지 않음 (블록 데이터 양만 전달)
- shrink action이 no-op
- rewrite action이 no-op
- 조정 후 재편집이 정확하지 않음
```
### 구현
```
1. HTML 코드 요약을 프롬프트에 전달
- 전체 HTML은 너무 크니까, 블록별 텍스트 길이 + 구조 요약
2. shrink action 구현
- char_guide를 줄여서 재편집 유도
3. rewrite action 구현
- 특정 블록의 텍스트를 완전히 재작성
4. 조정 횟수 제한
- 무한 루프 방지: 최대 2회 재조정
```
### 파일
- `src/pipeline.py` (_review_balance, _apply_adjustments 개선)
---
## Phase 2-E: 누락 기능 구현
### E-1: Pillow 이미지 크기 읽기
```
콘텐츠에 이미지가 포함될 때:
- Pillow로 원본 크기 확인
- 가로/세로 비율에 따라 블록 선택 (image-full vs image-side-text)
- 팀장에게 이미지 크기 정보 전달
```
- 파일: `src/design_director.py` (Step B에 이미지 정보 추가)
### E-2: `<details>/<summary>` 완성
```
현재 details-block.html은 있지만 파이프라인에서 활용 안 됨:
- 실장이 detail_target으로 판단한 꼭지를 details-block으로 연결
- 편집자가 summary + detail 두 버전 작성
- 인쇄 시 자동 펼침 JavaScript
```
- 파일: `src/pipeline.py`, `templates/blocks/emphasis/details-block.html`
### E-3: 디자인 실무자 AI 조정
```
현재 4단계는 순수 코드(Jinja2)만.
CLAUDE.md에는 "텍스트에 맞게 폰트/여백/박스 조정"이라고 되어있음.
- Sonnet이 렌더링된 HTML을 보고 CSS 미세 조정 제안
- 또는 CSS 변수를 동적으로 조정하는 코드
```
- 파일: `src/renderer.py` 또는 `src/pipeline.py`
- 우선순위: 낮음 (다른 것이 더 급함)
---
## ~~Phase 2-F: 출력 확장~~ (design_agent 범위 밖)
**글벗에서 처리:**
- design_agent는 HTML 생성까지만 담당
- .astro 변환 → 글벗이 design_agent API 호출 후 HTML → .astro 래핑
- 글벗 연동 → 글벗 쪽에서 design_agent의 `/api/generate` 호출
---
## 작업 순서 (의존 관계)
```
Phase 2-A (FAISS) ─────────────────────┐
├→ Phase 2-C (Step A: Opus+FAISS)
Phase 2-B (SVG N개) ── 독립, 병렬 가능 │
│
Phase 2-D (5단계 강화) ── 독립, 병렬 가능 │
│
Phase 2-E (누락 기능) ── 독립, 병렬 가능 │
│
Phase 2-F (출력 확장) ─── 글벗에서 처리 (design_agent 범위 밖)
```
### 추천 실행 순서
```
1순위: Phase 2-A (FAISS) — 블록 선택 정확도의 핵심
2순위: Phase 2-B (SVG N개) — 시각화 자동화
3순위: Phase 2-D (5단계 강화) — 결과물 품질
4순위: Phase 2-E (누락 기능) — 완성도
5순위: Phase 2-C (Step A: Opus) — Phase 2-A 완료 필요
※ Phase 2-F (출력 확장) — 글벗에서 처리, design_agent 범위 밖
```
---
## 기술 스택 추가
| 역할 | 도구 | Phase |
|------|------|-------|
| 블록 검색 | FAISS + sentence-transformers | 2-A |
| SVG 계산 | Python math (cos/sin) | 2-B |
| Step A | Opus via Kei API + FAISS | 2-C |
| 이미지 크기 | Pillow | 2-E |
| .astro 출력 | Jinja2 + StarlightPage 템플릿 | 2-F |
---
## 성공 기준
```
Phase 2 완료 시:
✅ 텍스트 원고 입력 → 85점 슬라이드 HTML 자동 생성
✅ 블록 선택이 콘텐츠에 정확히 매칭 (FAISS 검색)
✅ 관계도/다이어그램 N개 자동 배치 (SVG)
✅ 재검토 루프가 실질적으로 동작
✅ Starlight에서 바로 볼 수 있는 .astro 출력
```

321
docs/PHASE2-PROCESS.md Normal file
View File

@@ -0,0 +1,321 @@
# Phase 2 실행 프로세스
## 절대 규칙 (모든 작업에 적용)
```
🔴 단발성/하드코딩 금지 — 모든 구현은 N개, M종류에 범용 동작
🔴 회귀 금지 — Phase 1 확정 구조(catalog 매핑, grid 분리, Kei API 우선) 되돌리지 않음
🔴 Opus→Sonnet 대체 금지 — Kei API가 기본, Sonnet은 fallback만
🔴 "일단 돌아가게" 금지 — 설계대로 구현하거나 설계를 먼저 변경
```
---
## Phase 1 완료 자산
| 항목 | 수량/상태 |
|------|----------|
| 블록 라이브러리 | 46개 (6 카테고리) |
| catalog.yaml | 46개 (when/not_for/slots/height_cost) |
| BLOCK_SLOTS + _apply_defaults | 46개 동기화 |
| SVG premium | venn-diagram 3개 고정 검증 |
| 5단계 파이프라인 | 동작 (BF-4~10 수정) |
| Kei API 연동 | 1단계(실장) + 3단계(편집자) |
| grid 역할 분리 | BF-9 (코드가 grid, Sonnet은 blocks만) |
| catalog→renderer 매핑 | mtime 캐시 (BF-10) |
---
## 실행 순서
```
Phase 2-A (FAISS 블록 검색)
↓
Phase 2-B (SVG N개 자동 배치) ← 2-A와 병렬 가능
↓
Phase 2-D (5단계 재검토 강화) ← 2-A/2-B와 병렬 가능
↓
Phase 2-E (누락 기능: Pillow, details-block)
↓
Phase 2-C (Step A: Opus + FAISS) ← 2-A 완료 필수
```
---
## Phase 2-A: FAISS 블록 검색 인덱스
### 목적
팀장(Step B) 프롬프트에 46개 catalog 전문 대신, FAISS 검색으로 **관련 블록 5~8개만** 전달.
### 수정 파일
| 파일 | 변경 | 신규/수정 |
|------|------|---------|
| `src/block_search.py` | FAISS 인덱스 구축 + 검색 함수 | **신규** |
| `src/design_director.py` | `_load_catalog()` → 검색 결과로 교체 | 수정 (line 294) |
| `data/block_index.faiss` | 인덱스 파일 | **신규** |
| `data/block_metadata.json` | id→블록 매핑 | **신규** |
| `pyproject.toml` | faiss-cpu, sentence-transformers 의존성 | 수정 |
### 기술 상세
```
임베딩 모델: BAAI/bge-m3 (1024차원)
→ Kei persona에서 검증됨 (retriever.py line 49)
→ 한국어 최적화
인덱스 방식: faiss.IndexFlatIP (Inner Product = 코사인 유사도)
→ Kei와 동일 패턴 (retriever.py line 88)
검색 입력: 꼭지별 title + summary + layer + role
검색 출력: 상위 8개 블록 (id + visual + when + not_for + slots)
fallback: FAISS 인덱스 없거나 검색 실패 시 → catalog.yaml 전문 (기존 방식)
```
### 프로세스
```
1. scripts/build_block_index.py 실행 (1회성)
→ catalog.yaml 읽기
→ 각 블록의 (name + visual + when) 임베딩
→ data/block_index.faiss + data/block_metadata.json 생성
2. src/block_search.py
→ 서버 시작 시 인덱스 로드
→ search_blocks(query, top_k=8) → 관련 블록 목록 반환
3. src/design_director.py 수정
→ _load_catalog() 대신 search_blocks() 호출
→ 꼭지별 검색 → 카테고리별 최소 1개 보장 → 프롬프트에 삽입
```
### 충돌 검토
```
design_director.py _load_catalog(): 문자열 반환 → 문자열 반환 (인터페이스 동일) ✅
renderer.py _load_catalog_map(): 별도 함수, 영향 없음 ✅
content_editor.py: BLOCK_SLOTS만 참조, 영향 없음 ✅
pipeline.py: create_layout_concept() 인터페이스 동일 ✅
```
### 점검
- [ ] FAISS 실패 시 catalog 전문 fallback 동작하는가?
- [ ] 검색 결과에 카테고리별 최소 1개 보장되는가?
- [ ] 블록 60개로 늘어나도 인덱스 재구축만으로 동작하는가?
---
## Phase 2-B: SVG N개 자동 배치
### 목적
venn-diagram의 원 3개 고정 → N개(2~7) 자동 배치. cos/sin 수학적 계산.
### 수정 파일
| 파일 | 변경 | 신규/수정 |
|------|------|---------|
| `src/svg_calculator.py` | 좌표 계산 함수 | **신규** |
| `src/renderer.py` | venn-diagram 렌더링 전 좌표 전처리 | 수정 (render_multi_page 내) |
| `templates/blocks/visuals/venn-diagram.html` | 하드코딩 좌표 → 동적 `{{ item.cx }}` | 수정 |
### 기술 상세
```
src/svg_calculator.py:
calc_circle_positions(n, center_x, center_y, radius) → [{cx, cy}, ...]
→ angle = (2π × i / n) - π/2 (12시부터 시계방향)
→ 의존성: Python math (내장)
calc_circle_radius(n) → int
→ n≤3: 120, n≤5: 80, n≤7: 60
→ 하드코딩 아님: base_radius / (1 + (n-3)*0.15) 공식
calc_outer_circle(n) → int
→ 큰 원 반지름도 N에 따라 조정
renderer.py 수정:
render_multi_page() 안에서 block_type == "venn-diagram" 일 때:
1. items = block_data.get("items", [])
2. positions = calc_circle_positions(len(items))
3. for i, item in enumerate(items): item["cx"] = positions[i]["cx"]
4. 나머지는 Jinja2가 처리
venn-diagram.html 수정:
현재: cx="265" (하드코딩)
변경: cx="{{ item.cx }}" (동적)
fallback: items에 cx가 없으면 기존 3개 고정 좌표 사용
```
### 충돌 검토
```
renderer.py: render_multi_page()에 if 분기 추가 — 기존 흐름에 영향 없음 ✅
(venn-diagram 아닌 블록은 그대로 통과)
venn-diagram.html: Phase 1 고정 SVG → 동적으로 변경
→ fallback(cx 없으면 기존 좌표) 필수 ✅
pipeline.py: 변경 없음 ✅
content_editor.py: items[].cx는 renderer에서 추가, 편집자는 모름 ✅
```
### 점검
- [ ] N=2, 3, 4, 5, 6, 7 각각 렌더링 테스트
- [ ] items에 cx/cy가 없을 때 Phase 1 고정 SVG로 fallback
- [ ] 원끼리 겹침 없이 배치되는가? (N=7 특히)
- [ ] 큰 원 안에 모든 작은 원이 들어가는가?
---
## Phase 2-D: 5단계 재검토 강화
### 목적
_review_balance가 실질적으로 동작하도록 강화. shrink/rewrite 구현.
### 수정 파일
| 파일 | 변경 | 신규/수정 |
|------|------|---------|
| `src/pipeline.py` | _review_balance 프롬프트 + _apply_adjustments 3개 action | 수정 |
### 기술 상세
```
_review_balance 개선:
현재: 블록별 데이터 양(글자수)만 전달
변경: 블록별 (area + type + 데이터 양 + height_cost) 전달
+ 전체 zone 예산 대비 사용량
_apply_adjustments 개선:
현재: expand만 동작 (char_guide * 1.5)
변경:
expand: char_guide * 1.5 (현재와 동일)
shrink: char_guide * 0.7 (신규)
rewrite: block["data"] 제거 → fill_content 재호출 시 재작성 (신규)
재조정 루프:
MAX_ADJUSTMENTS = 2 (상수, 하드코딩 아닌 설정값)
for attempt in range(MAX_ADJUSTMENTS): ...
```
### 충돌 검토
```
pipeline.py 내부 함수만 수정 ✅
fill_content 재호출: Kei API 우선 (Phase 1에서 수정됨) ✅
renderer.py: 변경 없음 ✅
```
### 점검
- [ ] expand/shrink/rewrite 3개 action 모두 동작하는가?
- [ ] MAX_ADJUSTMENTS 초과 시 루프 종료되는가?
- [ ] fill_content 재호출이 Kei API를 거치는가? (Sonnet 직접 아닌지)
- [ ] rewrite 후 _apply_defaults로 빈 데이터가 처리되는가?
---
## Phase 2-E: 누락 기능
### E-1: Pillow 이미지 크기
| 파일 | 변경 |
|------|------|
| `src/design_director.py` | create_layout_concept() 내 이미지 크기 확인 |
```
수정 위치: topics 순회할 때 content_type=="image" 확인
→ Pillow Image.open().size로 width, height 읽기
→ topic에 image_width, image_height, image_ratio 추가
→ Step B 프롬프트에 이미지 크기 정보 포함
→ 팀장이 가로형→image-full, 세로형→image-side-text 판단 가능
fallback: 이미지 파일 없으면 → 기본 비율 1.5 (가로형 가정)
⚠️ 이것은 하드코딩이 아닌 "정보 부재 시 안전한 기본값"
```
### E-2: details-block 연결
| 파일 | 변경 |
|------|------|
| `src/design_director.py` | detail_target 꼭지를 "생략" → "details-block 배치"로 |
| `src/content_editor.py` | detail_target 꼭지에 summary + detail 두 버전 작성 |
```
현재: design_director.py에서 detail_target 꼭지를 "생략 (미구현)"으로 처리
변경: detail_target 꼭지를 details-block으로 body/sidebar에 배치
→ 편집자가 summary(3줄) + detail(전체) 작성
→ renderer가 <details>/<summary>로 조립
```
### 점검
- [ ] 이미지 없는 콘텐츠에서 Pillow 에러 안 나는가?
- [ ] detail_target 꼭지가 details-block으로 렌더링되는가?
- [ ] <details> 접기/펼치기가 브라우저에서 동작하는가?
- [ ] 인쇄 시 자동 펼침 JavaScript가 동작하는가?
---
## Phase 2-C: Step A Opus+FAISS
### 목적
규칙 4줄 → Opus가 FAISS 검색으로 구조/블록 선정 + 배치/크기 결정.
### 수정 파일
| 파일 | 변경 | 신규/수정 |
|------|------|---------|
| `src/design_director.py` | select_preset() 유지 + _opus_block_selection() 추가 | 수정 |
### 기술 상세
```
현재 흐름:
Step A: select_preset() → 규칙 기반 (코드)
Step B: Sonnet → 블록 매핑
Phase 2 흐름:
Step A-1: select_preset() → 프리셋 선택 (유지, 안정적)
Step A-2: _opus_block_selection() → Kei API(Opus)로 블록 후보 선정
입력: 꼭지 분석 + FAISS 검색 결과
출력: 각 꼭지에 추천 블록 + 배치 방향 + 크기 가이드
Step B: Sonnet → Opus 추천 기반으로 최종 매핑 + 글자수 가이드
핵심: Opus 호출은 반드시 Kei API 경유
→ kei_client.py의 _call_kei_api() 패턴 재사용
→ anthropic.AsyncAnthropic 직접 호출 절대 금지
```
### 의존성
```
Phase 2-A 완료 필수 (FAISS 인덱스 + search_blocks 함수)
Kei API(localhost:8000) 안정 동작 필요
```
### 충돌 검토
```
select_preset(): 유지 (삭제하지 않음) ✅
create_layout_concept(): Step A-2 결과를 Step B에 전달하는 구조 추가
→ 기존 인터페이스(return {"title": ..., "pages": [...]}) 동일 ✅
pipeline.py: create_layout_concept() 호출 방식 동일 ✅
```
### 점검
- [ ] Opus 호출이 Kei API를 거치는가? (`grep "AsyncAnthropic" → fallback만`)
- [ ] Kei API 실패 시 현재 방식(규칙+Sonnet)으로 fallback
- [ ] FAISS 검색 결과가 Opus에게 전달되는가?
- [ ] select_preset()이 삭제되지 않았는가? (안정적 규칙은 유지)
---
## 산출물 체크리스트
### 코드 파일
```
신규:
src/block_search.py ← 2-A
src/svg_calculator.py ← 2-B
scripts/build_block_index.py ← 2-A
data/block_index.faiss ← 2-A
data/block_metadata.json ← 2-A
수정:
src/design_director.py ← 2-A, 2-C, 2-E
src/renderer.py ← 2-B
src/pipeline.py ← 2-D, 2-E
templates/blocks/visuals/venn-diagram.html ← 2-B
pyproject.toml ← 2-A (의존성)
```
### 문서
```
docs/PHASE2-PLAN.md ← 완료
docs/PHASE2-PROCESS.md ← 이 파일
docs/PHASE2-TECH-REVIEW.md ← 완료
PLAN.md ← Phase 2 태스크 추가 필요
PROGRESS.md ← Phase 2 진행 상황 추적
```

396
docs/PHASE2-TECH-REVIEW.md Normal file
View File

@@ -0,0 +1,396 @@
# Phase 2 기술 검토 보고서
각 항목별로 **정확한 구현 방법, 기존 코드 충돌 여부, 회귀 위험, 대충 처리 위험**을 검토한다.
---
## Phase 2-A: FAISS 블록 검색
### 현재 코드 상태
```
design_director.py line 184~188: _load_catalog()
→ catalog.yaml 전문을 문자열로 읽어서 프롬프트에 통째로 넣음
→ 46개 블록 전체 설명 = 약 8,000~10,000 토큰
design_director.py line 294: catalog_text = _load_catalog()
design_director.py line 322: catalog=catalog_text # 프롬프트에 삽입
```
### 정확한 구현 방법
**1. 임베딩 모델 선택**
```
Kei persona가 사용하는 모델: BAAI/bge-m3 (1024차원)
위치: D:\ad-hoc\kei\persona_agent\backend\llm\retriever.py line 49
design_agent에서도 동일 모델 사용:
→ 한국어 지원 ✅
→ Kei에서 검증됨 ✅
→ 1024차원으로 46개 벡터 = 약 184KB (가벼움)
```
**2. 인덱스 구축 (1회성, 오프라인)**
```python
# src/block_search.py (신규 파일)
import faiss
import yaml
from sentence_transformers import SentenceTransformer
def build_block_index():
# 1. catalog.yaml 로드
with open("templates/catalog.yaml") as f:
catalog = yaml.safe_load(f)
# 2. 각 블록의 검색용 텍스트 생성
texts = []
ids = []
for block in catalog["blocks"]:
text = f"{block['name']}. {block['visual']}. {block['when']}"
texts.append(text)
ids.append(block["id"])
# 3. 임베딩
model = SentenceTransformer("BAAI/bge-m3")
embeddings = model.encode(texts, normalize_embeddings=True)
# 4. FAISS 인덱스 생성
dim = embeddings.shape[1]
index = faiss.IndexFlatIP(dim) # Inner Product (코사인 유사도)
index.add(embeddings)
# 5. 저장
faiss.write_index(index, "data/block_index.faiss")
# ids 매핑도 저장
```
**3. 검색 (런타임, 매 요청)**
```python
def search_blocks(query: str, top_k: int = 8) -> list[dict]:
"""콘텐츠 꼭지 설명으로 적합한 블록 검색"""
embedding = model.encode([query], normalize_embeddings=True)
scores, indices = index.search(embedding, top_k)
return [catalog_blocks[i] for i in indices[0]]
```
**4. design_director.py 수정 지점**
```
현재 line 294: catalog_text = _load_catalog() # 전문
변경: catalog_text = search_blocks(topics_summary, top_k=8) # 관련 8개만
```
### 충돌 검토
| 파일 | 영향 | 충돌? |
|------|------|-------|
| design_director.py | _load_catalog() 반환값이 문자열 → 문자열(검색결과) | ❌ (인터페이스 동일) |
| pipeline.py | 호출하지 않음 | ❌ |
| renderer.py | _load_catalog_map()은 별도 함수 (경로 매핑용) | ❌ (다른 함수) |
| content_editor.py | BLOCK_SLOTS만 참조 | ❌ |
### 회귀 위험
- _load_catalog()를 교체하므로, 검색이 실패하면 catalog 전문을 fallback으로 넘겨야 함
- FAISS 인덱스 파일이 없으면 기존 방식(전문)으로 동작해야 함
### 대충 처리 위험
- ⚠️ "검색 결과 8개만 넣으면 되지" → 검색 품질이 낮으면 적합한 블록이 빠질 수 있음
- 대응: 검색 결과 + 카테고리별 최소 1개 보장 (8개 중 카테고리 커버 확인)
---
## Phase 2-B: SVG N개 자동 배치
### 현재 코드 상태
```
templates/blocks/visuals/venn-diagram.html:
→ 3개 원 좌표가 하드코딩 (cx="265" cy="300", cx="370" cy="230", cx="365" cy="355")
→ items[0], items[1], items[2]로 직접 인덱싱
renderer.py:
→ render_standalone_block()에서 block_data를 Jinja2에 **kwargs로 전달
→ 별도 전처리 없음
```
### 정확한 구현 방법
**1. 좌표 계산 함수 (신규)**
```python
# src/svg_calculator.py (신규 파일)
import math
def calc_circle_positions(
n: int,
center_x: float = 300,
center_y: float = 300,
radius: float = 120,
) -> list[dict]:
"""N개 원소를 원형으로 배치. 12시부터 시계방향."""
positions = []
for i in range(n):
angle = (2 * math.pi * i / n) - math.pi / 2
positions.append({
"cx": round(center_x + radius * math.cos(angle), 1),
"cy": round(center_y + radius * math.sin(angle), 1),
})
return positions
def calc_circle_radius(n: int, base_radius: int = 120) -> int:
"""N에 따라 작은 원 크기 자동 조정."""
if n <= 3: return base_radius
if n <= 5: return int(base_radius * 0.7)
return int(base_radius * 0.5)
```
**2. renderer.py 수정 지점**
```python
# render_multi_page() 또는 render_slide() 안에서:
if block_type in ("venn-diagram", "relationship"):
items = block_data.get("items", [])
if items:
from src.svg_calculator import calc_circle_positions, calc_circle_radius
positions = calc_circle_positions(len(items))
small_r = calc_circle_radius(len(items))
for i, item in enumerate(items):
item["cx"] = positions[i]["cx"]
item["cy"] = positions[i]["cy"]
item["r"] = small_r
```
**3. venn-diagram.html 수정**
```
현재: cx="265" (하드코딩)
변경: cx="{{ items[0].cx }}" (동적)
+ items 개수에 따라 for 루프로 생성
+ 큰 원 크기도 N에 따라 조정
```
### 충돌 검토
| 파일 | 영향 | 충돌? |
|------|------|-------|
| renderer.py | block_data 전처리 추가 | ⚠️ 주의: 기존 render 흐름에 if 분기 추가 |
| venn-diagram.html | 하드코딩 → 동적 좌표 | ⚠️ Phase 1 고정 SVG가 깨짐 → fallback 필요 |
| pipeline.py | 변경 없음 | ❌ |
| content_editor.py | items[].cx/cy는 편집자가 생성하지 않음 | ❌ (renderer에서 추가) |
### 회귀 위험
- **venn-diagram.html 변경 시 Phase 1 고정 SVG가 깨질 수 있음**
- 대응: items에 cx/cy가 없으면 기존 하드코딩 좌표 사용 (fallback)
### 대충 처리 위험
- ⚠️ 원 크기 자동 조정을 대충 하면 7개 원이 겹침
- 대응: N별 최적 반지름/큰원 크기 테이블 사전 정의
---
## Phase 2-C: Step A Opus+FAISS
### 현재 코드 상태
```
design_director.py line 145~178: select_preset()
→ 규칙 4줄: reference→sidebar, 대등비교→two-column, 고강조→hero, 나머지→single
→ LLM 호출 없음, 코드만
의도: Opus가 FAISS로 적합한 구조/블록 검색 + 배치/크기 결정
```
### 정확한 구현 방법
**1단계: select_preset()은 유지 (규칙 기반 프리셋은 안정적)**
**2단계: Opus가 블록 후보를 검색+선정하는 함수 추가**
```python
# design_director.py에 추가
async def _opus_block_selection(
content: str,
analysis: dict,
block_candidates: list[dict], # FAISS 검색 결과
) -> list[dict]:
"""Opus가 FAISS 후보에서 최종 블록을 선정하고 배치를 결정."""
# Kei API를 통해 Opus 호출
kei_url = settings.kei_api_url
prompt = f"""
콘텐츠 분석 결과와 블록 후보를 보고,
각 꼭지에 가장 적합한 블록을 선택하고 배치를 결정해줘.
후보 블록: {block_candidates}
꼭지: {analysis['topics']}
"""
# Kei API 호출 (실장과 동일 패턴)
...
```
### 충돌 검토
| 파일 | 영향 | 충돌? |
|------|------|-------|
| design_director.py | select_preset() 유지 + _opus_block_selection() 추가 | ❌ (추가만) |
| kei_client.py | Kei API 호출 패턴 재사용 | ❌ (참조만) |
| pipeline.py | create_layout_concept() 인터페이스 동일 | ❌ |
### 회귀 위험
- ⚠️ Opus가 Kei API를 통해 호출되어야 하는데, **Sonnet을 직접 호출하면 안 됨**
- 대응: _call_kei_api() 패턴 그대로 복제. Anthropic 직접 호출 금지.
- ⚠️ Kei API 실패 시 fallback = 현재 규칙 기반 방식 (select_preset + Sonnet Step B)
### 대충 처리 위험
- ⚠️ "Opus 대신 Sonnet 직접 호출" → **절대 금지**. 3단계에서 이미 이 실수 했음.
- ⚠️ FAISS 없이 catalog 전문 넣기 → Phase 2-A가 선행 안 되면 의미 없음
- 대응: Phase 2-A 완료 후에만 시작
---
## Phase 2-D: 5단계 재검토 강화
### 현재 코드 상태
```
pipeline.py line 102~161: _review_balance()
→ Sonnet에게 블록별 데이터 양(글자수)만 전달
→ HTML 자체는 전달하지 않음
→ shrink/rewrite action이 실질적으로 no-op
pipeline.py line 164~193: _apply_adjustments()
→ expand만 동작 (char_guide * 1.5)
→ shrink: 조건 매칭 안 됨 (expand만 if 처리)
→ rewrite: 아예 동작 없음
```
### 정확한 구현 방법
**1. _review_balance 프롬프트 개선**
```python
# 현재: 블록별 데이터 양만
# 변경: 블록별 텍스트 길이 + 블록 타입 + zone + height_cost
block_summary = []
for block in blocks:
data_len = len(json.dumps(block.get("data", {}), ensure_ascii=False))
block_summary.append(
f" {block['area']}/{block['type']}: "
f"데이터 {data_len}자, height_cost={block.get('height_cost', '?')}"
)
```
**2. shrink/rewrite 구현**
```python
# _apply_adjustments 수정
for adj in adjustments:
action = adj.get("action", "")
if action == "expand":
# 현재 동작: char_guide * 1.5
...
elif action == "shrink":
# 신규: char_guide * 0.7
for key in block.get("char_guide", {}):
block["char_guide"][key] = int(block["char_guide"][key] * 0.7)
elif action == "rewrite":
# 신규: data를 비우고 재편집 유도
block.pop("data", None)
```
**3. 재조정 횟수 제한**
```python
MAX_ADJUSTMENTS = 2
for attempt in range(MAX_ADJUSTMENTS):
review = await _review_balance(...)
if not review or not review.get("needs_adjustment"):
break
layout_concept = await _apply_adjustments(...)
html = render_slide(layout_concept)
```
### 충돌 검토
| 파일 | 영향 | 충돌? |
|------|------|-------|
| pipeline.py | _review_balance, _apply_adjustments 수정 | ❌ (내부 함수만) |
| content_editor.py | fill_content() 재호출됨 | ⚠️ data가 비워진 블록 → _apply_defaults로 fallback |
| renderer.py | 변경 없음 | ❌ |
### 회귀 위험
- ⚠️ 재조정 루프가 무한 반복되면 API 비용 폭증
- 대응: MAX_ADJUSTMENTS = 2로 하드 제한
- ⚠️ fill_content 재호출 시 Kei API가 아닌 Sonnet으로 빠질 수 있음
- 대응: fill_content는 이미 Kei API 1순위로 수정됨 ✅
---
## Phase 2-E: 누락 기능
### E-1: Pillow 이미지 크기
**수정 지점:** design_director.py create_layout_concept() 내부
```python
# 콘텐츠에 이미지 경로가 있으면 크기 확인
from PIL import Image
for topic in analysis.get("topics", []):
if topic.get("content_type") == "image":
img_path = topic.get("image_path")
if img_path and Path(img_path).exists():
w, h = Image.open(img_path).size
topic["image_width"] = w
topic["image_height"] = h
topic["image_ratio"] = w / h # >1.2 가로, <0.8 세로
```
**충돌:** 없음 (analysis dict에 필드 추가만)
**회귀:** 없음 (이미지가 없으면 기존 흐름 그대로)
### E-2: details-block 연결
**수정 지점:** pipeline.py generate_slide() 내부
```python
# 실장이 detail_target=True로 판단한 꼭지를 details-block으로 변환
# 현재 "생략"으로 처리 → details-block으로 연결
```
**충돌:** design_director.py에서 detail_target 꼭지를 "생략"으로 처리 중 → 이것을 "details-block으로 배치"로 변경 필요
**회귀:** detail_target 로직이 변경되므로 기존 테스트 영향
---
## 전체 충돌 매트릭스
```
director editor renderer pipeline kei_client config
2-A FAISS 수정 - - - - -
2-B SVG - - 수정 - - -
2-C Opus 수정 - - - 참조 -
2-D 재검토 - 호출 - 수정 - -
2-E Pillow 수정 - - 수정 - -
```
**동시 수정 파일이 겹치는 경우:**
- design_director.py: 2-A + 2-C + 2-E → **순서대로 진행 (2-A 먼저)**
- pipeline.py: 2-D + 2-E → **독립적 함수라 병렬 가능**
---
## 절대 규칙 (모든 Phase 2 작업에 적용)
### 🔴 절대 금지
1. **단발성/하드코딩 금지** — 특정 상황만 해결하는 if문, 매직넘버, 고정값 절대 금지. 모든 구현은 N개, M종류에 범용으로 동작해야 한다.
2. **회귀 금지** — Phase 1에서 확정한 구조(catalog 매핑, 카테고리 경로, BF-9 grid 분리, Kei API 우선)를 절대 되돌리지 않는다.
3. **Opus 대신 Sonnet 직접 호출 금지** — Kei API가 필요한 곳에 anthropic.AsyncAnthropic 직접 호출로 대체하지 않는다. fallback은 fallback이지 기본 경로가 아니다.
4. **"일단 돌아가게" 금지** — 동작하지만 원래 설계와 다른 구현은 기술 부채다. 설계대로 구현하거나 설계를 먼저 변경한다.
### 자가 점검 질문 (구현 전 반드시 확인)
- [ ] 이 코드가 블록 100개가 되어도 동작하는가?
- [ ] 이 코드가 원소 7개가 되어도 동작하는가?
- [ ] 이 코드에 하드코딩된 값이 있는가? 있다면 설정/계산으로 대체 가능한가?
- [ ] Phase 1에서 확정한 인터페이스(catalog 매핑, grid 프리셋 분리)를 변경하는가?
- [ ] Kei API가 아닌 Sonnet을 직접 호출하는 코드가 있는가? (fallback 제외)
- [ ] 이 수정이 다른 모듈의 기존 동작을 깨뜨리는가?
---
## "대충 처리" 방지 체크리스트
| # | 위험 | 방지책 | 점검 방법 |
|---|------|-------|----------|
| 1 | Opus 대신 Sonnet 직접 호출 | Kei API 패턴만 사용 | `grep "AsyncAnthropic" src/*.py` → fallback 위치만 허용 |
| 2 | FAISS 없이 catalog 전문 유지 | _load_catalog() 교체 | FAISS 실패 시에만 fallback, 기본은 검색 |
| 3 | SVG 좌표를 하드코딩 | calc_circle_positions() 계산 | `grep "cx=\"[0-9]" templates/blocks/visuals/` → 0건이어야 함 |
| 4 | 재검토 루프 무한 반복 | MAX_ADJUSTMENTS = 2 | 코드에 상수 존재 확인 |
| 5 | shrink/rewrite 미구현 | 3개 action 모두 if 분기 | _apply_adjustments에서 action별 동작 확인 |
| 6 | 이미지 크기 하드코딩 | Pillow로 실측 | 고정 비율(예: 1.5) 사용 금지 |
| 7 | details-block "생략" 유지 | detail_target → details-block 배치 | design_director에서 "생략" 문자열 제거 확인 |
| 8 | 특정 블록 수에만 동작 | N개 범용 루프 | `for i in range(n)` 패턴 확인, `items[0]` 직접 인덱싱 금지 |
| 9 | 특정 프리셋에만 동작 | 모든 프리셋에서 테스트 | 4개 프리셋 × 테스트 콘텐츠 조합 |

219
docs/block-tests/card-image.html Normal file
View File

@@ -0,0 +1,219 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>블록 테스트: card-image</title>
<style>
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body {
font-family: "Pretendard Variable", "Noto Sans KR", sans-serif;
background: #e8ecf0;
display: flex;
justify-content: center;
padding: 30px;
margin: 0;
}
.block-container {
width: 920px;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.block-container .block-section-title {
margin: -20px -20px 0;
border-radius: 8px 8px 0 0;
overflow: hidden;
}
</style>
</head>
<body>
<div class="block-container">
<!-- 이미지 카드: 상단 이미지 + 하단 텍스트 (2~4열) -->
<!--
📋 card-image
─────────────────
용도: 단계별 설명, 카테고리별 설명 (이미지가 핵심인 카드)
슬롯: cards[] 배열 (각 카드에 image, title, title_en, items[])
Figma 원본: 2-1_02 > Group 1171281594 (카드 3열)
-->
<div class="block-card-image" style="--ci-count: 3">
<div class="ci-card">
<img class="ci-img" src="figma-assets/card_img_design.png" alt="설계단계">
<div class="ci-body">
<div class="ci-title" style="color: #00aaff">설계단계</div>
<div class="ci-title-en">Design Stage</div>
<div class="ci-divider"></div>
<ul class="ci-list">
<li>고도화된 BIM 구현</li>
<li>최첨단 디지털트윈</li>
<li>시뮬레이션 분석 & 성능평가</li>
<li>지속가능한 인프라개발</li>
</ul>
</div>
</div>
<div class="ci-card">
<img class="ci-img" src="figma-assets/card_img_construction.png" alt="시공 단계">
<div class="ci-body">
<div class="ci-title" style="color: #006aff">시공 단계</div>
<div class="ci-title-en">Construction Stage</div>
<div class="ci-divider"></div>
<ul class="ci-list">
<li>향상된 건설 계획과 공정 순서 관리</li>
<li>Big Room 등 환경을 통한 협업 및 조정</li>
<li>정확한 수량산출서와 비용 산정</li>
</ul>
</div>
</div>
<div class="ci-card">
<img class="ci-img" src="figma-assets/card_img_maintenance.png" alt="유지관리 단계">
<div class="ci-body">
<div class="ci-title" style="color: #004cbe">유지관리 단계</div>
<div class="ci-title-en">Maintenance Stage</div>
<div class="ci-divider"></div>
<ul class="ci-list">
<li>자산 정보 및 데이터 관리</li>
<li>예측 기반 유지보수 및 생애주기 분석</li>
<li>효율적인 시설 운영 및 지속가능한 관리</li>
</ul>
</div>
</div>
</div>
<style>
.block-card-image {
display: grid;
grid-template-columns: repeat(var(--ci-count, 3), 1fr);
gap: 16px;
}
.ci-card {
background: var(--color-bg, #ffffff);
border-radius: var(--radius, 8px);
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
overflow: hidden;
display: flex;
flex-direction: column;
}
.ci-img {
width: 100%;
height: 160px;
object-fit: contain;
background: #f8f9fb;
padding: 10px;
}
.ci-body {
padding: 16px;
flex: 1;
display: flex;
flex-direction: column;
}
.ci-title {
font-size: 14px;
font-weight: var(--weight-bold, 700);
text-decoration: underline;
text-underline-offset: 3px;
margin-bottom: 2px;
}
.ci-title-en {
font-size: 12px;
font-weight: var(--weight-normal, 400);
color: var(--color-text-secondary, #666);
margin-bottom: 10px;
}
.ci-divider {
width: 100%;
height: 1px;
background: #000;
margin-bottom: 10px;
}
.ci-list {
list-style: disc;
padding-left: 18px;
font-size: 13px;
line-height: 1.7;
color: var(--color-text, #000);
flex: 1;
}
.ci-list li {
margin-bottom: 3px;
}
.ci-source {
font-size: 11px;
color: var(--color-text-light, #94a3b8);
font-style: italic;
margin-top: 8px;
border-top: 1px solid var(--color-border, #e2e8f0);
padding-top: 6px;
}
</style>
</div>
</body>
</html>

162
docs/block-tests/cards_card-compare-3col.html Normal file
View File

@@ -0,0 +1,162 @@
<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>cards/card-compare-3col</title>
<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head><body><div class="block-container"><!-- 3단 비교 카드: 각각 다른 색상 헤더 + 아이콘/이미지 + 불릿 -->
<!--
📋 card-compare-3col
─────────────────
용도: 3개 카테고리 비교 (예: 상용SW / 3rd Party / 전문SW)
슬롯: cards[] (각 카드에 title, subtitle, color, image, bullets[])
Figma 원본: 2-2_03 "상용 / 3rd Party(범용) / 전문·전용 S/W"
-->
<div class="block-compare-3" style="--cc-count: 3">
<div class="cc-card">
<div class="cc-header" style="background: #6b7280">
<div class="cc-title">상용 S/W</div>
<div class="cc-sub">Commercial</div>
</div>
<ul class="cc-list">
<li>Autodesk, Bentley 등</li>
<li>범용 기능 제공</li>
<li>라이선스 비용 높음</li>
</ul>
</div>
<div class="cc-card">
<div class="cc-header" style="background: #2563eb">
<div class="cc-title">3rd Party 범용</div>
<div class="cc-sub">General Purpose</div>
</div>
<ul class="cc-list">
<li>Rhino, Sketchup 등</li>
<li>특정 분야 특화</li>
<li>상대적 저비용</li>
</ul>
</div>
<div class="cc-card">
<div class="cc-header" style="background: #dc2626">
<div class="cc-title">전문·전용 S/W</div>
<div class="cc-sub">Specialized</div>
</div>
<ul class="cc-list">
<li>자체 개발 솔루션</li>
<li>업무 프로세스 최적화</li>
<li>지속적 업그레이드 가능</li>
</ul>
</div>
</div>
<style>
.block-compare-3 {
display: grid;
grid-template-columns: repeat(var(--cc-count, 3), 1fr);
gap: 14px;
}
.cc-card {
border: 1px solid #e2e8f0;
border-radius: 10px;
overflow: hidden;
background: #ffffff;
}
.cc-header {
padding: 12px 16px;
text-align: center;
color: #ffffff;
}
.cc-title {
font-size: 15px;
font-weight: 800;
}
.cc-sub {
font-size: 11px;
opacity: 0.85;
margin-top: 2px;
}
.cc-img {
width: 100%;
height: 120px;
object-fit: contain;
background: #f8fafc;
padding: 8px;
}
.cc-list {
list-style: disc;
padding: 12px 16px 14px 30px;
font-size: 13px;
color: #334155;
line-height: 1.7;
}
.cc-list li {
margin-bottom: 3px;
white-space: pre-line;
}
</style></div></body></html>

174
docs/block-tests/cards_card-dark-overlay.html Normal file
View File

@@ -0,0 +1,174 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>cards/card-dark-overlay</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style>
</head>
<body><div class="block-container"><!-- 다크 오버레이 카드: 배경 이미지 + 흰 텍스트 오버레이 -->
<!--
📋 card-dark-overlay
─────────────────
용도: 키워드+짧은 설명을 시각적으로 강조. 이미지 위에 다크 오버레이 + 흰 텍스트.
슬롯: cards[] (각 카드에 image, title, description)
Figma 원본: 2-2_01 > 아이콘 카드 5열 (협업지원, 오류감소, 생산성향상 등)
-->
<div class="block-card-dark" style="--cd-count: 5">
<div class="cd-card">
<img class="cd-bg" src="../figma-assets/2-2_icon_card_1.png" alt="">
<div class="cd-overlay">
<div class="cd-title">협업지원</div>
<div class="cd-desc">팀원간 협업 원활히하여
프로젝트 관리 개선</div>
</div>
</div>
<div class="cd-card">
<img class="cd-bg" src="../figma-assets/2-2_icon_card_2.png" alt="">
<div class="cd-overlay">
<div class="cd-title">오류감소</div>
<div class="cd-desc">설계 오류 최소화
품질 향상</div>
</div>
</div>
<div class="cd-card">
<img class="cd-bg" src="../figma-assets/2-2_icon_card_3.png" alt="">
<div class="cd-overlay">
<div class="cd-title">생산성 향상</div>
<div class="cd-desc">반복적 작업의 자동화
시간과 노력 절약</div>
</div>
</div>
<div class="cd-card">
<img class="cd-bg" src="../figma-assets/2-2_icon_card_4.png" alt="">
<div class="cd-overlay">
<div class="cd-title">비용절감</div>
<div class="cd-desc">설계 변경 최소화
공사비 절감</div>
</div>
</div>
<div class="cd-card">
<img class="cd-bg" src="../figma-assets/2-2_icon_card_5.png" alt="">
<div class="cd-overlay">
<div class="cd-title">데이터 관리</div>
<div class="cd-desc">체계적 정보 관리
생애주기 활용</div>
</div>
</div>
</div>
<style>
.block-card-dark {
display: grid;
grid-template-columns: repeat(var(--cd-count, 3), 1fr);
gap: 12px;
}
.cd-card {
position: relative;
border-radius: 10px;
overflow: hidden;
height: 200px;
}
.cd-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.cd-bg-default {
background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
}
.cd-overlay {
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 16px;
text-align: center;
color: #ffffff;
}
.cd-title {
font-size: 18px;
font-weight: 800;
line-height: 1.3;
margin-bottom: 6px;
text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.cd-desc {
font-size: 12px;
font-weight: 400;
line-height: 1.5;
opacity: 0.9;
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
white-space: pre-line;
}
</style></div></body>
</html>

114
docs/block-tests/cards_card-icon-desc.html Normal file
View File

@@ -0,0 +1,114 @@
<!DOCTYPE html>
<html lang="ko">
<head><meta charset="UTF-8"><title>cards/card-icon-desc</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head>
<body><div class="block-container"><!-- 아이콘 설명 카드: 아이콘 + 제목 + 설명 (2~4열) -->
<!--
📋 card-icon-desc
─────────────────
용도: 기능/특성/장점을 아이콘과 함께 나열. 시각적으로 분류.
슬롯: cards[] (각 카드에 icon, title, description)
Figma 원본: 2-3_01 아이콘 3열 설명
-->
<div class="block-card-icon" style="--ci-count: 3">
<div class="cid-card">
<div class="cid-icon">🔧</div>
<div class="cid-title">기술 기반</div>
<div class="cid-desc">건설 분야별
전문지식과 경험</div>
</div>
<div class="cid-card">
<div class="cid-icon">💻</div>
<div class="cid-title">S/W 역량</div>
<div class="cid-desc">디지털 도구와
Process 통합</div>
</div>
<div class="cid-card">
<div class="cid-icon">🌏</div>
<div class="cid-title">여건 조성</div>
<div class="cid-desc">사회·기업·제도
수용 환경 구축</div>
</div>
</div>
<style>
.block-card-icon {
display: grid;
grid-template-columns: repeat(var(--ci-count, 3), 1fr);
gap: 16px;
}
.cid-card {
text-align: center;
padding: 20px 16px;
background: #f8fafc;
border-radius: 8px;
border: 1px solid #e2e8f0;
}
.cid-icon {
font-size: 2.5rem;
margin-bottom: 10px;
}
.cid-title {
font-size: 15px;
font-weight: 700;
color: #1e293b;
margin-bottom: 6px;
}
.cid-desc {
font-size: 13px;
color: #475569;
line-height: 1.7;
white-space: pre-line;
}
</style></div></body></html>

199
docs/block-tests/cards_card-image-3col.html Normal file
View File

@@ -0,0 +1,199 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>cards/card-image-3col</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.block-container .block-section-title { margin: -20px -20px 0; border-radius: 8px 8px 0 0; overflow: hidden; }
</style>
</head>
<body><div class="block-container"><!-- 이미지 카드: 상단 이미지 + 하단 텍스트 (2~4열) -->
<!--
📋 card-image
─────────────────
용도: 단계별 설명, 카테고리별 설명 (이미지가 핵심인 카드)
슬롯: cards[] 배열 (각 카드에 image, title, title_en, items[])
Figma 원본: 2-1_02 > Group 1171281594 (카드 3열)
-->
<div class="block-card-image" style="--ci-count: 3">
<div class="ci-card">
<img class="ci-img" src="../figma-assets/card_img_design.png" alt="설계단계">
<div class="ci-body">
<div class="ci-title" style="color: #00aaff">설계단계</div>
<div class="ci-title-en">Design Stage</div>
<div class="ci-divider"></div>
<ul class="ci-list">
<li>고도화된 BIM 구현</li>
<li>최첨단 디지털트윈</li>
<li>시뮬레이션 분석 & 성능평가</li>
<li>지속가능한 인프라개발</li>
</ul>
</div>
</div>
<div class="ci-card">
<img class="ci-img" src="../figma-assets/card_img_construction.png" alt="시공 단계">
<div class="ci-body">
<div class="ci-title" style="color: #006aff">시공 단계</div>
<div class="ci-title-en">Construction Stage</div>
<div class="ci-divider"></div>
<ul class="ci-list">
<li>향상된 건설 계획과 공정 순서 관리</li>
<li>Big Room 등 환경을 통한 협업 및 조정</li>
<li>정확한 수량산출서와 비용 산정</li>
</ul>
</div>
</div>
<div class="ci-card">
<img class="ci-img" src="../figma-assets/card_img_maintenance.png" alt="유지관리 단계">
<div class="ci-body">
<div class="ci-title" style="color: #004cbe">유지관리 단계</div>
<div class="ci-title-en">Maintenance Stage</div>
<div class="ci-divider"></div>
<ul class="ci-list">
<li>자산 정보 및 데이터 관리</li>
<li>예측 기반 유지보수 및 생애주기 분석</li>
<li>효율적인 시설 운영 및 지속가능한 관리</li>
</ul>
</div>
</div>
</div>
<style>
.block-card-image {
display: grid;
grid-template-columns: repeat(var(--ci-count, 3), 1fr);
gap: 16px;
}
.ci-card {
background: var(--color-bg, #ffffff);
border-radius: var(--radius, 8px);
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
overflow: hidden;
display: flex;
flex-direction: column;
}
.ci-img {
width: 100%;
height: 160px;
object-fit: contain;
background: #f8f9fb;
padding: 10px;
}
.ci-body {
padding: 16px;
flex: 1;
display: flex;
flex-direction: column;
}
.ci-title {
font-size: 14px;
font-weight: var(--weight-bold, 700);
text-decoration: underline;
text-underline-offset: 3px;
margin-bottom: 2px;
}
.ci-title-en {
font-size: 12px;
font-weight: var(--weight-normal, 400);
color: var(--color-text-secondary, #666);
margin-bottom: 10px;
}
.ci-divider {
width: 100%;
height: 1px;
background: #000;
margin-bottom: 10px;
}
.ci-list {
list-style: disc;
padding-left: 18px;
font-size: 13px;
line-height: 1.7;
color: var(--color-text, #000);
flex: 1;
}
.ci-list li {
margin-bottom: 3px;
}
.ci-source {
font-size: 11px;
color: var(--color-text-light, #94a3b8);
font-style: italic;
margin-top: 8px;
border-top: 1px solid var(--color-border, #e2e8f0);
padding-top: 6px;
}
</style></div></body>
</html>

133
docs/block-tests/cards_card-image-round.html Normal file
View File

@@ -0,0 +1,133 @@
<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>cards/card-image-round</title>
<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head><body><div class="block-container"><!-- 원형 이미지 카드: 원형 이미지 + 하단 제목/설명 -->
<!--
📋 card-image-round
─────────────────
용도: 포트폴리오형, 팀 소개, 가치/비전 표현 (원형 이미지가 핵심)
슬롯: cards[] (각 카드에 image, title, description)
Figma 원본: 1장_가치 하단 3열 원형 이미지 + 설명
-->
<div class="block-card-round" style="--cr-count: 3">
<div class="cr-card">
<div class="cr-img-wrap">
<img src="../figma-assets/card_img_design.png" alt="설계 혁신">
</div>
<div class="cr-title">설계 혁신</div>
<div class="cr-desc">3D 모델 기반
통합 설계</div>
</div>
<div class="cr-card">
<div class="cr-img-wrap">
<img src="../figma-assets/card_img_construction.png" alt="시공 효율">
</div>
<div class="cr-title">시공 효율</div>
<div class="cr-desc">디지털 관리
품질 향상</div>
</div>
<div class="cr-card">
<div class="cr-img-wrap">
<img src="../figma-assets/card_img_maintenance.png" alt="유지관리">
</div>
<div class="cr-title">유지관리</div>
<div class="cr-desc">생애주기
자산 관리</div>
</div>
</div>
<style>
.block-card-round {
display: grid;
grid-template-columns: repeat(var(--cr-count, 3), 1fr);
gap: 24px;
text-align: center;
}
.cr-card {
display: flex;
flex-direction: column;
align-items: center;
}
.cr-img-wrap {
width: 140px;
height: 140px;
border-radius: 50%;
overflow: hidden;
border: 3px solid #e2e8f0;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
margin-bottom: 12px;
}
.cr-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cr-title {
font-size: 15px;
font-weight: 700;
color: #1e293b;
margin-bottom: 4px;
}
.cr-desc {
font-size: 13px;
color: #475569;
line-height: 1.6;
white-space: pre-line;
max-width: 200px;
}
</style></div></body></html>

136
docs/block-tests/cards_card-numbered.html Normal file
View File

@@ -0,0 +1,136 @@
<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>cards/card-numbered</title>
<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head><body><div class="block-container"><!-- 번호 카드: 순서 번호 + 제목 + 설명 (세로 나열) -->
<!--
📋 card-numbered
─────────────────
용도: 순서가 있는 항목 나열 (1. 2. 3.), 실행 조건, 요구사항
슬롯: items[] (각 항목에 title, description)
card-icon-desc와 다른 점: 아이콘 대신 순서 번호, 세로 나열
-->
<div class="block-card-num">
<div class="cn-item">
<div class="cn-number" style="background: #2563eb">1</div>
<div class="cn-body">
<div class="cn-title">요구사항 분석</div>
<div class="cn-desc">디지털 전환 목표 수립
사용자 요구사항 수집</div>
</div>
</div>
<div class="cn-item">
<div class="cn-number" style="background: #059669">2</div>
<div class="cn-body">
<div class="cn-title">S/W 개발</div>
<div class="cn-desc">건설산업 디지털화를 위한
솔루션 개발 및 업그레이드</div>
</div>
</div>
<div class="cn-item">
<div class="cn-number" style="background: #7c3aed">3</div>
<div class="cn-body">
<div class="cn-title">System 통합</div>
<div class="cn-desc">기존 시스템 호환성 분석
API 데이터 통합</div>
</div>
</div>
<div class="cn-item">
<div class="cn-number" style="background: #dc2626">4</div>
<div class="cn-body">
<div class="cn-title">교육/피드백</div>
<div class="cn-desc">사용자 교육 프로그램
지속적 모니터링 & 개선</div>
</div>
</div>
</div>
<style>
.block-card-num {
display: flex;
flex-direction: column;
gap: 10px;
}
.cn-item {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 12px 16px;
background: #f8fafc;
border-radius: 8px;
border: 1px solid #e2e8f0;
}
.cn-number {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 14px;
font-weight: 800;
flex-shrink: 0;
}
.cn-title {
font-size: 15px;
font-weight: 700;
color: #1e293b;
margin-bottom: 2px;
}
.cn-desc {
font-size: 13px;
color: #475569;
line-height: 1.7;
white-space: pre-line;
}
</style></div></body></html>

129
docs/block-tests/cards_card-stat-number.html Normal file
View File

@@ -0,0 +1,129 @@
<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>cards/card-stat-number</title>
<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head><body><div class="block-container"><!-- 통계 숫자 카드: 큰 숫자 + 라벨 + 설명 -->
<!--
📋 card-stat-number
─────────────────
용도: KPI, 성과 수치, 목표 달성률, 비용 절감율 등 핵심 지표 강조
슬롯: stats[] (각 항목에 number, unit, label, description, color)
Figma 참고: 건설 정책 수치 (30% 절감, 40% 감소 등)
-->
<div class="block-stat" style="--st-count: 4">
<div class="st-card">
<div class="st-number" style="color: #2563eb">
30<span class="st-unit">%</span>
</div>
<div class="st-label">공기/공사비 절감</div>
</div>
<div class="st-card">
<div class="st-number" style="color: #059669">
40<span class="st-unit">%</span>
</div>
<div class="st-label">안전사고 감소</div>
</div>
<div class="st-card">
<div class="st-number" style="color: #7c3aed">
220<span class="st-unit">명+</span>
</div>
<div class="st-label">IT+CIVIL ENG 인력</div>
</div>
<div class="st-card">
<div class="st-number" style="color: #dc2626">
80<span class="st-unit">개+</span>
</div>
<div class="st-label">전용 S/W 개발</div>
</div>
</div>
<style>
.block-stat {
display: grid;
grid-template-columns: repeat(var(--st-count, 3), 1fr);
gap: 16px;
}
.st-card {
text-align: center;
padding: 20px 12px;
background: #f8fafc;
border-radius: 10px;
border: 1px solid #e2e8f0;
}
.st-number {
font-size: 36px;
font-weight: 900;
line-height: 1.2;
}
.st-unit {
font-size: 18px;
font-weight: 700;
margin-left: 2px;
}
.st-label {
font-size: 14px;
font-weight: 700;
color: #1e293b;
margin-top: 6px;
}
.st-desc {
font-size: 12px;
color: #64748b;
margin-top: 4px;
line-height: 1.5;
white-space: pre-line;
}
</style></div></body></html>

170
docs/block-tests/cards_card-step-vertical.html Normal file
View File

@@ -0,0 +1,170 @@
<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>cards/card-step-vertical</title>
<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head><body><div class="block-container"><!-- 세로 단계 카드: 좌측 단계 마커 + 우측 이미지/텍스트 -->
<!--
📋 card-step-vertical
─────────────────
용도: 생애주기 단계별 설명, 시간순 프로세스 (설계→시공→운영→유지관리)
슬롯: steps[] (각 단계에 phase, title, description, image, color)
Figma 원본: 2-3_04 "건설 생애주기와 정보모델 연계" (설계단계/시공단계/운영관리/유지관리)
-->
<div class="block-step-v">
<div class="sv-step">
<div class="sv-marker" style="background: #00aaff">
<div class="sv-phase">설계단계</div>
</div>
<div class="sv-content">
<div class="sv-title">BIM 기반 3D 설계</div>
<div class="sv-desc">• 고도화된 BIM 구현
• 시뮬레이션 분석 & 성능평가</div>
</div>
</div>
<div class="sv-connector">
<div class="sv-line" style="background: #00aaff"></div>
</div>
<div class="sv-step">
<div class="sv-marker" style="background: #006aff">
<div class="sv-phase">시공단계</div>
</div>
<div class="sv-content">
<div class="sv-title">현장 디지털 관리</div>
<div class="sv-desc">• 공정 순서 관리
• Big Room 협업 환경</div>
</div>
</div>
<div class="sv-connector">
<div class="sv-line" style="background: #006aff"></div>
</div>
<div class="sv-step">
<div class="sv-marker" style="background: #004cbe">
<div class="sv-phase">운영단계</div>
</div>
<div class="sv-content">
<div class="sv-title">디지털 트윈 운영</div>
<div class="sv-desc">• 실시간 모니터링
• 예측 기반 유지보수</div>
</div>
</div>
</div>
<style>
.block-step-v {
display: flex;
flex-direction: column;
gap: 0;
}
.sv-step {
display: flex;
gap: 16px;
align-items: flex-start;
}
.sv-marker {
width: 100px;
flex-shrink: 0;
border-radius: 8px;
padding: 10px 12px;
text-align: center;
color: #ffffff;
}
.sv-phase {
font-size: 13px;
font-weight: 700;
white-space: nowrap;
}
.sv-content {
flex: 1;
background: #f8fafc;
border-radius: 8px;
padding: 14px;
border: 1px solid #e2e8f0;
}
.sv-title {
font-size: 15px;
font-weight: 700;
color: #1e293b;
margin-bottom: 8px;
}
.sv-img {
width: 100%;
max-height: 150px;
object-fit: cover;
border-radius: 6px;
margin-bottom: 8px;
}
.sv-desc {
font-size: 13px;
color: #475569;
line-height: 1.7;
white-space: pre-line;
}
.sv-connector {
display: flex;
justify-content: 50px;
padding-left: 48px;
height: 20px;
}
.sv-line {
width: 3px;
height: 100%;
border-radius: 2px;
opacity: 0.4;
}
</style></div></body></html>

132
docs/block-tests/cards_card-tag-image.html Normal file
View File

@@ -0,0 +1,132 @@
<!DOCTYPE html>
<html lang="ko">
<head><meta charset="UTF-8"><title>cards/card-tag-image</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head>
<body><div class="block-container"><!-- 태그 카드: 상단 태그 라벨 + 이미지 + 설명 -->
<!--
📋 card-tag-image
─────────────────
용도: 카테고리별 분류 (제조/건축/토목 등), 태그로 구분되는 항목
슬롯: cards[] (각 카드에 tag, tag_color, image, title, description)
Figma 원본: 2-3_01 "산업별 특성과 현장의 모습" (제조, 건축, 인프라/토목)
-->
<div class="block-card-tag" style="--ct-count: 3">
<div class="ct-card">
<div class="ct-tag" style="background: #2563eb">제조</div>
<div class="ct-title">제조업 현장</div>
<div class="ct-desc">반복적 공정
표준화된 부품
자동화 라인</div>
</div>
<div class="ct-card">
<div class="ct-tag" style="background: #059669">건축</div>
<div class="ct-title">건축 현장</div>
<div class="ct-desc">수직적 작업공간
Library 기반 설계
반복 요소 활용</div>
</div>
<div class="ct-card">
<div class="ct-tag" style="background: #dc2626">인프라/토목</div>
<div class="ct-title">인프라 현장</div>
<div class="ct-desc">수평적 작업공간
비반복적 공정
GIS 기반 위치정보 필수</div>
</div>
</div>
<style>
.block-card-tag {
display: grid;
grid-template-columns: repeat(var(--ct-count, 3), 1fr);
gap: 16px;
}
.ct-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.ct-tag {
display: inline-block;
padding: 4px 14px;
font-size: 12px;
font-weight: 700;
color: #ffffff;
border-radius: 0 0 8px 0;
align-self: flex-start;
}
.ct-img {
width: 100%;
height: 140px;
object-fit: cover;
}
.ct-title {
font-size: 14px;
font-weight: 700;
color: #1e293b;
padding: 10px 14px 4px;
}
.ct-desc {
font-size: 13px;
color: #475569;
line-height: 1.7;
padding: 0 14px 14px;
white-space: pre-line;
}
</style></div></body></html>

137
docs/block-tests/cards_card-text-grid.html Normal file
View File

@@ -0,0 +1,137 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>cards/card-text-grid</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.block-container .block-section-title { margin: -20px -20px 0; border-radius: 8px 8px 0 0; overflow: hidden; }
</style>
</head>
<body><div class="block-container"><!-- 카드 그리드 블록: 2~4열 카드 배열 -->
<div class="block-card-grid" style="--card-count: 3">
<div class="card" style="border-top-color: None">
<div class="card-title">건설산업</div>
<span class="card-category">종합산업</span>
<div class="card-description">다양한 시설물을 광범위한 기술을 통합·융합하여 만들어내는 종합산업</div>
</div>
<div class="card" style="border-top-color: None">
<div class="card-title">BIM</div>
<span class="card-category">핵심 인프라 기술</span>
<div class="card-description">시설물 생애주기 정보를 3D 모델 기반으로 통합·관리하는 도구</div>
<div class="card-source">국토교통부, 2020</div>
</div>
<div class="card" style="border-top-color: None">
<div class="card-title">DX</div>
<span class="card-category">패러다임 변화</span>
<div class="card-description">디지털 기술 기반으로 업무방식과 가치 창출 구조를 전환하는 과정</div>
<div class="card-source">IBM, 2011</div>
</div>
</div>
<style>
.block-card-grid {
display: grid;
grid-template-columns: repeat(var(--card-count, 3), 1fr);
gap: var(--spacing-inner);
height: 100%;
}
.card {
background: var(--color-bg);
border: var(--border-width) solid var(--color-border);
border-top: var(--accent-border) solid var(--color-accent);
border-radius: var(--radius);
padding: var(--spacing-inner);
display: flex;
flex-direction: column;
}
.card-icon {
font-size: 1.5rem;
margin-bottom: var(--spacing-small);
}
.card-title {
font-size: var(--font-subtitle);
font-weight: var(--weight-bold);
color: var(--color-primary);
margin-bottom: 4px;
}
.card-category {
font-size: var(--font-small);
font-weight: var(--weight-medium);
color: var(--color-accent);
background: #dbeafe;
padding: 2px 8px;
border-radius: 12px;
display: inline-block;
margin-bottom: var(--spacing-small);
width: fit-content;
}
.card-description {
font-size: var(--font-body);
color: var(--color-text);
line-height: var(--line-height-ko);
flex: 1;
}
.card-source {
font-size: var(--font-small);
color: var(--color-text-light);
font-style: italic;
margin-top: var(--spacing-small);
border-top: var(--border-width) solid var(--color-border);
padding-top: var(--spacing-small);
}
</style></div></body>
</html>

133
docs/block-tests/circle-label.html Normal file
View File

@@ -0,0 +1,133 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>블록 테스트: circle-label</title>
<style>
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body {
font-family: "Pretendard Variable", "Noto Sans KR", sans-serif;
background: #e8ecf0;
display: flex;
justify-content: center;
padding: 30px;
margin: 0;
}
.block-container {
width: 920px;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.block-container .block-section-title {
margin: -20px -20px 0;
border-radius: 8px 8px 0 0;
overflow: hidden;
}
</style>
</head>
<body>
<div class="block-container">
<!-- 원형 라벨: CSS 그라데이션 원 + 중앙 텍스트 -->
<!--
📋 circle-label
─────────────────
용도: 섹션 전환점, 핵심 키워드 강조, 시각적 구분자
슬롯: label (필수), sub_label (선택)
Figma 원본: 2-1_02 > Group 1171281590 (190x190)
-->
<div class="block-circle-label">
<div class="cl-outer">
<div class="cl-inner">
<div class="cl-text">단계별
BIM의 활용</div>
</div>
</div>
</div>
<style>
.block-circle-label {
display: flex;
justify-content: center;
padding: 20px 0;
}
.cl-outer {
width: 190px;
height: 190px;
border-radius: 50%;
background: linear-gradient(180deg, #3db8ff 0%, #006aff 100%);
box-shadow: 0 0 30px rgba(0, 106, 255, 0.25), 0 0 60px rgba(0, 106, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
}
.cl-inner {
width: 170px;
height: 170px;
border-radius: 50%;
background: linear-gradient(180deg, #4dc4ff 0%, #0080ff 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #ffffff;
text-align: center;
}
.cl-text {
font-size: 20px;
font-weight: var(--weight-bold, 700);
line-height: 1.4;
}
.cl-sub {
font-size: 12px;
opacity: 0.8;
margin-top: 4px;
}
</style>
</div>
</body>
</html>

124
docs/block-tests/compare-box.html Normal file
View File

@@ -0,0 +1,124 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>compare-box</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style>
</head>
<body><div class="block-container"><!-- 비교 박스: 둥근 테두리 박스 2개 + VS 라벨 -->
<!--
📋 compare-box
─────────────────
용도: 2개 개념을 시각적으로 대비 (비교 테이블 위 헤더로 사용)
슬롯: left_label, left_sub, right_label, right_sub
Figma 원본: 2-1_02 > 하늘색 둥근 박스 2개 + 시안 텍스트
-->
<div class="block-compare-box">
<div class="cb-item">
<div class="cb-text">
<div class="cb-label">디지털 기술을 활용한
협업 프로세스</div>
</div>
</div>
<div class="cb-vs">VS</div>
<div class="cb-item">
<div class="cb-text">
<div class="cb-label">시설물의 전 생애주기 동안
정보의 생성 및 관리</div>
</div>
</div>
</div>
<style>
.block-compare-box {
display: flex;
gap: 16px;
align-items: center;
justify-content: center;
padding: 15px 0;
}
.cb-item {
width: 340px;
height: 110px;
border-radius: 55px;
border: 3px solid #7ec8f0;
background: linear-gradient(135deg, #e8f4fd 0%, #d4ecfa 100%);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 10px rgba(0, 140, 220, 0.1);
}
.cb-text {
text-align: center;
}
.cb-label {
font-size: 19px;
font-weight: 800;
color: #0090d0;
line-height: 1.4;
}
.cb-sub {
font-size: 13px;
color: #0090d0;
margin-top: 3px;
line-height: 1.5;
white-space: pre-line;
font-weight: 500;
}
.cb-vs {
font-size: 22px;
font-weight: 700;
color: #333;
flex-shrink: 0;
}
</style></div></body>
</html>

278
docs/block-tests/comparison-table.html Normal file
View File

@@ -0,0 +1,278 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>comparison-table</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style>
</head>
<body><div class="block-container"><!-- 비교 테이블: BIM vs DX 스타일 3단 테이블 -->
<!--
📋 comparison-table
─────────────────
용도: 다항목 비교 (좌측 A | 중앙 기준 | 우측 B)
슬롯: headers[] (3개), rows[][] (각 행 3칸)
Figma 원본: 2-1_02 > BIM VS D/X 테이블
특징: 중앙 칼럼에 파란 그라데이션 배지, 좌우 불릿 대비
-->
<div class="block-table-figma">
<table>
<thead>
<tr>
<th class="th-left">
BIM
</th>
<th class="th-center">
<span class="th-badge">VS</span>
</th>
<th class="th-right">
D/X
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="td-left">• Only 3D</td>
<td class="td-center">BIM · D/X</td>
<td class="td-right">• BIM ≪ D/X (ENG. + Management 포함)</td>
</tr>
<tr>
<td class="td-left">• 모델 제작용 상용 S/W
(Civil 3D, Revit, Navisworks, Autocad)</td>
<td class="td-center">S/W</td>
<td class="td-right">• 제작 및 운영(상용 + 전용 40~80개)
[Rhino, Sketchup, Blender...] + [EG-BIM 등]</td>
</tr>
<tr>
<td class="td-left">• 기존 2D 설계방식 유지</td>
<td class="td-center">프로세스</td>
<td class="td-right">• 근본적 문제의식을 통한 개선</td>
</tr>
<tr>
<td class="td-left">• 3D 모델 중심
• 기존 성과품 유지</td>
<td class="td-center">성과물</td>
<td class="td-right">• 공학 정보 및 콘텐츠 연계에 집중
• 도면, 수량, 시공계획 등 일식</td>
</tr>
<tr>
<td class="td-left">• 3D 모델에 의한 일반적 이해 향상</td>
<td class="td-center">활용</td>
<td class="td-right">• 설계/시공의 혁신(개념의 재정립)</td>
</tr>
<tr>
<td class="td-left">• (설계/시공/운영) 분야별 단절</td>
<td class="td-center">확장성</td>
<td class="td-right">• 전 생애주기 활용 시스템</td>
</tr>
<tr>
<td class="td-left">• 단순화(오류) - 수동적/집단적 동질화</td>
<td class="td-center">수행개념</td>
<td class="td-right">• 구체화(복잡) - 적극/구체적 실현 방안</td>
</tr>
<tr>
<td class="td-left">• 소극적, 상용 기술에 의존</td>
<td class="td-center">CIVIL + IT</td>
<td class="td-right">• 적극적, 주체적인 기술 접목/융합</td>
</tr>
<tr>
<td class="td-left">• S/W 제작사 판매 정책에 의존</td>
<td class="td-center">주체</td>
<td class="td-right">• 자체 수행능력 - 지속가능성 확보</td>
</tr>
<tr>
<td class="td-left">• 평준화, 국내 중심</td>
<td class="td-center">발주처</td>
<td class="td-right">• 차별화 및 경쟁력 확보, 해외 진출</td>
</tr>
<tr>
<td class="td-left">• 소규모 BIM팀 운영 + 단순교육에 집중</td>
<td class="td-center">설계사</td>
<td class="td-right">• IT + CIVIL ENG 220명 운영 + 기술 개발</td>
</tr>
<tr>
<td class="td-left">• 국내 토목 소극적/ 해외 토목증가</td>
<td class="td-center">시공사</td>
<td class="td-right">• 분야 확장 모델 및 시스템</td>
</tr>
</tbody>
</table>
</div>
<style>
.block-table-figma {
overflow: auto;
}
.block-table-figma table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
line-height: 1.7;
}
/* 헤더 */
.block-table-figma thead th {
padding: 14px 12px;
font-size: 16px;
font-weight: 700;
border-bottom: 2px solid #e8edf2;
}
.th-left {
text-align: center;
color: #6bcdff;
}
.th-center {
text-align: center;
width: 120px;
}
.th-badge {
display: inline-block;
background: linear-gradient(135deg, #006eff 0%, #00aaff 100%);
color: #ffffff;
font-size: 15px;
font-weight: 700;
padding: 8px 28px;
border-radius: 25px;
}
.th-right {
text-align: center;
color: #006eff;
}
/* 본문 */
.block-table-figma tbody td {
padding: 10px 14px;
border-bottom: 1px solid #f0f2f5;
vertical-align: middle;
}
.td-left {
text-align: center;
color: #444;
}
.td-center {
text-align: center;
font-weight: 700;
color: #333;
background: #f6f8fb;
font-size: 13px;
}
.td-right {
text-align: center;
color: #444;
}
.block-table-figma tbody tr:hover {
background: #fafbfd;
}
</style></div></body>
</html>

93
docs/block-tests/conclusion-bar.html Normal file
View File

@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>conclusion-bar</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style>
</head>
<body><div class="block-container"><!-- 결론 바: Figma 톤에 맞춘 하단 핵심 메시지 -->
<!--
📋 conclusion-bar
─────────────────
용도: 슬라이드/페이지 하단 핵심 한 줄 요약
슬롯: conclusion_text (필수), label (선택)
Figma 톤: 밝은 회색 배경 + 좌측 파란 액센트 라인 + 진한 텍스트
-->
<div class="block-conclusion-figma">
<div class="cf-label">핵심 요약</div>
<div class="cf-text">BIM은 건설산업의 디지털전환(DX)을 수행하는 과정에서 가장 기초가 되는 일부분이다</div>
</div>
<style>
.block-conclusion-figma {
background: #f4f6f9;
border-left: 4px solid #006aff;
border-radius: 0 8px 8px 0;
padding: 18px 28px;
display: flex;
flex-direction: column;
gap: 4px;
}
.cf-label {
font-size: 11px;
font-weight: 600;
color: #006aff;
text-transform: uppercase;
letter-spacing: 1px;
}
.cf-text {
font-size: 15px;
font-weight: 700;
color: #1e293b;
line-height: 1.6;
word-break: keep-all;
}
</style></div></body>
</html>

88
docs/block-tests/emphasis_banner-gradient.html Normal file
View File

@@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>emphasis/banner-gradient</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style>
</head>
<body><div class="block-container"><!-- 그라데이션 배너 바: 전체 너비 파란 그라데이션 + 중앙 텍스트 -->
<!--
📋 banner-gradient
─────────────────
용도: 섹션 구분, 핵심 선언, 강조 문구를 전체 너비 배너로
슬롯: text (필수), sub_text (선택)
Figma 원본: 2-2_01 하단, 2-2_03 분류 바
-->
<div class="block-banner-grad">
<div class="bg-text">Engineering Software는 건설산업 DX를 실현하기 위한 핵심 도구입니다</div>
<div class="bg-sub">단순 도구가 아닌, 엔지니어의 전문지식과 프로세스를 디지털화하는 기반 기술</div>
</div>
<style>
.block-banner-grad {
background: linear-gradient(135deg, #006aff 0%, #00aaff 100%);
border-radius: 8px;
padding: 16px 30px;
text-align: center;
color: #ffffff;
}
.bg-text {
font-size: 16px;
font-weight: 700;
line-height: 1.5;
}
.bg-sub {
font-size: 12px;
font-weight: 400;
opacity: 0.85;
margin-top: 4px;
}
</style></div></body>
</html>

104
docs/block-tests/emphasis_callout-solution.html Normal file
View File

@@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>emphasis/callout-solution</title>
<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head><body><div class="block-container"><!-- 솔루션 콜아웃: 강조 배경 + 아이콘 + 제목 + 설명 -->
<!--
📋 callout-solution
─────────────────
용도: 핵심 해결책/솔루션/방향성 강조. 눈에 띄는 콜아웃 박스.
슬롯: icon (선택), title (필수), description (필수), source (선택)
Figma 원본: 2-3_05 "Solution 제시 포인트"
-->
<div class="block-callout-sol">
<div class="cs-icon">💡</div>
<div class="cs-body">
<div class="cs-title">Solution 제시 포인트</div>
<div class="cs-desc">지금의 방식 속에서도 앞으로도 지속적으로 가능할까?
건설산업의 디지털 전환을 위해 근본적인 변화가 필요한 시점입니다.</div>
<div class="cs-source">건설산업 DX 전략 보고서</div>
</div>
</div>
<style>
.block-callout-sol {
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
border: 2px solid #93c5fd;
border-radius: 12px;
padding: 20px 24px;
display: flex;
gap: 16px;
align-items: flex-start;
}
.cs-icon {
font-size: 2rem;
flex-shrink: 0;
margin-top: 2px;
}
.cs-body {
flex: 1;
}
.cs-title {
font-size: 17px;
font-weight: 800;
color: #1e40af;
margin-bottom: 6px;
}
.cs-desc {
font-size: 14px;
color: #334155;
line-height: 1.7;
white-space: pre-line;
word-break: keep-all;
}
.cs-source {
font-size: 11px;
color: #64748b;
font-style: italic;
margin-top: 8px;
}
</style></div></body></html>

95
docs/block-tests/emphasis_callout-warning.html Normal file
View File

@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>emphasis/callout-warning</title>
<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head><body><div class="block-container"><!-- 경고 콜아웃: 주의/경고/문제점 강조 -->
<!--
📋 callout-warning
─────────────────
용도: 문제점 지적, 주의사항, 잘못된 접근 경고
슬롯: title (필수), description (필수), icon (선택)
callout-solution과 다른 점: 경고 톤 (빨간/주황), 문제 지적용
-->
<div class="block-callout-warn">
<div class="cw-icon">⚠️</div>
<div class="cw-body">
<div class="cw-title">현재 접근 방식의 한계</div>
<div class="cw-desc">단순 BIM S/W 도입만으로는 DX를 달성할 수 없습니다.
기존 2D 설계방식 위에 3D를 덧씌우는 접근은
비용 증가와 효율 저하를 초래합니다.</div>
</div>
</div>
<style>
.block-callout-warn {
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
border: 2px solid #fca5a5;
border-radius: 12px;
padding: 20px 24px;
display: flex;
gap: 16px;
align-items: flex-start;
}
.cw-icon {
font-size: 2rem;
flex-shrink: 0;
}
.cw-body { flex: 1; }
.cw-title {
font-size: 17px;
font-weight: 800;
color: #991b1b;
margin-bottom: 6px;
}
.cw-desc {
font-size: 14px;
color: #7f1d1d;
line-height: 1.7;
white-space: pre-line;
word-break: keep-all;
}
</style></div></body></html>

111
docs/block-tests/emphasis_comparison-2col.html Normal file
View File

@@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>emphasis/comparison-2col</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.block-container .block-section-title { margin: -20px -20px 0; border-radius: 8px 8px 0 0; overflow: hidden; }
</style>
</head>
<body><div class="block-container"><!-- 비교 블록: 2단 병렬 레이아웃 -->
<div class="block-comparison">
<div class="comparison-left">
<div class="comparison-header comparison-header--left">잘못된 인식</div>
<div class="comparison-content">• BIM 기술 도입 = DX 완성
• DX를 단순 기술 도입으로 한정
• 개별 기술 중심의 접근</div>
</div>
<div class="comparison-divider"></div>
<div class="comparison-right">
<div class="comparison-header comparison-header--right">올바른 이해</div>
<div class="comparison-content">• DX는 BIM을 포함한 상위 개념
• 산업 패러다임의 근본적 변화
• GIS-BIM-디지털트윈 기술 융합 필수</div>
</div>
</div>
<style>
.block-comparison {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: var(--spacing-inner);
height: 100%;
}
.comparison-divider {
width: 1px;
background: var(--color-border);
}
.comparison-header {
font-size: var(--font-subtitle);
font-weight: var(--weight-bold);
padding-bottom: var(--spacing-small);
margin-bottom: var(--spacing-small);
border-bottom: var(--accent-border) solid;
}
.comparison-header--left {
border-color: var(--color-accent);
color: var(--color-accent);
}
.comparison-header--right {
border-color: var(--color-danger);
color: var(--color-danger);
}
.comparison-subtitle {
font-size: var(--font-caption);
color: var(--color-text-secondary);
margin-bottom: var(--spacing-small);
}
.comparison-content {
font-size: var(--font-body);
line-height: var(--line-height-ko);
}
</style></div></body>
</html>

94
docs/block-tests/emphasis_conclusion-accent-bar.html Normal file
View File

@@ -0,0 +1,94 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>emphasis/conclusion-accent-bar</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.block-container .block-section-title { margin: -20px -20px 0; border-radius: 8px 8px 0 0; overflow: hidden; }
</style>
</head>
<body><div class="block-container"><!-- 결론 바: Figma 톤에 맞춘 하단 핵심 메시지 -->
<!--
📋 conclusion-bar
─────────────────
용도: 슬라이드/페이지 하단 핵심 한 줄 요약
슬롯: conclusion_text (필수), label (선택)
Figma 톤: 밝은 회색 배경 + 좌측 파란 액센트 라인 + 진한 텍스트
-->
<div class="block-conclusion-figma">
<div class="cf-label">핵심 요약</div>
<div class="cf-text">BIM은 건설산업의 디지털전환(DX)을 수행하는 과정에서 가장 기초가 되는 일부분이다</div>
</div>
<style>
.block-conclusion-figma {
background: #f4f6f9;
border-left: 4px solid #006aff;
border-radius: 0 8px 8px 0;
padding: 18px 28px;
display: flex;
flex-direction: column;
gap: 4px;
}
.cf-label {
font-size: 11px;
font-weight: 600;
color: #006aff;
text-transform: uppercase;
letter-spacing: 1px;
}
.cf-text {
font-size: 15px;
font-weight: 700;
color: #1e293b;
line-height: 1.6;
word-break: keep-all;
}
</style></div></body>
</html>

105
docs/block-tests/emphasis_dark-bullet-list.html Normal file
View File

@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="ko">
<head><meta charset="UTF-8"><title>emphasis/dark-bullet-list</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head>
<body><div class="block-container"><!-- 다크 배경 불릿 리스트: 짙은 배경 + 흰 텍스트 불릿 목록 -->
<!--
📋 dark-bullet-list
─────────────────
용도: 핵심 포인트를 짙은 배경 위에 강조. 시각적 무게감.
슬롯: title (선택), bullets[] (필수)
Figma 원본: 2-2_01 하단, 2-3_01 하단 다크 섹션
-->
<div class="block-dark-bullets">
<div class="db-title">건설산업 DX의 핵심 과제</div>
<ul class="db-list">
<li>기존 2D 설계방식의 근본적 한계 인식</li>
<li>3D 모델 기반의 정보 통합·관리 체계 구축</li>
<li>전 생애주기 데이터 연계 및 활용 시스템 도입</li>
<li>디지털 트윈 기반 시뮬레이션 및 의사결정 지원</li>
</ul>
</div>
<style>
.block-dark-bullets {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
border-radius: 8px;
padding: 20px 28px;
color: #ffffff;
}
.db-title {
font-size: 16px;
font-weight: 700;
margin-bottom: 12px;
color: #93c5fd;
}
.db-list {
list-style: none;
padding: 0;
}
.db-list li {
font-size: 14px;
line-height: 1.8;
padding-left: 16px;
position: relative;
margin-bottom: 4px;
}
.db-list li::before {
content: '•';
position: absolute;
left: 0;
color: #60a5fa;
}
</style></div></body></html>

80
docs/block-tests/emphasis_divider-text.html Normal file
View File

@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>emphasis/divider-text</title>
<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head><body><div class="block-container"><!-- 텍스트 구분선: 좌우 선 + 중앙 텍스트 -->
<!--
📋 divider-text
─────────────────
용도: 섹션 구분, 주제 전환, 시각적 휴식점
슬롯: text (필수)
-->
<div class="block-divider-text">
<div class="dt-line"></div>
<div class="dt-text">핵심 요약</div>
<div class="dt-line"></div>
</div>
<style>
.block-divider-text {
display: flex;
align-items: center;
gap: 16px;
padding: 8px 0;
}
.dt-line {
flex: 1;
height: 1px;
background: #cbd5e1;
}
.dt-text {
font-size: 13px;
font-weight: 600;
color: #64748b;
white-space: nowrap;
}
</style></div></body></html>

87
docs/block-tests/emphasis_highlight-strip.html Normal file
View File

@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>emphasis/highlight-strip</title>
<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head><body><div class="block-container"><!-- 강조 스트립: 3구간 색상 분류 바 -->
<!--
📋 highlight-strip
─────────────────
용도: 카테고리별 색상 분류 (예: 상용/범용/전문), 비교 카드 상단 헤더
슬롯: segments[] (각 구간에 label, color)
Figma 원본: 2-2_03 "상용 | 3rd Party(범용) | 전문·전용 S/W" 색상 바
-->
<div class="block-strip">
<div class="strip-seg" style="background: #6b7280; flex: 1">
상용
</div>
<div class="strip-seg" style="background: #2563eb; flex: 1.5">
3rd Party(범용)
</div>
<div class="strip-seg" style="background: #dc2626; flex: 1.5">
전문·전용 S/W
</div>
</div>
<style>
.block-strip {
display: flex;
border-radius: 6px;
overflow: hidden;
}
.strip-seg {
padding: 10px 16px;
color: #ffffff;
font-size: 14px;
font-weight: 700;
text-align: center;
white-space: nowrap;
}
</style></div></body></html>

107
docs/block-tests/emphasis_quote-big-mark.html Normal file
View File

@@ -0,0 +1,107 @@
<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>emphasis/quote-big-mark</title>
<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head><body><div class="block-container"><!-- 큰따옴표 장식 인용: ❝❞ 큰따옴표 + 인용 텍스트 -->
<!--
📋 quote-big-mark
─────────────────
용도: 문제 제기, 핵심 발언, 임팩트 있는 인용
슬롯: quote_text (필수), source (선택)
Figma 원본: DX와 BIM 슬라이드 상단 인용 박스 (큰따옴표 장식)
-->
<div class="block-quote-big">
<div class="qb-mark qb-open">❝</div>
<div class="qb-content">
<div class="qb-text">건설산업의 디지털 전환 논의에서 DX와 BIM이 개념적으로 명확히 정립되지 않은 채 혼용되어 사용되고 있으며, 이로 인해 BIM 기술의 도입을 DX의 완성으로 오인하는 인식이 확산되고 있다</div>
<div class="qb-source">— 건설산업 DX 분석 보고서</div>
</div>
<div class="qb-mark qb-close">❞</div>
</div>
<style>
.block-quote-big {
background: #f8fafc;
border-radius: 10px;
padding: 24px 28px;
position: relative;
border: 1px solid #e2e8f0;
}
.qb-mark {
font-size: 3rem;
color: #cbd5e1;
font-weight: 900;
line-height: 1;
position: absolute;
}
.qb-open {
top: 8px;
left: 12px;
}
.qb-close {
bottom: -8px;
right: 16px;
}
.qb-content {
padding: 10px 30px 0;
}
.qb-text {
font-size: 15px;
font-weight: 500;
color: #1e293b;
line-height: 1.8;
word-break: keep-all;
white-space: pre-line;
}
.qb-source {
font-size: 12px;
color: #64748b;
font-style: italic;
margin-top: 10px;
text-align: right;
}
</style></div></body></html>

85
docs/block-tests/emphasis_quote-left-border.html Normal file
View File

@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>emphasis/quote-left-border</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.block-container .block-section-title { margin: -20px -20px 0; border-radius: 8px 8px 0 0; overflow: hidden; }
</style>
</head>
<body><div class="block-container"><!-- 강조 인용 블록: 문제 제기, 핵심 메시지 -->
<div class="block-quote">
<div class="quote-text">BIM은 건설산업의 디지털전환을 수행하는 과정에서 가장 기초가 되는 일부분이다</div>
<div class="quote-source">건설산업 BIM 기본지침, 국토교통부, 2020</div>
</div>
<style>
.block-quote {
background: var(--color-bg-subtle);
border-left: var(--accent-border) solid var(--color-danger);
padding: var(--spacing-inner) var(--spacing-block);
border-radius: 0 var(--radius) var(--radius) 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.quote-text {
font-size: var(--font-body);
color: var(--color-text);
line-height: var(--line-height-ko);
font-weight: var(--weight-medium);
}
.quote-source {
font-size: var(--font-caption);
color: var(--color-text-light);
font-style: italic;
margin-top: var(--spacing-small);
}
</style></div></body>
</html>

92
docs/block-tests/emphasis_quote-question.html Normal file
View File

@@ -0,0 +1,92 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>emphasis/quote-question</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style>
</head>
<body><div class="block-container"><!-- 질문형 강조 박스: 큰 질문 텍스트 + 부연 설명 -->
<!--
📋 quote-question
─────────────────
용도: 독자에게 질문 던지기, 문제 인식 유도, 전환점 강조
슬롯: question (필수), description (선택)
Figma 원본: 2-3_05 "지금의 방식으로도 가능할까?"
-->
<div class="block-quote-q">
<div class="qq-question">지금의 상황 속에서도 앞으로도,
지속적으로 가능할까?</div>
<div class="qq-desc">지금의 방식으로 복잡해지는 건설 환경에 대응할 수 있을지, 근본적인 변화가 필요한 시점입니다.</div>
</div>
<style>
.block-quote-q {
background: linear-gradient(135deg, #f0f7ff 0%, #e8f1fb 100%);
border: 2px solid #b8d4f0;
border-radius: 12px;
padding: 28px 36px;
text-align: center;
}
.qq-question {
font-size: 22px;
font-weight: 800;
color: #1e3a5f;
line-height: 1.5;
word-break: keep-all;
}
.qq-desc {
font-size: 14px;
color: #4a6b8a;
margin-top: 10px;
line-height: 1.7;
word-break: keep-all;
}
</style></div></body>
</html>

95
docs/block-tests/emphasis_tab-label-row.html Normal file
View File

@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>emphasis/tab-label-row</title>
<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head><body><div class="block-container"><!-- 탭 라벨 행: 가로로 나열된 탭 버튼 형태 -->
<!--
📋 tab-label-row
─────────────────
용도: 카테고리 전환, 분류 표시, 선택된 항목 강조
슬롯: tabs[] (각 탭에 label, active, color)
Figma 원본: 2-3_02 상단 "건축과 인프라의 건설프로세스 특성" 탭, 2-2_01 탭
-->
<div class="block-tab-row">
<div class="tr-tab " style="">
제조
</div>
<div class="tr-tab " style="">
건축
</div>
<div class="tr-tab tr-active" style="background: #2563eb">
인프라/토목
</div>
</div>
<style>
.block-tab-row {
display: flex;
gap: 4px;
background: #f1f5f9;
border-radius: 8px;
padding: 4px;
}
.tr-tab {
flex: 1;
padding: 10px 16px;
text-align: center;
font-size: 14px;
font-weight: 600;
color: #64748b;
border-radius: 6px;
cursor: default;
}
.tr-active {
color: #ffffff;
font-weight: 700;
}
</style></div></body></html>

83
docs/block-tests/headers_section-header-bar.html Normal file
View File

@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="ko">
<head><meta charset="UTF-8"><title>headers/section-header-bar</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head>
<body><div class="block-container"><!-- 섹션 헤더 바: 파란 배경 + 흰 텍스트 제목 -->
<!--
📋 section-header-bar
─────────────────
용도: 섹션 시작부 강조 헤더. 전체 너비 파란 바 + 흰 대제목.
슬롯: title (필수), subtitle (선택)
Figma 원본: 2-2_01 "Eng. S/W의 구성", "Eng. S/W의 특성"
-->
<div class="block-section-bar">
<div class="sb-title">Eng. S/W의 구성</div>
<div class="sb-sub">Engineering Software Components</div>
</div>
<style>
.block-section-bar {
background: linear-gradient(135deg, #0d47a1 0%, #1565c0 100%);
border-radius: 6px;
padding: 14px 24px;
text-align: center;
}
.sb-title {
font-size: 18px;
font-weight: 800;
color: #ffffff;
line-height: 1.4;
}
.sb-sub {
font-size: 12px;
color: rgba(255,255,255,0.8);
margin-top: 4px;
}
</style></div></body></html>

123
docs/block-tests/headers_section-title-with-bg.html Normal file
View File

@@ -0,0 +1,123 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>headers/section-title-with-bg</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.block-container .block-section-title { margin: -20px -20px 0; border-radius: 8px 8px 0 0; overflow: hidden; }
</style>
</head>
<body><div class="block-container"><!-- 섹션 타이틀: 배경 헤더 위 영문+한글 타이틀 오버레이 -->
<!--
📋 section-title
─────────────────
용도: 자세히보기 페이지 상단, 배경 이미지 위에 타이틀 표시
슬롯: title_ko (필수), title_en (선택), breadcrumb (선택), bg_image (선택)
Figma 원본: 공통 > section_title + bg 컴포넌트
-->
<div class="block-section-title">
<img class="st-bg" src="../figma-assets/bg_header.png" alt="">
<div class="st-breadcrumb">건설산업에서의 디지털전환 › BIM</div>
<div class="st-text">
<div class="st-en">Building Information Modeling</div>
<div class="st-ko">건설정보모델링(BIM)</div>
</div>
</div>
<style>
.block-section-title {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
}
.st-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.st-bg-default {
background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 50%, #4dc4ff 100%);
}
.st-breadcrumb {
position: absolute;
top: 18px;
left: 89px;
z-index: 5;
font-size: 13px;
color: rgba(255,255,255,0.7);
}
.st-text {
position: absolute;
bottom: 40px;
left: 89px;
z-index: 5;
}
.st-en {
font-size: 15px;
font-weight: var(--weight-normal, 400);
color: #ffffff;
opacity: 0.85;
margin-bottom: 4px;
}
.st-ko {
font-size: 35px;
font-weight: var(--weight-bold, 700);
color: #ffffff;
line-height: 1.3;
}
</style></div></body>
</html>

91
docs/block-tests/headers_topic-center.html Normal file
View File

@@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>headers/topic-center</title>
<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head><body><div class="block-container"><!-- 중앙 정렬 꼭지 헤더: 대제목 + 하단 설명 -->
<!--
📋 topic-center
─────────────────
용도: 단독 강조 꼭지, 페이지 중심 주제 선언
슬롯: title (필수), subtitle (선택), description (선택)
Figma 원본: 2-2_02 "디지털전환을 위한 S/W 필요성"
-->
<div class="block-topic-center">
<div class="tc-title">디지털전환을 위한
S/W 필요성</div>
<div class="tc-sub">Software Requirements for DX</div>
<div class="tc-desc">건설산업의 DX를 실현하기 위해서는 기존 상용 S/W의 한계를 넘어
전문·전용 소프트웨어의 개발과 도입이 필수적입니다.</div>
</div>
<style>
.block-topic-center {
text-align: center;
padding: 20px 40px;
}
.tc-title {
font-size: 26px;
font-weight: 900;
color: #1e293b;
line-height: 1.4;
word-break: keep-all;
}
.tc-sub {
font-size: 14px;
color: #2563eb;
font-weight: 600;
margin-top: 6px;
}
.tc-desc {
font-size: 15px;
color: #475569;
line-height: 1.7;
margin-top: 12px;
word-break: keep-all;
white-space: pre-line;
}
</style></div></body></html>

95
docs/block-tests/headers_topic-left-right.html Normal file
View File

@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>headers/topic-left-right</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.block-container .block-section-title { margin: -20px -20px 0; border-radius: 8px 8px 0 0; overflow: hidden; }
</style>
</head>
<body><div class="block-container"><!-- 꼭지 제목+설명: 좌측 질문/소제목 + 우측 설명 -->
<!--
📋 topic-header
─────────────────
용도: 각 꼭지의 시작부, 좌측에 파란 굵은 제목 + 우측에 본문 설명
슬롯: title (필수), description (필수)
비율: 좌 240px : 우 나머지
Figma 원본: sub_제목,내용 (742x68~78)
-->
<div class="block-topic-header">
<div class="th-title">단순 BIM의 적용이
D/X가 아닙니다</div>
<div class="th-desc">BIM은 건설산업의 디지털전환을 수행하는 과정에서 가장 기초가 되는 일부분임을 인지하는 것이 매우 중요합니다.</div>
</div>
<style>
.block-topic-header {
display: flex;
gap: 20px;
padding: 12px 0;
}
.th-title {
width: 240px;
flex-shrink: 0;
font-size: 24px;
font-weight: var(--weight-bold, 700);
color: var(--color-accent-deep, #004cbe);
line-height: 1.4;
word-break: keep-all;
}
.th-desc {
flex: 1;
font-size: 16px;
font-weight: var(--weight-normal, 400);
color: var(--color-text, #000000);
line-height: 1.7;
word-break: keep-all;
}
</style></div></body>
</html>

105
docs/block-tests/headers_topic-numbered.html Normal file
View File

@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>headers/topic-numbered</title>
<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head><body><div class="block-container"><!-- 번호 꼭지 헤더: 번호 원형 + 제목 + 구분선 + 설명 -->
<!--
📋 topic-numbered
─────────────────
용도: 순서가 있는 꼭지 시작, 단계별 섹션 헤더
슬롯: number, title, description (선택), color (선택)
topic-left-right와 다른 점: 좌우 배치가 아닌 번호+세로 배치
-->
<div class="block-topic-num">
<div class="tn-header">
<div class="tn-number" style="background: #2563eb">1</div>
<div class="tn-title">건설산업의 디지털전환(DX)</div>
</div>
<div class="tn-divider" style="background: #2563eb"></div>
<div class="tn-desc">건설산업은 디지털 기술의 발전에 따라 빠르게 변화하고 있으며, 생산성 향상과 안전성 강화를 목표로 디지털전환이 가속화되고 있습니다.</div>
</div>
<style>
.block-topic-num {
padding: 8px 0;
}
.tn-header {
display: flex;
align-items: center;
gap: 12px;
}
.tn-number {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 16px;
font-weight: 800;
flex-shrink: 0;
}
.tn-title {
font-size: 20px;
font-weight: 800;
color: #1e293b;
}
.tn-divider {
height: 2px;
margin: 8px 0 10px;
border-radius: 1px;
opacity: 0.3;
}
.tn-desc {
font-size: 15px;
color: #475569;
line-height: 1.7;
white-space: pre-line;
word-break: keep-all;
}
</style></div></body></html>

120
docs/block-tests/image-row.html Normal file
View File

@@ -0,0 +1,120 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>블록 테스트: image-row</title>
<style>
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body {
font-family: "Pretendard Variable", "Noto Sans KR", sans-serif;
background: #e8ecf0;
display: flex;
justify-content: center;
padding: 30px;
margin: 0;
}
.block-container {
width: 920px;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.block-container .block-section-title {
margin: -20px -20px 0;
border-radius: 8px 8px 0 0;
overflow: hidden;
}
</style>
</head>
<body>
<div class="block-container">
<!-- 이미지 행: 2~4장 이미지 나란히 -->
<!--
📋 image-row
─────────────────
용도: 시공 사진, 근거 자료, 현장 이미지 나란히 배치
슬롯: images[] 배열 (각 이미지에 src, alt, caption)
Figma 원본: 2-1_02 > image grid (460x354 x 2)
-->
<div class="block-image-row" style="--ir-count: 2">
<div class="ir-item">
<img src="figma-assets/image_grid_left.png" alt="현장1">
</div>
<div class="ir-item">
<img src="figma-assets/image_grid_right.png" alt="현장2">
</div>
</div>
<style>
.block-image-row {
display: grid;
grid-template-columns: repeat(var(--ir-count, 2), 1fr);
gap: 0;
}
.ir-item {
overflow: hidden;
}
.ir-item img {
width: 100%;
height: 354px;
object-fit: cover;
display: block;
}
.ir-caption {
font-size: 11px;
color: var(--color-text-light, #94a3b8);
text-align: center;
padding: 4px;
}
</style>
</div>
</body>
</html>

108
docs/block-tests/media_image-before-after.html Normal file
View File

@@ -0,0 +1,108 @@
<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>media/image-before-after</title>
<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head><body><div class="block-container"><!-- Before/After 이미지: 좌측 Before + 우측 After + 화살표 -->
<!--
📋 image-before-after
─────────────────
용도: 변화 전후 비교, 공정 전후, 디지털 전환 전후
슬롯: before_src, before_label, after_src, after_label, caption (선택)
-->
<div class="block-ba">
<div class="ba-item">
<div class="ba-label ba-before">기존 방식</div>
<img src="../figma-assets/card_img_construction.png" alt="before">
</div>
<div class="ba-arrow">→</div>
<div class="ba-item">
<div class="ba-label ba-after">DX 적용 후</div>
<img src="../figma-assets/card_img_design.png" alt="after">
</div>
</div>
<div class="ba-caption">건설 현장의 디지털 전환 전후 비교</div>
<style>
.block-ba {
display: flex;
gap: 12px;
align-items: center;
}
.ba-item {
flex: 1;
border-radius: 8px;
overflow: hidden;
border: 1px solid #e2e8f0;
}
.ba-label {
padding: 6px 14px;
font-size: 13px;
font-weight: 700;
text-align: center;
color: #ffffff;
}
.ba-before { background: #6b7280; }
.ba-after { background: #2563eb; }
.ba-item img {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}
.ba-arrow {
font-size: 2rem;
color: #2563eb;
font-weight: 900;
flex-shrink: 0;
}
.ba-caption {
font-size: 12px;
color: #64748b;
text-align: center;
margin-top: 8px;
}
</style></div></body></html>

80
docs/block-tests/media_image-full-caption.html Normal file
View File

@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>media/image-full-caption</title>
<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head><body><div class="block-container"><!-- 전체 너비 이미지 + 캡션 -->
<!--
📋 image-full-caption
─────────────────
용도: 핵심 도표, 대형 다이어그램, 전경 사진을 전체 너비로 표시
슬롯: src (필수), alt (선택), caption (선택)
Figma 원본: 2-3_05 하단 전경 사진, 2-3_03 하단 항공 사진
-->
<div class="block-img-full">
<img src="../figma-assets/image_grid_left.png" alt="건설 현장 전경">
<div class="if-caption">[사진] 인프라 건설 현장 전경 — 디지털 전환의 현장 적용</div>
</div>
<style>
.block-img-full {
width: 100%;
border-radius: 8px;
overflow: hidden;
}
.block-img-full img {
width: 100%;
height: auto;
display: block;
}
.if-caption {
font-size: 12px;
color: #64748b;
text-align: center;
padding: 6px;
background: #f8fafc;
}
</style></div></body></html>

111
docs/block-tests/media_image-grid-2x2.html Normal file
View File

@@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>media/image-grid-2x2</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style>
</head>
<body><div class="block-container"><!-- 이미지 2x2 그리드: 4장 이미지 격자 배치 -->
<!--
📋 image-grid-2x2
─────────────────
용도: 현장 사진 4장, 참고 이미지 4장, 사례 이미지 갤러리
슬롯: images[] (4개, 각각 src, alt, caption)
Figma 원본: 2-1_03 GIS 항공/위성/현장 사진
-->
<div class="block-img-2x2">
<div class="ig-item">
<img src="../figma-assets/image_grid_left.png" alt="현장1">
<div class="ig-caption">항공측량 데이터</div>
</div>
<div class="ig-item">
<img src="../figma-assets/image_grid_right.png" alt="현장2">
<div class="ig-caption">시공 현장</div>
</div>
<div class="ig-item">
<img src="../figma-assets/card_img_design.png" alt="설계">
<div class="ig-caption">3D 지형 모델</div>
</div>
<div class="ig-item">
<img src="../figma-assets/card_img_construction.png" alt="시공">
<div class="ig-caption">시공 BIM 모델</div>
</div>
</div>
<style>
.block-img-2x2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.ig-item {
overflow: hidden;
border-radius: 6px;
}
.ig-item img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}
.ig-caption {
font-size: 11px;
color: #64748b;
text-align: center;
padding: 4px;
background: #f8f9fb;
}
</style></div></body>
</html>

100
docs/block-tests/media_image-row-2col.html Normal file
View File

@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>media/image-row-2col</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.block-container .block-section-title { margin: -20px -20px 0; border-radius: 8px 8px 0 0; overflow: hidden; }
</style>
</head>
<body><div class="block-container"><!-- 이미지 행: 2~4장 이미지 나란히 -->
<!--
📋 image-row
─────────────────
용도: 시공 사진, 근거 자료, 현장 이미지 나란히 배치
슬롯: images[] 배열 (각 이미지에 src, alt, caption)
Figma 원본: 2-1_02 > image grid (460x354 x 2)
-->
<div class="block-image-row" style="--ir-count: 2">
<div class="ir-item">
<img src="../figma-assets/image_grid_left.png" alt="시공 현장 1">
</div>
<div class="ir-item">
<img src="../figma-assets/image_grid_right.png" alt="시공 현장 2">
</div>
</div>
<style>
.block-image-row {
display: grid;
grid-template-columns: repeat(var(--ir-count, 2), 1fr);
gap: 0;
}
.ir-item {
overflow: hidden;
}
.ir-item img {
width: 100%;
height: 354px;
object-fit: cover;
display: block;
}
.ir-caption {
font-size: 11px;
color: var(--color-text-light, #94a3b8);
text-align: center;
padding: 4px;
}
</style></div></body>
</html>

130
docs/block-tests/media_image-side-text.html Normal file
View File

@@ -0,0 +1,130 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>media/image-side-text</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style>
</head>
<body><div class="block-container"><!-- 이미지+텍스트 가로 배치: 좌측 이미지 + 우측 텍스트 -->
<!--
📋 image-side-text
─────────────────
용도: 이미지에 대한 설명, 제품/시스템 소개, 참고 자료 설명
슬롯: image_src, image_alt, title, description, bullets[]
Figma 원본: 2-2_01 하단 이미지+텍스트 영역
-->
<div class="block-img-side">
<div class="is-image">
<img src="../figma-assets/card_img_design.png" alt="3D 지형 모델">
</div>
<div class="is-text">
<div class="is-title">고도화된 BIM 설계</div>
<div class="is-desc">최첨단 디지털트윈 기술을 활용하여 시뮬레이션 분석 및 성능평가를 수행합니다.</div>
<ul class="is-bullets">
<li>3D 지형 모델 기반 설계</li>
<li>시뮬레이션 분석 & 성능평가</li>
<li>지속가능한 인프라 개발</li>
</ul>
</div>
</div>
<style>
.block-img-side {
display: flex;
gap: 24px;
align-items: flex-start;
}
.is-image {
flex-shrink: 0;
width: 320px;
border-radius: 8px;
overflow: hidden;
}
.is-image img {
width: 100%;
height: auto;
display: block;
}
.is-text {
flex: 1;
padding-top: 4px;
}
.is-title {
font-size: 18px;
font-weight: 700;
color: #1e293b;
margin-bottom: 8px;
line-height: 1.4;
}
.is-desc {
font-size: 14px;
color: #444;
line-height: 1.7;
word-break: keep-all;
margin-bottom: 10px;
}
.is-bullets {
list-style: disc;
padding-left: 18px;
font-size: 13px;
color: #333;
line-height: 1.7;
}
.is-bullets li {
margin-bottom: 4px;
}
</style></div></body>
</html>

105
docs/block-tests/quote-block.html Normal file
View File

@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>블록 테스트: quote-block</title>
<style>
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body {
font-family: "Pretendard Variable", "Noto Sans KR", sans-serif;
background: #e8ecf0;
display: flex;
justify-content: center;
padding: 30px;
margin: 0;
}
.block-container {
width: 920px;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.block-container .block-section-title {
margin: -20px -20px 0;
border-radius: 8px 8px 0 0;
overflow: hidden;
}
</style>
</head>
<body>
<div class="block-container">
<!-- 강조 인용 블록: 문제 제기, 핵심 메시지 -->
<div class="block-quote">
<div class="quote-text">BIM은 건설산업의 디지털전환을 수행하는 과정에서 가장 기초가 되는 일부분이다</div>
<div class="quote-source">건설산업 BIM 기본지침, 국토교통부, 2020</div>
</div>
<style>
.block-quote {
background: var(--color-bg-subtle);
border-left: var(--accent-border) solid var(--color-danger);
padding: var(--spacing-inner) var(--spacing-block);
border-radius: 0 var(--radius) var(--radius) 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.quote-text {
font-size: var(--font-body);
color: var(--color-text);
line-height: var(--line-height-ko);
font-weight: var(--weight-medium);
}
.quote-source {
font-size: var(--font-caption);
color: var(--color-text-light);
font-style: italic;
margin-top: var(--spacing-small);
}
</style>
</div>
</body>
</html>

143
docs/block-tests/section-title.html Normal file
View File

@@ -0,0 +1,143 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>블록 테스트: section-title</title>
<style>
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body {
font-family: "Pretendard Variable", "Noto Sans KR", sans-serif;
background: #e8ecf0;
display: flex;
justify-content: center;
padding: 30px;
margin: 0;
}
.block-container {
width: 920px;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.block-container .block-section-title {
margin: -20px -20px 0;
border-radius: 8px 8px 0 0;
overflow: hidden;
}
</style>
</head>
<body>
<div class="block-container">
<!-- 섹션 타이틀: 배경 헤더 위 영문+한글 타이틀 오버레이 -->
<!--
📋 section-title
─────────────────
용도: 자세히보기 페이지 상단, 배경 이미지 위에 타이틀 표시
슬롯: title_ko (필수), title_en (선택), breadcrumb (선택), bg_image (선택)
Figma 원본: 공통 > section_title + bg 컴포넌트
-->
<div class="block-section-title">
<img class="st-bg" src="figma-assets/bg_header.png" alt="">
<div class="st-breadcrumb">건설산업에서의 디지털전환 › BIM</div>
<div class="st-text">
<div class="st-en">Building Information Modeling</div>
<div class="st-ko">건설정보모델링(BIM)</div>
</div>
</div>
<style>
.block-section-title {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
}
.st-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.st-bg-default {
background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 50%, #4dc4ff 100%);
}
.st-breadcrumb {
position: absolute;
top: 18px;
left: 89px;
z-index: 5;
font-size: 13px;
color: rgba(255,255,255,0.7);
}
.st-text {
position: absolute;
bottom: 40px;
left: 89px;
z-index: 5;
}
.st-en {
font-size: 15px;
font-weight: var(--weight-normal, 400);
color: #ffffff;
opacity: 0.85;
margin-bottom: 4px;
}
.st-ko {
font-size: 35px;
font-weight: var(--weight-bold, 700);
color: #ffffff;
line-height: 1.3;
}
</style>
</div>
</body>
</html>

141
docs/block-tests/tables_compare-2col-split.html Normal file
View File

@@ -0,0 +1,141 @@
<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>tables/compare-2col-split</title>
<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head><body><div class="block-container"><!-- 2단 분할 비교: 좌측 GIS / 우측 BIM 같은 상세 비교 -->
<!--
📋 compare-2col-split
─────────────────
용도: 두 개념/기술의 상세 항목별 비교 (좌우 나란히, 중앙 기준 라벨)
슬롯: left_title, right_title, rows[] (각 행에 criteria, left, right)
Figma 원본: 2-3_03 GIS vs BIM 비교 (개념/분석/도면/발전 등)
-->
<div class="block-split-compare">
<div class="sc-header">
<div class="sc-h-left">GIS</div>
<div class="sc-h-center">구분</div>
<div class="sc-h-right">BIM</div>
</div>
<div class="sc-row sc-row-odd">
<div class="sc-left">지리적 데이터를
공간 분석하여 시각적 표현</div>
<div class="sc-center">개념</div>
<div class="sc-right">3D 모델 기반
건설 정보 통합 관리</div>
</div>
<div class="sc-row ">
<div class="sc-left">Surface Shape 분석
지형/지질 해석</div>
<div class="sc-center">분석</div>
<div class="sc-right">Object Shape 분석
구조/설비 해석</div>
</div>
<div class="sc-row sc-row-odd">
<div class="sc-left">GIS, 지도, 배치도</div>
<div class="sc-center">도면</div>
<div class="sc-right">CAD, BIM 모델</div>
</div>
<div class="sc-row ">
<div class="sc-left">GIS ↔ SPCC</div>
<div class="sc-center">발전</div>
<div class="sc-right">CAD → BIM</div>
</div>
</div>
<style>
.block-split-compare {
border: 1px solid #e2e8f0;
border-radius: 8px;
overflow: hidden;
}
.sc-header {
display: grid;
grid-template-columns: 1fr 100px 1fr;
background: linear-gradient(135deg, #0d47a1, #1565c0);
color: #ffffff;
font-weight: 700;
font-size: 15px;
text-align: center;
}
.sc-h-left, .sc-h-right, .sc-h-center {
padding: 12px;
}
.sc-h-center {
background: rgba(0,0,0,0.15);
font-size: 13px;
}
.sc-row {
display: grid;
grid-template-columns: 1fr 100px 1fr;
border-top: 1px solid #e2e8f0;
}
.sc-row-odd {
background: #f8fafc;
}
.sc-left, .sc-right {
padding: 10px 14px;
font-size: 13px;
line-height: 1.7;
color: #334155;
white-space: pre-line;
}
.sc-center {
padding: 10px 8px;
font-size: 12px;
font-weight: 700;
color: #1565c0;
text-align: center;
background: #f0f7ff;
border-left: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0;
}
</style></div></body></html>

219
docs/block-tests/tables_compare-3col-badge.html Normal file
View File

@@ -0,0 +1,219 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>tables/compare-3col-badge</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.block-container .block-section-title { margin: -20px -20px 0; border-radius: 8px 8px 0 0; overflow: hidden; }
</style>
</head>
<body><div class="block-container"><!-- 비교 테이블: BIM vs DX 스타일 3단 테이블 -->
<!--
📋 comparison-table
─────────────────
용도: 다항목 비교 (좌측 A | 중앙 기준 | 우측 B)
슬롯: headers[] (3개), rows[][] (각 행 3칸)
Figma 원본: 2-1_02 > BIM VS D/X 테이블
특징: 중앙 칼럼에 파란 그라데이션 배지, 좌우 불릿 대비
-->
<div class="block-table-figma">
<table>
<thead>
<tr>
<th class="th-left">
BIM
</th>
<th class="th-center">
<span class="th-badge">VS</span>
</th>
<th class="th-right">
D/X
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="td-left">• Only 3D</td>
<td class="td-center">BIM · D/X</td>
<td class="td-right">• BIM ≪ D/X (ENG. + Management 포함)</td>
</tr>
<tr>
<td class="td-left">• 모델 제작용 상용 S/W
(Civil 3D, Revit, Navisworks)</td>
<td class="td-center">S/W</td>
<td class="td-right">• 제작 및 운영(상용 + 전용 40~80개)
[Rhino, Sketchup, Blender...]</td>
</tr>
<tr>
<td class="td-left">• 기존 2D 설계방식 유지</td>
<td class="td-center">프로세스</td>
<td class="td-right">• 근본적 문제의식을 통한 개선</td>
</tr>
<tr>
<td class="td-left">• 3D 모델 중심
• 기존 성과품 유지</td>
<td class="td-center">성과물</td>
<td class="td-right">• 공학 정보 및 콘텐츠 연계에 집중
• 도면, 수량, 시공계획 등 일식</td>
</tr>
<tr>
<td class="td-left">• 3D 모델에 의한 일반적 이해 향상</td>
<td class="td-center">활용</td>
<td class="td-right">• 설계/시공의 혁신(개념의 재정립)</td>
</tr>
<tr>
<td class="td-left">• (설계/시공/운영) 분야별 단절</td>
<td class="td-center">확장성</td>
<td class="td-right">• 전 생애주기 활용 시스템</td>
</tr>
</tbody>
</table>
</div>
<style>
.block-table-figma {
overflow: auto;
}
.block-table-figma table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
line-height: 1.7;
}
/* 헤더 */
.block-table-figma thead th {
padding: 14px 12px;
font-size: 16px;
font-weight: 700;
border-bottom: 2px solid #e8edf2;
}
.th-left {
text-align: center;
color: #6bcdff;
}
.th-center {
text-align: center;
width: 120px;
}
.th-badge {
display: inline-block;
background: linear-gradient(135deg, #006eff 0%, #00aaff 100%);
color: #ffffff;
font-size: 15px;
font-weight: 700;
padding: 8px 28px;
border-radius: 25px;
}
.th-right {
text-align: center;
color: #006eff;
}
/* 본문 */
.block-table-figma tbody td {
padding: 10px 14px;
border-bottom: 1px solid #f0f2f5;
vertical-align: middle;
}
.td-left {
text-align: center;
color: #444;
}
.td-center {
text-align: center;
font-weight: 700;
color: #333;
background: #f6f8fb;
font-size: 13px;
}
.td-right {
text-align: center;
color: #444;
}
.block-table-figma tbody tr:hover {
background: #fafbfd;
}
</style></div></body>
</html>

154
docs/block-tests/tables_table-simple-striped.html Normal file
View File

@@ -0,0 +1,154 @@
<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>tables/table-simple-striped</title>
<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head><body><div class="block-container"><!-- 심플 줄무늬 테이블: 범용 데이터 테이블 -->
<!--
📋 table-simple-striped
─────────────────
용도: 스펙, 수치, 일정, 항목별 데이터 나열
슬롯: headers[], rows[][]
compare-3col-badge와 다른 점: VS 배지 없음, 범용 데이터용
-->
<div class="block-table-striped">
<table>
<thead>
<tr>
<th>구분</th>
<th>현재</th>
<th>목표</th>
<th>비고</th>
</tr>
</thead>
<tbody>
<tr>
<td>BIM 적용률</td>
<td>30%</td>
<td>100%</td>
<td>2025 목표</td>
</tr>
<tr>
<td>디지털 전환 수준</td>
<td>초기</td>
<td>고도화</td>
<td>단계적 추진</td>
</tr>
<tr>
<td>전문 인력</td>
<td>50명</td>
<td>220명+</td>
<td>IT+CIVIL</td>
</tr>
<tr>
<td>자체 S/W</td>
<td>5개</td>
<td>80개+</td>
<td>지속 개발</td>
</tr>
</tbody>
</table>
</div>
<style>
.block-table-striped table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
line-height: 1.7;
}
.block-table-striped thead th {
background: #1e293b;
color: #ffffff;
font-weight: 700;
padding: 10px 14px;
text-align: left;
font-size: 13px;
}
.block-table-striped tbody td {
padding: 9px 14px;
border-bottom: 1px solid #e2e8f0;
white-space: pre-line;
color: #334155;
}
.block-table-striped tbody tr:nth-child(even) {
background: #f8fafc;
}
.block-table-striped tbody td:first-child {
font-weight: 600;
color: #1e293b;
}
</style></div></body></html>

115
docs/block-tests/topic-header.html Normal file
View File

@@ -0,0 +1,115 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>블록 테스트: topic-header</title>
<style>
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body {
font-family: "Pretendard Variable", "Noto Sans KR", sans-serif;
background: #e8ecf0;
display: flex;
justify-content: center;
padding: 30px;
margin: 0;
}
.block-container {
width: 920px;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.block-container .block-section-title {
margin: -20px -20px 0;
border-radius: 8px 8px 0 0;
overflow: hidden;
}
</style>
</head>
<body>
<div class="block-container">
<!-- 꼭지 제목+설명: 좌측 질문/소제목 + 우측 설명 -->
<!--
📋 topic-header
─────────────────
용도: 각 꼭지의 시작부, 좌측에 파란 굵은 제목 + 우측에 본문 설명
슬롯: title (필수), description (필수)
비율: 좌 240px : 우 나머지
Figma 원본: sub_제목,내용 (742x68~78)
-->
<div class="block-topic-header">
<div class="th-title">단순 BIM의 적용이
D/X가 아닙니다</div>
<div class="th-desc">BIM은 건설산업의 디지털전환을 수행하는 과정에서 가장 기초가 되는 일부분임을 인지하는 것이 매우 중요합니다.</div>
</div>
<style>
.block-topic-header {
display: flex;
gap: 20px;
padding: 12px 0;
}
.th-title {
width: 240px;
flex-shrink: 0;
font-size: 24px;
font-weight: var(--weight-bold, 700);
color: var(--color-accent-deep, #004cbe);
line-height: 1.4;
word-break: keep-all;
}
.th-desc {
flex: 1;
font-size: 16px;
font-weight: var(--weight-normal, 400);
color: var(--color-text, #000000);
line-height: 1.7;
word-break: keep-all;
}
</style>
</div>
</body>
</html>

BIN
docs/block-tests/venn_premium_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

113
docs/block-tests/visuals_circle-gradient.html Normal file
View File

@@ -0,0 +1,113 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>visuals/circle-gradient</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.block-container .block-section-title { margin: -20px -20px 0; border-radius: 8px 8px 0 0; overflow: hidden; }
</style>
</head>
<body><div class="block-container"><!-- 원형 라벨: CSS 그라데이션 원 + 중앙 텍스트 -->
<!--
📋 circle-label
─────────────────
용도: 섹션 전환점, 핵심 키워드 강조, 시각적 구분자
슬롯: label (필수), sub_label (선택)
Figma 원본: 2-1_02 > Group 1171281590 (190x190)
-->
<div class="block-circle-label">
<div class="cl-outer">
<div class="cl-inner">
<div class="cl-text">단계별
BIM의 활용</div>
</div>
</div>
</div>
<style>
.block-circle-label {
display: flex;
justify-content: center;
padding: 20px 0;
}
.cl-outer {
width: 190px;
height: 190px;
border-radius: 50%;
background: linear-gradient(180deg, #3db8ff 0%, #006aff 100%);
box-shadow: 0 0 30px rgba(0, 106, 255, 0.25), 0 0 60px rgba(0, 106, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
}
.cl-inner {
width: 170px;
height: 170px;
border-radius: 50%;
background: linear-gradient(180deg, #4dc4ff 0%, #0080ff 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #ffffff;
text-align: center;
}
.cl-text {
font-size: 20px;
font-weight: var(--weight-bold, 700);
line-height: 1.4;
}
.cl-sub {
font-size: 12px;
opacity: 0.8;
margin-top: 4px;
}
</style></div></body>
</html>

131
docs/block-tests/visuals_compare-pill-pair.html Normal file
View File

@@ -0,0 +1,131 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>visuals/compare-pill-pair</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style>
</head>
<body><div class="block-container"><!-- 비교 박스: 이중 테두리 둥근 박스 2개 + VS -->
<!--
📋 compare-pill-pair
─────────────────
용도: 2개 개념 시각적 대비 (비교 테이블 위 헤더)
슬롯: left_label, left_sub, right_label, right_sub
Figma 원본: 이중 테두리 (바깥 얇은 선 + 안쪽 둥근 박스)
-->
<div class="block-compare-pill">
<div class="cp-item">
<div class="cp-outer">
<div class="cp-inner">
<div class="cp-label">디지털 기술을 활용한
협업 프로세스</div>
</div>
</div>
</div>
<div class="cp-vs">VS</div>
<div class="cp-item">
<div class="cp-outer">
<div class="cp-inner">
<div class="cp-label">시설물의 전 생애주기 동안
정보의 생성 및 관리</div>
</div>
</div>
</div>
</div>
<style>
.block-compare-pill {
display: flex;
gap: 20px;
align-items: center;
justify-content: center;
padding: 20px 0;
}
.cp-item {
width: 350px;
}
.cp-outer {
border: 2px solid #a8d8f0;
border-radius: 60px;
padding: 6px;
background: transparent;
}
.cp-inner {
border: 2px solid #7ec8f0;
border-radius: 55px;
background: linear-gradient(135deg, #e8f4fd 0%, #d6edfa 100%);
padding: 18px 30px;
text-align: center;
}
.cp-label {
font-size: 18px;
font-weight: 800;
color: #0088cc;
line-height: 1.4;
white-space: pre-line;
}
.cp-sub {
font-size: 12px;
color: #0088cc;
margin-top: 4px;
line-height: 1.5;
white-space: pre-line;
font-weight: 500;
}
.cp-vs {
font-size: 24px;
font-weight: 800;
color: #333;
flex-shrink: 0;
}
</style></div></body>
</html>

104
docs/block-tests/visuals_flow-arrow-horizontal.html Normal file
View File

@@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>visuals/flow-arrow-horizontal</title>
<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head><body><div class="block-container"><!-- 가로 흐름도: 좌→우 화살표로 연결된 단계 (SVG) -->
<!--
📋 flow-arrow-horizontal
─────────────────
용도: 발전 과정, 기술 진화, 전환 흐름 (A → B → C)
슬롯: steps[] (각 단계에 label, sub)
Figma 원본: 2-3_03 "GIS ↔ SPCC → 토공 → ..." / 2-2_04 개발 패러다임
-->
<div class="block-flow-h">
<svg viewBox="0 0 720 80" width="100%" xmlns="http://www.w3.org/2000/svg" font-family="Pretendard Variable, sans-serif">
<rect x="10" y="10" width="120" height="50" rx="25" fill="#059669" opacity="0.9" />
<text x="70" y="32" text-anchor="middle" fill="white" font-size="13" font-weight="700">GIS</text>
<polygon points="135,35 150,35 145,28" fill="#94a3b8" />
<polygon points="135,35 150,35 145,42" fill="#94a3b8" />
<rect x="190" y="10" width="120" height="50" rx="25" fill="#2563eb" opacity="0.9" />
<text x="250" y="32" text-anchor="middle" fill="white" font-size="13" font-weight="700">SPCC</text>
<polygon points="315,35 330,35 325,28" fill="#94a3b8" />
<polygon points="315,35 330,35 325,42" fill="#94a3b8" />
<rect x="370" y="10" width="120" height="50" rx="25" fill="#7c3aed" opacity="0.9" />
<text x="430" y="32" text-anchor="middle" fill="white" font-size="13" font-weight="700">토공</text>
<polygon points="495,35 510,35 505,28" fill="#94a3b8" />
<polygon points="495,35 510,35 505,42" fill="#94a3b8" />
<rect x="550" y="10" width="120" height="50" rx="25" fill="#dc2626" opacity="0.9" />
<text x="610" y="32" text-anchor="middle" fill="white" font-size="13" font-weight="700">BIM</text>
</svg>
</div>
<style>
.block-flow-h {
padding: 10px 0;
overflow-x: auto;
}
.block-flow-h svg {
min-width: 400px;
}
</style></div></body></html>

153
docs/block-tests/visuals_keyword-circle-row.html Normal file
View File

@@ -0,0 +1,153 @@
<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>visuals/keyword-circle-row</title>
<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head><body><div class="block-container"><!-- 키워드 원형 행: 원 안에 키워드 + 하단 설명 (SVG) -->
<!--
📋 keyword-circle-row
─────────────────
용도: 핵심 키워드를 원형으로 나열하며 각각 설명. 약어 풀이.
슬롯: keywords[] (각 항목에 letter, label, description, color)
Figma 원본: 2-3_03 G-S-I-M 약어 설명, 2-2_04 개발 조건 키워드
-->
<div class="block-kw-circles">
<div class="kw-item">
<svg viewBox="0 0 80 80" width="70" height="70" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="kwGrad1" cx="40%" cy="35%" r="60%">
<stop offset="0%" stop-color="#6ee7b7" />
<stop offset="100%" stop-color="#059669" />
</radialGradient>
</defs>
<circle cx="40" cy="40" r="38" fill="url(#kwGrad1)" />
<text x="40" y="44" text-anchor="middle" dominant-baseline="central" fill="white" font-size="28" font-weight="900" font-family="Pretendard Variable, sans-serif">G</text>
</svg>
<div class="kw-label">Geographic</div>
<div class="kw-desc">지리적 위치
공간 정보</div>
</div>
<div class="kw-item">
<svg viewBox="0 0 80 80" width="70" height="70" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="kwGrad2" cx="40%" cy="35%" r="60%">
<stop offset="0%" stop-color="#93c5fd" />
<stop offset="100%" stop-color="#2563eb" />
</radialGradient>
</defs>
<circle cx="40" cy="40" r="38" fill="url(#kwGrad2)" />
<text x="40" y="44" text-anchor="middle" dominant-baseline="central" fill="white" font-size="28" font-weight="900" font-family="Pretendard Variable, sans-serif">S</text>
</svg>
<div class="kw-label">Structure</div>
<div class="kw-desc">구조물
형상 정보</div>
</div>
<div class="kw-item">
<svg viewBox="0 0 80 80" width="70" height="70" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="kwGrad3" cx="40%" cy="35%" r="60%">
<stop offset="0%" stop-color="#c4b5fd" />
<stop offset="100%" stop-color="#7c3aed" />
</radialGradient>
</defs>
<circle cx="40" cy="40" r="38" fill="url(#kwGrad3)" />
<text x="40" y="44" text-anchor="middle" dominant-baseline="central" fill="white" font-size="28" font-weight="900" font-family="Pretendard Variable, sans-serif">I</text>
</svg>
<div class="kw-label">Information</div>
<div class="kw-desc">건설 정보
속성 데이터</div>
</div>
<div class="kw-item">
<svg viewBox="0 0 80 80" width="70" height="70" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="kwGrad4" cx="40%" cy="35%" r="60%">
<stop offset="0%" stop-color="#fca5a5" />
<stop offset="100%" stop-color="#dc2626" />
</radialGradient>
</defs>
<circle cx="40" cy="40" r="38" fill="url(#kwGrad4)" />
<text x="40" y="44" text-anchor="middle" dominant-baseline="central" fill="white" font-size="28" font-weight="900" font-family="Pretendard Variable, sans-serif">M</text>
</svg>
<div class="kw-label">Model</div>
<div class="kw-desc">3D 모델
통합 관리</div>
</div>
</div>
<style>
.block-kw-circles {
display: flex;
gap: 24px;
justify-content: center;
flex-wrap: wrap;
padding: 10px 0;
}
.kw-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 140px;
}
.kw-label {
font-size: 14px;
font-weight: 700;
color: #1e293b;
margin-top: 8px;
}
.kw-desc {
font-size: 12px;
color: #475569;
line-height: 1.5;
margin-top: 4px;
white-space: pre-line;
}
</style></div></body></html>

134
docs/block-tests/visuals_layer-diagram.html Normal file
View File

@@ -0,0 +1,134 @@
<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>visuals/layer-diagram</title>
<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head><body><div class="block-container"><!-- 레이어 다이어그램: 겹쳐진 레이어 표현 (SVG) -->
<!--
📋 layer-diagram
─────────────────
용도: GIS/BIM/DT 레이어 구조, 기술 스택, 계층 구조 시각화
슬롯: layers[] (각 레이어에 label, color), title (선택)
Figma 원본: 1장_1-1_미래 "GIS+BIM+DT 레이어 시각화"
-->
<div class="block-layer-diag">
<div class="ld-title">건설산업 DX 기술 레이어</div>
<svg viewBox="0 0 400 280" width="100%" xmlns="http://www.w3.org/2000/svg" font-family="Pretendard Variable, sans-serif">
<defs>
<linearGradient id="layerGrad1" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#7c3aed" stop-opacity="0.85" />
<stop offset="100%" stop-color="#7c3aed" stop-opacity="0.6" />
</linearGradient>
<linearGradient id="layerGrad2" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#2563eb" stop-opacity="0.85" />
<stop offset="100%" stop-color="#2563eb" stop-opacity="0.6" />
</linearGradient>
<linearGradient id="layerGrad3" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#059669" stop-opacity="0.85" />
<stop offset="100%" stop-color="#059669" stop-opacity="0.6" />
</linearGradient>
<linearGradient id="layerGrad4" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#475569" stop-opacity="0.85" />
<stop offset="100%" stop-color="#475569" stop-opacity="0.6" />
</linearGradient>
<filter id="layerShadow">
<feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity="0.15" />
</filter>
</defs>
<!-- 3D 효과: 사다리꼴 레이어 -->
<path d="M 40,185 L 360,185 L 340,225 L 60,225 Z"
fill="url(#layerGrad1)" filter="url(#layerShadow)" />
<text x="200" y="210" text-anchor="middle" fill="white" font-size="14" font-weight="700">Digital Twin (가상환경)</text>
<!-- 3D 효과: 사다리꼴 레이어 -->
<path d="M 55,130 L 345,130 L 325,170 L 75,170 Z"
fill="url(#layerGrad2)" filter="url(#layerShadow)" />
<text x="200" y="155" text-anchor="middle" fill="white" font-size="14" font-weight="700">BIM (건설정보모델링)</text>
<!-- 3D 효과: 사다리꼴 레이어 -->
<path d="M 70,75 L 330,75 L 310,115 L 90,115 Z"
fill="url(#layerGrad3)" filter="url(#layerShadow)" />
<text x="200" y="100" text-anchor="middle" fill="white" font-size="14" font-weight="700">GIS (공간정보시스템)</text>
<!-- 3D 효과: 사다리꼴 레이어 -->
<path d="M 85,20 L 315,20 L 295,60 L 105,60 Z"
fill="url(#layerGrad4)" filter="url(#layerShadow)" />
<text x="200" y="45" text-anchor="middle" fill="white" font-size="14" font-weight="700">실세계 인프라</text>
</svg>
</div>
<style>
.block-layer-diag {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 10px 0;
}
.ld-title {
font-size: 16px;
font-weight: 700;
color: #1e293b;
}
.block-layer-diag svg {
max-width: 400px;
}
</style></div></body></html>

142
docs/block-tests/visuals_process-horizontal.html Normal file
View File

@@ -0,0 +1,142 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>visuals/process-horizontal</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.block-container .block-section-title { margin: -20px -20px 0; border-radius: 8px 8px 0 0; overflow: hidden; }
</style>
</head>
<body><div class="block-container"><!-- 프로세스 블록: 가로 단계 흐름 -->
<div class="block-process">
<div class="process-step">
<div class="process-number">1</div>
<div class="process-title">요구사항 분석</div>
<div class="process-desc">목표 수립</div>
</div>
<div class="process-arrow">→</div>
<div class="process-step">
<div class="process-number">2</div>
<div class="process-title">S/W 개발</div>
<div class="process-desc">솔루션 개발</div>
</div>
<div class="process-arrow">→</div>
<div class="process-step">
<div class="process-number">3</div>
<div class="process-title">System 통합</div>
<div class="process-desc">데이터 통합</div>
</div>
<div class="process-arrow">→</div>
<div class="process-step">
<div class="process-number">4</div>
<div class="process-title">교육/피드백</div>
<div class="process-desc">지속 개선</div>
</div>
</div>
<style>
.block-process {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-small);
height: 100%;
}
.process-step {
flex: 1;
text-align: center;
padding: var(--spacing-inner);
background: var(--color-bg-subtle);
border: var(--border-width) solid var(--color-border);
border-radius: var(--radius);
}
.process-number {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--color-accent);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--weight-bold);
font-size: var(--font-body);
margin: 0 auto var(--spacing-small);
}
.process-title {
font-size: var(--font-body);
font-weight: var(--weight-bold);
color: var(--color-primary);
margin-bottom: 4px;
}
.process-desc {
font-size: var(--font-caption);
color: var(--color-text-secondary);
line-height: var(--line-height-ko);
}
.process-arrow {
font-size: 1.5rem;
color: var(--color-accent);
font-weight: var(--weight-bold);
flex-shrink: 0;
}
</style></div></body>
</html>

121
docs/block-tests/visuals_pyramid-hierarchy.html Normal file
View File

@@ -0,0 +1,121 @@
<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>visuals/pyramid-hierarchy</title>
<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head><body><div class="block-container"><!-- 피라미드 계층: 위에서 아래로 넓어지는 계층 구조 (SVG) -->
<!--
📋 pyramid-hierarchy
─────────────────
용도: 위계, 우선순위, 상위→하위 개념 (좁은→넓은)
슬롯: levels[] (상단부터, 각 레벨에 label, color)
-->
<div class="block-pyramid">
<svg viewBox="0 0 500 300" width="100%" xmlns="http://www.w3.org/2000/svg" font-family="Pretendard Variable, sans-serif">
<defs>
<linearGradient id="pyrGrad1" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#0d47a1" />
<stop offset="100%" stop-color="#0d47a1" stop-opacity="0.7" />
</linearGradient>
<linearGradient id="pyrGrad2" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#1565c0" />
<stop offset="100%" stop-color="#1565c0" stop-opacity="0.7" />
</linearGradient>
<linearGradient id="pyrGrad3" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#1976d2" />
<stop offset="100%" stop-color="#1976d2" stop-opacity="0.7" />
</linearGradient>
<linearGradient id="pyrGrad4" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#2196f3" />
<stop offset="100%" stop-color="#2196f3" stop-opacity="0.7" />
</linearGradient>
<filter id="pyrShadow">
<feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity="0.12" />
</filter>
</defs>
<rect x="190" y="10" width="120" height="50" rx="6" fill="url(#pyrGrad1)" filter="url(#pyrShadow)" />
<text x="250" y="40" text-anchor="middle" fill="white" font-size="14" font-weight="700">DX (디지털 전환)</text>
<rect x="135" y="75" width="230" height="50" rx="6" fill="url(#pyrGrad2)" filter="url(#pyrShadow)" />
<text x="250" y="105" text-anchor="middle" fill="white" font-size="14" font-weight="700">BIM + GIS + Digital Twin</text>
<rect x="80" y="140" width="340" height="50" rx="6" fill="url(#pyrGrad3)" filter="url(#pyrShadow)" />
<text x="250" y="170" text-anchor="middle" fill="white" font-size="14" font-weight="700">프로세스 혁신 + S/W 개발</text>
<rect x="25" y="205" width="450" height="50" rx="6" fill="url(#pyrGrad4)" filter="url(#pyrShadow)" />
<text x="250" y="235" text-anchor="middle" fill="white" font-size="14" font-weight="700">기반 인프라 + 인력 양성</text>
</svg>
</div>
<style>
.block-pyramid {
display: flex;
justify-content: center;
padding: 10px 0;
}
.block-pyramid svg {
max-width: 450px;
}
</style></div></body></html>

113
docs/block-tests/visuals_timeline-horizontal.html Normal file
View File

@@ -0,0 +1,113 @@
<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>visuals/timeline-horizontal</title>
<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head><body><div class="block-container"><!-- 가로 타임라인: 좌→우 시간축 + 마커 + 라벨 (SVG) -->
<!--
📋 timeline-horizontal
─────────────────
용도: 연도별 로드맵, 짧은 일정, 마일스톤 (가로 배치)
슬롯: events[] (각 이벤트에 year, title, color)
timeline-vertical과 다른 점: 가로 방향, 공간 효율적
-->
<div class="block-timeline-h">
<svg viewBox="0 0 680 100" width="100%" xmlns="http://www.w3.org/2000/svg" font-family="Pretendard Variable, sans-serif">
<!-- 가로 선 -->
<line x1="30" y1="40" x2="630" y2="40" stroke="#cbd5e1" stroke-width="2" />
<!-- 마커 -->
<circle cx="60" cy="40" r="12" fill="#059669" />
<circle cx="60" cy="40" r="5" fill="white" />
<!-- 연도 -->
<text x="60" y="22" text-anchor="middle" fill="#059669" font-size="12" font-weight="800">2020</text>
<!-- 제목 -->
<text x="60" y="65" text-anchor="middle" fill="#1e293b" font-size="12" font-weight="600">BIM 기본지침</text>
<!-- 마커 -->
<circle cx="220" cy="40" r="12" fill="#2563eb" />
<circle cx="220" cy="40" r="5" fill="white" />
<!-- 연도 -->
<text x="220" y="22" text-anchor="middle" fill="#2563eb" font-size="12" font-weight="800">2022</text>
<!-- 제목 -->
<text x="220" y="65" text-anchor="middle" fill="#1e293b" font-size="12" font-weight="600">스마트건설 방안</text>
<!-- 마커 -->
<circle cx="380" cy="40" r="12" fill="#7c3aed" />
<circle cx="380" cy="40" r="5" fill="white" />
<!-- 연도 -->
<text x="380" y="22" text-anchor="middle" fill="#7c3aed" font-size="12" font-weight="800">2023</text>
<!-- 제목 -->
<text x="380" y="65" text-anchor="middle" fill="#1e293b" font-size="12" font-weight="600">7차 기본계획</text>
<!-- 마커 -->
<circle cx="540" cy="40" r="12" fill="#dc2626" />
<circle cx="540" cy="40" r="5" fill="white" />
<!-- 연도 -->
<text x="540" y="22" text-anchor="middle" fill="#dc2626" font-size="12" font-weight="800">2025</text>
<!-- 제목 -->
<text x="540" y="65" text-anchor="middle" fill="#1e293b" font-size="12" font-weight="600">전면 BIM</text>
</svg>
</div>
<style>
.block-timeline-h {
padding: 10px 0;
overflow-x: auto;
}
.block-timeline-h svg {
min-width: 500px;
}
</style></div></body></html>

167
docs/block-tests/visuals_timeline-vertical.html Normal file
View File

@@ -0,0 +1,167 @@
<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>visuals/timeline-vertical</title>
<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head><body><div class="block-container"><!-- 세로 타임라인: 좌측 선 + 원형 마커 + 우측 내용 (SVG 마커) -->
<!--
📋 timeline-vertical
─────────────────
용도: 연혁, 정책 시행 일정, 로드맵, 연도별 사건
슬롯: events[] (각 이벤트에 year, title, description, color)
Figma 참고: 정책 로드맵, 건설 정책 추진현황
-->
<div class="block-timeline-v">
<div class="tv-event">
<div class="tv-marker-col">
<svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" fill="#059669" />
<circle cx="12" cy="12" r="5" fill="white" />
</svg>
<div class="tv-line" style="background: #059669"></div>
</div>
<div class="tv-content">
<div class="tv-year" style="color: #059669">2020</div>
<div class="tv-title">건설산업 BIM 기본지침</div>
<div class="tv-desc">BIM 도입의 법적 근거 마련</div>
</div>
</div>
<div class="tv-event">
<div class="tv-marker-col">
<svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" fill="#2563eb" />
<circle cx="12" cy="12" r="5" fill="white" />
</svg>
<div class="tv-line" style="background: #2563eb"></div>
</div>
<div class="tv-content">
<div class="tv-year" style="color: #2563eb">2022.07</div>
<div class="tv-title">스마트 건설 활성화 방안</div>
<div class="tv-desc">BIM 전면 도입 + 전문인력 양성</div>
</div>
</div>
<div class="tv-event">
<div class="tv-marker-col">
<svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" fill="#7c3aed" />
<circle cx="12" cy="12" r="5" fill="white" />
</svg>
<div class="tv-line" style="background: #7c3aed"></div>
</div>
<div class="tv-content">
<div class="tv-year" style="color: #7c3aed">2023.12</div>
<div class="tv-title">제7차 건설기술진흥 기본계획</div>
<div class="tv-desc">디지털 전환을 통한 스마트 건설 확산</div>
</div>
</div>
<div class="tv-event">
<div class="tv-marker-col">
<svg viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" fill="#dc2626" />
<circle cx="12" cy="12" r="5" fill="white" />
</svg>
</div>
<div class="tv-content">
<div class="tv-year" style="color: #dc2626">2025</div>
<div class="tv-title">전면 BIM 적용</div>
<div class="tv-desc">공공 건설사업 BIM 의무화 목표</div>
</div>
</div>
</div>
<style>
.block-timeline-v {
display: flex;
flex-direction: column;
gap: 0;
padding: 10px 0;
}
.tv-event {
display: flex;
gap: 14px;
}
.tv-marker-col {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
width: 24px;
}
.tv-line {
width: 2px;
flex: 1;
min-height: 20px;
opacity: 0.3;
border-radius: 1px;
}
.tv-content {
padding-bottom: 20px;
flex: 1;
}
.tv-year {
font-size: 13px;
font-weight: 800;
margin-bottom: 2px;
}
.tv-title {
font-size: 15px;
font-weight: 700;
color: #1e293b;
margin-bottom: 4px;
}
.tv-desc {
font-size: 13px;
color: #475569;
line-height: 1.7;
white-space: pre-line;
}
</style></div></body></html>

151
docs/block-tests/visuals_venn-2items-p2.html Normal file
View File

@@ -0,0 +1,151 @@
<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>venn-2items</title>
<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head><body><div class="block-container"><!-- 벤 다이어그램: SVG premium (N개 자동 배치) -->
<!--
📋 venn-diagram (P2-B: 동적 좌표 계산)
─────────────────
용도: 상위-하위 포함 관계, 기술 융합 구조
방식: renderer가 svg_calculator.prepare_venn_data()로 좌표 사전 계산
→ items[].cx, cy, r + outer_r, center_x, center_y 전달
Phase 1 fallback: outer_r이 없으면 3개 고정 좌표 사용
-->
<div class="block-venn-svg">
<svg viewBox="0 0 600.0 550.0" width="100%" xmlns="http://www.w3.org/2000/svg" font-family="Pretendard Variable, sans-serif">
<defs>
<linearGradient id="bgGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#dce3ea" />
<stop offset="100%" stop-color="#f0f2f5" />
</linearGradient>
<radialGradient id="blueOuter" cx="45%" cy="40%" r="55%">
<stop offset="0%" stop-color="#2979ff" />
<stop offset="40%" stop-color="#1565c0" />
<stop offset="100%" stop-color="#0d47a1" />
</radialGradient>
<radialGradient id="hlGrad" cx="35%" cy="25%" r="40%">
<stop offset="0%" stop-color="rgba(255,255,255,0.5)" />
<stop offset="100%" stop-color="rgba(255,255,255,0)" />
</radialGradient>
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="8" result="blur" />
<feMerge><feMergeNode in="blur" /><feMergeNode in="SourceGraphic" /></feMerge>
</filter>
<filter id="shadow">
<feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="rgba(0,0,0,0.3)" />
</filter>
<radialGradient id="itemGrad1" cx="35%" cy="30%" r="65%">
<stop offset="0%" stop-color="#10b98180" />
<stop offset="100%" stop-color="#10b981" />
</radialGradient>
<radialGradient id="itemGrad2" cx="35%" cy="30%" r="65%">
<stop offset="0%" stop-color="#3b82f680" />
<stop offset="100%" stop-color="#3b82f6" />
</radialGradient>
</defs>
<rect width="600.0" height="550.0" fill="url(#bgGrad)" />
<circle cx="300.0" cy="295.0" r="235.0" fill="url(#blueOuter)" filter="url(#shadow)" />
<circle cx="300.0" cy="295.0" r="225.0" fill="none" stroke="#4a90d9" stroke-width="1.5" opacity="0.4" />
<circle cx="300.0" cy="295.0" r="210.0" fill="none" stroke="#5a9de0" stroke-width="1" opacity="0.3" />
<circle cx="300.0" cy="295.0" r="195.0" fill="none" stroke="#6aabe6" stroke-width="0.8" opacity="0.25" />
<circle cx="300.0" cy="175.0" r="75.0" fill="url(#itemGrad1)" opacity="0.9" filter="url(#glow)" />
<circle cx="300.0" cy="175.0" r="75.0" fill="url(#hlGrad)" />
<text x="300.0" y="175.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="18" font-weight="700">BIM</text>
<circle cx="300.0" cy="415.0" r="75.0" fill="url(#itemGrad2)" opacity="0.9" filter="url(#glow)" />
<circle cx="300.0" cy="415.0" r="75.0" fill="url(#hlGrad)" />
<text x="300.0" y="415.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="18" font-weight="700">GIS</text>
<text x="300.0" y="95.0" text-anchor="middle" fill="#ffffff" font-size="13" font-weight="400" opacity="0.85">Digital Transformation</text>
<text x="300.0" y="120.0" text-anchor="middle" fill="#ffffff" font-size="24" font-weight="900">DX (2개)</text>
</svg>
<div class="venn-desc">2개 요소의 기술 융합 구조</div>
</div>
<style>
.block-venn-svg {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 10px 0;
flex-shrink: 1;
min-height: 0;
overflow: hidden;
}
.block-venn-svg svg {
max-width: 450px;
width: 100%;
height: auto;
flex-shrink: 1;
}
.venn-desc {
font-size: 14px;
color: #444;
text-align: center;
max-width: 450px;
line-height: 1.7;
word-break: keep-all;
}
</style></div></body></html>

161
docs/block-tests/visuals_venn-3items-p2.html Normal file
View File

@@ -0,0 +1,161 @@
<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>venn-3items</title>
<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head><body><div class="block-container"><!-- 벤 다이어그램: SVG premium (N개 자동 배치) -->
<!--
📋 venn-diagram (P2-B: 동적 좌표 계산)
─────────────────
용도: 상위-하위 포함 관계, 기술 융합 구조
방식: renderer가 svg_calculator.prepare_venn_data()로 좌표 사전 계산
→ items[].cx, cy, r + outer_r, center_x, center_y 전달
Phase 1 fallback: outer_r이 없으면 3개 고정 좌표 사용
-->
<div class="block-venn-svg">
<svg viewBox="0 0 600.0 550.0" width="100%" xmlns="http://www.w3.org/2000/svg" font-family="Pretendard Variable, sans-serif">
<defs>
<linearGradient id="bgGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#dce3ea" />
<stop offset="100%" stop-color="#f0f2f5" />
</linearGradient>
<radialGradient id="blueOuter" cx="45%" cy="40%" r="55%">
<stop offset="0%" stop-color="#2979ff" />
<stop offset="40%" stop-color="#1565c0" />
<stop offset="100%" stop-color="#0d47a1" />
</radialGradient>
<radialGradient id="hlGrad" cx="35%" cy="25%" r="40%">
<stop offset="0%" stop-color="rgba(255,255,255,0.5)" />
<stop offset="100%" stop-color="rgba(255,255,255,0)" />
</radialGradient>
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="8" result="blur" />
<feMerge><feMergeNode in="blur" /><feMergeNode in="SourceGraphic" /></feMerge>
</filter>
<filter id="shadow">
<feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="rgba(0,0,0,0.3)" />
</filter>
<radialGradient id="itemGrad1" cx="35%" cy="30%" r="65%">
<stop offset="0%" stop-color="#6ee7b7" />
<stop offset="100%" stop-color="#10b981" />
</radialGradient>
<radialGradient id="itemGrad2" cx="35%" cy="30%" r="65%">
<stop offset="0%" stop-color="#93c5fd" />
<stop offset="100%" stop-color="#3b82f6" />
</radialGradient>
<radialGradient id="itemGrad3" cx="35%" cy="30%" r="65%">
<stop offset="0%" stop-color="#c4b5fd" />
<stop offset="100%" stop-color="#8b5cf6" />
</radialGradient>
</defs>
<rect width="600.0" height="550.0" fill="url(#bgGrad)" />
<circle cx="300.0" cy="295.0" r="235.0" fill="url(#blueOuter)" filter="url(#shadow)" />
<circle cx="300.0" cy="295.0" r="225.0" fill="none" stroke="#4a90d9" stroke-width="1.5" opacity="0.4" />
<circle cx="300.0" cy="295.0" r="210.0" fill="none" stroke="#5a9de0" stroke-width="1" opacity="0.3" />
<circle cx="300.0" cy="295.0" r="195.0" fill="none" stroke="#6aabe6" stroke-width="0.8" opacity="0.25" />
<circle cx="300.0" cy="175.0" r="75.0" fill="url(#itemGrad1)" opacity="0.9" filter="url(#glow)" />
<circle cx="300.0" cy="175.0" r="75.0" fill="url(#hlGrad)" />
<text x="300.0" y="175.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="18" font-weight="700">GIS</text>
<circle cx="403.9" cy="355.0" r="75.0" fill="url(#itemGrad2)" opacity="0.9" filter="url(#glow)" />
<circle cx="403.9" cy="355.0" r="75.0" fill="url(#hlGrad)" />
<text x="403.9" y="355.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="18" font-weight="700">BIM</text>
<circle cx="196.1" cy="355.0" r="75.0" fill="url(#itemGrad3)" opacity="0.9" filter="url(#glow)" />
<circle cx="196.1" cy="355.0" r="75.0" fill="url(#hlGrad)" />
<text x="196.1" y="355.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="18" font-weight="700">DT</text>
<text x="300.0" y="95.0" text-anchor="middle" fill="#ffffff" font-size="13" font-weight="400" opacity="0.85">Digital Transformation</text>
<text x="300.0" y="120.0" text-anchor="middle" fill="#ffffff" font-size="24" font-weight="900">DX (3개)</text>
</svg>
<div class="venn-desc">3개 요소의 기술 융합 구조</div>
</div>
<style>
.block-venn-svg {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 10px 0;
flex-shrink: 1;
min-height: 0;
overflow: hidden;
}
.block-venn-svg svg {
max-width: 450px;
width: 100%;
height: auto;
flex-shrink: 1;
}
.venn-desc {
font-size: 14px;
color: #444;
text-align: center;
max-width: 450px;
line-height: 1.7;
word-break: keep-all;
}
</style></div></body></html>

165
docs/block-tests/visuals_venn-3items.html Normal file
View File

@@ -0,0 +1,165 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>venn-3items</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style>
</head>
<body><div class="block-container"><!-- 벤 다이어그램: 수학적 계산 기반 원형 배치 + SVG -->
<!--
📋 venn-diagram (계산 기반)
─────────────────
용도: 상위-하위 포함 관계, 기술 융합 구조
방식: 중앙 큰 원 + 작은 원 N개를 360/N 간격으로 배치 (수학적 계산)
슬롯: center_label, center_sub, items[] (개수 자유), description
계산: items 개수에 따라 자동으로 360도 분할 → cos/sin으로 좌표 결정
렌더링 전 Python에서 계산 필요:
for i, item in enumerate(items):
angle = (2 * pi * i / n) - pi/2 # 12시부터 시작
item['cx'] = 200 + 110 * cos(angle)
item['cy'] = 200 + 110 * sin(angle)
-->
<div class="block-venn-calc">
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" class="vc-svg">
<defs>
<radialGradient id="outerGrad" cx="50%" cy="40%" r="55%">
<stop offset="0%" stop-color="#e8f4fd" />
<stop offset="100%" stop-color="#d0e8f8" />
</radialGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="6" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="shadow">
<feDropShadow dx="0" dy="2" stdDeviation="4" flood-opacity="0.15" />
</filter>
<radialGradient id="itemGrad1" cx="40%" cy="35%" r="65%">
<stop offset="0%" stop-color="#6ee7b7" />
<stop offset="100%" stop-color="#10b981" />
</radialGradient>
<radialGradient id="itemGrad2" cx="40%" cy="35%" r="65%">
<stop offset="0%" stop-color="#93c5fd" />
<stop offset="100%" stop-color="#3b82f6" />
</radialGradient>
<radialGradient id="itemGrad3" cx="40%" cy="35%" r="65%">
<stop offset="0%" stop-color="#c4b5fd" />
<stop offset="100%" stop-color="#8b5cf6" />
</radialGradient>
</defs>
<!-- 바깥 링 -->
<circle cx="200" cy="200" r="185" fill="none" stroke="#b8d4f0" stroke-width="1" opacity="0.5" />
<!-- 큰 원 (상위 개념) -->
<circle cx="200" cy="200" r="170" fill="url(#outerGrad)" stroke="#7eb8e0" stroke-width="2.5" />
<!-- 연결선 (각 작은 원 → 중심) -->
<line x1="200" y1="200" x2="200.0" y2="110.0" stroke="#a0c4e0" stroke-width="1" stroke-dasharray="4,4" opacity="0.4" />
<line x1="200" y1="200" x2="295.3" y2="275.0" stroke="#a0c4e0" stroke-width="1" stroke-dasharray="4,4" opacity="0.4" />
<line x1="200" y1="200" x2="104.7" y2="275.0" stroke="#a0c4e0" stroke-width="1" stroke-dasharray="4,4" opacity="0.4" />
<!-- 작은 원들 (하위 요소) -->
<circle cx="200.0" cy="110.0" r="42" fill="url(#itemGrad1)" filter="url(#shadow)" opacity="0.9" />
<text x="200.0" y="110.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700" font-family="Pretendard Variable, sans-serif">GIS</text>
<circle cx="295.3" cy="275.0" r="42" fill="url(#itemGrad2)" filter="url(#shadow)" opacity="0.9" />
<text x="295.3" y="275.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700" font-family="Pretendard Variable, sans-serif">BIM</text>
<circle cx="104.7" cy="275.0" r="42" fill="url(#itemGrad3)" filter="url(#shadow)" opacity="0.9" />
<text x="104.7" y="275.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700" font-family="Pretendard Variable, sans-serif">DT</text>
<!-- 중앙 텍스트 -->
<text x="200" y="85" text-anchor="middle" dominant-baseline="central" fill="#1e3a6e" font-size="20" font-weight="900" font-family="Pretendard Variable, sans-serif">건설산업의 DX</text>
<text x="200" y="108" text-anchor="middle" dominant-baseline="central" fill="#6b7280" font-size="11" font-family="Pretendard Variable, sans-serif">Digital Transformation</text>
</svg>
<div class="vc-desc">건설산업의 DX는 GIS, BIM, 디지털 트윈의 기술 융합을 통해서만 실현 가능</div>
</div>
<style>
.block-venn-calc {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 20px 0;
}
.vc-svg {
width: 380px;
height: 380px;
}
.vc-desc {
font-size: 14px;
color: #444;
text-align: center;
max-width: 450px;
line-height: 1.7;
word-break: keep-all;
}
</style></div></body>
</html>

171
docs/block-tests/visuals_venn-4items-p2.html Normal file
View File

@@ -0,0 +1,171 @@
<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>venn-4items</title>
<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head><body><div class="block-container"><!-- 벤 다이어그램: SVG premium (N개 자동 배치) -->
<!--
📋 venn-diagram (P2-B: 동적 좌표 계산)
─────────────────
용도: 상위-하위 포함 관계, 기술 융합 구조
방식: renderer가 svg_calculator.prepare_venn_data()로 좌표 사전 계산
→ items[].cx, cy, r + outer_r, center_x, center_y 전달
Phase 1 fallback: outer_r이 없으면 3개 고정 좌표 사용
-->
<div class="block-venn-svg">
<svg viewBox="0 0 600.0 550.0" width="100%" xmlns="http://www.w3.org/2000/svg" font-family="Pretendard Variable, sans-serif">
<defs>
<linearGradient id="bgGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#dce3ea" />
<stop offset="100%" stop-color="#f0f2f5" />
</linearGradient>
<radialGradient id="blueOuter" cx="45%" cy="40%" r="55%">
<stop offset="0%" stop-color="#2979ff" />
<stop offset="40%" stop-color="#1565c0" />
<stop offset="100%" stop-color="#0d47a1" />
</radialGradient>
<radialGradient id="hlGrad" cx="35%" cy="25%" r="40%">
<stop offset="0%" stop-color="rgba(255,255,255,0.5)" />
<stop offset="100%" stop-color="rgba(255,255,255,0)" />
</radialGradient>
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="8" result="blur" />
<feMerge><feMergeNode in="blur" /><feMergeNode in="SourceGraphic" /></feMerge>
</filter>
<filter id="shadow">
<feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="rgba(0,0,0,0.3)" />
</filter>
<radialGradient id="itemGrad1" cx="35%" cy="30%" r="65%">
<stop offset="0%" stop-color="#10b98180" />
<stop offset="100%" stop-color="#10b981" />
</radialGradient>
<radialGradient id="itemGrad2" cx="35%" cy="30%" r="65%">
<stop offset="0%" stop-color="#3b82f680" />
<stop offset="100%" stop-color="#3b82f6" />
</radialGradient>
<radialGradient id="itemGrad3" cx="35%" cy="30%" r="65%">
<stop offset="0%" stop-color="#8b5cf680" />
<stop offset="100%" stop-color="#8b5cf6" />
</radialGradient>
<radialGradient id="itemGrad4" cx="35%" cy="30%" r="65%">
<stop offset="0%" stop-color="#f59e0b80" />
<stop offset="100%" stop-color="#f59e0b" />
</radialGradient>
</defs>
<rect width="600.0" height="550.0" fill="url(#bgGrad)" />
<circle cx="300.0" cy="295.0" r="232.1" fill="url(#blueOuter)" filter="url(#shadow)" />
<circle cx="300.0" cy="295.0" r="222.1" fill="none" stroke="#4a90d9" stroke-width="1.5" opacity="0.4" />
<circle cx="300.0" cy="295.0" r="207.1" fill="none" stroke="#5a9de0" stroke-width="1" opacity="0.3" />
<circle cx="300.0" cy="295.0" r="192.1" fill="none" stroke="#6aabe6" stroke-width="0.8" opacity="0.25" />
<circle cx="300.0" cy="165.4" r="62.5" fill="url(#itemGrad1)" opacity="0.9" filter="url(#glow)" />
<circle cx="300.0" cy="165.4" r="62.5" fill="url(#hlGrad)" />
<text x="300.0" y="165.4" text-anchor="middle" dominant-baseline="central" fill="white" font-size="18" font-weight="700">설계</text>
<circle cx="429.6" cy="295.0" r="62.5" fill="url(#itemGrad2)" opacity="0.9" filter="url(#glow)" />
<circle cx="429.6" cy="295.0" r="62.5" fill="url(#hlGrad)" />
<text x="429.6" y="295.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="18" font-weight="700">시공</text>
<circle cx="300.0" cy="424.6" r="62.5" fill="url(#itemGrad3)" opacity="0.9" filter="url(#glow)" />
<circle cx="300.0" cy="424.6" r="62.5" fill="url(#hlGrad)" />
<text x="300.0" y="424.6" text-anchor="middle" dominant-baseline="central" fill="white" font-size="18" font-weight="700">유지관리</text>
<circle cx="170.4" cy="295.0" r="62.5" fill="url(#itemGrad4)" opacity="0.9" filter="url(#glow)" />
<circle cx="170.4" cy="295.0" r="62.5" fill="url(#hlGrad)" />
<text x="170.4" y="295.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="18" font-weight="700">운영</text>
<text x="300.0" y="97.9" text-anchor="middle" fill="#ffffff" font-size="13" font-weight="400" opacity="0.85">Digital Transformation</text>
<text x="300.0" y="122.9" text-anchor="middle" fill="#ffffff" font-size="24" font-weight="900">DX (4개)</text>
</svg>
<div class="venn-desc">4개 요소의 기술 융합 구조</div>
</div>
<style>
.block-venn-svg {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 10px 0;
flex-shrink: 1;
min-height: 0;
overflow: hidden;
}
.block-venn-svg svg {
max-width: 450px;
width: 100%;
height: auto;
flex-shrink: 1;
}
.venn-desc {
font-size: 14px;
color: #444;
text-align: center;
max-width: 450px;
line-height: 1.7;
word-break: keep-all;
}
</style></div></body></html>

175
docs/block-tests/visuals_venn-4items.html Normal file
View File

@@ -0,0 +1,175 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>venn-4items</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style>
</head>
<body><div class="block-container"><!-- 벤 다이어그램: 수학적 계산 기반 원형 배치 + SVG -->
<!--
📋 venn-diagram (계산 기반)
─────────────────
용도: 상위-하위 포함 관계, 기술 융합 구조
방식: 중앙 큰 원 + 작은 원 N개를 360/N 간격으로 배치 (수학적 계산)
슬롯: center_label, center_sub, items[] (개수 자유), description
계산: items 개수에 따라 자동으로 360도 분할 → cos/sin으로 좌표 결정
렌더링 전 Python에서 계산 필요:
for i, item in enumerate(items):
angle = (2 * pi * i / n) - pi/2 # 12시부터 시작
item['cx'] = 200 + 110 * cos(angle)
item['cy'] = 200 + 110 * sin(angle)
-->
<div class="block-venn-calc">
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" class="vc-svg">
<defs>
<radialGradient id="outerGrad" cx="50%" cy="40%" r="55%">
<stop offset="0%" stop-color="#e8f4fd" />
<stop offset="100%" stop-color="#d0e8f8" />
</radialGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="6" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="shadow">
<feDropShadow dx="0" dy="2" stdDeviation="4" flood-opacity="0.15" />
</filter>
<radialGradient id="itemGrad1" cx="40%" cy="35%" r="65%">
<stop offset="0%" stop-color="#7dd3fc" />
<stop offset="100%" stop-color="#00aaff" />
</radialGradient>
<radialGradient id="itemGrad2" cx="40%" cy="35%" r="65%">
<stop offset="0%" stop-color="#93c5fd" />
<stop offset="100%" stop-color="#006aff" />
</radialGradient>
<radialGradient id="itemGrad3" cx="40%" cy="35%" r="65%">
<stop offset="0%" stop-color="#6b9fff" />
<stop offset="100%" stop-color="#004cbe" />
</radialGradient>
<radialGradient id="itemGrad4" cx="40%" cy="35%" r="65%">
<stop offset="0%" stop-color="#c4b5fd" />
<stop offset="100%" stop-color="#7c3aed" />
</radialGradient>
</defs>
<!-- 바깥 링 -->
<circle cx="200" cy="200" r="185" fill="none" stroke="#b8d4f0" stroke-width="1" opacity="0.5" />
<!-- 큰 원 (상위 개념) -->
<circle cx="200" cy="200" r="170" fill="url(#outerGrad)" stroke="#7eb8e0" stroke-width="2.5" />
<!-- 연결선 (각 작은 원 → 중심) -->
<line x1="200" y1="200" x2="200.0" y2="110.0" stroke="#a0c4e0" stroke-width="1" stroke-dasharray="4,4" opacity="0.4" />
<line x1="200" y1="200" x2="310.0" y2="220.0" stroke="#a0c4e0" stroke-width="1" stroke-dasharray="4,4" opacity="0.4" />
<line x1="200" y1="200" x2="200.0" y2="330.0" stroke="#a0c4e0" stroke-width="1" stroke-dasharray="4,4" opacity="0.4" />
<line x1="200" y1="200" x2="90.0" y2="220.0" stroke="#a0c4e0" stroke-width="1" stroke-dasharray="4,4" opacity="0.4" />
<!-- 작은 원들 (하위 요소) -->
<circle cx="200.0" cy="110.0" r="42" fill="url(#itemGrad1)" filter="url(#shadow)" opacity="0.9" />
<text x="200.0" y="110.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700" font-family="Pretendard Variable, sans-serif">설계</text>
<circle cx="310.0" cy="220.0" r="42" fill="url(#itemGrad2)" filter="url(#shadow)" opacity="0.9" />
<text x="310.0" y="220.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700" font-family="Pretendard Variable, sans-serif">시공</text>
<circle cx="200.0" cy="330.0" r="42" fill="url(#itemGrad3)" filter="url(#shadow)" opacity="0.9" />
<text x="200.0" y="330.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700" font-family="Pretendard Variable, sans-serif">유지관리</text>
<circle cx="90.0" cy="220.0" r="42" fill="url(#itemGrad4)" filter="url(#shadow)" opacity="0.9" />
<text x="90.0" y="220.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700" font-family="Pretendard Variable, sans-serif">운영</text>
<!-- 중앙 텍스트 -->
<text x="200" y="85" text-anchor="middle" dominant-baseline="central" fill="#1e3a6e" font-size="20" font-weight="900" font-family="Pretendard Variable, sans-serif">생애주기</text>
<text x="200" y="108" text-anchor="middle" dominant-baseline="central" fill="#6b7280" font-size="11" font-family="Pretendard Variable, sans-serif">Life Cycle</text>
</svg>
<div class="vc-desc">설계 → 시공 → 유지관리 → 운영의 전 생애주기 관리</div>
</div>
<style>
.block-venn-calc {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 20px 0;
}
.vc-svg {
width: 380px;
height: 380px;
}
.vc-desc {
font-size: 14px;
color: #444;
text-align: center;
max-width: 450px;
line-height: 1.7;
word-break: keep-all;
}
</style></div></body>
</html>

181
docs/block-tests/visuals_venn-5items-p2.html Normal file
View File

@@ -0,0 +1,181 @@
<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>venn-5items</title>
<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head><body><div class="block-container"><!-- 벤 다이어그램: SVG premium (N개 자동 배치) -->
<!--
📋 venn-diagram (P2-B: 동적 좌표 계산)
─────────────────
용도: 상위-하위 포함 관계, 기술 융합 구조
방식: renderer가 svg_calculator.prepare_venn_data()로 좌표 사전 계산
→ items[].cx, cy, r + outer_r, center_x, center_y 전달
Phase 1 fallback: outer_r이 없으면 3개 고정 좌표 사용
-->
<div class="block-venn-svg">
<svg viewBox="0 0 600.0 550.0" width="100%" xmlns="http://www.w3.org/2000/svg" font-family="Pretendard Variable, sans-serif">
<defs>
<linearGradient id="bgGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#dce3ea" />
<stop offset="100%" stop-color="#f0f2f5" />
</linearGradient>
<radialGradient id="blueOuter" cx="45%" cy="40%" r="55%">
<stop offset="0%" stop-color="#2979ff" />
<stop offset="40%" stop-color="#1565c0" />
<stop offset="100%" stop-color="#0d47a1" />
</radialGradient>
<radialGradient id="hlGrad" cx="35%" cy="25%" r="40%">
<stop offset="0%" stop-color="rgba(255,255,255,0.5)" />
<stop offset="100%" stop-color="rgba(255,255,255,0)" />
</radialGradient>
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="8" result="blur" />
<feMerge><feMergeNode in="blur" /><feMergeNode in="SourceGraphic" /></feMerge>
</filter>
<filter id="shadow">
<feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="rgba(0,0,0,0.3)" />
</filter>
<radialGradient id="itemGrad1" cx="35%" cy="30%" r="65%">
<stop offset="0%" stop-color="#10b98180" />
<stop offset="100%" stop-color="#10b981" />
</radialGradient>
<radialGradient id="itemGrad2" cx="35%" cy="30%" r="65%">
<stop offset="0%" stop-color="#3b82f680" />
<stop offset="100%" stop-color="#3b82f6" />
</radialGradient>
<radialGradient id="itemGrad3" cx="35%" cy="30%" r="65%">
<stop offset="0%" stop-color="#8b5cf680" />
<stop offset="100%" stop-color="#8b5cf6" />
</radialGradient>
<radialGradient id="itemGrad4" cx="35%" cy="30%" r="65%">
<stop offset="0%" stop-color="#f59e0b80" />
<stop offset="100%" stop-color="#f59e0b" />
</radialGradient>
<radialGradient id="itemGrad5" cx="35%" cy="30%" r="65%">
<stop offset="0%" stop-color="#ef444480" />
<stop offset="100%" stop-color="#ef4444" />
</radialGradient>
</defs>
<rect width="600.0" height="550.0" fill="url(#bgGrad)" />
<circle cx="300.0" cy="295.0" r="232.8" fill="url(#blueOuter)" filter="url(#shadow)" />
<circle cx="300.0" cy="295.0" r="222.8" fill="none" stroke="#4a90d9" stroke-width="1.5" opacity="0.4" />
<circle cx="300.0" cy="295.0" r="207.8" fill="none" stroke="#5a9de0" stroke-width="1" opacity="0.3" />
<circle cx="300.0" cy="295.0" r="192.8" fill="none" stroke="#6aabe6" stroke-width="0.8" opacity="0.25" />
<circle cx="300.0" cy="155.8" r="53.6" fill="url(#itemGrad1)" opacity="0.9" filter="url(#glow)" />
<circle cx="300.0" cy="155.8" r="53.6" fill="url(#hlGrad)" />
<text x="300.0" y="155.8" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700">기술</text>
<circle cx="432.4" cy="252.0" r="53.6" fill="url(#itemGrad2)" opacity="0.9" filter="url(#glow)" />
<circle cx="432.4" cy="252.0" r="53.6" fill="url(#hlGrad)" />
<text x="432.4" y="252.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700">S/W</text>
<circle cx="381.8" cy="407.6" r="53.6" fill="url(#itemGrad3)" opacity="0.9" filter="url(#glow)" />
<circle cx="381.8" cy="407.6" r="53.6" fill="url(#hlGrad)" />
<text x="381.8" y="407.6" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700">인력</text>
<circle cx="218.2" cy="407.6" r="53.6" fill="url(#itemGrad4)" opacity="0.9" filter="url(#glow)" />
<circle cx="218.2" cy="407.6" r="53.6" fill="url(#hlGrad)" />
<text x="218.2" y="407.6" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700">여건</text>
<circle cx="167.6" cy="252.0" r="53.6" fill="url(#itemGrad5)" opacity="0.9" filter="url(#glow)" />
<circle cx="167.6" cy="252.0" r="53.6" fill="url(#hlGrad)" />
<text x="167.6" y="252.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700">투자</text>
<text x="300.0" y="97.19999999999999" text-anchor="middle" fill="#ffffff" font-size="13" font-weight="400" opacity="0.85">Digital Transformation</text>
<text x="300.0" y="122.19999999999999" text-anchor="middle" fill="#ffffff" font-size="24" font-weight="900">DX (5개)</text>
</svg>
<div class="venn-desc">5개 요소의 기술 융합 구조</div>
</div>
<style>
.block-venn-svg {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 10px 0;
flex-shrink: 1;
min-height: 0;
overflow: hidden;
}
.block-venn-svg svg {
max-width: 450px;
width: 100%;
height: auto;
flex-shrink: 1;
}
.venn-desc {
font-size: 14px;
color: #444;
text-align: center;
max-width: 450px;
line-height: 1.7;
word-break: keep-all;
}
</style></div></body></html>

185
docs/block-tests/visuals_venn-5items.html Normal file
View File

@@ -0,0 +1,185 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>venn-5items</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style>
</head>
<body><div class="block-container"><!-- 벤 다이어그램: 수학적 계산 기반 원형 배치 + SVG -->
<!--
📋 venn-diagram (계산 기반)
─────────────────
용도: 상위-하위 포함 관계, 기술 융합 구조
방식: 중앙 큰 원 + 작은 원 N개를 360/N 간격으로 배치 (수학적 계산)
슬롯: center_label, center_sub, items[] (개수 자유), description
계산: items 개수에 따라 자동으로 360도 분할 → cos/sin으로 좌표 결정
렌더링 전 Python에서 계산 필요:
for i, item in enumerate(items):
angle = (2 * pi * i / n) - pi/2 # 12시부터 시작
item['cx'] = 200 + 110 * cos(angle)
item['cy'] = 200 + 110 * sin(angle)
-->
<div class="block-venn-calc">
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" class="vc-svg">
<defs>
<radialGradient id="outerGrad" cx="50%" cy="40%" r="55%">
<stop offset="0%" stop-color="#e8f4fd" />
<stop offset="100%" stop-color="#d0e8f8" />
</radialGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="6" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="shadow">
<feDropShadow dx="0" dy="2" stdDeviation="4" flood-opacity="0.15" />
</filter>
<radialGradient id="itemGrad1" cx="40%" cy="35%" r="65%">
<stop offset="0%" stop-color="#67e8f9" />
<stop offset="100%" stop-color="#0891b2" />
</radialGradient>
<radialGradient id="itemGrad2" cx="40%" cy="35%" r="65%">
<stop offset="0%" stop-color="#93c5fd" />
<stop offset="100%" stop-color="#3b82f6" />
</radialGradient>
<radialGradient id="itemGrad3" cx="40%" cy="35%" r="65%">
<stop offset="0%" stop-color="#c4b5fd" />
<stop offset="100%" stop-color="#8b5cf6" />
</radialGradient>
<radialGradient id="itemGrad4" cx="40%" cy="35%" r="65%">
<stop offset="0%" stop-color="#f9a8d4" />
<stop offset="100%" stop-color="#ec4899" />
</radialGradient>
<radialGradient id="itemGrad5" cx="40%" cy="35%" r="65%">
<stop offset="0%" stop-color="#fcd34d" />
<stop offset="100%" stop-color="#f59e0b" />
</radialGradient>
</defs>
<!-- 바깥 링 -->
<circle cx="200" cy="200" r="185" fill="none" stroke="#b8d4f0" stroke-width="1" opacity="0.5" />
<!-- 큰 원 (상위 개념) -->
<circle cx="200" cy="200" r="170" fill="url(#outerGrad)" stroke="#7eb8e0" stroke-width="2.5" />
<!-- 연결선 (각 작은 원 → 중심) -->
<line x1="200" y1="200" x2="200.0" y2="110.0" stroke="#a0c4e0" stroke-width="1" stroke-dasharray="4,4" opacity="0.4" />
<line x1="200" y1="200" x2="304.6" y2="186.0" stroke="#a0c4e0" stroke-width="1" stroke-dasharray="4,4" opacity="0.4" />
<line x1="200" y1="200" x2="264.7" y2="309.0" stroke="#a0c4e0" stroke-width="1" stroke-dasharray="4,4" opacity="0.4" />
<line x1="200" y1="200" x2="135.3" y2="309.0" stroke="#a0c4e0" stroke-width="1" stroke-dasharray="4,4" opacity="0.4" />
<line x1="200" y1="200" x2="95.4" y2="186.0" stroke="#a0c4e0" stroke-width="1" stroke-dasharray="4,4" opacity="0.4" />
<!-- 작은 원들 (하위 요소) -->
<circle cx="200.0" cy="110.0" r="42" fill="url(#itemGrad1)" filter="url(#shadow)" opacity="0.9" />
<text x="200.0" y="110.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700" font-family="Pretendard Variable, sans-serif">기술기반</text>
<circle cx="304.6" cy="186.0" r="42" fill="url(#itemGrad2)" filter="url(#shadow)" opacity="0.9" />
<text x="304.6" y="186.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700" font-family="Pretendard Variable, sans-serif">S/W</text>
<circle cx="264.7" cy="309.0" r="42" fill="url(#itemGrad3)" filter="url(#shadow)" opacity="0.9" />
<text x="264.7" y="309.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700" font-family="Pretendard Variable, sans-serif">인력</text>
<circle cx="135.3" cy="309.0" r="42" fill="url(#itemGrad4)" filter="url(#shadow)" opacity="0.9" />
<text x="135.3" y="309.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700" font-family="Pretendard Variable, sans-serif">여건</text>
<circle cx="95.4" cy="186.0" r="42" fill="url(#itemGrad5)" filter="url(#shadow)" opacity="0.9" />
<text x="95.4" y="186.0" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700" font-family="Pretendard Variable, sans-serif">투자</text>
<!-- 중앙 텍스트 -->
<text x="200" y="85" text-anchor="middle" dominant-baseline="central" fill="#1e3a6e" font-size="20" font-weight="900" font-family="Pretendard Variable, sans-serif">DX 성공 요건</text>
<text x="200" y="108" text-anchor="middle" dominant-baseline="central" fill="#6b7280" font-size="11" font-family="Pretendard Variable, sans-serif">5대 필수 요건</text>
</svg>
<div class="vc-desc">디지털 전환 성공을 위해 기술, S/W, 인력, 여건, 투자 5가지 요건이 필요</div>
</div>
<style>
.block-venn-calc {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 20px 0;
}
.vc-svg {
width: 380px;
height: 380px;
}
.vc-desc {
font-size: 14px;
color: #444;
text-align: center;
max-width: 450px;
line-height: 1.7;
word-break: keep-all;
}
</style></div></body>
</html>

201
docs/block-tests/visuals_venn-7items-p2.html Normal file
View File

@@ -0,0 +1,201 @@
<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8"><title>venn-7items</title>
<style>@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style></head><body><div class="block-container"><!-- 벤 다이어그램: SVG premium (N개 자동 배치) -->
<!--
📋 venn-diagram (P2-B: 동적 좌표 계산)
─────────────────
용도: 상위-하위 포함 관계, 기술 융합 구조
방식: renderer가 svg_calculator.prepare_venn_data()로 좌표 사전 계산
→ items[].cx, cy, r + outer_r, center_x, center_y 전달
Phase 1 fallback: outer_r이 없으면 3개 고정 좌표 사용
-->
<div class="block-venn-svg">
<svg viewBox="0 0 600.0 550.0" width="100%" xmlns="http://www.w3.org/2000/svg" font-family="Pretendard Variable, sans-serif">
<defs>
<linearGradient id="bgGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#dce3ea" />
<stop offset="100%" stop-color="#f0f2f5" />
</linearGradient>
<radialGradient id="blueOuter" cx="45%" cy="40%" r="55%">
<stop offset="0%" stop-color="#2979ff" />
<stop offset="40%" stop-color="#1565c0" />
<stop offset="100%" stop-color="#0d47a1" />
</radialGradient>
<radialGradient id="hlGrad" cx="35%" cy="25%" r="40%">
<stop offset="0%" stop-color="rgba(255,255,255,0.5)" />
<stop offset="100%" stop-color="rgba(255,255,255,0)" />
</radialGradient>
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="8" result="blur" />
<feMerge><feMergeNode in="blur" /><feMergeNode in="SourceGraphic" /></feMerge>
</filter>
<filter id="shadow">
<feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="rgba(0,0,0,0.3)" />
</filter>
<radialGradient id="itemGrad1" cx="35%" cy="30%" r="65%">
<stop offset="0%" stop-color="#10b98180" />
<stop offset="100%" stop-color="#10b981" />
</radialGradient>
<radialGradient id="itemGrad2" cx="35%" cy="30%" r="65%">
<stop offset="0%" stop-color="#3b82f680" />
<stop offset="100%" stop-color="#3b82f6" />
</radialGradient>
<radialGradient id="itemGrad3" cx="35%" cy="30%" r="65%">
<stop offset="0%" stop-color="#8b5cf680" />
<stop offset="100%" stop-color="#8b5cf6" />
</radialGradient>
<radialGradient id="itemGrad4" cx="35%" cy="30%" r="65%">
<stop offset="0%" stop-color="#f59e0b80" />
<stop offset="100%" stop-color="#f59e0b" />
</radialGradient>
<radialGradient id="itemGrad5" cx="35%" cy="30%" r="65%">
<stop offset="0%" stop-color="#ef444480" />
<stop offset="100%" stop-color="#ef4444" />
</radialGradient>
<radialGradient id="itemGrad6" cx="35%" cy="30%" r="65%">
<stop offset="0%" stop-color="#06b6d480" />
<stop offset="100%" stop-color="#06b6d4" />
</radialGradient>
<radialGradient id="itemGrad7" cx="35%" cy="30%" r="65%">
<stop offset="0%" stop-color="#ec489980" />
<stop offset="100%" stop-color="#ec4899" />
</radialGradient>
</defs>
<rect width="600.0" height="550.0" fill="url(#bgGrad)" />
<circle cx="300.0" cy="295.0" r="240.1" fill="url(#blueOuter)" filter="url(#shadow)" />
<circle cx="300.0" cy="295.0" r="230.1" fill="none" stroke="#4a90d9" stroke-width="1.5" opacity="0.4" />
<circle cx="300.0" cy="295.0" r="215.1" fill="none" stroke="#5a9de0" stroke-width="1" opacity="0.3" />
<circle cx="300.0" cy="295.0" r="200.1" fill="none" stroke="#6aabe6" stroke-width="0.8" opacity="0.25" />
<circle cx="300.0" cy="136.6" r="41.7" fill="url(#itemGrad1)" opacity="0.9" filter="url(#glow)" />
<circle cx="300.0" cy="136.6" r="41.7" fill="url(#hlGrad)" />
<text x="300.0" y="136.6" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700">GIS</text>
<circle cx="423.8" cy="196.2" r="41.7" fill="url(#itemGrad2)" opacity="0.9" filter="url(#glow)" />
<circle cx="423.8" cy="196.2" r="41.7" fill="url(#hlGrad)" />
<text x="423.8" y="196.2" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700">BIM</text>
<circle cx="454.4" cy="330.2" r="41.7" fill="url(#itemGrad3)" opacity="0.9" filter="url(#glow)" />
<circle cx="454.4" cy="330.2" r="41.7" fill="url(#hlGrad)" />
<text x="454.4" y="330.2" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700">DT</text>
<circle cx="368.7" cy="437.7" r="41.7" fill="url(#itemGrad4)" opacity="0.9" filter="url(#glow)" />
<circle cx="368.7" cy="437.7" r="41.7" fill="url(#hlGrad)" />
<text x="368.7" y="437.7" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700">IoT</text>
<circle cx="231.3" cy="437.7" r="41.7" fill="url(#itemGrad5)" opacity="0.9" filter="url(#glow)" />
<circle cx="231.3" cy="437.7" r="41.7" fill="url(#hlGrad)" />
<text x="231.3" y="437.7" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700">AI</text>
<circle cx="145.6" cy="330.2" r="41.7" fill="url(#itemGrad6)" opacity="0.9" filter="url(#glow)" />
<circle cx="145.6" cy="330.2" r="41.7" fill="url(#hlGrad)" />
<text x="145.6" y="330.2" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700">Cloud</text>
<circle cx="176.2" cy="196.2" r="41.7" fill="url(#itemGrad7)" opacity="0.9" filter="url(#glow)" />
<circle cx="176.2" cy="196.2" r="41.7" fill="url(#hlGrad)" />
<text x="176.2" y="196.2" text-anchor="middle" dominant-baseline="central" fill="white" font-size="15" font-weight="700">Robot</text>
<text x="300.0" y="89.9" text-anchor="middle" fill="#ffffff" font-size="13" font-weight="400" opacity="0.85">Digital Transformation</text>
<text x="300.0" y="114.9" text-anchor="middle" fill="#ffffff" font-size="24" font-weight="900">DX (7개)</text>
</svg>
<div class="venn-desc">7개 요소의 기술 융합 구조</div>
</div>
<style>
.block-venn-svg {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 10px 0;
flex-shrink: 1;
min-height: 0;
overflow: hidden;
}
.block-venn-svg svg {
max-width: 450px;
width: 100%;
height: auto;
flex-shrink: 1;
}
.venn-desc {
font-size: 14px;
color: #444;
text-align: center;
max-width: 450px;
line-height: 1.7;
word-break: keep-all;
}
</style></div></body></html>

172
docs/block-tests/visuals_venn-diagram.html Normal file
View File

@@ -0,0 +1,172 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>venn-diagram</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
</style>
</head>
<body><div class="block-container"><!-- 벤 다이어그램: AI 생성 배경 이미지 + HTML 텍스트 오버레이 -->
<!--
📋 venn-diagram (레이어 방식)
─────────────────
용도: 상위-하위 포함 관계, 기술 융합 구조
방식: 배경 이미지(원형 다이어그램) + HTML 텍스트 오버레이
슬롯: bg_image (선택), center_label, center_sub, items[], description
참고: bg_image가 없으면 기본 CSS 원으로 fallback
-->
<div class="block-venn-layer">
<div class="vl-diagram">
<img class="vl-bg" src="../figma-assets/venn_bg.png" alt="">
<div class="vl-center-text">
<div class="vl-main">건설산업의 DX</div>
<div class="vl-sub">Digital Transformation</div>
</div>
<div class="vl-items">
<div class="vl-item vl-item-1">GIS</div>
<div class="vl-item vl-item-2">BIM</div>
<div class="vl-item vl-item-3">DT</div>
</div>
</div>
<div class="vl-desc">건설산업의 DX는 GIS, BIM, 디지털 트윈의 기술 융합을 통해서만 실현 가능</div>
</div>
<style>
.block-venn-layer {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 20px 0;
}
.vl-diagram {
position: relative;
width: 400px;
height: 400px;
}
.vl-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
z-index: 1;
}
.vl-bg-fallback {
border-radius: 50%;
background: linear-gradient(135deg, rgba(37,99,235,0.04), rgba(37,99,235,0.08));
border: 3px solid rgba(37,99,235,0.2);
}
.vl-center-text {
position: absolute;
top: 15%;
left: 50%;
transform: translateX(-50%);
z-index: 5;
text-align: center;
}
.vl-main {
font-size: 20px;
font-weight: 900;
color: #1e3a6e;
line-height: 1.3;
white-space: pre-line;
}
.vl-sub {
font-size: 11px;
color: #6b7280;
margin-top: 3px;
}
.vl-items {
position: absolute;
bottom: 8%;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0;
z-index: 5;
}
.vl-item {
width: 76px;
height: 76px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 14px;
font-weight: 700;
text-shadow: 0 1px 3px rgba(0,0,0,0.2);
/* 배경은 투명 — 이미지의 원이 보이도록 */
background: transparent;
}
.vl-item-1 { margin-right: -8px; }
.vl-item-2 { z-index: 3; }
.vl-item-3 { margin-left: -8px; }
.vl-desc {
font-size: 14px;
color: #444;
text-align: center;
max-width: 450px;
line-height: 1.7;
word-break: keep-all;
}
</style></div></body>
</html>

104
docs/block-tests/visuals_venn-premium.html Normal file
View File

@@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>venn-premium v6</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Design Agent — 디자인 토큰 */
/* CLAUDE.md에 정의된 디자인 원칙을 CSS 변수로 구현 */
:root {
/* 색상 */
--color-primary: #1e293b;
--color-accent: #2563eb;
--color-neutral: #64748b;
--color-bg: #ffffff;
--color-bg-subtle: #f8fafc;
--color-border: #e2e8f0;
--color-danger: #dc2626;
--color-success: #16a34a;
--color-text: #1e293b;
--color-text-secondary: #64748b;
--color-text-light: #94a3b8;
/* 폰트 크기 */
--font-title: 2rem;
--font-subtitle: 1.25rem;
--font-body: 0.95rem;
--font-caption: 0.8rem;
--font-small: 0.7rem;
/* 폰트 두께 */
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--weight-black: 900;
/* 여백 */
--spacing-page: 40px;
--spacing-block: 20px;
--spacing-inner: 16px;
--spacing-small: 8px;
/* 기타 */
--radius: 6px;
--border-width: 1px;
--accent-border: 3px;
--line-height-ko: 1.7;
}
body { font-family: "Pretendard Variable", sans-serif; background: #e8ecf0; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.venn-premium { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 10px 0; }
.vp-diagram { position: relative; width: 480px; height: 480px; }
.vp-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; }
.vp-label {
position: absolute; z-index: 5; color: #fff;
text-align: center; font-weight: 700;
text-shadow: 0 2px 6px rgba(0,0,0,0.35);
transform: translate(-50%, -50%);
}
.vp-center { top: 22%; left: 50%; }
.vp-center .en { font-size: 13px; font-weight: 400; opacity: 0.9; }
.vp-center .ko { font-size: 24px; font-weight: 900; margin-top: 2px; }
.vp-dt { top: 51.8%; left: 40.2%; }
.vp-dt .name { font-size: 20px; font-weight: 800; }
.vp-dt .sub { font-size: 13px; font-weight: 400; opacity: 0.85; margin-top: 2px; }
.vp-bim { top: 41%; left: 60.6%; }
.vp-bim .name { font-size: 20px; font-weight: 800; }
.vp-gis { top: 62.9%; left: 60.3%; }
.vp-gis .name { font-size: 20px; font-weight: 800; }
.vp-desc { font-size: 14px; color: #444; text-align: center; max-width: 500px; line-height: 1.7; word-break: keep-all; }
</style>
</head>
<body>
<div class="block-container">
<div class="venn-premium">
<div class="vp-diagram">
<img class="vp-bg" src="venn_premium_bg.png" alt="">
<div class="vp-label vp-center">
<div class="en">Digital Transformation</div>
<div class="ko">디지털 전환(D/X)</div>
</div>
<div class="vp-label vp-dt">
<div class="name">Digital Twin</div>
<div class="sub">(Metaverse)</div>
</div>
<div class="vp-label vp-bim">
<div class="name">BIM</div>
</div>
<div class="vp-label vp-gis">
<div class="name">GIS</div>
</div>
</div>
<div class="vp-desc">건설산업의 DX는 GIS, BIM, 디지털 트윈의 기술 융합을 통해서만 실현 가능</div>
</div>
</div>
</body>
</html>

121
docs/block-tests/visuals_venn-svg-premium.html Normal file
View File

@@ -0,0 +1,121 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>venn SVG premium test</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
body { font-family: "Pretendard Variable", sans-serif; background: #e0e5ea; display: flex; justify-content: center; padding: 30px; margin: 0; }
.block-container { width: 920px; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.desc { font-size: 14px; color: #444; text-align: center; line-height: 1.7; }
</style>
</head>
<body>
<div class="block-container">
<svg viewBox="0 0 600 550" width="500" height="460" xmlns="http://www.w3.org/2000/svg" font-family="Pretendard Variable, sans-serif">
<defs>
<!-- 배경 그라데이션 (연한 회색→흰) -->
<linearGradient id="bgGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#dce3ea" />
<stop offset="100%" stop-color="#f0f2f5" />
</linearGradient>
<!-- 큰 파란 원 그라데이션 -->
<radialGradient id="blueOuter" cx="45%" cy="40%" r="55%">
<stop offset="0%" stop-color="#2979ff" />
<stop offset="40%" stop-color="#1565c0" />
<stop offset="100%" stop-color="#0d47a1" />
</radialGradient>
<!-- 주황→마젠타 원 -->
<radialGradient id="orangeGrad" cx="35%" cy="35%" r="65%">
<stop offset="0%" stop-color="#ffab40" />
<stop offset="40%" stop-color="#ff6d00" />
<stop offset="100%" stop-color="#c2185b" />
</radialGradient>
<!-- 민트/틸 원 -->
<radialGradient id="mintGrad" cx="40%" cy="30%" r="65%">
<stop offset="0%" stop-color="#80deea" />
<stop offset="40%" stop-color="#26c6da" />
<stop offset="100%" stop-color="#00897b" />
</radialGradient>
<!-- 골드 원 -->
<radialGradient id="goldGrad" cx="40%" cy="30%" r="65%">
<stop offset="0%" stop-color="#ffd54f" />
<stop offset="40%" stop-color="#ffb300" />
<stop offset="100%" stop-color="#e65100" />
</radialGradient>
<!-- 하이라이트 (구체 광택) -->
<radialGradient id="highlight" cx="35%" cy="25%" r="40%">
<stop offset="0%" stop-color="rgba(255,255,255,0.5)" />
<stop offset="100%" stop-color="rgba(255,255,255,0)" />
</radialGradient>
<!-- 글로우 필터 -->
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="8" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<!-- 그림자 -->
<filter id="shadow">
<feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="rgba(0,0,0,0.3)" />
</filter>
<!-- 큰 원 안쪽 그림자 (깊이감) -->
<filter id="innerDepth" x="-10%" y="-10%" width="120%" height="120%">
<feGaussianBlur in="SourceAlpha" stdDeviation="15" result="blur" />
<feOffset dx="0" dy="5" result="offsetBlur" />
<feComposite in="SourceGraphic" in2="offsetBlur" operator="over" />
</filter>
</defs>
<!-- 배경 -->
<rect width="600" height="550" fill="url(#bgGrad)" rx="0" />
<!-- 큰 파란 원 + 동심원 링 (바깥→안쪽) -->
<circle cx="300" cy="270" r="230" fill="url(#blueOuter)" filter="url(#shadow)" />
<circle cx="300" cy="270" r="220" fill="none" stroke="#4a90d9" stroke-width="1.5" opacity="0.4" />
<circle cx="300" cy="270" r="205" fill="none" stroke="#5a9de0" stroke-width="1" opacity="0.3" />
<circle cx="300" cy="270" r="190" fill="none" stroke="#6aabe6" stroke-width="0.8" opacity="0.25" />
<circle cx="300" cy="270" r="175" fill="none" stroke="#7ab8ec" stroke-width="0.6" opacity="0.2" />
<!-- 주황→마젠타 원 (가장 큼, 좌측) -->
<circle cx="265" cy="300" r="120" fill="url(#orangeGrad)" opacity="0.92" filter="url(#glow)" />
<circle cx="265" cy="300" r="120" fill="url(#highlight)" />
<!-- 민트 원 (우상) -->
<circle cx="370" cy="230" r="75" fill="url(#mintGrad)" opacity="0.9" filter="url(#glow)" />
<circle cx="370" cy="230" r="75" fill="url(#highlight)" />
<!-- 골드 원 (우하) -->
<circle cx="365" cy="355" r="75" fill="url(#goldGrad)" opacity="0.9" filter="url(#glow)" />
<circle cx="365" cy="355" r="75" fill="url(#highlight)" />
<!-- 텍스트: 디지털 전환 (큰 원 상단) -->
<text x="300" y="95" text-anchor="middle" fill="#ffffff" font-size="13" font-weight="400" opacity="0.85">Digital Transformation</text>
<text x="300" y="125" text-anchor="middle" fill="#ffffff" font-size="26" font-weight="900">디지털 전환(D/X)</text>
<!-- 텍스트: Digital Twin (주황 원 중앙) -->
<text x="250" y="295" text-anchor="middle" fill="#ffffff" font-size="20" font-weight="800">Digital Twin</text>
<text x="250" y="318" text-anchor="middle" fill="#ffffff" font-size="13" font-weight="400" opacity="0.85">(Metaverse)</text>
<!-- 텍스트: BIM (민트 원 중앙) -->
<text x="370" y="237" text-anchor="middle" fill="#ffffff" font-size="20" font-weight="800">BIM</text>
<!-- 텍스트: GIS (골드 원 중앙) -->
<text x="365" y="362" text-anchor="middle" fill="#ffffff" font-size="20" font-weight="800">GIS</text>
</svg>
<div class="desc">건설산업의 DX는 GIS, BIM, 디지털 트윈의 기술 융합을 통해서만 실현 가능</div>
</div>
</body>
</html>

1
docs/figma-analysis/2-1_01_detail.json Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/figma-analysis/2-1_02_detail.json Normal file
View File

File diff suppressed because one or more lines are too long

254
docs/figma-analysis/DESIGN-ANALYSIS.md Normal file
View File

@@ -0,0 +1,254 @@
# Figma 디자인 분석 보고서
## 파일 정보
- **파일명:** 바론컨설턴트 홈페이지_기획팀공유
- **페이지:** 바론 공유 2025.05.13 (node: 1574-6254)
- **분석일:** 2026-03-25
---
## 1. 전체 구조
### 메인 페이지 (3장)
| 섹션 | 프레임 | 크기 | 스크린샷 |
|------|--------|------|---------|
| 1장 바론컨설턴트 | 1-1 미래 | 1920x5990 | `1장_1-1_미래.png` |
| | 기술 | 1920x5677 | `1장_기술.png` |
| | 가치 | 1920x4157 | `1장_가치.png` |
### 자세히보기 페이지 (13개 서브 프레임)
| 섹션 | 프레임 | 크기 | 스크린샷 |
|------|--------|------|---------|
| 2-1장 건설산업 DX | 2-1_01 건설산업 | 920x1231 | `2-1_01_건설산업.png` |
| | 2-1_02 BIM | 920x2179 | `2-1_02_BIM.png` |
| | 2-1_03 GIS | 920x2208 | `2-1_03_GIS.png` |
| | 2-1_04 디지털트윈 | 920x1651 | `2-1_04_디지털트윈.png` |
| 2-2장 DX와 SW | 2-2_01 | 920x3013 | `2-2_01.png` |
| | 2-2_02 | 920x1742 | `2-2_02.png` |
| | 2-2_03 | 920x2129 | `2-2_03.png` |
| | 2-2_04 | 920x1814 | `2-2_04.png` |
| 2-3장 DX 활용 | 2-3_01 ~ 2-3_05 | 920x2300~3016 | `2-3_01~05.png` |
---
## 2. 추출된 디자인 토큰
### 색상 팔레트
| 용도 | Figma 값 | 현재 tokens.css | 비고 |
|------|----------|---------------|------|
| **메인 텍스트** | `#000000` | `--color-primary: #1e293b` | Figma가 더 진함 |
| **포인트 (파란)** | `#004cbe` | `--color-accent: #2563eb` | Figma가 더 진한 남색 |
| **포인트 밝은** | `#006aff` | 없음 | **추가 필요:** `--color-accent-bright` |
| **포인트 하늘** | `#6bcdff` | 없음 | **추가 필요:** `--color-accent-light` |
| **포인트 하늘2** | `#00aaff` | 없음 | 참고 |
| **포인트 파랑** | `#008fff`, `#007cff` | 없음 | 원형 마커 색상 |
| **배경 밝은** | `#f6f7f9` | `--color-bg-subtle: #f8fafc` | 거의 동일 |
| **배경 흰** | `#ffffff` | `--color-bg: #ffffff` | 동일 |
| **섹션 타이틀** | `#ffffff` (배경 위) | - | 다크 배경 위 흰 텍스트 |
### 폰트 체계
| 용도 | Figma | 현재 tokens.css | 비고 |
|------|-------|---------------|------|
| **페이지 타이틀** | Noto Sans CJK KR, 35px, w700 | `--font-title: 2rem (32px)` | Figma가 약간 큼 |
| **영문 서브타이틀** | 15px, w400 | 없음 | section_title 영문 |
| **꼭지 제목** | 24px, w700 | `--font-subtitle: 1.25rem (20px)` | Figma가 큼 |
| **본문** | 16px, w400 | `--font-body: 0.95rem (15.2px)` | 거의 동일 |
| **카드 내 제목** | 14px, w700 | `--font-caption: 0.8rem (12.8px)` | Figma가 큼 |
| **카드 내 본문** | 14px, w400 | `--font-caption` | 동일 |
| **태그/라벨** | 20px, w700 | 없음 | DX/BIM/VS 라벨 |
| **소제목** | 13px, w400 | `--font-small: 0.7rem (11.2px)` | Figma가 약간 큼 |
### 간격/크기
| 요소 | Figma 값 | 비고 |
|------|----------|------|
| 프레임 폭 | 920px | 자세히보기 프레임 |
| 섹션 타이틀 영역 | 249x73px | 영문+한글 2줄 |
| 꼭지 제목+설명 영역 | 742x68~78px | 좌: 제목 240px, 우: 설명 422px |
| 카드 (3열) | 240x365px 각각 | 이미지+제목+설명 |
| 이미지 그리드 | 460x354px (2열) | 그라데이션 오버레이 포함 |
| 비교 박스 | 327x116px, 325x116px | 나란히 2개 |
| 원형 마커 | 10x10px, 151x151px | 작은 점, 큰 원 |
| 배경 헤더 영역 | 963x515px | 그라데이션+웨이브 |
---
## 3. 발견된 재사용 컴포넌트
### 공통 컴포넌트 (모든 자세히보기에 반복)
#### A. section_title (섹션 타이틀)
```
구조: FRAME 249x73
├── TEXT 15px/w400 #ffffff — 영문 (예: "Building Information Modeling")
└── TEXT 35px/w700 #ffffff — 한글 (예: "건설정보모델링(BIM)")
배경: 파란 그라데이션 헤더 위에 위치
```
- **모든 자세히보기 프레임의 상단**에 동일 구조로 반복
- 영문 서브타이틀 + 한글 메인 타이틀
- 흰색 텍스트 + 다크 배경
#### B. bg (배경 헤더)
```
구조: GROUP 1319x671
├── Mask group (그라데이션 + 웨이브 이미지)
├── RECTANGLE 그라데이션 (파란→투명)
├── RECTANGLE 흰색 배경
└── shape (벡터 웨이브 라인 7줄)
```
- 상단 파란 그라데이션 + 웨이브 패턴
- **이미지로 export해서 사용해야 하는 영역** (CSS 재현 불가)
#### C. sub_제목,내용 (꼭지 제목+설명)
```
구조: FRAME 742x68~78
├── TEXT 24px/w700 #004cbe — 질문/소제목 (좌측 240px)
└── TEXT 16px/w400 #000000 — 설명 (우측 422px)
```
- 좌: 파란 굵은 제목 (질문형)
- 우: 검정 본문 설명
- 2단 가로 배치 (240:422 비율)
#### D. close 버튼
```
구조: FRAME 40x40
└── VECTOR 23x23 #ffffff — X 아이콘
```
### 콘텐츠 컴포넌트
#### E. 카드 3열 (2-1_02 BIM 페이지)
```
구조: GROUP 751x377
├── FRAME 744x365 (카드 3장 컨테이너)
│ ├── RECTANGLE 240x365 #ffffff (카드1)
│ ├── RECTANGLE 240x365 #ffffff (카드2)
│ └── RECTANGLE 240x365 #ffffff (카드3)
├── 이미지 3장 (각 카드 상단)
└── FRAME 240x180~188 (각 카드 텍스트)
├── TEXT 14px/w700 — 단계명 (영문 포함)
├── RECTANGLE 구분선
└── TEXT 14px/w400 — 설명 불릿
```
- 카드 크기: 240x365px
- 상단: 이미지 (시공/설계/유지관리)
- 중간: 14px 굵은 제목 (색상으로 구분: `#00aaff`, `#006aff`, `#004cbe`)
- 하단: 14px 일반 설명
#### F. 비교 박스 2열 (2-1_02 BIM 페이지)
```
구조: 2개 GROUP 나란히
├── GROUP 327x116
│ ├── RECTANGLE #006aff (배경)
│ └── FRAME (그라데이션 내부)
└── GROUP 325x116
├── RECTANGLE #006aff (배경)
└── FRAME (그라데이션 내부)
+ DX/BIM/VS 라벨 (20px/w700, #ffffff)
```
- 파란 배경 박스 2개 나란히
- 내부에 방사형 그라데이션
- 가운데 "VS" 라벨
#### G. 이미지 그리드 2열 (2-1_02 BIM 페이지)
```
구조: 2개 GROUP 나란히
├── GROUP 460x354
│ ├── RECTANGLE 그라데이션 오버레이
│ └── RECTANGLE IMG (실제 이미지)
└── GROUP 460x354
├── RECTANGLE 그라데이션 오버레이
└── RECTANGLE IMG (실제 이미지)
```
- 2열 이미지 나란히 (460x354 각)
- 이미지 위에 그라데이션 오버레이 (어두워지는 효과)
#### H. 산맥 시각화 (2-1_02 BIM 페이지)
```
구조: GROUP 920x183
├── RECTANGLE 그라데이션 배경
├── GROUP 벡터 산맥 라인 (20+ VECTOR)
└── GROUP 수직 라인 마커
```
- **이미지로 export** (벡터 라인이 너무 복잡)
#### I. 원형 라벨 (2-1_02 BIM 페이지)
```
구조: GROUP 190x190
├── GROUP (원형 테두리 그룹)
├── ELLIPSE 151x151 그라데이션
├── ELLIPSE 145x145 그라데이션
└── TEXT 20px/w700 #ffffff — "단계별 BIM의 활용"
```
- 중앙 큰 원 + 텍스트
- 이중 원 테두리 (그라데이션)
---
## 4. 블록 매핑 (Figma 패턴 → design_agent 블록)
| Figma 패턴 | design_agent 블록 | 구현 방식 | 상태 |
|------------|-----------------|---------|------|
| section_title | `section-title` | HTML/CSS | **신규 필요** |
| sub_제목,내용 | 기존 없음 → `topic-header` | HTML/CSS (좌:제목 우:설명) | **신규 필요** |
| 카드 3열 (이미지+제목+설명) | `card-grid` 변형 | HTML/CSS (이미지 추가) | **변형 필요** |
| 비교 박스 2열 | `comparison` | HTML/CSS | ✅ 기존 |
| 이미지 그리드 2열 | `image-gallery` | HTML + 이미지 | **신규 필요** |
| 원형 라벨 | `circle-label` | CSS 원 + 텍스트 | **신규 필요** |
| 배경 헤더 (bg) | - | **이미지 export** | Figma export |
| 산맥 시각화 | - | **이미지 export** | Figma export |
| 벡터 웨이브 | - | **이미지 export** | Figma export |
| DX/BIM/VS 비교 라벨 | `comparison` 내부 | HTML/CSS | ✅ 기존 활용 |
### 이미지로 export해야 하는 요소
| 요소 | 이유 | export 형식 |
|------|------|-----------|
| bg (배경 헤더) | 그라데이션+웨이브+마스크 | PNG (배경용) |
| 산맥 시각화 | 20+ 벡터 라인 | PNG 또는 SVG |
| 이미지 오버레이 그라데이션 | CSS로 가능하지만 Figma 원본이 더 정확 | CSS gradient (재현 가능) |
| 3D 렌더링 이미지 | Figma 내 이미지 에셋 | PNG |
---
## 5. 디자인 토큰 업데이트 제안
기존 `tokens.css`에 추가가 필요한 토큰:
```css
/* Figma 기반 추가 토큰 */
--color-accent-deep: #004cbe; /* Figma 진한 파란 (꼭지 제목) */
--color-accent-bright: #006aff; /* Figma 밝은 파란 (카드 헤더, 박스) */
--color-accent-sky: #6bcdff; /* Figma 하늘색 (BIM 라벨) */
--color-accent-cyan: #00aaff; /* Figma 시안 (설계단계) */
--font-page-title: 35px; /* Figma 페이지 타이틀 */
--font-topic-title: 24px; /* Figma 꼭지 제목 */
--font-card-title: 14px; /* Figma 카드 내 제목 */
--font-en-subtitle: 15px; /* Figma 영문 서브타이틀 */
--font-tag: 20px; /* Figma 태그/라벨 (DX, BIM, VS) */
```
---
## 6. 다음 단계
### 즉시 가능 (HTML/CSS로 구현)
1. `section-title` 블록 — 영문+한글 2줄 타이틀
2. `topic-header` 블록 — 좌:질문 우:설명 (742px, 240:422 비율)
3. `card-grid` 이미지 변형 — 상단 이미지 + 하단 텍스트
4. `image-gallery` 블록 — 2열 이미지 + 오버레이
5. `circle-label` 블록 — CSS 원형 + 중앙 텍스트
### Figma에서 이미지 export 필요
1. 배경 헤더 (bg) — 각 프레임의 상단 파란 영역
2. 산맥/웨이브 시각화
3. 3D 렌더링 이미지 (시공, 설계, 유지관리 등)
4. 아이콘 에셋
### AI 이미지 생성 영역 (레이어 방식)
1. 순환도/관계도 배경
2. 3D 효과가 필요한 다이어그램
3. 복합 시각 효과 (글로우, 보케, 입체)

BIN
docs/figma-assets/2-1_02_full_frame.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 784 KiB

BIN
docs/figma-assets/2-2_01_full_hd.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
docs/figma-assets/2-2_01_icon_card_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
docs/figma-assets/2-2_01_icon_card_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
docs/figma-assets/2-2_01_icon_card_3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 497 B

BIN
docs/figma-assets/2-2_01_icon_card_4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

BIN
docs/figma-assets/2-2_01_icon_card_5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 852 B

BIN
docs/figma-assets/2-2_02_full_hd.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 746 KiB

BIN
docs/figma-assets/2-2_03_full_hd.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 717 KiB

BIN
docs/figma-assets/2-2_04_full_hd.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 964 KiB

BIN
docs/figma-assets/2-2_icon_card_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 273 KiB

BIN
docs/figma-assets/2-2_icon_card_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 334 KiB

BIN
docs/figma-assets/2-2_icon_card_3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 336 KiB

BIN
docs/figma-assets/2-2_icon_card_4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 457 KiB

BIN
docs/figma-assets/2-2_icon_card_5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 266 KiB

BIN
docs/figma-assets/bg_header.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 522 KiB

BIN
docs/figma-assets/bim_card_3col.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
docs/figma-assets/bim_circle_label.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 170 B

BIN
docs/figma-assets/bim_comparison_table.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 162 B

Some files were not shown because too many files have changed in this diff Show More