8e70987e42
- (주)코드브릿지엑스 → SAM - www.codebridge-x.com → www.sam.co.kr - contact@codebridge-x.com → contact@sam.co.kr - 푸터 문구 SAM — Smart Automation Management 통일
371 lines
14 KiB
Markdown
371 lines
14 KiB
Markdown
# 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 추가)
|