docs: [brochure] v1~v5 버전별 디자인 컨셉 README 문서화
- 버전별 컬러 팔레트, 디자인 컨셉, 콘텐츠 구성 정리 - 폴더 구조 및 PPTX 변환 주의사항 포함
This commit is contained in:
김보곤
255
sam/docs/brochure/README.md
Normal file
255
sam/docs/brochure/README.md
Normal file
@@ -0,0 +1,255 @@
|
||||
# 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` (골드) | 글래스모피즘 + 골드 |
|
||||
|
||||
---
|
||||
|
||||
## 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 호환)
|
||||
|
||||
---
|
||||
|
||||
## 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
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 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
|
||||
Reference in New Issue
Block a user