# SAM 브로셔 버전 관리

> **작성일**: 2026-03-01
> **상태**: 운영 중

---

## 1. 개요

SAM CEO Dashboard 및 ERP/MES 영업 브로셔의 버전별 디자인 변천을 기록한다.
모든 브로셔는 세로형(9:16) HTML로 작성하며, `pptx-skill`(html2pptx.js)로 PPTX 변환한다.

---

## 2. 버전 요약

| 버전 | 대상 | 테마 | 배경색 | 주 액센트 | 비고 |
|------|------|------|--------|-----------|------|
| **v1** | 전체 고객 | 다크 | `#0F2439` | `#10B981` (에메랄드) | SAM ERP/MES 범용 |
| **v2** | 경영진 | 다크 | `#0B1929` | `#0EA5E9` (스카이블루) | CEO Dashboard 초판 |
| **v3** | 경영진 | 다크 | `#0B1929` | `#0EA5E9` (스카이블루) | v2 개선, Before/After 추가 |
| **v4** | 경영진 | 라이트 | `#F8FAFC` | `#0EA5E9` (스카이블루) | v3의 밝은 배경 변환 |
| **v5** | 경영진 | 프리미엄 그래디언트 | `#0F172A→#312E81` | `#FBBF24` (골드) | 글래스모피즘 + 골드 |
| **v6** | 경영진 | 코퍼레이트 블루 | `#FFFFFF` | `#2563EB` (블루) | 대기업/공공기관 스타일 |
| **v7** | 경영진 | 웜 그레이 + 틸 | `#FAFAF9` | `#0D9488` (틸) | IT/SaaS 스타일 |
| **v8** | 경영진 | 투톤 스플릿 | `#1E293B` / `#FFFFFF` | `#F97316` (오렌지) | 금융/컨설팅 스타일 |
| **v9** | 경영진 | 미니멀 화이트 | `#FFFFFF` | `#6366F1` (인디고) | Apple/디자인 에이전시 |

---

## 3. 버전별 상세

### 3.1 v1 — SAM ERP/MES 범용 브로셔

**컨셉**: 중소 제조업 대상 SAM 플랫폼 전체 기능 소개

| 항목 | 값 |
|------|------|
| 배경 | `#0F2439` (네이비) |
| 주 액센트 | `#10B981` (에메랄드 그린) |
| 보조 액센트 | `#2E86AB`, `#8B5CF6`, `#E86F2C` |
| 카드 스타일 | 반투명 배경 + 컬러 보더 |
| BI 로고 | `sam_bi_white.png` |

**앞면 구성**:
- 히어로: "중소 제조업을 위한 ERP/MES 통합 플랫폼"
- 고민 포인트: Excel 과의존, 실시간 가시성, 품질관리, 높은 ERP 비용
- 효과 지표: 시간 절감 80%, 납기 준수 95%, 추적성 100%, 인사/회계 무료
- 기술 태그: 클라우드, 모바일 대응, 멀티테넌트

**뒷면 구성**:
- 8대 핵심 모듈 (01~08 번호 뱃지): 품목/BOM, 견적/수주, 생산/MES, 출하, 품질, 자재, 인사/회계, 대시보드
- 확장 기능: 전자서명, 알림톡, AI Lab, QR
- 가격표: 기본 2,000만원 + 월 50만원
- 도입 프로세스: 인터뷰 → 개발 → 이관 → 교육

---

### 3.2 v2 — CEO Dashboard 초판

**컨셉**: 경영진 타겟, 대시보드 중심 소개. 문제→해결 스토리텔링

| 항목 | 값 |
|------|------|
| 배경 | `#0B1929` (짙은 네이비) |
| 주 액센트 | `#0EA5E9` (스카이블루) |
| 보조 액센트 | `#10B981`, `#8B5CF6`, `#F59E0B`, `#EF4444`, `#EC4899` |
| 카드 스타일 | 반투명 다크 카드 |
| BI 로고 | `sam_bi_white.png` |

**앞면 구성**:
- 히어로: "대표님, 지금 우리 회사 어떻게 돌아가고 있나요?"
- 시간대별 고민: 오전 9시(매출 보고 대기), 오후 2시(수주 취합), 오후 5시(결재 서류)
- 대시보드 Mock UI: KPI 카드 4개 + 매출 추이 차트 + 조직 성과 바 차트
- 약속 박스: "실시간 KPI 파악"

