# Design Notes — 소통파이브 세일즈키트 · Full Version

> 작성일: 2026.04.06 (Full Rollout 반영)
> 버전: **Full Version** — 실제 배포 가능한 풀버전 세일즈키트
> 이전 버전: Mockup v1 (샘플 2종 시안) → Full Version (전체 완성본)
> 다음 단계: **Polish v2** — 실 캡처·연락처 실값·Figma handoff / PDF export
> 목적: 디자인팀/Figma/PDF 제작 핸드오프를 위한 디자인 방향 정리

### 버전 로드맵
| 버전 | 범위 | 상태 |
|-----|-----|-----|
| Mockup v1 | 5종 HTML 시안 (코어 2종 샘플, AX 2종 샘플, 가이드 2p) | ✅ 완료 (폐기) |
| **Full Version** | **9종 HTML 완성본 — 코어 4종, AX 8종, 가이드 4p, 메뉴판 확장본 10p, 디자인·영상 신규** | **✅ 완료** |
| **Design Rollback** | **emoji→SVG 통일, 05 클린리빌드, visual master 문서화** | **✅ 현재** |
| Polish v2 | P5 실 캡처, 연락처 실값, 전체 타이포·간격 미세조정 | 🔜 다음 |
| Figma 전환 | 컴포넌트 라이브러리화, Auto Layout 적용, PDF Export | 📋 예정 |

### 파일 목록 (총 9개 + styles.css)
| 파일 | 유형 | 페이지 | 전달 대상 | 비고 |
|------|------|--------|----------|------|
| 01_menu_mockup.html | 외부배포용 메뉴판 | 6p | 고객 | P6 고객관점 CTA, SVG line icon |
| 02_core_template_mockup.html | 코어 서비스 1-Pager | 4 sheets | 고객 | emoji→SVG 롤백 완료, #1~#4 전종 완성 |
| 03_ax_template_mockup.html | AX 솔루션 1-Pager | 8 sheets | 고객 | emoji→SVG 롤백 완료, #1~#8 전종 완성, Proof Box 포함 |
| 04_internal_guide_mockup.html | 내부 영업가이드 | 4p | 내부 | P3 예산표·Handoff, P4 FAQ·프로세스 |
| 05_integrated_catalog_mockup.html | 업무 메뉴판 확장본 | 10p | 고객 | 메뉴판 5p + 코어 4p + 빠른 검토 안내 1p 병합본 |
| 05_integrated_catalog_partner_alt.html | 파트너 대체 마지막 페이지 | 1p | 파트너 | 05 P10 교체용 |
| 06_design_content_mockup.html | 디자인·영상·콘텐츠 | 2p | 고객 | emoji→SVG 롤백 완료, 6종 서비스 + 수상이력 + BA |
| index.html | 자산 허브 (내비게이션) | — | 내부 | 전체 자산 구조 + 파이프라인 |
| styles.css | 공유 CSS 디자인 시스템 | — | — | ~1000 lines 토큰+컴포넌트 |
| design_notes.md | 디자인 노트 (본 문서) | — | — | Visual Master 문서화 완료 |

---

## 1. 디자인 방향 요약

| 항목 | 내용 |
|-----|-----|
| 콘셉트 | B2G(공공기관 대상) 카탈로그 — 신뢰감·정돈감·공공친화 |
| 포맷 | A4 세로 (210 × 297mm), 페이지별 독립 시안 |
| 톤 | 절제된 전문성. 과장 없음, 스타트업 감성 배제 |
| 키워드 | 공공친화 / 신뢰감 / 정돈감 |

---

## 1-1. Visual Master (시각 기준본)

> **Visual Master = 01_menu_mockup.html + styles.css**
>
> 이 두 파일이 전체 세일즈키트의 시각적 기준입니다.
> 모든 다른 파일(02~06, index)은 이 기준 안에서 확장합니다.

### 시각 기준 원칙
| 원칙 | 설명 |
|-----|-----|
| 아이콘 시스템 | SVG stroke-only line icon (Lucide 스타일), 28×28 viewBox, stroke-width 2, 48×48 컬러 `.card-icon` 박스 |
| 아이콘 컬러 | 서비스별 고유 단색 배경 — 그라디언트 금지 |
| 이모지 금지 | 서비스 아이콘에 이모지 사용 금지 (P5 강점 이모지는 승인됨) |
| 타이포그래피 | styles.css 토큰 사용 (--fs-h1, --fs-body 등) |
| 여백·간격 | styles.css 변수 사용 (--page-px, --r-md 등) |
| 카드 시스템 | styles.css의 .service-card, .inst-card 등 공용 컴포넌트 |
| 컬러 위계 | A(구축/navy-800) > C(유지보수/navy-50) > B(AX/gray-50) > D(디자인/white) |

### 파일별 관계
| 파일 | Visual Master 대비 관계 |
|-----|-----|
| 01_menu | **Visual Master** — 모든 파일의 시각 기준 |
| styles.css | **Visual Master** — 디자인 토큰·컴포넌트 정의 |
| 02_core | 01_menu P2 아이콘 스타일 계승, onepager-header는 자체 패턴 |
| 03_ax | 01_menu P2 아이콘 + ax-header 자체 패턴, gray-50 톤 |
| 05_catalog | P1-P5 = 01_menu 클론, P6-P9 = 02_core 병합, P10 = 01_menu CTA 클론 |
| 06_design | 01_menu P2 카드 시스템 계승, 개별 서비스 컬러 적용 |
| index | 내부 허브, 01_menu 스타일 유지 |

---

## 2. 컬러 시스템

### Primary Palette — Deep Navy
| Token | Hex | 용도 |
|-------|-----|-----|
| --navy-900 | #0F172A | 커버 배경, 가장 진한 텍스트 |
| --navy-800 | #1B2A4A | 섹션바, 테이블 헤더, cascade A |
| --navy-700 | #1E3A5F | 제목 보조, 강조 텍스트 |
| --navy-600 | #234E7A | 헤더 그라디언트 중간값 |
| --navy-500 | #2563EB | 넘버링, 버튼, 액센트(제한적) |
| --navy-100 | #DBEAFE | 연결선, 배경 보조 |
| --navy-50  | #EFF6FF | 카드 배경, 하이라이트 영역 |

### Neutral — Cool Gray
| Token | Hex | 용도 |
|-------|-----|-----|
| --gray-900~700 | #111827~#374151 | 본문 텍스트 |
| --gray-600~500 | #4B5563~#6B7280 | 서브 텍스트, 설명 |
| --gray-400~300 | #9CA3AF~#D1D5DB | 디스에이블, 보더 |
| --gray-200~100 | #E5E7EB~#F3F4F6 | 카드 보더, 배경 |
| --gray-50 | #F9FAFB | 카드/섹션 배경 |

### Accent — Teal (제한적 사용)
| Token | Hex | 용도 |
|-------|-----|-----|
| --teal-600 | #0D9488 | 브랜드 도트, 강조 포인트 |
| --teal-100/50 | #CCFBF1/#F0FDFA | handoff-step 배경 |

### Semantic Colors
| 역할 | 배경 | 보더 | 텍스트 |
|-----|------|------|------|
| Proof Box | #FFFBEB | #F59E0B | #92400E |
| CTA | #F0FDF4 | #22C55E | #166534 |
| Red Flag | #FEF2F2 | #EF4444 | #991B1B |
| Green Flag | #F0FDF4 | #22C55E | #166534 |
| Stage (실운영) | #DCFCE7 | — | #166534 |
| Stage (실증/PoC) | #DBEAFE | — | #1E40AF |
| Stage (기획/제안) | #FEF3C7 | — | #92400E |

---

## 3. 타이포그래피

| Scale | Size | Weight | 용도 |
|-------|------|--------|-----|
| Hero | 42px | 700 | 커버 타이틀 |
| H1 | 28px | 700 | 섹션 타이틀 |
| H2 | 20px | 700 | 블록 타이틀 |
| H3 | 16px | 700 | 카드/항목 제목 |
| Body | 14px | 400~600 | 본문 |
| Small | 12px | 400~600 | 테이블, 설명 |
| Micro | 11px | 500~600 | 레이블, 태그 |

- 폰트: Pretendard → 맑은 고딕 fallback
- line-height: tight(1.3) / normal(1.6) / loose(1.8)

---

## 3-1. 자산 전달 순서 (Sales Delivery Pipeline)

| 단계 | 자산 | 파일 | 목적 | 전달 시점 |
|-----|------|------|------|----------|
| 1차 | 외부배포용 메뉴판 (6p) | 01_menu_mockup | 서비스 전체 조감, 첫인상 | 초면 · 첫 미팅 전 |
| **1.5차** | **업무 메뉴판 확장본 (10p)** | **05_integrated_catalog_mockup** | **메뉴판 5p + 코어 4p + CTA 1p 병합본** | **관심 확인 후, 구체 협의 전** |
| 2차 | 코어 서비스 1-Pager (4종) | 02_core_template_mockup | 개별 서비스 심층 시트 | 필요 범위 특정 후 맞춤 전달 |
| 3차 | AX 솔루션 1-Pager (8종) | 03_ax_template_mockup | AI 업무 자동화 후속 고도화 | 기본 구축 확정 후 제안 |
| 보조 | 디자인·영상·콘텐츠 (2p) | 06_design_content_mockup | 디자인·영상 관심 고객용 | 관련 수요 확인 시 |

> **운용 원칙:** 1차로 시작 → 관심 확인되면 1.5차 전달 → 필요 범위가 구체적이면 2차 개별 시트 → 구축 확정 후 3차 AX 추가 제안. 디자인·영상은 별도 수요 확인 시 보조 전달. 내부 영업가이드(04)에도 이 순서를 반영.

### 고객용 vs 파트너용 분리 원칙
- **모든 외부 배포 문서의 마지막 페이지는 고객 관점 CTA** ("빠른 검토를 위한 안내")
- 파트너·소개자 전달 시에는 05_integrated_catalog_partner_alt.html의 마지막 페이지를 교체하여 사용
- 고객 문서에 "관심 고객이 생기면 이렇게 연결해 주세요" 같은 파트너 문구를 절대 넣지 않음

---

## 4. 문서별 디자인 규칙

### A. 메뉴판 (01_menu_mockup)
- 6페이지 구성: 커버 → 서비스 카드 → 캐스케이드 → 기관유형 → 강점/레퍼런스 → 고객 안내
- P1 커버: 풀블리드 다크 네이비 그라디언트, 중앙 정렬, 하단 인증 배지 스트립
- P2: SVG line icon (Lucide 스타일) 적용 — 이모지 아님
- P6 타이틀: "빠른 검토를 위한 안내" (고객 관점)
- P6 프로세스: 고객 시점 ("알려주시면 → 검토해서 → 맞춤 안내")
- 정보 위계 시각화: cascade-step에서 A(구축) navy-800 → C(유지보수) navy-50 → B(AX) gray-50 → D(디자인) white

### B. 코어 서비스 1-Pager (02_core_template)
- **4종 완성:** #1 홈페이지 구축/리뉴얼, #2 관리자 CMS/백오피스, #3 예약·대관·접수·설문, #4 유지보수·운영·고도화
- 상단 네이비 그라디언트 헤더 (onepager-header)
- 타겟 칩 → 페인포인트 → 핵심기능 → Before/After → 구축범위 → 참조 레퍼런스 → CTA
- 구축(A)이 AX보다 시각적으로 더 크고 진하게
- #3은 18종 자체모듈 그리드 포함

### C. AX 솔루션 1-Pager (03_ax_template)
- **8종 완성:** NomuFlow, CareComplianceFlow, CareGraph HealthOps, ForestWorks, HobbyStock Intelligence, TourPublic Flow, TypeBridge AI, VoiceOps AX
- 상단 라이트 그레이 헤더 (ax-header) — 코어보다 한 톤 가볍게
- 공감 질문 블록(ax-empathy) 포함
- Proof Box 반드시 포함 (현재 단계·근거·레퍼런스 명시)
- 현재 단계 컬러 코딩: 실운영(green) / 실증·PoC(blue) / 기획·제안(amber)
- CTA는 코어와 동일 포맷

