6a4e4d864c
- meta_common.php에 favicon 링크 및 로고 컴포넌트 추가 - 모든 index.php 페이지에 favicon 적용 - 일부 페이지 타이틀에서 CodeBridgeExy → CodeBridgeX 수정 - 23개 파일 일괄 업데이트 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
271 lines
17 KiB
PHP
271 lines
17 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Looka vs Brandmark 비교 분석</title>
|
|
<!-- Favicon -->
|
|
<link rel="apple-touch-icon" sizes="180x180" href="../../img/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="../../img/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="../../img/favicon-16x16.png">
|
|
<link rel="shortcut icon" href="../../img/favicon.png">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { font-family: 'Noto Sans KR', sans-serif; }
|
|
.tab-content { display: none; }
|
|
.tab-content.active { display: block; }
|
|
.nav-active { background-color: #2563eb; color: white; shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
|
|
.fade-in { animation: fadeIn 0.5s ease-out forwards; }
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen bg-gradient-to-br from-slate-50 to-indigo-50 p-6">
|
|
<div class="max-w-5xl mx-auto">
|
|
<!-- Header -->
|
|
<div class="bg-white rounded-2xl shadow-lg p-8 mb-6 fade-in">
|
|
<div class="flex items-center gap-4 mb-4">
|
|
<div class="w-16 h-16 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center">
|
|
<i data-lucide="sparkles" class="text-white w-8 h-8"></i>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-gray-800">Looka vs Brandmark</h1>
|
|
<p class="text-gray-500">생성형 AI 기반 로고 디자인 플랫폼 비교 분석</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-gray-600 leading-relaxed">
|
|
디자인 전문 지식 없이도 고품질 로고와 브랜드 키트를 제작할 수 있는 대표적인 AI 디자인 툴입니다.
|
|
Looka의 범용성과 Brandmark의 창의성을 중심으로 비즈니스 목적에 맞는 최적의 선택을 제안합니다.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Summary Metrics -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
|
<div class="bg-white rounded-xl shadow-md p-5 border-l-4 border-indigo-500 fade-in" style="animation-delay: 0.1s">
|
|
<div class="flex items-center gap-2 text-indigo-600 mb-2">
|
|
<i data-lucide="users" size="20"></i>
|
|
<span class="text-sm font-medium">Looka 인기</span>
|
|
</div>
|
|
<p class="text-2xl font-bold text-gray-800">2,000만+</p>
|
|
<p class="text-xs text-gray-500">글로벌 압도적 1위</p>
|
|
</div>
|
|
<div class="bg-white rounded-xl shadow-md p-5 border-l-4 border-green-500 fade-in" style="animation-delay: 0.2s">
|
|
<div class="flex items-center gap-2 text-green-600 mb-2">
|
|
<i data-lucide="dollar-sign" size="20"></i>
|
|
<span class="text-sm font-medium">최저 비용</span>
|
|
</div>
|
|
<p class="text-2xl font-bold text-gray-800">$20~</p>
|
|
<p class="text-xs text-gray-500">전문가 외주 대비 저렴</p>
|
|
</div>
|
|
<div class="bg-white rounded-xl shadow-md p-5 border-l-4 border-amber-500 fade-in" style="animation-delay: 0.3s">
|
|
<div class="flex items-center gap-2 text-amber-600 mb-2">
|
|
<i data-lucide="thumbs-up" size="20"></i>
|
|
<span class="text-sm font-medium">추천 선택</span>
|
|
</div>
|
|
<p class="text-2xl font-bold text-gray-800">Looka</p>
|
|
<p class="text-xs text-gray-500">종합 완성도 9/10</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab Navigation -->
|
|
<div class="flex gap-2 mb-6 overflow-x-auto">
|
|
<button onclick="showTab('popular')" id="tab-popular" class="tab-btn px-5 py-2.5 rounded-lg font-medium transition-all whitespace-nowrap nav-active">인기 & 규모</button>
|
|
<button onclick="showTab('pricing')" id="tab-pricing" class="tab-btn px-5 py-2.5 rounded-lg font-medium transition-all whitespace-nowrap bg-white text-gray-600 hover:bg-gray-100">가격 비교</button>
|
|
<button onclick="showTab('strength')" id="tab-strength" class="tab-btn px-5 py-2.5 rounded-lg font-medium transition-all whitespace-nowrap bg-white text-gray-600 hover:bg-gray-100">강점 & 약점</button>
|
|
<button onclick="showTab('recommend')" id="tab-recommend" class="tab-btn px-5 py-2.5 rounded-lg font-medium transition-all whitespace-nowrap bg-white text-gray-600 hover:bg-gray-100">최종 추천</button>
|
|
</div>
|
|
|
|
<!-- Tab Content -->
|
|
<div class="bg-white rounded-2xl shadow-lg p-6 min-h-[400px]">
|
|
|
|
<!-- Popularity Tab -->
|
|
<div id="popular" class="tab-content active space-y-6">
|
|
<h2 class="text-xl font-bold text-gray-800 flex items-center gap-2">
|
|
<i data-lucide="bar-chart-3" class="text-indigo-600" size="24"></i>
|
|
인기도 및 사용자 규모
|
|
</h2>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="bg-slate-50 border-b">
|
|
<th class="p-4 text-left font-semibold text-slate-700">항목</th>
|
|
<th class="p-4 text-center font-bold text-indigo-600">Looka</th>
|
|
<th class="p-4 text-center font-semibold text-slate-700">Brandmark</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y">
|
|
<tr>
|
|
<td class="p-4 font-medium text-slate-600 text-center">사용자 수</td>
|
|
<td class="p-4 text-center font-semibold text-slate-900">2,000만명 이상</td>
|
|
<td class="p-4 text-center text-slate-500">상대적으로 적음</td>
|
|
</tr>
|
|
<tr class="bg-slate-50/50">
|
|
<td class="p-4 font-medium text-slate-600 text-center">Trustpilot 리뷰</td>
|
|
<td class="p-4 text-center font-semibold text-slate-900">14,352건</td>
|
|
<td class="p-4 text-center text-slate-500">리뷰 거의 없음</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="p-4 font-medium text-slate-600 text-center">서비스 국가</td>
|
|
<td class="p-4 text-center font-semibold text-slate-900">188개국</td>
|
|
<td class="p-4 text-center text-slate-500">-</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="p-4 bg-indigo-50 rounded-xl border border-indigo-100 text-sm text-indigo-800">
|
|
<i data-lucide="info" class="inline-block w-4 h-4 mr-1 mb-0.5"></i>
|
|
<strong>결론:</strong> Looka가 압도적으로 더 인기 있고, 검증된 사용자 기반을 가지고 있습니다.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pricing Tab -->
|
|
<div id="pricing" class="tab-content space-y-6">
|
|
<h2 class="text-xl font-bold text-gray-800 flex items-center gap-2">
|
|
<i data-lucide="tags" class="text-green-600" size="24"></i>
|
|
가격 플랜 비교
|
|
</h2>
|
|
<div class="grid md:grid-cols-2 gap-4">
|
|
<div class="bg-white border rounded-xl p-5 hover:border-indigo-300 transition-colors">
|
|
<h3 class="font-bold text-lg mb-4 text-slate-800">Looka</h3>
|
|
<ul class="space-y-3">
|
|
<li class="flex justify-between text-sm"><span>기본 로고 (저해상도 PNG)</span><span class="font-bold">$20</span></li>
|
|
<li class="flex justify-between text-sm"><span>프리미엄 (고해상도 + 벡터)</span><span class="font-bold">$65</span></li>
|
|
<li class="flex justify-between text-sm text-slate-500 italic"><span>브랜드 키트 (연간 구독)</span><span class="font-bold">$96~129/년</span></li>
|
|
</ul>
|
|
</div>
|
|
<div class="bg-white border rounded-xl p-5 hover:border-indigo-300 transition-colors">
|
|
<h3 class="font-bold text-lg mb-4 text-slate-800">Brandmark</h3>
|
|
<ul class="space-y-3">
|
|
<li class="flex justify-between text-sm"><span>기초 플랜</span><span class="font-bold">$25</span></li>
|
|
<li class="flex justify-between text-sm"><span>디자이너 플랜 (벡터 포함)</span><span class="font-bold">$65</span></li>
|
|
<li class="flex justify-between text-sm"><span>엔터프라이즈 플랜</span><span class="font-bold">$175</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 bg-slate-50 rounded-xl text-sm text-slate-600">
|
|
전문가 평가에 따르면 두 서비스 모두 "심각한 브랜딩을 위해 가장 좋은 가치를 제공"하며, 특히 $65 플랜이 두 서비스 모두에서 가장 권장되는 선택입니다.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Strength Tab -->
|
|
<div id="strength" class="tab-content space-y-6">
|
|
<h2 class="text-xl font-bold text-gray-800 flex items-center gap-2">
|
|
<i data-lucide="award" class="text-amber-600" size="24"></i>
|
|
강점 및 약점 상세
|
|
</h2>
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
<!-- Looka -->
|
|
<div class="space-y-4">
|
|
<div class="bg-indigo-50 p-4 rounded-xl border border-indigo-100">
|
|
<h3 class="font-bold text-indigo-900 mb-2 flex items-center gap-2"><i data-lucide="check-circle" size="18"></i> Looka 강점</h3>
|
|
<ul class="text-sm text-indigo-800 space-y-1">
|
|
<li>• 압도적으로 쉬운 인터페이스 (초보자용)</li>
|
|
<li>• 빠르고 친절한 고객 지원 (주말 응대)</li>
|
|
<li>• 종합 브랜드 패키지 (명함, SNS 에셋 등)</li>
|
|
</ul>
|
|
</div>
|
|
<div class="bg-rose-50 p-4 rounded-xl border border-rose-100">
|
|
<h3 class="font-bold text-rose-900 mb-2 flex items-center gap-2"><i data-lucide="alert-circle" size="18"></i> Looka 약점</h3>
|
|
<ul class="text-sm text-rose-800 space-y-1">
|
|
<li>• 기본 패키지가 다소 빈약 (저해상도)</li>
|
|
<li>• 커스터마이징의 세부 조정 한계</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- Brandmark -->
|
|
<div class="space-y-4">
|
|
<div class="bg-emerald-50 p-4 rounded-xl border border-emerald-100">
|
|
<h3 class="font-bold text-emerald-900 mb-2 flex items-center gap-2"><i data-lucide="check-circle" size="18"></i> Brandmark 강점</h3>
|
|
<ul class="text-sm text-emerald-800 space-y-1">
|
|
<li>• 1회 결제 로직과 무제한 수정</li>
|
|
<li>• 더 독창적인 생성형 AI 엔진</li>
|
|
<li>• 미니멀하고 모던한 미학 특화</li>
|
|
</ul>
|
|
</div>
|
|
<div class="bg-amber-50 p-4 rounded-xl border border-amber-100">
|
|
<h3 class="font-bold text-amber-900 mb-2 flex items-center gap-2"><i data-lucide="alert-circle" size="18"></i> Brandmark 약점</h3>
|
|
<ul class="text-sm text-amber-800 space-y-1">
|
|
<li>• 결과물이 때때로 지나치게 단순함</li>
|
|
<li>• Looka 대비 제한적인 브랜드 킷</li>
|
|
<li>• 시각적 감각이 부족하다는 평가 존재</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recommend Tab -->
|
|
<div id="recommend" class="tab-content space-y-6">
|
|
<h2 class="text-xl font-bold text-gray-800 flex items-center gap-2">
|
|
<i data-lucide="check-square" class="text-blue-600" size="24"></i>
|
|
상황별 최종 추천
|
|
</h2>
|
|
|
|
<div class="grid md:grid-cols-2 gap-4">
|
|
<div class="p-5 bg-gradient-to-br from-indigo-50 to-white border border-indigo-200 rounded-2xl shadow-sm">
|
|
<h3 class="text-lg font-bold text-indigo-900 mb-3">✅ Looka를 추천하는 경우</h3>
|
|
<ul class="text-sm text-indigo-700 space-y-2">
|
|
<li class="flex items-start gap-2"><i data-lucide="arrow-right-circle" class="w-4 h-4 mt-0.5 flex-shrink-0"></i> 기업용 종합 마케팅 자료가 필요한 경우</li>
|
|
<li class="flex items-start gap-2"><i data-lucide="arrow-right-circle" class="w-4 h-4 mt-0.5 flex-shrink-0"></i> 검증된 서비스와 안정적인 지원을 선호하는 경우</li>
|
|
<li class="flex items-start gap-2"><i data-lucide="arrow-right-circle" class="w-4 h-4 mt-0.5 flex-shrink-0"></i> 디자인 경험이 전무하여 최고의 UI를 원하는 경우</li>
|
|
</ul>
|
|
</div>
|
|
<div class="p-5 bg-gradient-to-br from-indigo-50 to-white border border-indigo-200 rounded-2xl shadow-sm">
|
|
<h3 class="text-lg font-bold text-indigo-900 mb-3">✅ Brandmark를 추천하는 경우</h3>
|
|
<ul class="text-sm text-indigo-700 space-y-2">
|
|
<li class="flex items-start gap-2"><i data-lucide="arrow-right-circle" class="w-4 h-4 mt-0.5 flex-shrink-0"></i> 1회성 결제로 평생 수정을 원하는 경우</li>
|
|
<li class="flex items-start gap-2"><i data-lucide="arrow-right-circle" class="w-4 h-4 mt-0.5 flex-shrink-0"></i> 더욱 독창적이고 미니멀한 로고를 찾는 경우</li>
|
|
<li class="flex items-start gap-2"><i data-lucide="arrow-right-circle" class="w-4 h-4 mt-0.5 flex-shrink-0"></i> 예산이 극도로 제한적인 경우 ($25 플랜)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8 bg-slate-900 rounded-2xl p-6 text-white text-center">
|
|
<h3 class="text-xl font-bold mb-3 flex items-center justify-center gap-2">
|
|
<i data-lucide="lightbulb" class="text-amber-400"></i>
|
|
Antigravity의 한 마디
|
|
</h3>
|
|
<p class="text-indigo-100 text-sm leading-relaxed max-w-2xl mx-auto">
|
|
"먼저 **Looka**에서 무료로 로고를 생성해 보세요. 다운로드 전까지는 비용이 들지 않으므로 시안의 품질을 직접 확인할 수 있습니다.
|
|
폰트나 컬러 조합이 마음에 든다면 $20 기본 패키지로 방향성을 잡고, 필요 시 프리미엄으로 업그레이드하는 전략이 가장 효율적입니다."
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="mt-6 text-center text-sm text-gray-500">
|
|
<p>데이터 출처: Fahimai, Trustpilot, 공식 홈페이지 등</p>
|
|
<p>분석 기준일: 2026년 1월</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Lucide 아이콘 렌더링
|
|
lucide.createIcons();
|
|
|
|
// 탭 전환 기능
|
|
function showTab(tabId) {
|
|
// 모든 탭 컨텐츠 숨기기
|
|
document.querySelectorAll('.tab-content').forEach(tab => {
|
|
tab.classList.remove('active');
|
|
});
|
|
// 선택된 탭 컨텐츠 보이기
|
|
document.getElementById(tabId).classList.add('active');
|
|
|
|
// 탭 버튼 스타일 업데이트
|
|
document.querySelectorAll('.tab-btn').forEach(btn => {
|
|
btn.classList.remove('nav-active');
|
|
btn.classList.add('bg-white', 'text-gray-600', 'hover:bg-gray-100');
|
|
});
|
|
const activeBtn = document.getElementById('tab-' + tabId);
|
|
activeBtn.classList.add('nav-active');
|
|
activeBtn.classList.remove('bg-white', 'text-gray-600', 'hover:bg-gray-100');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |