| name | layout-types |
| description | visual-generator 스킬이 공유하는 24종 레이아웃 정의. 각 레이아웃의 핵심 아이디어, ASCII 시각 구성, 시각화 원칙, 권장 사양, 적합/부적합 케이스를 포함합니다. |
레이아웃 유형 (Layout Types)
개요
모든 visual-generator 스킬이 공유하는 24종 레이아웃 정의입니다. 각 레이아웃은 핵심 아이디어, ASCII 시각 구성, 시각화 원칙, 권장 사양, 적합/부적합 케이스를 포함합니다.
1. 플로우 메타포 (Flow)
핵심 아이디어
입력에서 출력으로 단계적 변화/이동을 보여줍니다. 단계 간 연결이 곧 메시지입니다.
ASCII 시각 구성
[입력] -> [변환 1] -> [변환 2] -> [출력]
| | | |
데이터 처리 검증 결과
시각화 원칙
- 흐름 방향(좌→우 또는 상→하)을 전 구역에서 일관되게 유지합니다.
- 단계 간 연결은 화살표/라인으로 명확히 표현합니다.
- 핵심 변환 지점을 1곳만 "대형"로 강조하고 나머지는 "중형"로 유지합니다.
- 단계당 텍스트는 키워드 중심으로 제한합니다.
권장 사양
| 요소 | 설명 | 권장 수량 |
|---|
| 단계(노드) | 입력/변환/출력 블록 | 3-5개 |
| 연결(화살표) | 단계 간 방향성 | 단계-1개 |
| 단계 라벨 | 단계명/역할 | 단계당 1개 |
| 보조 라벨 | 예시/짧은 설명 | 단계당 0-1개 |
적합 케이스
- 데이터 처리 파이프라인(수집→정제→학습→배포)
- 업무 프로세스(신청→검토→승인→집행)
부적합 케이스
- 반복/피드백이 핵심인 모델
- 요소 간 관계가 동등하고 비방향적인 모델
2. 구조 메타포 (Structure)
핵심 아이디어
전체는 여러 레이어/구성요소의 결합으로 이루어집니다. "무엇이 무엇 위에/안에 있는가"를 보여줍니다.
ASCII 시각 구성
┌──────────────────────────┐
│ 응용/서비스 │
├──────────────────────────┤
│ 로직/엔진 │
├──────────────────────────┤
│ 데이터/인프라 │
└──────────────────────────┘
시각화 원칙
- 레이어 경계(구분선/여백)를 분명히 두어 혼합을 방지합니다.
- 레이어 수는 최소화하고, 레이어 명칭은 "중형" 텍스트로 통일합니다.
- 의존/연결이 필요하면 레이어 간 1-2개의 연결만 추가합니다.
권장 사양
| 요소 | 설명 | 권장 수량 |
|---|
| 레이어 | 상하 스택 또는 내외 구조 | 3-4개 |
| 레이어 라벨 | 레이어 명칭 | 레이어당 1개 |
| 하위 항목 | 레이어 내부 구성요소 | 레이어당 2-4개 |
| 연결 표시 | 의존/데이터 흐름 | 0-3개 |
적합 케이스
- 소프트웨어 아키텍처(계층/스택)
- 구성 요소 기반 시스템(모듈/서브시스템)
부적합 케이스
- 순서가 핵심인 단계형 프로세스
- 개체 간 관계망이 핵심인 모델
3. 네트워크 메타포 (Network)
핵심 아이디어
여러 요소가 **관계(연결)**로 의미를 형성합니다. "누가 누구와 연결되는가"가 핵심입니다.
ASCII 시각 구성
[A]-----[B]
| \ |
| \ |
[C]-----[D]
시각화 원칙
- 노드 수를 제한하고, 중심 노드 1-2개만 "대형"로 강조합니다.
- 연결선은 교차를 최소화하고, 관계 유형이 다르면 선 스타일을 구분합니다.
- 과도한 완전연결(모든 노드가 모든 노드와 연결)을 피합니다.
권장 사양
| 요소 | 설명 | 권장 수량 |
|---|
| 노드 | 개체/기관/모듈 | 4-8개 |
| 연결선 | 관계/상호작용 | 4-12개 |
| 관계 라벨 | 관계명/데이터명 | 연결선의 0-1개 |
| 범례 | 선/색 의미 설명 | 0-1개 |
적합 케이스
- 협력 생태계/파트너십 맵
- 시스템 간 인터페이스/연동 구조
부적합 케이스
- 순서·단계가 중요한 설명
- 상하 위계가 강한 조직 구조
4. 대비 메타포 (Contrast)
핵심 아이디어
두 상태/두 선택지를 동일한 프레임에서 비교합니다. 차이가 메시지를 만듭니다.
ASCII 시각 구성
┌───────────────┐ VS ┌───────────────┐
│ A (현재) │ │ B (목표) │
│ - 항목 1 │ │ - 항목 1 │
│ - 항목 2 │ │ - 항목 2 │
└───────────────┘ └───────────────┘
시각화 원칙
- 좌/우(또는 상/하) 영역의 크기, 항목 수, 정렬을 맞춥니다.
- 대비 포인트(핵심 차이) 1-2개만 "대형"로 강조합니다.
- 항목은 대응 관계가 보이도록 같은 순서로 배치합니다.
권장 사양
| 요소 | 설명 | 권장 수량 |
|---|
| 비교 패널 | A/B 영역 | 2개 |
| 비교 항목 | 패널 내 bullet | 패널당 2-3개 |
| 강조 포인트 | 핵심 변화 | 1-2개 |
| 연결 표시 | 변화/전환 표시 | 0-2개 |
적합 케이스
- As-Is / To-Be, Before / After
- 방법 A vs 방법 B의 장단점
부적합 케이스
- 3개 이상 대안 비교(다자 비교)
- 관계망/순환/계층이 핵심인 설명
5. 진화 메타포 (Evolution)
핵심 아이디어
버전/단계가 점진적으로 성숙하는 모습을 보여줍니다. "개선의 누적"을 전달합니다.
ASCII 시각 구성
[단계 1] -> [단계 2] -> [단계 3]
(소형) (중형) (대형)
시각화 원칙
- 단계의 성숙도를 크기(소형→중형→대형) 또는 채도(연함→진함)로 표현합니다.
- 단계 정의(무엇이 추가/개선되었는가)는 단계당 1줄로 제한합니다.
- 단계 수를 줄이고, 핵심 도약 지점을 1곳만 강조합니다.
권장 사양
| 요소 | 설명 | 권장 수량 |
|---|
| 단계 | 버전/성숙 단계 | 3-4개 |
| 단계 라벨 | 단계명 | 단계당 1개 |
| 개선 포인트 | 핵심 추가사항 | 단계당 1-2개 |
| 전환 표시 | 화살표/라인 | 단계-1개 |
적합 케이스
- 기술 성숙도/제품 로드맵(정성)
- 성능/기능 향상 스토리
부적합 케이스
- 반복 순환이 핵심인 프로세스
- 동등한 병렬 구성 설명
6. 중심 메타포 (Central)
핵심 아이디어
하나의 **핵심(허브)**이 주변 요소를 끌어안거나 연결합니다. "중심의 역할"을 강조합니다.
ASCII 시각 구성
[주변 A]
|
[주변 B] -- [중심] -- [주변 C]
|
[주변 D]
시각화 원칙
- 중심은 "대형", 주변은 "중형/소형"로 위계를 명확히 합니다.
- 주변 요소는 균등 간격으로 배치해 임의성을 줄입니다.
- 연결선은 중심에서만 출발하도록 하여 구조를 단순화합니다.
권장 사양
| 요소 | 설명 | 권장 수량 |
|---|
| 중심 노드 | 코어 개념 | 1개 |
| 주변 노드 | 기능/응용/요소 | 4-8개 |
| 연결선 | 중심-주변 | 주변 수 만큼 |
| 보조 라벨 | 설명/예시 | 주변의 0-1개 |
적합 케이스
- 플랫폼 코어와 응용 영역
- 핵심 기술과 파생 기술
부적합 케이스
- 주변 간 상호 연결이 많은 복잡 네트워크
- 단계형/시간축 기반 설명
7. 순환 메타포 (Cycle)
핵심 아이디어
프로세스가 반복되며, 끝이 다시 시작으로 이어집니다. 피드백이 메시지입니다.
ASCII 시각 구성
[A] -> [B] -> [C]
^ |
|------------|
시각화 원칙
- 방향(시계/반시계)을 고정하고 모든 라벨을 같은 방향으로 정렬합니다.
- 반복의 이유(피드백/개선)를 1곳에만 명확히 적습니다.
- 단계 간 격차는 균등하게 두어 리듬을 만듭니다.
권장 사양
| 요소 | 설명 | 권장 수량 |
|---|
| 단계 | 순환 단계 | 4-6개 |
| 방향 표시 | 화살표/곡선 | 단계 수 만큼 |
| 중심 라벨 | 순환 목적/코어 | 0-1개 |
| 외부 입력/출력 | 순환 밖 요인 | 0-2개 |
적합 케이스
- PDCA/지속 개선 루프
- 데이터-모델-배포 반복
부적합 케이스
- 일회성 단계(한 번만 수행)
- 비교(대비) 중심 설명
8. 그룹 메타포 (Group)
핵심 아이디어
항목을 카테고리로 분류해 정리합니다. "어떤 항목이 어느 그룹인가"가 핵심입니다.
ASCII 시각 구성
[그룹 A] [그룹 B] [그룹 C]
- a1 - b1 - c1
- a2 - b2 - c2
시각화 원칙
- 그룹 수를 줄이고 각 그룹의 항목 수를 균형 있게 맞춥니다.
- 그룹 제목은 "대형", 항목은 "중형/소형"로 차등을 둡니다.
- 분류 기준(축/규칙)을 1줄로 명시합니다.
권장 사양
| 요소 | 설명 | 권장 수량 |
|---|
| 그룹 | 카테고리 컬럼/박스 | 3-4개 |
| 항목 | 각 그룹 구성 항목 | 그룹당 2-5개 |
| 그룹 제목 | 그룹명 | 그룹당 1개 |
| 분류 기준 | 기준/정의 | 1개 |
적합 케이스
- 기능/서비스 카탈로그
- 사용자 세그먼트/요구사항 분류
부적합 케이스
- 상하 위계가 중요한 모델
- 관계/연동 중심 네트워크
9. 동심원 메타포 (Concentric)
핵심 아이디어
핵심에서 외곽으로 범위/영향/포함 관계가 확장됩니다. "거리=관계"를 사용합니다.
ASCII 시각 구성
┌───────────────────────┐ 외곽(범위/응용)
│ ┌─────────────────┐ │
│ │ ┌───────────┐ │ │
│ │ │ 핵심 │ │ │
│ │ └───────────┘ │ │
│ └─────────────────┘ │
└───────────────────────┘
시각화 원칙
- 레이어 간 의미(핵심/확장/외부)를 라벨로 명확히 합니다.
- 레이어 수가 늘수록 텍스트는 더 "소형"으로 절제합니다.
- 레이어 간 경계는 단순한 선/여백으로 구분합니다.
권장 사양
| 요소 | 설명 | 권장 수량 |
|---|
| 레이어 | 동심 레이어/박스 | 3-4개 |
| 레이어 라벨 | 레이어 정의 | 레이어당 1개 |
| 레이어 항목 | 포함 요소 | 레이어당 1-4개 |
| 강조 레이어 | 핵심 범위 | 1개 |
적합 케이스
- 보안/권한 범위(코어→확장)
- 제품/서비스 영향 범위
부적합 케이스
- 시간 순서 중심 설명
- 동등 항목 분류(그룹) 중심
10. Swimlane 메타포 (Swimlane)
핵심 아이디어
여러 주체가 동일한 시간축에서 각자의 역할을 수행합니다. "역할 분담 + 순서"를 동시에 보여줍니다.
ASCII 시각 구성
단계 1 단계 2 단계 3
[주체 A] ──●───────────●────────────●──
[주체 B] ─────●────────────●───────────
[주체 C] ─────────●────────────●───────
시각화 원칙
- 레인(주체) 수를 줄여 교차를 최소화합니다.
- 시간 흐름은 좌→우로 고정하고, 중요한 핸드오프만 연결합니다.
- 주체명은 "중형", 이벤트 라벨은 "소형"로 절제합니다.
권장 사양
| 요소 | 설명 | 권장 수량 |
|---|
| 레인 | 주체/역할 행 | 3-4개 |
| 단계 컬럼 | 시간 구간 | 3-5개 |
| 이벤트 노드 | 레인 내 활동 | 6-12개 |
| 핸드오프 | 레인 간 전달 | 0-4개 |
적합 케이스
- 기관/부서 협업 프로세스
- 서비스 운영(요청→처리→응답)
부적합 케이스
- 단일 주체만 존재하는 단순 플로우
- 관계/연동이 핵심인 네트워크
11. 전략맵 메타포 (Strategy Map)
핵심 아이디어
두 축으로 요소를 배치해 우선순위/포지셔닝을 명확히 합니다. 위치가 의미입니다.
ASCII 시각 구성
Y(높음)
|
(B) | (D)
------------+------------- X(높음)
(A) | (C)
|
Y(낮음)
시각화 원칙
- 축 라벨을 간결하게 정의하고, 사분면 의미를 짧게 붙입니다.
- 점(요소) 수가 많아질수록 라벨은 "소형"로 줄입니다.
- 겹침을 피하기 위해 군집은 대표 라벨로 묶을 수 있습니다.
권장 사양
| 요소 | 설명 | 권장 수량 |
|---|
| 축 | X축/Y축 | 2개 |
| 사분면 라벨 | 영역 의미 | 0-4개 |
| 요소(점/카드) | 배치 대상 | 6-12개 |
| 범례 | 색/군집 의미 | 0-1개 |
적합 케이스
- 기술/사업 우선순위 매트릭스
- 가치 vs 난이도/리스크 포지셔닝
부적합 케이스
12. 깔때기 메타포 (Funnel)
핵심 아이디어
많은 후보가 단계별로 선별/전환되며 줄어듭니다. 축소의 이유가 핵심입니다.
ASCII 시각 구성
┌───────────────────────┐ 후보(많음)
└───────────┬───────────┘
│
┌─────▼─────┐ 중간
└─────┬─────┘
│
┌──▼──┐ 결과(적음)
└─────┘
시각화 원칙
- 단계 간 감소/전환의 기준을 1줄로 명시합니다.
- 단계 라벨은 짧게 유지하고, 수치는 보조로 배치합니다.
- 상단이 복잡할수록 하단은 단순하게 유지합니다.
권장 사양
| 요소 | 설명 | 권장 수량 |
|---|
| 단계 | 퍼널 구간 | 3-5개 |
| 단계 라벨 | 구간명 | 단계당 1개 |
| 전환 표시 | 감소/필터 | 단계-1개 |
| 보조 수치 | 규모/비율 | 단계당 0-1개 |
적합 케이스
- 사용자 전환(유입→활성→유료)
- 선발/평가 프로세스
부적합 케이스
- 확장/증가가 핵심인 성장 스토리
- 동등 병렬 비교
13. Hub-Network 메타포 (Hub-Network)
핵심 아이디어
중앙 허브에서 주요 노드로 연결되고, 각 주요 노드에서 세부 노드가 파생됩니다. "1단 허브 + 2단 분기" 구조입니다.
ASCII 시각 구성
(a1) (a2)
\ /
[A]
\
[허브]
/
[B]
/ \
(b1) (b2)
시각화 원칙
- 허브→주요 노드는 굵게(강한 연결), 주요→세부는 얇게(약한 연결) 구분합니다.
- 주요 노드는 "중형", 세부 노드는 "소형" 텍스트로 밀도를 낮춥니다.
- 주요 노드 수가 늘면 세부 노드 수를 과감히 줄입니다.
권장 사양
| 요소 | 설명 | 권장 수량 |
|---|
| 허브 | 중앙 코어 | 1개 |
| 주요 노드 | 1차 카테고리 | 4-6개 |
| 세부 노드 | 2차 항목 | 8-15개 |
| 연결선 | 허브/분기 연결 | 12-24개 |
적합 케이스
- 플랫폼 기능 구조(코어→도메인→세부)
- 지식 분류/서비스 맵
부적합 케이스
- 주요 노드 간 상호작용이 핵심인 모델
- 시간 순서/단계 중심 설명
14. Section-Flow 메타포 (Section-Flow)
핵심 아이디어
상단은 메인 메시지(개념/이미지), 하단은 **구체 흐름(단계)**으로 구성합니다. 큰 맥락 후 세부로 내려갑니다.
ASCII 시각 구성
┌─────────────────────────────┐
│ 메인 개념/비주얼 │
└─────────────────────────────┘
[단계 1] -> [단계 2] -> [단계 3]
시각화 원칙
- 상단은 "대형" 텍스트/비주얼로 단일 메시지를 제공합니다.
- 하단 단계는 "중형"으로 균등 배치하고, 단계 수를 제한합니다.
- 상단과 하단 사이 연결(↓)은 1개만 두어 초점을 유지합니다.
권장 사양
| 요소 | 설명 | 권장 수량 |
|---|
| 상단 메인 영역 | 대표 이미지/키 메시지 | 1개 |
| 하단 단계 | 프로세스 노드 | 3-4개 |
| 연결 표시 | 상단→하단, 단계 간 | 3-6개 |
| 보조 설명 | 짧은 캡션/근거 | 0-2개 |
적합 케이스
- "시스템 개요 + 처리 흐름" 한 장 요약
- "핵심 가치 + 실행 단계" 구조
부적합 케이스
- 모든 요소가 동등한 중요도의 목록
- 복잡한 관계망(네트워크) 중심
15. Card-Grid 메타포 (Card-Grid)
핵심 아이디어
동일한 카드들이 그리드로 배치되어 기능/사례/항목을 빠르게 스캔합니다.
ASCII 시각 구성
┌───────┐ ┌───────┐ ┌───────┐
│ 카드1 │ │ 카드2 │ │ 카드3 │
│ 태그 │ │ 태그 │ │ 태그 │
└───────┘ └───────┘ └───────┘
┌───────┐ ┌───────┐ ┌───────┐
│ 카드4 │ │ 카드5 │ │ 카드6 │
│ 태그 │ │ 태그 │ │ 태그 │
└───────┘ └───────┘ └───────┘
시각화 원칙
- 카드 크기와 간격을 동일하게 유지해 질서를 만듭니다.
- 카드 제목은 "중형", 보조 텍스트는 "소형"로 제한합니다.
- 카드 수가 늘수록 카드당 텍스트는 더 줄입니다.
권장 사양
| 요소 | 설명 | 권장 수량 |
|---|
| 카드 | 항목 단위 | 6-9개 |
| 카드 제목 | 항목명 | 카드당 1개 |
| 태그/키워드 | 분류/특징 | 카드당 1-2개 |
| 아이콘 | 빠른 인지 요소 | 카드당 0-1개 |
적합 케이스
- 제품 기능 리스트, 적용 분야 모음
- 사례/벤치마크 갤러리
부적합 케이스
- 순서가 중요한 절차형 설명
- 강한 위계/의존 관계 구조
16. 계층형 피라미드 (Pyramid)
핵심 아이디어
상단 목표에서 하단 기반까지 우선순위/가치 체계/단계 구조를 피라미드로 표현합니다.
ASCII 시각 구성
┌──────────┐
│ 최상위 │
┌──┴──────────┴──┐
│ 상위 목표 │
┌────┴─────────────────┴────┐
│ 기반/인프라 │
└───────────────────────────┘
시각화 원칙
- 상단은 "대형", 중단은 "중형", 하단은 "중형/소형"로 위계를 고정합니다.
- 층(레이어) 간 경계는 선/여백으로 명확히 분리합니다.
- 층당 라벨은 짧게 유지하고, 키워드 중심으로 배치합니다.
권장 사양
| 요소 | 설명 | 권장 수량 |
|---|
| 층(레이어) | 피라미드 단 | 3-5개 |
| 층 라벨 | 단의 의미 | 층당 1-3개 |
| 보조 아이콘 | 의미 강화 | 층당 0-2개 |
| 방향 표시 | 상향 목표감(선택) | 0-1개 |
적합 케이스
- 비전→전략→실행 기반 구조
- 우선순위/가치 체계, 단계적 성숙도
부적합 케이스
- 순환/반복이 핵심인 프로세스
- 상호작용 네트워크가 핵심인 구조
17. 3D 분해도 (Exploded View)
핵심 아이디어
완성품(코어)을 중심에 두고 구성요소를 분해해 모듈 구성과 조립 관계를 직관적으로 보여줍니다.
ASCII 시각 구성
[모듈 A] .......
.
[모듈 B] ...[본체/코어]... [모듈 C]
.
[모듈 D] .......
시각화 원칙
- 중앙 코어는 "대형", 주변 모듈은 "중형"로 명확히 구분합니다.
- 점선은 "장착 위치/연결" 의미로만 사용하고, 교차를 피합니다.
- 모듈 수가 늘면 설명 텍스트를 줄이고 아이콘/키워드 중심으로 구성합니다.
권장 사양
| 요소 | 설명 | 권장 수량 |
|---|
| 코어(본체) | 중앙 대상 | 1개 |
| 모듈 | 분해 구성요소 | 4-8개 |
| 연결 점선 | 장착/연결 표시 | 모듈 수 만큼 |
| 모듈 설명 | 1줄 설명 | 모듈당 0-1개 |
적합 케이스
- 하드웨어/장치 구성, 로봇 모듈 구조
- 플랫폼의 모듈 아키텍처(핵심+부품)
부적합 케이스
- 시간 순서가 핵심인 로드맵
- 추상 개념의 관계(구조가 실체가 없는 경우)
18. 수평 타임라인 (Horizontal Timeline)
핵심 아이디어
시간이 좌→우로 흐르며 단계/연도별 마일스톤을 배치합니다. "언제 무엇을 하는가"가 핵심입니다.
ASCII 시각 구성
시간 -> | 단계 1 | 단계 2 | 단계 3 |
●---●---●---●---●
M1 M2 M3 M4 M5
시각화 원칙
- 시간축을 최상단 또는 중앙 한 줄로 고정합니다.
- 마일스톤 수가 많아질수록 라벨은 "소형"로 줄이고, 핵심만 "중형"로 남깁니다.
- 단계 구분(색/배경)은 최소한으로 사용해 가독성을 유지합니다.
권장 사양
| 요소 | 설명 | 권장 수량 |
|---|
| 구간(단계) | 연도/분기/단계 | 3-7개 |
| 마일스톤 | 주요 이벤트 | 5-10개 |
| 트랙(선택) | 병렬 라인 | 0-3개 |
| 범례/주석 | 기준/가정 | 0-2개 |
적합 케이스
- 연구개발 로드맵, 사업 추진 일정
- 기술 개발 단계 및 검증 계획
부적합 케이스
- 순환 반복 프로세스
- 위계 구조(조직도/레이어) 중심
19. 조직도+네트워크 (Org-Network)
핵심 아이디어
상단은 조직도처럼 책임/거버넌스를, 하단은 네트워크처럼 협력/연계를 동시에 보여줍니다.
ASCII 시각 구성
[총괄]
/ | \
[과제1] [과제2] [과제3]
| | |
(A)....(B)....(C)....(D)
(하단은 협력/연계 점선)
시각화 원칙
- 위계(책임) 연결은 실선, 협력(연계) 연결은 점선으로 구분합니다.
- 상단(조직도)은 단순하게, 하단(네트워크)은 최소 연결로 유지합니다.
- 기관/역할 명칭은 "중형", 세부 역할 설명은 "소형"로 제한합니다.
권장 사양
| 요소 | 설명 | 권장 수량 |
|---|
| 상단 노드 | 총괄/주관 | 1-2개 |
| 중간 노드 | 과제/부문 | 3-6개 |
| 하단 노드 | 참여기관/파트너 | 5-12개 |
| 협력 연결 | 하단 연계 | 4-10개 |
적합 케이스
- 컨소시엄 추진체계(책임+협력)
- 다기관 협력 구조(거버넌스+연동)
부적합 케이스
- 단일 조직 내부 조직도만 필요한 경우
- 시간축(로드맵) 중심 설명
20. Bento Grid 메타포 (Bento Grid)
핵심 아이디어
서로 다른 크기의 카드/타일이 모듈형 그리드로 배치되어, 한 화면에서 여러 정보를 우선순위로 보여줍니다.
ASCII 시각 구성
┌───────────────────┬───────────┐
│ Hero 타일(대형) │ 타일(중형) │
├───────────┬───────┼───────────┤
│ 타일(중형)│타일(소형)│타일(소형)│
├───────────┴───────┼───────────┤
│ 타일(중형) │ 타일(중형) │
└───────────────────┴───────────┘
시각화 원칙
- Hero 타일 1개로 메시지 중심을 만들고, 나머지는 보조 정보를 배치합니다.
- 타일 크기 차이를 "대형/중형/소형" 등급으로 일관되게 설계합니다.
- 타일 간 간격(가터)은 균일하게 유지해 정돈감을 만듭니다.
- 타일별 텍스트는 제목+키워드 중심으로 절제합니다.
권장 사양
| 요소 | 설명 | 권장 수량 |
|---|
| Hero 타일 | 핵심 메시지/대표 이미지 | 1개 |
| 보조 타일 | 기능/지표/근거 | 4-8개 |
| 타일 내 요소 | 아이콘/키워드 | 타일당 2-4개 |
| 그룹 라벨 | 묶음의 의미 | 0-2개 |
적합 케이스
- 한 장 요약(핵심 1 + 근거/기능/사례 다수)
- 제품/플랫폼 기능 개요(모듈형 소개)
부적합 케이스
- 시간 순서(단계) 전달이 핵심
- 관계망(연동) 전달이 핵심
21. Sankey 메타포 (Sankey)
핵심 아이디어
흐름의 **굵기(두께)**가 비중/규모를 의미합니다. "어디에서 어디로 얼마나 이동하는가"를 보여줍니다.
ASCII 시각 구성
[원천 A] ========> [중간 X] ======> [결과 1]
[원천 B] ====> [중간 X] ==> [결과 2]
[원천 C] ==> [중간 Y] ======> [결과 3]
(굵기: 상대 비중)
시각화 원칙
- 굵기 차이를 과장하지 말고, 상대 비중이 자연스럽게 느껴지도록 단계화합니다.
- 교차 흐름은 최소화하고, 필요 시 중간 노드로 합류/분기시킵니다.
- 노드 라벨은 "중형", 보조 수치/단위는 "소형"로 배치합니다.
권장 사양
| 요소 | 설명 | 권장 수량 |
|---|
| 원천 노드 | 입력 카테고리 | 2-5개 |
| 중간 노드 | 합류/분기 지점 | 1-3개 |
| 결과 노드 | 출력 카테고리 | 2-6개 |
| 흐름 링크 | 연결 흐름 | 6-14개 |
적합 케이스
- 예산/자원 배분 흐름(입력→분야→성과)
- 에너지/물류/데이터 흐름의 비중 표현
부적합 케이스
- 단계 순서만 보여주면 되는 단순 플로우
- 위계/조직 구조 표현
22. Z-Pattern 메타포 (Z-Pattern)
핵심 아이디어
시선이 자연스럽게 좌상→우상→좌하→우하로 이동하도록 배치해, 읽기 흐름을 설계합니다.
ASCII 시각 구성
(1) 제목/핵심 ─────────────── (2) 키 메시지/수치
\
\
(3) 설명/근거 ─────────────── (4) 결론/요청/CTA
시각화 원칙
- 4개의 앵커 영역을 명확히 구분하고, 순서를 깨지 않도록 배치합니다.
- (1)과 (4)를 "대형"로, (2)와 (3)을 "중형/소형"로 구성해 흐름을 강화합니다.
- 대각선 이동 구간에는 시각적 연결(라인/리드)을 최소 1개만 둡니다.
권장 사양
| 요소 | 설명 | 권장 수량 |
|---|
| 앵커 영역 | 4코너 핵심 블록 | 4개 |
| 중심 비주얼 | 흐름을 잇는 이미지/도형 | 0-1개 |
| 연결 리드 | 시선 유도 라인/화살표 | 0-2개 |
| 키 텍스트 | 각 영역 핵심 문구 | 영역당 1-2개 |
적합 케이스
- 핵심 메시지 전달형 한 장(문제→근거→결론)
- 요약+요청(제안서/보고서 슬라이드)
부적합 케이스
- 다단계 프로세스 설명
- 관계/연동이 복잡한 네트워크
23. Mind Map 메타포 (Mind Map)
핵심 아이디어
중심 주제에서 방사형으로 가지를 뻗어 아이디어 탐색/주제 확장을 시각화합니다.
ASCII 시각 구성
[가지 A]
|
[가지 B] --- [중심 주제] --- [가지 C]
|
[가지 D]
(각 가지에 하위 항목)
시각화 원칙
- 중심 주제는 "대형", 1차 가지는 "중형", 2차 항목은 "소형"로 고정합니다.
- 가지 수를 제한하고, 같은 레벨의 가지는 길이/간격을 균등하게 둡니다.
- 교차를 피하기 위해 가지 방향(상/하/좌/우)을 고정합니다.
권장 사양
| 요소 | 설명 | 권장 수량 |
|---|
| 중심 노드 | 주제/핵심 개념 | 1개 |
| 1차 가지 | 큰 범주 | 4-7개 |
| 2차 항목 | 세부 아이디어 | 가지당 2-4개 |
| 연결선 | 중심-가지/가지-항목 | 12-28개 |
적합 케이스
- 요구사항/아이디어 브레인스토밍 정리
- 연구 주제의 하위 영역 구조화
부적합 케이스
- 순서/일정이 핵심인 로드맵
- 비중/양을 정량적으로 비교해야 하는 경우
24. Stacked Progress 메타포 (Stacked Progress)
핵심 아이디어
여러 항목의 **누적 구성(합)**과 각 항목의 기여를 한 번에 보여줍니다. 진행/구성 비중을 전달합니다.
ASCII 시각 구성
[전체] |====A====|===B===|==C==|
(누적 구성: A + B + C)
단계별(선택):
1단계 |==A==|=B=|
2단계 |===A===|==B==|=C=|
3단계 |====A====|===B===|==C==|
시각화 원칙
- 동일 항목은 모든 막대에서 같은 색/라벨을 사용해 비교를 돕습니다.
- 항목 수가 늘수록 라벨은 "소형"로 줄이고 범례를 활용합니다.
- 전체 합(최종 상태)은 1곳에만 "대형"로 강조합니다.
권장 사양
| 요소 | 설명 | 권장 수량 |
|---|
| 누적 막대 | 합을 보여주는 막대 | 1-4개 |
| 구성 항목 | 스택 세그먼트 | 3-6개 |
| 범례 | 항목 색/의미 | 1개 |
| 보조 수치 | 비중/값(선택) | 항목당 0-1개 |
적합 케이스
- 예산/자원 구성비, 기능 기여도
- 단계별 누적 성과(정성/정량)
부적합 케이스
- 흐름/의존 관계를 설명해야 하는 경우
- 상호작용 네트워크가 핵심인 경우