### D. 내부 영업가이드 (04_internal_guide)
- **4페이지 완성:**
  - P1: 소개 멘트, 잘하는 것/안 맞는 것
  - P2: 대화 시나리오 4종, Red/Green Flag
  - P3: 예산 구간 참고표 (7종), Handoff Checklist (7항목), 자료 전달 규칙
  - P4: 내부 연결 프로세스 flow, FAQ 8항목, 영업자료 세트 목록
- 상단 'INTERNAL ONLY' 배지 + 가이드 헤더바
- section-pill 로 섹션 구분
- 대화 시나리오: scenario 카드 (영업/고객 색 구분)
- Red/Green Flag: 좌우 2열 패널
- handoff-flow: pill형 단계 + 화살표
- 전체적으로 실용적·교육적 톤

### E. 업무 메뉴판 확장본 (05_integrated_catalog)
- **정의:** 01_menu(메뉴판 5p) + 02_core(코어서비스 4p) + 01_menu CTA(1p) = **10페이지 순차 병합본**
- **새로 기획한 문서가 아님** — 기존 두 파일을 그대로 합친 확장본
- **10페이지 구성 (고객용):**
  - P1 커버 → P2 서비스 카드 → P3 캐스케이드 → P4 기관유형 → P5 강점/레퍼런스
  - P6~P9 코어 서비스 4종 (02_core 그대로, P6 상단에 섹션 리본: "개별 서비스 소개 | 코어서비스 4종")
  - P10 빠른 검토를 위한 안내 (01_menu P6 CTA 그대로)
- **페이지 번호 체계:** P1~P5(메뉴판) → P6~P9(코어, 푸터에 "코어서비스 #N" 보조 라벨) → P10(CTA)
- **AX·디자인은 별도 자산:** 03_ax, 06_design으로 독립 전달 (05에 포함하지 않음)
- **잠금 항목:** 메뉴판과 동일 (L1~L4 전부 적용)
- **전달 시점:** 1차 메뉴판 이후, 관심이 확인된 잠재 고객에게 "메뉴판 + 코어 상세를 한 권으로" 목적으로 전달

### E-alt. 파트너 대체 마지막 페이지 (05_partner_alt)
- 05 업무 메뉴판 확장본 P10의 파트너용 교체 버전
- 타이틀: "관심 고객이 생기면 이렇게 연결해 주세요"
- 파트너 관점 5단계 프로세스 + 동일 4개 질문 + 연락처(placeholder)
- 고객 배포 문서에는 절대 포함하지 않음 — 파트너 전달 시에만 교체

### F. 디자인·영상·콘텐츠 (06_design_content)
- **신규 2페이지 단독 브로셔:**
  - P1: 헤더(navy-600 그라디언트, 코어보다 한 톤 밝음) + 6종 서비스 그리드 + "함께 의뢰" 시나리오 + BA
  - P2: 수상이력 배지 + 고객 CTA + 연락처
- D 서비스는 실질 서비스로 표현 — "보조 서비스"가 아님
- 6종: 브랜드 디자인, 홍보 영상, SNS 콘텐츠 팩, 캠페인 페이지, BI·CI·가이드라인, 인포그래픽·카드뉴스

---

## 5. 공통 컴포넌트

