13 KiB

Raw Blame History

🤖 AI 생산관리 어시스턴트 사용 가이드

📋 목차

개요
주요 기능
설치 방법
사용 방법
실제 시스템 연동
고급 설정
FAQ

개요

AI 생산관리 어시스턴트는 실시간으로 신규 수주를 감지하고, AI가 영향을 분석하여 최적의 대응 방안을 제시한 후, 담당자가 선택한 옵션을 자동으로 시스템에 적용하는 지능형 어시스턴트입니다.

🎯 핵심 가치

⚡ 즉각 대응: 수주 입력 후 수 초 내에 AI 분석 완료
🧠 지능형 분석: 생산/출하/발주 전체를 통합 분석
🎤 편리한 인터페이스: 음성 알림 및 음성 선택 지원
🤖 자동 적용: 선택한 옵션을 시스템에 자동 반영

주요 기능

1. 🔍 실시간 감지

신규 수주가 입력되면 즉시 감지
변경사항 실시간 모니터링

2. 🤖 AI 영향 분석

기존 계획 영향도 분석
- 지연 예상되는 생산계획 파악
- 설비 가동률 변화 계산
- 원자재 부족량 예측
3가지 대응 방안 자동 생성
- 옵션 1: 야간 작업 추가 (주로 추천)
- 옵션 2: 기존 주문 지연
- 옵션 3: 외주 생산
각 옵션별 장단점 분석
- 비용 영향
- 납기 준수 여부
- 리스크 요인

3. 🔔 다양한 알림 방식

// 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> 태그에 추가:

<!-- CSS -->
<link rel="stylesheet" href="css/aiAssistant.css">

<!-- JavaScript (</body> 직전에 추가) -->
<script src="js/aiProductionAssistant.js"></script>

3️⃣ 완료! 🎉

이제 aiAssistant 객체를 사용할 수 있습니다.

사용 방법

기본 사용 (3단계)

Step 1: AI 활성화

// AI 어시스턴트 활성화
aiAssistant.activate();

Step 2: 수주 데이터 전달

// 신규 수주 발생 시
const newOrder = {
    id: 'ORD-001',
    item: '제품A',
    quantity: 5000,
    dueDate: '2025-10-28',
    customer: '고객사명'
};

aiAssistant.onNewOrderDetected(newOrder);

Step 3: AI가 자동 처리

영향 분석 (10초 내외)
3가지 옵션 제시
담당자 선택
자동 적용 완료!

실제 시스템 연동

📌 수주관리 화면 연동 예시

<!-- 수주관리.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>

📌 생산계획관리 화면 연동

// 생산계획관리.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;

📌 출하계획관리 화면 연동

// 출하계획.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 사용)

// API 키 설정
aiAssistant.apiKey = 'sk-your-openai-api-key';

// 이제 실제 GPT-4를 사용하여 분석합니다
// API 키가 없으면 규칙 기반 분석이 사용됩니다

🎨 UI 커스터마이징

css/aiAssistant.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 함수를 수정:

ruleBasedAnalysis(newOrder, currentState) {
    // 여기서 회사 특성에 맞게 로직 수정
    
    // 예: 일일 생산량 변경
    const dailyCapacity = 1500; // 기본 1000에서 1500으로
    
    // 예: 안전 재고 계산 방식 변경
    const safetyStock = newOrder.quantity * 0.2; // 20% 안전 재고
    
    // ... 나머지 로직
}

📊 데이터 수집 함수 연동

실제 시스템 데이터를 가져오도록 수정:

// js/aiProductionAssistant.js 수정

getProductionPlans() {
    // 방법 1: 전역 변수에서 가져오기
    return window.productionPlans || [];
    
    // 방법 2: API에서 실시간 가져오기 (권장)
    // return fetch('/api/production-plans').then(r => r.json());
}

getInventory() {
    // 실제 재고 데이터
    return window.inventory || {};
}

// 다른 함수들도 마찬가지로 수정

데모 페이지

🎮 테스트 방법

데모 페이지 열기

http://localhost:8080/화면개발/ai-assistant-demo.html

AI 활성화
- "AI 활성화/비활성화" 버튼 클릭
- 상태가 "활성화됨"으로 변경됨
시나리오 테스트
- 시나리오 1~3 중 하나 선택
- AI 분석 결과 확인
- 옵션 선택 후 "자동 적용" 클릭
음성 기능 테스트
- "음성 테스트" 버튼으로 TTS 확인
- 모달에서 "🎤 음성으로 선택" 버튼으로 음성 인식 테스트

