hskwon
aca1767eb9
- URL 하드코딩 → .env APP_URL 기반 동적 URL로 변경 - DB 연결 하드코딩 → .env 기반으로 변경 - MySQL strict mode DATE 오류 수정
656 lines
33 KiB
PHP
656 lines
33 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Confluence vs Notion: 심층 분석 보고서</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<style>
|
|
/* Chart Container Styling - Critical for Responsiveness */
|
|
.chart-container {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
height: 300px;
|
|
max-height: 400px;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.chart-container {
|
|
height: 350px;
|
|
}
|
|
}
|
|
|
|
/* Custom Scrollbar for cleaner look */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: #f5f5f4;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #d6d3d1;
|
|
border-radius: 4px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #a8a29e;
|
|
}
|
|
|
|
.tab-active {
|
|
border-bottom: 2px solid #0052CC;
|
|
color: #0052CC;
|
|
font-weight: 600;
|
|
}
|
|
.tab-inactive {
|
|
color: #78716c;
|
|
}
|
|
.tab-inactive:hover {
|
|
color: #44403c;
|
|
}
|
|
</style>
|
|
<!-- Chosen Palette: Warm Neutrals (Stone) with Corporate Blue (Confluence) and Monochrome (Notion) accents -->
|
|
<!-- Application Structure Plan:
|
|
1. Header & Context: Introduction to the rivalry.
|
|
2. Market Trends: Line chart showing "Interest" to validate the prompt's premise (Notion rising).
|
|
3. Philosophy Radar: Visual comparison of tool "personality" (Structure vs. Flexibility).
|
|
4. Feature Matrix: Interactive toggleable grid for deep dives into specific functionalities.
|
|
5. Cost Simulator: Interactive slider and bar chart to estimate TCO (Total Cost of Ownership).
|
|
6. Recommendation Engine: Simple logic-based decision tree for the user.
|
|
This structure moves from abstract market data to concrete features, then pricing, and finally a personalized recommendation.
|
|
-->
|
|
<!-- Visualization & Content Choices:
|
|
1. Market Trend -> Line Chart -> Show growth velocity difference -> Chart.js
|
|
2. Philosophy -> Radar Chart -> Compare multi-axial attributes (UX, Integration, Freedom) -> Chart.js
|
|
3. Pricing -> Bar Chart -> Compare stacked costs at different scales -> Chart.js
|
|
4. Icons/UI -> Unicode & Tailwind Shapes -> NO SVG/Mermaid confirmation.
|
|
-->
|
|
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
|
|
</head>
|
|
<body class="bg-stone-50 text-stone-800 font-sans antialiased selection:bg-blue-100">
|
|
|
|
<!-- Navigation / Header -->
|
|
<header class="bg-white border-b border-stone-200 sticky top-0 z-50">
|
|
<div class="container mx-auto">
|
|
<div class="mb-6 flex items-center justify-start">
|
|
<a href="<?=$root_dir?>/index.php" class="inline-flex items-center px-3 py-2 rounded-lg hover:bg-amber-100 transition-colors">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 md:w-8 md:h-8 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 11.5L12 4l9 7.5M5 10v8a1 1 0 001 1h3.5a1 1 0 001-1v-3h2v3a1 1 0 001 1H18a1 1 0 001-1v-8"/>
|
|
</svg>
|
|
<span class="ml-2 text-base md:text-lg font-semibold text-amber-700 hidden md:inline">홈으로</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-16">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold text-lg">C</div>
|
|
<span class="text-stone-400 font-light text-xl">vs</span>
|
|
<div class="w-8 h-8 bg-stone-900 rounded-lg flex items-center justify-center text-white font-bold text-lg">N</div>
|
|
<h1 class="ml-3 text-xl font-bold tracking-tight text-stone-900 hidden sm:block">Work Tool Analysis</h1>
|
|
</div>
|
|
<nav class="hidden md:flex space-x-8">
|
|
<a href="#trends" class="text-stone-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition">트렌드 & 철학</a>
|
|
<a href="#features" class="text-stone-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition">기능 비교</a>
|
|
<a href="#pricing" class="text-stone-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition">비용 시뮬레이션</a>
|
|
<a href="#verdict" class="text-stone-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition">추천 가이드</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Hero Section -->
|
|
<main class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-4xl font-extrabold text-stone-900 mb-4">구조(Structure)와 유연성(Flexibility)의 대결</h2>
|
|
<p class="text-lg text-stone-600 max-w-3xl mx-auto leading-relaxed">
|
|
전통적인 강자 <strong>Atlassian Confluence</strong>는 체계적인 문서화와 JIRA 통합을 무기로 기업 시장을 지키고 있습니다.
|
|
반면, <strong>Notion</strong>은 올인원(All-in-one) 워크스페이스와 압도적인 자유도로 빠르게 시장을 잠식하고 있습니다.
|
|
이 인터랙티브 리포트는 두 도구의 차이점을 분석하여 귀하의 팀에 최적화된 선택을 돕습니다.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Section 1: Market Trends & Philosophy -->
|
|
<section id="trends" class="mb-20 scroll-mt-20">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
|
|
|
|
<!-- Left: Market Trend Logic -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-stone-100 p-6">
|
|
<div class="mb-4">
|
|
<h3 class="text-xl font-bold text-stone-900 mb-2">시장 관심도 변화 (Trend Analysis)</h3>
|
|
<p class="text-sm text-stone-500">
|
|
최근 5년간의 검색량 및 사용자 관심도 추이 시뮬레이션입니다. Notion의 가파른 성장세와 Confluence의 안정적인 엔터프라이즈 수요를 보여줍니다.
|
|
</p>
|
|
</div>
|
|
<div class="chart-container">
|
|
<canvas id="trendChart"></canvas>
|
|
</div>
|
|
<div class="mt-4 bg-blue-50 p-4 rounded-xl border border-blue-100">
|
|
<p class="text-sm text-blue-800">
|
|
<strong>💡 핵심 인사이트:</strong> Notion은 개인 사용자와 스타트업을 중심으로 폭발적인 '팬덤'을 형성하며 성장했습니다. 반면 Confluence는 대규모 조직의 표준 도구로서 견고한 위치를 유지하고 있습니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Philosophy Comparison -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-stone-100 p-6">
|
|
<div class="mb-4">
|
|
<h3 class="text-xl font-bold text-stone-900 mb-2">핵심 철학 비교 (Philosophy Radar)</h3>
|
|
<p class="text-sm text-stone-500">
|
|
두 도구의 성격은 완전히 다릅니다. 아래 차트는 각 도구가 집중하는 핵심 가치를 시각화합니다.
|
|
</p>
|
|
</div>
|
|
<div class="chart-container">
|
|
<canvas id="radarChart"></canvas>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4 mt-4 text-sm">
|
|
<div class="text-center">
|
|
<span class="block font-bold text-blue-600 mb-1">Confluence</span>
|
|
<span class="text-stone-500">"체계화된 지식 저장소"</span>
|
|
</div>
|
|
<div class="text-center">
|
|
<span class="block font-bold text-stone-900 mb-1">Notion</span>
|
|
<span class="text-stone-500">"유연한 레고 블록"</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 2: Feature Deep Dive -->
|
|
<section id="features" class="mb-20 scroll-mt-20">
|
|
<div class="mb-8">
|
|
<h3 class="text-2xl font-bold text-stone-900">기능 심층 비교</h3>
|
|
<p class="text-stone-600 mt-2">
|
|
단순히 '문서 도구'라고 정의하기엔 두 제품의 지향점이 다릅니다. 카테고리별 상세 기능을 확인하세요.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Custom Tabs -->
|
|
<div class="flex space-x-6 border-b border-stone-200 mb-8 overflow-x-auto">
|
|
<button onclick="updateFeatureView('doc')" class="tab-btn tab-active pb-3 px-1 transition whitespace-nowrap" id="btn-doc">문서화 & 위키</button>
|
|
<button onclick="updateFeatureView('pm')" class="tab-btn tab-inactive pb-3 px-1 transition whitespace-nowrap" id="btn-pm">프로젝트 관리</button>
|
|
<button onclick="updateFeatureView('dev')" class="tab-btn tab-inactive pb-3 px-1 transition whitespace-nowrap" id="btn-dev">개발 & 통합 (Integrations)</button>
|
|
</div>
|
|
|
|
<!-- Dynamic Content Area -->
|
|
<div id="feature-content" class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<!-- Content injected via JS -->
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 3: Pricing Simulator -->
|
|
<section id="pricing" class="mb-20 scroll-mt-20 bg-stone-100 rounded-3xl p-8 lg:p-12">
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
|
<div class="lg:col-span-1">
|
|
<h3 class="text-2xl font-bold text-stone-900 mb-4">비용 시뮬레이션</h3>
|
|
<p class="text-stone-600 mb-8">
|
|
팀 규모에 따른 월간 예상 비용을 확인해보세요. (Standard 플랜 기준)
|
|
</p>
|
|
|
|
<div class="mb-8">
|
|
<label for="userRange" class="block text-sm font-medium text-stone-700 mb-2">팀 규모: <span id="userCountDisplay" class="text-blue-600 font-bold text-lg">10</span>명</label>
|
|
<input type="range" id="userRange" min="1" max="200" value="10" class="w-full h-2 bg-stone-300 rounded-lg appearance-none cursor-pointer accent-blue-600">
|
|
<div class="flex justify-between text-xs text-stone-500 mt-2">
|
|
<span>1명</span>
|
|
<span>200명+</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<div class="bg-white p-4 rounded-xl shadow-sm border-l-4 border-blue-600">
|
|
<div class="text-xs text-stone-500 uppercase font-semibold">Confluence 예상 비용</div>
|
|
<div class="text-2xl font-bold text-stone-900" id="confPrice">$60.00</div>
|
|
<div class="text-xs text-stone-400">월간 / 사용자당 약 $6.05 (Tier별 상이)</div>
|
|
</div>
|
|
<div class="bg-white p-4 rounded-xl shadow-sm border-l-4 border-stone-800">
|
|
<div class="text-xs text-stone-500 uppercase font-semibold">Notion 예상 비용</div>
|
|
<div class="text-2xl font-bold text-stone-900" id="notionPrice">$80.00</div>
|
|
<div class="text-xs text-stone-400">월간 / 사용자당 $8 (Plus 플랜)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lg:col-span-2 flex flex-col justify-center">
|
|
<div class="chart-container">
|
|
<canvas id="pricingChart"></canvas>
|
|
</div>
|
|
<div class="mt-6 text-sm text-stone-500 bg-white p-4 rounded-lg">
|
|
<p>📢 <strong>참고:</strong> Confluence는 10명 이하 무료, 이후 사용자 수 구간별로 가격이 책정됩니다. Notion은 개인 무료이며, 팀 단위 사용 시 유료 플랜이 필수적입니다. (2024년 기준 대략적 가격 정책 반영)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 4: Recommendation Engine -->
|
|
<section id="verdict" class="mb-20 scroll-mt-20">
|
|
<div class="max-w-4xl mx-auto bg-white border border-stone-200 rounded-2xl shadow-lg overflow-hidden">
|
|
<div class="bg-stone-900 p-6 text-center">
|
|
<h3 class="text-2xl font-bold text-white">어떤 도구가 우리 팀에 맞을까요?</h3>
|
|
<p class="text-stone-400 mt-2">3가지 질문으로 알아보는 추천 가이드</p>
|
|
</div>
|
|
|
|
<div class="p-8">
|
|
<!-- Quiz Interface -->
|
|
<div id="quiz-container" class="space-y-6">
|
|
<div class="space-y-4">
|
|
<p class="font-semibold text-lg text-stone-800">Q1. 귀하의 팀은 소프트웨어 개발이 주 업무이며, JIRA를 사용하나요?</p>
|
|
<div class="flex gap-4">
|
|
<button onclick="handleQuiz(1, true)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-blue-500 hover:bg-blue-50 transition font-medium">예 (Yes)</button>
|
|
<button onclick="handleQuiz(1, false)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-stone-500 hover:bg-stone-50 transition font-medium">아니오 (No)</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Result Interface (Hidden by default) -->
|
|
<div id="result-container" class="hidden text-center fade-in">
|
|
<div class="mb-6 flex justify-center">
|
|
<div id="result-icon" class="text-6xl"></div>
|
|
</div>
|
|
<h4 id="result-title" class="text-3xl font-bold mb-4 text-stone-900"></h4>
|
|
<p id="result-desc" class="text-lg text-stone-600 mb-8 max-w-2xl mx-auto"></p>
|
|
<button onclick="resetQuiz()" class="px-6 py-2 bg-stone-200 text-stone-700 rounded-lg hover:bg-stone-300 transition text-sm font-semibold">다시 하기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="text-center text-stone-400 py-10 border-t border-stone-200">
|
|
<p class="text-sm">Source Data based on general market analysis of Atlassian Confluence vs Notion (2024).</p>
|
|
<p class="text-xs mt-2">Generated by Interactive Analysis Assistant.</p>
|
|
</footer>
|
|
|
|
</main>
|
|
|
|
<script>
|
|
// --- State Management ---
|
|
const state = {
|
|
users: 10,
|
|
currentTab: 'doc',
|
|
quizScore: 0 // Positive leans Confluence, Negative leans Notion
|
|
};
|
|
|
|
// --- Data Store ---
|
|
const featureData = {
|
|
doc: {
|
|
confluence: {
|
|
title: "Confluence: 구조적 문서화",
|
|
icon: "📚",
|
|
points: [
|
|
"계층형 페이지 트리 구조 (Space > Parent > Child)",
|
|
"강력한 버전 관리 및 변경 이력 추적",
|
|
"엄격한 권한 관리 (페이지/스페이스 단위)",
|
|
"공식적인 사내 규정, 매뉴얼 관리에 최적"
|
|
],
|
|
color: "bg-blue-50 border-blue-200 text-blue-900"
|
|
},
|
|
notion: {
|
|
title: "Notion: 유연한 캔버스",
|
|
icon: "🎨",
|
|
points: [
|
|
"무한히 중첩 가능한 페이지 구조",
|
|
"드래그 앤 드롭 블록 시스템 (텍스트, 이미지, DB 혼합)",
|
|
"실시간 협업에 강하지만 버전 관리는 상대적으로 약함",
|
|
"브레인스토밍, 아이디어 노트, 개인 위키에 최적"
|
|
],
|
|
color: "bg-stone-100 border-stone-200 text-stone-900"
|
|
}
|
|
},
|
|
pm: {
|
|
confluence: {
|
|
title: "Confluence: JIRA 보조",
|
|
icon: "🤝",
|
|
points: [
|
|
"독자적인 PM 기능보다는 JIRA 데이터 시각화에 집중",
|
|
"JIRA 로드맵, 이슈 리스트 매크로 활용",
|
|
"스프린트 회고 및 요구사항 정의서 템플릿 강점",
|
|
"복잡한 프로젝트의 '문서적' 관리에 적합"
|
|
],
|
|
color: "bg-blue-50 border-blue-200 text-blue-900"
|
|
},
|
|
notion: {
|
|
title: "Notion: 경량형 PM 도구",
|
|
icon: "📅",
|
|
points: [
|
|
"데이터베이스를 활용한 칸반 보드, 간트 차트 내장",
|
|
"별도 도구 없이 하나의 페이지에서 기획+일정 관리 가능",
|
|
"필터와 보기를 통해 다양한 관점 제공 (List, Gallery, Calendar)",
|
|
"Agile 프로세스가 엄격하지 않은 팀에 적합"
|
|
],
|
|
color: "bg-stone-100 border-stone-200 text-stone-900"
|
|
}
|
|
},
|
|
dev: {
|
|
confluence: {
|
|
title: "Confluence: 개발 생태계",
|
|
icon: "⚙️",
|
|
points: [
|
|
"JIRA 이슈 양방향 동기화 (가장 강력한 차별점)",
|
|
"코드 스니펫 매크로 제공",
|
|
"DevOps 파이프라인 상태 표시 가능 (Marketplace 앱 활용)",
|
|
"수천 개의 서드파티 앱 마켓플레이스"
|
|
],
|
|
color: "bg-blue-50 border-blue-200 text-blue-900"
|
|
},
|
|
notion: {
|
|
title: "Notion: API & 임베드",
|
|
icon: "🔌",
|
|
points: [
|
|
"GitHub, Slack, Figma 등의 링크 미리보기(Embed) 지원",
|
|
"Notion API를 활용한 커스텀 자동화 가능",
|
|
"Syncd Blocks(동기화 블록)으로 여러 페이지 내용 동시 업데이트",
|
|
"JIRA 연동이 가능하나 Confluence만큼 깊지 않음"
|
|
],
|
|
color: "bg-stone-100 border-stone-200 text-stone-900"
|
|
}
|
|
}
|
|
};
|
|
|
|
// --- Initialization ---
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initCharts();
|
|
updateFeatureView('doc'); // Default view
|
|
updatePrice(); // Initial calculation
|
|
});
|
|
|
|
// --- Chart Logic (Chart.js) ---
|
|
let pricingChart; // Global reference to update later
|
|
|
|
function initCharts() {
|
|
// 1. Trend Chart (Line)
|
|
const ctxTrend = document.getElementById('trendChart').getContext('2d');
|
|
new Chart(ctxTrend, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['2020', '2021', '2022', '2023', '2024'],
|
|
datasets: [
|
|
{
|
|
label: 'Notion (관심도)',
|
|
data: [30, 55, 75, 85, 95],
|
|
borderColor: '#333333',
|
|
backgroundColor: 'rgba(51, 51, 51, 0.1)',
|
|
tension: 0.4,
|
|
fill: true
|
|
},
|
|
{
|
|
label: 'Confluence (관심도)',
|
|
data: [70, 72, 71, 73, 74],
|
|
borderColor: '#0052CC',
|
|
borderDash: [5, 5],
|
|
tension: 0.4,
|
|
fill: false
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { position: 'bottom' },
|
|
tooltip: { mode: 'index', intersect: false }
|
|
},
|
|
scales: {
|
|
y: { display: false } // Remove Y axis numbers for cleaner abstract look
|
|
}
|
|
}
|
|
});
|
|
|
|
// 2. Radar Chart (Philosophy)
|
|
const ctxRadar = document.getElementById('radarChart').getContext('2d');
|
|
new Chart(ctxRadar, {
|
|
type: 'radar',
|
|
data: {
|
|
labels: ['유연성(Flexibility)', '구조화(Structure)', 'JIRA 통합', '학습 곡선(쉬움)', '디자인/UI'],
|
|
datasets: [
|
|
{
|
|
label: 'Notion',
|
|
data: [95, 40, 50, 85, 95],
|
|
backgroundColor: 'rgba(51, 51, 51, 0.2)',
|
|
borderColor: '#333333',
|
|
pointBackgroundColor: '#333333'
|
|
},
|
|
{
|
|
label: 'Confluence',
|
|
data: [40, 95, 100, 50, 60],
|
|
backgroundColor: 'rgba(0, 82, 204, 0.2)',
|
|
borderColor: '#0052CC',
|
|
pointBackgroundColor: '#0052CC'
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
r: {
|
|
angleLines: { display: true },
|
|
suggestedMin: 0,
|
|
suggestedMax: 100
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: { position: 'bottom' }
|
|
}
|
|
}
|
|
});
|
|
|
|
// 3. Pricing Chart (Bar) - Initial Render
|
|
const ctxPrice = document.getElementById('pricingChart').getContext('2d');
|
|
pricingChart = new Chart(ctxPrice, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['Confluence', 'Notion'],
|
|
datasets: [{
|
|
label: '월간 예상 비용 (USD)',
|
|
data: [0, 0], // Will be updated
|
|
backgroundColor: ['#0052CC', '#333333'],
|
|
borderRadius: 8
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
y: { beginAtZero: true, title: { display: true, text: 'USD ($)' } }
|
|
},
|
|
plugins: { legend: { display: false } }
|
|
}
|
|
});
|
|
}
|
|
|
|
// --- Feature View Interaction ---
|
|
function updateFeatureView(type) {
|
|
state.currentTab = type;
|
|
|
|
// Update Tab Styles
|
|
['doc', 'pm', 'dev'].forEach(t => {
|
|
const btn = document.getElementById(`btn-${t}`);
|
|
if(t === type) {
|
|
btn.className = "tab-btn tab-active pb-3 px-1 transition whitespace-nowrap text-lg";
|
|
} else {
|
|
btn.className = "tab-btn tab-inactive pb-3 px-1 transition whitespace-nowrap text-lg";
|
|
}
|
|
});
|
|
|
|
// Render Content
|
|
const data = featureData[type];
|
|
const contentDiv = document.getElementById('feature-content');
|
|
|
|
contentDiv.innerHTML = `
|
|
<!-- Confluence Card -->
|
|
<div class="rounded-2xl p-6 border-2 ${data.confluence.color.replace('text-blue-900', 'border-blue-100')} fade-in transform transition hover:-translate-y-1 duration-300">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<span class="text-3xl">${data.confluence.icon}</span>
|
|
<h4 class="text-xl font-bold text-blue-900">${data.confluence.title}</h4>
|
|
</div>
|
|
<ul class="space-y-3">
|
|
${data.confluence.points.map(p => `<li class="flex items-start gap-2 text-stone-700"><span class="text-blue-500 mt-1">✔</span> ${p}</li>`).join('')}
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Notion Card -->
|
|
<div class="rounded-2xl p-6 border-2 ${data.notion.color.replace('text-stone-900', 'border-stone-200')} fade-in transform transition hover:-translate-y-1 duration-300">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<span class="text-3xl">${data.notion.icon}</span>
|
|
<h4 class="text-xl font-bold text-stone-900">${data.notion.title}</h4>
|
|
</div>
|
|
<ul class="space-y-3">
|
|
${data.notion.points.map(p => `<li class="flex items-start gap-2 text-stone-700"><span class="text-stone-900 mt-1">✔</span> ${p}</li>`).join('')}
|
|
</ul>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// --- Pricing Logic ---
|
|
const userRange = document.getElementById('userRange');
|
|
userRange.addEventListener('input', (e) => {
|
|
state.users = parseInt(e.target.value);
|
|
updatePrice();
|
|
});
|
|
|
|
function updatePrice() {
|
|
const users = state.users;
|
|
document.getElementById('userCountDisplay').innerText = users;
|
|
|
|
let confCost = 0;
|
|
let notionCost = 0;
|
|
|
|
// Simplified Pricing Model for Demo
|
|
// Confluence: Free up to 10. Standard approx $6.05/user/mo
|
|
if (users <= 10) {
|
|
confCost = 0;
|
|
} else {
|
|
confCost = users * 6.05;
|
|
}
|
|
|
|
// Notion: Free for individuals. Team plan approx $8/user/mo
|
|
// Assuming for comparison this is a team use case
|
|
if (users === 1) {
|
|
notionCost = 0;
|
|
} else {
|
|
notionCost = users * 8;
|
|
}
|
|
|
|
document.getElementById('confPrice').innerText = `$${confCost.toFixed(2)}`;
|
|
document.getElementById('notionPrice').innerText = `$${notionCost.toFixed(2)}`;
|
|
|
|
// Update Chart
|
|
pricingChart.data.datasets[0].data = [confCost, notionCost];
|
|
pricingChart.update();
|
|
}
|
|
|
|
// --- Quiz Logic ---
|
|
let currentStep = 0;
|
|
|
|
const quizQuestions = [
|
|
{
|
|
q: "1. 팀이 JIRA를 핵심 프로젝트 관리 도구로 사용합니까?",
|
|
yesScore: 10, // Strong Confluence
|
|
noScore: -5
|
|
},
|
|
{
|
|
q: "2. 문서의 양식이 엄격하게 정해져 있고, 결재/승인 프로세스가 중요한가요?",
|
|
yesScore: 5,
|
|
noScore: -5
|
|
},
|
|
{
|
|
q: "3. 팀원들이 자유롭게 페이지를 꾸미고 구조를 변경하는 것을 선호하나요?",
|
|
yesScore: -10, // Strong Notion
|
|
noScore: 5
|
|
}
|
|
];
|
|
|
|
function handleQuiz(step, answerYes) {
|
|
// Logic for first question
|
|
if (step === 1) {
|
|
state.quizScore += answerYes ? 10 : -5;
|
|
// Move to Q2
|
|
document.getElementById('quiz-container').innerHTML = `
|
|
<div class="space-y-4 fade-in">
|
|
<p class="font-semibold text-lg text-stone-800">${quizQuestions[1].q}</p>
|
|
<div class="flex gap-4">
|
|
<button onclick="handleQuiz(2, true)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-blue-500 hover:bg-blue-50 transition font-medium">예</button>
|
|
<button onclick="handleQuiz(2, false)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-stone-500 hover:bg-stone-50 transition font-medium">아니오</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
} else if (step === 2) {
|
|
state.quizScore += answerYes ? 5 : -5;
|
|
// Move to Q3
|
|
document.getElementById('quiz-container').innerHTML = `
|
|
<div class="space-y-4 fade-in">
|
|
<p class="font-semibold text-lg text-stone-800">${quizQuestions[2].q}</p>
|
|
<div class="flex gap-4">
|
|
<button onclick="handleQuiz(3, true)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-blue-500 hover:bg-blue-50 transition font-medium">선호함</button>
|
|
<button onclick="handleQuiz(3, false)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-stone-500 hover:bg-stone-50 transition font-medium">선호하지 않음</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
} else if (step === 3) {
|
|
state.quizScore += answerYes ? -10 : 5;
|
|
showResult();
|
|
}
|
|
}
|
|
|
|
function showResult() {
|
|
document.getElementById('quiz-container').classList.add('hidden');
|
|
const resultDiv = document.getElementById('result-container');
|
|
resultDiv.classList.remove('hidden');
|
|
|
|
const title = document.getElementById('result-title');
|
|
const desc = document.getElementById('result-desc');
|
|
const icon = document.getElementById('result-icon');
|
|
|
|
if (state.quizScore > 0) {
|
|
// Confluence Recommended
|
|
icon.innerHTML = `<span class="bg-blue-600 text-white rounded-2xl px-4 py-2 text-4xl">Confluence</span>`;
|
|
title.innerText = "추천: Atlassian Confluence";
|
|
title.className = "text-3xl font-bold mb-4 text-blue-700";
|
|
desc.innerHTML = `
|
|
귀하의 팀은 <strong>체계적인 구조, JIRA와의 긴밀한 통합, 확장성</strong>이 중요해 보입니다.<br>
|
|
Notion의 자유도는 오히려 혼란을 줄 수 있습니다. Confluence의 안정적인 지식 베이스 환경이 더 적합합니다.
|
|
`;
|
|
} else {
|
|
// Notion Recommended
|
|
icon.innerHTML = `<span class="bg-stone-900 text-white rounded-2xl px-4 py-2 text-4xl">Notion</span>`;
|
|
title.innerText = "추천: Notion";
|
|
title.className = "text-3xl font-bold mb-4 text-stone-900";
|
|
desc.innerHTML = `
|
|
귀하의 팀은 <strong>유연성, 빠른 속도, 올인원 워크스페이스</strong>를 필요로 합니다.<br>
|
|
딱딱한 위키보다는 Notion의 데이터베이스와 문서가 결합된 환경에서 창의적인 협업이 더 잘 일어날 것입니다.
|
|
`;
|
|
}
|
|
}
|
|
|
|
function resetQuiz() {
|
|
state.quizScore = 0;
|
|
document.getElementById('result-container').classList.add('hidden');
|
|
document.getElementById('quiz-container').classList.remove('hidden');
|
|
// Reset to Q1 HTML
|
|
document.getElementById('quiz-container').innerHTML = `
|
|
<div class="space-y-4 fade-in">
|
|
<p class="font-semibold text-lg text-stone-800">${quizQuestions[0].q}</p>
|
|
<div class="flex gap-4">
|
|
<button onclick="handleQuiz(1, true)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-blue-500 hover:bg-blue-50 transition font-medium">예 (Yes)</button>
|
|
<button onclick="handleQuiz(1, false)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-stone-500 hover:bg-stone-50 transition font-medium">아니오 (No)</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Simple Fade In Animation Class
|
|
const style = document.createElement('style');
|
|
style.innerHTML = `
|
|
.fade-in { animation: fadeIn 0.5s ease-in-out; }
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
|
|
</script>
|
|
</body>
|
|
</html> |