블록 라이브러리 인덱스 (46개)
디자인 팀장이 콘텐츠에 맞는 블록을 선택할 때 참조하는 라이브러리.
각 카테고리 안에 변형이 여러 개 있으며, 콘텐츠 성격에 따라 적절한 변형을 선택한다.
시각화(visuals/)는 SVG로 제작한다 — CSS/AI 이미지 금지.
| 파일 |
설명 |
언제 사용 |
section-title-with-bg.html |
배경 이미지 위 영문+한글 타이틀 (500px) |
페이지 맨 첫 화면, 배경 이미지 있을 때 |
section-header-bar.html |
파란 바 + 중앙 흰 제목 (컴팩트) |
섹션 시작 가볍게, 주제 전환 |
topic-left-right.html |
좌:파란 제목 + 우:설명 |
질문+답변 구조, 주장+근거 |
topic-center.html |
중앙 정렬 대제목 + 서브+설명 |
단독 강조, 주제 선언 |
topic-numbered.html |
번호 원형 + 제목 + 구분선 + 설명 |
순서 있는 꼭지 (1번, 2번, 3번) |
📁 cards/ (10개) — 카드 계열
| 파일 |
설명 |
언제 사용 |
card-image-3col.html |
이미지(160px) + 색상 제목 + 영문 + 불릿 (3열) |
단계별 설명에 이미지 핵심 |
card-text-grid.html |
파란 액센트 + 제목 + 뱃지 + 설명 + 출처 (2~4열) |
용어 정의, 텍스트만 나열 |
card-dark-overlay.html |
다크 이미지 배경 + 흰 제목 + 짧은 설명 (3~5열) |
키워드 시각 강조, 임팩트 |
card-tag-image.html |
색상 태그 라벨 + 이미지 + 제목 + 설명 (3열) |
카테고리별 분류 (제조/건축/토목) |
card-icon-desc.html |
큰 이모지 아이콘 + 제목 + 설명 (2~4열) |
기능/특성/장점 아이콘 나열 |
card-compare-3col.html |
색상 헤더 카드 3열 + 불릿 |
3개 카테고리 비교 (상용/범용/전문) |
card-step-vertical.html |
좌 색상 마커 + 우 콘텐츠 (세로, 연결선) |
생애주기 단계별 (이미지+설명) |
card-image-round.html |
원형 이미지(140px) + 제목 + 설명 (2~3열) |
포트폴리오형, 비전/가치 |
card-stat-number.html |
큰 숫자(36px) + 단위 + 라벨 (2~4열) |
KPI, 성과 수치, 비용 절감율 |
card-numbered.html |
색상 원형 번호 + 제목 + 설명 (세로) |
순서 있는 항목 (실행 단계, 조건) |
📁 tables/ (3개) — 표/비교 계열
| 파일 |
설명 |
언제 사용 |
compare-3col-badge.html |
A | VS배지 | B 3단 비교 (행별) |
두 개념 다항목 비교 (BIM vs DX) |
compare-2col-split.html |
파란 헤더 좌/구분/우 + 행별 비교 |
두 기술 항목별 상세 비교 (GIS vs BIM) |
table-simple-striped.html |
남색 헤더 + 줄무늬 행. 범용 |
스펙표, 일정표, 수치 목록 |
📁 visuals/ (10개) — 시각 요소 (SVG)
SVG 노하우:
<text> = 원 좌표와 같은 공간 → 위치 100% 정확radialGradient/linearGradient → 고급 그라데이션filter → 글로우/그림자- 수학적 계산 (cos/sin) → N개 자동 배치 (Phase 2)
- AI 이미지로 시각화 만들면 안 됨 — 원 위치 맞출 수 없음
| 파일 |
설명 |
언제 사용 |
venn-diagram.html |
SVG premium 벤 다이어그램 (그라데이션+글로우) |
포함 관계, 기술 융합 (★단독 배치) |
circle-gradient.html |
파란 그라데이션 원 + 중앙 텍스트 |
섹션 전환 키워드 강조 |
compare-pill-pair.html |
이중 테두리 둥근 박스 2개 + VS |
2개 개념 시각 대비 (표 위 헤더) |
process-horizontal.html |
파란 번호 원 + 카드 + → 화살표 (가로) |
논리적 프로세스 흐름 |
flow-arrow-horizontal.html |
색상 캡슐 + 화살표 (SVG, 컴팩트) |
기술 발전/전환 흐름 간결하게 |
keyword-circle-row.html |
SVG 원형 안 큰 글자 + 라벨 + 설명 |
약어 풀이 (G-S-I-M) |
layer-diagram.html |
SVG 겹친 사다리꼴 레이어 (3D) |
기술 스택/계층 구조 |
timeline-vertical.html |
세로 선 + SVG 마커 + 연도+제목+설명 |
연혁, 로드맵 (4개+ 이벤트) |
timeline-horizontal.html |
SVG 가로 선 + 마커 + 연도+제목 |
짧은 일정 (3~5개, 컴팩트) |
pyramid-hierarchy.html |
SVG 위→아래 넓어지는 사각형 |
위계, 우선순위 (좁은→넓은) |
📁 emphasis/ (13개) — 강조, 인용, 결론
| 파일 |
설명 |
언제 사용 |
quote-left-border.html |
좌측 빨간 라인 + 연한 배경 + 인용+출처 |
짧은 인용, 문제 제기 |
quote-big-mark.html |
❝❞ 큰따옴표 장식 + 인용+출처 |
임팩트 인용, 핵심 발언 |
quote-question.html |
파란 배경+테두리 + 큰 질문 텍스트 |
독자에게 질문, 전환점 |
conclusion-accent-bar.html |
회색 배경 + 좌측 파란 라인 + 결론 |
페이지 하단 핵심 한 줄 |
comparison-2col.html |
좌 파란 vs 우 빨간 헤더 + 본문 |
A vs B 직접 비교 |
banner-gradient.html |
파란 그라데이션 배너 + 중앙 흰 텍스트 |
섹션 구분, 핵심 선언 |
dark-bullet-list.html |
짙은 남색 배경 + 파란 제목 + 흰 불릿 |
핵심 포인트 강조 (무게감) |
highlight-strip.html |
가로 색상 구간 + 흰 라벨 |
카테고리 색상 분류 바 |
callout-solution.html |
파란 배경+테두리 + 아이콘 + 제목+설명 |
해결책, 솔루션, 방향성 |
callout-warning.html |
빨간 배경+테두리 + 아이콘 + 제목+설명 |
문제점, 주의, 잘못된 접근 |
tab-label-row.html |
가로 탭 버튼 (선택됨=색상, 나머지=회색) |
카테고리 전환/분류 표시 |
divider-text.html |
좌우 회색 선 + 중앙 텍스트 |
가벼운 섹션 구분, 휴식점 |
details-block.html |
<details>/<summary> 접기/펼치기 |
상세 콘텐츠, 자세히보기 |
📁 media/ (5개) — 이미지/미디어
| 파일 |
설명 |
언제 사용 |
image-row-2col.html |
이미지 2장 나란히 (354px) |
시공 사진 2장, 현장 비교 |
image-grid-2x2.html |
이미지 4장 2x2 격자 (200px) |
현장 사진 4장, 갤러리 |
image-side-text.html |
좌:이미지(320px) + 우:제목+설명+불릿 |
이미지 설명, 시스템 소개 |
image-full-caption.html |
전체 너비 이미지 1장 + 캡션 |
핵심 도표, 대형 다이어그램 |
image-before-after.html |
Before(회색) + → + After(파란) |
변화 전후 비교 |
추가 규칙
- 이름 규칙:
{유형}-{특징}.html
- 모든 변형은 catalog.yaml에 등록 — 미등록 = 팀장이 모름
- 각 파일 상단에 HTML 주석으로 용도/슬롯 명시
- 디자인 토큰 사용 — 하드코딩 색상 금지 (가능한 범위에서)
- 높이 고정 금지 — 모드 독립적 (슬라이드/웹 겸용)
- visuals/는 SVG로 제작 — CSS 원/AI 이미지 금지
kyeongmin
9bd9dad9ac