1363 lines
92 KiB
JavaScript
1363 lines
92 KiB
JavaScript
import React, { useState } from 'react';
|
||
import { IconAI, IconClipboard, IconCloud, IconShield, IconLink, IconGovt, IconBriefcase, IconCode, IconLeaf,
|
||
IconWrench, IconMessage, IconSearch, IconBulb, IconFileText, IconMobile, IconLock, IconKey,
|
||
IconBrain, IconCheckCircle, IconRocket, IconTrendUp, IconShuffle, IconGlobe, IconDatabase,
|
||
IconServer, IconZap, IconNetwork, IconBarChart, IconPieChart, IconStar, IconAward,
|
||
IconUsers, IconBell, IconCalendar, IconCog, IconBuilding, IconTarget } from '../components/Icons';
|
||
import { Link } from 'react-router-dom';
|
||
import './GuardiaDetail.css';
|
||
import { useSeoMeta } from '../hooks/useSeoMeta';
|
||
|
||
/* 100가지 이상 기능을 8개 카테고리로 분류 */
|
||
const FEATURE_CATEGORIES = [
|
||
{
|
||
id: 'ai',
|
||
label: 'AI · 지능 자동화',
|
||
icon: <IconAI size={22} color="#6366F1"/>,
|
||
color: '#6366F1',
|
||
items: [
|
||
{ title: 'AI 에이전트 자동화', desc: 'Ollama 온프레미스 sLLM. 메신저 한 줄 → 자동 배포·운영. 폐쇄망 완전 지원.' },
|
||
{ title: 'RAG 하이브리드 검색', desc: 'BM25 + pgvector RRF 결합 검색. Ollama 기반 자연어 답변 생성. KB·SR 통합.' },
|
||
{ title: 'Text-to-SQL 자연어 쿼리', desc: '"이번 달 HIGH SR 건수?" — 자연어로 ITSM DB 직접 조회. DML 차단·민감 컬럼 마스킹.' },
|
||
{ title: '대화형 운영 어시스턴트', desc: 'Multi-turn 컨텍스트 유지. 운영 이슈 진단·해결책 제안. 대화 이력 저장.' },
|
||
{ title: 'AI 이상 탐지 (Anomaly)', desc: '서버·앱 메트릭 실시간 분석. 이상 패턴 자동 감지 → 인시던트 자동 생성.' },
|
||
{ title: 'AI 운영 인사이트', desc: '주간 SR 패턴 분석·반복 장애 예측·AI 개선 권고. Ollama 기반 자연어 보고.' },
|
||
{ title: '예측 운영 분석', desc: 'SLA 위반 예측(7일)·SR 급증 감지·서버 장애 예측. 이동평균 + Ollama 인사이트.' },
|
||
{ title: 'Learning Loop (자기 개선)', desc: 'RAG 피드백 데이터로 Ollama 파인튜닝. 모델 품질 지표 자동 측정. 품질 등급 관리.' },
|
||
{ title: '멀티모달 AI (이미지 분석)', desc: 'llava 모델로 스크린샷·에러 화면 분석. 이미지 → 에러 분류 + SR 자동 생성.' },
|
||
{ title: 'RPA 봇 + 웹 스크랩핑', desc: '소스 기반 Validation 학습 → 반복 업무 자동화. URL 수집·게시·원복 워크플로우.' },
|
||
{ title: '스마트 알림 규칙 편집기', desc: '노코드 조건 편집기. SR_CREATED·KPI_BREACH 등 트리거. 무음 시간·다이제스트·AI 중요도 필터.' },
|
||
{ title: '디자인 SR AI 자동화', desc: 'Ollama llava:7b 비전으로 스크린샷 분석. CSS_CHANGE·ICON_REQUEST 자동 분류. 자연어→CSS/SVG 코드 즉시 생성.' },
|
||
{ title: '음성인식 명령 실행', desc: 'expo-speech-recognition 온디바이스 한국어 STT. 폐쇄망 완전 지원. 음성→ITSM 명령 자동 매핑.' },
|
||
{ title: '다음명령 제시', desc: 'Ollama 컨텍스트 분석→추천 명령 3개 자동 표시. 사용 이력 학습. Messenger/Mobile App 통합.' },
|
||
],
|
||
},
|
||
{
|
||
id: 'itsm',
|
||
label: 'ITSM 핵심',
|
||
icon: <IconClipboard size={22} color="#0EA5E9"/>,
|
||
color: '#0EA5E9',
|
||
items: [
|
||
{ title: 'SR 서비스 요청 관리', desc: '접수→배정→처리→완료. AI 자동 분류·우선순위 산정. 자율 워크플로우 자동화.' },
|
||
{ title: 'CMDB 형상 관리', desc: 'CI 등록·관계 매핑·변경 이력. 의존성 토폴로지 시각화.' },
|
||
{ title: '변경 관리 CAB', desc: 'RFC→CAB 투표→승인→실행. 변경 동결 기간 자동 관리.' },
|
||
{ title: 'Problem Management', desc: '반복 인시던트 RCA 분석. Known Error DB. PRB ID 체계.' },
|
||
{ title: '서비스 카탈로그 + SLA', desc: '표준 서비스 정의. SLA 자동 계산. 위반 예측 에스컬레이션.' },
|
||
{ title: 'KPI 엔진', desc: '기관별 KPI 정의·계산. MTTR·FCR·SLA·Backlog 내장 5종. 신호등(RED/YELLOW/GREEN).' },
|
||
{ title: 'BI 대시보드', desc: 'SR 트렌드·SLA 히트맵·엔지니어 워크로드·MTTR 트렌드. Chart.js + D3.js.' },
|
||
{ title: '자율 워크플로우 엔진', desc: '조건 기반 자동화 규칙. SR_CREATED 트리거 → AUTO_ASSIGN → NOTIFY. 승인 게이트.' },
|
||
{ title: '자동 보고서 생성', desc: '주간·월간·분기 보고서 자동 집계. Excel·PDF 즉시 다운로드.' },
|
||
{ title: '베리포트 벤치마킹', desc: '기관 간 익명 벤치마킹. 완료율·MTTR·SLA 업계 백분위 순위 제공.' },
|
||
],
|
||
},
|
||
{
|
||
id: 'infra',
|
||
label: '인프라 · 클라우드',
|
||
icon: <IconCloud size={22} color="#10B981"/>,
|
||
color: '#10B981',
|
||
items: [
|
||
{ title: '에이전트리스 SSH 배포', desc: 'Tomcat·JBoss·WebLogic 원격 관리. 대상 서버 소프트웨어 설치 불필요.' },
|
||
{ title: '배치 SSH 일괄 실행', desc: '수십 개 서버에 동시 SSH 명령 실행. 결과 수집·비교·에러 서버 자동 SR 생성.' },
|
||
{ title: '자산 QR 태그 관리', desc: '서버 장비에 QR 라벨 부착. Messenger 앱 스캔 → CMDB 즉시 조회. 실사 체크인 자동화.' },
|
||
{ title: 'Kubernetes 관리', desc: 'SSH 경유 kubectl. Pod·Deployment·HPA 조회. 롤링 업데이트·이벤트 감지.' },
|
||
{ title: 'CMDB 자동 발견', desc: 'SSH/SNMP/WMI 에이전트리스 스캔. 서버·장비 자동 인벤토리. 서비스 의존성 매핑.' },
|
||
{ title: '구성 드리프트 감지', desc: '골든 구성 vs 실제 환경 비교. 이탈 감지 → SR 자동 생성. 승인 기반 자동 교정.' },
|
||
{ title: '멀티클라우드 통합', desc: 'NCloud · AWS · KT Cloud 단일 관제. 비용 최적화 AI 권고. Reserved Instance 분석.' },
|
||
{ title: 'DR 재해복구 자동화', desc: 'Failover·백업 무결성·복구 테스트·RTO/RPO 실적 추적.' },
|
||
{ title: 'Scouter APM + Grafana', desc: 'Java WAS 전문 APM. Prometheus 메트릭. 이상 시 자동 인시던트.' },
|
||
{ title: '컨테이너 이상 감지', desc: 'Docker/K8s 헬스 체크. 중지·고CPU·고메모리 감지 → SR 자동 생성.' },
|
||
{ title: '네트워크 장비 관리', desc: '스위치·방화벽 SSH 설정 백업·변경 감지·토폴로지 자동 갱신.' },
|
||
{ title: 'FinOps 비용 분석', desc: '서버 비용 추적·최적화 권고·기관별 배분 리포트.' },
|
||
],
|
||
},
|
||
{
|
||
id: 'security',
|
||
label: '보안 · 컴플라이언스',
|
||
icon: <IconShield size={22} color="#F59E0B"/>,
|
||
color: '#F59E0B',
|
||
items: [
|
||
{ title: 'RBAC + MFA/OTP', desc: '역할별 세밀 권한 분리. TOTP 2단계 인증. JWT + 이상 감지 강제 재인증.' },
|
||
{ title: 'PAM 특권 접근 관리', desc: '세션 발급·체크아웃·명령 로깅·강제 종료. root 직접 접속 완전 차단.' },
|
||
{ title: 'SSO 통합 인증', desc: 'SAML 2.0 · OIDC · OAuth2. 행안부 GPKI · Google · Microsoft Entra 지원.' },
|
||
{ title: '보안 취약점 자동 스캔', desc: 'CVE·CVSS 자동 수집. 위험 등급별 SR 자동 생성. KISA CVE 연동.' },
|
||
{ title: '불변 감사 로그', desc: 'SHA-256 해시체인. 위·변조 불가. IP·계정 해시 저장.' },
|
||
{ title: 'CSAP 보안 자동 점검', desc: '공공기관 보안 100개 항목 자동 점검. Excel/HTML 보고서 자동 생성.' },
|
||
{ title: '구성 드리프트 보안', desc: 'SSH root 금지·패스워드 정책·UFW 등 보안 설정 실시간 감시·교정.' },
|
||
{ title: 'LDAP / AD 연동', desc: '사내 LDAP·Active Directory 연동. 그룹→역할 자동 매핑.' },
|
||
{ title: '행정망/인터넷망 분리', desc: '공공기관 망 분리 정책 관리. 방화벽 정책 위반 감지·감사 추적.' },
|
||
{ title: '개인정보·공공 준수', desc: '행안부 SW 보안약점·KWCAG 2.1·개인정보보호법. 19개 체크리스트 내장.' },
|
||
],
|
||
},
|
||
{
|
||
id: 'integration',
|
||
label: '외부 연동 · OCR',
|
||
icon: <IconLink size={22} color="#EC4899"/>,
|
||
color: '#EC4899',
|
||
items: [
|
||
{ title: 'Upstage OCR (Document AI)', desc: 'PDF·이미지 문서 파싱·정보 추출·QA. 계약서·납품서·청구서·회의록 자동 처리.' },
|
||
{ title: '계약서 자동 처리', desc: '나라장터 계약서 → 조달 자동 등록. 백화점 브랜드 계약서 → 계약 이력.' },
|
||
{ title: 'Jira 양방향 동기화', desc: 'SR ↔ Jira Issue 실시간 동기화. 상태 매핑·첨부파일 연동. 멀티테넌트 독립 설정.' },
|
||
{ title: 'Slack 연동', desc: 'Incoming Webhook + Slash Commands. Block Kit 리치 메시지. /guardia 명령어.' },
|
||
{ title: 'ServiceNow 연동', desc: 'CMDB CI·Incident 양방향 동기화. SR → ServiceNow Incident 자동 생성.' },
|
||
{ title: 'ERP / 그룹웨어 연동', desc: '전자결재 웹훅 → SR 자동 생성. HR 사용자 동기화. 나라장터 조달 연동.' },
|
||
{ title: '카카오 알림톡', desc: '알림톡 발송·대량 발송. 비즈니스 채널 연동. 발송 이력 추적.' },
|
||
{ title: '공공 API 허브', desc: '기상청·KISA CVE·행안부 주소 API 통합 관리. data.go.kr 연동.' },
|
||
{ title: 'SSO / OAuth2', desc: 'SAML·OIDC 통합. Just-In-Time 프로비저닝. SP Metadata XML 제공.' },
|
||
{ title: '웹메일 시스템', desc: 'Postfix/Dovecot 연동 웹메일. IMAP/SMTP 프록시. 폴더·첨부파일·답장.' },
|
||
{ title: '웹메일 주소록·서명', desc: '수신자 자동완성(자동 저장). HTML 서명 편집기. XSS 필터링. 프리셋 템플릿 제공.' },
|
||
],
|
||
},
|
||
{
|
||
id: 'public',
|
||
label: '공공기관 특화',
|
||
icon: <IconGovt size={22} color="#0369A1"/>,
|
||
color: '#0369A1',
|
||
items: [
|
||
{ title: '나라장터 연동', desc: '조달청 OpenAPI. 입찰공고·계약 현황 조회. 계약 → ITSM SR 자동 연계.' },
|
||
{ title: '전자조달 계약 관리', desc: '계약·검수·납품 이력 통합 관리. 만료 예정 알림. 계약별 SR 연계.' },
|
||
{ title: 'ISP 수립 지원', desc: 'ITSM 데이터 기반 ISP 보고서 자동 생성. 정보화 수준 진단. AI 로드맵 초안.' },
|
||
{ title: 'K-Cloud 전환 자동화', desc: '행안부 승인 CSP(NCloud·KT Cloud). CSAP 인증 확인. 전환 체크리스트 자동화.' },
|
||
{ title: '공공 API 허브', desc: 'KISA CVE·기상청·행안부 주소 API 통합. API Key 관리·사용량 추적.' },
|
||
{ title: '행정망/인터넷망 분리', desc: '망 분리 정책 등록. 방화벽 정책 위반 실시간 감지. 감사 기록 자동화.' },
|
||
{ title: 'CSAP 100점 자동 점검', desc: '100개 보안 항목 SSH 자동 체크. 증적 수집. Excel/HTML 보고서 생성.' },
|
||
{ title: '구성 드리프트 공공 감사', desc: '골든 구성 대비 설정 이탈 감지. 자동 교정 승인 게이트. 감사 추적.' },
|
||
],
|
||
},
|
||
{
|
||
id: 'saas',
|
||
label: 'SaaS · 멀티테넌트',
|
||
icon: <IconBriefcase size={22} color="#8B5CF6"/>,
|
||
color: '#8B5CF6',
|
||
items: [
|
||
{ title: '멀티테넌트 완전 격리', desc: '기관별 데이터 Row-Level Security. 테넌트간 정보 유출 원천 차단.' },
|
||
{ title: '화이트라벨 브랜딩', desc: '기관별 로고·색상·도메인 커스터마이즈. CSS 변수 동적 생성. 이메일 템플릿.' },
|
||
{ title: '구독·과금·청구서', desc: 'COMMUNITY/STANDARD/ENTERPRISE 플랜. 사용량 측정. 청구서 자동 생성.' },
|
||
{ title: '테넌트 셀프서비스 포털', desc: '기관 관리자 직접 사용자 초대·역할 변경·쿼터 조회. 활동 로그 실시간 확인.' },
|
||
{ title: '코호트·벤치마킹 분석', desc: '도입 후 성과 추이. 기관 간 익명 벤치마킹. 업계 평균 대비 순위.' },
|
||
{ title: '모바일 앱 QR 직접 배포', desc: 'Manager에서 APK 업로드 → QR 자동 생성. 스캔 즉시 설치. 앱스토어 불필요. 공공기관 내부망 배포 최적.' },
|
||
{ title: '모바일 앱 (React Native)', desc: 'iOS/Android. SR 접수·승인·AI 챗봇·알림·대시보드·자산 QR 스캔. EAS 빌드 지원.' },
|
||
{ title: 'Mobile PWA', desc: '스마트폰 홈 화면 추가. 오프라인 캐싱. 푸시 알림. 반응형 UI.' },
|
||
{ title: '다국어 지원 (i18n)', desc: '한국어·영어 실시간 전환. 공공기관 다국어 서비스 의무 준수.' },
|
||
],
|
||
},
|
||
{
|
||
id: 'devops',
|
||
label: 'DevOps · CI/CD',
|
||
icon: <IconCode size={22} color="#0891B2"/>,
|
||
color: '#0891B2',
|
||
items: [
|
||
{ title: 'Jenkins + Gitea 파이프라인', desc: '5개 시스템 자동 빌드·테스트·배포. webhook → git pull → 재기동. 알림 연동.' },
|
||
{ title: 'git commit 자동 배포', desc: 'post-commit 훅 → workspace 변경 감지 → Gitea push → webhook → 서버 배포. 수동 실행 불필요.' },
|
||
{ title: '1시간 주기 자동 동기화', desc: 'Windows Task Scheduler. 커밋 없이도 workspace↔Gitea 차이 감지 → 자동 배포.' },
|
||
{ title: '바이브 코딩 (VibeSession)', desc: '메신저 명령으로 코딩 세션 시작. 빌드·배포·롤백을 채팅창에서 완결.' },
|
||
{ title: '에이전트리스 배포 엔진', desc: '백업→배포→헬스체크→롤백 시퀀스. Fail-Safe 보장. 감사 추적 자동.' },
|
||
{ title: 'SI 프로젝트 관리 (PMS)', desc: 'WBS·산출물·이슈·위험·보고서. 일간/주간/월간 보고서 자동 생성.' },
|
||
{ title: '자동 보고서 · Excel/PDF', desc: '주간·월간·분기 보고서 즉시 생성. 이메일 자동 발송 스케줄링.' },
|
||
{ title: 'SSL 인증서 관리', desc: 'SSL 만료일 추적. 자동 갱신 알림. 인증서 배포 자동화.' },
|
||
{ title: '서브도메인 전용 HTTPS', desc: 'itsm/manager/mail/git/jenkins/docs.zioinfo.co.kr 포트 없는 서브도메인 전환 완료. Let\'s Encrypt + ZeroSSL.' },
|
||
],
|
||
},
|
||
{
|
||
id: 'extend2',
|
||
label: '2세대 확장 (NEW)',
|
||
icon: <IconBrain size={22} color="#06B6D4"/>,
|
||
color: '#06B6D4',
|
||
items: [
|
||
{ title: '디지털 트윈 인프라', desc: '서버 가상 복제본 실시간 동기화. 장애 시뮬레이션으로 다운타임 80% 사전 예방.', img: '/screenshots/extend2_twin.png' },
|
||
{ title: 'AI 거버넌스 & 편향 감사', desc: 'Ollama 모델 공정성 자동 감사. AI 윤리 준수율 92%. 공공기관 AI 윤리법 선제 준수.', img: '/screenshots/extend2_governance.png' },
|
||
{ title: '자율 비용 최적화', desc: 'AI 낭비 리소스 감지. 월 255만원 절감 권고. 클라우드 30% 비용 절감 자동 실행.', img: '/screenshots/extend2_cost.png' },
|
||
{ title: '공급망 보안 (SLSA)', desc: 'CVE 자동 스캔. SLSA Level 2 달성. Log4Shell·Spring4Shell 등 내장 CVE DB.', img: '/screenshots/extend2_supply.png' },
|
||
{ title: '예측 용량 계획', desc: 'AI 수요 예측 30/60/90일. DB 서버 30일 내 92% 초과 경보. 예산 사이클 연동.', img: '/screenshots/extend2_capacity.png' },
|
||
],
|
||
},
|
||
{
|
||
id: 'extend3',
|
||
label: '3세대 확장 (NEW)',
|
||
icon: <IconNetwork size={22} color="#06B6D4"/>,
|
||
color: '#06B6D4',
|
||
items: [
|
||
{ title: '대화형 운영 AI', desc: '자연어 하나로 전체 운영 제어. "미처리 HIGH SR 담당자 알림" → 자동 실행 + 요약 반환.' },
|
||
{ title: '자율 패치 관리', desc: 'CVE 발견 → 영향 분석 → 승인 → SSH 패치 → 검증 → 롤백 전 단계 자동화.' },
|
||
{ title: 'UX 분석 엔진', desc: '클릭·에러·체류시간 수집. 히트맵·퍼널 분석. Ollama AI 개선 제안 자동 생성.' },
|
||
{ title: 'GRC 자동화', desc: 'IT 정책 초안 자동 생성. 리스크 매트릭스 산출. CSAP·ISMS·ISO27001 감사 보고서.' },
|
||
{ title: '테넌트 AI 학습', desc: '기관별 SR 데이터로 Ollama 파인튜닝. KB 완전 격리. 맞춤 AI 응답 제공.' },
|
||
{ title: 'AI 워크플로우 엔진', desc: '노코드 자동화 규칙 빌더. SR 생성→분류→배정→알림→에스컬레이션 완전 자동.' },
|
||
{ title: '확장 ChatOps', desc: '카카오워크·슬랙·자체 메신저 통합. 인터랙티브 결재 버튼. 전 채널 브로드캐스트.' },
|
||
{ title: '예측 장애 방지', desc: 'CPU·메모리·디스크 전조 신호 4종 패턴 감지. 자동 예방 조치 실행.' },
|
||
{ title: '자동 복구 엔진', desc: 'Runbook 기반 장애 자동 복구. 5개 기본 런북 내장. 에스컬레이션 게이트.' },
|
||
{ title: '정책 엔진', desc: 'IT 정책 규칙 자동 평가·위반 감지·교정. 공공기관 표준 정책 5개 내장.' },
|
||
],
|
||
},
|
||
{
|
||
id: 'autonomy',
|
||
label: '자율화 · 성장 (NEW)',
|
||
icon: <IconLeaf size={22} color="#059669"/>,
|
||
color: '#059669',
|
||
items: [
|
||
{ title: '건강검진 — 자동 테스트', desc: '매일 03:00 전체 API 자동 실행(69개). 실패 시 SR 자동 생성 + 메신저 즉시 알림. 결과 이력 저장.' },
|
||
{ title: '자가 수복 (Self-Healing)', desc: '서비스 장애 감지 → systemctl 자동 재시작 → 헬스체크 → "🔧 GUARDiA가 스스로 고쳤습니다" 보고.' },
|
||
{ title: '성장일지 — 변경이력 자동 수집', desc: 'git 커밋 이력 자동 파싱 → ChangelogEntry 저장. 카테고리(feat/fix/docs)별 집계. API 문서 자동 갱신.' },
|
||
{ title: '매뉴얼 자동 업데이트', desc: '라우터 변경 감지 → api-reference-auto.md 자동 재생성. 엔드포인트 수·메서드·경로 최신 유지.' },
|
||
{ title: '성장 대시보드', desc: '라우터 수·엔드포인트 추정·건강점수·자립도·30일 변경이력·마일스톤 달성 현황 종합 뷰.' },
|
||
{ title: '모바일 Push 알림', desc: 'Expo FCM 디바이스 토큰 등록·관리. 카테고리별 발송. 관리자 일괄 발송. 발송 이력 추적.' },
|
||
{ title: '다국어 i18n (ko/en/ja/zh)', desc: '번역 데이터 CRUD·일괄 임포트. 로케일별 커버리지 측정. 공공기관 다국어 서비스 의무 준수.' },
|
||
{ title: 'LoRA 자동 파인튜닝', desc: '매월 1일 SR 이력 500건→LoRA 학습 자동 시작. 데이터 부족 시 다음 달 연기 + 알림. 모델 품질 loss 추적.' },
|
||
{ title: '주간 자립도 보고서', desc: 'SR 자동처리율·건강점수·자가수복 횟수·자립도 종합. 매주 금요일 메신저 자동 발송.' },
|
||
{ title: '자립도 측정 (5차원)', desc: '건강(25%)·SR자동처리(30%)·자가수복(20%)·보고서(10%)·파인튜닝(15%). 현재 30% → 목표 85%.' },
|
||
{ title: '자립도 로드맵', desc: '현재 30% → 3개월 50% → 6개월 70% → 1년 85% "GUARDiA가 알아서 다 했습니다."' },
|
||
],
|
||
},
|
||
];
|
||
|
||
/* 하이라이트 카드 (히어로 섹션용) */
|
||
const IC = (c,s=22) => ({ color:c, size:s });
|
||
const FEATURES = [
|
||
{ icon:<IconAI {...IC('#6366F1')}/>, title:'AI 에이전트 자동화', desc:'Ollama 온프레미스 sLLM. 메신저 한 줄 → 자동 배포·운영. 폐쇄망 완전 지원.' },
|
||
{ icon:<IconWrench {...IC('#0EA5E9')}/>, title:'에이전트리스 아키텍처', desc:'SSH/SFTP만으로 Tomcat·JBoss·WebLogic 원격 관리. 대상 서버 소프트웨어 설치 불필요.' },
|
||
{ icon:<IconMessage {...IC('#10B981')}/>, title:'ChatOps 자연어 명령', desc:'"서버1 헬스체크"·"SR-XXXX 배포" — 자연어를 자동으로 봇 명령어로 변환.' },
|
||
{ icon:<IconSearch {...IC('#F59E0B')}/>, title:'RAG 하이브리드 검색', desc:'BM25 + pgvector RRF. 자연어 질의로 KB·SR 통합 검색 + Ollama 답변 생성.' },
|
||
{ icon:<IconBulb {...IC('#EF4444')}/>, title:'Text-to-SQL 어시스턴트', desc:'"이번 달 HIGH SR는?" — 자연어로 ITSM DB 직접 조회. SELECT 전용 안전 실행.' },
|
||
{ icon:<IconFileText {...IC('#8B5CF6')}/>, title:'Document AI (OCR)', desc:'Upstage 연동. 계약서·납품서·청구서 자동 파싱 → ITSM 자동 등록.' },
|
||
{ icon:<IconCloud {...IC('#0891B2')}/>, title:'멀티클라우드 통합', desc:'NCloud·AWS·KT Cloud 단일 관제. 비용 최적화 AI 권고. K-Cloud 전환 지원.' },
|
||
{ icon:<IconServer {...IC('#059669')}/>, title:'CMDB 자동 발견', desc:'SSH/SNMP 에이전트리스 스캔. 서버·장비·의존성 자동 등록. 드리프트 실시간 감지.' },
|
||
{ icon:<IconBarChart {...IC('#D97706')}/>, title:'KPI + BI 대시보드', desc:'MTTR·FCR·SLA 내장 5종 KPI. SR 트렌드·히트맵·MTTR 차트. 예측 분석.' },
|
||
{ icon:<IconShield {...IC('#DC2626')}/>, title:'보안 자동화', desc:'PAM·MFA·CSAP 100항목·취약점 스캔·불변 감사로그. LDAP·SSO·드리프트 교정.' },
|
||
{ icon:<IconGovt {...IC('#0369A1')}/>, title:'공공기관 특화', desc:'나라장터·CSAP·ISP·K-Cloud·공공API·행정망 분리. 공공 IT 표준 완전 지원.' },
|
||
{ icon:<IconShield {...IC('#7C3AED')}/>, title:'DR + 네트워크 관리', desc:'Failover·RTO/RPO 추적. 스위치·방화벽 설정 백업·변경 감지·토폴로지 갱신.' },
|
||
{ icon:<IconLink {...IC('#EC4899')}/>, title:'엔터프라이즈 통합', desc:'Jira·Slack·ServiceNow·ERP·SSO·카카오 알림톡. 계약서 OCR 자동화 포함.' },
|
||
{ icon:<IconNetwork {...IC('#6366F1')}/>, title:'자율 워크플로우 엔진', desc:'조건 기반 자동화 규칙. SR 생성 트리거 → 자동 배정·알림·교정 시퀀스.' },
|
||
{ icon:<IconBriefcase {...IC('#8B5CF6')}/>, title:'SaaS 멀티테넌트', desc:'화이트라벨·구독·과금·셀프서비스 포털. 기관별 완전 격리. 1,000+ 기관 지원.' },
|
||
{ icon:<IconMobile {...IC('#0EA5E9')}/>, title:'APK QR 직접 배포', desc:'Manager에서 APK 업로드 → QR 생성. 스캔 즉시 설치. 앱스토어 불필요. 내부망 배포 최적.' },
|
||
{ icon:<IconZap {...IC('#F59E0B')}/>, title:'배치 SSH + 자산 QR', desc:'수십 서버 동시 SSH 실행·결과 수집. QR 라벨로 자산 실사 체크인 자동화.' },
|
||
{ icon:<IconPieChart {...IC('#10B981')}/>, title:'디자인 AI SR 자동화', desc:'Ollama llava 비전 분석→CSS/SVG 자동 생성. 디자인 SR 90% AI 처리. 스크린샷→개선 제안.' },
|
||
{ icon:<IconMessage {...IC('#EF4444')}/>, title:'음성인식 + 다음명령 제시', desc:'expo-speech-recognition 온디바이스. 한국어 STT. Messenger 명령 칩 자동 추천.' },
|
||
{ icon:<IconBrain {...IC('#7C3AED')}/>, title:'AI Brain 지능화 엔진', desc:'영구 메모리(pgvector)·자동 스킬·LoRA 파인튜닝·지식 그래프. 운영 경험 누적→자기 개선.' },
|
||
{ icon:<IconLock {...IC('#0369A1')}/>, title:'Zero Trust + SBOM + N²SF', desc:'ZTNA 정책·디바이스 신뢰·SBOM CycloneDX·국정원 N²SF 준수. EU CRA 공공 조달 완전 지원.' },
|
||
{ icon:<IconLeaf {...IC('#059669')}/>, title:'GreenOps + Edge/IoT', desc:'Scope 2 탄소 추적(EU CSRD)·9.21억 IoT 디바이스. Carbon-aware 스케줄링.' },
|
||
{ icon:<IconBuilding {...IC('#0891B2')}/>, title:'IDP 개발자 플랫폼', desc:'소프트웨어 카탈로그·Golden Path 템플릿·셀프서비스 포털. 30~50% 배포 단축.' },
|
||
{ icon:<IconCode {...IC('#0891B2')}/>, title:'CI/CD 파이프라인', desc:'Jenkins + Gitea. 5개 시스템 자동 빌드·배포·롤백·알림. 서버 빌드 방식.' },
|
||
{ icon:<IconCheckCircle {...IC('#059669')}/>, title:'자가수복 + 건강검진', desc:'매일 03:00 자동 테스트(69개). 장애 감지 시 서비스 자동 재시작 + 자동 보고.' },
|
||
{ icon:<IconTrendUp {...IC('#059669')}/>, title:'자립도 측정 30→85%', desc:'5차원 자립도 점수. 현재 30% → 목표 85%. 주간 보고서 자동 발송. LoRA 파인튜닝 자동화.' },
|
||
{ icon:<IconShuffle {...IC('#6366F1')}/>, title:'git commit → 자동 배포', desc:'post-commit 훅. workspace 변경 감지 → Gitea push → webhook → 서버 자동 배포. 수동 불필요.' },
|
||
];
|
||
|
||
const EDITIONS = [
|
||
{
|
||
name: 'COMMUNITY', badge: '무료',
|
||
color: '#10B981',
|
||
target: '소규모 기관·검토용',
|
||
features: [
|
||
'기본 SR 관리 (무제한)', 'CMDB 서버 20대', '사용자 10명',
|
||
'KPI 대시보드 (기본)', 'AI 챗봇 (온프레미스)', '봇 기본 명령어',
|
||
],
|
||
cta: '무료 시작',
|
||
href: '/support/contact?type=community',
|
||
},
|
||
{
|
||
name: 'STANDARD', badge: '권장',
|
||
color: 'var(--primary)',
|
||
target: '중형 기관',
|
||
features: [
|
||
'전체 ITSM 기능', 'AI 에이전트 + RAG 검색', 'LDAP/SSO/MFA 보안',
|
||
'KPI·BI·예측 분석', 'Jira·Slack 연동', 'OCR 문서 자동화',
|
||
'멀티클라우드 관제', 'CSAP 자동 점검',
|
||
],
|
||
cta: '도입 문의',
|
||
href: '/support/contact?type=standard',
|
||
highlight: true,
|
||
},
|
||
{
|
||
name: 'ENTERPRISE', badge: '맞춤',
|
||
color: '#6366F1',
|
||
target: '대형 관공서·광역기관',
|
||
features: [
|
||
'무제한 서버·기관', '나라장터·K-Cloud·공공API 완전 연동',
|
||
'Text-to-SQL + Learning Loop', '구성 드리프트 자동 교정',
|
||
'화이트라벨 + 구독·과금', 'ServiceNow·ERP 통합',
|
||
'전담 기술 지원', '맞춤 SLA·보안 컨설팅',
|
||
],
|
||
cta: '전문가 상담',
|
||
href: '/support/contact?type=enterprise',
|
||
},
|
||
];
|
||
|
||
/* ── 메신저 봇 명령어 목록 ──────────────────────────────── */
|
||
const BOT_COMMANDS = [
|
||
/* SR 관리 */
|
||
{ cmd: '/sr <제목>', desc: 'SR(서비스요청) 즉시 접수', cat: 'SR 관리' },
|
||
{ cmd: '/status', desc: '시스템 전체 현황 요약', cat: 'SR 관리' },
|
||
{ cmd: '/assign <SR-ID> <담당자>', desc: 'SR 담당자 즉시 배정', cat: 'SR 관리' },
|
||
{ cmd: '/approve <SR-ID>', desc: 'SR 또는 자율운영 작업 즉시 승인', cat: 'SR 관리' },
|
||
{ cmd: '/reject <SR-ID> [사유]', desc: 'SR 반려', cat: 'SR 관리' },
|
||
{ cmd: '/bulk <action> <SR-ID...>', desc: 'SR 대량 처리 (close/assign/status)', cat: 'SR 관리' },
|
||
{ cmd: '/sla', desc: 'SLA 위반 현황 목록', cat: 'SR 관리' },
|
||
{ cmd: '/escalate <SR-ID>', desc: '당직자에게 에스컬레이션', cat: 'SR 관리' },
|
||
/* 인시던트 */
|
||
{ cmd: '/incident <제목> [P1~P4]', desc: '인시던트 빠른 등록', cat: '인시던트' },
|
||
{ cmd: '/oncall', desc: '현재 당직자 즉시 조회', cat: '인시던트' },
|
||
{ cmd: '/rca <INC-ID>', desc: 'AI 자동 RCA 근본원인 분석', cat: '인시던트' },
|
||
/* 배포/CI-CD */
|
||
{ cmd: '!vibe <SR-ID>', desc: '바이브 코딩 세션 시작', cat: '배포 CI-CD' },
|
||
{ cmd: '!build <세션ID>', desc: '빌드 실행', cat: '배포 CI-CD' },
|
||
{ cmd: '!deploy <세션ID>', desc: 'WAS 배포 실행 (SSH)', cat: '배포 CI-CD' },
|
||
{ cmd: '/rollback <세션ID>', desc: '긴급 롤백', cat: '배포 CI-CD' },
|
||
{ cmd: '/cicd [project]', desc: 'Jenkins+Gitea CI/CD 전체 현황', cat: '배포 CI-CD' },
|
||
{ cmd: '/jenkins <job> [build|log]', desc: 'Jenkins 빌드 트리거·로그', cat: '배포 CI-CD' },
|
||
{ cmd: '/git <repo> [log|pr|branch]', desc: 'Gitea 저장소 정보', cat: '배포 CI-CD' },
|
||
{ cmd: '/release <project> [버전]', desc: '릴리즈 배포 파이프라인', cat: '배포 CI-CD' },
|
||
/* 인프라 제어 */
|
||
{ cmd: '!health <서버명>', desc: '서버 헬스체크', cat: '인프라' },
|
||
{ cmd: '!log <서버명>', desc: '서버 로그 분석', cat: '인프라' },
|
||
{ cmd: '!sm <서버> <스크립트>', desc: 'SM 원격 스크립트 실행', cat: '인프라' },
|
||
{ cmd: '/topology <서버명>', desc: 'CI 의존관계 토폴로지 조회', cat: '인프라' },
|
||
{ cmd: '/scouter <서버명>', desc: 'Scouter APM 실시간 메트릭', cat: '인프라' },
|
||
/* PMS 프로젝트 */
|
||
{ cmd: '/pms <프로젝트코드>', desc: '프로젝트 진척 현황', cat: 'PMS' },
|
||
{ cmd: '/report <코드> [daily|weekly|monthly]', desc: '보고서 발송', cat: 'PMS' },
|
||
{ cmd: '/wbs <코드>', desc: 'WBS 지연 현황', cat: 'PMS' },
|
||
{ cmd: '/deliverables <코드>', desc: '산출물 제출 현황', cat: 'PMS' },
|
||
{ cmd: '/issues <코드>', desc: '미결 이슈 목록', cat: 'PMS' },
|
||
/* 보안 */
|
||
{ cmd: '/scan', desc: '시큐어코딩·보안 자동 점검', cat: '보안' },
|
||
{ cmd: '/vuln <서버|IP>', desc: '취약점 스캔', cat: '보안' },
|
||
{ cmd: '/checklist', desc: '공공기관 보안 이행 현황', cat: '보안' },
|
||
{ cmd: '/perf [url]', desc: '성능·부하 테스트', cat: '보안' },
|
||
{ cmd: '/autoq', desc: '자율 운영 승인 대기 목록', cat: '자율 운영' },
|
||
/* 스크랩핑 봇 */
|
||
{ cmd: '!scrap <url>', desc: 'URL 즉시 스크랩', cat: '스크랩' },
|
||
{ cmd: '!scrap list [n]', desc: '최근 스크랩 결과 목록', cat: '스크랩' },
|
||
{ cmd: '!scrap publish <id>', desc: '스크랩 게시 + 메신저 알림', cat: '스크랩' },
|
||
{ cmd: '!scrap del <id>', desc: '스크랩 삭제', cat: '스크랩' },
|
||
{ cmd: '!scrap restore <id>', desc: '스크랩 원복', cat: '스크랩' },
|
||
/* 디자인 */
|
||
{ cmd: '/design capture', desc: 'UI 현재 화면 스크린샷 (Playwright)', cat: '디자인' },
|
||
{ cmd: '/design variant <키워드>', desc: 'Variant 디자인 레퍼런스 탐색', cat: '디자인' },
|
||
{ cmd: '/design <시스템>', desc: '시스템별 UI 개편 실행', cat: '디자인' },
|
||
/* 공지 */
|
||
{ cmd: '/notify <메시지>', desc: '운영팀 전체 공지 발송', cat: '공지' },
|
||
{ cmd: '/license', desc: '라이선스 상태 조회', cat: '공지' },
|
||
];
|
||
|
||
const MESSENGER_PLATFORMS = [
|
||
{ name: '카카오워크', icon: '💬', color: '#FAE100', textColor: '#3C1E1E', desc: '결재 버튼 + 봇 명령 완벽 지원' },
|
||
{ name: '네이버웍스', icon: '🟢', color: '#03C75A', textColor: '#fff', desc: 'Flex 메시지 + Rich 결과 표시' },
|
||
{ name: '슬랙', icon: '💜', color: '#611F69', textColor: '#fff', desc: '슬래시 명령 + 블록킷 UI' },
|
||
{ name: '자체 메신저', icon: '🔵', color: '#0051A2', textColor: '#fff', desc: 'GUARDiA 내장 Slack형 메신저' },
|
||
];
|
||
|
||
const TECH_STACK = [
|
||
{ category: 'Backend', items: ['Python 3.11 / FastAPI (비동기)', 'SQLAlchemy Async ORM', 'PostgreSQL 16 + pgvector'] },
|
||
{ category: 'AI · LLM', items: ['Ollama (온프레미스 전용)', 'llama3:8b / llava (멀티모달)', 'LangChain RAG + ChromaDB'] },
|
||
{ category: 'Document AI', items: ['Upstage Document Parse / Extract', 'RAG 하이브리드 (BM25 + pgvector)', 'Text-to-SQL (Ollama 생성)'] },
|
||
{ category: 'Cloud', items: ['NCloud API (서버·LB·스토리지)', 'AWS SigV4 직접 연동', 'Kubernetes SSH 에이전트리스'] },
|
||
{ category: '외부 연동', items: ['Jira REST API v3 양방향', 'Slack Block Kit + Slash', 'ServiceNow · ERP · SSO (SAML/OIDC)'] },
|
||
{ category: 'Infra', items: ['paramiko SSH/SFTP 에이전트리스', 'SNMP v2c/v3 장비 발견', 'AES-256-GCM 암호화'] },
|
||
{ category: 'Frontend', items: ['React 18 + TypeScript', 'Chart.js + D3.js 대시보드', 'React Native (iOS/Android)'] },
|
||
{ category: 'DevOps', items: ['Jenkins 멀티브랜치 파이프라인', 'Gitea Self-hosted + Webhook', 'APScheduler 크론 자동화'] },
|
||
{ category: '보안·모니터링', items: ['Scouter APM (Java WAS 전용)', 'Prometheus / Grafana', 'CSAP·드리프트·취약점 자동 점검'] },
|
||
];
|
||
|
||
export default function GuardiaDetail() {
|
||
useSeoMeta({
|
||
title: 'GUARDiA ITSM — AI 기반 공공기관 인프라 자율 운영 플랫폼 (185+ 기능)',
|
||
description: 'GUARDiA ITSM: 1,100개+ API, 185가지 이상 기능. 자가수복·자립도 측정·LoRA 파인튜닝·CI/CD 자동배포·서브도메인 HTTPS·ZTNA·SBOM·N²SF·IDP·GreenOps. 폐쇄망/개방망 지원.',
|
||
path: '/solution/guardia',
|
||
keywords: 'GUARDiA ITSM, AI ITSM, 공공기관 인프라 자동화, 자가수복, 자립도, LoRA 파인튜닝, ChatOps, 에이전트리스, RAG 검색, Text-to-SQL, CMDB 자동 발견, 멀티클라우드, 나라장터, Upstage OCR, 구성 드리프트',
|
||
image: '/screenshots/01_dashboard.png',
|
||
});
|
||
const [activeTab, setActiveTab] = useState('features');
|
||
|
||
return (
|
||
<main id="main-content" className="guardia-page">
|
||
|
||
{/* ── 히어로 ────────────────────────────────────────── */}
|
||
<section className="gd-hero">
|
||
<div className="gd-hero-overlay" />
|
||
<div className="container gd-hero-inner">
|
||
<div className="gd-hero-text">
|
||
<span className="badge badge-new" style={{fontSize:'12px',padding:'4px 12px'}}>NEW v2.0</span>
|
||
<h1 className="gd-hero-title">
|
||
<span>GUARDiA</span> ITSM
|
||
</h1>
|
||
<p className="gd-hero-sub">
|
||
AI 기반 레거시 인프라 자율 운영 플랫폼<br/>
|
||
<strong>메신저 한 줄 명령</strong>으로 1,000개 관공서 인프라를 자동화
|
||
</p>
|
||
<div className="gd-hero-actions">
|
||
<Link to="/support/contact?type=demo" className="btn btn-white btn-lg">
|
||
무료 데모 신청
|
||
</Link>
|
||
<a href="#features" className="btn btn-lg" style={{color:'rgba(255,255,255,.85)',border:'1px solid rgba(255,255,255,.3)'}}>
|
||
기능 살펴보기 ↓
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div className="gd-hero-stats">
|
||
{[
|
||
{val:'1,000+', lab:'관리 기관'},
|
||
{val:'1,100+', lab:'API 엔드포인트'},
|
||
{val:'185+', lab:'구현 완료 기능'},
|
||
{val:'0개', lab:'대상 서버 추가 설치'},
|
||
].map((s,i) => (
|
||
<div key={i} className="gd-stat">
|
||
<div className="gd-stat-val">{s.val}</div>
|
||
<div className="gd-stat-lab">{s.lab}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── 탭 메뉴 ──────────────────────────────────────── */}
|
||
<div className="gd-tabs-bar">
|
||
<div className="container">
|
||
<div className="gd-tabs">
|
||
{[
|
||
{id:'features', label:'핵심 기능'},
|
||
{id:'screenshots', label:'화면 미리보기'},
|
||
{id:'app', label:'모바일 앱'},
|
||
{id:'messenger', label:'Messenger Bot'},
|
||
{id:'manager', label:'Manager'},
|
||
{id:'install', label:'설치 가이드'},
|
||
{id:'manual', label:'매뉴얼'},
|
||
{id:'editions', label:'에디션 비교'},
|
||
{id:'tech', label:'기술 스택'},
|
||
].map(t => (
|
||
<button key={t.id}
|
||
className={`gd-tab ${activeTab === t.id ? 'active' : ''}`}
|
||
onClick={() => setActiveTab(t.id)}>
|
||
{t.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ── 핵심 기능 ─────────────────────────────────────── */}
|
||
{activeTab === 'features' && (
|
||
<section id="features" className="section">
|
||
<div className="container">
|
||
<div className="section-header">
|
||
<span className="section-label">Core Features</span>
|
||
<h2 className="section-title">GUARDiA가 제공하는<br/><em>185가지 이상 핵심 기능</em></h2>
|
||
<p style={{color:'var(--gray-500)',marginTop:'12px',fontSize:'16px'}}>
|
||
11개 카테고리 · 1,100개+ API 엔드포인트 · 3세대 확장 완료
|
||
</p>
|
||
<div className="divider" />
|
||
</div>
|
||
|
||
{/* ── 카테고리별 전체 기능 표 ───────────────────── */}
|
||
<div style={{marginBottom:'64px'}}>
|
||
{FEATURE_CATEGORIES.map(cat => (
|
||
<div key={cat.id} style={{marginBottom:'40px'}}>
|
||
<div style={{display:'flex',alignItems:'center',gap:'10px',marginBottom:'16px'}}>
|
||
<span style={{display:'flex',alignItems:'center'}}>{cat.icon}</span>
|
||
<h3 style={{
|
||
fontSize:'20px',fontWeight:'700',color:'var(--gray-900)',margin:0,
|
||
borderLeft:`4px solid ${cat.color}`,paddingLeft:'12px'
|
||
}}>{cat.label}</h3>
|
||
<span style={{
|
||
fontSize:'12px',background:cat.color,color:'#fff',
|
||
borderRadius:'12px',padding:'2px 10px',fontWeight:'600'
|
||
}}>{cat.items.length}개</span>
|
||
</div>
|
||
<div style={{
|
||
display:'grid',
|
||
gridTemplateColumns:'repeat(auto-fill, minmax(280px, 1fr))',
|
||
gap:'12px',
|
||
}}>
|
||
{cat.items.map((item, i) => (
|
||
<div key={i} style={{
|
||
background:'var(--gray-50)',borderRadius:'10px',
|
||
overflow:'hidden',
|
||
borderLeft:`3px solid ${cat.color}`,
|
||
transition:'box-shadow .2s',
|
||
}}>
|
||
{item.img && (
|
||
<img src={item.img} alt={item.title}
|
||
style={{width:'100%',display:'block',maxHeight:'160px',objectFit:'cover',objectPosition:'top'}}
|
||
onError={e=>{e.target.style.display='none';}}/>
|
||
)}
|
||
<div style={{padding:'14px 16px'}}>
|
||
<div style={{fontWeight:'700',color:'var(--gray-900)',fontSize:'14px',marginBottom:'4px'}}>
|
||
{item.img ? '' : '✅ '}{item.title}
|
||
</div>
|
||
<div style={{color:'var(--gray-500)',fontSize:'13px',lineHeight:'1.5'}}>
|
||
{item.desc}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
{/* 실행 화면 스크린샷 */}
|
||
{/* GUARDiA ITSM 실행 화면 */}
|
||
<div className="section-header" style={{marginBottom:'24px'}}>
|
||
<span className="section-label" style={{fontSize:'12px'}}>GUARDiA ITSM</span>
|
||
<h3 style={{fontSize:'22px',fontWeight:'700',color:'var(--gray-900)',margin:'8px 0 0'}}>
|
||
IT 서비스 관리 플랫폼
|
||
</h3>
|
||
</div>
|
||
<div className="gd-screenshots">
|
||
{[
|
||
{file:'itsm_02_dashboard', caption:'통합 대시보드 — SR 7건·AI 인사이트 실시간'},
|
||
{file:'itsm_01_login', caption:'로그인 화면 — JWT + 2FA/OTP 보안'},
|
||
{file:'itsm_05_incidents', caption:'장애 관리 — P1~P3 MTTR 추적'},
|
||
{file:'itsm_06_agents', caption:'AI 에이전트 — Ollama 4개 모델 온라인'},
|
||
{file:'itsm_07_ssl', caption:'SSL 인증서 — 만료 추적·자동 갱신'},
|
||
].map((s,i) => (
|
||
<div key={i} className="screenshot-card">
|
||
<img src={`/screenshots/${s.file}.png`} alt={s.caption}
|
||
className="screenshot-img"
|
||
onError={e=>{e.target.style.display='none';e.target.nextSibling.style.display='flex';}}/>
|
||
<div className="screenshot-placeholder" style={{display:'none'}}>
|
||
<span className="icon">🖥️</span><span>준비 중</span>
|
||
</div>
|
||
<div className="screenshot-caption">{s.caption}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* GUARDiA Manager 실행 화면 */}
|
||
<div className="section-header" style={{marginTop:'48px',marginBottom:'24px'}}>
|
||
<span className="section-label" style={{fontSize:'12px'}}>GUARDiA Manager</span>
|
||
<h3 style={{fontSize:'22px',fontWeight:'700',color:'var(--gray-900)',margin:'8px 0 0'}}>
|
||
통합 관제 관리자 포털
|
||
</h3>
|
||
</div>
|
||
<div className="gd-screenshots">
|
||
{[
|
||
{file:'07_manager_dashboard', caption:'Manager 대시보드 — 서버·SR·배포 종합 관제'},
|
||
{file:'08_manager_dr', caption:'DR 재해복구 — RTO/RPO 실적 대시보드'},
|
||
{file:'09_manager_network', caption:'네트워크 장비 — 설정 백업·변경 감지'},
|
||
{file:'10_manager_csap', caption:'CSAP 보안 점검 — 준수율 B+등급'},
|
||
].map((s,i) => (
|
||
<div key={i} className="screenshot-card">
|
||
<img src={`/screenshots/${s.file}.png`} alt={s.caption}
|
||
className="screenshot-img"
|
||
onError={e=>{e.target.style.display='none';e.target.nextSibling.style.display='flex';}}/>
|
||
<div className="screenshot-placeholder" style={{display:'none'}}>
|
||
<span className="icon">🖥️</span><span>준비 중</span>
|
||
</div>
|
||
<div className="screenshot-caption">{s.caption}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* GUARDiA Messenger 모바일 앱 */}
|
||
<div className="section-header" style={{marginTop:'48px',marginBottom:'24px'}}>
|
||
<span className="section-label" style={{fontSize:'12px'}}>GUARDiA Messenger</span>
|
||
<h3 style={{fontSize:'22px',fontWeight:'700',color:'var(--gray-900)',margin:'8px 0 0'}}>
|
||
모바일 앱 (Android · iOS)
|
||
</h3>
|
||
</div>
|
||
<div className="gd-screenshots gd-screenshots--mobile">
|
||
{[
|
||
{file:'11_app_home', caption:'홈 대시보드 — SR·서버 실시간 현황'},
|
||
{file:'12_app_sr', caption:'SR 서비스 요청 — 등록·처리·완료'},
|
||
{file:'13_app_chat', caption:'AI 챗봇 — 자연어 명령으로 서버 제어'},
|
||
].map((s,i) => (
|
||
<div key={i} className="screenshot-card screenshot-card--mobile">
|
||
<img src={`/screenshots/${s.file}.png`} alt={s.caption}
|
||
className="screenshot-img"
|
||
onError={e=>{e.target.style.display='none';e.target.nextSibling.style.display='flex';}}/>
|
||
<div className="screenshot-placeholder" style={{display:'none'}}>
|
||
<span className="icon">📱</span><span>준비 중</span>
|
||
</div>
|
||
<div className="screenshot-caption">{s.caption}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* 자율화·성장 신규 기능 */}
|
||
<div className="section-header" style={{marginTop:'48px',marginBottom:'24px'}}>
|
||
<span className="section-label" style={{fontSize:'12px',background:'#059669',color:'#fff',padding:'3px 10px',borderRadius:'12px'}}>NEW v2.1</span>
|
||
<h3 style={{fontSize:'22px',fontWeight:'700',color:'var(--gray-900)',margin:'8px 0 0'}}>
|
||
자율화 · 성장 기능 (2026-06 추가)
|
||
</h3>
|
||
</div>
|
||
<div className="gd-screenshots">
|
||
{[
|
||
{file:'autonomy_health', caption:'건강검진 — 매일 03:00 69개 테스트 자동 실행'},
|
||
{file:'autonomy_growth', caption:'성장일지 — 변경이력 자동 수집·196커밋 추적'},
|
||
{file:'autonomy_score', caption:'자립도 35% — 5차원 측정·85% 목표'},
|
||
{file:'autonomy_finetune', caption:'LoRA 파인튜닝 — SR 523건으로 모델 자동 개선'},
|
||
].map((s,i) => (
|
||
<div key={i} className="screenshot-card">
|
||
<img src={`/screenshots/${s.file}.png`} alt={s.caption}
|
||
className="screenshot-img"
|
||
onError={e=>{e.target.style.display='none';e.target.nextSibling.style.display='flex';}}/>
|
||
<div className="screenshot-placeholder" style={{display:'none',flexDirection:'column',alignItems:'center',justifyContent:'center',height:'200px',background:'linear-gradient(135deg,#f0fdf4,#dcfce7)',borderRadius:'8px',gap:'8px'}}>
|
||
<span style={{fontSize:'32px'}}>🌱</span>
|
||
<span style={{fontSize:'13px',color:'#059669',fontWeight:'600'}}>{s.caption}</span>
|
||
<a href="https://itsm.zioinfo.co.kr" target="_blank" rel="noopener noreferrer"
|
||
style={{fontSize:'12px',color:'#0369a1',textDecoration:'none',marginTop:'4px'}}>
|
||
라이브 확인 →
|
||
</a>
|
||
</div>
|
||
<div className="screenshot-caption">{s.caption}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* 라이브 데모 링크 */}
|
||
<div style={{background:'linear-gradient(135deg,#eff6ff,#dbeafe)',borderRadius:'16px',padding:'32px',marginTop:'48px',textAlign:'center'}}>
|
||
<h3 style={{fontSize:'20px',fontWeight:'700',color:'var(--gray-900)',marginBottom:'8px'}}>
|
||
지금 바로 확인하세요
|
||
</h3>
|
||
<p style={{color:'var(--gray-500)',marginBottom:'24px',fontSize:'14px'}}>
|
||
실제 운영 중인 GUARDiA 시스템에 접속해 직접 체험할 수 있습니다
|
||
</p>
|
||
<div style={{display:'flex',gap:'12px',justifyContent:'center',flexWrap:'wrap'}}>
|
||
{[
|
||
{href:'https://itsm.zioinfo.co.kr', label:'GUARDiA ITSM', icon:<IconWrench size={24} color="#00A0C8"/>, desc:'admin / 1111'},
|
||
{href:'https://manager.zioinfo.co.kr', label:'GUARDiA Manager', icon:<IconBarChart size={24} color="#00A0C8"/>, desc:'관리자 포털'},
|
||
{href:'https://mail.zioinfo.co.kr', label:'웹메일', icon:<IconEmail size={24} color="#00A0C8"/>, desc:'@zioinfo.co.kr'},
|
||
{href:'https://git.zioinfo.co.kr', label:'Gitea', icon:<IconCode size={24} color="#00A0C8"/>, desc:'소스 저장소'},
|
||
].map((l,i) => (
|
||
<a key={i} href={l.href} target="_blank" rel="noopener noreferrer"
|
||
style={{display:'flex',flexDirection:'column',alignItems:'center',gap:'6px',
|
||
padding:'16px 24px',background:'#fff',borderRadius:'12px',
|
||
border:'1px solid #bfdbfe',textDecoration:'none',minWidth:'120px',
|
||
boxShadow:'0 1px 3px rgba(0,0,0,.1)',transition:'transform .2s'}}
|
||
onMouseOver={e=>e.currentTarget.style.transform='translateY(-2px)'}
|
||
onMouseOut={e=>e.currentTarget.style.transform='translateY(0)'}>
|
||
<span style={{fontSize:'24px'}}>{l.icon}</span>
|
||
<span style={{fontSize:'14px',fontWeight:'700',color:'var(--gray-900)'}}>{l.label}</span>
|
||
<span style={{fontSize:'11px',color:'var(--gray-500)'}}>{l.desc}</span>
|
||
</a>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="section-header" style={{marginTop:'60px',marginBottom:'32px'}}>
|
||
<h3 style={{fontSize:'28px',fontWeight:'800',color:'var(--gray-900)'}}>핵심 기능 상세</h3>
|
||
</div>
|
||
<div className="gd-features-grid">
|
||
{FEATURES.map((f,i) => (
|
||
<div key={i} className="gd-feature-card card">
|
||
<div className="gd-feature-icon">{f.icon}</div>
|
||
<h3>{f.title}</h3>
|
||
<p>{f.desc}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* ── 모바일 앱 ────────────────────────────────────── */}
|
||
{activeTab === 'app' && (
|
||
<section className="section">
|
||
<div className="container">
|
||
<div className="section-header">
|
||
<span className="section-label">GUARDiA Messenger App</span>
|
||
<h2 className="section-title">현장에서 바로<br/><em>스마트폰으로 관제</em></h2>
|
||
<div className="divider" />
|
||
<p className="section-desc">
|
||
Android · iOS 모두 지원. SR 접수·처리, DR 복구 테스트, 네트워크 장비 관제,<br/>
|
||
AI 챗봇 명령까지 — 어디서든 GUARDiA를 손에 쥐세요.
|
||
</p>
|
||
</div>
|
||
<div className="gd-screenshots gd-screenshots--mobile">
|
||
{[
|
||
{file:'11_app_home', caption:'홈 대시보드 — SR·서버 실시간 현황'},
|
||
{file:'12_app_sr', caption:'SR 목록 — 우선순위별 처리'},
|
||
{file:'13_app_chat', caption:'AI 챗봇 — 자연어로 서버 제어'},
|
||
{file:'14_app_dr', caption:'DR 재해복구 — RTO/RPO 추적'},
|
||
{file:'15_app_network', caption:'네트워크 장비 — 현장 점검'},
|
||
].map((s,i) => (
|
||
<div key={i} className="screenshot-card screenshot-card--mobile">
|
||
<img src={`/screenshots/${s.file}.png`} alt={s.caption}
|
||
className="screenshot-img"
|
||
onError={e=>{e.target.style.display='none';e.target.nextSibling.style.display='flex';}}/>
|
||
<div className="screenshot-placeholder" style={{display:'none'}}>
|
||
<span className="icon">📱</span><span>준비 중</span>
|
||
</div>
|
||
<div className="screenshot-caption">{s.caption}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* 앱 스토어 배지 */}
|
||
<div style={{display:'flex',justifyContent:'center',gap:16,marginTop:40}}>
|
||
<a href="#" style={{display:'flex',alignItems:'center',gap:10,
|
||
padding:'12px 24px',background:'#1e293b',borderRadius:12,
|
||
color:'#e2e8f0',textDecoration:'none',border:'1px solid rgba(255,255,255,.1)'}}>
|
||
<span style={{fontSize:28}}>🤖</span>
|
||
<div><div style={{fontSize:10,opacity:.6}}>다운로드</div><div style={{fontWeight:700,fontSize:15}}>Google Play</div></div>
|
||
</a>
|
||
<a href="#" style={{display:'flex',alignItems:'center',gap:10,
|
||
padding:'12px 24px',background:'#1e293b',borderRadius:12,
|
||
color:'#e2e8f0',textDecoration:'none',border:'1px solid rgba(255,255,255,.1)'}}>
|
||
<span style={{fontSize:28}}>🍎</span>
|
||
<div><div style={{fontSize:10,opacity:.6}}>다운로드</div><div style={{fontWeight:700,fontSize:15}}>App Store</div></div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* ── 메신저 봇 상세 소개 ──────────────────────────── */}
|
||
{activeTab === 'messenger' && (
|
||
<section className="section">
|
||
<div className="container">
|
||
<div className="section-header">
|
||
<span className="section-label">ChatOps Messenger</span>
|
||
<h2 className="section-title">메신저 하나로<br/><em>모든 인프라를 제어</em></h2>
|
||
<div className="divider" />
|
||
<p className="section-desc">
|
||
익숙한 메신저에서 명령어 하나로 서버 배포·장애 대응·보고서 발송까지.<br/>
|
||
GUARDiA Bot은 25개 명령어로 IT 운영의 모든 순간을 지원합니다.
|
||
</p>
|
||
</div>
|
||
|
||
{/* 지원 플랫폼 */}
|
||
<div className="messenger-platforms">
|
||
{MESSENGER_PLATFORMS.map((p,i) => (
|
||
<div key={i} className="messenger-platform" style={{background: p.color}}>
|
||
<span className="platform-icon">{p.icon}</span>
|
||
<div>
|
||
<strong style={{color: p.textColor}}>{p.name}</strong>
|
||
<p style={{color: p.textColor, opacity:.85}}>{p.desc}</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* 명령어 카탈로그 */}
|
||
<div className="cmd-catalog">
|
||
<h3 className="cmd-catalog-title">25개 봇 명령어 전체 목록</h3>
|
||
{['SR 관리','인시던트','배포 제어','PMS','모니터링','보안','공지'].map(cat => {
|
||
const cmds = BOT_COMMANDS.filter(c => c.cat === cat);
|
||
return (
|
||
<div key={cat} className="cmd-group">
|
||
<h4 className="cmd-group-title">{cat}</h4>
|
||
<div className="cmd-list">
|
||
{cmds.map((c,i) => (
|
||
<div key={i} className="cmd-item">
|
||
<code className="cmd-code">{c.cmd}</code>
|
||
<span className="cmd-desc">{c.desc}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
{/* 데모 시나리오 */}
|
||
<div className="messenger-demo">
|
||
<h3 className="demo-title">실제 운영 시나리오</h3>
|
||
<div className="demo-scenario">
|
||
<div className="demo-step">
|
||
<div className="step-num">1</div>
|
||
<div className="step-content">
|
||
<strong>장애 탐지</strong>
|
||
<p>Scouter APM이 서버 CPU 90% 감지 → 자동으로 GUARDiA 운영 채널에 경보 발송</p>
|
||
<div className="chat-bubble bot">🚨 web-01 CPU 90.3% — P2 인시던트 자동 등록: INC-20260530-A1B2C3</div>
|
||
</div>
|
||
</div>
|
||
<div className="demo-step">
|
||
<div className="step-num">2</div>
|
||
<div className="step-content">
|
||
<strong>담당자 즉시 대응</strong>
|
||
<p>메신저에서 RCA 분석 요청</p>
|
||
<div className="chat-bubble user">/rca INC-20260530-A1B2C3</div>
|
||
<div className="chat-bubble bot">
|
||
🤖 AI RCA 분석 완료<br/>
|
||
근본원인: 메모리 누수 (Heap 98%)<br/>
|
||
재발방지: WAS 재기동 + 힙덤프 분석<br/>
|
||
신뢰도: 87%
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="demo-step">
|
||
<div className="step-num">3</div>
|
||
<div className="step-content">
|
||
<strong>원격 조치 실행</strong>
|
||
<p>SSH 재기동 명령 실행</p>
|
||
<div className="chat-bubble user">!sm web-01 tomcat_restart</div>
|
||
<div className="chat-bubble bot">
|
||
✅ web-01 Tomcat 재기동 완료<br/>
|
||
소요: 38초 | CPU: 12% | 정상화
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="demo-step">
|
||
<div className="step-num">4</div>
|
||
<div className="step-content">
|
||
<strong>자동 보고</strong>
|
||
<p>인시던트 처리 결과 자동 보고서 발송</p>
|
||
<div className="chat-bubble user">/notify 22:15 web-01 서버 장애 복구 완료. 원인: 메모리 누수 재발 방지 조치 완료.</div>
|
||
<div className="chat-bubble bot">✅ 운영팀 전체 공지 발송 완료 (ops 채널)</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* ── GUARDiA Manager ──────────────────────────────── */}
|
||
{activeTab === 'manager' && (
|
||
<section className="section">
|
||
<div className="container">
|
||
<div className="section-header">
|
||
<span className="section-label">GUARDiA Manager</span>
|
||
<h2 className="section-title">통합 관제 관리자 포털<br/><em>클라우드 콘솔 스타일</em></h2>
|
||
<div className="divider" />
|
||
<p className="section-desc">
|
||
ITSM·서버·배포·네트워크·보안·AI를 하나의 화면에서 관제합니다.<br/>
|
||
DR 자동화, 네트워크 장비 설정 백업, CSAP 준수율까지 통합 대시보드로 제공합니다.
|
||
</p>
|
||
</div>
|
||
<div className="gd-screenshots" style={{gridTemplateColumns:'repeat(2,1fr)'}}>
|
||
{[
|
||
{file:'07_manager_dashboard', caption:'통합 운영 대시보드 — 서버·SR·배포 현황'},
|
||
{file:'08_manager_dr', caption:'DR 재해복구 — RTO/RPO 실적 대시보드'},
|
||
{file:'09_manager_network', caption:'네트워크 장비 — 설정 백업·변경 감지'},
|
||
{file:'10_manager_csap', caption:'CSAP 보안 점검 — 준수율 A~D 등급'},
|
||
].map((s,i) => (
|
||
<div key={i} className="screenshot-card">
|
||
<img src={`/screenshots/${s.file}.png`} alt={s.caption}
|
||
className="screenshot-img"
|
||
onError={e=>{e.target.style.display='none';e.target.nextSibling.style.display='flex';}}/>
|
||
<div className="screenshot-placeholder" style={{display:'none'}}>
|
||
<span className="icon">🖥️</span><span>준비 중</span>
|
||
</div>
|
||
<div className="screenshot-caption">{s.caption}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* ── 에디션 비교 ──────────────────────────────────── */}
|
||
{activeTab === 'editions' && (
|
||
<section className="section">
|
||
<div className="container">
|
||
<div className="section-header">
|
||
<span className="section-label">Editions</span>
|
||
<h2 className="section-title">기관 규모에 맞는<br/><em>에디션 선택</em></h2>
|
||
<div className="divider" />
|
||
</div>
|
||
<div className="gd-editions-grid">
|
||
{EDITIONS.map((e,i) => (
|
||
<div key={i} className={`gd-edition-card ${e.highlight ? 'highlight' : ''}`}
|
||
style={{'--ed-color': e.color}}>
|
||
{e.highlight && <div className="edition-recommend">추천</div>}
|
||
<div className="edition-header">
|
||
<h3>{e.name}</h3>
|
||
<span className="edition-badge">{e.badge}</span>
|
||
</div>
|
||
<p className="edition-target">{e.target}</p>
|
||
<ul className="edition-features">
|
||
{e.features.map((f,j) => (
|
||
<li key={j}><span className="check">✓</span>{f}</li>
|
||
))}
|
||
</ul>
|
||
<Link to={e.href} className="btn edition-cta">
|
||
{e.cta}
|
||
</Link>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* ── 기술 스택 ─────────────────────────────────────── */}
|
||
{activeTab === 'tech' && (
|
||
<section className="section">
|
||
<div className="container">
|
||
<div className="section-header">
|
||
<span className="section-label">Technology</span>
|
||
<h2 className="section-title">검증된<br/><em>기술 스택</em></h2>
|
||
<div className="divider" />
|
||
<p className="section-desc">온프레미스 전용 설계 — 외부 클라우드 의존 없는 완전 폐쇄망 동작</p>
|
||
</div>
|
||
<div className="gd-tech-grid">
|
||
{TECH_STACK.map((t,i) => (
|
||
<div key={i} className="gd-tech-card card">
|
||
<h3 className="tech-category">{t.category}</h3>
|
||
<ul className="tech-items">
|
||
{t.items.map((item,j) => (
|
||
<li key={j}>{item}</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* ── 도입 사례 ─────────────────────────────────────── */}
|
||
{activeTab === 'usecase' && (
|
||
<section className="section">
|
||
<div className="container">
|
||
<div className="section-header">
|
||
<span className="section-label">Use Cases</span>
|
||
<h2 className="section-title">실제 <em>도입 사례</em></h2>
|
||
<div className="divider" />
|
||
</div>
|
||
<div className="gd-usecases">
|
||
{[
|
||
{org:'광역 지방자치단체', result:'레거시 서버 200대 SSH 자동화, 운영 인력 3명→1명', badge:'중앙부처'},
|
||
{org:'공공기관 IT센터', result:'월간 SR 500건 처리, AI 자동분류로 80% 응답시간 단축', badge:'공공기관'},
|
||
{org:'지방 교육청', result:'Tomcat 100대 무중단 배포 자동화, 장애 대응 시간 70% 단축', badge:'교육'},
|
||
].map((u,i) => (
|
||
<div key={i} className="usecase-card card">
|
||
<span className="badge badge-primary">{u.badge}</span>
|
||
<h3>{u.org}</h3>
|
||
<p>{u.result}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* ── 화면 미리보기 ─────────────────────────────────────── */}
|
||
{activeTab === 'screenshots' && (
|
||
<section className="section">
|
||
<div className="container">
|
||
<div className="section-header">
|
||
<span className="section-label">Screenshots</span>
|
||
<h2 className="section-title">GUARDiA <em>화면 미리보기</em></h2>
|
||
<p className="section-sub">실제 운영 환경의 스크린샷입니다</p>
|
||
<div className="divider" />
|
||
</div>
|
||
<div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(320px,1fr))',gap:24}}>
|
||
{[
|
||
{src:'/screenshots/itsm_02_dashboard.png', title:'ITSM 통합 대시보드', desc:'SR 현황·AI 인사이트·운영 지표 실시간 모니터링. 나눔고딕 UI.'},
|
||
{src:'/screenshots/itsm_03_sr_list.png', title:'SR 서비스 요청 목록', desc:'15건 SR 관리. HIGH/MEDIUM/LOW 우선순위. AI봇 자동 처리.'},
|
||
{src:'/screenshots/itsm_04_cmdb.png', title:'CMDB 서버 자산 관리', desc:'24대 서버 자산. 상태·역할·OS 통합 관리. SSH 에이전트리스.'},
|
||
{src:'/screenshots/itsm_05_incidents.png', title:'장애 관리 (인시던트)', desc:'P1~P3 등급별 장애. MTTR 45분. AI 자동 RCA 분석.'},
|
||
{src:'/screenshots/itsm_06_agents.png', title:'AI 에이전트', desc:'Ollama 온라인. llava·codellama·llama3·nomic 4개 모델.'},
|
||
{src:'/screenshots/itsm_07_ssl.png', title:'SSL 인증서 관리', desc:'만료 추적·자동 갱신·Let\'s Encrypt/ZeroSSL 지원.'},
|
||
{src:'/screenshots/manager_02_dashboard.png', title:'GUARDiA Manager', desc:'통합 관제 포털. 서버·SR·배포 현황 한눈에.'},
|
||
{src:'/screenshots/home_07_guardia.png', title:'GUARDiA 홈페이지', desc:'160+ 기능 · 1,000+ API · 9개 카테고리 · 서브도메인 HTTPS.'},
|
||
{src:'/screenshots/home_09_news.png', title:'뉴스룸 (DB 동적)', desc:'뉴스·기술블로그·공지사항 DB 관리. 관리자 페이지 CRUD.'},
|
||
{src:'/screenshots/mail_01_webmail.png', title:'zioinfo 웹메일', desc:'Postfix/Dovecot 연동. @zioinfo.co.kr 기업 웹메일.'},
|
||
{src:'/screenshots/home_02_greeting.png', title:'CEO 인사말', desc:'대표이사 홍영택 인사말. GUARDiA 비전 소개.'},
|
||
{src:'/screenshots/home_08_business.png', title:'파트너 페이지', desc:'Oracle·RedHat·TmaxSoft·SamsungSDS 실제 로고 크롤링.'},
|
||
].map((sc,i) => (
|
||
<div key={i} style={{borderRadius:12,overflow:'hidden',border:'1px solid #e2e8f0',boxShadow:'0 2px 12px rgba(0,51,102,.08)'}}>
|
||
<div style={{background:'#f1f5f9',height:8,display:'flex',gap:4,padding:'8px 12px',alignItems:'center'}}>
|
||
{['#ef4444','#f59e0b','#22c55e'].map(col=><div key={col} style={{width:10,height:10,borderRadius:'50%',background:col}}/>)}
|
||
</div>
|
||
<img src={sc.src} alt={sc.title} style={{width:'100%',display:'block',objectFit:'cover'}}
|
||
onError={e=>{e.target.parentElement.style.display='none'}} />
|
||
<div style={{padding:'12px 16px'}}>
|
||
<div style={{fontWeight:700,fontSize:14,color:'#003366'}}>{sc.title}</div>
|
||
<div style={{fontSize:12,color:'#64748b',marginTop:4}}>{sc.desc}</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* 신규 기능 하이라이트 */}
|
||
<div style={{marginTop:48}}>
|
||
<h3 style={{fontSize:22,fontWeight:800,color:'#1e293b',textAlign:'center',marginBottom:24}}>
|
||
2026 신규 기능 하이라이트
|
||
</h3>
|
||
<div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(280px,1fr))',gap:16}}>
|
||
{[
|
||
{icon:<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#00A0C8" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="8" cy="10" r="1.5" fill="#00A0C8" stroke="none"/><circle cx="13" cy="8" r="1.5" fill="#00A0C8" stroke="none"/><circle cx="16" cy="12" r="1.5" fill="#00A0C8" stroke="none"/><path d="M12 22c0-2.5-2-4-4-4h-2a2 2 0 010-4"/></svg>,title:'디자인 AI SR 자동화',badge:'NEW',
|
||
desc:'Ollama llava 비전으로 스크린샷 분석. CSS 변경·SVG 아이콘·UI 리뷰를 AI가 자동 처리. 디자인 SR 처리 시간 90% 단축.'},
|
||
{icon:<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#00A0C8" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="2" width="6" height="11" rx="3"/><path d="M19 10a7 7 0 01-14 0M12 17v5M8 22h8"/></svg>,title:'음성인식 명령 실행',badge:'NEW',
|
||
desc:'expo-speech-recognition 온디바이스. 폐쇄망 완전 지원. "서버 상태 확인해줘" → /server status 자동 매핑.'},
|
||
{icon:<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#00A0C8" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18h6M10 22h4M12 2a7 7 0 017 7c0 2.4-1.1 4.5-2.8 6H7.8A7 7 0 0112 2z"/></svg>,title:'다음명령 제시 (Smart UX)',badge:'NEW',
|
||
desc:'Ollama 대화 컨텍스트 분석→추천 명령 3개. 사용 이력 학습. Messenger Bot·Mobile App 통합.'},
|
||
{icon:<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#00A0C8" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5a3 3 0 10-3 3H12"/><path d="M12 5a3 3 0 113 3H12"/><path d="M6 8a4 4 0 000 8h.5M18 8a4 4 0 010 8h-.5"/><path d="M8 16a4 4 0 008 0v-4H8v4z"/></svg>,title:'AI 뇌 엔진 (Brain)',badge:'NEW',
|
||
desc:'영구 메모리(pgvector)·자동 스킬 발굴·LoRA 파인튜닝·관찰형 AI. 운영 경험 누적→스스로 진화.'},
|
||
{icon:<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#00A0C8" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2l9 4v5c0 5.2-3.9 10-9 11C6.9 21 3 16.2 3 11V6l9-4z"/><path d="M9 12l2 2 4-4"/></svg>,title:'Zero Trust + SBOM',badge:'NEW',
|
||
desc:'ZTNA 정책 엔진·디바이스 신뢰 점수. SBOM CycloneDX 1.4 생성·VEX. EU CRA/공공 조달 준수.'},
|
||
{icon:'🌱',title:'GreenOps + Edge IoT',badge:'NEW',
|
||
desc:'Scope 2 탄소 배출 추적(EU CSRD). 9.21억 IoT 디바이스 텔레메트리. Carbon-aware 스케줄링.'},
|
||
].map((f,i) => (
|
||
<div key={i} style={{background:'#fff',border:'1px solid #e2e8f0',borderRadius:12,padding:20,
|
||
borderTop:`3px solid #003366`}}>
|
||
<div style={{display:'flex',alignItems:'center',gap:8,marginBottom:10}}>
|
||
<span style={{display:'flex',alignItems:'center'}}>{f.icon}</span>
|
||
<span style={{fontWeight:700,fontSize:15,color:'#003366'}}>{f.title}</span>
|
||
<span style={{background:'#003366',color:'#fff',fontSize:10,padding:'2px 7px',
|
||
borderRadius:8,marginLeft:'auto'}}>{f.badge}</span>
|
||
</div>
|
||
<p style={{fontSize:13,color:'#475569',lineHeight:1.7,margin:0}}>{f.desc}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* ── 설치 가이드 ──────────────────────────────────────── */}
|
||
{activeTab === 'install' && (
|
||
<section className="section">
|
||
<div className="container">
|
||
<div className="section-header">
|
||
<span className="section-label">Installation Guide</span>
|
||
<h2 className="section-title">GUARDiA <em>설치 가이드</em></h2>
|
||
<p className="section-sub">폐쇄망(공공기관 내부망)과 개방망 환경별 단계별 설치 방법</p>
|
||
<div className="divider" />
|
||
</div>
|
||
|
||
{/* 시스템 요구사항 */}
|
||
<div style={{background:'#eff6ff',border:'1px solid #bfdbfe',borderRadius:12,padding:20,marginBottom:32}}>
|
||
<h3 style={{fontSize:16,fontWeight:700,color:'#003366',marginBottom:12}}>📋 시스템 요구사항 (공통)</h3>
|
||
<div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(200px,1fr))',gap:12,fontSize:13}}>
|
||
{[
|
||
{label:'OS', val:'Ubuntu 22.04 LTS / RHEL 8 이상'},
|
||
{label:'CPU', val:'8코어 이상 권장 (4코어 최소)'},
|
||
{label:'RAM', val:'16GB 이상 (Ollama 8GB + 서비스 8GB)'},
|
||
{label:'GPU', val:'8GB VRAM (LoRA 파인튜닝 시, 선택)'},
|
||
{label:'Storage', val:'100GB SSD 이상'},
|
||
{label:'Network', val:'내부망 포트: 8443, 8090, 8025, 9001'},
|
||
].map(r=>(
|
||
<div key={r.label} style={{background:'#fff',padding:'10px 14px',borderRadius:8,border:'1px solid #dbeafe'}}>
|
||
<div style={{fontWeight:700,color:'#003366',marginBottom:2}}>{r.label}</div>
|
||
<div style={{color:'#374151'}}>{r.val}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:32}}>
|
||
|
||
{/* 폐쇄망 설치 */}
|
||
<div>
|
||
<div style={{background:'#003366',color:'#fff',borderRadius:'12px 12px 0 0',padding:'16px 20px',display:'flex',alignItems:'center',gap:8}}>
|
||
<span style={{fontSize:20}}>🔒</span>
|
||
<div>
|
||
<div style={{fontSize:16,fontWeight:800}}>폐쇄망 설치</div>
|
||
<div style={{fontSize:12,opacity:.8}}>인터넷 차단 공공기관 내부망 환경</div>
|
||
</div>
|
||
</div>
|
||
<div style={{border:'1px solid #e2e8f0',borderTop:'none',borderRadius:'0 0 12px 12px',padding:20}}>
|
||
|
||
{/* 보안 경고 */}
|
||
<div style={{background:'#fef3c7',border:'1px solid #fcd34d',borderRadius:8,padding:12,marginBottom:16,fontSize:12}}>
|
||
<strong>⚠️ 보안 주의사항</strong><br/>
|
||
• 설치 파일 무결성 검증 (SHA-256) 필수<br/>
|
||
• USB/이동식 미디어 사용 시 바이러스 검사<br/>
|
||
• 설치 계정은 관리자 전용 (root 사용 후 비활성화)<br/>
|
||
• 설치 완료 후 기본 비밀번호 즉시 변경
|
||
</div>
|
||
|
||
{[
|
||
{step:'STEP 1', title:'오프라인 패키지 준비 (외부망 PC)',
|
||
color:'#003366',
|
||
cmds:[
|
||
'# 외부망 PC에서 실행',
|
||
'pip download -r requirements.txt -d ./packages/',
|
||
'ollama pull llama3 && ollama pull llava:7b',
|
||
'# Ollama 모델 파일 위치: ~/.ollama/models/',
|
||
'tar czf guardia-offline.tar.gz packages/ models/',
|
||
]},
|
||
{step:'STEP 2', title:'파일 이전 (보안 반입)',
|
||
color:'#005A8C',
|
||
cmds:[
|
||
'# 승인된 이동식 미디어 사용',
|
||
'# SHA-256 체크섬 검증 필수',
|
||
'sha256sum guardia-offline.tar.gz > checksum.txt',
|
||
'# 내부망 서버로 이전 후 검증',
|
||
'sha256sum -c checksum.txt',
|
||
]},
|
||
{step:'STEP 3', title:'의존성 오프라인 설치',
|
||
color:'#1d4ed8',
|
||
cmds:[
|
||
'tar xzf guardia-offline.tar.gz',
|
||
'pip install --no-index --find-links=./packages/ \\',
|
||
' fastapi sqlalchemy asyncpg pgvector',
|
||
'# PostgreSQL (오프라인 deb/rpm 패키지)',
|
||
'apt install ./postgresql_16_amd64.deb',
|
||
]},
|
||
{step:'STEP 4', title:'Ollama 오프라인 모델 설치',
|
||
color:'#7c3aed',
|
||
cmds:[
|
||
'# Ollama 바이너리 설치',
|
||
'curl -fsSL https://ollama.ai/install.sh | sh',
|
||
'# 오프라인 모델 복사',
|
||
'cp -r ./models/ ~/.ollama/',
|
||
'ollama list # 모델 확인',
|
||
]},
|
||
{step:'STEP 5', title:'GUARDiA 서비스 설정',
|
||
color:'#059669',
|
||
cmds:[
|
||
'git clone <내부망-Gitea-URL>/zio/guardia-itsm.git',
|
||
'cd guardia-itsm',
|
||
'cp .env.closed .env # 폐쇄망 설정',
|
||
'# .env 필수 설정:',
|
||
'GUARDIA_NETWORK_MODE=closed',
|
||
'DATABASE_URL=postgresql+asyncpg://...',
|
||
'OLLAMA_BASE_URL=http://localhost:11434',
|
||
]},
|
||
{step:'STEP 6', title:'서비스 시작 및 보안 강화',
|
||
color:'#dc2626',
|
||
cmds:[
|
||
'systemctl enable --now guardia',
|
||
'# 방화벽 설정 (내부망만 허용)',
|
||
'ufw allow from 192.168.0.0/16 to any port 8443',
|
||
'ufw deny 8443 # 외부 차단',
|
||
'# SSL 인증서 (내부 CA 사용)',
|
||
'openssl req -x509 -nodes -days 3650 ...',
|
||
'# 초기 admin 비밀번호 즉시 변경',
|
||
]},
|
||
].map((s,i) => (
|
||
<div key={i} style={{marginBottom:16}}>
|
||
<div style={{display:'flex',alignItems:'center',gap:8,marginBottom:6}}>
|
||
<span style={{background:s.color,color:'#fff',fontSize:11,padding:'2px 8px',borderRadius:10,fontWeight:700}}>{s.step}</span>
|
||
<span style={{fontWeight:700,fontSize:14,color:'#1e293b'}}>{s.title}</span>
|
||
</div>
|
||
<pre style={{background:'#0f172a',color:'#e2e8f0',borderRadius:8,padding:12,
|
||
fontSize:11,overflowX:'auto',margin:0,lineHeight:1.7}}>
|
||
{s.cmds.join('\n')}
|
||
</pre>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 개방망 설치 */}
|
||
<div>
|
||
<div style={{background:'#059669',color:'#fff',borderRadius:'12px 12px 0 0',padding:'16px 20px',display:'flex',alignItems:'center',gap:8}}>
|
||
<span style={{fontSize:20}}>🌐</span>
|
||
<div>
|
||
<div style={{fontSize:16,fontWeight:800}}>개방망 설치</div>
|
||
<div style={{fontSize:12,opacity:.8}}>인터넷 연결 가능한 일반 서버 환경</div>
|
||
</div>
|
||
</div>
|
||
<div style={{border:'1px solid #e2e8f0',borderTop:'none',borderRadius:'0 0 12px 12px',padding:20}}>
|
||
|
||
{/* 보안 경고 */}
|
||
<div style={{background:'#fef3c7',border:'1px solid #fcd34d',borderRadius:8,padding:12,marginBottom:16,fontSize:12}}>
|
||
<strong>⚠️ 보안 주의사항</strong><br/>
|
||
• HTTPS 반드시 적용 (Let's Encrypt 또는 공인 인증서)<br/>
|
||
• 관리 포트(8443, 8090) 방화벽으로 접근 제한<br/>
|
||
• 기본 자격증명 설치 후 즉시 변경<br/>
|
||
• 정기 보안 패치 적용 (crontab 자동화 권장)
|
||
</div>
|
||
|
||
{[
|
||
{step:'STEP 1', title:'시스템 준비 및 의존성 설치',
|
||
color:'#059669',
|
||
cmds:[
|
||
'# Ubuntu 22.04 기준',
|
||
'apt update && apt upgrade -y',
|
||
'apt install -y python3.11 python3-pip postgresql-16',
|
||
' nodejs npm git',
|
||
'# Ollama 설치 (on-premise AI)',
|
||
'curl -fsSL https://ollama.ai/install.sh | sh',
|
||
]},
|
||
{step:'STEP 2', title:'Ollama AI 모델 설치',
|
||
color:'#0891b2',
|
||
cmds:[
|
||
'# 필수 모델 (총 약 10GB)',
|
||
'ollama pull llama3 # 일반 NLP (4.7GB)',
|
||
'ollama pull llava:7b # 비전/이미지 분석',
|
||
'ollama pull nomic-embed-text # 임베딩',
|
||
'ollama pull codellama:7b # 코드 분석',
|
||
'# 서비스 자동 시작',
|
||
'systemctl enable --now ollama',
|
||
]},
|
||
{step:'STEP 3', title:'GUARDiA 소스 설치',
|
||
color:'#7c3aed',
|
||
cmds:[
|
||
'git clone https://github.com/zio/guardia-itsm.git',
|
||
'cd guardia-itsm',
|
||
'python3 -m venv venv && source venv/bin/activate',
|
||
'pip install -r requirements.txt',
|
||
'# PostgreSQL DB 초기화',
|
||
'createdb guardia_db',
|
||
'python3 -c "from database import init_db; init_db()"',
|
||
]},
|
||
{step:'STEP 4', title:'환경 설정 (.env)',
|
||
color:'#d97706',
|
||
cmds:[
|
||
'cp .env.example .env',
|
||
'# 필수 설정 변경:',
|
||
'DATABASE_URL=postgresql+asyncpg://user:pass@localhost/guardia_db',
|
||
'SECRET_KEY=$(openssl rand -hex 32)',
|
||
'AES_KEY=$(openssl rand -hex 16) # 자격증명 암호화',
|
||
'OLLAMA_BASE_URL=http://localhost:11434',
|
||
'# 보안: 외부 API 호출 완전 금지',
|
||
'GUARDIA_NETWORK_MODE=open',
|
||
]},
|
||
{step:'STEP 5', title:'HTTPS 및 방화벽 설정',
|
||
color:'#dc2626',
|
||
cmds:[
|
||
'# Let\'s Encrypt SSL (도메인 있는 경우)',
|
||
'apt install certbot',
|
||
'certbot certonly --standalone -d your-domain.go.kr',
|
||
'# 방화벽 설정 (필수)',
|
||
'ufw allow ssh',
|
||
'ufw allow from <허용-IP> to any port 8443',
|
||
'ufw allow from <허용-IP> to any port 8090',
|
||
'ufw enable',
|
||
]},
|
||
{step:'STEP 6', title:'서비스 등록 및 시작',
|
||
color:'#003366',
|
||
cmds:[
|
||
'# systemd 서비스 등록',
|
||
'cp deploy/guardia.service /etc/systemd/system/',
|
||
'systemctl daemon-reload',
|
||
'systemctl enable --now guardia',
|
||
'# 초기 관리자 계정 설정 (즉시 변경!)',
|
||
'python3 manage.py create-admin',
|
||
'# 설치 확인',
|
||
'curl -k https://localhost:8443/health',
|
||
]},
|
||
].map((s,i) => (
|
||
<div key={i} style={{marginBottom:16}}>
|
||
<div style={{display:'flex',alignItems:'center',gap:8,marginBottom:6}}>
|
||
<span style={{background:s.color,color:'#fff',fontSize:11,padding:'2px 8px',borderRadius:10,fontWeight:700}}>{s.step}</span>
|
||
<span style={{fontWeight:700,fontSize:14,color:'#1e293b'}}>{s.title}</span>
|
||
</div>
|
||
<pre style={{background:'#0f172a',color:'#e2e8f0',borderRadius:8,padding:12,
|
||
fontSize:11,overflowX:'auto',margin:0,lineHeight:1.7}}>
|
||
{s.cmds.join('\n')}
|
||
</pre>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 설치 후 확인 사항 */}
|
||
<div style={{marginTop:32,background:'#f0fdf4',border:'1px solid #bbf7d0',borderRadius:12,padding:20}}>
|
||
<h3 style={{fontSize:16,fontWeight:700,color:'#166534',marginBottom:12}}>✅ 설치 완료 후 확인 사항</h3>
|
||
<div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(240px,1fr))',gap:10,fontSize:13}}>
|
||
{[
|
||
'기본 admin 비밀번호 변경 완료',
|
||
'HTTPS 인증서 적용 (유효기간 확인)',
|
||
'방화벽 규칙 검토 (불필요 포트 차단)',
|
||
'Ollama 모델 정상 로드 (ollama list)',
|
||
'PostgreSQL 자동 백업 설정',
|
||
'systemd 서비스 자동 시작 등록',
|
||
'로그 수집 경로 확인 (/opt/guardia/logs)',
|
||
'CSAP 보안 점검 실행 (선택)',
|
||
].map((item,i)=>(
|
||
<div key={i} style={{display:'flex',alignItems:'center',gap:6,padding:'8px 12px',
|
||
background:'#fff',borderRadius:8,border:'1px solid #dcfce7'}}>
|
||
<span style={{color:'#16a34a',fontWeight:700}}>✓</span>
|
||
<span style={{color:'#374151'}}>{item}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 문의 */}
|
||
<div style={{textAlign:'center',marginTop:32,padding:24,background:'#eff6ff',borderRadius:12}}>
|
||
<p style={{fontSize:15,color:'#003366',fontWeight:600,marginBottom:8}}>
|
||
설치 지원이 필요하신가요?
|
||
</p>
|
||
<p style={{fontSize:13,color:'#64748b',marginBottom:16}}>
|
||
지오정보기술 전문 엔지니어가 기관 환경에 맞는 설치를 지원합니다.
|
||
</p>
|
||
<Link to="/support/contact?type=install" className="btn btn-primary">
|
||
설치 지원 문의
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* ── 매뉴얼 ───────────────────────────────────────────── */}
|
||
{activeTab === 'manual' && (
|
||
<section className="section">
|
||
<div className="container">
|
||
<div className="section-header">
|
||
<span className="section-label">Manual</span>
|
||
<h2 className="section-title">GUARDiA <em>운영 매뉴얼</em></h2>
|
||
<p className="section-sub">운영자·엔지니어·관리자별 상세 매뉴얼</p>
|
||
<div className="divider" />
|
||
</div>
|
||
|
||
<div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(280px,1fr))',gap:20}}>
|
||
{[
|
||
{icon:<IconClipboard size={26} color="#003366"/>, title:'운영자 지침서', no:'04', desc:'일상 운영 절차, SR 관리, 장애 대응, 보안 운영 지침. 16개 섹션.', tag:'필수'},
|
||
{icon:<IconCode size={26} color="#003366"/>, title:'설치 가이드 (Linux)', no:'05', desc:'Ubuntu/CentOS/RHEL 환경 설치. 폐쇄망·개방망 별도 가이드 포함.', tag:'설치'},
|
||
{icon:<IconServer size={26} color="#003366"/>, title:'설치 가이드 (Windows)',no:'06', desc:'Windows Server WSL2 기반 설치. 방화벽·포트 설정 상세.', tag:'설치'},
|
||
{icon:<IconKey size={26} color="#003366"/>, title:'라이선스 발급 가이드', no:'14', desc:'커뮤니티·스탠다드·엔터프라이즈 라이선스 키 발급·갱신·관리.', tag:'관리'},
|
||
{icon:<IconGlobe size={26} color="#003366"/>, title:'API 명세서', no:'16', desc:'1,000개+ REST API 엔드포인트 전체 명세. Swagger/OpenAPI 3.0.', tag:'개발'},
|
||
{icon:<IconShield size={26} color="#003366"/>, title:'DR 재해복구 가이드', no:'39', desc:'DR 자동화·Failover·네트워크장비·CSAP 운영 가이드.', tag:'운영'},
|
||
{icon:<IconZap size={26} color="#003366"/>, title:'CI/CD 파이프라인 가이드',no:'20',desc:'post-commit 훅·Gitea·서버cron·5시간 자동 배포 흐름.', tag:'DevOps'},
|
||
{icon:<IconBuilding size={26} color="#003366"/>, title:'zio서버 운영가이드', no:'19', desc:'서브도메인 전환·자동배포·SSL·nginx 설정. 2026-06-04 업데이트.', tag:'NEW'},
|
||
].map((m,i)=>(
|
||
<div key={i} style={{background:'#fff',border:'1px solid #e2e8f0',borderRadius:12,padding:20,
|
||
borderLeft:`4px solid #003366`,transition:'box-shadow .2s'}}>
|
||
<div style={{display:'flex',alignItems:'flex-start',gap:10}}>
|
||
<span style={{display:'flex',alignItems:'center',paddingTop:2}}>{m.icon}</span>
|
||
<div style={{flex:1}}>
|
||
<div style={{display:'flex',alignItems:'center',gap:6,marginBottom:4}}>
|
||
<span style={{fontWeight:700,fontSize:14,color:'#003366'}}>{m.title}</span>
|
||
<span style={{background:m.tag==='NEW'?'#003366':m.tag==='필수'?'#dc2626':'#e2e8f0',
|
||
color:m.tag==='NEW'||m.tag==='필수'?'#fff':'#64748b',
|
||
fontSize:10,padding:'1px 6px',borderRadius:8,fontWeight:600}}>
|
||
{m.tag}
|
||
</span>
|
||
</div>
|
||
<div style={{fontSize:11,color:'#94a3b8',marginBottom:6}}>문서 #{m.no}</div>
|
||
<p style={{fontSize:12,color:'#475569',lineHeight:1.6,margin:0}}>{m.desc}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* 매뉴얼 전체 목록 */}
|
||
<div style={{marginTop:32,background:'#f8fafc',borderRadius:12,padding:20}}>
|
||
<h3 style={{fontSize:15,fontWeight:700,color:'#1e293b',marginBottom:16}}>
|
||
📚 전체 매뉴얼 목록 (44개 문서)
|
||
</h3>
|
||
<div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(280px,1fr))',gap:8}}>
|
||
{[
|
||
'01 분석설계서', '02 단위통합테스트계획서', '03 개발자지침서',
|
||
'04 운영자지침서 ⭐', '05 설치가이드(Linux)', '06 설치가이드(Windows)',
|
||
'07 SI프로젝트관리 분석설계서', '08 AI에이전트 Paperclip 설계서',
|
||
'09~13 확장개발 Priority 1~5', '14 라이선스키 발급가이드',
|
||
'15 UI Nifty 가이드', '16 API 명세서 ⭐', '17 홈페이지 개발가이드',
|
||
'18 zio서버 설치SW 목록', '19 zio서버 운영가이드', '20 CI/CD 가이드',
|
||
'33 Messenger 앱스토어 등록', '34 Messenger 개발·배포 가이드',
|
||
'39 DR·네트워크·CSAP 운영가이드', '40 바이브코딩 운영가이드',
|
||
'41 DB 연결정보', '42 zio서버 SW 구성도', '43 레파지토리 구조 가이드',
|
||
'44 신규기능 운영가이드 ⭐ NEW',
|
||
].map((doc,i)=>(
|
||
<div key={i} style={{fontSize:12,color:'#374151',padding:'6px 10px',
|
||
background:'#fff',borderRadius:6,border:'1px solid #e2e8f0'}}>
|
||
{doc}
|
||
</div>
|
||
))}
|
||
</div>
|
||
<p style={{fontSize:12,color:'#94a3b8',marginTop:12,textAlign:'right'}}>
|
||
⭐ 필수 문서 | 자세한 매뉴얼은 도입 상담 시 제공됩니다.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)}
|
||
|
||
{/* ── CTA ─────────────────────────────────────────────── */}
|
||
<section className="gd-cta">
|
||
<div className="container">
|
||
<h2>지금 바로 무료 데모를 경험해 보세요</h2>
|
||
<p>전문 컨설턴트가 귀 기관 환경에 맞는 최적의 구성을 제안해 드립니다.</p>
|
||
<div className="gd-cta-actions">
|
||
<Link to="/support/contact?type=demo" className="btn btn-white btn-lg">무료 데모 신청</Link>
|
||
<Link to="/support/catalog" className="btn btn-lg" style={{color:'rgba(255,255,255,.8)',border:'1px solid rgba(255,255,255,.3)'}}>제품 소개서</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
);
|
||
}
|