**뒷면 구성**:
- 대시보드 7대 기능 (01~07 뱃지)
- 역할별 맞춤 화면: CEO, 관리자, 운영자, 영업자
- SAM 플랫폼 연동: 견적/수주, 생산, 품질, 재고, 인사/회계
- 가격표 + 도입 프로세스

**v1 대비 차이**:
- 타겟이 전체→경영진으로 좁혀짐
- 타임라인 기반 문제 제시 (시간대별 고민)
- 대시보드 UI Mock 삽입
- 역할별 화면 분리 소개

---

### 3.3 v3 — CEO Dashboard 개선판 (다크)

**컨셉**: v2 기반 개선. Before/After 인포그래픽 추가, SVG 아이콘 강화

| 항목 | 값 |
|------|------|
| 배경 | `#0B1929` (짙은 네이비) |
| 주 액센트 | `#0EA5E9` (스카이블루) |
| 카드 스타일 | 반투명 다크 + 컬러 보더 |
| BI 로고 | `sam_bi_white.png` |

**v2 대비 개선사항**:
- 1page 통합본 추가
- Before/After 비교 인포그래픽 도입
- 핵심 가치 3카드: 즉시 현황 파악, 데이터로 판단, 모바일 승인
- SVG 인라인 아이콘 전면 적용 (외부 이미지 의존 제거)
- PPTX 텍스트 줄바꿈 방지 패턴 적용 (`white-space: nowrap`, 개별 `<p>` 분리)

---

### 3.4 v4 — CEO Dashboard 라이트 버전

**컨셉**: v3와 동일 콘텐츠, 밝은 배경으로 색상 전환

| 항목 | 값 |
|------|------|
| 배경 | `#F8FAFC` (밝은 슬레이트) |
| 주 액센트 | `#0EA5E9` (스카이블루) |
| 제목 텍스트 | `#0F172A` |
| 본문 텍스트 | `#475569` |
| 보조 텍스트 | `#94A3B8` |
| 카드 스타일 | 화이트 + `box-shadow` + `#E2E8F0` 보더 |
| BI 로고 | `sam_bi_black.png` |

**v3 → v4 색상 변환 규칙**:

| 요소 | v3 (다크) | v4 (라이트) |
|------|-----------|------------|
| 배경 | `#0B1929` | `#F8FAFC` |
| 카드 | `#111D2E` 반투명 | `#FFFFFF` + shadow |
| 제목 | `#FFFFFF` | `#0F172A` |
| 본문 | `rgba(255,255,255,0.55)` | `#475569` |
| 보조 | `rgba(255,255,255,0.3)` | `#94A3B8` |
| 구분선 | `rgba(14,165,233,0.15)` | `#E2E8F0` |
| 기술 태그 | `rgba(255,255,255,0.03)` | `#F1F5F9` |
| 액센트 | 동일 유지 | 동일 유지 |

---

### 3.5 v5 — Premium Executive Gradient

**컨셉**: 고급 프리미엄 감성. 네이비→인디고 그래디언트 + 골드 액센트 + 글래스모피즘

| 항목 | 값 |
|------|------|
| 배경 | `#0F172A → #1E1B4B → #312E81` (175deg 그래디언트) |
| 주 액센트 | `#FBBF24` (골드/앰버) |
| 보조 액센트 | `#10B981`, `#8B5CF6`, `#EF4444`, `#F59E0B`, `#EC4899` |
| 카드 스타일 | 글래스모피즘 (`rgba(255,255,255,0.05)` + `rgba(255,255,255,0.1)` border) |
| BI 로고 | `sam_bi_white.png` |
| 뱃지 | "EXECUTIVE EDITION" 골드 뱃지 |

**앞면 구성**:
- 히어로: "대표님의 시간은 보고를 기다리는 데 쓰여선 안 됩니다."
- 잃어버린 시간 카드: 1~2일(매출), 반나절(수주), 30분(결재) — 빨간 톤
- 골드 전환 구분선: "SAM 도입 후"
- 대시보드 Mock: 골드 차트 라인, 글래스모피즘 카드
- 약속 박스: 골드 테두리

**뒷면 구성**:
- 7대 기능 리스트 (글래스모피즘 카드)
- 역할별 맞춤 화면: CEO(골드), 관리자(그린), 운영자(앰버), 영업자(퍼플)
- 가격표: 골드 강조
- 도입 프로세스: 골드 화살표 연결

