a67e0dc019
- index: 왜 키오스크인가, DNSYS 파트너/스펙, SAM 연동 구조, 가격/도입조건, 영업포인트 추가 - showroom: 4단계 활용 시나리오, SAM 자산 활용 태그, 기능별 상세 설명 추가 - factory: 4단계 활용 시나리오, SAM 자산 활용 태그, 기능별 상세 설명 추가
295 lines
20 KiB
PHP
295 lines
20 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '키오스크')
|
|
|
|
@push('styles')
|
|
<style>
|
|
.ki { max-width: 1100px; margin: 0 auto; padding: 32px 20px 48px; }
|
|
|
|
/* 헤더 */
|
|
.ki-header { text-align: center; margin-bottom: 40px; }
|
|
.ki-header h1 { font-size: 1.75rem; font-weight: 700; color: #1e293b; margin-bottom: 6px; }
|
|
.ki-header p { color: #64748b; font-size: 0.95rem; }
|
|
|
|
/* 키오스크 선택 카드 */
|
|
.ki-select { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 48px; }
|
|
.ki-select a { display: block; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 28px 24px; text-align: center; text-decoration: none; color: inherit; transition: all 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
|
|
.ki-select a:hover { border-color: #3b82f6; box-shadow: 0 6px 20px rgba(59,130,246,0.12); transform: translateY(-2px); }
|
|
.ki-sel-icon { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
|
|
.ki-sel-icon svg { width: 26px; height: 26px; }
|
|
.ki-sel-icon.sr { background: #dbeafe; color: #2563eb; }
|
|
.ki-sel-icon.fc { background: #dcfce7; color: #16a34a; }
|
|
.ki-select h2 { font-size: 1.1rem; font-weight: 600; color: #1e293b; margin-bottom: 6px; }
|
|
.ki-select p { color: #64748b; font-size: 0.82rem; line-height: 1.5; margin-bottom: 10px; }
|
|
.ki-tag { display: inline-block; padding: 3px 10px; border-radius: 9999px; font-size: 0.7rem; font-weight: 500; }
|
|
.ki-tag.sr { background: #dbeafe; color: #1d4ed8; }
|
|
.ki-tag.fc { background: #dcfce7; color: #15803d; }
|
|
|
|
/* 섹션 공통 */
|
|
.ki-section { margin-bottom: 40px; }
|
|
.ki-section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
|
|
.ki-section-title .bar { width: 4px; height: 22px; border-radius: 2px; background: #2563eb; flex-shrink: 0; }
|
|
.ki-section-title h2 { font-size: 1.15rem; font-weight: 700; color: #1e293b; }
|
|
.ki-section-title span { font-size: 0.8rem; color: #94a3b8; margin-left: 4px; }
|
|
|
|
/* 왜 키오스크 - 2열 */
|
|
.ki-why { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
|
|
.ki-why-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; }
|
|
.ki-why-card.showroom { border-left: 3px solid #2563eb; }
|
|
.ki-why-card.factory { border-left: 3px solid #16a34a; }
|
|
.ki-why-badge { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 0.7rem; font-weight: 600; margin-bottom: 12px; }
|
|
.ki-why-badge.sr { background: #dbeafe; color: #1d4ed8; }
|
|
.ki-why-badge.fc { background: #dcfce7; color: #15803d; }
|
|
.ki-why-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
|
|
.ki-why-item:last-child { border-bottom: none; }
|
|
.ki-why-item strong { font-size: 0.85rem; color: #1e293b; display: block; }
|
|
.ki-why-item small { font-size: 0.75rem; color: #94a3b8; }
|
|
.ki-why-dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; }
|
|
.ki-why-dot.sr { background: #2563eb; }
|
|
.ki-why-dot.fc { background: #16a34a; }
|
|
|
|
/* DNSYS + 스펙 - 2열 */
|
|
.ki-info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
|
|
.ki-info-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; }
|
|
.ki-info-card h3 { font-size: 0.95rem; font-weight: 600; color: #1e293b; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9; }
|
|
.ki-info-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f8fafc; font-size: 0.82rem; }
|
|
.ki-info-row:last-child { border-bottom: none; }
|
|
.ki-info-row .label { color: #64748b; }
|
|
.ki-info-row .value { color: #1e293b; font-weight: 500; }
|
|
|
|
/* 강점 태그 */
|
|
.ki-strengths { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
|
|
.ki-str-tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 8px; background: #f8fafc; border: 1px solid #e2e8f0; font-size: 0.78rem; color: #334155; }
|
|
.ki-str-tag .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
|
|
|
|
/* 연동 구조 */
|
|
.ki-arch { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 0; align-items: stretch; }
|
|
.ki-arch-box { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px 16px; }
|
|
.ki-arch-box h3 { font-size: 0.9rem; font-weight: 600; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #f1f5f9; text-align: center; }
|
|
.ki-arch-box.hw h3 { color: #2563eb; }
|
|
.ki-arch-box.sw h3 { color: #16a34a; }
|
|
.ki-arch-box.data h3 { color: #d97706; }
|
|
.ki-arch-item { background: #f8fafc; border-radius: 6px; padding: 7px 10px; margin-bottom: 6px; font-size: 0.78rem; color: #334155; text-align: center; }
|
|
.ki-arch-item:last-child { margin-bottom: 0; }
|
|
.ki-arch-arrow { display: flex; align-items: center; justify-content: center; padding: 0 8px; color: #94a3b8; font-size: 0.85rem; font-weight: 700; }
|
|
.ki-arch-note { margin-top: 14px; background: #eff6ff; border: 1px solid #dbeafe; border-radius: 10px; padding: 12px 16px; display: flex; align-items: center; gap: 8px; }
|
|
.ki-arch-note strong { font-size: 0.78rem; color: #2563eb; white-space: nowrap; }
|
|
.ki-arch-note span { font-size: 0.78rem; color: #334155; }
|
|
|
|
/* 가격/프로세스 */
|
|
.ki-price-wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
|
|
.ki-price-card { background: #0f172a; border-radius: 12px; padding: 24px; color: #fff; }
|
|
.ki-price-card h3 { font-size: 0.9rem; font-weight: 600; color: #94a3b8; margin-bottom: 14px; }
|
|
.ki-price-num { font-size: 2.8rem; font-weight: 700; color: #3b82f6; line-height: 1; }
|
|
.ki-price-unit { font-size: 1rem; color: #64748b; margin-left: 4px; }
|
|
.ki-price-items { margin-top: 16px; border-top: 1px solid #1e293b; padding-top: 12px; }
|
|
.ki-price-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; }
|
|
.ki-price-item .dot { width: 6px; height: 6px; border-radius: 50%; background: #3b82f6; margin-top: 6px; flex-shrink: 0; }
|
|
.ki-price-item strong { font-size: 0.82rem; color: #e2e8f0; display: block; }
|
|
.ki-price-item small { font-size: 0.72rem; color: #64748b; }
|
|
|
|
.ki-process-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; }
|
|
.ki-process-card h3 { font-size: 0.95rem; font-weight: 600; color: #1e293b; margin-bottom: 16px; }
|
|
.ki-step { display: flex; gap: 12px; padding: 10px 0; }
|
|
.ki-step-num { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: #fff; flex-shrink: 0; }
|
|
.ki-step-body strong { font-size: 0.85rem; color: #1e293b; display: block; }
|
|
.ki-step-body small { font-size: 0.75rem; color: #94a3b8; }
|
|
.ki-step-line { width: 2px; height: 12px; background: #e2e8f0; margin-left: 13px; }
|
|
|
|
/* 영업 포인트 */
|
|
.ki-points { display: flex; flex-direction: column; gap: 12px; }
|
|
.ki-point { background: #0f172a; border-radius: 12px; padding: 18px 20px; display: flex; align-items: flex-start; gap: 16px; }
|
|
.ki-point-num { font-size: 1.5rem; font-weight: 700; line-height: 1; flex-shrink: 0; }
|
|
.ki-point h4 { font-size: 0.95rem; font-weight: 600; color: #fff; margin-bottom: 4px; }
|
|
.ki-point p { font-size: 0.8rem; color: #94a3b8; line-height: 1.5; }
|
|
|
|
@media (max-width: 768px) {
|
|
.ki-select, .ki-why, .ki-info, .ki-price-wrap { grid-template-columns: 1fr; }
|
|
.ki-arch { grid-template-columns: 1fr; gap: 8px; }
|
|
.ki-arch-arrow { transform: rotate(90deg); padding: 4px 0; }
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div class="ki">
|
|
{{-- 헤더 --}}
|
|
<div class="ki-header">
|
|
<h1>키오스크</h1>
|
|
<p>DNSYS 기둥형 키오스크(KS-SA240) + SAM 웹 브라우저 연동</p>
|
|
</div>
|
|
|
|
{{-- 키오스크 모드 선택 --}}
|
|
<div class="ki-select">
|
|
<a href="{{ route('additional.kiosk.showroom') }}">
|
|
<div class="ki-sel-icon sr">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>
|
|
</div>
|
|
<h2>쇼룸 키오스크</h2>
|
|
<p>고객이 제품을 탐색하고 견적을 시뮬레이션하는 쇼룸 전용 화면</p>
|
|
<span class="ki-tag sr">고객용</span>
|
|
</a>
|
|
<a href="{{ route('additional.kiosk.factory') }}">
|
|
<div class="ki-sel-icon fc">
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
|
|
</div>
|
|
<h2>공장 키오스크</h2>
|
|
<p>작업자가 생산 현황을 확인하고 작업 지시를 조회하는 공장 전용 화면</p>
|
|
<span class="ki-tag fc">작업자용</span>
|
|
</a>
|
|
</div>
|
|
|
|
{{-- 왜 키오스크인가 --}}
|
|
<div class="ki-section">
|
|
<div class="ki-section-title">
|
|
<div class="bar"></div>
|
|
<h2>왜 키오스크인가?</h2>
|
|
<span>고객사에 키오스크를 제안해야 하는 이유</span>
|
|
</div>
|
|
<div class="ki-why">
|
|
<div class="ki-why-card showroom">
|
|
<span class="ki-why-badge sr">쇼룸 (고객용)</span>
|
|
<div class="ki-why-item"><div class="ki-why-dot sr"></div><div><strong>고객이 직접 제품을 탐색</strong><small>영업사원 없이도 제품 정보 확인</small></div></div>
|
|
<div class="ki-why-item"><div class="ki-why-dot sr"></div><div><strong>실시간 견적 시뮬레이션</strong><small>사이즈/옵션별 즉석 가격 확인</small></div></div>
|
|
<div class="ki-why-item"><div class="ki-why-dot sr"></div><div><strong>상담 효율 극대화</strong><small>사전 탐색 후 구체적 상담 진행</small></div></div>
|
|
<div class="ki-why-item"><div class="ki-why-dot sr"></div><div><strong>브랜드 이미지 향상</strong><small>첨단 쇼룸으로 신뢰도 상승</small></div></div>
|
|
</div>
|
|
<div class="ki-why-card factory">
|
|
<span class="ki-why-badge fc">공장 (작업자용)</span>
|
|
<div class="ki-why-item"><div class="ki-why-dot fc"></div><div><strong>생산 현황 실시간 확인</strong><small>대시보드로 진행률 한눈에 파악</small></div></div>
|
|
<div class="ki-why-item"><div class="ki-why-dot fc"></div><div><strong>작업 지시서 전자화</strong><small>종이 지시서 제거, 실시간 업데이트</small></div></div>
|
|
<div class="ki-why-item"><div class="ki-why-dot fc"></div><div><strong>실적 입력 간소화</strong><small>터치 입력으로 현장 데이터 수집</small></div></div>
|
|
<div class="ki-why-item"><div class="ki-why-dot fc"></div><div><strong>관리 비용 절감</strong><small>별도 PC 없이 공유 터미널 운영</small></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- DNSYS 파트너 + 제품 스펙 --}}
|
|
<div class="ki-section">
|
|
<div class="ki-section-title">
|
|
<div class="bar" style="background: #d97706;"></div>
|
|
<h2>공급 파트너 및 제품 사양</h2>
|
|
<span>DNSYS (디앤시스) KS-SA240 기둥형 24"</span>
|
|
</div>
|
|
<div class="ki-info">
|
|
<div class="ki-info-card">
|
|
<h3>DNSYS (디앤시스) 회사 개요</h3>
|
|
<div class="ki-info-row"><span class="label">회사명</span><span class="value">(주)디앤시스</span></div>
|
|
<div class="ki-info-row"><span class="label">사업분야</span><span class="value">산업용 PC/모니터/키오스크 제조</span></div>
|
|
<div class="ki-info-row"><span class="label">소재지</span><span class="value">인천광역시 부평구 새벌로 15</span></div>
|
|
<div class="ki-info-row"><span class="label">연락처</span><span class="value">032-512-5480</span></div>
|
|
<div class="ki-info-row"><span class="label">제작방식</span><span class="value">BTO (주문맞춤 제작)</span></div>
|
|
<div class="ki-strengths">
|
|
<span class="ki-str-tag"><span class="dot" style="background:#2563eb;"></span>산업 현장 특화</span>
|
|
<span class="ki-str-tag"><span class="dot" style="background:#16a34a;"></span>BTO 맞춤 제작</span>
|
|
<span class="ki-str-tag"><span class="dot" style="background:#d97706;"></span>7종+ 라인업</span>
|
|
<span class="ki-str-tag"><span class="dot" style="background:#7c3aed;"></span>국내 제조사</span>
|
|
</div>
|
|
</div>
|
|
<div class="ki-info-card">
|
|
<h3>KS-SA240 주요 사양</h3>
|
|
<div class="ki-info-row"><span class="label">화면 크기</span><span class="value">24인치 (23.6") 터치스크린</span></div>
|
|
<div class="ki-info-row"><span class="label">터치 방식</span><span class="value">감압식 / 정전식 / 적외선 선택</span></div>
|
|
<div class="ki-info-row"><span class="label">외형 치수</span><span class="value">W350 x D350 x H1048 mm</span></div>
|
|
<div class="ki-info-row"><span class="label">마운트</span><span class="value">VESA 규격 홀 (범용 호환)</span></div>
|
|
<div class="ki-info-row"><span class="label">CPU</span><span class="value">4~12세대 셀러론 / 코어 i5</span></div>
|
|
<div class="ki-info-row"><span class="label">재질/마감</span><span class="value">스틸 함체, 분체 도장</span></div>
|
|
<div class="ki-info-row"><span class="label">이동성</span><span class="value">레벨링 캐스터 (이동+고정)</span></div>
|
|
<div class="ki-info-row"><span class="label">부가장비</span><span class="value">핸디 스캐너 걸이 (탈부착)</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- SAM 연동 구조 --}}
|
|
<div class="ki-section">
|
|
<div class="ki-section-title">
|
|
<div class="bar" style="background: #16a34a;"></div>
|
|
<h2>SAM 연동 구조</h2>
|
|
<span>키오스크 HW + SAM 웹 브라우저 기반 연동</span>
|
|
</div>
|
|
<div class="ki-arch">
|
|
<div class="ki-arch-box hw">
|
|
<h3>키오스크 HW</h3>
|
|
<div class="ki-arch-item">DNSYS KS-SA240</div>
|
|
<div class="ki-arch-item">24" 터치스크린</div>
|
|
<div class="ki-arch-item">Windows PC 내장</div>
|
|
<div class="ki-arch-item">웹 브라우저 (전체화면)</div>
|
|
</div>
|
|
<div class="ki-arch-arrow">HTTPS →</div>
|
|
<div class="ki-arch-box sw">
|
|
<h3>SAM 서버</h3>
|
|
<div class="ki-arch-item">키오스크 전용 URL</div>
|
|
<div class="ki-arch-item">제품 카탈로그 API</div>
|
|
<div class="ki-arch-item">견적 계산 엔진</div>
|
|
<div class="ki-arch-item">생산 현황 대시보드</div>
|
|
</div>
|
|
<div class="ki-arch-arrow">DB →</div>
|
|
<div class="ki-arch-box data">
|
|
<h3>기존 SAM 데이터</h3>
|
|
<div class="ki-arch-item">제품 마스터</div>
|
|
<div class="ki-arch-item">가격 정책</div>
|
|
<div class="ki-arch-item">BOM 데이터</div>
|
|
<div class="ki-arch-item">생산 실적</div>
|
|
</div>
|
|
</div>
|
|
<div class="ki-arch-note">
|
|
<strong>Point</strong>
|
|
<span>별도 앱 설치 불필요 · 웹 브라우저 전체화면 모드 · SAM 기존 데이터 100% 활용 · 추가 개발 최소화</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 가격 및 도입 프로세스 --}}
|
|
<div class="ki-section">
|
|
<div class="ki-section-title">
|
|
<div class="bar" style="background: #7c3aed;"></div>
|
|
<h2>가격 및 도입 조건</h2>
|
|
<span>키오스크 HW 공급 + SAM SW 연동</span>
|
|
</div>
|
|
<div class="ki-price-wrap">
|
|
<div class="ki-price-card">
|
|
<h3>공급 가격 (예상)</h3>
|
|
<div><span class="ki-price-num">200</span><span class="ki-price-unit">만원대 / 대</span></div>
|
|
<div class="ki-price-items">
|
|
<div class="ki-price-item"><div class="dot"></div><div><strong>키오스크 함체 (KS-SA240)</strong><small>DNSYS 기둥형 24"</small></div></div>
|
|
<div class="ki-price-item"><div class="dot"></div><div><strong>패널 PC + 터치모니터</strong><small>CPU/RAM/SSD 내장</small></div></div>
|
|
<div class="ki-price-item"><div class="dot"></div><div><strong>SAM 키오스크 SW 연동</strong><small>설정 및 초기 세팅 포함</small></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="ki-process-card">
|
|
<h3>도입 프로세스</h3>
|
|
<div class="ki-step"><div class="ki-step-num" style="background:#2563eb;">1</div><div class="ki-step-body"><strong>고객 상담 & 현장 확인</strong><small>설치 위치, 용도(쇼룸/공장) 확인</small></div></div>
|
|
<div class="ki-step-line"></div>
|
|
<div class="ki-step"><div class="ki-step-num" style="background:#d97706;">2</div><div class="ki-step-body"><strong>DNSYS 사양 확정</strong><small>터치방식, CPU, 옵션 결정</small></div></div>
|
|
<div class="ki-step-line"></div>
|
|
<div class="ki-step"><div class="ki-step-num" style="background:#16a34a;">3</div><div class="ki-step-body"><strong>SAM 키오스크 설정</strong><small>URL 설정, 표시 항목 커스터마이징</small></div></div>
|
|
<div class="ki-step-line"></div>
|
|
<div class="ki-step"><div class="ki-step-num" style="background:#7c3aed;">4</div><div class="ki-step-body"><strong>납품 & 설치</strong><small>현장 설치, 네트워크 연결, 동작 확인</small></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 영업 포인트 --}}
|
|
<div class="ki-section">
|
|
<div class="ki-section-title">
|
|
<div class="bar" style="background: #dc2626;"></div>
|
|
<h2>영업 포인트</h2>
|
|
<span>고객에게 제안할 때 강조할 핵심 가치</span>
|
|
</div>
|
|
<div class="ki-points">
|
|
<div class="ki-point">
|
|
<div class="ki-point-num" style="color: #3b82f6;">01</div>
|
|
<div><h4>추가 비용 없이 기존 시스템 활용</h4><p>SAM에 이미 구축된 제품 카탈로그, 견적 엔진, 생산 대시보드를 그대로 키오스크에 표시합니다. 별도 소프트웨어 개발이 필요없습니다.</p></div>
|
|
</div>
|
|
<div class="ki-point">
|
|
<div class="ki-point-num" style="color: #16a34a;">02</div>
|
|
<div><h4>웹 브라우저 기반 = 유지보수 간편</h4><p>전용 앱이 아닌 웹 브라우저로 동작하므로, SAM이 업데이트되면 키오스크 화면도 자동으로 반영됩니다. 별도 배포 작업이 없습니다.</p></div>
|
|
</div>
|
|
<div class="ki-point">
|
|
<div class="ki-point-num" style="color: #d97706;">03</div>
|
|
<div><h4>산업용 키오스크 = 안정적 내구성</h4><p>DNSYS는 반도체/공장 환경에 납품하는 전문 제조사입니다. 분진, 충격에 강한 산업용 설계로 쇼룸과 공장 모두 안심 운영.</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|