| 컴포넌트 | 클래스 | 사용처 |
|---------|-------|------|
| 서비스 카드 | .service-card | 메뉴판 P2 |
| SVG Line Icon | .card-icon > svg | 메뉴판 P2 (Lucide 스타일) |
| 캐스케이드 | .cascade-step--a/c/b/d | 메뉴판 P3 |
| 기관유형 카드 | .inst-card | 메뉴판 P4 |
| 강점 행 | .strength-row | 메뉴판 P5 |
| 레퍼런스 카드 | .ref-card | 메뉴판 P5 |
| 프로세스 스텝 | .process-step | 메뉴판 P6, 확장본 P10 |
| 질문 박스 | .question-box | 메뉴판 P6, 확장본 P10 |
| 연락처 카드 | .contact-card | 메뉴판 P6, 확장본 P10 |
| 기능 행 | .feature-row | 코어 1-pager |
| 페인 리스트 | .pain-list | 코어/AX 공통 |
| Before/After | .ba-block | 코어/AX/디자인 공통 |
| Proof Box | .proof-box | AX 1-pager |
| CTA 푸터 | .cta-footer | 코어/AX/디자인 공통 |
| 데이터 테이블 | .data-table | 코어 유지보수 |
| 예산 테이블 | (table in P3) | 내부가이드 P3 |
| FAQ | .faq-item | 내부가이드 P4 |
| 체크리스트 | .checklist | 내부가이드 P3 |
| Flag 항목 | .flag-item--red/green | 내부가이드 P2 |
| 화법 블록 | .speech-bubble | 내부가이드 P1~P2 |
| 핸드오프 흐름 | .handoff-flow | 내부가이드 P3~P4 |
| 배지 스트립 | .badge-strip | 커버 |
| Running Header | .running-header | 메뉴판 확장본 (미사용, 10p 병합본에서 제거됨) |
| 코어 헤더 (통합) | .core-header | 메뉴판 확장본 P6~P9 |
| 압축 기능 그리드 | .cfeat-grid / .cfeat-item | 메뉴판 확장본 P6~P9 |
| 압축 페인리스트 | .cpain-list | 메뉴판 확장본 P6~P9 |
| 압축 BA | .cba | 메뉴판 확장본 P6~P9 |
| 인라인 레퍼런스 | .cref-list / .cref-tag | 메뉴판 확장본 P6~P9 |
| 미니 CTA | .mini-cta | 메뉴판 확장본 P6~P9 |
| 스코프 힌트 | .scope-hint | 메뉴판 확장본 P6~P9 |
| 인라인 노트 | .inline-note | 메뉴판 확장본 P6~P7 |
| AX 개요 카드 | .ax-overview-card | (미사용, 10p 병합본에서 제거됨) |
| 단계 태그 | .stage-tag (green/blue/amber) | AX Proof Box |
| 디자인 서비스 카드 | .design-service-card | 디자인 06 |
| 수상이력 배지 | .award-badge | 디자인 06 |
| 함께 의뢰 블록 | .combo-block | 디자인 06 |

---

## 6. 정보 위계 원칙

> A(웹·앱·시스템 구축) > C(유지보수) > B(AX 솔루션) > D(디자인·영상)

- 면적: A 최대 → D 최소
- 색감: A = navy-800 (진) → D = white/gray-200 (옅)
- 타이포: A = H2~H3 급 → D = Small 급
- 캐스케이드에서 A→C→B→D 순 들여쓰기로 시각 위계 표현
- 디자인·영상(D)은 "보조 서비스"가 아닌 "실질 서비스"로 표현하되, 시각 위계상 D 포지션 유지

---

## 7. 잠금 항목 (Lock Items) — 전체 HTML 기준

### 🔒 L1. P5 레퍼런스 6건 (01_menu, 05_catalog 공통)
| # | 기관명 | 설명 |
|---|------|-----|
| 1 | 경북대학교 산학협력단 | 대학 행정 시스템 |
| 2 | 대구디지털혁신진흥원 | 공공 플랫폼 구축 |
| 3 | 스포츠윤리센터 | 신고·접수 시스템 |
| 4 | (재)경주문화재단 | 문화시설 예약 플랫폼 |
| 5 | (재)경상북도문화관광공사 | 관광 콘텐츠 시스템 |
| 6 | 파워풀대구페스티벌 | 축제 통합 관리 |

### 🔒 L2. 질문 4개 (01_menu P6, 05_catalog P10, partner_alt 공통)
| # | 질문 전문 |
|---|---------|
| Q1 | 어느 기관/부서인가요? |
| Q2 | 지금 필요한 게 홈페이지 / 시스템 / 유지보수 중 무엇인가요? |
| Q3 | 올해 검토인가요, 내년 계획인가요? |
| Q4 | 수의 / 비교견적 / 입찰 중 어떤 방향인가요? 예산은 대략 잡혀 있나요? |

### 🔒 L3. TourPublic Flow 현재 단계 (03_ax, 05_catalog P11 공통)
> **② 실증 진행 / PoC 가능** (자체 모듈: 시설대관·결제·정산 기반, 통합 플랫폼은 PoC 단계)

