SamProject/sam-kd
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
fb5a95469193df01fcb9c0e51724d91357e2e2a4
sam-kd/report/saas/index.html
hskwon aca1767eb9 초기 커밋: 5130 레거시 시스템 
- URL 하드코딩 → .env APP_URL 기반 동적 URL로 변경
- DB 연결 하드코딩 → .env 기반으로 변경
- MySQL strict mode DATE 오류 수정
2025-12-10 20:14:31 +09:00

387 lines
26 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SaaS란 무엇일까? - 인터랙티브 가이드</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Chosen Palette: "Calm Neutral" (Slate Gray, Muted Blue, White) -->
<!-- Application Structure Plan: 이 애플리케이션은 사용자의 학습 흐름을 고려하여 설계되었습니다. 1) '히어로' 섹션에서 SaaS의 핵심을 간결하게 제시하고, 2) '클라우드 모델 비교' 섹션에서 IaaS, PaaS, SaaS의 차이점을 시각적이고 인터랙티브한 다이어그램으로 학습하게 합니다. 이는 정적인 표보다 개념 이해에 훨씬 효과적입니다. 3) 'SaaS 유형' 섹션에서는 추상적인 개념을 구체적인 카드형 예시로 보여주어 현실감을 더하고, 4) '장단점 분석' 섹션에서 균형 잡힌 시각을 제공하며, 5) 마지막으로 '핵심 요약'으로 전체 내용을 정리합니다. 이러한 점진적이고 인터랙티브한 구조는 사용자가 복잡한 정보를 단계별로 쉽게 소화하도록 돕습니다. -->
<!-- Visualization & Content Choices: 보고서의 핵심 정보들을 가장 효과적으로 전달하기 위해 다음과 같이 시각화 및 콘텐츠를 구성했습니다. 1) IaaS/PaaS/SaaS 비교: 정보 목표는 '비교'와 '구조 이해'입니다. 이를 위해 Chart.js 대신 HTML/CSS/JS로 '책임 공유 모델 다이어그램'을 직접 구현했습니다. 각 서비스 모델을 클릭하면 해당 모델의 관리 주체(공급자/사용자)가 시각적으로 명확히 구분되어, 정적인 표보다 훨씬 직관적인 이해를 돕습니다. 2) SaaS 유형: 정보 목표는 '정보 제공'과 '분류'입니다. 각 유형을 아이콘과 함께 카드 형태로 만들어 시각적 매력과 정보 접근성을 높였습니다. 클릭 시 관련 예시가 나타나는 인터랙션은 사용자의 능동적인 탐색을 유도합니다. 3) 장단점: 정보 목표는 '대조'입니다. 단순하지만 명확한 2단 그리드 레이아웃과 아이콘을 사용하여 사용자가 두 개념을 빠르게 비교하고 이해할 수 있도록 했습니다. 모든 요소는 사용자의 이해를 돕고 지루함을 덜기 위한 목적을 가집니다. -->
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
<style>
body {
font-family: 'Noto Sans KR', sans-serif;
}
.tab-active {
background-color: #3b82f6; /* bg-blue-600 */
color: white;
border-color: #3b82f6; /* border-blue-600 */
}
.content-active {
display: block;
}
.content-inactive {
display: none;
}
.card-enter {
animation: card-enter 0.5s ease-out forwards;
}
@keyframes card-enter {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body class="bg-slate-50 text-slate-800">
<div class="container mx-auto p-4 md:p-8 max-w-5xl">
<!-- Header -->
<header class="text-center mb-12 md:mb-20">
<h1 class="text-4xl md:text-5xl font-bold text-slate-900 mb-4">SaaS<span class="text-blue-600">,</span> 완벽히 파헤치기</h1>
<p class="text-lg text-slate-600">서비스형 소프트웨어의 모든 것을 인터랙티브하게 알아보세요.</p>
</header>
<!-- Section 1: What is SaaS? -->
<section id="intro" class="mb-16 md:mb-24">
<div class="bg-white p-8 rounded-2xl shadow-lg border border-slate-200">
<h2 class="text-3xl font-bold text-slate-900 mb-4">SaaS란 무엇일까요?</h2>
<p class="text-slate-600 leading-relaxed mb-4">
SaaS는 '서비스형 소프트웨어(Software as a Service)'의 약자입니다. 간단히 말해, <strong class="text-blue-600">소프트웨어를 컴퓨터에 설치하지 않고 인터넷을 통해 접속하여 사용하는 방식</strong>을 의미합니다. 모든 소프트웨어와 데이터는 서비스 제공업체의 서버에 저장되고 관리되죠.
</p>
<p class="text-slate-600 leading-relaxed">
여러분에게 익숙한 Gmail, Netflix, Dropbox가 모두 대표적인 SaaS입니다. 우리는 월간 또는 연간 구독료를 내고 로그인만 하면 언제 어디서든 서비스를 이용할 수 있습니다. 설치나 업데이트, 보안 걱정은 모두 제공업체가 담당합니다.
</p>
</div>
</section>
<!-- Section 2: IaaS, PaaS, SaaS Comparison -->
<section id="comparison" class="mb-16 md:mb-24">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-slate-900 mb-4">한눈에 보는 클라우드 서비스 모델</h2>
<p class="text-slate-600 max-w-2xl mx-auto">SaaS는 클라우드 컴퓨팅의 한 종류입니다. IaaS, PaaS와 비교하며 누가 무엇을 관리하는지 알아봅시다. 아래 탭을 클릭해 보세요!</p>
</div>
<div class="bg-white p-6 md:p-8 rounded-2xl shadow-lg border border-slate-200">
<div id="tabs" class="flex justify-center border-b border-slate-200 mb-6">
<button data-tab="iaas" class="tab-btn px-4 py-2 md:px-6 md:py-3 font-semibold text-slate-500 border-b-2 border-transparent transition-colors duration-300">IaaS</button>
<button data-tab="paas" class="tab-btn px-4 py-2 md:px-6 md:py-3 font-semibold text-slate-500 border-b-2 border-transparent transition-colors duration-300">PaaS</button>
<button data-tab="saas" class="tab-btn tab-active px-4 py-2 md:px-6 md:py-3 font-semibold border-b-2 transition-colors duration-300">SaaS</button>
</div>
<div id="tab-content" class="mt-8">
<div id="iaas-content" class="tab-pane content-inactive">
<div class="text-center mb-6">
<h3 class="text-2xl font-bold text-slate-800">IaaS: 서비스형 인프라</h3>
<p class="text-slate-500 mt-2">가상의 서버, 스토리지, 네트워크 등 IT 인프라를 빌려 쓰는 모델입니다.</p>
</div>
<div class="grid md:grid-cols-2 gap-8 items-center">
<div class="responsibility-chart">
<div class="p-3 text-center bg-blue-100 text-blue-800 rounded-lg mb-2 font-semibold">사용자 관리</div>
<div class="stack-item p-3 text-center bg-blue-500 text-white rounded-md mb-1">애플리케이션</div>
<div class="stack-item p-3 text-center bg-blue-500 text-white rounded-md mb-1">데이터</div>
<div class="stack-item p-3 text-center bg-blue-500 text-white rounded-md mb-1">런타임</div>
<div class="stack-item p-3 text-center bg-blue-500 text-white rounded-md mb-1">미들웨어</div>
<div class="stack-item p-3 text-center bg-blue-500 text-white rounded-md mb-1">운영체제</div>
<div class="p-3 text-center bg-slate-200 text-slate-800 rounded-lg mt-4 mb-2 font-semibold">공급자 관리</div>
<div class="stack-item p-3 text-center bg-slate-500 text-white rounded-md mb-1">가상화</div>
<div class="stack-item p-3 text-center bg-slate-500 text-white rounded-md mb-1">서버</div>
<div class="stack-item p-3 text-center bg-slate-500 text-white rounded-md mb-1">스토리지</div>
<div class="stack-item p-3 text-center bg-slate-500 text-white rounded-md">네트워킹</div>
</div>
<div class="text-slate-600">
<p>IaaS 모델에서 사용자는 가장 높은 수준의 제어권을 가집니다. OS부터 애플리케이션까지 직접 설치하고 관리해야 합니다. 마치 땅을 빌려 직접 집을 짓는 것과 같습니다. 개발자나 IT 관리자에게 적합합니다.</p>
</div>
</div>
</div>
<div id="paas-content" class="tab-pane content-inactive">
<div class="text-center mb-6">
<h3 class="text-2xl font-bold text-slate-800">PaaS: 서비스형 플랫폼</h3>
<p class="text-slate-500 mt-2">애플리케이션을 개발하고 실행할 수 있는 환경(플랫폼)을 제공하는 모델입니다.</p>
</div>
<div class="grid md:grid-cols-2 gap-8 items-center">
<div class="responsibility-chart">
<div class="p-3 text-center bg-blue-100 text-blue-800 rounded-lg mb-2 font-semibold">사용자 관리</div>
<div class="stack-item p-3 text-center bg-blue-500 text-white rounded-md mb-1">애플리케이션</div>
<div class="stack-item p-3 text-center bg-blue-500 text-white rounded-md">데이터</div>
<div class="p-3 text-center bg-slate-200 text-slate-800 rounded-lg mt-4 mb-2 font-semibold">공급자 관리</div>
<div class="stack-item p-3 text-center bg-slate-500 text-white rounded-md mb-1">런타임</div>
<div class="stack-item p-3 text-center bg-slate-500 text-white rounded-md mb-1">미들웨어</div>
<div class="stack-item p-3 text-center bg-slate-500 text-white rounded-md mb-1">운영체제</div>
<div class="stack-item p-3 text-center bg-slate-500 text-white rounded-md mb-1">가상화</div>
<div class="stack-item p-3 text-center bg-slate-500 text-white rounded-md mb-1">서버</div>
<div class="stack-item p-3 text-center bg-slate-500 text-white rounded-md mb-1">스토리지</div>
<div class="stack-item p-3 text-center bg-slate-500 text-white rounded-md">네트워킹</div>
</div>
<div class="text-slate-600">
<p>PaaS에서는 인프라와 OS, 미들웨어까지 모두 공급업체가 관리합니다. 사용자는 오직 애플리케이션 개발과 데이터에만 집중하면 됩니다. 조립식 주택 키트를 받아 조립만 하는 것과 비슷합니다. 개발자의 생산성을 크게 높여줍니다.</p>
</div>
</div>
</div>
<div id="saas-content" class="tab-pane content-active">
<div class="text-center mb-6">
<h3 class="text-2xl font-bold text-slate-800">SaaS: 서비스형 소프트웨어</h3>
<p class="text-slate-500 mt-2">완성된 소프트웨어를 인터넷을 통해 바로 사용할 수 있도록 제공하는 모델입니다.</p>
</div>
<div class="grid md:grid-cols-2 gap-8 items-center">
<div class="responsibility-chart">
<div class="p-3 text-center bg-blue-100 text-blue-800 rounded-lg mb-2 font-semibold">사용자 관리</div>
<div class="stack-item p-3 text-center bg-blue-500 text-white rounded-md mb-1">데이터</div>
<div class="p-3 text-center bg-slate-200 text-slate-800 rounded-lg mt-4 mb-2 font-semibold">공급자 관리</div>
<div class="stack-item p-3 text-center bg-slate-500 text-white rounded-md mb-1">애플리케이션</div>
<div class="stack-item p-3 text-center bg-slate-500 text-white rounded-md mb-1">런타임</div>
<div class="stack-item p-3 text-center bg-slate-500 text-white rounded-md mb-1">미들웨어</div>
<div class="stack-item p-3 text-center bg-slate-500 text-white rounded-md mb-1">운영체제</div>
<div class="stack-item p-3 text-center bg-slate-500 text-white rounded-md mb-1">가상화</div>
<div class="stack-item p-3 text-center bg-slate-500 text-white rounded-md mb-1">서버</div>
<div class="stack-item p-3 text-center bg-slate-500 text-white rounded-md mb-1">스토리지</div>
<div class="stack-item p-3 text-center bg-slate-500 text-white rounded-md">네트워킹</div>
</div>
<div class="text-slate-600">
<p>SaaS에서는 데이터 관리를 제외한 모든 것을 공급업체가 책임집니다. 사용자는 기술적인 부분에 대해 전혀 신경 쓸 필요 없이 소프트웨어의 기능만 활용하면 됩니다. 잘 지어진 집에 가구만 들고 입주하는 것과 같습니다. 일반 사용자에게 가장 편리한 모델입니다.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section 3: SaaS Types -->
<section id="types" class="mb-16 md:mb-24">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-slate-900 mb-4">우리 주변의 다양한 SaaS</h2>
<p class="text-slate-600 max-w-2xl mx-auto">SaaS는 이미 우리 일상과 업무 곳곳에 스며들어 있습니다. 어떤 종류들이 있는지 살펴볼까요?</p>
</div>
<div id="saas-type-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
</div>
<div id="saas-type-details" class="mt-8 bg-white p-6 rounded-2xl shadow-lg border border-slate-200 hidden">
<h3 id="details-title" class="text-xl font-bold text-slate-800 mb-2"></h3>
<p id="details-description" class="text-slate-600 mb-4"></p>
<p class="font-semibold text-slate-700">대표적인 서비스:</p>
<p id="details-examples" class="text-blue-600 font-medium"></p>
</div>
</section>
<!-- Section 4: Pros and Cons -->
<section id="pros-cons" class="mb-16 md:mb-24">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-slate-900 mb-4">SaaS, 빛과 그림자</h2>
<p class="text-slate-600 max-w-2xl mx-auto">모든 기술에는 장단점이 있듯이, SaaS도 예외는 아닙니다. 균형 잡힌 시각으로 살펴봅시다.</p>
</div>
<div class="grid md:grid-cols-2 gap-8">
<!-- Pros -->
<div class="bg-white p-8 rounded-2xl shadow-lg border border-slate-200">
<h3 class="text-2xl font-bold text-green-600 mb-6 flex items-center">
<span class="text-3xl mr-3">👍</span> 장점
</h3>
<ul class="space-y-4">
<li class="flex items-start">
<span class="text-green-500 mr-3 mt-1">✔</span>
<div>
<h4 class="font-bold text-slate-800">뛰어난 접근성</h4>
<p class="text-slate-600">인터넷만 있으면 언제 어디서든, 어떤 기기에서든 접속할 수 있습니다.</p>
</div>
</li>
<li class="flex items-start">
<span class="text-green-500 mr-3 mt-1">✔</span>
<div>
<h4 class="font-bold text-slate-800">비용 효율성</h4>
<p class="text-slate-600">고가의 라이선스나 하드웨어 구매 없이 저렴한 구독료로 이용 가능합니다.</p>
</div>
</li>
<li class="flex items-start">
<span class="text-green-500 mr-3 mt-1">✔</span>
<div>
<h4 class="font-bold text-slate-800">자동 업데이트 및 유지보수</h4>
<p class="text-slate-600">사용자는 업데이트나 보안 패치에 신경 쓸 필요 없이 항상 최신 버전을 사용합니다.</p>
</div>
</li>
<li class="flex items-start">
<span class="text-green-500 mr-3 mt-1">✔</span>
<div>
<h4 class="font-bold text-slate-800">안정성 및 보안</h4>
<p class="text-slate-600">전문 IT 인력이 관리하는 데이터 센터에서 운영되어 안정적이고 안전합니다.</p>
</div>
</li>
</ul>
</div>
<!-- Cons -->
<div class="bg-white p-8 rounded-2xl shadow-lg border border-slate-200">
<h3 class="text-2xl font-bold text-red-600 mb-6 flex items-center">
<span class="text-3xl mr-3">👎</span> 단점
</h3>
<ul class="space-y-4">
<li class="flex items-start">
<span class="text-red-500 mr-3 mt-1">✖</span>
<div>
<h4 class="font-bold text-slate-800">인터넷 의존성</h4>
<p class="text-slate-600">인터넷 연결이 원활하지 않으면 서비스를 이용할 수 없습니다.</p>
</div>
</li>
<li class="flex items-start">
<span class="text-red-500 mr-3 mt-1">✖</span>
<div>
<h4 class="font-bold text-slate-800">보안 우려</h4>
<p class="text-slate-600">모든 정보가 클라우드에 저장되므로 데이터 유출이나 해킹의 위험이 존재합니다.</p>
</div>
</li>
<li class="flex items-start">
<span class="text-red-500 mr-3 mt-1">✖</span>
<div>
<h4 class="font-bold text-slate-800">제한적인 기능</h4>
<p class="text-slate-600">제공업체가 정해놓은 기능 외에 사용자가 원하는 대로 기능을 바꾸거나 추가하기 어렵습니다.</p>
</div>
</li>
<li class="flex items-start">
<span class="text-red-500 mr-3 mt-1">✖</span>
<div>
<h4 class="font-bold text-slate-800">성능 문제</h4>
<p class="text-slate-600">클라우드 기반으로 작동하므로, 기기나 네트워크 상태에 따라 속도가 느려질 수 있습니다.</p>
</div>
</li>
</ul>
</div>
</div>
</section>
<!-- Footer -->
<footer class="text-center mt-16 md:mt-24 pt-8 border-t border-slate-200">
<p class="text-slate-500">이 페이지는 제공된 정보를 바탕으로 제작된 인터랙티브 웹 애플리케이션입니다.</p>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const tabs = document.querySelectorAll('.tab-btn');
const tabPanes = document.querySelectorAll('.tab-pane');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const targetTab = tab.dataset.tab;
tabs.forEach(t => t.classList.remove('tab-active'));
tab.classList.add('tab-active');
tabPanes.forEach(pane => {
if (pane.id === `${targetTab}-content`) {
pane.classList.remove('content-inactive');
pane.classList.add('content-active');
} else {
pane.classList.remove('content-active');
pane.classList.add('content-inactive');
}
});
});
});
// Activate SaaS tab by default
document.querySelector('button[data-tab="saas"]').click();
const saasTypesData = [
{
icon: '👥',
title: '고객 관계 관리 (CRM)',
description: '기업이 고객과의 상호작용을 구성하고 유지하도록 돕습니다.',
examples: 'Salesforce, Zoho, Salesmate'
},
{
icon: '🤝',
title: '인사 (HR)',
description: '채용, 보상, 교육 등 인적 자원 관리의 모든 측면을 지원합니다.',
examples: 'BambooHR, Gusto, Skillsoft'
},
{
icon: '💬',
title: '커뮤니케이션 및 협업',
description: '팀의 프로젝트 소통과 파일 공유, 협업을 쉽게 만들어 줍니다.',
examples: 'Slack, Microsoft Teams, Google Workspace'
},
{
icon: '📈',
title: '프로젝트 관리',
description: '프로세스를 간소화하고 팀의 업무 효율성을 높여줍니다.',
examples: 'Asana, Trello, Jira, Monday.com'
},
{
icon: '📦',
title: '기업 자원 관리 (ERP)',
description: '판매, 회계, 생산 등 비즈니스의 모든 핵심 기능을 한 곳에서 관리합니다.',
examples: 'NetSuite, SAP S/4HANA Cloud, Sage'
},
{
icon: '☁️',
title: '데이터 저장',
description: '대용량 문서, 파일, 이미지를 안전하게 저장하고 공유합니다.',
examples: 'Dropbox, Google Drive, iCloud'
},
{
icon: '🧾',
title: '회계',
description: '청구서, 장부 관리, 급여 지급 등 재무 관리를 간소화합니다.',
examples: 'QuickBooks, FreshBooks, Xero'
},
{
icon: '🛒',
title: '웹 호스팅 및 이커머스',
description: '개인이나 기업이 웹사이트나 온라인 쇼핑몰을 쉽게 만들고 운영하도록 돕습니다.',
examples: 'Wix, Shopify, BigCommerce'
},
{
icon: '💳',
title: '결제 솔루션',
description: '온라인 쇼핑몰 등에서 안전한 결제 시스템을 제공합니다.',
examples: 'Stripe, PayPal, Venmo'
}
];
const grid = document.getElementById('saas-type-grid');
const detailsPane = document.getElementById('saas-type-details');
const detailsTitle = document.getElementById('details-title');
const detailsDescription = document.getElementById('details-description');
const detailsExamples = document.getElementById('details-examples');
let activeCard = null;
saasTypesData.forEach((type, index) => {
const card = document.createElement('div');
card.className = 'saas-type-card bg-white p-6 rounded-xl border border-slate-200 hover:shadow-xl hover:border-blue-500 transition-all duration-300 cursor-pointer';
card.style.animationDelay = `${index * 50}ms`;
card.innerHTML = `
<div class="flex items-center mb-4">
<span class="text-4xl mr-4">${type.icon}</span>
<h3 class="text-xl font-bold text-slate-800">${type.title}</h3>
</div>
<p class="text-slate-600">${type.description}</p>
`;
card.addEventListener('click', () => {
if (activeCard) {
activeCard.classList.remove('bg-blue-100', 'border-blue-500');
}
card.classList.add('bg-blue-100', 'border-blue-500');
activeCard = card;
detailsTitle.textContent = type.title;
detailsDescription.textContent = type.description;
detailsExamples.textContent = type.examples;
detailsPane.classList.remove('hidden');
detailsPane.scrollIntoView({ behavior: 'smooth', block: 'center' });
});
grid.appendChild(card);
});
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink