Files

김보곤 8e70987e42 docs: [brochure] v1~v9 브로슈어 SAM BI 브랜딩 통일

- (주)코드브릿지엑스 → SAM
- www.codebridge-x.com → www.sam.co.kr
- contact@codebridge-x.com → contact@sam.co.kr
- 푸터 문구 SAM — Smart Automation Management 통일

2026-03-03 18:58:37 +09:00

14 KiB

Raw Blame History

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, 개별  분리)

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 변환 방법

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

6. PPTX 변환 시 주의사항

6.1 텍스트 줄바꿈 방지

단일행  태그에 white-space: nowrap 필수
  멀티라인 는 개별  태그로 분리
 포함 텍스트도 개별  처리 (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 추가)

14 KiB Raw Blame History

SAM 브로셔 버전 관리

1. 개요

2. 버전 요약

3. 버전별 상세

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

3.2 v2 — CEO Dashboard 초판

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

3.4 v4 — CEO Dashboard 라이트 버전

3.5 v5 — Premium Executive Gradient

3.6 v6 — Corporate Blue & White

3.7 v7 — Warm Gray + Teal

3.8 v8 — Two-Tone Navy/White Split

3.9 v9 — Minimal White + Indigo

4. 폴더 구조

5. PPTX 변환 방법

6. PPTX 변환 시 주의사항

6.1 텍스트 줄바꿈 방지

6.2 CSS gradient 미지원

6.3 SVG 처리

14 KiB

Raw Blame History