FAQ

Q1. AI 없이도 사용할 수 있나요?

A: 네! OpenAI API 없이도 규칙 기반 분석이 자동으로 작동합니다. 기본 기능은 모두 사용 가능합니다.

Q2. 어떤 브라우저를 지원하나요?

✅ Chrome, Edge (권장)
✅ Firefox
⚠️ Safari (일부 기능 제한)
❌ IE (미지원)

음성 인식은 Chrome/Edge에서 가장 잘 작동합니다.

Q3. 실시간 감지는 어떻게 작동하나요?

A: 수주 저장 함수에서 aiAssistant.onNewOrderDetected()를 호출하면 즉시 AI 분석이 시작됩니다. WebSocket 연동은 선택사항입니다.

Q4. 자동 적용이 안전한가요?

✅ 모든 변경사항은 로그로 기록됩니다
✅ 담당자가 직접 옵션을 선택해야 적용됩니다
✅ 롤백 기능 구현 가능
⚠️ 중요한 경우 추가 승인 프로세스 권장

Q5. 다른 화면들과 데이터 동기화는?

A: AI가 데이터를 수정하면 각 화면의 콜백 함수가 호출됩니다:

// 생산계획 수정 시
aiAssistant.onProductionUpdate = (plan) => {
    refreshProductionTable();
};

// 출하계획 수정 시
aiAssistant.onShipmentUpdate = (plan) => {
    refreshShipmentTable();
};

Q6. 성능은 어떤가요?

규칙 기반 분석: 1초 미만
OpenAI API 분석: 5-15초
자동 적용: 2-5초

Q7. 비용은 얼마나 드나요?

규칙 기반 분석: 무료
OpenAI API: 요청당 약 $0.01-0.05 (GPT-4 기준)
하루 100건 분석 시: 약 $1-5

Q8. 기존 시스템을 많이 수정해야 하나요?

A: 아니요! 최소 수정으로 연동 가능:

// 기존 저장 함수에 딱 3줄만 추가
function saveOrder(data) {
    saveToDatabase(data);  // 기존 코드
    
    // 새로 추가되는 코드 (3줄)
    if (aiAssistant.isActive) {
        aiAssistant.onNewOrderDetected(data);
    }
}

Q9. 모바일에서도 작동하나요?

✅ 화면은 반응형으로 대응
⚠️ 음성 인식은 모바일에서 제한적
✅ 터치 인터페이스 지원

Q10. 여러 명이 동시에 사용하면?

A: 각 사용자의 브라우저에서 독립적으로 작동합니다. 서버 공유가 필요한 경우 WebSocket 서버 구축을 권장합니다.

🚀 다음 단계

단계별 구현 로드맵

✅ Phase 1: 프로토타입 (현재)

기본 AI 분석
음성 알림
모달 UI
자동 적용 시뮬레이션

🔄 Phase 2: 실제 연동 (2-3일)

수주관리 화면 연동
생산계획 데이터 연동
출하계획 데이터 연동
서버 API 연동

🎯 Phase 3: 고도화 (1-2주)

OpenAI API 통합
학습 데이터 수집
정확도 향상
대시보드 추가

🌟 Phase 4: 확장 (1개월+)

재고 최적화 AI
설비 고장 예측
품질 관리 AI
모바일 앱

📞 지원

문제가 발생하거나 추가 기능이 필요한 경우:

데모 페이지로 먼저 테스트
- ai-assistant-demo.html 열기
- 브라우저 콘솔(F12) 확인

로그 확인

// 콘솔에서 현재 상태 확인
console.log(aiAssistant);
console.log(aiAssistant.isActive);

테스트 함수 사용

// 콘솔에서 직접 테스트
testAI();  // 전체 플로우 테스트

📝 변경 이력

v1.0.0 (2025-10-25)

🎉 초기 버전 릴리스
✅ 실시간 감지
✅ AI 분석 (규칙 기반)
✅ 음성 알림/인식
✅ 자동 적용
✅ 데모 페이지

즐거운 AI 체험 되세요! 🤖✨

13 KiB Raw Blame History Unescape Escape