Files
sam-docs/sam/docs/rules/slides/usage-plan/slide-04.html
김보곤 23570d3ee9 docs: [vision] SAM AI 자동화 비전 문서 및 PPTX 슬라이드 추가
- docs/system/ai-automation-vision.md 장기 비전 기술문서 생성
- docs/rules/slides/usage-plan/ 7장 HTML 슬라이드 + PPTX 변환
- INDEX.md에 ai-automation-vision.md 등록
2026-03-02 13:25:26 +09:00

89 lines
7.8 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Pretendard', sans-serif; }
body { width: 960px; height: 540px; background: #f8fafc; overflow: hidden; position: relative; }
</style>
</head>
<body>
<div style="background: #0f172a; padding: 16px 40px;">
<p style="white-space: nowrap; font-size: 20px; font-weight: 700; color: #ffffff;">80% 공통화론 &mdash; 핵심 설득 논거</p>
<p style="white-space: nowrap; font-size: 11px; color: #94a3b8; margin-top: 4px;">중소 제조업 업무의 80%는 업종과 무관하게 동일하다</p>
</div>
<div style="padding: 14px 40px 0 40px;">
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 6px;">
<p style="white-space: nowrap; font-size: 10px; color: #64748b; width: 55px; text-align: right;">공통 업무</p>
<div style="flex: 1; display: flex;">
<div style="width: 80%; height: 24px; background: #10b981; border-radius: 6px; display: flex; align-items: center; padding: 0 10px;">
<p style="white-space: nowrap; font-size: 10px; font-weight: 700; color: #ffffff;">80% &mdash; 영업, 회계, 인사, 재고, 문서, 품질</p>
</div>
</div>
</div>
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 4px;">
<p style="white-space: nowrap; font-size: 10px; color: #64748b; width: 55px; text-align: right;">커스텀</p>
<div style="flex: 1; display: flex;">
<div style="width: 20%; height: 24px; background: #f59e0b; border-radius: 6px; display: flex; align-items: center; padding: 0 10px;">
<p style="white-space: nowrap; font-size: 10px; font-weight: 700; color: #ffffff;">20%</p>
</div>
</div>
</div>
<p style="white-space: nowrap; font-size: 8px; color: #94a3b8; margin-left: 65px;">커스텀 20% = 상품 마스터, 견적 계산식, 공정 시퀀스</p>
</div>
<div style="padding: 10px 40px 0 40px;">
<p style="white-space: nowrap; font-size: 11px; font-weight: 600; color: #334155; margin-bottom: 6px;">업종별 확장 시나리오</p>
<div style="border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden;">
<div style="display: flex; background: #1e293b;">
<div style="width: 90px; padding: 6px 10px;"><p style="white-space: nowrap; font-size: 9px; font-weight: 600; color: #ffffff;">업종</p></div>
<div style="flex: 1; padding: 6px 10px;"><p style="white-space: nowrap; font-size: 9px; font-weight: 600; color: #ffffff;">공통 (80%)</p></div>
<div style="flex: 1; padding: 6px 10px;"><p style="white-space: nowrap; font-size: 9px; font-weight: 600; color: #ffffff;">커스텀 (20%)</p></div>
<div style="width: 80px; padding: 6px 10px; text-align: center;"><p style="white-space: nowrap; font-size: 9px; font-weight: 600; color: #ffffff;">난이도</p></div>
</div>
<div style="display: flex; border-bottom: 1px solid #f1f5f9;">
<div style="width: 90px; padding: 5px 10px;"><p style="white-space: nowrap; font-size: 9px; font-weight: 600; color: #334155;">방화셔터</p></div>
<div style="flex: 1; padding: 5px 10px;"><p style="white-space: nowrap; font-size: 9px; color: #64748b;">영업, 견적, 수주, 회계, 인사</p></div>
<div style="flex: 1; padding: 5px 10px;"><p style="white-space: nowrap; font-size: 9px; color: #64748b;">셔터 규격 계산, 설치 공정</p></div>
<div style="width: 80px; padding: 5px 10px; text-align: center;"><div style="background: #dcfce7; border-radius: 10px; padding: 1px 6px; display: inline-block;"><p style="white-space: nowrap; font-size: 8px; font-weight: 600; color: #059669;">실증완료</p></div></div>
</div>
<div style="display: flex; background: #f8fafc; border-bottom: 1px solid #f1f5f9;">
<div style="width: 90px; padding: 5px 10px;"><p style="white-space: nowrap; font-size: 9px; font-weight: 600; color: #334155;">블라인드</p></div>
<div style="flex: 1; padding: 5px 10px;"><p style="white-space: nowrap; font-size: 9px; color: #64748b;">영업, 견적, 수주, 회계, 인사</p></div>
<div style="flex: 1; padding: 5px 10px;"><p style="white-space: nowrap; font-size: 9px; color: #64748b;">원단/슬랫 규격, 재단 공정</p></div>
<div style="width: 80px; padding: 5px 10px; text-align: center;"><div style="background: #dcfce7; border-radius: 10px; padding: 1px 6px; display: inline-block;"><p style="white-space: nowrap; font-size: 8px; font-weight: 600; color: #059669;">즉시가능</p></div></div>
</div>
<div style="display: flex; border-bottom: 1px solid #f1f5f9;">
<div style="width: 90px; padding: 5px 10px;"><p style="white-space: nowrap; font-size: 9px; font-weight: 600; color: #334155;">금속가공</p></div>
<div style="flex: 1; padding: 5px 10px;"><p style="white-space: nowrap; font-size: 9px; color: #64748b;">영업, 견적, 수주, 회계, 인사</p></div>
<div style="flex: 1; padding: 5px 10px;"><p style="white-space: nowrap; font-size: 9px; color: #64748b;">소재/두께 단가표, CNC 공정</p></div>
<div style="width: 80px; padding: 5px 10px; text-align: center;"><div style="background: #dbeafe; border-radius: 10px; padding: 1px 6px; display: inline-block;"><p style="white-space: nowrap; font-size: 8px; font-weight: 600; color: #2563eb;">단기적용</p></div></div>
</div>
<div style="display: flex; background: #f8fafc; border-bottom: 1px solid #f1f5f9;">
<div style="width: 90px; padding: 5px 10px;"><p style="white-space: nowrap; font-size: 9px; font-weight: 600; color: #334155;">식품제조</p></div>
<div style="flex: 1; padding: 5px 10px;"><p style="white-space: nowrap; font-size: 9px; color: #64748b;">영업, 견적, 수주, 회계, 인사</p></div>
<div style="flex: 1; padding: 5px 10px;"><p style="white-space: nowrap; font-size: 9px; color: #64748b;">레시피 관리, HACCP, 유통기한</p></div>
<div style="width: 80px; padding: 5px 10px; text-align: center;"><div style="background: #fef3c7; border-radius: 10px; padding: 1px 6px; display: inline-block;"><p style="white-space: nowrap; font-size: 8px; font-weight: 600; color: #d97706;">중기적용</p></div></div>
</div>
<div style="display: flex;">
<div style="width: 90px; padding: 5px 10px;"><p style="white-space: nowrap; font-size: 9px; font-weight: 600; color: #334155;">전자부품</p></div>
<div style="flex: 1; padding: 5px 10px;"><p style="white-space: nowrap; font-size: 9px; color: #64748b;">영업, 견적, 수주, 회계, 인사</p></div>
<div style="flex: 1; padding: 5px 10px;"><p style="white-space: nowrap; font-size: 9px; color: #64748b;">PCB BOM, SMT 공정, 검사</p></div>
<div style="width: 80px; padding: 5px 10px; text-align: center;"><div style="background: #fef3c7; border-radius: 10px; padding: 1px 6px; display: inline-block;"><p style="white-space: nowrap; font-size: 8px; font-weight: 600; color: #d97706;">중기적용</p></div></div>
</div>
</div>
<div style="margin-top: 10px; border-left: 3px solid #6366f1; padding: 8px 12px; background: #f5f3ff; border-radius: 0 8px 8px 0;">
<p style="font-size: 11px; color: #4338ca; font-style: italic;">"상품만 바꾸면 새로운 제조업이 된다. 영업, 회계, 인사, 재고 &mdash; 이 80%는 이미 완성되어 있다."</p>
</div>
</div>
<div style="position: absolute; bottom: 12px; left: 40px; right: 40px; display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 9px; color: #94a3b8;">SAM 활용방안 | (주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 9px; color: #94a3b8;">4 / 7</p>
</div>
</body>
</html>