522 lines
13 KiB
Markdown
522 lines
13 KiB
Markdown
# 🤖 AI 생산관리 어시스턴트 사용 가이드
|
||
|
||
## 📋 목차
|
||
1. [개요](#개요)
|
||
2. [주요 기능](#주요-기능)
|
||
3. [설치 방법](#설치-방법)
|
||
4. [사용 방법](#사용-방법)
|
||
5. [실제 시스템 연동](#실제-시스템-연동)
|
||
6. [고급 설정](#고급-설정)
|
||
7. [FAQ](#faq)
|
||
|
||
---
|
||
|
||
## 개요
|
||
|
||
**AI 생산관리 어시스턴트**는 실시간으로 신규 수주를 감지하고, AI가 영향을 분석하여 최적의 대응 방안을 제시한 후, 담당자가 선택한 옵션을 자동으로 시스템에 적용하는 지능형 어시스턴트입니다.
|
||
|
||
### 🎯 핵심 가치
|
||
|
||
- ⚡ **즉각 대응**: 수주 입력 후 수 초 내에 AI 분석 완료
|
||
- 🧠 **지능형 분석**: 생산/출하/발주 전체를 통합 분석
|
||
- 🎤 **편리한 인터페이스**: 음성 알림 및 음성 선택 지원
|
||
- 🤖 **자동 적용**: 선택한 옵션을 시스템에 자동 반영
|
||
|
||
---
|
||
|
||
## 주요 기능
|
||
|
||
### 1. 🔍 실시간 감지
|
||
- 신규 수주가 입력되면 즉시 감지
|
||
- 변경사항 실시간 모니터링
|
||
|
||
### 2. 🤖 AI 영향 분석
|
||
- **기존 계획 영향도 분석**
|
||
- 지연 예상되는 생산계획 파악
|
||
- 설비 가동률 변화 계산
|
||
- 원자재 부족량 예측
|
||
|
||
- **3가지 대응 방안 자동 생성**
|
||
- 옵션 1: 야간 작업 추가 (주로 추천)
|
||
- 옵션 2: 기존 주문 지연
|
||
- 옵션 3: 외주 생산
|
||
|
||
- **각 옵션별 장단점 분석**
|
||
- 비용 영향
|
||
- 납기 준수 여부
|
||
- 리스크 요인
|
||
|
||
### 3. 🔔 다양한 알림 방식
|
||
|
||
```javascript
|
||
// 1. 브라우저 알림
|
||
new Notification('🚨 긴급 수주 발생!')
|
||
|
||
// 2. 음성 알림 (TTS)
|
||
aiAssistant.speak('긴급 수주가 발생했습니다')
|
||
|
||
// 3. 화면 토스트
|
||
aiAssistant.showToast('신규 수주 입력됨')
|
||
```
|
||
|
||
### 4. 🎤 음성 제어
|
||
- "옵션 1", "첫 번째", "야간 작업" 등으로 선택
|
||
- 한국어 음성 인식 지원
|
||
|
||
### 5. ⚡ 자동 적용
|
||
- 생산계획 수정
|
||
- 출하계획 조정
|
||
- 긴급 발주 생성
|
||
- 작업자 배정
|
||
- 외주 발주 처리
|
||
|
||
### 6. 📝 감사 로그
|
||
- 모든 AI 결정 기록
|
||
- 변경 이력 추적
|
||
- 롤백 가능
|
||
|
||
---
|
||
|
||
## 설치 방법
|
||
|
||
### 1️⃣ 파일 복사
|
||
|
||
프로젝트에 다음 파일들을 추가하세요:
|
||
|
||
```
|
||
화면개발/
|
||
├── js/
|
||
│ └── aiProductionAssistant.js ← AI 어시스턴트 핵심 로직
|
||
├── css/
|
||
│ └── aiAssistant.css ← UI 스타일
|
||
└── ai-assistant-demo.html ← 데모 페이지 (참고용)
|
||
```
|
||
|
||
### 2️⃣ HTML 파일에 추가
|
||
|
||
기존 HTML 파일 (예: `수주관리.html`)의 `<head>` 태그에 추가:
|
||
|
||
```html
|
||
<!-- CSS -->
|
||
<link rel="stylesheet" href="css/aiAssistant.css">
|
||
|
||
<!-- JavaScript (</body> 직전에 추가) -->
|
||
<script src="js/aiProductionAssistant.js"></script>
|
||
```
|
||
|
||
### 3️⃣ 완료! 🎉
|
||
|
||
이제 `aiAssistant` 객체를 사용할 수 있습니다.
|
||
|
||
---
|
||
|
||
## 사용 방법
|
||
|
||
### 기본 사용 (3단계)
|
||
|
||
#### Step 1: AI 활성화
|
||
|
||
```javascript
|
||
// AI 어시스턴트 활성화
|
||
aiAssistant.activate();
|
||
```
|
||
|
||
#### Step 2: 수주 데이터 전달
|
||
|
||
```javascript
|
||
// 신규 수주 발생 시
|
||
const newOrder = {
|
||
id: 'ORD-001',
|
||
item: '제품A',
|
||
quantity: 5000,
|
||
dueDate: '2025-10-28',
|
||
customer: '고객사명'
|
||
};
|
||
|
||
aiAssistant.onNewOrderDetected(newOrder);
|
||
```
|
||
|
||
#### Step 3: AI가 자동 처리
|
||
1. 영향 분석 (10초 내외)
|
||
2. 3가지 옵션 제시
|
||
3. 담당자 선택
|
||
4. 자동 적용 완료!
|
||
|
||
---
|
||
|
||
## 실제 시스템 연동
|
||
|
||
### 📌 수주관리 화면 연동 예시
|
||
|
||
```html
|
||
<!-- 수주관리.html -->
|
||
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>수주관리</title>
|
||
|
||
<!-- 기존 CSS -->
|
||
<link rel="stylesheet" href="css/common.css">
|
||
|
||
<!-- AI 어시스턴트 CSS 추가 -->
|
||
<link rel="stylesheet" href="css/aiAssistant.css">
|
||
</head>
|
||
<body>
|
||
<!-- 기존 수주관리 화면 내용 -->
|
||
|
||
<div class="content-area">
|
||
<div class="search-section">
|
||
<!-- 검색 폼 -->
|
||
</div>
|
||
|
||
<div class="table-section">
|
||
<!-- 수주 목록 테이블 -->
|
||
</div>
|
||
|
||
<!-- 수주 등록 버튼 -->
|
||
<button onclick="openOrderModal()">신규 수주 등록</button>
|
||
</div>
|
||
|
||
<!-- 기존 JavaScript -->
|
||
<script src="js/common.js"></script>
|
||
|
||
<!-- AI 어시스턴트 추가 -->
|
||
<script src="js/aiProductionAssistant.js"></script>
|
||
|
||
<script>
|
||
// 페이지 로드 시 AI 활성화
|
||
window.addEventListener('load', () => {
|
||
aiAssistant.activate();
|
||
console.log('✅ AI 어시스턴트 준비 완료');
|
||
});
|
||
|
||
// 기존 수주 저장 함수 수정
|
||
function saveOrder() {
|
||
const orderData = {
|
||
id: document.getElementById('orderId').value,
|
||
item: document.getElementById('itemName').value,
|
||
quantity: parseInt(document.getElementById('quantity').value),
|
||
dueDate: document.getElementById('dueDate').value,
|
||
customer: document.getElementById('customer').value
|
||
};
|
||
|
||
// 1. 기존 로직: 데이터베이스 저장
|
||
saveToDatabase(orderData);
|
||
|
||
// 2. AI 어시스턴트 알림 (새로 추가!)
|
||
if (aiAssistant.isActive) {
|
||
aiAssistant.onNewOrderDetected(orderData);
|
||
}
|
||
|
||
// 3. 모달 닫기
|
||
closeModal();
|
||
}
|
||
|
||
// 기존 저장 함수는 그대로 유지
|
||
function saveToDatabase(data) {
|
||
// ... 기존 로직 ...
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
### 📌 생산계획관리 화면 연동
|
||
|
||
```javascript
|
||
// 생산계획관리.html 또는 생산계획.js
|
||
|
||
// 현재 생산계획 데이터를 AI가 접근할 수 있도록 전역 변수로 설정
|
||
window.productionPlans = [
|
||
{
|
||
id: 'P001',
|
||
item: '제품A',
|
||
quantity: 1000,
|
||
startDate: '2025-10-26',
|
||
endDate: '2025-10-28',
|
||
status: 'in_progress'
|
||
},
|
||
// ... 더 많은 계획
|
||
];
|
||
|
||
// AI 어시스턴트가 생산계획을 수정할 때 호출되는 함수
|
||
function onProductionPlanUpdated(updatedPlan) {
|
||
console.log('AI가 생산계획을 수정했습니다:', updatedPlan);
|
||
|
||
// UI 업데이트
|
||
refreshProductionTable();
|
||
|
||
// 서버 동기화
|
||
syncToServer(updatedPlan);
|
||
}
|
||
|
||
// AI 어시스턴트에게 콜백 등록
|
||
aiAssistant.onProductionUpdate = onProductionPlanUpdated;
|
||
```
|
||
|
||
### 📌 출하계획관리 화면 연동
|
||
|
||
```javascript
|
||
// 출하계획.js
|
||
|
||
window.shipmentPlans = [
|
||
{
|
||
id: 'S001',
|
||
orderId: 'ORD-001',
|
||
shipmentDate: '2025-10-29',
|
||
quantity: 1000
|
||
}
|
||
];
|
||
|
||
// AI가 출하계획을 조정할 때
|
||
function onShipmentPlanUpdated(updatedPlan) {
|
||
console.log('출하계획 조정:', updatedPlan);
|
||
refreshShipmentTable();
|
||
}
|
||
|
||
aiAssistant.onShipmentUpdate = onShipmentPlanUpdated;
|
||
```
|
||
|
||
---
|
||
|
||
## 고급 설정
|
||
|
||
### 🔑 OpenAI API 연동 (실제 AI 사용)
|
||
|
||
```javascript
|
||
// API 키 설정
|
||
aiAssistant.apiKey = 'sk-your-openai-api-key';
|
||
|
||
// 이제 실제 GPT-4를 사용하여 분석합니다
|
||
// API 키가 없으면 규칙 기반 분석이 사용됩니다
|
||
```
|
||
|
||
### 🎨 UI 커스터마이징
|
||
|
||
`css/aiAssistant.css`를 수정하여 디자인을 변경할 수 있습니다:
|
||
|
||
```css
|
||
/* 예: 모달 색상 변경 */
|
||
.ai-modal-header {
|
||
background: linear-gradient(135deg, #your-color-1, #your-color-2);
|
||
}
|
||
|
||
/* 버튼 색상 변경 */
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, #your-color-1, #your-color-2);
|
||
}
|
||
```
|
||
|
||
### 🔧 분석 로직 커스터마이징
|
||
|
||
`js/aiProductionAssistant.js`의 `ruleBasedAnalysis` 함수를 수정:
|
||
|
||
```javascript
|
||
ruleBasedAnalysis(newOrder, currentState) {
|
||
// 여기서 회사 특성에 맞게 로직 수정
|
||
|
||
// 예: 일일 생산량 변경
|
||
const dailyCapacity = 1500; // 기본 1000에서 1500으로
|
||
|
||
// 예: 안전 재고 계산 방식 변경
|
||
const safetyStock = newOrder.quantity * 0.2; // 20% 안전 재고
|
||
|
||
// ... 나머지 로직
|
||
}
|
||
```
|
||
|
||
### 📊 데이터 수집 함수 연동
|
||
|
||
실제 시스템 데이터를 가져오도록 수정:
|
||
|
||
```javascript
|
||
// js/aiProductionAssistant.js 수정
|
||
|
||
getProductionPlans() {
|
||
// 방법 1: 전역 변수에서 가져오기
|
||
return window.productionPlans || [];
|
||
|
||
// 방법 2: API에서 실시간 가져오기 (권장)
|
||
// return fetch('/api/production-plans').then(r => r.json());
|
||
}
|
||
|
||
getInventory() {
|
||
// 실제 재고 데이터
|
||
return window.inventory || {};
|
||
}
|
||
|
||
// 다른 함수들도 마찬가지로 수정
|
||
```
|
||
|
||
---
|
||
|
||
## 데모 페이지
|
||
|
||
### 🎮 테스트 방법
|
||
|
||
1. **데모 페이지 열기**
|
||
```
|
||
http://localhost:8080/화면개발/ai-assistant-demo.html
|
||
```
|
||
|
||
2. **AI 활성화**
|
||
- "AI 활성화/비활성화" 버튼 클릭
|
||
- 상태가 "활성화됨"으로 변경됨
|
||
|
||
3. **시나리오 테스트**
|
||
- 시나리오 1~3 중 하나 선택
|
||
- AI 분석 결과 확인
|
||
- 옵션 선택 후 "자동 적용" 클릭
|
||
|
||
4. **음성 기능 테스트**
|
||
- "음성 테스트" 버튼으로 TTS 확인
|
||
- 모달에서 "🎤 음성으로 선택" 버튼으로 음성 인식 테스트
|
||
|
||
---
|
||
|
||
## FAQ
|
||
|
||
### Q1. AI 없이도 사용할 수 있나요?
|
||
**A:** 네! OpenAI API 없이도 규칙 기반 분석이 자동으로 작동합니다. 기본 기능은 모두 사용 가능합니다.
|
||
|
||
### Q2. 어떤 브라우저를 지원하나요?
|
||
**A:**
|
||
- ✅ Chrome, Edge (권장)
|
||
- ✅ Firefox
|
||
- ⚠️ Safari (일부 기능 제한)
|
||
- ❌ IE (미지원)
|
||
|
||
음성 인식은 Chrome/Edge에서 가장 잘 작동합니다.
|
||
|
||
### Q3. 실시간 감지는 어떻게 작동하나요?
|
||
**A:** 수주 저장 함수에서 `aiAssistant.onNewOrderDetected()`를 호출하면 즉시 AI 분석이 시작됩니다. WebSocket 연동은 선택사항입니다.
|
||
|
||
### Q4. 자동 적용이 안전한가요?
|
||
**A:**
|
||
- ✅ 모든 변경사항은 로그로 기록됩니다
|
||
- ✅ 담당자가 직접 옵션을 선택해야 적용됩니다
|
||
- ✅ 롤백 기능 구현 가능
|
||
- ⚠️ 중요한 경우 추가 승인 프로세스 권장
|
||
|
||
### Q5. 다른 화면들과 데이터 동기화는?
|
||
**A:** AI가 데이터를 수정하면 각 화면의 콜백 함수가 호출됩니다:
|
||
|
||
```javascript
|
||
// 생산계획 수정 시
|
||
aiAssistant.onProductionUpdate = (plan) => {
|
||
refreshProductionTable();
|
||
};
|
||
|
||
// 출하계획 수정 시
|
||
aiAssistant.onShipmentUpdate = (plan) => {
|
||
refreshShipmentTable();
|
||
};
|
||
```
|
||
|
||
### Q6. 성능은 어떤가요?
|
||
**A:**
|
||
- 규칙 기반 분석: 1초 미만
|
||
- OpenAI API 분석: 5-15초
|
||
- 자동 적용: 2-5초
|
||
|
||
### Q7. 비용은 얼마나 드나요?
|
||
**A:**
|
||
- 규칙 기반 분석: 무료
|
||
- OpenAI API: 요청당 약 $0.01-0.05 (GPT-4 기준)
|
||
- 하루 100건 분석 시: 약 $1-5
|
||
|
||
### Q8. 기존 시스템을 많이 수정해야 하나요?
|
||
**A:** 아니요! 최소 수정으로 연동 가능:
|
||
|
||
```javascript
|
||
// 기존 저장 함수에 딱 3줄만 추가
|
||
function saveOrder(data) {
|
||
saveToDatabase(data); // 기존 코드
|
||
|
||
// 새로 추가되는 코드 (3줄)
|
||
if (aiAssistant.isActive) {
|
||
aiAssistant.onNewOrderDetected(data);
|
||
}
|
||
}
|
||
```
|
||
|
||
### Q9. 모바일에서도 작동하나요?
|
||
**A:**
|
||
- ✅ 화면은 반응형으로 대응
|
||
- ⚠️ 음성 인식은 모바일에서 제한적
|
||
- ✅ 터치 인터페이스 지원
|
||
|
||
### Q10. 여러 명이 동시에 사용하면?
|
||
**A:** 각 사용자의 브라우저에서 독립적으로 작동합니다. 서버 공유가 필요한 경우 WebSocket 서버 구축을 권장합니다.
|
||
|
||
---
|
||
|
||
## 🚀 다음 단계
|
||
|
||
### 단계별 구현 로드맵
|
||
|
||
#### ✅ Phase 1: 프로토타입 (현재)
|
||
- [x] 기본 AI 분석
|
||
- [x] 음성 알림
|
||
- [x] 모달 UI
|
||
- [x] 자동 적용 시뮬레이션
|
||
|
||
#### 🔄 Phase 2: 실제 연동 (2-3일)
|
||
- [ ] 수주관리 화면 연동
|
||
- [ ] 생산계획 데이터 연동
|
||
- [ ] 출하계획 데이터 연동
|
||
- [ ] 서버 API 연동
|
||
|
||
#### 🎯 Phase 3: 고도화 (1-2주)
|
||
- [ ] OpenAI API 통합
|
||
- [ ] 학습 데이터 수집
|
||
- [ ] 정확도 향상
|
||
- [ ] 대시보드 추가
|
||
|
||
#### 🌟 Phase 4: 확장 (1개월+)
|
||
- [ ] 재고 최적화 AI
|
||
- [ ] 설비 고장 예측
|
||
- [ ] 품질 관리 AI
|
||
- [ ] 모바일 앱
|
||
|
||
---
|
||
|
||
## 📞 지원
|
||
|
||
문제가 발생하거나 추가 기능이 필요한 경우:
|
||
|
||
1. **데모 페이지로 먼저 테스트**
|
||
- `ai-assistant-demo.html` 열기
|
||
- 브라우저 콘솔(F12) 확인
|
||
|
||
2. **로그 확인**
|
||
```javascript
|
||
// 콘솔에서 현재 상태 확인
|
||
console.log(aiAssistant);
|
||
console.log(aiAssistant.isActive);
|
||
```
|
||
|
||
3. **테스트 함수 사용**
|
||
```javascript
|
||
// 콘솔에서 직접 테스트
|
||
testAI(); // 전체 플로우 테스트
|
||
```
|
||
|
||
---
|
||
|
||
## 📝 변경 이력
|
||
|
||
### v1.0.0 (2025-10-25)
|
||
- 🎉 초기 버전 릴리스
|
||
- ✅ 실시간 감지
|
||
- ✅ AI 분석 (규칙 기반)
|
||
- ✅ 음성 알림/인식
|
||
- ✅ 자동 적용
|
||
- ✅ 데모 페이지
|
||
|
||
---
|
||
|
||
**즐거운 AI 체험 되세요! 🤖✨**
|
||
|