-  }})
+  }})
{{ badge_title }}
{% endif %}
diff --git a/templates/blocks/cards/compare-detail-gradient.html b/templates/blocks/cards/compare-detail-gradient.html
index 87ef7e5..ba1f441 100644
--- a/templates/blocks/cards/compare-detail-gradient.html
+++ b/templates/blocks/cards/compare-detail-gradient.html
@@ -9,7 +9,7 @@
- 좌측 헤더: 우측 라운드 + 텍스트 우정렬 (warm 그라디언트)
- 우측 헤더: 좌측 라운드 + 텍스트 좌정렬 (teal 그라디언트)
- CSS Grid 2열×N행: 좌/우 섹션 제목이 같은 Y선에 정렬
- - 첫 번째 섹션: As-Is → 화살표 → To-Be 수평 배치 가능
+ - 첫 섹션에 As-Is → 화살표 → To-Be 수평 배치 가능
수학적 계산:
좌/우 섹션 Y좌표 — Row1: 1166/1166(정렬), Row2: 1529/1467(62px차→Grid해결), Row3: 1845/1845(정렬)
-->
@@ -31,7 +31,7 @@
+
{{ badge_title }}
{% for b in row.left.asis %}
- {{ b }}
{% endfor %}
 }}){kind=icon}
+  }}){kind=icon}
{% for b in row.left.tobe %}
@@ -64,16 +64,27 @@
행 공유 → 좌/우 섹션 제목이 같은 Y선에 자동 정렬
Figma Row2 차이: 좌 y=1529, 우 y=1467 (62px) → Grid가 해결
*/
+/*
+ B안: Grid 배경에 좌/우 절반씩 연속 그라디언트
+ → 셀 경계가 안 보이고 Figma처럼 자연스러운 배경
+ → Grid 행 공유로 Y선 정렬도 유지
+*/
.block-cdg {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
overflow: hidden;
+ background: linear-gradient(90deg,
+ rgba(255,255,255,0.4) 0%,
+ rgba(57,50,30,0.12) 50%,
+ rgba(41,107,85,0.06) 50%,
+ rgba(255,255,255,0.4) 100%
+ );
}
-/* ── Headers (비대칭 라운드) ── */
-.cdg-header { padding: 8px 20px; display: flex; min-height: 36px; align-items: center; }
-.cdg-header-text { font-size: 15px; font-weight: var(--weight-black, 900); color: #000; line-height: 1.3; }
+/* ── Headers (비대칭 라운드 — 자체 배경 유지) ── */
+.cdg-header { padding: 12px 28px; display: flex; min-height: 52px; align-items: center; }
+.cdg-header-text { font-size: 26px; font-weight: var(--weight-black, 900); color: #000; line-height: 1.3; }
.cdg-header-warm {
background: linear-gradient(90deg, rgba(165,161,150,0.15), rgba(57,50,30,0.85));
border-radius: 0 28px 28px 0; justify-content: flex-end; text-align: right; margin-right: 4px;
@@ -83,17 +94,18 @@
border-radius: 28px 0 0 28px; justify-content: flex-start; text-align: left; margin-left: 4px;
}
-/* ── Grid Cells (행 공유 → 좌우 Y선 정렬) ── */
+/* ── Grid Cells (배경 제거 → Grid 배경이 투과) ── */
.cdg-cell {
- padding: 8px 14px;
- display: flex; flex-direction: column; gap: 4px;
+ padding: 14px 20px;
+ display: flex; flex-direction: column; gap: 6px;
align-self: start;
+ background: none;
}
-.cdg-cell-warm { background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(57,50,30,0.08)); }
-.cdg-cell-teal { background: linear-gradient(180deg, rgba(41,107,85,0.06), rgba(255,255,255,0.4)); }
+.cdg-cell-warm { background: none; }
+.cdg-cell-teal { background: none; }
/* ── Section Title & Body ── */
-.cdg-sec-title { font-size: 12px; font-weight: var(--weight-black, 900); line-height: 1.4; word-break: keep-all; margin-bottom: 2px; }
+.cdg-sec-title { font-size: 18px; font-weight: var(--weight-black, 900); line-height: 1.4; word-break: keep-all; margin-bottom: 4px; }
.cdg-title-warm { color: var(--color-warm-brown, #5C3714); }
.cdg-title-teal { color: var(--color-dark-teal, #084C56); }
.cdg-sec-body { padding-left: 8px; }
@@ -101,7 +113,7 @@
/* ── Bullets ── */
.cdg-bullet {
position: relative; padding-left: 14px;
- font-size: 11px; font-weight: var(--weight-bold, 700); color: #1a1a1a;
+ font-size: 14px; font-weight: var(--weight-bold, 700); color: #1a1a1a;
line-height: 1.7; word-break: keep-all;
}
.cdg-bullet::before { content: '•'; position: absolute; left: 0; color: #666; }
diff --git a/templates/blocks/cards/hero-icon-cards.html b/templates/blocks/cards/hero-icon-cards.html
index 4088792..a135c39 100644
--- a/templates/blocks/cards/hero-icon-cards.html
+++ b/templates/blocks/cards/hero-icon-cards.html
@@ -19,7 +19,7 @@
{{ b }}
{% endfor %}
{% if badge_title %}
-  }})
+  }})
{{ badge_title }}
{% endif %}
@@ -42,14 +42,14 @@
diff --git a/templates/blocks/cards/test-compare-detail-gradient_1.html b/templates/blocks/cards/test-compare-detail-gradient_1.html
deleted file mode 100644
index c9fc13b..0000000
--- a/templates/blocks/cards/test-compare-detail-gradient_1.html
+++ /dev/null
@@ -1,149 +0,0 @@
-
-
-
+
{{ badge_title }}
-
-
-
-
\ No newline at end of file
diff --git a/templates/blocks/cards/test-hero-icon-cards_1.html b/templates/blocks/cards/test-hero-icon-cards_1.html
deleted file mode 100644
index 7346b5b..0000000
--- a/templates/blocks/cards/test-hero-icon-cards_1.html
+++ /dev/null
@@ -1,162 +0,0 @@
-
-
-
-
-
-
-
-
- 과정 (Process)의 혁신
-
-
- 결과 (Products)의 변화
-
-
-
-
-
-
-
- Analogue 기반 업무의 Digital Transformation
-
-
- 
-
-
-
-
- 개념·문서·행정 절차 중심
2D 도면, 전문가, 규정
업무 구분(단절), 책임
-
-
-
- 시각화된 목적물, 소통, 투명성 중심
3D 모델, 참여자, 실체
협업(융·복합), 창의성
-
-
-
- Copy & Paste로 인한 하향 평준화된 기존 성과물의 품질 향상
-
-
-
-
- 과거 수작업으로 시행하면서 발생하던 오류 등의 최소화
정확한 Data에 기반한 계획으로 고품질 성과물 도출
-
-
-
- 위치기반의 3D 모델을 사용하는 Process 혁신
-
-
-
-
- 지리·지형·지반 등 위치정보(GIS)와 3D모델(형상, 속성정보) 기반의 건설 정보를 포함하는 BIM의 연계를 통한 업무 프로세스의 혁신
-
-
-
- Analogue 기반 도서 외 Digital 기반 정보물 추가
-
-
-
-
- 기존 성과물(도면, 수량, 계산서, 시방서 등)에 3D 모델, Simulation 등의 Digital 기반 정보물 추가
-
-
-
- 사용자 중심의 Solution(S/W) 제공
-
-
-
-
- 서로 다른 S/W로 작성되어 분절화된 Analogue 방식의 성과물과 정보물을 연계할 수 있는 설계·시공 Solution 제공
-
-
-
-Solution을 활용한 업무 효율화
-
-
-
-
- Engn. Solution을 통해 성과물에 관한 이슈를 함께 검토·논의하는 협업 환경 조성
건설 단계별 정보를 디지털 데이터로 축적하여, 건설 전 과정을 통합관리
-
-
-
-
-
\ No newline at end of file
diff --git a/templates/blocks/cards/test-hero-icon-cards_1.png b/templates/blocks/cards/test-hero-icon-cards_1.png
deleted file mode 100644
index 4f9fd34..0000000
Binary files a/templates/blocks/cards/test-hero-icon-cards_1.png and /dev/null differ
diff --git a/templates/blocks/emphasis/checklist-dark.html b/templates/blocks/emphasis/checklist-dark.html
new file mode 100644
index 0000000..5977d11
--- /dev/null
+++ b/templates/blocks/emphasis/checklist-dark.html
@@ -0,0 +1,74 @@
+
+
+
-
-
-
-
-
-
-
-
-
- 
- DX 시행을 위한 필수 요건
-
-
-
-
- DX 시행을 위한 필수 요건
-
-
-
-
-
-
-
-
-
- 기술(디지털)
-
- Digital 기술(S/W, H/W)과 업무 Process의 통합
-
- 기존 업무 프로세스에 다양한 디지털 기술을 접목하여 업무 수행
-
- 프로젝트 전반에 걸친 업무 프로세스의 연결 및 조율
-
-
- 분야별 전문 지식(설계, 시공, 유지관리 등) 보유
-
- 건설 전 단계에 대한 근본적인 이해와 지식 및 경험
-
- 최신 토목 기술 트랜드 및 표준 기준 등에 대한 높은 지식
-
-
-
-
-
-
- 사람(역량)
-
- 혁신적 사고방식과 창의적 문제 해결 능력
-
- 기존 수행 방식과 관습적 사고 등에 의한 접근 방식 탈피
-
- 디지털 기술을 활용한 창의적, 혁신적인 솔루션 제시
-
-
- 사용자 중심 사고와 DX 수행 경험
-
- 사용자의 요구와 기대를 충족시키는 설계 및 구현
-
- 시행착오를 포함한 수행 경험과 사용자 경험(UX)을 반영한 해결 방안 제시
-
-
-
-
-
-
- 자연(여건)
-
- 지속적인 투자 및 실행 의지
-
- 기술 도입 초기 단계에 필요한 인력·기간·비용 등의 대규모 투자
-
- 기술 고도화를 위한 지속적인 개선 및 투자 체계 구축
-
- 변화와 혁신을 통해 부가가치를 창출하려는 실행 의지와 추진력
-
-
-
+ {% for item in items %}
+
+
+
diff --git a/templates/blocks/new/cards-3col-persona.html b/templates/blocks/new/cards-3col-persona.html
new file mode 100644
index 0000000..1b1ecbe
--- /dev/null
+++ b/templates/blocks/new/cards-3col-persona.html
@@ -0,0 +1,117 @@
+
+
+
+
+ {% endfor %}
+☑
+
+ {{ item.title }}
+ {% if item.description %} : {{ item.description }}{% endif %}
+
+
+ {% for p in personas %}
+
+
+
diff --git a/templates/blocks/new/compare-vs-rows.html b/templates/blocks/new/compare-vs-rows.html
new file mode 100644
index 0000000..1bb06a9
--- /dev/null
+++ b/templates/blocks/new/compare-vs-rows.html
@@ -0,0 +1,122 @@
+
+
+
+ {% if p.bg_img %}
{% endif %}
+
+
+ 
+ {% endif %}
+
+ {% endfor %}
+
+ {% if p.badge_outer_img %}
{% endif %}
+ {% if p.badge_inner_img %}
{% endif %}
+
+
+
+ {% if p.label_line1 %}{{ p.label_line1 }}{% endif %}
+ {% if p.label_line2 %}{{ p.label_line2 }}{% endif %}
+
+
+ {% for b in p.bullets %}
+
+
+ {% if p.photo_img %}
+
+ {% if p.bullet_icon %}
{% endif %}
+ {{ b.text|safe }}
+
+ {% endfor %}
+
+ {% if header %}
+
+
+
diff --git a/templates/blocks/new/cycle-3way-intersect.html b/templates/blocks/new/cycle-3way-intersect.html
new file mode 100644
index 0000000..0a562af
--- /dev/null
+++ b/templates/blocks/new/cycle-3way-intersect.html
@@ -0,0 +1,162 @@
+
+
+
+ {% if header.icon %} }})
{% endif %}
+
+ {% endif %}
+
+ {% if main_labels %}
+ {{ header.title }}
+
+
+ {% endif %}
+
+ {{ main_labels.left }}
+ {{ main_labels.center|default('vs.') }}
+ {{ main_labels.right }}
+
+ {% for row in rows %}
+
+
+ {% if conclusion %}
+
+
+ {% endfor %}
+ {{ row.left_text|safe }}
+ {{ row.category }}
+ {{ row.right_text|safe }}
+
+ {% if conclusion.arrow_img %} }})
{% endif %}
+
+
+ {% endif %}
+{% endif %}
+
+ {{ conclusion.text|safe }}
+
+ {% if bg_texture_img %}
+  }})
+ {% endif %}
+
+ {% if arc_img %}
+  }})
+  }})
+
+ {% endif %}
+
+ {% for c in circles %}
+
+
+
+
+
diff --git a/templates/blocks/new/issues-paired-rows.html b/templates/blocks/new/issues-paired-rows.html
new file mode 100644
index 0000000..20811b8
--- /dev/null
+++ b/templates/blocks/new/issues-paired-rows.html
@@ -0,0 +1,135 @@
+
+
+
+ {{ c.label|safe }}
+
+ {% endfor %}
+
+ {% for a in accents %}
+
+
+ {{ a.char }}
+ {% endfor %}
+
+ {% for s in side_labels %}
+
+
+ {% endfor %}
+{{ s.title }}
+ {% if s.desc %}{{ s.desc|safe }}
{% endif %}
+
+ {% if header %}
+
+
+
diff --git a/templates/blocks/new/quadrant-2x2-issues.html b/templates/blocks/new/quadrant-2x2-issues.html
new file mode 100644
index 0000000..e10c5e9
--- /dev/null
+++ b/templates/blocks/new/quadrant-2x2-issues.html
@@ -0,0 +1,119 @@
+
+
+
+ {% if header.icon %}{% endif %}
+
+ {% endif %}
+
+ {{ header.title }}
+
+ {% for row in rows %}
+
+
+ {% if not row.pills_bottom %}
+
+ {% endfor %}
+
+
+ {% endif %}
+
+
+ {% if pill_bg %} }})
{% endif %}
+ {{ row.left.label }}
+
+ {% endif %}
+ {{ row.left.label }}
+
+ {% if pill_bg %}{% endif %}
+ {{ row.right.label }}
+
+ {% endif %}
+ {{ row.right.label }}
+
+
+
+ {% if row.pills_bottom %}
+ {{ row.left.text|safe }}
+
+ {{ row.right.text|safe }}
+
+
+ {% endif %}
+
+ {% if pill_bg %}{% endif %}
+ {{ row.left.label }}
+
+ {% endif %}
+ {{ row.left.label }}
+
+ {% if pill_bg %}{% endif %}
+ {{ row.right.label }}
+
+ {% endif %}
+ {{ row.right.label }}
+
+
+
+
diff --git a/templates/blocks/new/split-panel-numbered.html b/templates/blocks/new/split-panel-numbered.html
new file mode 100644
index 0000000..c9797f5
--- /dev/null
+++ b/templates/blocks/new/split-panel-numbered.html
@@ -0,0 +1,172 @@
+
+
+
+ {% for q in quadrants %}
+
+
+ {% if center_quote %}
+
+
+
+
+ {% endfor %}
+
+
+
+ {{ q.ribbon_title }}
+
+ {% for sec in q.sections %}
+
+
+ {% if sec.headline %}
+ {% endfor %}
+ {{ sec.headline }}
{% endif %}
+ {% if sec.bullets %}
+ -
+ {% for b in sec.bullets %}
- {{ b }} {% endfor %} +
+ {% if center_quote.bg_img %} }})
{% endif %}
+
+ {% endif %}
+{% endif %}
+ {{ center_quote.text|safe }}
+
+ {% if title_icon or title %}
+
+
+
diff --git a/templates/blocks/new/stacked-arrow-list.html b/templates/blocks/new/stacked-arrow-list.html
new file mode 100644
index 0000000..2464ef7
--- /dev/null
+++ b/templates/blocks/new/stacked-arrow-list.html
@@ -0,0 +1,133 @@
+
+
+
+ {% if title_icon %} }})
{% endif %}
+ {% if title %}
+ {% endif %}
+
+ {{ title|safe }}
{% endif %}
+
+
+
+
+
+
+
+
+
+ {% for cat in categories %}
+
+
+
+
+ {% endfor %}
+ {{ cat.name }}
+
+ {% for item in cat.items %}
+
+ · {{ item }}
+ {% endfor %}
+
+
+ {% if mid_arrow_img %} }})
{% endif %}
+
+
+
+ {% endif %}
+
+ {% for item in right_items %}
+
+
+ {% if item.badge_img %}
+ {% elif loop.index <= 5 %}
{% endif %}
+
+ {% endfor %}
+
+  }})
{% endif %}
+
+ {{ item.text }}
+ {% if arrow_img %}{% endif %}
+
+ {% if title %}
+
+
+
diff --git a/templates/blocks/new/statement-pill-highlight.html b/templates/blocks/new/statement-pill-highlight.html
new file mode 100644
index 0000000..6bad939
--- /dev/null
+++ b/templates/blocks/new/statement-pill-highlight.html
@@ -0,0 +1,61 @@
+
+
+
+
+
+ {% endif %}
+
+ {{ title|safe }}
+
+ {% if left_arc_img or left_label %}
+
+
+ {% if left_arc_img %} }})
{% endif %}
+ {% if left_label %}
+ {% endif %}
+
+ {% endif %}
+ {% if left_label %}{{ left_label|safe }}
{% endif %}
+
+ {% for item in items %}
+
+
+ {% if arrow_img %}
+  }})
+ {% endif %}
+
+ {% endfor %}
+ {{ item.text }}
+
+
+
+
diff --git a/templates/blocks/cards/hero-icon-cards_1.html b/templates/blocks/redesign/card_hero-icon-cards_1.html
similarity index 55%
rename from templates/blocks/cards/hero-icon-cards_1.html
rename to templates/blocks/redesign/card_hero-icon-cards_1.html
index 616b22d..7868746 100644
--- a/templates/blocks/cards/hero-icon-cards_1.html
+++ b/templates/blocks/redesign/card_hero-icon-cards_1.html
@@ -1,16 +1,19 @@
-
+
+
+{{ text|safe }}
+
{% if statement %}
@@ -20,7 +23,7 @@
{% if badge_title %}
{{ title|default("슬라이드") }}
+
+
+
+
+
+
+
-  }})
+
{{ badge_title }}
{% endif %}
@@ -50,22 +53,13 @@
width: 100%; overflow: visible;
}
-/* ── Hero Statement ── */
.hic-statement {
text-align: center; font-size: 16px; font-weight: var(--weight-bold, 700);
color: #1e293b; line-height: 1.6; word-break: keep-all;
- margin-bottom: 8px; padding: 0 24px;
+ margin-bottom: 8px;
}
-.hic-statement strong { font-weight: 900; font-size: 1.1em; }
-.hic-statement em { color: #ef4444; font-style: normal; font-weight: 900; font-size: 1.15em; }
-/*
- 리본+박스 수학적 계산 (Figma 원본):
- badge 508x94 at y=1431, box at y=1449
- 접힘선 = 18px = 이미지 높이의 19.1%
- scale(1200/1808) → ribbon 337x62, fold top에서 12px, 아래 50px
-*/
-.hic-card-area { position: relative; width: 100%; }
+.hic-card-area { position: relative; width: 100%; margin-top: 4px; }
.hic-ribbon {
position: absolute;
@@ -81,31 +75,30 @@
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
-/* 얇은 테두리 박스 */
.hic-box {
position: relative; background: #fff;
- border: 1px solid #e2e8f0; border-radius: 8px;
- padding: 36px 8px 8px;
+ border: 6px solid #9b1b1b; border-radius: 20px;
+ padding: 36px 8px 10px;
}
.hic-cards { display: flex; align-items: stretch; width: 100%; }
.hic-card {
flex: 1; display: flex; flex-direction: column;
- padding: 8px 10px 10px; gap: 0;
+ align-items: center; justify-content: flex-start; text-align: center;
+ padding: 8px 16px 12px; gap: 0;
}
-.hic-sep { width: 1px; background: #e0e0e0; align-self: stretch; margin: 4px 0; }
+.hic-sep { width: 1px; background: #e0e0e0; align-self: stretch; margin: 6px 0; }
-/* ── 카드 내부 (변형: icon → 소제목+불릿 계층) ── */
-/* 중제목 (카드 헤더: 기술/사람/자연): 중앙 정렬 */
-.hic-title { font-size: 14px; font-weight: var(--weight-black, 900); color: #0d7377; line-height: 1.3; text-align: center; margin-bottom: 6px; }
-/* 소제목 (D1): 12px/700, 들여쓰기 1단 */
-.hic-sec-title { font-size: 12px; font-weight: 700; color: #1a1a1a; line-height: 1.4; margin-top: 6px; margin-bottom: 2px; padding-left: 8px; }
-.hic-sec-title:first-of-type { margin-top: 0; }
-/* 불릿 (D2): 11px/500, 들여쓰기 2단 */
-.hic-bullet {
- position: relative; padding-left: 24px;
- font-size: 11px; font-weight: 500; color: #334155;
- line-height: 1.7; word-break: keep-all;
+.hic-title { font-size: 16px; font-weight: var(--weight-black, 900); color: #1a1a1a; line-height: 1.3; margin-bottom: 10px; }
+.hic-sec-title {
+ font-size: 13px; font-weight: var(--weight-bold, 700); color: #1a1a1a;
+ line-height: 1.4; margin-top: 8px; margin-bottom: 3px; text-align: left; width: 100%;
}
-.hic-bullet::before { content: '•'; position: absolute; left: 14px; color: #666; }
+.hic-sec-title:first-of-type { margin-top: 0; }
+.hic-bullet {
+ position: relative; padding-left: 14px; text-align: left; width: 100%;
+ font-size: 11px; font-weight: var(--weight-medium, 500); color: #444;
+ line-height: 1.65; word-break: keep-all;
+}
+.hic-bullet::before { content: '•'; position: absolute; left: 0; color: #999; }
diff --git a/templates/blocks/slide-base.html b/templates/blocks/slide-base.html
new file mode 100644
index 0000000..1c2ddf7
--- /dev/null
+++ b/templates/blocks/slide-base.html
@@ -0,0 +1,203 @@
+
+
+
+
+
+
+
+
+
{{ badge_title }}
+
+
+
+
+
diff --git a/templates/blocks/svg/arc_left.svg b/templates/blocks/svg/arc_left.svg
new file mode 100644
index 0000000..dbb6914
--- /dev/null
+++ b/templates/blocks/svg/arc_left.svg
@@ -0,0 +1,30 @@
+
diff --git a/templates/blocks/svg/arc_side.png b/templates/blocks/svg/arc_side.png
new file mode 100644
index 0000000..f4ff3e4
Binary files /dev/null and b/templates/blocks/svg/arc_side.png differ
diff --git a/templates/blocks/svg/arc_top.png b/templates/blocks/svg/arc_top.png
new file mode 100644
index 0000000..7c122b9
Binary files /dev/null and b/templates/blocks/svg/arc_top.png differ
diff --git a/templates/blocks/svg/arrow_asis_tobe.png b/templates/blocks/svg/arrow_asis_tobe.png
new file mode 100644
index 0000000..554b6af
Binary files /dev/null and b/templates/blocks/svg/arrow_asis_tobe.png differ
diff --git a/templates/blocks/svg/arrow_conclusion.svg b/templates/blocks/svg/arrow_conclusion.svg
new file mode 100644
index 0000000..7cbffce
--- /dev/null
+++ b/templates/blocks/svg/arrow_conclusion.svg
@@ -0,0 +1,9 @@
+
diff --git a/templates/blocks/svg/arrow_down.svg b/templates/blocks/svg/arrow_down.svg
new file mode 100644
index 0000000..4871c13
--- /dev/null
+++ b/templates/blocks/svg/arrow_down.svg
@@ -0,0 +1,3 @@
+
diff --git a/templates/blocks/svg/arrow_mid.png b/templates/blocks/svg/arrow_mid.png
new file mode 100644
index 0000000..c4bbf6b
Binary files /dev/null and b/templates/blocks/svg/arrow_mid.png differ
diff --git a/templates/blocks/svg/arrow_right.png b/templates/blocks/svg/arrow_right.png
new file mode 100644
index 0000000..01c73d8
Binary files /dev/null and b/templates/blocks/svg/arrow_right.png differ
diff --git a/templates/blocks/svg/badge_inner_builder.png b/templates/blocks/svg/badge_inner_builder.png
new file mode 100644
index 0000000..9d63808
Binary files /dev/null and b/templates/blocks/svg/badge_inner_builder.png differ
diff --git a/templates/blocks/svg/badge_inner_designer.png b/templates/blocks/svg/badge_inner_designer.png
new file mode 100644
index 0000000..ae82310
Binary files /dev/null and b/templates/blocks/svg/badge_inner_designer.png differ
diff --git a/templates/blocks/svg/badge_inner_owner.png b/templates/blocks/svg/badge_inner_owner.png
new file mode 100644
index 0000000..0d8b924
Binary files /dev/null and b/templates/blocks/svg/badge_inner_owner.png differ
diff --git a/templates/blocks/svg/badge_num_01.png b/templates/blocks/svg/badge_num_01.png
new file mode 100644
index 0000000..b33a6d1
Binary files /dev/null and b/templates/blocks/svg/badge_num_01.png differ
diff --git a/templates/blocks/svg/badge_num_02.png b/templates/blocks/svg/badge_num_02.png
new file mode 100644
index 0000000..785f3c1
Binary files /dev/null and b/templates/blocks/svg/badge_num_02.png differ
diff --git a/templates/blocks/svg/badge_num_03.png b/templates/blocks/svg/badge_num_03.png
new file mode 100644
index 0000000..9eb45d0
Binary files /dev/null and b/templates/blocks/svg/badge_num_03.png differ
diff --git a/templates/blocks/svg/badge_num_04.png b/templates/blocks/svg/badge_num_04.png
new file mode 100644
index 0000000..c57cd3b
Binary files /dev/null and b/templates/blocks/svg/badge_num_04.png differ
diff --git a/templates/blocks/svg/badge_num_05.png b/templates/blocks/svg/badge_num_05.png
new file mode 100644
index 0000000..d29a73a
Binary files /dev/null and b/templates/blocks/svg/badge_num_05.png differ
diff --git a/templates/blocks/svg/badge_outer_builder.png b/templates/blocks/svg/badge_outer_builder.png
new file mode 100644
index 0000000..ed46ae6
Binary files /dev/null and b/templates/blocks/svg/badge_outer_builder.png differ
diff --git a/templates/blocks/svg/badge_outer_designer.png b/templates/blocks/svg/badge_outer_designer.png
new file mode 100644
index 0000000..07f40d6
Binary files /dev/null and b/templates/blocks/svg/badge_outer_designer.png differ
diff --git a/templates/blocks/svg/badge_outer_owner.png b/templates/blocks/svg/badge_outer_owner.png
new file mode 100644
index 0000000..aabc459
Binary files /dev/null and b/templates/blocks/svg/badge_outer_owner.png differ
diff --git a/templates/blocks/svg/badge_policy.png b/templates/blocks/svg/badge_policy.png
new file mode 100644
index 0000000..c12821a
Binary files /dev/null and b/templates/blocks/svg/badge_policy.png differ
diff --git a/templates/blocks/svg/badge_solution.png b/templates/blocks/svg/badge_solution.png
new file mode 100644
index 0000000..022aaaf
Binary files /dev/null and b/templates/blocks/svg/badge_solution.png differ
diff --git a/templates/blocks/svg/bg_col_texture.png b/templates/blocks/svg/bg_col_texture.png
new file mode 100644
index 0000000..8ca0a0a
Binary files /dev/null and b/templates/blocks/svg/bg_col_texture.png differ
diff --git a/templates/blocks/svg/bg_slide_texture.png b/templates/blocks/svg/bg_slide_texture.png
new file mode 100644
index 0000000..4ea2f7f
Binary files /dev/null and b/templates/blocks/svg/bg_slide_texture.png differ
diff --git a/templates/blocks/svg/bg_texture.png b/templates/blocks/svg/bg_texture.png
new file mode 100644
index 0000000..bdb286b
Binary files /dev/null and b/templates/blocks/svg/bg_texture.png differ
diff --git a/templates/blocks/svg/box_policy_container.png b/templates/blocks/svg/box_policy_container.png
new file mode 100644
index 0000000..2983a64
Binary files /dev/null and b/templates/blocks/svg/box_policy_container.png differ
diff --git a/templates/blocks/svg/box_solution_cards.png b/templates/blocks/svg/box_solution_cards.png
new file mode 100644
index 0000000..a986465
Binary files /dev/null and b/templates/blocks/svg/box_solution_cards.png differ
diff --git a/templates/blocks/svg/circle_quote.png b/templates/blocks/svg/circle_quote.png
new file mode 100644
index 0000000..0280bc6
Binary files /dev/null and b/templates/blocks/svg/circle_quote.png differ
diff --git a/templates/blocks/svg/icon_check.png b/templates/blocks/svg/icon_check.png
new file mode 100644
index 0000000..c3ab3f2
Binary files /dev/null and b/templates/blocks/svg/icon_check.png differ
diff --git a/templates/blocks/svg/icon_header.png b/templates/blocks/svg/icon_header.png
new file mode 100644
index 0000000..fb90ba4
Binary files /dev/null and b/templates/blocks/svg/icon_header.png differ
diff --git a/templates/blocks/svg/icon_title.png b/templates/blocks/svg/icon_title.png
new file mode 100644
index 0000000..af3788c
Binary files /dev/null and b/templates/blocks/svg/icon_title.png differ
diff --git a/templates/blocks/svg/line_divider.svg b/templates/blocks/svg/line_divider.svg
new file mode 100644
index 0000000..576f244
--- /dev/null
+++ b/templates/blocks/svg/line_divider.svg
@@ -0,0 +1,3 @@
+
diff --git a/templates/blocks/svg/photo_builder.png b/templates/blocks/svg/photo_builder.png
new file mode 100644
index 0000000..7ec3442
Binary files /dev/null and b/templates/blocks/svg/photo_builder.png differ
diff --git a/templates/blocks/svg/photo_designer.png b/templates/blocks/svg/photo_designer.png
new file mode 100644
index 0000000..94c28bb
Binary files /dev/null and b/templates/blocks/svg/photo_designer.png differ
diff --git a/templates/blocks/svg/photo_owner.png b/templates/blocks/svg/photo_owner.png
new file mode 100644
index 0000000..2674ba8
Binary files /dev/null and b/templates/blocks/svg/photo_owner.png differ
diff --git a/templates/blocks/svg/pill_scroll.png b/templates/blocks/svg/pill_scroll.png
new file mode 100644
index 0000000..8305949
Binary files /dev/null and b/templates/blocks/svg/pill_scroll.png differ
diff --git a/templates/blocks/visuals/cycle-orbit.html b/templates/blocks/visuals/cycle-orbit.html
new file mode 100644
index 0000000..2ffeb87
--- /dev/null
+++ b/templates/blocks/visuals/cycle-orbit.html
@@ -0,0 +1,94 @@
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ {% if footer_text %}
+
+
+ {% if footer_pill_bg %}
+ 
+ {% else %}
+
+ {% endif %}
+
+
+ {% endif %}
+
+ {% if title %}
+
+
+
diff --git a/templates/catalog.yaml b/templates/catalog.yaml
index 3a4fd06..cb17a27 100644
--- a/templates/catalog.yaml
+++ b/templates/catalog.yaml
@@ -7,10 +7,18 @@ blocks:
height_cost: large
min_height_px: 300
relation_types: []
- visual: 전체 너비 배경 이미지(파란 그라데이션+웨이브) 위에 흰색 영문 소제목(15px) + 한글 대제목(35px). 높이 약 500px.
- when: 자세히보기(detail) 페이지의 맨 첫 화면 전용. 배경 이미지 위에 타이틀을 올려 페이지 주제를 시각적으로 강렬하게 선언할 때.
- not_for: 일반 슬라이드 내부 소제목 → topic-left-right 또는 topic-center 사용. 배경 이미지 없이 텍스트만 →
- topic-center. 높이 200px 이하 → section-header-bar.
+ visual: 전체 너비 배경 이미지 위에 흰색 영문 소제목 + 한글 대제목. 고정 높이 ~500px. 페이지 첫 화면 히어로.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 페이지/섹션의 맨 첫 화면 (히어로 영역)
+ - 배경 이미지 위에 제목만 (본문 없음)
+ - 한글 대제목(1~2줄) + 선택적 영문 소제목
+ - 높이 300px 이상 차지 가능
+ when: 페이지 첫 화면에 배경 이미지 위 제목을 크게 선언할 때. 본문 없이 제목만.
+ not_for: |
+ - 슬라이드 내부 소제목 → topic-left-right 또는 topic-center
+ - 배경 이미지 없이 텍스트만 → topic-center
+ - 높이 200px 이하 → section-header-bar
purpose_fit: []
slots:
required:
@@ -47,9 +55,18 @@ blocks:
height_cost: compact
min_height_px: 40
relation_types: []
- visual: 전체 너비 파란 배경 바(~50px) + 중앙 흰색 제목. 섹션 구분용. 컴팩트.
- when: 같은 페이지 안에서 주제 전환이 필요할 때. 높이 예산이 적을 때 섹션 구분.
- not_for: 페이지 전체 타이틀 → section-title-with-bg. 꼭지별 소제목 → topic-left-right 또는 topic-numbered.
+ visual: 전체 너비 파란 바 + 중앙 흰색 제목. 섹션 구분. 컴팩트(~50px).
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 같은 페이지 안에서 주제 전환 구분선
+ - 제목(1줄) + 선택적 서브타이틀
+ - 높이 40~50px, 최소 공간 사용
+ - 설명/본문 없이 제목만
+ when: 페이지 내 섹션 전환 구분. 제목만. 컴팩트.
+ not_for: |
+ - 히어로 타이틀 → section-title-with-bg
+ - 좌:제목 우:설명 → topic-left-right
+ - 텍스트 구분선(―) → divider-text
purpose_fit: []
slots:
required:
@@ -80,23 +97,19 @@ blocks:
height_cost: compact
min_height_px: 50
relation_types: []
- visual: 좌측에 파란 굵은 제목(24px, 240px 고정) + 우측에 본문 설명(16px). 가로 2단.
- visual_diff: '유사 블록과의 차이:
-
- - topic-center: 중앙 정렬 대제목(26px) + 서브타이틀 + 설명. 단독 강조형. 좌우 분리 없음
-
- - topic-numbered: 번호 원형(①②③) + 제목 + 구분선 + 설명. 순서형 세로 배치
-
- - 이 블록: 좌측 240px 고정폭에 파란 굵은 제목 + 우측에 본문 설명. 가로 2단 배치
-
- 적합: 좌측에 핵심 주장/키워드, 우측에 근거/설명을 대비시킬 때. 문제 제기 도입부
-
- 부적합: 중앙 강조 → topic-center, 순서형 번호 → topic-numbered
-
- '
- when: '좌측에 핵심 주장/질문, 우측에 근거/설명을 배치하는 구조. 문제 제기의 도입부로 적합. 예: "용어의 혼용" + "DX와 BIM이
- 혼용되고 있다..."'
- not_for: 중앙 정렬 대제목 → topic-center. 번호가 붙은 순서형 → topic-numbered. 섹션 전체 타이틀 → section-title-with-bg.
+ visual: 좌측 고정폭 파란 제목 + 우측 본문 설명. 가로 2단 배치.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 꼭지 제목이 짧은 키워드(10자 이내)이고 우측에 설명이 붙는 구조
+ - 좌=핵심 주장/키워드, 우=근거/설명 대비
+ - 번호 없음 (번호 있으면 topic-numbered)
+ - 중앙 정렬 아님 (중앙이면 topic-center)
+ 예: 좌"용어의 혼용" → 우"DX와 BIM이 혼용되고 있다..."
+ when: 짧은 키워드 제목 + 우측 설명의 좌우 대비 구조. 문제 제기 도입부.
+ not_for: |
+ - 중앙 정렬 대제목 → topic-center
+ - 번호 순서 → topic-numbered
+ - 페이지 히어로 → section-title-with-bg
purpose_fit:
- 문제제기
slots:
@@ -126,22 +139,19 @@ blocks:
height_cost: medium
min_height_px: 60
relation_types: []
- visual: 중앙 정렬 대제목(26px 굵게) + 파란 서브타이틀 + 하단 설명. 단독 강조.
- visual_diff: '유사 블록과의 차이:
-
- - topic-left-right: 좌측 제목(240px) + 우측 설명. 가로 2단 분리. 주장+근거 구조
-
- - topic-numbered: 번호 원형 + 제목 + 구분선 + 설명. 순서형 세로 배치
-
- - 이 블록: 중앙 정렬 대제목(26px) + 파란 서브타이틀 + 설명. 단독으로 주제를 크게 선언
-
- 적합: 하나의 주제를 페이지 중심에 크게 선언. sidebar 섹션 라벨. 좌우 분리 불필요할 때
-
- 부적합: 좌:제목 우:설명 대비 → topic-left-right, 순서형 → topic-numbered
-
- '
- when: 하나의 주제를 페이지 중심에 크게 선언할 때. sidebar 영역의 섹션 라벨로도 사용 가능.
- not_for: 좌:제목 우:설명 구조 → topic-left-right. 번호 순서 → topic-numbered.
+ visual: 중앙 정렬 대제목 + 서브타이틀 + 설명. 단독 주제 선언.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 하나의 주제를 중앙에 크게 선언 (좌우 분리 없음)
+ - 제목(1줄) + 선택적 서브타이틀 + 선택적 설명(1~3줄)
+ - 번호/순서 없음, 좌우 대비 없음
+ - sidebar 섹션 라벨로도 사용 가능
+ 예: "건설산업의 디지털 전환" + 서브: "DX Overview" + 설명 2줄
+ when: 주제를 중앙 정렬로 단독 선언할 때. 좌우 분리/번호 불필요.
+ not_for: |
+ - 좌:제목 우:설명 대비 → topic-left-right
+ - 번호 순서 → topic-numbered
+ - 페이지 히어로(배경 이미지) → section-title-with-bg
purpose_fit: []
slots:
required:
@@ -180,22 +190,19 @@ blocks:
height_cost: compact
min_height_px: 45
relation_types: []
- visual: 파란 원형 번호(①②③) + 굵은 제목 + 파란 구분선 + 설명. 세로 배치.
- visual_diff: '유사 블록과의 차이:
-
- - topic-left-right: 좌측 제목 + 우측 설명. 가로 2단. 번호 없음
-
- - topic-center: 중앙 정렬 대제목 + 서브타이틀. 번호 없이 단독 강조
-
- - 이 블록: 파란 원형 번호(①②③) + 굵은 제목 + 파란 구분선 + 설명. 세로 배치. 순서형 꼭지 전용
-
- 적합: 순서가 있는 꼭지(1번, 2번, 3번). 단계별 섹션 시작점
-
- 부적합: 순서 없는 꼭지 → topic-left-right/topic-center, 카드 안의 순서 → card-numbered
-
- '
- when: 순서가 있는 꼭지를 시작할 때. 1번, 2번, 3번 식의 단계별 섹션.
- not_for: 순서 없는 꼭지 → topic-left-right 또는 topic-center. 카드 안의 순서 → card-numbered.
+ visual: 원형 번호 뱃지 + 제목 + 구분선 + 설명. 세로 배치. 섹션 시작 헤더.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 꼭지/섹션 시작에 번호(1, 2, 3)가 필요
+ - 번호 + 제목(1줄) + 선택적 설명(1~2줄)
+ - 섹션 헤더 역할 (본문 블록이 이 아래에 옴)
+ - 번호가 순서/단계를 의미
+ 예: ① 건설산업 DX → 설명 1줄 (이 아래에 본문 블록들이 배치됨)
+ when: 순서가 있는 꼭지의 섹션 시작 헤더. 번호+제목+설명.
+ not_for: |
+ - 순서 없는 꼭지 → topic-left-right 또는 topic-center
+ - 카드 안의 번호 나열 → card-numbered
+ - 프로세스 흐름도 → process-horizontal
purpose_fit: []
slots:
required:
@@ -236,28 +243,20 @@ blocks:
relation_types: []
min_items: 2
max_items: 3
- visual: 3열 카드. 각 카드 상단에 이미지(160px) + 하단에 색상 밑줄 제목 + 불릿 목록.
- visual_diff: '유사 블록과의 차이:
-
- - card-icon-desc: 이모지 아이콘 + 제목 + 설명. 이미지 없이 아이콘만 사용
-
- - card-dark-overlay: 다크 배경 이미지 위 그라데이션 + 흰 텍스트. 짧은 키워드 강조
-
- - card-numbered: 번호 원형 + 제목 + 설명. 이미지 없고 순서 중심
-
- - card-stat-number: 큰 숫자 + 단위 + 라벨. 수치 데이터 전용
-
- - card-tag-image: 좌상단 색상 태그 + 이미지. 카테고리 태그가 핵심 구분자
-
- - 이 블록: 상단에 실제 이미지(160px 높이) + 색상 밑줄 제목 + 불릿 목록. 이미지가 콘텐츠의 핵심
-
- 적합: 이미지(사진/도표)가 각 항목의 핵심이고, 하단에 불릿으로 세부 설명이 필요할 때
-
- 부적합: 이미지 없음 → card-icon-desc, 카테고리 태그 분류 → card-tag-image, 키워드만 → card-dark-overlay
-
- '
- when: '이미지가 핵심인 항목 3개를 나란히. 예: 설계단계(3D모델) / 시공단계(현장) / 유지관리(자산).'
- not_for: 이미지 없이 텍스트만 → card-icon-desc. 키워드+짧은 설명만 → card-dark-overlay. 2개 비교 → compare-pill-pair.
+ visual: N열 카드. 각 카드 = 상단 이미지(160px) + 색상 밑줄 제목 + 불릿 목록.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 2~3개 항목, 각 항목에 대표 이미지(사진/도표)가 있음
+ - 이미지 아래에 제목(1줄) + 불릿 리스트(3~4개)
+ - 이미지가 콘텐츠의 핵심 (텍스트만으로는 부족)
+ - 각 항목이 독립적이고 동등한 비중
+ 예: 설계단계(3D모델 사진) / 시공단계(현장 사진) / 유지관리(자산 사진)
+ when: 각 항목에 대표 이미지가 있고, 이미지 아래 제목+불릿으로 설명할 때. 2~3개 동등 항목.
+ not_for: |
+ - 이미지 없이 텍스트만 → card-icon-desc
+ - 이미지 위에 어두운 오버레이+흰 텍스트 → card-dark-overlay
+ - 좌상단 태그 분류 → card-tag-image
+ - 원형 이미지 → card-image-round
purpose_fit:
- 핵심전달
- 근거사례
@@ -307,28 +306,20 @@ blocks:
relation_types: []
min_items: 3
max_items: 5
- visual: 3~5열 카드. 다크 배경 이미지 + 그라데이션 오버레이 + 흰색 굵은 제목 + 짧은 설명.
- visual_diff: '유사 블록과의 차이:
-
- - card-icon-desc: 밝은 배경 + 이모지 아이콘 + 설명(3줄). 정보 전달 중심
-
- - card-image-3col: 밝은 배경 + 상단 이미지 + 색상 밑줄 제목 + 불릿. 이미지 콘텐츠 중심
-
- - card-numbered: 밝은 배경 + 번호 원형 + 설명. 순서 나열
-
- - card-stat-number: 큰 숫자 강조. 수치 데이터 전용
-
- - card-tag-image: 밝은 배경 + 색상 태그 + 이미지. 카테고리 분류
-
- - 이 블록: 다크 배경 이미지 위에 그라데이션 오버레이 + 흰색 텍스트. 시각적 임팩트 극대화. 설명 2줄 이내
-
- 적합: 키워드를 시각적으로 강렬하게 강조. 짧은 텍스트(제목+1~2줄)만 필요할 때
-
- 부적합: 긴 설명(3줄+) → card-icon-desc, 이미지가 콘텐츠 → card-image-3col, 순서 → card-numbered
-
- '
- when: '키워드를 시각적으로 강조할 때. 짧은 설명(2줄 이내)과 함께. 예: 협업지원 / 오류감소 / 생산성향상.'
- not_for: 긴 설명(3줄+) → card-icon-desc. 이미지가 크게 보여야 함 → card-image-3col. 순서/단계 → process-horizontal.
+ visual: N열 카드. 각 카드 = 다크 배경 이미지 + gradient 오버레이 + 흰색 제목 + 짧은 설명. 시각적 임팩트 중심.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 3~5개 키워드/개념을 시각적으로 강렬하게 표현
+ - 각 항목에 배경 이미지(사진) + 짧은 제목(1줄) + 설명(1~2줄 이내)
+ - 텍스트가 짧고 이미지 분위기가 중요 (정보 전달 < 시각 임팩트)
+ - 각 항목에 불릿 리스트 불필요
+ 예: [협업지원(회의사진), 오류감소(모델사진), 생산성향상(현장사진)]
+ when: 키워드를 배경 이미지 위에 시각적으로 강조할 때. 설명 2줄 이내. 분위기/인상 전달 목적.
+ not_for: |
+ - 설명이 3줄+ → card-icon-desc
+ - 이미지를 크게 보여줘야 함 (이미지가 콘텐츠) → card-image-3col
+ - 불릿 리스트 필요 → card-image-3col
+ - 이미지 없이 텍스트만 → card-icon-desc
purpose_fit:
- 핵심전달
- 구조시각화
@@ -364,28 +355,19 @@ blocks:
relation_types: []
min_items: 2
max_items: 3
- visual: 3열 카드. 좌상단 색상 태그 라벨 + 이미지 + 제목 + 설명.
- visual_diff: '유사 블록과의 차이:
-
- - card-icon-desc: 이모지 아이콘 + 제목 + 설명. 태그/이미지 없음
-
- - card-image-3col: 상단 이미지 + 색상 밑줄 제목 + 불릿. 태그 없이 이미지가 핵심
-
- - card-dark-overlay: 다크 배경 이미지 + 흰 텍스트. 키워드 강조용
-
- - card-numbered: 번호 원형 + 제목 + 설명. 순서형
-
- - card-stat-number: 큰 숫자 + 단위. 수치 전용
-
- - 이 블록: 좌상단에 색상 태그 라벨이 카드를 분류. 태그 색상으로 카테고리 시각 구분 + 이미지 + 제목
-
- 적합: 카테고리 태그로 분류하는 것이 핵심일 때. 업종/유형별 색상 구분이 필요한 경우
-
- 부적합: 태그 불필요 → card-image-3col, 이미지 없음 → card-icon-desc, 수치 → card-stat-number
-
- '
- when: '카테고리 태그로 분류가 핵심일 때. 예: 제조업(파란) / 건축(초록) / 인프라(빨간).'
- not_for: 태그 불필요 → card-image-3col. 이미지 없음 → card-icon-desc.
+ visual: N열 카드. 각 카드 = 좌상단 색상 태그 뱃지 + 이미지 + 제목 + 설명.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 2~3개 항목, 각 항목에 카테고리 태그(짧은 라벨, 8자 이내)가 있음
+ - 태그 색상으로 카테고리를 시각적으로 구분하는 것이 핵심
+ - 각 항목에 이미지 + 제목(1줄) + 설명(1~2줄)
+ - 태그 없이는 항목 분류가 불명확한 경우
+ 예: [제조업(파란태그)/사진/설명] | [건축(초록태그)/사진/설명] | [인프라(빨간태그)/사진/설명]
+ when: 각 항목에 카테고리 태그 라벨이 있고, 태그 색상으로 분류를 구분할 때. 이미지+제목+설명 구조.
+ not_for: |
+ - 태그 불필요, 이미지+불릿 → card-image-3col
+ - 이미지 없이 텍스트만 → card-icon-desc
+ - 어두운 분위기 강조 → card-dark-overlay
purpose_fit:
- 핵심전달
slots:
@@ -433,29 +415,21 @@ blocks:
description: 아이콘 축소, 설명 2줄 제한, 패딩 축소 (높이 부족 시)
template: blocks/cards/card-icon-desc--compact.html
when: 컨테이너 높이가 150px 미만일 때
- visual: 2~4열. 중앙 큰 이모지 아이콘(2.5rem) + 굵은 제목 + 설명. 밝은 배경.
- visual_diff: '유사 블록과의 차이:
-
- - card-image-3col: 상단에 실제 이미지(160px) + 색상 밑줄 제목 + 불릿 목록
-
- - card-dark-overlay: 다크 배경 이미지 위 그라데이션 + 흰 텍스트. 키워드 강조용
-
- - card-numbered: 번호 원형(①②③) + 제목 + 설명. 순서 있는 나열
-
- - card-stat-number: 큰 숫자(36px) + 단위 + 라벨. 수치 데이터 전용
-
- - card-tag-image: 좌상단 색상 태그 + 이미지 + 제목. 카테고리 분류 강조
-
- - 이 블록: 이모지 아이콘(2.5rem)이 중앙에 크게 + 제목 + 설명. 밝은 배경 그리드. 이미지 없이 아이콘으로 시각 구분
-
- 적합: 이미지 없이 독립적 개념/특성을 나열. 순서 없고 아이콘으로 직관적 구분이 가능할 때
-
- 부적합: 실제 사진 필요 → card-image-3col, 순서 번호 → card-numbered, 수치 → card-stat-number
-
- '
- when: '독립적인 항목/개념/특성을 이모지 아이콘과 함께 나열. 순서 없는 개별 항목. 예: 🔧기술기반 / 💻S/W역량 / 🌏여건조성.'
- not_for: 이미지(사진) 필요 → card-image-3col. 순서 번호 필요 → card-numbered. 텍스트만(아이콘 불필요) →
- dark-bullet-list.
+ visual: 2~4열 그리드. 중앙 이모지 아이콘 + 제목 + 설명. 밝은 배경.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 2~4개 독립 개념/특성/키워드를 나열
+ - 각 항목에 이모지 아이콘(1글자) + 제목(1줄) + 설명(1~3줄)
+ - 실제 사진/이미지 없이 아이콘으로 직관적 구분
+ - 항목 간 순서 없음 (순서 있으면 card-numbered)
+ - 설명이 필요 (키워드만이면 card-dark-overlay)
+ 예: [기술기반/설명3줄] | [S/W역량/설명3줄] | [여건조성/설명3줄]
+ when: 이미지 없이 이모지 아이콘+제목+설명으로 독립 개념을 나열할 때. 순서 없는 2~4개 항목.
+ not_for: |
+ - 실제 사진 필요 → card-image-3col
+ - 순서 번호 필요 → card-numbered
+ - 수치 데이터 → card-stat-number
+ - 키워드만(설명 불필요) → card-dark-overlay
purpose_fit:
- 핵심전달
- 근거사례
@@ -493,24 +467,15 @@ blocks:
- comparison
min_items: 3
max_items: 3
- visual: 3열 카드. 각 카드 상단 색상 헤더(제목+서브) + 이미지 + 불릿 목록.
- visual_diff: '유사 블록과의 차이:
+ visual: 3열 카드. 각 카드 = 색상 헤더바(제목+서브) + 선택적 이미지 + 불릿 목록.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 정확히 3개 대상을 각각 독립 카드로 비교
+ - 각 대상에 색상 구분 헤더(제목+서브타이틀) + 선택적 이미지 + 불릿 리스트
+ - 항목 간 행별 대조가 아니라, 각 카드가 독립적으로 내용 서술
+ - 카드별 색상으로 카테고리 구분
+ 예: [BIM(파란)/불릿3개] | [DfMA(초록)/불릿3개] | [DX(주황)/불릿3개]
- - compare-2col-split: 표 형식 2단 비교, 중앙 기준 라벨. 2개 대상 전용
-
- - compare-3col-badge: 표 형식 3열, VS 배지. 행 단위 비교
-
- - comparison-2col: 좌우 텍스트 블록, 2개 대비. 표/카드 아님
-
- - compare-pill-pair: 둥근 박스 2개 + VS. 헤더 역할만
-
- - 이 블록: 3개 독립 카드가 나란히. 카드마다 고유 색상 헤더+이미지+불릿. 카드형 비교
-
- 적합: 3개 카테고리를 각각 독립적으로 설명하면서 비교. 카테고리별 색상 구분이 필요할 때
-
- 부적합: 2개 비교 → comparison-2col/compare-pill-pair, 행별 대조 → compare-3col-badge
-
- '
when: '3개 카테고리를 비교할 때. 각 카테고리에 다른 색상 헤더. 예: 상용SW(회색) vs 3rd Party(파랑) vs 전문SW(빨강).'
not_for: 2개 비교 → compare-pill-pair + compare-2col-split. 다항목 표 → compare-3col-badge.
purpose_fit:
@@ -548,10 +513,19 @@ blocks:
- sequence
min_items: 2
max_items: 4
- visual: 세로 나열. 좌측 색상 마커(단계명) + 우측 콘텐츠 박스(제목+이미지+설명). 연결선.
- when: '생애주기/프로세스 단계별 설명. 각 단계에 이미지+상세 설명. 예: 설계→시공→운영 단계.'
- not_for: 가로 흐름(간단) → process-horizontal. 높이 예산 부족 → card-numbered. 독립 사례(순서 아님)
- → card-icon-desc.
+ visual: 세로 타임라인. 좌측 색상 마커(단계명) + 우측 콘텐츠 박스(제목+이미지+설명). 단계 간 연결선.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 2~4개 단계가 세로로 순서대로 진행
+ - 각 단계에 단계명(좌) + 제목 + 선택적 이미지 + 설명(2~3줄)
+ - 단계 간 연결선이 시각적으로 필요
+ - 각 단계의 설명이 상세함 (간단하면 process-horizontal)
+ 예: 설계단계(이미지+설명) → 시공단계(이미지+설명) → 운영단계(이미지+설명)
+ when: 생애주기/프로세스를 세로 타임라인으로 상세 설명할 때. 각 단계에 이미지+설명.
+ not_for: |
+ - 간단한 가로 흐름 → process-horizontal 또는 flow-arrow-horizontal
+ - 높이 예산 부족 → card-numbered
+ - 순서 없는 독립 항목 → card-icon-desc
purpose_fit:
- 핵심전달
- 구조시각화
@@ -589,9 +563,18 @@ blocks:
relation_types: []
min_items: 2
max_items: 3
- visual: 2~3열. 원형 이미지(140px, 테두리+그림자) + 제목 + 설명. 중앙 정렬.
- when: 포트폴리오형 나열. 비전/가치 표현. 원형 이미지가 있는 경우.
- not_for: 사각형 이미지 → card-image-3col. 이미지 없음 → card-icon-desc.
+ visual: 2~3열. 원형 이미지(140px 원, 테두리+그림자) + 제목 + 설명. 중앙 정렬.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 2~3개 항목, 각 항목의 대표 이미지가 원형(인물/아바타/로고)
+ - 이미지 아래 짧은 제목(1줄) + 설명(1~2줄)
+ - 중앙 정렬, 프로필/비전/가치 표현
+ 예: [CEO 사진(원형)/이름/역할] | [CTO 사진(원형)/이름/역할]
+ when: 원형 이미지(인물, 아바타, 로고)가 핵심이고 짧은 제목+설명을 아래 배치할 때.
+ not_for: |
+ - 사각형 이미지 → card-image-3col
+ - 이미지 없이 아이콘만 → card-icon-desc
+ - 배경 이미지+오버레이 → card-dark-overlay
purpose_fit: []
slots:
required:
@@ -624,28 +607,19 @@ blocks:
relation_types: []
min_items: 2
max_items: 4
- visual: 2~4열. 매우 큰 숫자(36px, 색상) + 단위 + 라벨 + 설명.
- visual_diff: '유사 블록과의 차이:
-
- - card-icon-desc: 이모지 아이콘 + 제목 + 설명. 텍스트 중심의 개념 나열
-
- - card-image-3col: 상단 이미지 + 밑줄 제목 + 불릿. 이미지 콘텐츠 중심
-
- - card-dark-overlay: 다크 배경 + 흰 텍스트. 키워드 강조
-
- - card-numbered: 번호 원형 + 제목 + 설명. 순서형 나열
-
- - card-tag-image: 색상 태그 + 이미지. 카테고리 분류
-
- - 이 블록: 숫자가 36px로 매우 크게 표시 + 색상 강조 + 단위 + 라벨. 수치 데이터 시각화 전용
-
- 적합: KPI, 성과 수치, 달성률 등 숫자 자체가 핵심 메시지인 경우
-
- 부적합: 텍스트 설명 중심 → card-icon-desc, 순서 나열 → card-numbered, 이미지 → card-image-3col
-
- '
- when: 'KPI, 성과 수치, 달성률, 비용 절감율 등 숫자가 핵심인 데이터. 예: 30% 절감 / 220명+.'
- not_for: 숫자가 아닌 텍스트 항목 → card-icon-desc. 비교 구조 → compare-3col-badge.
+ visual: 2~4열. 매우 큰 숫자 + 단위 + 라벨 + 설명. 숫자 중심 시각화.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 콘텐츠의 핵심이 숫자(KPI, 성과, 통계, 비율)
+ - 2~4개 수치 항목, 각 항목 = 숫자 + 단위(선택) + 라벨(1줄) + 설명(선택)
+ - 숫자 자체가 메시지 (30%, 220명, 5배 등)
+ - 텍스트 설명이 주가 아니라 숫자가 주
+ 예: [30%/절감/비용] | [220명/운영/IT+CIVIL] | [5배/생산성/향상]
+ when: 숫자가 핵심 메시지인 데이터. KPI, 달성률, 비용 절감, 인원 규모 등.
+ not_for: |
+ - 숫자가 아닌 텍스트 항목 → card-icon-desc
+ - 순서 번호(1,2,3) → card-numbered (순서 번호≠통계 숫자)
+ - 비교 구조 → compare-vs-rows
purpose_fit:
- 핵심전달
- 근거사례
@@ -700,26 +674,15 @@ blocks:
description: 항목을 가로 2열로 배치 (사례 비교, 같은 구조 항목 나란히)
template: blocks/cards/card-numbered--horizontal.html
when: 같은 구조의 항목 2-3개를 나란히 비교할 때
- visual: 세로 나열. 색상 원형 번호(①②③) + 제목 + 설명. 밝은 배경 카드.
- visual_diff: '유사 블록과의 차이:
-
- - card-icon-desc: 이모지 아이콘 + 제목 + 설명 그리드. 순서 없이 독립 항목 나열
-
- - card-image-3col: 상단 이미지 + 색상 밑줄 제목 + 불릿. 이미지 중심
-
- - card-dark-overlay: 다크 배경 이미지 + 흰 텍스트. 키워드 강조
-
- - card-stat-number: 큰 숫자(36px) + 단위. 수치 데이터 전용
-
- - card-tag-image: 좌상단 색상 태그 + 이미지. 카테고리 분류
-
- - 이 블록: 색상 원형 번호(①②③)가 핵심 구분자. 세로 나열. 순서/정의 목록에 최적
-
- 적합: 번호가 의미 있는 순서형 나열 또는 번호로 구분되는 정의 목록. sidebar에도 적합
-
- 부적합: 순서 없는 독립 항목 → card-icon-desc, 이미지 필요 → card-image-3col, 수치 → card-stat-number
-
- '
+ visual: 세로 나열. 색상 원형 번호(1,2,3) + 제목 + 설명.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 1~5개 항목이 번호 순서로 나열됨
+ - 각 항목에 제목(1줄) + 설명(1~3줄)
+ - 번호가 의미 있음 (순서, 우선순위, 단계)
+ - 세로로 쌓이는 리스트 (가로 그리드 아님)
+ - 이미지/아이콘 없이 번호가 구분자
+ 예: 1.건설산업DX → 설명 | 2.BIM기술 → 설명 | 3.수행체계 → 설명
when: 번호가 의미 있는 항목 나열. 순서가 있는 단계(1→2→3)이거나, 번호로 구분되는 정의 목록. sidebar 용어 정의에 적합(1.건설산업
2.BIM 3.DX). 조건/요구사항 나열.
not_for: 순서 없는 독립 항목 → card-icon-desc. 이미지 포함 단계 → card-step-vertical. 가로 흐름 → process-horizontal.
@@ -751,6 +714,238 @@ blocks:
note: 항목 수
padding_overhead_px: 22
padding_h_px: 32
+- id: cycle-orbit
+ name: 순환 궤도 다이어그램
+ category: visuals
+ template: blocks/visuals/cycle-orbit.html
+ height_cost: large
+ min_height_px: 200
+ relation_types:
+ - flow
+ - definition
+ min_items: 3
+ max_items: 5
+ visual: >
+ 타원 궤도(SVG ellipse) 위에 N개 노드(아이콘 원+라벨)가 순환 배치.
+ 궤도 위 화살표로 순환 방향 표시. 각 노드에 설명 제목+불릿.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 3~5개 요소가 순환 관계 (A→B→C→A)
+ - 각 요소에 아이콘 + 라벨 + 선택적 설명/불릿
+ - 방향성이 있는 순환 (화살표)
+ - 단방향이 아닌 순환/피드백 루프
+ 예: 설계→시공→운영→피드백→설계 (순환)
+ when: 요소들이 순환 관계(피드백 루프, 생태계)일 때. 3~5개 노드가 순환.
+ not_for: |
+ - 단방향 흐름 → process-horizontal
+ - 겹침/교집합 → venn-diagram
+ - 3원 교차 → cycle-3way-intersect
+ purpose_fit:
+ - 구조시각화
+ zone: full-width-only
+ slots:
+ required:
+ - title
+ - nodes[]
+ optional:
+ - nodes[].icon
+ - nodes[].desc_title
+ - nodes[].bullets[]
+ schema:
+ title:
+ max_lines: 1
+ font_size: 18
+ ref_chars:
+ body: 20
+ note: "18px black/900, 중앙, 하단 밑줄"
+ node_label:
+ max_lines: 2
+ font_size: 14
+ ref_chars:
+ body: 6
+ note: "14px black/900, 아이콘 아래"
+ desc_title:
+ max_lines: 1
+ font_size: 13
+ ref_chars:
+ body: 20
+ note: "13px bold"
+ bullet:
+ max_lines: 2
+ font_size: 11
+ ref_chars:
+ body: 15
+ note: "11px medium gray"
+ padding_overhead_px: 30
+ padding_h_px: 0
+- id: checklist-dark
+ name: 체크리스트 다크
+ category: emphasis
+ template: blocks/emphasis/checklist-dark.html
+ height_cost: medium
+ min_height_px: 100
+ relation_types:
+ - definition
+ min_items: 2
+ max_items: 8
+ visual: 다크 배경 + 체크 아이콘 + 제목:설명 한 줄 구조. N행 반복.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 2~8개 항목, 각 항목이 "제목: 설명" 구조 (콜론으로 분리)
+ - 체크리스트/원칙/요건 형태
+ - 어두운 배경에 체크 아이콘
+ - 각 항목의 제목이 짧고(15자), 설명이 1~2줄
+ - dark-bullet-list와 차이: 이 블록은 제목:설명 분리, dark-bullet-list는 불릿만
+ 예: ☑ 기반지식: 건설산업 깊은 이해 | ☑ SW기술: 디지털 역량 확보 | ...
+ when: 핵심 원칙/요건을 "제목:설명" 체크리스트로 나열할 때.
+ not_for: |
+ - 제목:설명 분리 없이 불릿만 → dark-bullet-list
+ - 단일 항목 강조 → callout-solution
+ - 밝은 배경 → card-numbered
+ purpose_fit:
+ - 핵심전달
+ slots:
+ required:
+ - items[]
+ optional: []
+ schema:
+ item_title:
+ max_lines: 1
+ font_size: 16
+ ref_chars:
+ body: 15
+ note: "16px bold white"
+ item_description:
+ max_lines: 2
+ font_size: 16
+ ref_chars:
+ body: 50
+ note: "16px medium, rgba(255,255,255,0.8)"
+ padding_overhead_px: 40
+ padding_h_px: 48
+- id: system-2col-center
+ name: 중앙 라벨 2열 시스템 구성
+ category: cards
+ template: blocks/cards/system-2col-center.html
+ height_cost: xlarge
+ min_height_px: 250
+ relation_types:
+ - comparison
+ - definition
+ min_items: 2
+ max_items: 14
+ visual: 좌 항목 리스트 + 중앙 원형 라벨 + 우 항목 리스트. 3열 Grid.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 하나의 시스템/플랫폼을 중심으로 좌/우에 구성요소 나열
+ - 중앙에 시스템 이름(원형 라벨), 좌=한쪽 카테고리, 우=다른 카테고리
+ - 좌/우 각각 2~7개 항목, 각 항목에 아이콘+제목+설명
+ - 좌/우가 대비 관계(H/W vs S/W, 입력 vs 출력)
+ 예: 좌=H/W[서버,워크스테이션,모니터] | 중앙=EG-BIM | 우=S/W[Modeler,GIS,Simulation]
+ when: 시스템 구성을 중앙 라벨 기준 좌/우로 나열할 때. 좌/우 카테고리가 다르고 중앙 시스템이 연결.
+ not_for: |
+ - 단순 좌/우 텍스트 비교 → comparison-2col
+ - 행별 대조 → compare-2col-split
+ - 카테고리 리스트 + 번호 이슈 → split-panel-numbered
+ purpose_fit:
+ - 구조시각화
+ - 핵심전달
+ zone: full-width-only
+ slots:
+ required:
+ - center_title
+ - left_label
+ - right_label
+ - left_items[]
+ - right_items[]
+ optional:
+ - center_sub
+ - left_color
+ - right_color
+ - items[].icon
+ schema:
+ center_title:
+ max_lines: 2
+ font_size: 18
+ ref_chars:
+ body: 8
+ note: "18px black/900, 원형 안"
+ tab_label:
+ max_lines: 1
+ font_size: 20
+ ref_chars:
+ body: 8
+ note: "20px bold white, 색상 탭"
+ item_title:
+ max_lines: 1
+ font_size: 16
+ ref_chars:
+ body: 20
+ note: "16px bold"
+ item_body:
+ max_lines: 3
+ font_size: 14
+ ref_chars:
+ body: 80
+ note: "14px medium gray"
+ padding_overhead_px: 44
+ padding_h_px: 24
+- id: category-strip-table
+ name: 카테고리 컬러 스트립 테이블
+ category: cards
+ template: blocks/cards/category-strip-table.html
+ height_cost: large
+ min_height_px: 180
+ relation_types:
+ - definition
+ - comparison
+ min_items: 2
+ max_items: 5
+ visual: N열 다크 배경 테이블. 좌측 세로 색상 바(카테고리 라벨) + 우측 제목+본문 M행. 구분선.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 2~5개 카테고리, 각 카테고리에 2~4개 하위 항목(제목+본문)
+ - 각 카테고리를 세로 색상 바(2~4글자 세로 라벨)로 구분
+ - 어두운 배경, 표 형식 (줄 단위 구분)
+ - 카테고리 라벨이 세로쓰기로 표시됨
+ 예: 기술[DB구축/SW개발/자동화] | 사람[교육/역량/조직] | 자연[환경/지형]
+ when: 카테고리별 하위 항목을 세로 색상 바로 구분하며 나열할 때. 다크 배경 표 구조.
+ not_for: |
+ - 단순 데이터 테이블 → table-simple-striped
+ - 밝은 배경 아이콘 카드 → card-icon-desc
+ - 수평 색상 분류 바 → highlight-strip
+ purpose_fit:
+ - 핵심전달
+ - 구조시각화
+ zone: full-width-only
+ slots:
+ required:
+ - columns[]
+ optional:
+ - columns[].label
+ - columns[].label_sub
+ - columns[].color
+ schema:
+ column_label:
+ max_lines: 2
+ font_size: 20
+ ref_chars:
+ body: 4
+ note: "20px bold white, 세로쓰기, 색상 바 위"
+ row_title:
+ max_lines: 2
+ font_size: 18
+ ref_chars:
+ body: 20
+ note: "18px bold white"
+ row_body:
+ max_lines: 3
+ font_size: 14
+ ref_chars:
+ body: 60
+ note: "14px medium, rgba(255,255,255,0.7)"
+ padding_overhead_px: 24
+ padding_h_px: 8
- id: hero-icon-cards
name: 히어로 문구 + 아이콘 카드
category: cards
@@ -762,24 +957,21 @@ blocks:
- flow
min_items: 2
max_items: 6
- visual: >
- 다크 배경. 상단 큰 Hero 메시지(28px bold, 중앙, 흰 텍스트, 빨간 강조).
- 3D 빨간 리본 배지가 빨간 테두리 흰 박스(r:20) 위에 걸침.
- 박스 안에 N열 아이콘 카드(구분선). 각 카드: 아이콘 + 영문 제목(20px/900) + 한국어 부제(15px/500).
- visual_diff: >
- - card-icon-desc: 밝은 배경, 이모지+제목+설명. 리본/테두리 없음.
- - card-dark-overlay: 다크 배경 이미지+흰 텍스트. 카드 개별 배경.
- - 이 블록: 다크 배경 + 빨간 리본 배지 + 빨간 테두리 흰 박스 안 N열 카드.
- 적합: 핵심 목표/가치를 N개 키워드로 선언하며 시각적 임팩트 필요할 때.
- 부적합: 상세 설명 → card-icon-desc, 비교 → compare-2col-badge.
- when: >
- 핵심 목표나 가치를 N개 키워드로 선언할 때.
- 각 키워드에 아이콘이나 이미지가 있을 때.
- 프레젠테이션형 임팩트가 필요할 때.
- not_for: >
- 비교/대조 → compare-2col-badge.
- 상세 설명 → card-icon-desc.
- 순서/단계 → process-horizontal.
+ visual: 상단 Hero 선언문 + 리본 배지 + 빨간 테두리 흰 박스 안 N열 아이콘 카드.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 상단에 핵심 선언문(1~2줄, 강조 키워드 포함)
+ - 하단에 2~6개 키워드를 나란히 나열 (아이콘+제목+부제)
+ - 리본 배지로 카드 영역의 주제를 명시 (예: "Solution 제작 목표")
+ - 각 카드는 짧은 키워드(제목 15자) + 부제(10자)
+ - 프레젠테이션형 시각 임팩트 필요
+ 예: 선언문="~목표를 달성한다" → 배지="Solution" → [품질/안전/생산성/소통/신뢰]
+ when: 핵심 선언문 아래 N개 키워드를 배지+테두리 박스로 강렬하게 나열할 때.
+ not_for: |
+ - 선언문 없이 카드만 → card-icon-desc
+ - 상세 설명(3줄+) → card-icon-desc
+ - 비교 구조 → compare-2col-badge
+ - 순서/단계 → process-horizontal
purpose_fit:
- 핵심전달
zone: full-width-only
@@ -831,25 +1023,20 @@ blocks:
- process
min_items: 2
max_items: 10
- visual: >
- 좌우 그라디언트 배경(워 브라운 vs 다크틸)으로 나뉜 2열 비교.
- 비대칭 라운드 헤더(좌: 우라운드+우정렬, 우: 좌라운드+좌정렬).
- N개 섹션(소제목 18px/900 + 불릿 14px/700) 반복.
- CSS Grid 행 공유로 좌/우 섹션 제목이 같은 Y선에 정렬.
- 첫 섹션에 As-Is → 화살표 → To-Be 수평 배치 가능.
- visual_diff: >
- - compare-2col-badge: 배지+2열, 단순 비교. 섹션 반복 없음.
- - comparison-2col: 좌우 텍스트 블록 비교. 그라디언트 없음.
- - 이 블록: 그라디언트+비대칭 헤더+N섹션 행 정렬. 가장 상세한 비교.
- 적합: 두 카테고리에 각각 3개+ 하위 항목이 있는 상세 비교.
- 부적합: 간단 비교 → compare-2col-badge, 표 형식 → compare-2col-split.
- when: >
- 두 카테고리를 상세하게 비교할 때. 각 카테고리에 여러 하위 항목.
- 과정 vs 결과, As-Is vs To-Be, 문제 vs 해결 구조.
- not_for: >
- 간단 비교(본문 짧을 때) → compare-2col-badge.
- 항목별 행 비교(표 형식) → compare-2col-split.
- 3열 비교 → compare-3col-badge.
+ visual: 좌/우 gradient 배경 2열. 비대칭 라운드 헤더. N개 섹션(소제목+불릿) 행 정렬.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 좌/우 두 카테고리에 각각 3~5개 하위 섹션
+ - 각 섹션 = 소제목 + 불릿 리스트
+ - 좌/우 섹션이 행 단위로 대응 (같은 높이에 정렬)
+ - 선택적으로 As-Is → To-Be 수평 비교 포함
+ - "과정의 혁신 vs 결과의 혁신" 같은 깊은 대비
+ 예: 좌"과정의 혁신"[프로세스/수행방식/도구] vs 우"결과의 혁신"[성과물/활용/관리]
+ when: 두 카테고리를 섹션 단위로 상세 비교할 때. 각 카테고리에 3+개 하위 섹션. As-Is/To-Be 가능.
+ not_for: |
+ - 간단 비교(본문 짧음) → compare-2col-badge 또는 comparison-2col
+ - 행별 카테고리 표 → compare-vs-rows
+ - 표 형식 → compare-2col-split
purpose_fit:
- 비교대조
- 구조시각화
@@ -900,24 +1087,19 @@ blocks:
relation_types:
- comparison
- contrast
- visual: >
- 상단 배지 바(틸 그라디언트 + 흰색 텍스트, r:12) 아래
- 2열 비교 레이아웃. 좌/우 각각 대제목(22px/900) + 본문(15px/500).
- 중앙 세로 구분선. 흰색 컨테이너(r:16). 선택적 하단 Hero 메시지.
- visual_diff: >
- - compare-2col-split: 중앙 '기준 라벨' 열이 있는 3열 표. 행별 상세 비교.
- - comparison-2col: 좌우 텍스트 블록 비교. 표 없이 자유 형식.
- - compare-pill-pair: 둥근 박스 2개 + VS. 헤더 역할만.
- - 이 블록: 배지 헤더로 상위 주제 선언 + 2열 비교 + 선택적 결론 문구.
- 적합: 두 개념/전략의 정의를 비교하며 상위 주제를 배지로 명시할 때.
- 부적합: 항목별 행 비교 → compare-2col-split, 시각적 대비만 → compare-pill-pair.
- when: >
- 두 개념/방법/전략을 나란히 비교할 때. 배지 헤더로 상위 주제를 명시.
- 예: "정책 달성 — Engn. Solution vs DfMA", "현재 vs 미래"
- not_for: >
- 항목별 행 비교(5행+) → compare-2col-split.
- 3개 비교 → compare-3col-badge.
- 간단 텍스트만 → comparison-2col.
+ visual: 상단 3D 리본 배지(gradient bar, 상위 주제 선언) + 아래 빨간 테두리 박스 안에 2열 비교. 좌/우 각각 대제목(22px)+본문. 중앙 구분선. 하단에 선택적 결론 문구.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - "상위 주제(배지)" + "A 정의/설명" vs "B 정의/설명" 구조
+ - 상위 주제를 배지 바로 먼저 선언하고, 아래에서 좌/우 비교
+ - 좌/우 각각 제목(1줄) + 본문(3~6줄)
+ - 하단에 결론 한 줄 추가 가능
+ 예: 배지="정책 달성" → 좌"Engn. Solution: ~설명" vs 우"DfMA: ~설명"
+ when: 상위 주제를 배지로 선언한 뒤 두 개념/전략의 정의를 본문으로 비교할 때. 각 측이 제목+본문 구조.
+ not_for: |
+ - 상위 주제 배지 불필요, 단순 좌/우 대비 → comparison-2col
+ - 카테고리별 N행 비교 → compare-vs-rows
+ - 행별 기준 라벨 표 → compare-2col-split
purpose_fit:
- 비교대조
- 개념정의
@@ -980,28 +1162,20 @@ blocks:
min_height_px: 150
relation_types:
- comparison
- visual: 3단 테이블. 좌(하늘색 헤더) | 중앙(파란 VS 배지) | 우(파란 헤더). 행별 비교.
- visual_diff: '유사 블록과의 차이:
-
- - compare-2col-split: 중앙에 ''기준 라벨'' 열이 있는 3열 표. 비교 기준이 행마다 명시됨
-
- - comparison-2col: 표가 아닌 좌우 텍스트 블록. CSS var로 색상 구분
-
- - compare-pill-pair: 둥근 박스 2개 + VS. 비교 헤더 역할만 수행
-
- - card-compare-3col: 3개 독립 카드로 비교. 카드별 색상 헤더+이미지+불릿
-
- - 이 블록: VS 배지가 중앙 열에 고정된 3열 표. 좌/우 헤더 색상이 다르고 행 단위로 대조
-
- 적합: 두 개념의 다항목(5행+) 체계적 비교. 비교 기준 없이 좌/우 값만 대조할 때
-
- 부적합: 비교 기준 라벨 필요 → compare-2col-split, 3개 카테고리 비교 → card-compare-3col
-
- '
- when: '두 개념의 다항목 비교(5행 이상). 구분 기준(중앙)을 두고 좌우로 비교. 예: BIM vs DX — S/W, 프로세스, 성과물
- 비교.'
- not_for: 시각적 대비(짧음) → compare-pill-pair. 2단 분할 → compare-2col-split. 범용 데이터 → table-simple-striped.
- A vs B 간단 비교(2~3행) → comparison-2col.
+ visual: 3열 표. 좌 | 중앙 VS 배지 | 우. 행별 좌/우 값 대조.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - A와 B를 5~7행으로 대조하는 표 구조
+ - 중앙에 VS 배지 (비교 기준 라벨 없이 좌/우 값만 대조)
+ - 비교 기준 라벨이 필요하면 compare-2col-split
+ - 카테고리 pill이 필요하면 compare-vs-rows
+ 예: A=BIM | VS | B=DX → [S/W항목, 프로세스항목, ...] 행별 대조
+ when: 두 개념을 행별로 값 대조할 때. 비교 기준 라벨 없이 좌/우만. 5+행.
+ not_for: |
+ - 비교 기준 라벨 필요 → compare-2col-split
+ - 카테고리 pill 비교 → compare-vs-rows
+ - 간단 2~3항목 → comparison-2col
+ - 범용 데이터 → table-simple-striped
purpose_fit:
- 핵심전달
slots:
@@ -1031,28 +1205,21 @@ blocks:
min_height_px: 150
relation_types:
- comparison
- visual: 파란 헤더(좌/구분/우) + 행별 좌:항목 | 중앙:기준 라벨(파란) | 우:항목. 상세 비교.
- visual_diff: '유사 블록과의 차이:
-
- - compare-3col-badge: 3열 표에 VS 배지가 중앙에 있고 행별 비교. 헤더가 좌/우만 구분
-
- - comparison-2col: CSS var 기반 좌우 텍스트 비교. 표가 아니라 자유 텍스트 블록
-
- - compare-pill-pair: 둥근 박스 2개 + VS. 비교 헤더 역할만 하고 세부 항목 없음
-
- - card-compare-3col: 3개 독립 카드로 비교. 각 카드에 색상 헤더+불릿
-
- - 이 블록: 중앙에 ''기준 라벨'' 열이 있는 3열 표. 행마다 비교 기준(정의/범위/역할 등)이 명시됨
-
- 적합: 비교 기준이 명확하고 항목별(5행+) 상세 대조가 필요한 경우
-
- 부적합: 간단한 2~3항목 비교 → comparison-2col, 시각적 대비만 → compare-pill-pair
-
- '
- when: '두 기술/개념의 항목별 상세 비교. 중앙에 비교 기준 라벨. 예: DX vs BIM — 정의/범위/역할 비교. 원본에 이미 비교표
- 데이터가 있을 때.'
- not_for: VS 배지 → compare-3col-badge. 범용 데이터 → table-simple-striped. 간단 A vs B(2~3항목)
- → comparison-2col.
+ visual: 표 형식. 파란 헤더(좌/구분/우) + 행별 좌 | 중앙 기준 라벨 | 우. 정형 비교표.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - A와 B를 비교하는 정형 표 데이터가 이미 있음
+ - 각 행에 비교 기준(정의/범위/역할 등)이 명시됨 (중앙 열)
+ - 5~10행의 항목별 상세 대조
+ - 비교 기준 라벨이 중앙에 있는 3열 구조
+ - compare-vs-rows와 차이: 이 블록은 기준 라벨이 중앙 "열"로 고정, compare-vs-rows는 gradient pill
+ 예: [정의: A=~ | B=~] [범위: A=~ | B=~] [역할: A=~ | B=~] ...
+ when: 비교 기준이 명확한 정형 표 데이터로 두 개념을 항목별 대조할 때.
+ not_for: |
+ - 카테고리 pill 비교 → compare-vs-rows
+ - 간단 2~3항목 비교 → comparison-2col
+ - 범용 데이터 표 → table-simple-striped
+ - 3개 비교 → compare-3col-badge
purpose_fit:
- 핵심전달
zone: full-width-only
@@ -1081,9 +1248,18 @@ blocks:
height_cost: medium
min_height_px: 100
relation_types: []
- visual: 진한 남색 헤더 + 줄무늬 행 교차. 첫 열 굵은 글씨. 범용 데이터 표.
- when: '비교가 아닌 일반 데이터 표. 스펙표, 일정표, 항목 목록. 예: 구분/현재/목표/비고.'
- not_for: A vs B 비교 → compare-3col-badge 또는 compare-2col-split.
+ visual: 남색 헤더 + 줄무늬 행 교차. 범용 데이터 표.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 비교가 아닌 일반 데이터 표 (스펙, 일정, 목록)
+ - N열 × M행 정형 데이터
+ - 헤더 행 + 데이터 행으로 구성
+ - A vs B 비교가 아님 (비교면 compare 계열)
+ 예: [구분/현재/목표/비고] → N행 데이터
+ when: 비교 목적이 아닌 일반 데이터 표. 스펙표, 일정표, 항목 목록.
+ not_for: |
+ - A vs B 비교 → compare-3col-badge 또는 compare-2col-split
+ - 카테고리 비교 → compare-vs-rows
purpose_fit:
- 핵심전달
- 근거사례
@@ -1124,11 +1300,20 @@ blocks:
- inclusion
min_items: 2
max_items: 5
- visual: SVG. 진한 파란 큰 원(중심) + 3~5개 작은 원(주황/민트/골드 등). 그라데이션+글로우. 동적 N-item 지원.
- when: '상위-하위 포함 관계를 시각화. 기술 융합/포함 구조. 예: DX 안에 GIS/BIM/디지털트윈. relation_type=hierarchy
- 또는 inclusion일 때. ★ 반드시 단독 배치. 다른 블록과 같은 zone에 쌓으면 공간 부족.'
- not_for: 텍스트로 관계 설명 가능하면 사용 금지. sidebar(35%) 배치 금지. 높이 300px 미만 금지. 순차 흐름(A→B→C)
- → process-horizontal. 대등 비교 → compare-pill-pair.
+ visual: SVG 벤 다이어그램. 큰 원(중심) + N개 작은 원. gradient+glow.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 상위 개념 안에 2~5개 하위 개념이 포함되는 관계
+ - 중심에 상위 개념(큰 원) + 주변에 하위 개념(작은 원)
+ - 포함/융합 관계 시각화 (A ⊃ {B, C, D})
+ - cycle-3way-intersect와 차이: venn은 포함 관계, cycle은 교차/융합 관계
+ 예: DX(중심) ⊃ [GIS, BIM, 디지털트윈, IoT]
+ when: 상위-하위 포함 관계를 벤 다이어그램으로 시각화. 2~5개 하위 개념. 단독 배치 필수.
+ not_for: |
+ - 3개 교차/융합 관계 → cycle-3way-intersect
+ - 순차 흐름 → process-horizontal
+ - 대등 비교 → compare-pill-pair
+ - 텍스트로 충분히 설명 가능하면 사용 금지
purpose_fit:
- 핵심전달
- 구조시각화
@@ -1177,9 +1362,18 @@ blocks:
height_cost: compact
min_height_px: 50
relation_types: []
- visual: 파란 그라데이션 원(190px) + 이중 테두리 + 중앙 흰색 텍스트.
- when: 섹션 전환점에서 키워드를 원형으로 강조. 아래에 카드/표가 올 때 주제 선언.
- not_for: 본문 텍스트 → topic-header 계열. 결론 한 줄 → banner-gradient. 단독 사용 비추.
+ visual: gradient 원(190px) + 이중 테두리 + 중앙 흰색 텍스트. 단일 키워드.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 단일 키워드(6자 이내)를 원형 아이콘처럼 강조
+ - 섹션 전환점의 주제 선언 (아래에 본문 블록이 따라옴)
+ - 선택적 보조 라벨
+ - keyword-circle-row와 차이: 이 블록은 단일 원, row는 N개 나열
+ when: 단일 키워드를 원형으로 강조. 섹션 주제 선언 아이콘.
+ not_for: |
+ - N개 키워드 나열 → keyword-circle-row
+ - 텍스트 제목 → topic-center
+ - 결론 한 줄 → banner-gradient
purpose_fit: []
slots:
required:
@@ -1212,26 +1406,19 @@ blocks:
min_height_px: 60
relation_types:
- comparison
- visual: 이중 테두리 둥근 박스 2개 나란히 + 'VS'. 하늘색 테두리 + 시안 텍스트.
- visual_diff: '유사 블록과의 차이:
-
- - compare-2col-split: 3열 표, 행별 기준 라벨+좌우 항목. 상세 비교용
-
- - compare-3col-badge: 3열 표, VS 배지 중앙. 다항목 비교용
-
- - comparison-2col: 좌우 텍스트 블록, 파란/빨간 밑줄. 문단형 비교
-
- - card-compare-3col: 3개 독립 카드, 색상 헤더+불릿
-
- - 이 블록: 둥근 필(pill) 박스 2개 + VS 텍스트만. 세부 항목 없이 대비 선언만 수행
-
- 적합: 비교 테이블 위에 헤더로 배치. 두 개념의 시각적 대비를 짧게 선언할 때
-
- 부적합: 세부 비교 항목 필요 → compare-3col-badge/compare-2col-split, 텍스트 설명 → comparison-2col
-
- '
- when: '2개 개념 시각적 대비. 비교 테이블 위 헤더로 사용. 예: "DX 협업 프로세스" VS "BIM 정보 관리".'
- not_for: 상세 비교(5행+) → compare-3col-badge. 3개 이상 → card-compare-3col.
+ visual: 이중 테두리 둥근 박스 2개 나란히 + VS. 짧은 라벨만. 비교 헤더 역할.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 2개 개념의 시각적 대비를 짧은 라벨(10자 이내)로만 선언
+ - 세부 비교 항목 없이 "A vs B" 선언만
+ - 비교 테이블 블록 위에 헤더로 배치 (단독 사용도 가능)
+ - 상세 설명 불필요
+ 예: "DX 협업 프로세스" VS "BIM 정보 관리" (이 아래에 비교표 블록 배치)
+ when: 2개 개념을 짧은 라벨로 시각적 대비 선언할 때. 비교표 위 헤더. 세부 항목 없음.
+ not_for: |
+ - 세부 비교 항목 필요 → compare-3col-badge 또는 compare-vs-rows
+ - 설명 포함 비교 → comparison-2col
+ - 3개 비교 → card-compare-3col
purpose_fit:
- 핵심전달
zone: full-width-only
@@ -1268,21 +1455,20 @@ blocks:
- sequence
min_items: 2
max_items: 5
- visual: 가로 방향. 파란 원형 번호 + 제목 + 설명(카드). → 화살표 연결.
- visual_diff: '유사 블록과의 차이:
-
- - flow-arrow-horizontal: SVG 캡슐 + 화살표만. 라벨 8자 이내. 설명 없이 흐름만 표현. 컴팩트(50px)
-
- - 이 블록: 파란 원형 번호 + 제목 + 설명이 있는 카드 + 화살표 연결. 각 단계에 상세 설명 포함
-
- 적합: 각 단계에 제목+설명이 필요한 상세 프로세스 흐름. 라벨이 긴 경우(8자 초과)
-
- 부적합: 짧은 키워드만으로 흐름 표현 → flow-arrow-horizontal, 높이 예산 부족 → flow-arrow-horizontal
-
- '
- when: 논리적 순서가 있는 단계를 가로로. A→B→C→D 프로세스 흐름. 각 단계에 제목+설명이 필요할 때.
- not_for: 독립 사례 나열(순서 없음) → card-icon-desc 또는 dark-bullet-list. 세로 나열 → card-numbered.
- 간결한 흐름(설명 불필요) → flow-arrow-horizontal.
+ visual: 가로 흐름도. 원형 번호 + 제목 + 설명 카드 + 화살표 연결.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 2~5개 단계가 가로 순서로 진행
+ - 각 단계에 제목(10자) + 설명(1~2줄)이 필요
+ - A→B→C 순서 흐름 (순서 없으면 card-icon-desc)
+ - flow-arrow-horizontal과 차이: 이 블록은 설명 포함, flow-arrow는 키워드(8자)만
+ 예: 1.현황분석(설명) → 2.전략수립(설명) → 3.실행(설명) → 4.검증(설명)
+ when: 각 단계에 제목+설명이 필요한 가로 프로세스 흐름. 2~5단계.
+ not_for: |
+ - 키워드만(설명 불필요) → flow-arrow-horizontal
+ - 세로 타임라인 → card-step-vertical
+ - 순서 없는 나열 → card-icon-desc
+ - 번호 목록 → card-numbered
purpose_fit:
- 핵심전달
- 구조시각화
@@ -1328,22 +1514,20 @@ blocks:
- sequence
min_items: 2
max_items: 6
- visual: SVG. 색상 둥근 캡슐이 가로 나열 + 사이 화살표. 컴팩트. 각 캡슐 120px 폭.
- visual_diff: '유사 블록과의 차이:
-
- - process-horizontal: 파란 원형 번호 + 제목 + 설명 카드 + 화살표. 각 단계에 제목+설명이 있는 상세 흐름
-
- - 이 블록: SVG 캡슐(120px)이 가로 나열 + 사이 화살표. 라벨만(8자 이내). 설명 없이 흐름만 표현. 컴팩트
-
- 적합: 짧은 키워드(8자 이내)로 순서/흐름만 간결하게 보여줄 때. 높이 예산이 적을 때
-
- 부적합: 각 단계에 설명 필요 → process-horizontal, 라벨 8자 초과 → process-horizontal
-
- '
- when: '명확한 시간 순서 또는 인과 흐름이 있을 때만 사용. A→B→C 순서가 핵심. 예: GIS→SPCC→토공→BIM (기술 발전 순서).
- ★ 각 라벨은 8자 이내로 짧아야 함(120px 캡슐 안에 들어가야 함).'
- not_for: 독립 사례/증거 나열(순서 없음) → dark-bullet-list 또는 card-icon-desc. 정책 문서 나열 → dark-bullet-list.
- 각 단계에 설명 필요 → process-horizontal. 라벨이 길면(8자 초과) → process-horizontal 또는 card-numbered.
+ visual: SVG 캡슐이 가로 나열 + 사이 화살표. 라벨만. 컴팩트 흐름도.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - A→B→C 순서/흐름이 핵심 (2~6단계)
+ - 각 단계가 짧은 키워드(8자 이내)만
+ - 단계별 설명 불필요 (설명 필요하면 process-horizontal)
+ - 컴팩트하게 흐름만 표현 (높이 ~50px)
+ 예: GIS → SPCC → 토공 → BIM (기술 발전 순서)
+ when: 짧은 키워드(8자 이내)로 순서/흐름만 간결하게 보여줄 때. 높이 예산 적을 때.
+ not_for: |
+ - 단계별 설명 필요 → process-horizontal
+ - 라벨 8자 초과 → process-horizontal
+ - 순서 없는 나열 → dark-bullet-list 또는 card-icon-desc
+ - 번호 순서 나열 → card-numbered
purpose_fit:
- 구조시각화
zone: full-width-only
@@ -1374,11 +1558,19 @@ blocks:
- hierarchy
min_items: 2
max_items: 5
- visual: SVG 그라데이션 원 안에 큰 글자(G,S,I,M 등 약어) + 아래 라벨 + 설명.
- when: '약어 풀이. 핵심 키워드를 원형으로 시각 강조. 예: G(Geographic) + S(Structure) + I(Information)
- + M(Model).'
- not_for: 아이콘+설명 → card-icon-desc. 용어 정의(문장형) → card-numbered. 약어가 아닌 일반 텍스트 → 사용
- 금지.
+ visual: SVG gradient 원 N개 가로 나열. 각 원에 약어 1~2글자 + 아래 라벨 + 설명.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 약어를 풀이하는 구조 (G=Geographic, S=Structure 등)
+ - 2~5개 약어/핵심 글자를 원형으로 가로 나열
+ - 각 원에 1~2글자 약어 + 아래 라벨(풀이) + 선택적 설명
+ - circle-gradient와 차이: 이 블록은 N개 나열, circle-gradient는 단일 원
+ 예: G(Geographic) | S(Structure) | I(Information) | M(Model)
+ when: 약어 풀이를 원형 아이콘으로 가로 나열할 때. 2~5개 약어.
+ not_for: |
+ - 아이콘+설명 카드 → card-icon-desc
+ - 단일 원 강조 → circle-gradient
+ - 약어가 아닌 일반 텍스트 → 사용 금지
purpose_fit:
- 구조시각화
slots:
@@ -1421,24 +1613,20 @@ blocks:
height_cost: medium
min_height_px: 80
relation_types: []
- visual: 좌상단 ❝ + 우하단 ❞ 큰따옴표 장식. 연한 배경 박스 + 인용문 + 우측 출처.
- visual_diff: '유사 블록과의 차이:
-
- - quote-question: 파란 배경 + 파란 테두리 + 큰 질문(22px). 독자에게 질문을 던지는 구조
-
- - callout-warning: 빨간 배경 + 경고 아이콘 + 설명. 문제점/위험 경고용
-
- - callout-solution: 파란 배경 + 솔루션 아이콘 + 설명. 해결책 제시용
-
- - 이 블록: 큰따옴표(❝❞) 장식이 좌상/우하에 배치. 연한 배경 + 인용문 텍스트 + 출처. 인용 형식
-
- 적합: 출처가 있는 인용문. 권위 있는 발언/보고서를 인용 형태로 강조할 때
-
- 부적합: 질문형 → quote-question, 문제 경고 → callout-warning, 해결책 → callout-solution
-
- '
- when: 임팩트 있는 인용문. 문제 제기를 인용 형태로 강조. 출처가 있는 인용.
- not_for: 짧은 질문(1~2줄) → quote-question. 결론 한 줄 강조 → banner-gradient. 불릿 나열 → dark-bullet-list.
+ visual: 큰따옴표(❝❞) 장식 + 연한 배경 박스 + 인용문 + 출처. 인용 형식.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 타인의 발언/보고서/문서를 인용하는 구조
+ - 인용문(1~3줄) + 출처(선택, "~보고서", "~발언")
+ - 출처가 있으면 이 블록 (출처 없는 질문은 quote-question)
+ - 자기 주장이 아니라 타인/문서의 말을 빌리는 형식
+ 예: "건설산업의 디지털 전환은 필수불가결하다" — 국토교통부 보고서
+ when: 출처가 있는 인용문을 강조 형태로 보여줄 때. 인용문+출처 구조.
+ not_for: |
+ - 자기 질문(물음표) → quote-question
+ - 경고/문제점 서술 → callout-warning
+ - 해결책 강조 → callout-solution
+ - 1줄 결론 선언 → statement-pill-highlight
purpose_fit:
- 문제제기
- 근거사례
@@ -1471,24 +1659,20 @@ blocks:
height_cost: medium
min_height_px: 80
relation_types: []
- visual: 밝은 파란 배경 + 파란 테두리 + 큰 질문 텍스트(22px) + 부연 설명.
- visual_diff: '유사 블록과의 차이:
-
- - quote-big-mark: 큰따옴표 장식 + 인용문 + 출처. 타인의 말을 인용하는 형식
-
- - callout-warning: 빨간 배경 + 경고 아이콘. 문제점 경고. 부정적 톤
-
- - callout-solution: 파란 배경 + 솔루션 아이콘. 해결책 제시. 긍정적 톤
-
- - 이 블록: 파란 배경+테두리 + 큰 질문(22px bold). 독자에게 직접 질문하는 구조. 부연 설명 포함
-
- 적합: 독자에게 질문을 던져 문제 인식을 유도하는 전환점. 물음표로 끝나는 핵심 질문
-
- 부적합: 타인 인용(출처) → quote-big-mark, 경고 → callout-warning, 해결책 → callout-solution
-
- '
- when: '독자에게 질문을 던져 문제 인식을 유도. 전환점. 예: "지금의 방식으로도 가능할까?"'
- not_for: 인용(출처 있음) → quote-big-mark. 결론 선언 → banner-gradient. 경고/문제 → callout-warning.
+ visual: 밝은 파란 배경 + 파란 테두리 + 큰 질문 텍스트 + 부연 설명.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 핵심이 물음표(?)로 끝나는 질문 1개
+ - 질문으로 독자의 문제 인식을 유도하는 전환점
+ - 질문(1줄) + 선택적 부연 설명(1~3줄)
+ - 타인 인용이 아님 (인용이면 quote-big-mark)
+ 예: "지금의 방식으로도 가능할까?" → 부연 설명 2줄
+ when: 물음표로 끝나는 핵심 질문으로 문제 인식을 유도할 때. 질문+부연 설명 구조.
+ not_for: |
+ - 타인 인용+출처 → quote-big-mark
+ - 경고/문제 서술 → callout-warning
+ - 결론 선언 → statement-pill-highlight 또는 banner-gradient
+ - 해결책 제시 → callout-solution
purpose_fit:
- 문제제기
slots:
@@ -1528,28 +1712,21 @@ blocks:
description: 큰 박스 안에 카드 N개 (포함 관계 시각화, DX⊃BIM)
template: blocks/emphasis/comparison-2col--cards-in-container.html
when: hierarchy/inclusion — A 안에 B,C,D가 포함됨을 보여줄 때. 포함 관계 시각화
- visual: 좌우 2단. 좌 파란 헤더(밑줄) + 우 빨간 헤더(밑줄). 중앙 구분선. 서브타이틀+본문.
- visual_diff: '유사 블록과의 차이:
-
- - compare-2col-split: 표 형식. 행마다 기준 라벨+좌우 셀. 정형화된 비교
-
- - compare-3col-badge: 표 형식. VS 배지 중앙 열. 다항목 행별 비교
-
- - compare-pill-pair: 둥근 박스 2개 + VS. 헤더 역할만, 세부 내용 없음
-
- - card-compare-3col: 3개 독립 카드, 카드별 색상 헤더+불릿
-
- - 이 블록: 자유 텍스트 좌우 블록. 좌=파란 밑줄, 우=빨간 밑줄. CSS var 사용. 표가 아니라 문단형
-
- 적합: 2~3항목의 간결한 대비. 장단점, Before/After. 자유로운 텍스트 비교
-
- 부적합: 5행+ 다항목 비교 → compare-3col-badge/compare-2col-split, 3개 비교 → card-compare-3col
-
- '
- when: 'A vs B 간단 비교. 2~3개 항목을 좌우로 대비. 장단점, Before/After 등 대비 구조. 예: BIM(하위기술) vs
- DX(상위개념).'
- not_for: 다항목 표(5행+) → compare-3col-badge. 결론 한 줄 강조 → banner-gradient. 핵심 메시지 선언
- → banner-gradient. footer에서 결론 강조용으로 쓰지 마라.
+ visual: 좌우 2단 자유 텍스트. 좌=파란 밑줄 헤더, 우=빨간 밑줄 헤더. 중앙 1px 구분선. 각 측에 서브타이틀(선택)+본문 문단. 표가 아닌 문단형.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - A와 B 두 개념을 각각 2~3문장으로 설명하는 자유 문단형 비교
+ - 행별 카테고리 구분이 없음 (카테고리별 비교는 compare-vs-rows)
+ - 좌/우 텍스트 길이가 비슷하고 각각 독립된 설명
+ - 항목 수 2~3개, 문단형 텍스트
+ 예: "BIM(하위기술): ~설명 3줄" vs "DX(상위개념): ~설명 3줄"
+ when: A와 B를 각각 자유 문단으로 설명하며 대비할 때. 행별 카테고리 구분 없이 좌/우 각각 독립 서술. 장단점, Before/After, 개념 대비.
+ not_for: |
+ - 카테고리별 N행 비교 → compare-vs-rows (10+행, 중앙 카테고리 pill)
+ - 행별 기준 라벨이 있는 표 → compare-2col-split
+ - 배지 헤더로 상위 주제 선언 필요 → compare-2col-badge
+ - 3개 이상 비교 → card-compare-3col
+ - 좌/우 이슈 쌍 + 라벨 pill → issues-paired-rows
purpose_fit:
- 핵심전달
slots:
@@ -1607,10 +1784,20 @@ blocks:
height_cost: compact
min_height_px: 40
relation_types: []
- visual: 전체 너비 파란 그라데이션 배경(둥근 모서리 8px) + 중앙 흰색 굵은 텍스트(16px) + 선택적 서브텍스트.
- when: '★ 결론 강조에 가장 적합. 핵심 메시지 한 줄 선언. footer 배치에 최적(compact, 50~60px). 페이지의 "기억해야
- 할 단 하나의 문장". 예: "BIM은 DX의 기초가 되는 일부분이다. DX ≠ BIM"'
- not_for: 인용(출처) → quote-big-mark. 긴 설명(3줄+) → callout-solution. A vs B 비교 → comparison-2col.
+ visual: 전체 너비 파란 gradient 배경 + 중앙 흰색 텍스트 + 선택적 서브텍스트. 컴팩트 배너.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 결론/핵심 메시지 1줄 (38자 이내) + 선택적 부연 1줄
+ - 파란 배경 배너 (statement-pill-highlight는 어두운 gradient 캡슐)
+ - 섹션 마무리 또는 footer 배치에 적합 (compact, 50~60px)
+ - 키워드 하이라이트 불필요 (하이라이트 필요하면 statement-pill-highlight)
+ 예: "BIM은 DX의 기초가 되는 일부분이다. DX ≠ BIM"
+ when: 결론 1줄을 파란 배너로 선언할 때. 키워드 하이라이트 불필요. 컴팩트 footer 용도.
+ not_for: |
+ - 키워드 하이라이트 필요 → statement-pill-highlight ( 노란색)
+ - 인용+출처 → quote-big-mark
+ - 설명 3줄+ → callout-solution
+ - A vs B 비교 → comparison-2col
purpose_fit:
- 결론강조
slots:
@@ -1652,10 +1839,20 @@ blocks:
description: Before→After 2열 구조 (프로세스 변화, 전환)
template: blocks/emphasis/dark-bullet-list--before-after.html
when: 기존 방식 → 새 방식으로의 전환/변화를 보여줄 때. 각 항목이 before/after 쌍일 때
- visual: 짙은 남색 배경 + 파란 제목 + 흰 텍스트 불릿. 파란 불릿 마커. 시각적 무게감.
- when: ★ 독립적인 사례/증거/포인트를 나열할 때 적합. 순서 없는 항목을 강조하며 나열. 정책 문서 사례, 근거 자료 나열.
- not_for: 밝은 배경 → card-icon-desc 또는 card-numbered. 순서가 있는 단계 → card-numbered 또는 process-horizontal.
- 시각화(다이어그램) → venn-diagram.
+ visual: 짙은 남색 배경 + 파란 제목 + 흰 텍스트 불릿. 어두운 톤 강조.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 3~5개 독립 포인트/사례/증거를 나열
+ - 각 항목이 1줄 문장 (순서 없음)
+ - 어두운 배경으로 시각적 무게감/강조 필요
+ - 제목(선택) + 불릿 리스트만 (설명/이미지 불필요)
+ 예: "정책 시행 근거" → [근거1, 근거2, 근거3, 근거4]
+ when: 순서 없는 독립 포인트를 어두운 배경에 강조하며 나열할 때. 근거, 사례, 문제점 목록.
+ not_for: |
+ - 밝은 배경 카드형 → card-icon-desc
+ - 순서 있는 번호 나열 → card-numbered
+ - 개념별 설명 필요 → card-icon-desc (설명 3줄)
+ - 좌측 총괄 라벨+적층 → stacked-arrow-list
purpose_fit:
- 근거사례
- 문제제기
@@ -1693,9 +1890,19 @@ blocks:
height_cost: compact
min_height_px: 35
relation_types: []
- visual: 가로 색상 구간들. 각 구간에 흰 라벨. 카테고리 색상 분류 바.
- when: '카테고리별 색상 분류를 한 줄로. 예: 상용(회색) | 3rd Party(파랑) | 전문SW(빨강).'
- not_for: 탭 전환 → tab-label-row. 결론 강조 → banner-gradient. 독립 항목 나열 → dark-bullet-list.
+ visual: 가로 1줄에 N개 색상 구간. 각 구간에 흰색 라벨. 카테고리 색상 분류 바.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 2~4개 카테고리를 색상으로 구분하여 한 줄에 표시
+ - 각 카테고리는 짧은 라벨(15자 이내)만
+ - 설명 없이 분류 자체를 보여주는 것이 목적
+ - 카테고리 바 아래에 다른 블록이 올 수 있음 (분류 헤더 역할)
+ 예: [상용S/W(회색)] | [3rd Party(파랑)] | [전문S/W(빨강)]
+ when: 카테고리 색상 분류를 한 줄 바로 표시할 때. 라벨만, 설명 없음.
+ not_for: |
+ - 탭 전환 UI → tab-label-row
+ - 메시지 강조 → banner-gradient
+ - 불릿 리스트 → dark-bullet-list
purpose_fit:
- 구조시각화
slots:
@@ -1724,20 +1931,20 @@ blocks:
min_height_px: 80
relation_types:
- cause_effect
- visual: 밝은 파란 배경 + 파란 테두리 + 아이콘 + 파란 제목 + 설명 + 출처.
- visual_diff: '유사 블록과의 차이:
-
- - quote-big-mark: 큰따옴표 장식 + 인용문 + 출처. 인용 형식
-
- - quote-question: 파란 배경 + 큰 질문(22px). 독자에게 질문하는 구조
-
- - callout-warning: 빨간 배경 + 경고 아이콘 + 빨간 텍스트. 문제점/위험 경고용
-
- - 이 블록: 파란 배경+테두리 + 솔루션 아이콘 + 파란 제목 + 설명(최대 4줄) + 출처. 긍정적/해결책 톤
-
- 적합: 핵심 해결책, 방향성, 솔루션을 강조. 긴 설명(3~4줄)과 출처가 필요할 때
-
- 부적합: 경고/문제 → callout-warning, 인용 → quote-big-mark, 질문 → quote-question
+ visual: 밝은 파란 배경 + 파란 테두리 + 아이콘 + 파란 제목 + 설명 + 출처. 긍정적 톤.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 해결책/방향성/솔루션을 강조하는 콜아웃 박스
+ - 제목(1줄) + 설명(2~4줄) + 선택적 출처
+ - 긍정적/해결책 톤 (파란색 계열)
+ - 경고/문제점이 아님 (경고면 callout-warning)
+ 예: "핵심 해결 방향" → 설명 3줄 → 출처
+ when: 해결책/솔루션/긍정적 방향을 콜아웃 박스로 강조할 때. 제목+설명+출처 구조.
+ not_for: |
+ - 경고/문제 톤(빨간) → callout-warning
+ - 인용문+출처 → quote-big-mark
+ - 질문형 → quote-question
+ - 1줄 결론 → statement-pill-highlight
'
when: '핵심 해결책, 솔루션, 방향성을 강조. 예: "💡 Solution 제시 포인트".'
@@ -1776,24 +1983,20 @@ blocks:
min_height_px: 80
relation_types:
- cause_effect
- visual: 연한 빨간 배경 + 빨간 테두리 + 아이콘 + 빨간 제목 + 진한 빨간 설명.
- visual_diff: '유사 블록과의 차이:
-
- - quote-big-mark: 큰따옴표 장식 + 인용문 + 출처. 인용 형식으로 중립적 톤
-
- - quote-question: 파란 배경 + 큰 질문. 독자에게 질문을 던지는 구조
-
- - callout-solution: 파란 배경 + 솔루션 아이콘 + 설명. 해결책/긍정적 메시지
-
- - 이 블록: 빨간 배경+테두리 + 경고 아이콘 + 빨간 제목/설명. 부정적/경고 톤. 문제점 강조 전용
-
- 적합: 문제점 지적, 잘못된 인식 경고, 위험 요소 강조. 빨간색으로 시각적 경고 전달
-
- 부적합: 해결책 → callout-solution, 인용 → quote-big-mark, 질문 → quote-question
-
- '
- when: '문제점 지적, 잘못된 인식 경고, 주의사항. 문제 제기 purpose에 적합. 예: "⚠️ 현재 접근 방식의 한계".'
- not_for: 해결책 → callout-solution. 인용 → quote-big-mark. 결론 → banner-gradient.
+ visual: 연한 빨간 배경 + 빨간 테두리 + 아이콘 + 빨간 제목 + 설명. 경고/문제점 톤.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 문제점/경고/주의사항을 강조하는 콜아웃 박스
+ - 제목(1줄) + 설명(2~4줄)
+ - 부정적/경고 톤 (잘못된 인식, 위험 요소, 현재 한계)
+ - 해결책이 아님 (해결책이면 callout-solution)
+ 예: "현재 접근 방식의 한계" → 문제점 설명 3줄
+ when: 문제점/경고/위험을 콜아웃 박스로 강조할 때. 부정적 톤 제목+설명.
+ not_for: |
+ - 해결책/긍정 톤 → callout-solution
+ - 인용문 → quote-big-mark
+ - 질문형 → quote-question
+ - 1줄 결론 → statement-pill-highlight
purpose_fit:
- 문제제기
slots:
@@ -1826,9 +2029,18 @@ blocks:
height_cost: compact
min_height_px: 35
relation_types: []
- visual: 가로 탭 버튼. 선택됨=색상 배경+흰 텍스트, 나머지=회색. 밝은 바탕.
- when: '카테고리 전환/분류 표시. 현재 선택된 항목 강조. 예: 제조 | 건축 | [인프라/토목].'
- not_for: 색상 바 → highlight-strip. 실제 클릭 전환 미지원.
+ visual: 가로 탭 버튼 행. 선택됨=색상+흰 텍스트, 나머지=회색.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 2~5개 카테고리 중 하나가 현재 선택됨(active)
+ - 탭 UI 형태 (클릭 전환은 미지원, 시각적 표시만)
+ - 각 탭 라벨 10자 이내
+ - highlight-strip과 차이: 이 블록은 active/inactive 구분, strip은 모두 동등
+ 예: 제조 | 건축 | [인프라/토목](선택됨)
+ when: 카테고리 중 현재 선택된 항목을 탭 형태로 표시할 때.
+ not_for: |
+ - 모두 동등한 색상 바 → highlight-strip
+ - 섹션 구분 → section-header-bar
purpose_fit: []
slots:
required:
@@ -1855,10 +2067,17 @@ blocks:
height_cost: compact
min_height_px: 25
relation_types: []
- visual: 좌우 가는 회색 선 + 중앙 작은 회색 텍스트(13px bold). 시각적 휴식점.
- when: 'sidebar 영역의 섹션 라벨. 주제 전환점에 가벼운 구분. 예: ── 용어 정의 ──'
- not_for: 강한 구분 → section-header-bar. 결론 → banner-gradient. body 영역 메인 제목 → topic
- 계열.
+ visual: 좌우 가는 선 + 중앙 작은 텍스트. ── 라벨 ── 형태.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 가벼운 섹션 전환 구분선 (선+텍스트+선)
+ - 텍스트 20자 이내, 1줄
+ - sidebar 섹션 라벨이나 가벼운 주제 전환
+ 예: ── 용어 정의 ── 또는 ── 핵심 요약 ──
+ when: 가벼운 구분선에 라벨 텍스트. sidebar 또는 본문 전환점.
+ not_for: |
+ - 강한 파란 바 구분 → section-header-bar
+ - 결론 강조 → banner-gradient
purpose_fit: []
slots:
required:
@@ -1882,8 +2101,17 @@ blocks:
min_height_px: 200
relation_types: []
visual: 이미지 2장 나란히. 각 캡션 선택.
- when: 시공 사진 2장 나란히, 현장 비교.
- not_for: 4장 → image-grid-2x2. 이미지+텍스트 → image-side-text. 1장 → image-full-caption.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 이미지 정확히 2장을 나란히 배치
+ - 캡션 선택적, 텍스트 설명 불필요
+ - 이미지 자체가 콘텐츠 (사진, 도면, 스크린샷)
+ when: 이미지 2장 나란히. 현장 비교, 전후 사진 등.
+ not_for: |
+ - 4장 → image-grid-2x2
+ - 이미지+텍스트 설명 → image-side-text
+ - 1장 → image-full-caption
+ - 전/후 라벨 필요 → image-before-after
purpose_fit:
- 근거사례
slots:
@@ -1910,9 +2138,16 @@ blocks:
height_cost: large
min_height_px: 350
relation_types: []
- visual: 이미지 4장 2x2 격자. 각 캡션 선택.
- when: 현장 사진 4장, 4개 관점 이미지.
- not_for: 2장 → image-row-2col. 이미지+텍스트 → image-side-text.
+ visual: 이미지 4장 2×2 격자. 각 캡션 선택.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 이미지 정확히 4장을 2×2 격자로 배치
+ - 캡션 선택적
+ when: 이미지 4장. 현장 사진, 4개 관점, 4단계 시각화 등.
+ not_for: |
+ - 2장 → image-row-2col
+ - 이미지+텍스트 → image-side-text
+ - 1장 → image-full-caption
purpose_fit:
- 근거사례
slots:
@@ -1938,9 +2173,17 @@ blocks:
height_cost: medium
min_height_px: 150
relation_types: []
- visual: 좌측 이미지(320px 고정) + 우측 제목+설명+불릿. 가로 배치.
- when: 이미지에 대한 설명. 제품/시스템 소개. 다이어그램+해설.
- not_for: 이미지만 → image-row-2col. 여러 장 → image-grid-2x2.
+ visual: 좌측 이미지(320px) + 우측 제목+설명+불릿. 가로 배치.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 1장의 이미지 + 옆에 텍스트 설명이 필요
+ - 이미지를 보면서 동시에 설명을 읽는 구조
+ - 제목 + 설명 또는 불릿 리스트
+ 예: [시스템 스크린샷] + 우측에 주요 기능 3가지 불릿
+ when: 이미지 1장 + 옆에 텍스트 설명. 제품 소개, 다이어그램 해설.
+ not_for: |
+ - 이미지만(텍스트 없음) → image-full-caption 또는 image-row-2col
+ - 여러 장 → image-grid-2x2
purpose_fit:
- 핵심전달
- 근거사례
@@ -1983,9 +2226,16 @@ blocks:
height_cost: large
min_height_px: 200
relation_types: []
- visual: 전체 너비 이미지 1장(둥근 모서리) + 하단 캡션.
- when: 핵심 도표, 대형 다이어그램, 전경 사진을 크게.
- not_for: 2장+ → image-row-2col/image-grid-2x2. 이미지+텍스트 → image-side-text.
+ visual: 전체 너비 이미지 1장 + 하단 캡션.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 이미지 1장을 전체 너비로 크게 보여줌
+ - 캡션만 선택적 (옆에 텍스트 설명 불필요)
+ - 핵심 도표, 대형 다이어그램, 전경 사진
+ when: 이미지 1장을 크게. 캡션만. 텍스트 설명 불필요.
+ not_for: |
+ - 2장+ → image-row-2col/image-grid-2x2
+ - 이미지+텍스트 → image-side-text
purpose_fit:
- 핵심전달
slots:
@@ -2011,9 +2261,18 @@ blocks:
min_height_px: 200
relation_types:
- comparison
- visual: 좌 Before(회색 라벨) + → 화살표(파란) + 우 After(파란 라벨). 각 이미지 180px.
- when: 변화 전후 비교. 디지털 전환 전후, 공정 개선 전후.
- not_for: 이미지 단순 나열 → image-row-2col. 텍스트 비교 → comparison-2col.
+ visual: 좌 Before(회색 라벨) + → 화살표 + 우 After(파란 라벨). 이미지 전후 비교.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 이미지 2장이 전/후(Before/After) 관계
+ - 각 이미지에 "Before"/"After" 또는 "현재"/"개선" 라벨
+ - 사이에 → 화살표로 변화 방향 표시
+ - image-row-2col과 차이: 이 블록은 라벨+화살표 있음, row는 단순 나열
+ 예: Before(기존 도면) → After(3D 모델)
+ when: 변화 전후를 이미지로 비교할 때. Before/After 라벨+화살표.
+ not_for: |
+ - 단순 이미지 나열(전후 아님) → image-row-2col
+ - 텍스트 비교 → comparison-2col
purpose_fit:
- 핵심전달
- 근거사례
@@ -2046,6 +2305,369 @@ blocks:
note: 12px, 하단 캡션
padding_overhead_px: 0
padding_h_px: 0
+## ── Figma 추출 블록 (new/) ──────────────────────────────────
+- id: statement-pill-highlight
+ name: 선언문 pill 강조
+ category: new
+ template: blocks/new/statement-pill-highlight.html
+ height_cost: compact
+ min_height_px: 59
+ relation_types:
+ - conclusion
+ - emphasis
+ visual: 캡슐형(radius 999px) 어두운 gradient 배경 위에 흰색 Bold 한 줄 메시지. 으로 노란색 강조. 전체 너비 사용.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 핵심 결론/선언이 딱 1문장 (40자 이내)
+ - 문장 중 일부 키워드만 강조 필요 (예: "전용 S/W 개발 없이는 미래가 없다")
+ - 설명/불릿 없이 메시지 자체가 전부
+ - 페이지 끝 마무리 또는 섹션 전환점
+ when: 핵심 결론이 1문장이고, 그 문장 안에 강조할 키워드가 있을 때. "~없이는 ~없다", "~가 핵심이다" 같은 선언형 문장.
+ not_for: |
+ - 2줄 이상 메시지 → banner-gradient
+ - 인용문+출처 → quote-big-mark
+ - 질문형 강조 → quote-question
+ - 배경 이미지 위 타이틀 → section-title-with-bg
+ purpose_fit:
+ - 결론
+ - 선언
+ - 강조
+ slots:
+ required:
+ - text
+ optional: []
+ schema:
+ text:
+ max_lines: 1
+ font_size: 29
+ ref_chars:
+ body: 40
+ note: 29px bold white, 으로 노란색 하이라이트
+ padding_overhead_px: 28
+ padding_h_px: 96
+
+- id: stacked-arrow-list
+ name: 적층 화살표 리스트
+ category: new
+ template: blocks/new/stacked-arrow-list.html
+ height_cost: large
+ min_height_px: 300
+ relation_types:
+ - hierarchy
+ - list
+ visual: 좌측 원호 장식+세로 라벨, 우측에 N개 캡슐 행이 다이아몬드형(가운데 좁고 양끝 넓은)으로 적층. 각 행에 화살표+텍스트+색상 하단 보더.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 하나의 총괄 개념(좌측 라벨) 아래 3~7개 구체 항목 나열
+ - 각 항목은 짧은 1줄 문장 (35자 이내)
+ - 항목 간 색상 구분이 있음 (단계별/레벨별 다른 색)
+ - 좌측에 "시공상세정보물" 같은 세로 총괄 라벨
+ 예: 좌="시공상세정보물" → [3D 모델, 시뮬레이션, 영상물, 도면, 상세도면]
+ when: 하나의 상위 개념에 속하는 N개 구체 항목을 나열할 때. 각 항목이 짧은 1줄이고 항목별 색상 구분 필요.
+ not_for: |
+ - 항목에 설명/불릿이 붙는 경우 → card-numbered
+ - 단순 불릿 목록 → dark-bullet-list
+ - 시간 순서/프로세스 → process-horizontal
+ - 항목이 카드형(제목+설명) → card-icon-desc
+ purpose_fit:
+ - 목록
+ - 계층
+ - 구성요소
+ slots:
+ required:
+ - items
+ optional:
+ - title
+ - left_label
+ - left_arc_img
+ - arrow_img
+ schema:
+ title:
+ max_lines: 1
+ font_size: 26
+ ref_chars:
+ body: 30
+ note: 26px bold #144838, 으로 gradient(#cc5200) 강조
+ items:
+ max_items: 7
+ font_size: 22
+ ref_chars:
+ body: 35
+ note: 22px medium, 각 행 1줄
+ padding_overhead_px: 44
+ padding_h_px: 0
+
+- id: split-panel-numbered
+ name: 분할 패널 (좌 카테고리 + 우 번호)
+ category: new
+ template: blocks/new/split-panel-numbered.html
+ height_cost: large
+ min_height_px: 400
+ relation_types:
+ - comparison
+ - hierarchy
+ visual: 좌측 52% 셰브론 배경에 카테고리별 색상 바+항목 리스트. 우측 48%에 번호 뱃지+설명 행. 2단 분할 패널.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 좌측: 2~4개 카테고리, 각 카테고리에 소속 항목 리스트 (예: GIS→[ArcGIS, QGIS])
+ - 우측: 번호가 매겨진 3~6개 설명/이슈 (예: 1.기능위주, 2.고가복잡, 3.호환불가)
+ - 좌=입력/도구/분류, 우=결과/문제점/특성 대응 구조
+ - 좌/우가 1:1 대응이 아니라 좌=카테고리 그룹, 우=전체에 대한 이슈
+ 예: 좌=[GIS, Modeler, Simulation] → 우=[기능위주, 고가, 호환불가, 성과별도, 현장한계]
+ when: 좌측에 카테고리별 도구/항목 분류 + 우측에 그에 대한 번호 매긴 이슈/특성을 나열할 때.
+ not_for: |
+ - 좌/우 1:1 대응 비교 → comparison-2col
+ - 카테고리별 행 비교 → compare-vs-rows
+ - 독립 카드 3열 → card-image-3col
+ purpose_fit:
+ - 비교
+ - 분류
+ - 도구현황
+ slots:
+ required:
+ - categories
+ - right_items
+ optional:
+ - title_icon
+ - title
+ - mid_arrow_img
+ - arrow_img
+ schema:
+ categories:
+ max_items: 4
+ note: 각 카테고리에 name + color + items[]
+ right_items:
+ max_items: 6
+ font_size: 18
+ ref_chars:
+ body: 30
+ note: 18px medium #11231d
+ padding_overhead_px: 36
+ padding_h_px: 0
+
+- id: issues-paired-rows
+ name: 이슈 쌍 행 (두루마리 pill)
+ category: new
+ template: blocks/new/issues-paired-rows.html
+ height_cost: large
+ min_height_px: 400
+ relation_types:
+ - comparison
+ - problem
+ visual: N개 행, 각 행은 녹색 border 박스 안에 좌/우 텍스트+점선 구분. 행 위/아래로 두루마리 pill이 걸침. pill 위치 교차(위→아래→위→아래).
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - N개 이슈 쌍: 각 쌍이 "좌 라벨+설명" vs "우 라벨+설명"
+ - 각 쌍에 짧은 라벨(2~5글자)이 있음 (예: "개념 부재", "방향성 상실")
+ - 좌/우가 대비 관계 (원인↔결과, 문제↔오류)
+ - 2~5개 쌍, 각 설명은 2~3줄
+ - 라벨이 pill 형태로 시각적 강조 필요
+ 예: [개념부재 vs 잘못된접근, 방향성상실 vs 전제조건오류, 수행주체혼란 vs 수행방식무지]
+ when: 좌/우 이슈가 쌍으로 묶이고, 각 쌍에 짧은 라벨이 필요할 때. 문제점 진단, 원인-결과 대비.
+ not_for: |
+ - 카테고리별 N행 비교 (중앙에 카테고리 라벨) → compare-vs-rows
+ - 라벨 없는 단순 좌/우 비교 → comparison-2col
+ - 4개 카테고리 매트릭스 → quadrant-2x2-issues
+ purpose_fit:
+ - 문제점
+ - 이슈
+ - 대비
+ slots:
+ required:
+ - rows
+ optional:
+ - header
+ - pill_bg
+ schema:
+ rows:
+ max_items: 5
+ note: 각 row에 left{label,text} + right{label,text} + pills_bottom(bool)
+ header:
+ note: icon + title (gradient text)
+ padding_overhead_px: 32
+ padding_h_px: 32
+
+- id: compare-vs-rows
+ name: VS 비교 행 테이블
+ category: new
+ template: blocks/new/compare-vs-rows.html
+ height_cost: large
+ min_height_px: 400
+ relation_types:
+ - comparison
+ visual: 상단 gradient bar에 "A vs B" 라벨. 아래로 N행, 각 행=좌(갈색 우정렬)|중앙(카테고리 pill)|우(녹색 좌정렬). 하단 결론 박스.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - A와 B를 카테고리별로 비교하는 표 구조
+ - 카테고리가 5~15개 (S/W, 프로세스, 성과물, 활용, 확장성, 주체 등)
+ - 각 카테고리에서 A의 특성과 B의 특성을 1~2줄로 대비
+ - 중앙에 카테고리 라벨 pill이 행마다 있음
+ - 하단에 결론 메시지 1~2줄
+ 예: BIM vs DX → [S/W, 프로세스, 성과물, 활용, 확장성, 수행개념, ...] 각각 좌/우 비교
+ when: 두 개념을 카테고리별(5+항목)로 행 단위 상세 비교할 때. 각 행에 카테고리 라벨이 있고, 좌/우 각각 짧은 설명.
+ not_for: |
+ - 카테고리 없는 단순 좌/우 대비 → comparison-2col
+ - 행별 기준 라벨이 있는 표 → compare-2col-split
+ - 좌/우 이슈 쌍+라벨 pill → issues-paired-rows (쌍 단위, 카테고리 아님)
+ - 3열 비교 → compare-3col-badge
+ purpose_fit:
+ - 비교
+ - 정의
+ - 분석
+ slots:
+ required:
+ - rows
+ optional:
+ - header
+ - main_labels
+ - conclusion
+ schema:
+ rows:
+ max_items: 15
+ note: 각 row에 category + left_text + right_text
+ main_labels:
+ note: left + center(기본 vs.) + right
+ conclusion:
+ note: arrow_img + text (HTML with )
+ padding_overhead_px: 40
+ padding_h_px: 0
+
+- id: quadrant-2x2-issues
+ name: 2×2 사분면 이슈
+ category: new
+ template: blocks/new/quadrant-2x2-issues.html
+ height_cost: large
+ min_height_px: 500
+ relation_types:
+ - classification
+ - problem
+ visual: 2×2 사분면 grid. 각 사분면에 gradient ribbon 헤더 + 빨간 헤드라인 + 불릿. 중앙에 원형 인용구 오버레이.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 이슈/문제점이 정확히 4개 카테고리로 분류됨
+ - 각 카테고리에 2~4개 세부 이슈 (빨간 헤드라인+불릿)
+ - 4개가 2×2 매트릭스로 배치 가능 (예: 정책집행|수행개념|이해부족|투자부재)
+ - 중앙에 핵심 메시지/인용구 (선택)
+ - 좌측 2개와 우측 2개가 다른 색조 (warm vs teal)
+ 예: [정책집행, 수행개념, 이해부족, 투자부재] 각각 2~3개 이슈 + 중앙 "Rome wasn't built in a day"
+ when: 이슈가 정확히 4개 카테고리이고, 2×2 매트릭스로 배치할 때. 각 사분면에 헤드라인+불릿 구조.
+ not_for: |
+ - 이슈가 2개 쌍 → issues-paired-rows
+ - 이슈가 N개 나열 → dark-bullet-list 또는 card-numbered
+ - 2열 비교 → comparison-2col
+ - 3개 교차 관계 → cycle-3way-intersect
+ purpose_fit:
+ - 문제점
+ - 분류
+ - 진단
+ slots:
+ required:
+ - quadrants
+ optional:
+ - center_quote
+ schema:
+ quadrants:
+ fixed_count: 4
+ note: 각 quadrant에 ribbon_title + sections[{headline, bullets[]}]
+ center_quote:
+ note: bg_img(원형 일러스트 이미지) + text
+ padding_overhead_px: 0
+ padding_h_px: 0
+
+- id: cards-3col-persona
+ name: 3열 페르소나 카드
+ category: new
+ template: blocks/new/cards-3col-persona.html
+ height_cost: large
+ min_height_px: 500
+ relation_types:
+ - comparison
+ - stakeholder
+ visual: 3열 세로 카드. 각 컬럼에 배경+오버레이+원형 뱃지(2줄 라벨)+체크 불릿 리스트+하단 사진.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 정확히 3개 역할/이해관계자/관점을 나란히 비교
+ - 각 역할에: 역할명(2줄, 예: "발주자/목표") + 5~8개 목표/항목 불릿 리스트
+ - 각 역할이 고유 색상/아이덴티티를 가짐
+ - 선택적으로 각 역할 대표 사진
+ - 역할 간 항목 수가 다를 수 있음 (space-between 균등 분포)
+ 예: 발주자[7항목] | 시공자[7항목] | 설계자[6항목] 각각 체크리스트+하단 사진
+ when: 3개 역할/관점별로 각각 5+개 항목을 불릿 리스트로 나열·비교할 때. 역할별 뱃지 아이덴티티 필요.
+ not_for: |
+ - 텍스트만 카드(불릿 없이 설명) → card-icon-desc
+ - 이미지 중심 3열 → card-image-3col
+ - 2개만 비교 → comparison-2col
+ - 역할이 아닌 카테고리 비교 → card-compare-3col
+ purpose_fit:
+ - 역할비교
+ - 이해관계자
+ - 목표
+ slots:
+ required:
+ - personas
+ optional: []
+ schema:
+ personas:
+ fixed_count: 3
+ note: 각 persona에 bg_img, overlay_color, badge_outer/inner_img, label, bullet_icon, bullets[], photo_img
+ bullets:
+ max_items: 8
+ font_size: 15
+ ref_chars:
+ body: 25
+ note: 15px medium, 체크 아이콘 marker + text flex pair (R13)
+ padding_overhead_px: 0
+ padding_h_px: 8
+
+- id: cycle-3way-intersect
+ name: 3원 교차 다이어그램
+ category: new
+ template: blocks/new/cycle-3way-intersect.html
+ height_cost: large
+ min_height_px: 400
+ relation_types:
+ - relationship
+ - intersection
+ visual: CSS 3원 교차 다이어그램. 역삼각형 배치 3개 원(gradient+blend+ring) + 6개 한자 액센트 원 + 6개 사이드 라벨.
+ content_structure: |
+ 콘텐츠가 이 구조일 때 선택:
+ - 정확히 3개 핵심 가치/목표가 서로 교차·융합하는 관계
+ - 각 가치에 2줄 라벨 (예: "안전과/품질", "생산성/향상", "소통과/신뢰")
+ - 각 가치에 2개 세부 키워드 (한자 1글자, 예: 安/質, 速/利, 通/信)
+ - 각 세부 키워드에 제목+설명 사이드 텍스트
+ - 3개가 겹치는 교차 영역이 의미 있음
+ 예: [안전과품질, 생산성향상, 소통과신뢰] → 6개 세부 → 6개 사이드 설명
+ when: 3가지 가치가 서로 교차하는 관계를 다이어그램으로 시각화할 때. 각 가치에 세부 키워드+설명 필요.
+ not_for: |
+ - 3개가 교차하지 않고 독립 나열 → keyword-circle-row
+ - 2개 비교 → comparison-2col 또는 compare-pill-pair
+ - 프로세스/순서 → process-horizontal
+ - N개 원 벤 다이어그램 → venn-diagram
+ purpose_fit:
+ - 관계
+ - 융합
+ - 목표
+ slots:
+ required:
+ - circles
+ optional:
+ - accents
+ - side_labels
+ - bg_texture_img
+ - arc_img
+ schema:
+ circles:
+ fixed_count: 3
+ note: 각 circle에 label(HTML), text_shadow, outer_gradient, ring_gradient — CSS gradient 값 직접 전달
+ accents:
+ max_items: 6
+ note: 각 accent에 char(한자 1자), outer_gradient, inner_gradient
+ side_labels:
+ max_items: 6
+ note: 각 label에 title, title_color, desc(HTML)
+ padding_overhead_px: 0
+ padding_h_px: 0
+
layouts:
- id: 65-35
name: 6.5:3.5 좌우 분할
{{ title }}
+ {% endif %}
+
+
+