kyeongmin
9bd9dad9ac
## 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>
740 lines
28 KiB
YAML
740 lines
28 KiB
YAML
# Design Agent 블록 카탈로그 (45개)
|
|
# 디자인 팀장이 콘텐츠에 적합한 블록을 선택할 때 참조하는 메뉴판
|
|
#
|
|
# 블록별 height_cost 참고 (슬라이드 720px 기준):
|
|
# compact: ~70px (인라인 강조, 구분선)
|
|
# medium: ~150px (카드, 인용, 헤더)
|
|
# large: ~200px (비교표, 이미지, 다이어그램)
|
|
# xlarge: ~400px (SVG 벤 다이어그램, 풀 이미지)
|
|
#
|
|
# 규칙:
|
|
# - when: 이 블록을 선택해야 하는 구체적 상황
|
|
# - not_for: 이 블록을 선택하면 안 되는 상황 + 대신 사용할 블록
|
|
# - visual: AI가 상상할 수 있도록 시각적 형태를 구체적으로 설명
|
|
|
|
version: "2.0"
|
|
|
|
blocks:
|
|
|
|
# ═══════════════════════════════
|
|
# headers/ — 타이틀, 꼭지 헤더
|
|
# ═══════════════════════════════
|
|
|
|
- id: section-title-with-bg
|
|
name: 배경 이미지 타이틀
|
|
template: blocks/headers/section-title-with-bg.html
|
|
height_cost: large
|
|
visual: "전체 너비 배경 이미지(파란 그라데이션+웨이브) 위에 흰색 영문 소제목(15px) + 한글 대제목(35px). 높이 약 500px."
|
|
when: >
|
|
자세히보기 페이지의 맨 첫 화면.
|
|
배경 이미지가 있고 그 위에 타이틀을 올릴 때.
|
|
페이지의 주제를 시각적으로 강렬하게 선언할 때.
|
|
not_for: >
|
|
슬라이드 내부의 소제목 → topic-left-right 또는 topic-center 사용.
|
|
배경 이미지 없이 텍스트만 → topic-center 사용.
|
|
높이 예산이 200px 이하일 때 → section-header-bar 사용.
|
|
slots:
|
|
required: [title_ko]
|
|
optional: [title_en, breadcrumb, bg_image]
|
|
|
|
- id: section-header-bar
|
|
name: 섹션 헤더 바
|
|
template: blocks/headers/section-header-bar.html
|
|
height_cost: compact
|
|
visual: "전체 너비 파란 배경 바(높이 ~50px) + 중앙 흰색 제목. 섹션 구분용. 컴팩트."
|
|
when: >
|
|
섹션 시작을 가볍게 표시할 때.
|
|
같은 페이지 안에서 주제가 전환될 때.
|
|
높이 예산이 적을 때 섹션 구분이 필요할 때.
|
|
not_for: >
|
|
페이지 전체 타이틀 → section-title-with-bg 사용.
|
|
꼭지별 소제목 → topic-left-right 또는 topic-numbered 사용.
|
|
slots:
|
|
required: [title]
|
|
optional: [subtitle]
|
|
|
|
- id: topic-left-right
|
|
name: 좌우 꼭지 헤더
|
|
template: blocks/headers/topic-left-right.html
|
|
height_cost: compact
|
|
visual: "좌측에 파란 굵은 제목(24px, 240px 너비) + 우측에 본문 설명. 가로 2단 배치."
|
|
when: >
|
|
꼭지 시작부에 질문형 제목 + 답변형 설명 구조일 때.
|
|
예: '단순 BIM의 적용이 D/X가 아닙니다' + '설명...'
|
|
좌측에 핵심 주장, 우측에 근거/설명을 배치할 때.
|
|
not_for: >
|
|
중앙 정렬 대제목 → topic-center 사용.
|
|
번호가 붙은 순서형 꼭지 → topic-numbered 사용.
|
|
섹션 전체 타이틀 → section-title-with-bg 사용.
|
|
slots:
|
|
required: [title, description]
|
|
optional: []
|
|
|
|
- id: topic-center
|
|
name: 중앙 정렬 꼭지 헤더
|
|
template: blocks/headers/topic-center.html
|
|
height_cost: medium
|
|
visual: "중앙 정렬 대제목(26px 굵게) + 파란 서브타이틀 + 하단 설명. 단독 강조."
|
|
when: >
|
|
하나의 주제를 페이지 중심에 크게 선언할 때.
|
|
예: '디지털전환을 위한 S/W 필요성'
|
|
서브타이틀이나 부연 설명이 함께 올 때.
|
|
not_for: >
|
|
좌:제목 우:설명 구조 → topic-left-right 사용.
|
|
번호 순서 → topic-numbered 사용.
|
|
slots:
|
|
required: [title]
|
|
optional: [subtitle, description]
|
|
|
|
- id: topic-numbered
|
|
name: 번호 꼭지 헤더
|
|
template: blocks/headers/topic-numbered.html
|
|
height_cost: compact
|
|
visual: "파란 원형 번호(①②③) + 굵은 제목 + 파란 구분선 + 설명. 세로 배치."
|
|
when: >
|
|
순서가 있는 꼭지를 시작할 때. 1번, 2번, 3번 식의 단계별 섹션.
|
|
실행 조건, 요구사항 등을 순서대로 설명할 때.
|
|
not_for: >
|
|
순서 없는 꼭지 → topic-left-right 또는 topic-center 사용.
|
|
카드 안의 순서 → card-numbered 사용.
|
|
slots:
|
|
required: [number, title]
|
|
optional: [description, color]
|
|
|
|
# ═══════════════════════════════
|
|
# cards/ — 카드 계열
|
|
# ═══════════════════════════════
|
|
|
|
- id: card-image-3col
|
|
name: 이미지 카드 3열
|
|
template: blocks/cards/card-image-3col.html
|
|
height_cost: large
|
|
visual: "3열 카드. 각 카드 상단에 이미지(160px) + 하단에 색상 밑줄 제목 + 영문 + 불릿 목록."
|
|
when: >
|
|
3개 항목을 각각 고유 이미지와 함께 설명할 때.
|
|
예: 설계단계(3D 모델) / 시공단계(현장) / 유지관리(자산)
|
|
단계별 설명에 이미지가 핵심인 경우.
|
|
not_for: >
|
|
이미지 없이 텍스트만 → card-text-grid 사용.
|
|
키워드+짧은 설명만 강조 → card-dark-overlay 사용.
|
|
2개 비교 → compare-pill-pair + comparison-table 조합 사용.
|
|
slots:
|
|
required: ["cards[]"]
|
|
optional: []
|
|
|
|
- id: card-text-grid
|
|
name: 텍스트 카드 그리드
|
|
template: blocks/cards/card-text-grid.html
|
|
height_cost: medium
|
|
visual: "2~4열 카드. 각 카드 상단 파란 액센트 라인 + 제목 + 카테고리 뱃지 + 설명 + 출처."
|
|
when: >
|
|
용어를 여러 개 정의할 때 (2~4개).
|
|
예: 건설산업/BIM/DX 각각의 정의와 출처
|
|
이미지 없이 텍스트 정보만 나열할 때.
|
|
not_for: >
|
|
이미지가 핵심 → card-image-3col 사용.
|
|
키워드만 강조 → card-dark-overlay 사용.
|
|
순서 번호가 필요 → card-numbered 사용.
|
|
slots:
|
|
required: ["cards[]"]
|
|
optional: []
|
|
|
|
- id: card-dark-overlay
|
|
name: 다크 오버레이 카드
|
|
template: blocks/cards/card-dark-overlay.html
|
|
height_cost: medium
|
|
visual: "3~5열 카드. 다크 배경 이미지 + 그라데이션 오버레이 + 흰색 굵은 제목 + 짧은 설명."
|
|
when: >
|
|
키워드+짧은 설명(2줄 이내)을 시각적으로 강조할 때.
|
|
예: 협업지원/오류감소/생산성향상/비용절감/데이터관리
|
|
배경 이미지가 있는 키워드 나열.
|
|
not_for: >
|
|
긴 설명(3줄 이상) → card-text-grid 사용.
|
|
이미지가 핵심(크게 보여야 함) → card-image-3col 사용.
|
|
slots:
|
|
required: ["cards[]"]
|
|
optional: []
|
|
|
|
- id: card-tag-image
|
|
name: 태그 이미지 카드
|
|
template: blocks/cards/card-tag-image.html
|
|
height_cost: large
|
|
visual: "3열 카드. 좌상단 색상 태그 라벨 + 이미지 + 제목 + 설명."
|
|
when: >
|
|
카테고리별 분류가 핵심일 때. 태그로 구분.
|
|
예: 제조업(파란) / 건축(초록) / 인프라·토목(빨간)
|
|
not_for: >
|
|
태그 불필요 → card-image-3col 사용.
|
|
이미지 없음 → card-text-grid 사용.
|
|
slots:
|
|
required: ["cards[]"]
|
|
optional: []
|
|
|
|
- id: card-icon-desc
|
|
name: 아이콘 설명 카드
|
|
template: blocks/cards/card-icon-desc.html
|
|
height_cost: medium
|
|
visual: "2~4열. 중앙 큰 이모지 아이콘(2.5rem) + 굵은 제목 + 설명. 밝은 배경."
|
|
when: >
|
|
기능/특성/장점을 아이콘과 함께 나열.
|
|
예: 🔧기술기반 / 💻S/W역량 / 🌏여건조성
|
|
not_for: >
|
|
이미지(사진) 필요 → card-image-3col 사용.
|
|
순서 번호 → card-numbered 사용.
|
|
slots:
|
|
required: ["cards[]"]
|
|
optional: []
|
|
|
|
- id: card-compare-3col
|
|
name: 3단 비교 카드
|
|
template: blocks/cards/card-compare-3col.html
|
|
height_cost: large
|
|
visual: "3열 카드. 각 카드 상단 색상 헤더(제목+서브) + 이미지 + 불릿."
|
|
when: >
|
|
3개 카테고리를 비교. 각 카테고리에 다른 색상 헤더.
|
|
예: 상용SW(회색) vs 3rd Party(파랑) vs 전문SW(빨강)
|
|
not_for: >
|
|
2개 비교 → compare-pill-pair + comparison-table 사용.
|
|
다항목 표 → compare-3col-badge 사용.
|
|
slots:
|
|
required: ["cards[]"]
|
|
optional: []
|
|
|
|
- id: card-step-vertical
|
|
name: 세로 단계 카드
|
|
template: blocks/cards/card-step-vertical.html
|
|
height_cost: xlarge
|
|
visual: "세로 나열. 좌측 색상 마커(단계명) + 우측 콘텐츠 박스(제목+이미지+설명). 연결선."
|
|
when: >
|
|
생애주기 단계별 설명. 각 단계에 이미지+상세 설명.
|
|
예: 설계단계 → 시공단계 → 운영단계
|
|
not_for: >
|
|
가로 흐름(간단) → process-horizontal 사용.
|
|
높이 예산 부족 → card-numbered 사용.
|
|
slots:
|
|
required: ["steps[]"]
|
|
optional: []
|
|
|
|
- id: card-image-round
|
|
name: 원형 이미지 카드
|
|
template: blocks/cards/card-image-round.html
|
|
height_cost: large
|
|
visual: "2~3열. 원형 이미지(140px, 테두리+그림자) + 제목 + 설명. 중앙 정렬."
|
|
when: >
|
|
포트폴리오형 나열. 비전/가치 표현. 원형 이미지.
|
|
not_for: >
|
|
사각형 이미지 → card-image-3col 사용.
|
|
이미지 없음 → card-icon-desc 사용.
|
|
slots:
|
|
required: ["cards[]"]
|
|
optional: []
|
|
|
|
- id: card-stat-number
|
|
name: 통계 숫자 카드
|
|
template: blocks/cards/card-stat-number.html
|
|
height_cost: medium
|
|
visual: "2~4열. 매우 큰 숫자(36px, 색상) + 단위 + 라벨 + 설명."
|
|
when: >
|
|
KPI, 성과 수치, 목표 달성률, 비용 절감율.
|
|
예: 30% 절감 / 40% 감소 / 220명+ 인력
|
|
not_for: >
|
|
숫자가 아닌 텍스트 → card-text-grid 사용.
|
|
slots:
|
|
required: ["stats[]"]
|
|
optional: []
|
|
|
|
- id: card-numbered
|
|
name: 번호 항목 카드
|
|
template: blocks/cards/card-numbered.html
|
|
height_cost: medium
|
|
visual: "세로 나열. 색상 원형 번호(①②③④) + 제목 + 설명. 밝은 배경."
|
|
when: >
|
|
순서가 있는 항목을 세로로 나열 (실행 단계, 조건, 요구사항).
|
|
예: 1.요구사항분석 → 2.SW개발 → 3.System통합 → 4.교육
|
|
not_for: >
|
|
순서 없음 → card-text-grid 사용.
|
|
이미지 포함 단계 → card-step-vertical 사용.
|
|
가로 흐름 → process-horizontal 사용.
|
|
slots:
|
|
required: ["items[]"]
|
|
optional: []
|
|
|
|
# ═══════════════════════════════
|
|
# tables/ — 표/비교 계열
|
|
# ═══════════════════════════════
|
|
|
|
- id: compare-3col-badge
|
|
name: VS 배지 비교표
|
|
template: blocks/tables/compare-3col-badge.html
|
|
height_cost: large
|
|
visual: "3단 테이블. 좌(하늘색 헤더) | 중앙(파란 VS 배지) | 우(파란 헤더). 행별 비교."
|
|
when: >
|
|
두 개념 다항목 비교 (5행 이상). 중앙에 VS 배지.
|
|
예: BIM vs DX — S/W, 프로세스, 성과물, 활용 비교
|
|
not_for: >
|
|
시각적 대비(짧음) → compare-pill-pair 사용.
|
|
2단 분할 → compare-2col-split 사용.
|
|
범용 데이터 → table-simple-striped 사용.
|
|
slots:
|
|
required: ["headers[]", "rows[][]"]
|
|
optional: []
|
|
|
|
- id: compare-2col-split
|
|
name: 2단 분할 비교표
|
|
template: blocks/tables/compare-2col-split.html
|
|
height_cost: large
|
|
visual: "파란 헤더(좌/구분/우) + 행별 좌:항목 | 중앙:기준라벨(파란) | 우:항목."
|
|
when: >
|
|
두 기술의 항목별 상세 비교.
|
|
예: GIS vs BIM — 개념/분석/도면/발전
|
|
not_for: >
|
|
VS 배지 필요 → compare-3col-badge 사용.
|
|
범용 데이터 → table-simple-striped 사용.
|
|
slots:
|
|
required: [left_title, right_title, "rows[]"]
|
|
optional: []
|
|
|
|
- id: table-simple-striped
|
|
name: 범용 줄무늬 테이블
|
|
template: blocks/tables/table-simple-striped.html
|
|
height_cost: medium
|
|
visual: "진한 남색 헤더 + 줄무늬 행 교차. 첫 열 굵은 글씨. 범용."
|
|
when: >
|
|
비교가 아닌 일반 데이터 표.
|
|
예: 구분/현재/목표/비고, 스펙표, 일정표
|
|
not_for: >
|
|
A vs B 비교 → compare-3col-badge 사용.
|
|
slots:
|
|
required: ["headers[]", "rows[][]"]
|
|
optional: []
|
|
|
|
# ═══════════════════════════════
|
|
# visuals/ — 시각 요소 (SVG)
|
|
# ═══════════════════════════════
|
|
|
|
- id: venn-diagram
|
|
name: SVG 벤 다이어그램
|
|
template: blocks/visuals/venn-diagram.html
|
|
height_cost: xlarge
|
|
visual: "SVG. 진한 파란 큰 원(동심원 링, 입체감) + 3개 작은 원(주황/민트/골드). 그라데이션+글로우."
|
|
when: >
|
|
상위-하위 포함 관계. 기술 융합 구조.
|
|
예: 건설산업DX 안에 GIS/BIM/디지털트윈
|
|
★ 반드시 단독 배치. 다른 블록과 같은 zone에 쌓지 마라.
|
|
not_for: >
|
|
텍스트로 관계 설명 가능하면 사용 금지.
|
|
sidebar(35%) 배치 금지. 높이 300px 미만 금지.
|
|
slots:
|
|
required: [center_label, "items[]"]
|
|
optional: [center_sub, description]
|
|
|
|
- id: circle-gradient
|
|
name: 원형 라벨
|
|
template: blocks/visuals/circle-gradient.html
|
|
height_cost: compact
|
|
visual: "파란 그라데이션 원(190px) + 이중 테두리 + 중앙 흰색 텍스트."
|
|
when: >
|
|
섹션 전환점 키워드 강조. 아래에 카드/표 올 때 주제 선언.
|
|
not_for: >
|
|
본문 텍스트 → topic-header 계열. 결론 → conclusion-accent-bar.
|
|
slots:
|
|
required: [label]
|
|
optional: [sub_label]
|
|
|
|
- id: compare-pill-pair
|
|
name: 둥근 박스 VS
|
|
template: blocks/visuals/compare-pill-pair.html
|
|
height_cost: compact
|
|
visual: "이중 테두리 둥근 박스 2개 나란히 + 'VS'. 하늘색 테두리 + 시안 텍스트."
|
|
when: >
|
|
2개 개념 시각적 대비 (비교 테이블 위 헤더로).
|
|
예: 'DX 협업 프로세스' VS 'BIM 정보 관리'
|
|
not_for: >
|
|
상세 비교(5행+) → compare-3col-badge 사용.
|
|
3개 이상 → card-compare-3col 사용.
|
|
slots:
|
|
required: [left_label, right_label]
|
|
optional: [left_sub, right_sub]
|
|
|
|
- id: process-horizontal
|
|
name: 가로 단계 흐름
|
|
template: blocks/visuals/process-horizontal.html
|
|
height_cost: medium
|
|
visual: "가로 방향. 파란 원형 번호 + 제목 + 설명(카드). → 화살표."
|
|
when: >
|
|
논리적 순서를 가로로 (1→2→3→4). 프로세스 흐름.
|
|
not_for: >
|
|
시간 기반(연도) → timeline 사용.
|
|
세로 나열 → card-numbered 사용.
|
|
slots:
|
|
required: ["steps[]"]
|
|
optional: []
|
|
|
|
- id: flow-arrow-horizontal
|
|
name: 가로 흐름 화살표
|
|
template: blocks/visuals/flow-arrow-horizontal.html
|
|
height_cost: compact
|
|
visual: "SVG. 색상 둥근 캡슐이 가로 나열 + 사이 화살표. 컴팩트."
|
|
when: >
|
|
기술 발전/전환 흐름을 간결하게.
|
|
예: GIS → SPCC → 토공 → BIM
|
|
not_for: >
|
|
각 단계에 설명 필요 → process-horizontal 사용.
|
|
slots:
|
|
required: ["steps[]"]
|
|
optional: []
|
|
|
|
- id: keyword-circle-row
|
|
name: 키워드 원형 행
|
|
template: blocks/visuals/keyword-circle-row.html
|
|
height_cost: medium
|
|
visual: "SVG 그라데이션 원 안에 큰 글자(G,S,I,M) + 아래 라벨 + 설명."
|
|
when: >
|
|
약어 풀이. 핵심 키워드를 원형으로 시각 강조.
|
|
예: G(Geographic) + S(Structure) + I(Information) + M(Model)
|
|
not_for: >
|
|
아이콘+설명 → card-icon-desc 사용. 용어 정의 → card-text-grid 사용.
|
|
slots:
|
|
required: ["keywords[]"]
|
|
optional: []
|
|
|
|
- id: layer-diagram
|
|
name: 레이어 다이어그램
|
|
template: blocks/visuals/layer-diagram.html
|
|
height_cost: large
|
|
visual: "SVG. 겹쳐진 사다리꼴 레이어(3D 효과). 각 레이어에 라벨+색상."
|
|
when: >
|
|
기술 레이어/스택 구조.
|
|
예: Digital Twin / BIM / GIS / 실세계 인프라
|
|
not_for: >
|
|
포함 관계(원형) → venn-diagram. 좁은→넓은 → pyramid-hierarchy.
|
|
slots:
|
|
required: ["layers[]"]
|
|
optional: [title]
|
|
|
|
- id: timeline-vertical
|
|
name: 세로 타임라인
|
|
template: blocks/visuals/timeline-vertical.html
|
|
height_cost: large
|
|
visual: "좌측 세로 선 + SVG 원형 마커(색상별) + 우측 연도+제목+설명."
|
|
when: >
|
|
연혁, 정책 시행 일정, 로드맵 (4개+ 이벤트).
|
|
예: 2020→2022→2023→2025
|
|
not_for: >
|
|
이벤트 3개 이하 → timeline-horizontal 사용.
|
|
논리적 순서 → process-horizontal 사용.
|
|
slots:
|
|
required: ["events[]"]
|
|
optional: []
|
|
|
|
- id: timeline-horizontal
|
|
name: 가로 타임라인
|
|
template: blocks/visuals/timeline-horizontal.html
|
|
height_cost: compact
|
|
visual: "SVG. 가로 선 + 원형 마커 + 위 연도 + 아래 제목. 컴팩트."
|
|
when: >
|
|
짧은 일정/마일스톤 (3~5개). 높이 예산 적을 때.
|
|
not_for: >
|
|
6개 이상 → timeline-vertical 사용.
|
|
slots:
|
|
required: ["events[]"]
|
|
optional: []
|
|
|
|
- id: pyramid-hierarchy
|
|
name: 피라미드 계층
|
|
template: blocks/visuals/pyramid-hierarchy.html
|
|
height_cost: large
|
|
visual: "SVG. 위→아래 넓어지는 사각형(그라데이션). 상위→하위 위계."
|
|
when: >
|
|
위계, 우선순위, 좁은(핵심)→넓은(기반).
|
|
예: DX → BIM+GIS+DT → 프로세스혁신 → 기반인프라
|
|
not_for: >
|
|
포함 관계 → venn-diagram. 레이어 스택 → layer-diagram.
|
|
slots:
|
|
required: ["levels[]"]
|
|
optional: []
|
|
|
|
# ═══════════════════════════════
|
|
# emphasis/ — 강조, 인용, 결론
|
|
# ═══════════════════════════════
|
|
|
|
- id: quote-left-border
|
|
name: 좌측 라인 인용
|
|
template: blocks/emphasis/quote-left-border.html
|
|
height_cost: compact
|
|
visual: "좌측 빨간 세로 라인(3px) + 연한 배경 + 인용 텍스트 + 출처(기울임)."
|
|
when: >
|
|
짧은 인용문 + 출처. 문제 제기, 핵심 주장.
|
|
not_for: >
|
|
큰따옴표 장식 → quote-big-mark. 질문형 → quote-question. 결론 → conclusion-accent-bar.
|
|
slots:
|
|
required: [quote_text]
|
|
optional: [source]
|
|
|
|
- id: quote-big-mark
|
|
name: 큰따옴표 인용
|
|
template: blocks/emphasis/quote-big-mark.html
|
|
height_cost: medium
|
|
visual: "좌상단 ❝ + 우하단 ❞ 큰따옴표 장식. 연한 배경 박스 + 인용문 + 우측 출처."
|
|
when: >
|
|
임팩트 있는 문제 제기. 시각적으로 인용임을 명확히.
|
|
not_for: >
|
|
짧은 인용 → quote-left-border. 질문 → quote-question.
|
|
slots:
|
|
required: [quote_text]
|
|
optional: [source]
|
|
|
|
- id: quote-question
|
|
name: 질문형 강조
|
|
template: blocks/emphasis/quote-question.html
|
|
height_cost: medium
|
|
visual: "밝은 파란 배경 + 파란 테두리 + 큰 질문 텍스트(22px) + 부연 설명."
|
|
when: >
|
|
독자에게 질문. 문제 인식 유도, 전환점.
|
|
예: '지금의 방식으로도 가능할까?'
|
|
not_for: >
|
|
인용(출처) → quote-left-border. 결론 → conclusion-accent-bar.
|
|
slots:
|
|
required: [question]
|
|
optional: [description]
|
|
|
|
- id: conclusion-accent-bar
|
|
name: 결론 액센트 바
|
|
template: blocks/emphasis/conclusion-accent-bar.html
|
|
height_cost: compact
|
|
visual: "밝은 회색 배경 + 좌측 파란 세로 라인(4px) + 파란 라벨 + 진한 결론 텍스트."
|
|
when: >
|
|
페이지 하단 핵심 한 줄 요약.
|
|
not_for: >
|
|
본문 중간 강조 → banner-gradient. 인용 → quote 계열.
|
|
slots:
|
|
required: [conclusion_text]
|
|
optional: [label]
|
|
|
|
- id: comparison-2col
|
|
name: 2단 병렬 비교
|
|
template: blocks/emphasis/comparison-2col.html
|
|
height_cost: medium
|
|
visual: "좌우 2단. 좌 파란 헤더 + 우 빨간 헤더. 중앙 구분선. 서브타이틀+본문."
|
|
when: >
|
|
A vs B 직접 비교. 장단점, Before/After.
|
|
not_for: >
|
|
다항목 표(5행+) → compare-3col-badge. 시각 대비 → compare-pill-pair.
|
|
slots:
|
|
required: [left_title, left_content, right_title, right_content]
|
|
optional: [left_subtitle, right_subtitle]
|
|
|
|
- id: banner-gradient
|
|
name: 그라데이션 배너
|
|
template: blocks/emphasis/banner-gradient.html
|
|
height_cost: compact
|
|
visual: "전체 너비 파란 그라데이션 배경(둥근 모서리) + 중앙 흰색 텍스트."
|
|
when: >
|
|
섹션 구분, 핵심 선언, 강조 문구.
|
|
not_for: >
|
|
하단 결론 → conclusion-accent-bar. 인용 → quote 계열.
|
|
slots:
|
|
required: [text]
|
|
optional: [sub_text]
|
|
|
|
- id: dark-bullet-list
|
|
name: 다크 배경 불릿
|
|
template: blocks/emphasis/dark-bullet-list.html
|
|
height_cost: medium
|
|
visual: "짙은 남색 배경 + 파란 제목 + 흰 텍스트 불릿. 파란 불릿 마커."
|
|
when: >
|
|
핵심 포인트를 짙은 배경 위에 강조. 시각적 무게감.
|
|
not_for: >
|
|
밝은 배경 → card-text-grid 또는 card-numbered.
|
|
slots:
|
|
required: ["bullets[]"]
|
|
optional: [title]
|
|
|
|
- id: highlight-strip
|
|
name: 강조 분류 스트립
|
|
template: blocks/emphasis/highlight-strip.html
|
|
height_cost: compact
|
|
visual: "가로 색상 구간들. 각 구간에 흰 라벨. 카테고리 색상 분류 바."
|
|
when: >
|
|
카테고리별 색상 분류를 한 줄로.
|
|
예: 상용(회색) | 3rd Party(파랑) | 전문SW(빨강)
|
|
not_for: >
|
|
탭 전환 → tab-label-row. 결론 → banner-gradient.
|
|
slots:
|
|
required: ["segments[]"]
|
|
optional: []
|
|
|
|
- id: callout-solution
|
|
name: 솔루션 콜아웃
|
|
template: blocks/emphasis/callout-solution.html
|
|
height_cost: medium
|
|
visual: "밝은 파란 배경 + 파란 테두리 + 아이콘 + 파란 제목 + 설명 + 출처."
|
|
when: >
|
|
핵심 해결책, 솔루션, 방향성 강조.
|
|
예: '💡 Solution 제시 포인트'
|
|
not_for: >
|
|
경고/문제 → callout-warning. 인용 → quote 계열.
|
|
slots:
|
|
required: [title, description]
|
|
optional: [icon, source]
|
|
|
|
- id: callout-warning
|
|
name: 경고 콜아웃
|
|
template: blocks/emphasis/callout-warning.html
|
|
height_cost: medium
|
|
visual: "연한 빨간 배경 + 빨간 테두리 + 아이콘 + 빨간 제목 + 진한 빨간 설명."
|
|
when: >
|
|
문제점 지적, 주의사항, 잘못된 접근 경고.
|
|
예: '⚠️ 현재 접근 방식의 한계'
|
|
not_for: >
|
|
해결책 → callout-solution. 인용 → quote 계열.
|
|
slots:
|
|
required: [title, description]
|
|
optional: [icon]
|
|
|
|
- id: tab-label-row
|
|
name: 탭 라벨 행
|
|
template: blocks/emphasis/tab-label-row.html
|
|
height_cost: compact
|
|
visual: "가로 탭 버튼. 선택됨=색상 배경+흰 텍스트, 나머지=회색. 밝은 바탕."
|
|
when: >
|
|
카테고리 전환/분류 표시.
|
|
예: 제조 | 건축 | [인프라/토목]
|
|
not_for: >
|
|
색상 바 → highlight-strip. 실제 클릭 전환 미지원.
|
|
slots:
|
|
required: ["tabs[]"]
|
|
optional: []
|
|
|
|
- id: divider-text
|
|
name: 텍스트 구분선
|
|
template: blocks/emphasis/divider-text.html
|
|
height_cost: compact
|
|
visual: "좌우 가는 회색 선 + 중앙 작은 회색 텍스트. 시각적 휴식점."
|
|
when: >
|
|
섹션 구분, 주제 전환점에 가벼운 구분.
|
|
예: ── 핵심 요약 ──
|
|
not_for: >
|
|
강한 구분 → section-header-bar. 결론 → conclusion-accent-bar.
|
|
slots:
|
|
required: [text]
|
|
optional: []
|
|
|
|
- id: details-block
|
|
name: 자세히보기 (접기/펼치기)
|
|
template: blocks/emphasis/details-block.html
|
|
height_cost: compact
|
|
visual: "접힌 요약 1줄 + 좌측 파란 액센트 라인. 클릭하면 상세 내용 펼침. HTML 네이티브 <details> 사용."
|
|
when: >
|
|
너무 구체적/세부적인 내용을 접어서 보여줄 때.
|
|
본문 흐름을 끊지 않으면서 상세 데이터(비교표, 스펙 등)를 제공할 때.
|
|
detail_target 꼭지.
|
|
not_for: >
|
|
본문 핵심 내용 (접으면 안 됨). 결론 → conclusion-accent-bar.
|
|
일반 텍스트 → topic-header 또는 card 사용.
|
|
slots:
|
|
required: [summary_text, detail_content]
|
|
optional: [label]
|
|
|
|
# ═══════════════════════════════
|
|
# media/ — 이미지/미디어
|
|
# ═══════════════════════════════
|
|
|
|
- id: image-row-2col
|
|
name: 이미지 2열
|
|
template: blocks/media/image-row-2col.html
|
|
height_cost: large
|
|
visual: "이미지 2장 나란히. 높이 354px. 캡션 선택."
|
|
when: >
|
|
시공 사진 2장, 현장 비교 나란히.
|
|
not_for: >
|
|
4장 → image-grid-2x2. 이미지+텍스트 → image-side-text. 1장 → image-full-caption.
|
|
slots:
|
|
required: ["images[]"]
|
|
optional: []
|
|
|
|
- id: image-grid-2x2
|
|
name: 이미지 2x2 그리드
|
|
template: blocks/media/image-grid-2x2.html
|
|
height_cost: large
|
|
visual: "이미지 4장 2x2 격자. 높이 200px 각. 캡션 선택."
|
|
when: >
|
|
현장 사진 4장, 4개 관점 이미지.
|
|
not_for: >
|
|
2장 → image-row-2col. 이미지+텍스트 → image-side-text.
|
|
slots:
|
|
required: ["images[]"]
|
|
optional: []
|
|
|
|
- id: image-side-text
|
|
name: 이미지+텍스트 가로
|
|
template: blocks/media/image-side-text.html
|
|
height_cost: medium
|
|
visual: "좌측 이미지(320px) + 우측 제목+설명+불릿. 가로 배치."
|
|
when: >
|
|
이미지에 대한 설명. 제품/시스템 소개.
|
|
not_for: >
|
|
이미지만 → image-row-2col. 여러 장 → image-grid-2x2.
|
|
slots:
|
|
required: [image_src]
|
|
optional: [image_alt, title, description, bullets]
|
|
|
|
- id: image-full-caption
|
|
name: 전체 너비 이미지
|
|
template: blocks/media/image-full-caption.html
|
|
height_cost: large
|
|
visual: "전체 너비 이미지 1장(둥근 모서리) + 하단 캡션."
|
|
when: >
|
|
핵심 도표, 대형 다이어그램, 전경 사진을 크게.
|
|
not_for: >
|
|
2장+ → image-row-2col/image-grid-2x2. 이미지+텍스트 → image-side-text.
|
|
slots:
|
|
required: [src]
|
|
optional: [alt, caption]
|
|
|
|
- id: image-before-after
|
|
name: Before/After 이미지
|
|
template: blocks/media/image-before-after.html
|
|
height_cost: large
|
|
visual: "좌 Before(회색 라벨) + → 화살표(파란) + 우 After(파란 라벨). 각각 이미지."
|
|
when: >
|
|
변화 전후 비교. 디지털 전환 전후, 공정 개선.
|
|
not_for: >
|
|
이미지 단순 나열 → image-row-2col. 텍스트 비교 → comparison-2col.
|
|
slots:
|
|
required: [before_src, after_src]
|
|
optional: [before_label, after_label, caption]
|
|
|
|
# ═══════════════════════════════
|
|
# 레이아웃 옵션
|
|
# ═══════════════════════════════
|
|
layouts:
|
|
- id: "65-35"
|
|
name: "6.5:3.5 좌우 분할"
|
|
grid_columns: "6.5fr 3.5fr"
|
|
when: "좌측 메인 + 우측 보조"
|
|
- id: "50-50"
|
|
name: "5:5 균등 분할"
|
|
grid_columns: "1fr 1fr"
|
|
when: "대등한 비교"
|
|
- id: "single"
|
|
name: "단일 컬럼"
|
|
grid_columns: "1fr"
|
|
when: "순차 구조"
|
|
- id: "35-65"
|
|
name: "3.5:6.5 좌우 분할"
|
|
grid_columns: "3.5fr 6.5fr"
|
|
when: "좌측 요약 + 우측 메인"
|
|
- id: "40-60"
|
|
name: "4:6 좌우 분할"
|
|
grid_columns: "4fr 6fr"
|
|
when: "좌측 설명 + 우측 시각화"
|
|
- id: "60-40"
|
|
name: "6:4 좌우 분할"
|
|
grid_columns: "6fr 4fr"
|
|
when: "좌측 메인 + 우측 보조"
|
|
|
|
# Phase 2 추가 예정
|
|
# - circle-orbit: 원형 궤도 배치 (SVG, N개 자동)
|
|
# - details-block: 자세히보기 (<details>/<summary>)
|