### 🔒 L4. 금지 표현
| 표현 | 상태 | 비고 |
|-----|------|-----|
| "최소 1천만원" | ❌ 사용 금지 | 전 문서 적용 확인 완료 (Full Version grep 검증) |
| "웹 에이전시" | ❌ 사용 금지 | 전 문서 적용 확인 완료 (Full Version grep 검증) |

---

## 8. v2 Polish 로드맵 (Figma handoff / PDF export 전)

### 8-1. P5 레퍼런스 카드 고도화
- **현재:** `.ref-placeholder` (회색 60px 박스 + "캡처" 텍스트)
- **v2 방향:** 실제 사이트 썸네일 캡처 (200×120px, border-radius 4px) 또는 기관 유형별 시각 카드
- **교체 시점:** 최종 PDF 렌더 직전, 실 캡처 또는 시안 승인 후

### 8-2. P2 서비스 카드 아이콘
- **메뉴판(01):** SVG line icon 적용 완료 (Lucide 스타일, Full Version에서 교체)
- **카탈로그(05):** 동일 SVG line icon 적용 필요 (v2에서)
- **v2 잔여:** 아이콘 세트 통일성 검토 + 필요 시 외부 아이콘 라이브러리 정식 도입

### 8-3. 연락처 실값 입력
- **현재:** `data-placeholder` 속성으로 마킹 (01_menu, 05_catalog, 05_partner_alt, 06_design)
- **필요 정보:**
  | 항목 | placeholder | 확정값 (대기) |
  |-----|-----------|-------------|
  | 전화 | `[전화번호 확정 후 입력]` | 소철환 이사 직통 or 대표번호 |
  | 이메일 | `[이메일 확정 후 입력]` | sotongdvl@gmail.com or 별도 |
  | 카톡 | `[카톡ID 또는 QR 확정 후 입력]` | 카카오톡 채널 or 개인 ID |
- **교체 시점:** 이사님 확정 후 즉시 반영 (v2 polish 단계)

---

## 9. 셀프 체크 결과 — Full Version 기준

| # | 기준 | 판정 |
|---|-----|------|
| 1 | 더 이상 "샘플 2종 시안"처럼 보이지 않는가? | ✅ 코어 4종·AX 8종·가이드 4p·확장본 10p·디자인 2p 전부 완성 |
| 2 | 코어서비스 4종이 전부 실제 완성본으로 보이는가? | ✅ #1~#4 각각 독립 1-pager, 타겟·페인·기능·BA·범위·레퍼런스 전수 수록 |
| 3 | AX 8종이 전부 독립 배포 가능한 수준인가? | ✅ #1~#8 각각 Proof Box 포함, 현재 단계·레퍼런스 명시, 컬러 코딩 |
| 4 | 디자인·영상·콘텐츠가 이제는 실제 서비스처럼 보이는가? | ✅ 06_design 단독 브로셔 + 카탈로그 P10에 독립 페이지 수록 |
| 5 | 고객용 문서 마지막 페이지가 더 이상 파트너용처럼 보이지 않는가? | ✅ 전 문서 "빠른 검토를 위한 안내" CTA, partner_alt 별도 파일 분리 |
| 6 | 업무 메뉴판 확장본이 메뉴판과 개별 1-pager 사이의 1.5차 자료 역할을 제대로 하는가? | ✅ 10p = 메뉴판(5p)+코어(4p)+CTA(1p) 병합본 |
| 7 | 전체 세트가 "입문 → 확장 → 상세 → 고도화" 구조로 자연스럽게 운용 가능한가? | ✅ 1차→1.5차→2차→3차+보조 파이프라인 index.html에 시각화 |

### 9-1. 잠금 항목 검증 (grep 기반)
| 항목 | 검증 방법 | 결과 |
|-----|----------|------|
| L4 금지표현 "웹 에이전시" | grep 전체 HTML | ✅ 0건 |
| L4 금지표현 "최소 1천만원" | grep 전체 HTML | ✅ 0건 |
| L1 레퍼런스 6건 | 01_menu, 05_catalog 확인 | ✅ 동일 6건 유지 |
| L2 질문 4개 | 01_menu, 05_catalog, partner_alt 확인 | ✅ 동일 4개 유지 |
| L3 TourPublic 단계 | 03_ax, 05_catalog 확인 | ✅ 원문 그대로 유지 |