**기술 특이사항**:
- body CSS gradient → PPTX 미지원 → Sharp로 PNG 사전 렌더링
- HTML body는 `#1A1640`(단색 fallback), convert 스크립트에서 `slide.background`로 그래디언트 PNG 덮어쓰기
- 구분선 gradient도 solid rgba로 변환 (PPTX 호환)

---

### 3.6 v6 — Corporate Blue & White

**컨셉**: 대기업/공공기관 프레젠테이션 스타일. 정돈된 블루 헤더 바 + 순백색 본문

| 항목 | 값 |
|------|------|
| 배경 | `#FFFFFF` (순백) |
| 헤더 바 | `#1E40AF` (로열 블루) |
| 주 액센트 | `#2563EB` (블루) |
| 보조 배경 | `#EFF6FF` (블루-50), `#DBEAFE` (블루-100) |
| 카드 스타일 | 화이트 + `#DBEAFE` 보더 |
| BI 로고 | `sam_bi_white.png` (헤더), `sam_bi_black.png` (본문) |

**특징**:
- 풀 폭 블루 헤더 바에 흰색 BI 로고 + 뱃지 배치
- 섹션 라벨은 블루-50 배경 + 로열블루 텍스트 뱃지
- 대시보드 Mock UI: `#DBEAFE` 보더 카드
- CTA: 블루 배경 풀 폭 바

---

### 3.7 v7 — Warm Gray + Teal

**컨셉**: IT/SaaS 기업 스타일. 따뜻한 그레이 배경 + 틸(Teal) 액센트

| 항목 | 값 |
|------|------|
| 배경 | `#FAFAF9` (웜 그레이) |
| 주 액센트 | `#0D9488` (틸) |
| 보조 액센트 | `#10B981`, `#8B5CF6`, `#EF4444`, `#F59E0B`, `#EC4899` |
| 카드 스타일 | 화이트 + `#E7E5E4` 보더 + 미세 그림자 |
| 구분선 | `#D6D3D1` |
| BI 로고 | `sam_bi_black.png` |

**특징**:
- 부드러운 웜 톤 배경으로 눈의 피로 감소
- 틸 계열 SVG 아이콘 전면 적용
- 가벼운 카드 스타일로 정보 구분
- 타임라인 인포그래픽: 시간대별 고민 (9AM/2PM/5PM)

---

### 3.8 v8 — Two-Tone Navy/White Split

**컨셉**: 금융/컨설팅 프레젠테이션 스타일. 다크 상단 + 화이트 하단 투톤 분할

| 항목 | 값 |
|------|------|
| 상단 배경 | `#1E293B` (슬레이트-800) |
| 하단 배경 | `#FFFFFF` (순백) |
| 주 액센트 | `#F97316` (오렌지) |
| 보조 액센트 | `#FB923C` (오렌지-400) |
| 카드 (다크) | `rgba(255,255,255,0.08)` + `rgba(255,255,255,0.12)` 보더 |
| 카드 (라이트) | 화이트 + `#E2E8F0` 보더 + 컬러 좌측 보더 |
| BI 로고 | `sam_bi_white.png` (다크), `sam_bi_black.png` (라이트) |

**특징**:
- 앞면 상단: 다크 존에 KPI 카드 + 히어로 메시지
- 앞면 하단: 화이트 존에 가치 카드 + 기능 그리드
- 기능 카드에 컬러 좌측 보더 포인트 (오렌지/그린/퍼플/레드)
- 다크 CTA 박스: 하단 풀 폭 다크 배경 + 오렌지 액센트

---

### 3.9 v9 — Minimal White + Indigo

**컨셉**: Apple/디자인 에이전시 스타일. 극도의 미니멀리즘 + 인디고 수직 액센트 라인

| 항목 | 값 |
|------|------|
| 배경 | `#FFFFFF` (순백) |
| 주 액센트 | `#6366F1` (인디고) |
| 카드 배경 | `#F8FAFC` (거의 투명한 그레이) |
| 카드 보더 | `#F1F5F9` |
| 본문 텍스트 | `#334155` (슬레이트-700) |
| 보조 텍스트 | `#94A3B8` |
| BI 로고 | `sam_bi_black.png` |

**특징**:
- 좌측 3pt 인디고 수직 액센트 라인 (풀 하이트)
- 타이포그래피 중심 레이아웃 (아이콘 최소화)
- 거의 보이지 않는 카드 구분 (barely-there cards)
- 기능은 텍스트 로우 형태 (인디고 불릿 도트만)
- 가격/프로세스도 텍스트 기반 미니멀 표현

---

## 4. 폴더 구조

