layout-types

visual-generator 스킬이 공유하는 24종 레이아웃 정의. 각 레이아웃의 핵심 아이디어, ASCII 시각 구성, 시각화 원칙, 권장 사양, 적합/부적합 케이스를 포함합니다.

18 stars

Best use case

layout-types is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

visual-generator 스킬이 공유하는 24종 레이아웃 정의. 각 레이아웃의 핵심 아이디어, ASCII 시각 구성, 시각화 원칙, 권장 사양, 적합/부적합 케이스를 포함합니다.

Teams using layout-types should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/layout-types/SKILL.md --create-dirs "https://raw.githubusercontent.com/orientpine/honeypot/main/plugins/visual-generator/skills/layout-types/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/layout-types/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How layout-types Compares

Feature / Agentlayout-typesStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

visual-generator 스킬이 공유하는 24종 레이아웃 정의. 각 레이아웃의 핵심 아이디어, ASCII 시각 구성, 시각화 원칙, 권장 사양, 적합/부적합 케이스를 포함합니다.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# 레이아웃 유형 (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개 |

### 적합 케이스
- 예산/자원 구성비, 기능 기여도
- 단계별 누적 성과(정성/정량)

### 부적합 케이스
- 흐름/의존 관계를 설명해야 하는 경우
- 상호작용 네트워크가 핵심인 경우

Related Skills

wiki-gen

18
from orientpine/honeypot

>

theme-whatif

18
from orientpine/honeypot

visual-generator whatif 목적 테마(미래 비전 스냅샷). theme=whatif 또는 purpose=whatif일 때 사용. 단일 팔레트 + Future Snapshot/Hero Statement 레이아웃 가이드 + 장면 구성 5요소 + 몰입 기법 포함.

theme-seminar

18
from orientpine/honeypot

visual-generator seminar 테마(세미나/발표 자료) 무드 팔레트. theme=seminar일 때 사용. 9종 무드(technical-report, clarity, tech-focus, growth, connection, innovation, knowledge, presentation, workshop) 각각 4색 팔레트 제공.

theme-pitch

18
from orientpine/honeypot

visual-generator pitch 목적 테마(피치덱). theme=pitch 또는 purpose=pitch일 때 사용. Apple 다크 그래디언트 팔레트 + Z-Pattern/Single-Hero 레이아웃 가이드 + 피치덱 슬라이드 시퀀스 포함.

theme-gov

18
from orientpine/honeypot

visual-generator gov 테마(정부/공공기관 PPT 슬라이드) 무드 팔레트. theme=gov일 때 사용. 9종 무드(technical-report, growth, clarity, connection, innovation, tech-focus, knowledge, presentation, workshop) 각각 4색 팔레트 제공.

theme-concept

18
from orientpine/honeypot

visual-generator concept 테마(Kurzgesagt 풍 시각 스토리텔링) 무드 팔레트. theme=concept일 때 사용. 텍스트 없이 장면으로 개념을 설명하는 교육용 일러스트레이션. 9종 무드 각각 4색 팔레트 제공.

theme-comparison

18
from orientpine/honeypot

visual-generator comparison 목적 테마(Before/After 비교). theme=comparison 또는 purpose=comparison일 때 사용. 단일 팔레트 + 대비 메타포(Contrast) 레이아웃 가이드 + 비교 항목 작성법 포함.

slide-renderer

18
from orientpine/honeypot

Gemini와 OpenAI gpt-image-2를 사용한 슬라이드 이미지 렌더링 스킬. renderer-agent / renderer-agent-openai가 프롬프트 파일을 이미지로 변환할 때 사용. generate_slide_images.py / generate_slide_images_openai.py 실행 가이드, 환경 요구사항, 출력 해석, 에러 처리 방법을 포함합니다.

stock-data-verifier

18
from orientpine/honeypot

주식/ETF 데이터 3개 출처 교차검증 프로토콜. 환각 방지 첫 번째 방어선.

file-save-protocol-stock

18
from orientpine/honeypot

주식/ETF 분석 결과 파일 저장 프로토콜. Write 도구 사용 규칙, 저장 경로 컨벤션, 실패 시 응답 형식을 정의합니다.

analyst-common-stock

18
from orientpine/honeypot

주식/ETF 분석 에이전트 공통 규칙. 웹검색 직접 호출, 원문 인용, 교차 검증 프로토콜을 정의합니다. 환각 방지의 핵심 방어선.

four-step-pattern

18
from orientpine/honeypot

Four-step sentence pattern for national research reports. Defines mandatory writing structure: task declaration, problem definition, solution approach, and technical details.