Files
sam-docs/sam/docs/rules/slides/usage-plan/slide-03.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

109 lines
10 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;">전체 프로세스 &mdash; 영업에서 출고까지</p>
<p style="white-space: nowrap; font-size: 11px; color: #94a3b8; margin-top: 4px;">6단계 비즈니스 플로우와 AI 자동화 포인트</p>
</div>
<div style="display: flex; align-items: center; padding: 16px 24px 8px 24px; gap: 4px;">
<div style="flex: 1; text-align: center; background: #6366f1; border-radius: 10px; padding: 12px 4px;">
<p style="white-space: nowrap; font-size: 20px; font-weight: 800; color: #ffffff;">01</p>
<p style="white-space: nowrap; font-size: 13px; font-weight: 700; color: #ffffff; margin-top: 2px;">영업</p>
<p style="white-space: nowrap; font-size: 8px; color: #e0e7ff; margin-top: 2px;">고객 DB 자동분류</p>
</div>
<p style="white-space: nowrap; font-size: 16px; color: #6366f1; font-weight: 700;">&rarr;</p>
<div style="flex: 1; text-align: center; background: #8b5cf6; border-radius: 10px; padding: 12px 4px;">
<p style="white-space: nowrap; font-size: 20px; font-weight: 800; color: #ffffff;">02</p>
<p style="white-space: nowrap; font-size: 13px; font-weight: 700; color: #ffffff; margin-top: 2px;">상담</p>
<p style="white-space: nowrap; font-size: 8px; color: #ede9fe; margin-top: 2px;">STT 음성 기록</p>
</div>
<p style="white-space: nowrap; font-size: 16px; color: #8b5cf6; font-weight: 700;">&rarr;</p>
<div style="flex: 1; text-align: center; background: #a855f7; border-radius: 10px; padding: 12px 4px;">
<p style="white-space: nowrap; font-size: 20px; font-weight: 800; color: #ffffff;">03</p>
<p style="white-space: nowrap; font-size: 13px; font-weight: 700; color: #ffffff; margin-top: 2px;">견적서</p>
<p style="white-space: nowrap; font-size: 8px; color: #f3e8ff; margin-top: 2px;">AI 자동 산출</p>
</div>
<p style="white-space: nowrap; font-size: 16px; color: #a855f7; font-weight: 700;">&rarr;</p>
<div style="flex: 1; text-align: center; background: #0ea5e9; border-radius: 10px; padding: 12px 4px;">
<p style="white-space: nowrap; font-size: 20px; font-weight: 800; color: #ffffff;">04</p>
<p style="white-space: nowrap; font-size: 13px; font-weight: 700; color: #ffffff; margin-top: 2px;">수주서</p>
<p style="white-space: nowrap; font-size: 8px; color: #e0f2fe; margin-top: 2px;">자동 전환</p>
</div>
<p style="white-space: nowrap; font-size: 16px; color: #0ea5e9; font-weight: 700;">&rarr;</p>
<div style="flex: 1; text-align: center; background: #059669; border-radius: 10px; padding: 12px 4px;">
<p style="white-space: nowrap; font-size: 20px; font-weight: 800; color: #ffffff;">05</p>
<p style="white-space: nowrap; font-size: 13px; font-weight: 700; color: #ffffff; margin-top: 2px;">작업공정</p>
<p style="white-space: nowrap; font-size: 8px; color: #d1fae5; margin-top: 2px;">AI 공정 최적화</p>
</div>
<p style="white-space: nowrap; font-size: 16px; color: #059669; font-weight: 700;">&rarr;</p>
<div style="flex: 1; text-align: center; background: #16a34a; border-radius: 10px; padding: 12px 4px;">
<p style="white-space: nowrap; font-size: 20px; font-weight: 800; color: #ffffff;">06</p>
<p style="white-space: nowrap; font-size: 13px; font-weight: 700; color: #ffffff; margin-top: 2px;">출고</p>
<p style="white-space: nowrap; font-size: 8px; color: #dcfce7; margin-top: 2px;">배송 자동화</p>
</div>
</div>
<div style="padding: 10px 24px 0 24px;">
<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: 120px; 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;">구현 기능</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 style="flex: 1; padding: 6px 10px;"><p style="white-space: nowrap; font-size: 9px; font-weight: 600; color: #ffffff;">AI 적용</p></div>
</div>
<div style="display: flex; border-bottom: 1px solid #f1f5f9;">
<div style="width: 120px; 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;">고객/거래처 CRM</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 style="flex: 1; padding: 5px 10px;"><p style="white-space: nowrap; font-size: 9px; color: #64748b;">고객 분류 자동화</p></div>
</div>
<div style="display: flex; background: #f8fafc; border-bottom: 1px solid #f1f5f9;">
<div style="width: 120px; 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="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 style="flex: 1; padding: 5px 10px;"><p style="white-space: nowrap; font-size: 9px; color: #64748b;">STT 음성→텍스트</p></div>
</div>
<div style="display: flex; border-bottom: 1px solid #f1f5f9;">
<div style="width: 120px; 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="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 style="flex: 1; padding: 5px 10px;"><p style="white-space: nowrap; font-size: 9px; color: #64748b;">AI 견적 산출 (개발중)</p></div>
</div>
<div style="display: flex; background: #f8fafc; border-bottom: 1px solid #f1f5f9;">
<div style="width: 120px; 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="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 style="flex: 1; padding: 5px 10px;"><p style="white-space: nowrap; font-size: 9px; color: #64748b;">자동 전환 프로세스</p></div>
</div>
<div style="display: flex; border-bottom: 1px solid #f1f5f9;">
<div style="width: 120px; 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;">BOM, 공정 관리</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 style="flex: 1; padding: 5px 10px;"><p style="white-space: nowrap; font-size: 9px; color: #64748b;">AI 공정 최적화 (계획)</p></div>
</div>
<div style="display: flex; background: #f8fafc;">
<div style="width: 120px; 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="width: 80px; padding: 5px 10px; text-align: center;"><div style="background: #f1f5f9; border-radius: 10px; padding: 1px 6px; display: inline-block;"><p style="white-space: nowrap; font-size: 8px; font-weight: 600; color: #64748b;">계획</p></div></div>
<div style="flex: 1; padding: 5px 10px;"><p style="white-space: nowrap; font-size: 9px; color: #64748b;">물류 자동화 (계획)</p></div>
</div>
</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;">3 / 7</p>
</div>
</body>
</html>