```
docs/brochure/
├── README.md                          ← 이 파일
├── v1/
│   ├── slides/
│   │   ├── brochure-2page-front.html
│   │   ├── brochure-2page-back.html
│   │   └── brochure-1page.html
│   ├── convert-1page.cjs
│   ├── convert-2page.cjs
│   ├── sam-brochure-1page.pptx
│   └── sam-brochure-2page.pptx
├── v2/
│   ├── slides/
│   │   ├── brochure-dashboard-front.html
│   │   ├── brochure-dashboard-back.html
│   │   └── brochure-dashboard-1page.html
│   ├── convert-1page.cjs
│   ├── convert-2page.cjs
│   ├── sam-brochure-v2-dashboard-1page.pptx
│   └── sam-brochure-v2-dashboard-2page.pptx
├── v3/
│   ├── slides/
│   │   ├── brochure-dashboard-front.html
│   │   ├── brochure-dashboard-back.html
│   │   └── brochure-dashboard-1page.html
│   ├── convert-1page.cjs
│   ├── convert-2page.cjs
│   ├── sam-brochure-v3-dashboard-1page.pptx
│   └── sam-brochure-v3-dashboard-2page.pptx
├── v4/
│   ├── slides/
│   │   ├── brochure-dashboard-front.html
│   │   ├── brochure-dashboard-back.html
│   │   └── brochure-dashboard-1page.html
│   ├── convert-1page.cjs
│   ├── convert-2page.cjs
│   ├── sam-brochure-v4-dashboard-1page.pptx
│   └── sam-brochure-v4-dashboard-2page.pptx
├── v5/
│   ├── slides/
│   │   ├── brochure-dashboard-front.html
│   │   ├── brochure-dashboard-back.html
│   │   └── brochure-dashboard-1page.html
│   ├── convert-1page.cjs              ← Sharp 그래디언트 배경 생성 포함
│   ├── convert-2page.cjs              ← Sharp 그래디언트 배경 생성 포함
│   ├── sam-brochure-v5-dashboard-1page.pptx
│   └── sam-brochure-v5-dashboard-2page.pptx
├── v6/                                ← Corporate Blue & White
│   ├── slides/ (front, back, 1page)
│   ├── convert-1page.cjs
│   ├── convert-2page.cjs
│   ├── sam-brochure-v6-dashboard-1page.pptx
│   └── sam-brochure-v6-dashboard-2page.pptx
├── v7/                                ← Warm Gray + Teal
│   ├── slides/ (front, back, 1page)
│   ├── convert-1page.cjs
│   ├── convert-2page.cjs
│   ├── sam-brochure-v7-dashboard-1page.pptx
│   └── sam-brochure-v7-dashboard-2page.pptx
├── v8/                                ← Two-Tone Navy/White Split
│   ├── slides/ (front, back, 1page)
│   ├── convert-1page.cjs
│   ├── convert-2page.cjs
│   ├── sam-brochure-v8-dashboard-1page.pptx
│   └── sam-brochure-v8-dashboard-2page.pptx
└── v9/                                ← Minimal White + Indigo
    ├── slides/ (front, back, 1page)
    ├── convert-1page.cjs
    ├── convert-2page.cjs
    ├── sam-brochure-v9-dashboard-1page.pptx
    └── sam-brochure-v9-dashboard-2page.pptx
```

---

## 5. PPTX 변환 방법

```bash
# 각 버전 폴더에서 실행
cd docs/brochure/v5
node convert-1page.cjs    # 1페이지 통합본
node convert-2page.cjs    # 앞면+뒷면 2페이지
```

---

## 6. PPTX 변환 시 주의사항

### 6.1 텍스트 줄바꿈 방지

- 단일행 `<p>` 태그에 `white-space: nowrap` 필수
- `<br>` 멀티라인 `<p>`는 개별 `<p nowrap>` 태그로 분리
- `<span>` 포함 텍스트도 개별 `<p>` 처리 (PPTX 폰트 폭 차이 보정)

### 6.2 CSS gradient 미지원

- html2pptx.js는 CSS `linear-gradient`를 지원하지 않음
- body gradient → Sharp로 PNG 사전 렌더링 후 `slide.background`에 설정
- 구분선 gradient → solid `rgba()` 색상으로 변환

### 6.3 SVG 처리

- 인라인 SVG는 html2pptx가 자동으로 PNG 래스터화
- SVG 내부 fill 색상은 배경에 맞게 조정 필요

---

**최종 업데이트**: 2026-03-01 (v6~v9 추가)
