theme-comparison
visual-generator comparison 목적 테마(Before/After 비교). theme=comparison 또는 purpose=comparison일 때 사용. 단일 팔레트 + 대비 메타포(Contrast) 레이아웃 가이드 + 비교 항목 작성법 포함.
Best use case
theme-comparison is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
visual-generator comparison 목적 테마(Before/After 비교). theme=comparison 또는 purpose=comparison일 때 사용. 단일 팔레트 + 대비 메타포(Contrast) 레이아웃 가이드 + 비교 항목 작성법 포함.
Teams using theme-comparison 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
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/theme-comparison/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How theme-comparison Compares
| Feature / Agent | theme-comparison | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
visual-generator comparison 목적 테마(Before/After 비교). theme=comparison 또는 purpose=comparison일 때 사용. 단일 팔레트 + 대비 메타포(Contrast) 레이아웃 가이드 + 비교 항목 작성법 포함.
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
# Comparison (Before/After 비교) 테마
**용도**: 두 상태를 나란히 배치하여 차이점을 명확히 보여줍니다. 변화의 임팩트를 시각적으로 증명합니다.
**시각 정체성**: "IMAX 분할 화면처럼 — 좌우 풀블리드 이미지 위에 핵심 수치가 떠 있다"
**활용 상황**:
- Before/After 비교
- As-Is/To-Be 분석
- 방법 A vs 방법 B 장단점
- 경쟁사 대비 우위
- 개선 전후 성과 비교
---
## 색상 팔레트
| 역할 | 색상 | HEX | 용도 |
|------|------|-----|------|
| 주조 | 차콜 그레이 | #2D3436 | Before 영역, 기존/문제 상태 표현 |
| 보조 | 에메랄드 | #00B894 | After 영역, 개선/목표 상태 표현 |
| 강조 | 코랄 레드 | #FF7675 | 핵심 차이점 강조, 변화 포인트 |
| 배경 | 라이트 그레이 | #F5F6FA | 전체 배경, 중립적 기반 |
**팔레트 특징**:
- 차콜(어둠) → 에메랄드(밝음)로 개선 방향성 암시
- 코랄 강조색이 "핵심 변화점"을 즉각 인지시킴
- 중립적 배경으로 양쪽 비교에 편향 없음
---
## 권장 레이아웃
### 대비 메타포 (Contrast) - 최우선 권장
좌우 대칭 배치로 동일한 기준에서 두 상태를 비교합니다.
```
┌───────────────┐ VS ┌───────────────┐
│ Before (현재) │ │ After (목표) │
│ - 항목 1 │ │ - 항목 1 │
│ - 항목 2 │ │ - 항목 2 │
│ - 항목 3 │ │ - 항목 3 │
└───────────────┘ └───────────────┘
```
**핵심 원칙**:
- 좌우 패널의 크기, 항목 수, 정렬을 **동일하게** 맞춤
- 대비 포인트는 **1-2개만** 대형으로 강조
- 항목은 **대응 관계**가 보이도록 같은 순서로 배치
### 상하 분할 (대형 화면용)
```
┌─────────────────────────────┐
│ Before (현재) │
│ - 문제점 1 - 문제점 2 │
├─────────────────────────────┤
│ ↓ │
├─────────────────────────────┤
│ After (목표) │
│ + 개선점 1 + 개선점 2 │
└─────────────────────────────┘
```
---
## 스타일 노트
### 대비 강조 기법
- **색상 대비**: Before는 차콜(#2D3436), After는 에메랄드(#00B894)
- **아이콘 대비**: Before에 ✗/↓, After에 ✓/↑ 사용
- **수치 대비**: 동일 지표의 전후 수치 나란히 표시
### 항목 매칭 규칙
| Before | After |
|--------|-------|
| 수동 처리 (3시간) | 자동 처리 (10분) |
| 오류율 15% | 오류율 0.5% |
| 인력 5명 필요 | 인력 1명 운영 |
### 시각적 연결
- 중앙에 **→** 또는 **VS** 표시로 전환 암시
- 변화 방향 화살표는 **1개만** 사용 (과도한 장식 배제)
---
## 비교 항목 작성 가이드
### 좋은 예
| 구분 | Before | After |
|------|--------|-------|
| 처리 시간 | 3시간 | 10분 |
| 오류율 | 15% | 0.5% |
| 비용 | 월 500만원 | 월 50만원 |
### 나쁜 예
| 구분 | Before | After |
|------|--------|-------|
| 속도 | 느림 | 빠름 |
| 품질 | 낮음 | 높음 |
| 효율 | 비효율적 | 효율적 |
**원칙**: 정성적 표현 대신 **정량적 수치**로 차이를 명확히
---
## 적합/부적합 케이스
**적합**: Before/After 변화 증명, As-Is/To-Be 시스템 비교, 방법 A vs 방법 B 의사결정, 경쟁사 대비 우위, 개선 전후 KPI 비교
**부적합**: 3개 이상 대안 비교 (다자 비교), 관계망/순환/계층, 시간 순서 프로세스, 단일 상태 설명 (비교 대상 없음), 미래 비전 몰입 → `/visual-generator:theme-whatif`
---
## 콘텐츠 표현 규칙
comparison 스타일의 텍스트는 **개조식 명사구**를 따릅니다:
| 규칙 | 설명 | 예시 |
|------|------|------|
| 개조식 | 핵심 키워드 중심의 간결한 명사구 | ✗ "고령 농부가 수동으로 트랙터를 운전한다" → ✓ "고령 농부의 수동 트랙터 운전" |
| 서술어 최소화 | 종결어미(~다, ~합니다) 대신 명사형 종결 | ✗ "작업 효율이 저하된다" → ✓ "작업효율 저하" |
| 정량적 대비 | 정성적 표현 대신 구체적 수치로 차이 표현 | ✗ "느림 → 빠름" → ✓ "3시간 → 10분" |
| **한글 단독 표기** | 한영 병기 절대 금지. 한글 또는 영문 약어 하나만 사용 | ✗ "연구 (Research)", "분석(Analysis)" → ✓ "연구", "분석" / 약어만 허용: "AI", "IoT" |
---
## 렌더링 스타일 (Rendering Style)
이 스타일의 시각적 DNA를 정의합니다. prompt-designer가 INSTRUCTION/CONFIGURATION 블록 생성 시 반드시 참조해야 합니다.
| 차원 | 지시 사항 |
|------|-----------|
| **서피스 (박스/패널)** | 패널 없음. 좌우 50:50으로 분할된 전면 이미지 영역. 텍스트는 반투명 오버레이 위에 배치한다. 오버레이는 이미지 하단 30% 영역에 그라데이션(투명→반투명 검정/흰색)으로 처리한다. |
| **배경** | 좌측 50% = Before 상태를 직관적으로 표현하는 풀블리드 시각 요소(어둡고 복잡한 톤). 우측 50% = After 상태를 직관적으로 표현하는 풀블리드 시각 요소(밝고 정돈된 톤). 중앙에 수직 구분선 또는 대형 화살표(→) 배지. |
| **코너/엣지** | 완전 직각(0px radius). 좌우 이미지 영역이 정확히 50:50으로 분할된다. 이미지가 캔버스 끝까지 채운다(edge-to-edge). |
| **연결선** | 중앙에 대형 방향 화살표(→) 1개만 배치. Before에서 After로의 전환을 암시한다. 패널 내부에는 연결선 없음. 화살표 색상은 강조색(#FF7675) 또는 흰색. |
| **시각 장식** | 최소화. 체크마크(✓)/엑스마크(✗) 아이콘을 핵심 변화 지표 옆에만 사용. 변화율 배지(+45%, -30%) 대형 표시. 중앙 "VS" 또는 "→" 배지. 이미지 자체가 장식 역할을 하므로 추가 장식은 배제한다. |
| **타이포그래피** | 2단 위계(제목/핵심 수치)만 사용. 제목은 오버레이 상단에 볼드 배치. 핵심 수치(최대 3개)는 대형 볼드. 텍스트는 반투명 오버레이 위에서 흰색 또는 밝은 색으로 표시하여 이미지 위 가독성을 확보한다. |
| **공간 구성** | 이미지 95% + 텍스트 오버레이 5%. 화면의 95% 이상을 시각 요소가 차지한다. 텍스트는 이미지 위에 오버레이로만 존재한다. 양쪽 동일한 구조: 상단 제목 + 하단 핵심 지표 3개 이내. 좌우 이미지가 캔버스를 빈틈없이 채우며, 텍스트 오버레이 영역도 최소 면적으로 제한한다. 네거티브 스페이스 ≤10%. |
| **시각 메타포** | 시각 대비(Visual Contrast). 왼쪽은 어둡고/복잡하고/혼란스러운 시각 요소, 오른쪽은 밝고/정돈되고/효율적인 시각 요소. 동일 주제의 두 상태를 이미지로 직관적으로 대비시킨다. 텍스트가 아닌 이미지가 메시지의 주체이다. |
---
## 필수 렌더링 요소 (Must-Render Elements)
이 테마에서 이미지에 반드시 렌더링되어야 하는 요소 목록이다.
prompt-designer는 아래 요소를 CONTENT에 반드시 포함하고, Content Placement에서 배치를 지시해야 한다.
> **escape clause**: 사용자가 명시적으로 제목 생략을 요청한 경우, prompt-designer는 이를 존중한다.
> **dual-title 구조**: 이 테마에는 슬라이드 레벨 단일 제목이 없다. 좌측(Before)과 우측(After) 각각의 패널 제목이 필수이다.
| 요소 | 역할 | 필수 | 배치 변형 (슬라이드 컨텍스트에 맞게 하나를 선택) |
|------|------|:----:|--------------------------------------------------|
| before_title | Before 패널의 상태 식별자 | ✅ | ① 좌측 오버레이 상단 볼드 흰색 — 이미지 위 반투명 그라데이션 위에 배치 ② 좌측 오버레이 중앙 대형 — 패널 중심에 존재감 있게 ③ 좌측 상단 배지형 — 라운드 배경 안에 짧은 라벨로 배치 |
| after_title | After 패널의 상태 식별자 | ✅ | ① 우측 오버레이 상단 볼드 흰색 — before_title과 대칭 배치 ② 우측 오버레이 중앙 대형 — 패널 중심에 존재감 있게 ③ 우측 상단 배지형 — 라운드 배경 안에 짧은 라벨로 배치 |
---
### 이미지 중심 원칙 (CRITICAL)
Comparison 테마는 **이미지가 메시지의 주체**입니다. 텍스트는 보조 역할만 합니다.
- 각 측면(Before/After)에 텍스트 요소는 **최대 3개** (제목 1개 + 핵심 지표 2개)
- 이미지가 캔버스의 95% 이상을 채운다
- 텍스트는 반드시 이미지 위 반투명 오버레이에 배치한다
- Before/After 차이는 **이미지의 시각적 대비**로 전달하고, 텍스트는 수치 보조만 한다
- 양쪽 이미지의 구도, 크기, 위치를 정확히 대칭시킨다
---
### 장면 묘사 가이드 (Scene Description Guide) — CRITICAL
이 테마의 **좌우 이미지 장면**은 반드시 INSTRUCTION 블록의 `### Content Placement`에서 **자연어로 상세히 묘사**해야 합니다. `[Image 1]`, `[Image 2]` 같은 **플레이스홀더를 절대 사용하지 않습니다** — Gemini가 그대로 텍스트로 렌더링합니다.
#### 올바른 장면 묘사 (INSTRUCTION의 Content Placement에 배치)
```markdown
### Content Placement
- 좌측 50% (Before 장면): 먼지가 이는 들판에서 낡고 녹슨 트랙터를 수동 조작하는 고령 농부.
구부정한 자세로 핸들을 잡고 있으며, 트랙터 주변에 고르지 않은 밭고랑이 보인다.
전체적으로 어둡고 탁한 톤. 하단에 반투명 검정 그라데이션 오버레이.
- 우측 50% (After 장면): 정돈된 녹색 밭 위를 주행하는 첨단 자율주행 트랙터(KIMM 로고).
센서와 안테나가 장착된 깨끗한 외관. 배경에 작은 모니터실에서 태블릿을 보며
미소 짓는 관리자. 밝고 선명한 톤. 하단에 반투명 흰색 그라데이션 오버레이.
- 중앙: 대형 흰색 화살표(→)로 Before→After 전환 암시
- 오버레이 텍스트: 각 측면의 반투명 오버레이 위에 제목과 핵심 수치 배치
```
#### 잘못된 장면 묘사 (절대 금지)
```markdown
### Content Placement
- 좌측: [Image 1] Before 이미지 배치
- 우측: [Image 2] After 이미지 배치
```
> **왜 잘못되었는가**: `[Image 1]`, `[Image 2]`는 Gemini에 의해 **이미지 위에 그대로 텍스트로 렌더링**됩니다. 실제 장면이 생성되지 않고 플레이스홀더 텍스트가 화면을 차지하여 이미지 중심 원칙을 완전히 위반합니다.
#### 장면 묘사 필수 요소 (Before/After 각각)
| 요소 | 설명 | 예시 |
|------|------|------|
| **환경/배경** | 장면이 일어나는 공간 | "먼지가 이는 들판", "정돈된 녹색 밭" |
| **주체/인물** | 장면의 중심 인물 또는 장비 | "고령 농부", "자율주행 트랙터" |
| **행동/상태** | 주체가 무엇을 하고 있는지 | "수동 조작 중", "자율 주행 중" |
| **톤/분위기** | 시각적 톤 (Before=어둡고 탁한, After=밝고 선명한) | "전체적으로 어둡고 탁한 톤" |
| **오버레이 처리** | 텍스트 가독성을 위한 오버레이 | "하단 반투명 검정 그라데이션 오버레이" |
---
## 렌더링 금지 요소 (CRITICAL)
프롬프트 생성 시 다음 요소는 **CONTENT BLOCK에 절대 포함 금지**:
| 유형 | 금지 예시 | 설명 |
|------|-----------|------|
| **이미지 플레이스홀더** | `[Image 1]`, `[Image 2]`, `[사진]`, `[이미지]`, `[Before 이미지]`, `[After 이미지]` | **대괄호 이미지 참조는 Gemini가 그대로 텍스트로 렌더링함.** 장면 묘사는 반드시 INSTRUCTION의 Content Placement에 자연어로 기술할 것 |
| 위치 지시자 | `[상단]`, `[하단 결론1]`, `[왼쪽 영역]` | 레이아웃 배치 힌트 |
| 레이아웃 유형명 | `대비 메타포`, `Before/After 비교`, `Contrast` | 메타포/레이아웃 이름 |
| 색상 코드 | `(#HEXCODE)`, `Primary Color` | CONFIGURATION에서만 사용 |
| 크기 힌트 | `(대형)`, `(중형)`, `48pt` | INSTRUCTION에서만 사용 |
| 역할 라벨 | `Main Title`, `Sub-header` | INSTRUCTION에서만 사용 |
| **장면 묘사 텍스트** | `고령 농부`, `깨끗한 실내`, `자율주행 트랙터가 보이는 들판` | 장면 묘사는 INSTRUCTION의 Content Placement에서만 기술. CONTENT에 포함하면 이미지 위에 텍스트로 렌더링됨 |
| **한영 병기 텍스트** | `연구 (Research)`, `분석(Analysis)`, `목표 / Goal` | 한글과 영어를 괄호·슬래시로 병기하는 모든 형태 금지. 한글 단독 또는 고유 영문 약어(AI, IoT, CNN 등) 단독만 허용 |
CONTENT에는 **이미지 위 반투명 오버레이에 표시될 순수한 텍스트(제목, 핵심 수치)만** 포함합니다.
---
## 렌더링 완결성 (Rendering Completeness) — CRITICAL
이 테마의 Gemini 렌더링 결과물에서 다음 품질 기준을 반드시 충족해야 합니다:
| 규칙 | 설명 |
|------|------|
| **플레이스홀더 금지** | `[Image 1]`, `[Image 2]`, `[사진]`, `[아이콘]` 등 대괄호 플레이스홀더가 이미지에 렌더링되면 안 된다. 모든 장면은 INSTRUCTION의 Content Placement에서 자연어로 상세히 묘사하여 Gemini가 실제 이미지를 생성하도록 한다 |
| **이미지 우선** | 좌우 각 50% 영역이 반드시 실제 이미지(사진/일러스트)로 채워져야 한다. 텍스트 박스, 불릿 리스트, 빈 영역으로 대체되면 안 된다 |
| **오버레이 텍스트 가독성** | 반투명 오버레이 위의 텍스트(제목, 핵심 수치)는 반드시 읽을 수 있어야 한다. 오버레이 투명도가 텍스트 가독성을 해치면 안 된다 |
| **좌우 대칭** | Before/After 양쪽의 구도, 크기, 오버레이 위치가 대칭이어야 한다. 한쪽이 이미지이고 다른 쪽이 텍스트 리스트이면 안 된다 |
| **중앙 구분** | 중앙의 화살표(→) 또는 VS 배지가 명확하게 렌더링되어야 한다 |
| **깨진 텍스트 금지** | 한글/영문이 깨지거나 알아볼 수 없는 문자열로 렌더링되면 안 된다 |
### 프롬프트 작성 시 완결성 확보 방법
| 기법 | 설명 |
|------|------|
| **구체적 장면 묘사** | `[Image]` 대신 "먼지가 이는 들판에서 낡은 트랙터를 수동 조작하는 고령 농부" 처럼 구체적으로 기술 |
| **Before/After 톤 명시** | Before: "어둡고, 탁하고, 복잡한 톤", After: "밝고, 선명하고, 정돈된 톤" |
| **오버레이 텍스트 명시** | 렌더링할 텍스트를 CONTENT에 정확히 나열. 모호한 참조(`위 내용 참조`) 금지 |
| **대칭 구도 지시** | "양쪽 이미지의 구도, 크기, 오버레이 위치를 정확히 대칭시킨다" 명시 |
---
## 구성 지시어 렌더링 방지 (Content Placement 메타라벨 금지) — CRITICAL
INSTRUCTION 블록의 Content Placement에서 CONTENT 텍스트의 배치를 설명할 때, **역할 분류명(메타라벨)**을 사용하면 Gemini가 해당 라벨을 이미지에 텍스트로 렌더링합니다. 반드시 CONTENT에 기재된 **실제 텍스트를 직접 인용**하여 배치를 지시합니다.
| 금지 (메타라벨 — 렌더링 유출) | 올바른 (실제 텍스트 인용) |
|------|------|
| `좌측 오버레이: Before 핵심 지표` | `좌측 오버레이에 '수동 처리 3시간', '오류율 15%' 텍스트 배치` |
| `우측 오버레이: After 핵심 지표` | `우측 오버레이에 '자동 처리 10분', '오류율 0.5%' 텍스트 배치` |
| `중앙: 변화율 배지` | `중앙에 '→' 화살표 배치, 하단에 '10배 속도 향상' 텍스트` |
**금지 메타라벨 목록**: 보조 지표, 보조 텍스트, 핵심 성과, 핵심 지표, 변화율 라벨, Before 라벨, After 라벨, 메인 타이틀, 비교 항목
---
## 출력 구조 매핑 (Output Structure Mapping)
comparison 테마의 프롬프트는 다음과 같이 4-block 구조에 매핑됩니다. 모든 테마가 동일한 4-block 구조를 따릅니다.
### INSTRUCTION 블록 포함 내용
- `### Image Purpose`: Before/After 비교 슬라이드의 목적 (변화 증명, 개선 효과 등)
- `### Target Audience`: 의사결정자, 평가위원 등
- `### Key Message`: 핵심 변화 포인트 한 문장
- `### Visual Style`: `comparison` 스타일 명시 + IMAX 분할 화면 특성
- `### Rendering Style`: 서피스(패널 없음, 50:50 분할 이미지), 배경(좌측 어둡고 복잡 / 우측 밝고 정돈), 코너/엣지(완전 직각), 연결선(중앙 대형 화살표 1개), 시각 장식(최소, ✓/✗ 아이콘, 변화율 배지), 공간 구성(이미지 95%+텍스트 오버레이 5%), 시각 메타포(시각 대비) 7개 차원
- `### Content Placement`: **좌우 장면을 자연어로 상세히 묘사** (환경, 주체, 행동, 톤, 오버레이 처리 포함). 중앙 화살표/VS 배치. CONTENT에 기재된 **실제 텍스트를 직접 인용**(작은따옴표)하여 오버레이 텍스트 배치 위치 설명. **`[Image N]` 플레이스홀더 및 메타라벨(역할 분류명) 절대 금지**
### CONFIGURATION 블록 포함 내용
- `### Canvas Settings`: 3840 x 2160, 배경색 #F5F6FA
- `### Background Treatment`: 좌측 50%(어두운 톤 이미지) / 우측 50%(밝은 톤 이미지) + 중앙 구분
- `### Color Palette`: 주조(#2D3436), 보조(#00B894), 강조(#FF7675), 배경(#F5F6FA)
- `### Layout Structure`: 대비 메타포(Contrast) 좌우 대칭 + 영역 구분
- `### Typography`: 2단 위계(제목/핵심 수치), 오버레이 위 밝은 텍스트
### CONTENT 블록 포함 내용 (텍스트 오버레이 ONLY)
- `### Title Area`: Before/After 제목 (번호 목록 형태)
- `### Main Content`: **오버레이에 표시될 텍스트만** 번호 목록으로 나열 — Before 항목과 After 항목의 대응 수치. **장면 묘사, 이미지 참조(`[Image N]`), 환경 설명 절대 포함 금지** — 이들은 INSTRUCTION의 Content Placement에 배치
- `### Data Elements`: 전후 핵심 수치 (최대 3개)
### FORBIDDEN ELEMENTS 블록 포함 내용
- `[Image 1]`, `[Image 2]` 등 이미지 플레이스홀더, pt/px 단위, 한영 병기, ASCII 힌트, 렌더링 지시문, 폰트 지정, 좌표, 플레이스홀더, 위치 지시자, 레이아웃 유형명, 색상 코드, 역할 라벨, 장면 묘사 텍스트, 테이블 형식 CONTENT 등
---
## Golden Reference Example
```markdown
## INSTRUCTION
### Image Purpose
스마트 팩토리 도입 전후의 생산 환경 변화를 시각적으로 대비시켜, 의사결정자와 현장 관리자가 자동화 투자의 임팩트를 즉각 인지할 수 있도록 IMAX 분할 화면 슬라이드를 생성한다.
### Target Audience
제조 기업 경영진, 공장 운영 책임자, 자동화 투자 평가위원, 현장 엔지니어.
### Key Message
수동 작업 중심의 기존 공정에서 AI 기반 자동화 시스템으로의 전환이 생산성, 품질, 안전성을 동시에 향상시킨다.
### Scene Description
좌측 50% 영역(Before)에는 먼지가 자욱한 공장 현장에서 작업자들이 수동으로 부품을 검사하고 조립하는 장면이 펼쳐진다. 조명이 어둡고 탁한 톤으로, 작업자들의 구부정한 자세와 산재된 공구들이 비효율성을 암시한다. 우측 50% 영역(After)에는 정돈된 스마트 팩토리 환경이 보인다. 밝은 LED 조명 아래 로봇 팔들이 정밀하게 부품을 조립하고, 천장의 카메라와 센서들이 실시간 모니터링을 수행한다. 배경에는 깨끗한 제어실에서 태블릿을 보며 미소 짓는 관리자의 모습이 보인다. 중앙에는 대형 흰색 화살표(→)가 Before에서 After로의 전환을 강조한다. 좌측 하단에는 검정색 반투명 그라데이션 오버레이가 텍스트 가독성을 확보하고, 우측 하단에는 흰색 반투명 그라데이션 오버레이가 밝은 배경 위의 텍스트를 돋보이게 한다. 양쪽 이미지의 구도, 크기, 오버레이 위치는 정확히 대칭된다.
### Rendering Style
- 서피스: 패널 없음. 좌우 50:50으로 분할된 전면 이미지 영역. 텍스트는 반투명 오버레이 위에 배치한다. 오버레이는 이미지 하단 30% 영역에 그라데이션(투명→반투명 검정/흰색)으로 처리한다.
- 배경: 좌측 50% = Before 상태를 직관적으로 표현하는 풀블리드 시각 요소(어둡고 복잡한 톤). 우측 50% = After 상태를 직관적으로 표현하는 풀블리드 시각 요소(밝고 정돈된 톤). 중앙에 수직 구분선 또는 대형 화살표(→) 배지.
- 코너/엣지: 완전 직각(0px radius). 좌우 이미지 영역이 정확히 50:50으로 분할된다. 이미지가 캔버스 끝까지 채운다(edge-to-edge).
- 연결선: 중앙에 대형 방향 화살표(→) 1개만 배치. Before에서 After로의 전환을 암시한다. 패널 내부에는 연결선 없음. 화살표 색상은 강조색(#FF7675) 또는 흰색.
- 시각장식: 최소화. 체크마크(✓)/엑스마크(✗) 아이콘을 핵심 변화 지표 옆에만 사용. 변화율 배지(+86%, -87%) 대형 표시. 중앙 "VS" 또는 "→" 배지. 이미지 자체가 장식 역할을 하므로 추가 장식은 배제한다.
- 공간구성: 이미지 95% + 텍스트 오버레이 5%. 화면의 95% 이상을 시각 요소가 차지한다. 텍스트는 이미지 위에 오버레이로만 존재한다. 양쪽 동일한 구조: 상단 제목 + 하단 핵심 지표 3개 이내. 좌우 이미지가 캔버스를 빈틈없이 채우며, 네거티브 스페이스 ≤10% 목표.
- 시각메타포: 시각 대비(Visual Contrast). 왼쪽은 어둡고/복잡하고/혼란스러운 시각 요소, 오른쪽은 밝고/정돈되고/효율적인 시각 요소. 동일 주제의 두 상태를 이미지로 직관적으로 대비시킨다. 텍스트가 아닌 이미지가 메시지의 주체이다.
### Content Placement
좌측 50% 이미지(Before 장면): 먼지가 자욱한 공장 현장에서 작업자들이 수동으로 부품을 검사하고 조립하는 장면. 조명이 어둡고 탁한 톤. 하단에 검정색 반투명 그라데이션 오버레이. 오버레이 위에 상단에 '도입 전 (2023)' 제목, 하단에 '수동 품질 검사', '불량률 8.5%' 텍스트 배치.
우측 50% 이미지(After 장면): 정돈된 스마트 팩토리 환경. 밝은 LED 조명 아래 로봇 팔들이 정밀하게 부품을 조립하고, 천장의 카메라와 센서들이 실시간 모니터링을 수행한다. 배경에는 제어실에서 태블릿을 보며 미소 짓는 관리자. 밝고 선명한 톤. 하단에 흰색 반투명 그라데이션 오버레이. 오버레이 위에 상단에 '도입 후 (2026)' 제목, 하단에 'AI 자동 품질 검사', '불량률 1.2%' 텍스트 배치.
중앙: 대형 흰색 화살표(→)로 Before→After 전환 암시. 화살표 양옆에 '불량률 86% 감소', '생산성 340% 향상' 텍스트를 대형 볼드로 배치하여 핵심 변화를 강조한다.
양쪽 이미지의 구도, 크기, 오버레이 위치는 정확히 대칭된다.
## CONFIGURATION
### Canvas Settings
- resolution: 3840x2160
- aspect_ratio: 16:9
- layout: split_screen_contrast
### Background Treatment
- left_half: 어둡고 복잡한 톤의 Before 상태 이미지 (먼지, 혼란, 비효율)
- right_half: 밝고 정돈된 톤의 After 상태 이미지 (깨끗함, 질서, 효율)
- center_divider: 수직 구분선 또는 대형 화살표(→)
- overlay_left: 검정색 반투명 그라데이션 (하단 30%)
- overlay_right: 흰색 반투명 그라데이션 (하단 30%)
### Color Palette
- primary: #2D3436 (Before 영역, 기존/문제 상태)
- secondary: #00B894 (After 영역, 개선/목표 상태)
- accent: #FF7675 (핵심 차이점 강조, 변화 포인트)
- background: #F5F6FA (전체 배경)
### Typography
All Korean text must be rendered with crisp, perfectly formed characters using heavy-weight Gothic-style sans-serif fonts. Each Korean syllable block must be complete and legible. Use Bold weight (700+) for titles, Medium weight (500) for body text.
- hierarchy: 핵심 수치(대형 볼드) > 제목(중형 볼드) > 보조 텍스트(소형)
- alignment: 오버레이 텍스트는 좌측 정렬 또는 중앙 정렬
- spacing: 제목과 수치 간 충분한 줄간격 유지
## CONTENT
before_title: "도입 전 (2023)"
before_item1: "수동 품질 검사"
before_item2: "불량률 8.5%"
after_title: "도입 후 (2026)"
after_item1: "AI 자동 품질 검사"
after_item2: "불량률 1.2%"
metric1: "불량률 86% 감소"
metric2: "생산성 340% 향상"
center_arrow: "→"
## FORBIDDEN ELEMENTS
- 이미지 플레이스홀더: [Image 1], [Image 2], [Before 이미지], [After 이미지], [사진], [이미지], [아이콘]
- 위치 지시자: [상단], [하단], [좌측], [우측], [중앙]
- XML 태그 표기: scene, text_to_render, typography, canvas, layout
- 폰트 패밀리명 직접 지정: Noto Sans, Pretendard, Nanum Gothic, Apple SD Gothic Neo
- 색상 코드 노출 텍스트: #2D3436, #00B894, #FF7675, #F5F6FA, #FFFFFF
- 크기 단위 텍스트: 24pt, 32px, 18pt, 48px, 16pt
- ASCII 레이아웃 힌트: +---+, |---|, ->, <-, ===
- 역할 라벨 텍스트: Before 핵심 지표, After 핵심 지표, 변화율 배지, Main Title, 보조 텍스트
- 플레이스홀더 문자열: [내용], {텍스트}, {{value}}, [텍스트], [데이터]
- 메타데이터 헤더 텍스트: 영역, 역할, 구성, 타입, 배치, 레이아웃
- 한영 병기 표현: 도입 (Introduction), 품질 / Quality, 검사(Inspection), 자동화(Automation)
- 렌더링 힌트 텍스트: (굵게), (강조), (이탤릭), (밑줄), (대형), (중형)
- 기관 로고, 부처 마크, 국가 상징 삽입
- 기관명 고정 배치: OO부, OO청, OO위원회, OO회사
- 라운드 코너, 글래스모피즘, 입체 그림자 과다 사용
- 사진 기반 배경, 과도한 그라데이션, 3D 렌더링 오브젝트
- 물음표형 더미 텍스트, 로렘 입숨, 의미 없는 임의 문자
- CONTENT 내부 번호 목록, 표 형식, subsection 헤더
- 장면 묘사 텍스트를 CONTENT에 포함 (INSTRUCTION의 Content Placement에만 배치)
- 메타라벨(역할 분류명): 보조 지표, 보조 텍스트, 핵심 성과, 핵심 지표, 변화율 라벨
```Related Skills
theme-whatif
visual-generator whatif 목적 테마(미래 비전 스냅샷). theme=whatif 또는 purpose=whatif일 때 사용. 단일 팔레트 + Future Snapshot/Hero Statement 레이아웃 가이드 + 장면 구성 5요소 + 몰입 기법 포함.
theme-seminar
visual-generator seminar 테마(세미나/발표 자료) 무드 팔레트. theme=seminar일 때 사용. 9종 무드(technical-report, clarity, tech-focus, growth, connection, innovation, knowledge, presentation, workshop) 각각 4색 팔레트 제공.
theme-pitch
visual-generator pitch 목적 테마(피치덱). theme=pitch 또는 purpose=pitch일 때 사용. Apple 다크 그래디언트 팔레트 + Z-Pattern/Single-Hero 레이아웃 가이드 + 피치덱 슬라이드 시퀀스 포함.
theme-gov
visual-generator gov 테마(정부/공공기관 PPT 슬라이드) 무드 팔레트. theme=gov일 때 사용. 9종 무드(technical-report, growth, clarity, connection, innovation, tech-focus, knowledge, presentation, workshop) 각각 4색 팔레트 제공.
theme-concept
visual-generator concept 테마(Kurzgesagt 풍 시각 스토리텔링) 무드 팔레트. theme=concept일 때 사용. 텍스트 없이 장면으로 개념을 설명하는 교육용 일러스트레이션. 9종 무드 각각 4색 팔레트 제공.
wiki-gen
>
slide-renderer
Gemini와 OpenAI gpt-image-2를 사용한 슬라이드 이미지 렌더링 스킬. renderer-agent / renderer-agent-openai가 프롬프트 파일을 이미지로 변환할 때 사용. generate_slide_images.py / generate_slide_images_openai.py 실행 가이드, 환경 요구사항, 출력 해석, 에러 처리 방법을 포함합니다.
layout-types
visual-generator 스킬이 공유하는 24종 레이아웃 정의. 각 레이아웃의 핵심 아이디어, ASCII 시각 구성, 시각화 원칙, 권장 사양, 적합/부적합 케이스를 포함합니다.
stock-data-verifier
주식/ETF 데이터 3개 출처 교차검증 프로토콜. 환각 방지 첫 번째 방어선.
file-save-protocol-stock
주식/ETF 분석 결과 파일 저장 프로토콜. Write 도구 사용 규칙, 저장 경로 컨벤션, 실패 시 응답 형식을 정의합니다.
analyst-common-stock
주식/ETF 분석 에이전트 공통 규칙. 웹검색 직접 호출, 원문 인용, 교차 검증 프로토콜을 정의합니다. 환각 방지의 핵심 방어선.
four-step-pattern
Four-step sentence pattern for national research reports. Defines mandatory writing structure: task declaration, problem definition, solution approach, and technical details.