SamProject/sam-sales
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
6a4e4d864c7fadd47369705e52a69bf5b0c81481
sam-sales/company/loudsourcing/index.php
김보곤 6a4e4d864c fix:전체 sales 페이지 favicon 및 BI 통일 
- meta_common.php에 favicon 링크 및 로고 컴포넌트 추가
- 모든 index.php 페이지에 favicon 적용
- 일부 페이지 타이틀에서 CodeBridgeExy → CodeBridgeX 수정
- 23개 파일 일괄 업데이트

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-31 18:47:01 +09:00

432 lines
26 KiB
PHP
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>라우드소싱 (LOUDSOURCING) 기업분석</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; box-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-blue-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-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
<span class="text-white font-bold text-2xl">L</span>
</div>
<div>
<h1 class="text-3xl font-bold text-gray-800">라우드소싱 (LOUDSOURCING)</h1>
<p class="text-gray-500">운영사: 주식회사 스터닝 (STUNNING INC.)</p>
</div>
</div>
<p class="text-gray-600 leading-relaxed">
국내 최대 디자인 크라우드소싱 플랫폼으로, 디자이너와 기업을 연결하는 콘테스트 기반 비즈니스 모델을 운영합니다.
2020년 포트폴리오 플랫폼 '노트폴리오'와 합병하여 통합 크리에이티브 플랫폼으로 성장했습니다.
</p>
</div>
<!-- Key Metrics -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
<div class="bg-white rounded-xl shadow-md p-5 fade-in" style="animation-delay: 0.1s">
<div class="flex items-center gap-2 text-blue-600 mb-2">
<i data-lucide="users" size="20"></i>
<span class="text-sm font-medium">등록 디자이너</span>
</div>
<p class="text-2xl font-bold text-gray-800">28만명</p>
<p class="text-xs text-gray-500">국내 디자이너 80%</p>
</div>
<div class="bg-white rounded-xl shadow-md p-5 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">2023 매출</span>
</div>
<p class="text-2xl font-bold text-gray-800">64.3억</p>
<p class="text-xs text-gray-500">연 50~60% 성장</p>
</div>
<div class="bg-white rounded-xl shadow-md p-5 fade-in" style="animation-delay: 0.3s">
<div class="flex items-center gap-2 text-purple-600 mb-2">
<i data-lucide="briefcase" size="20"></i>
<span class="text-sm font-medium">임직원 수</span>
</div>
<p class="text-2xl font-bold text-gray-800">43명</p>
<p class="text-xs text-gray-500">2025년 7월 기준</p>
</div>
<div class="bg-white rounded-xl shadow-md p-5 fade-in" style="animation-delay: 0.4s">
<div class="flex items-center gap-2 text-orange-600 mb-2">
<i data-lucide="award" size="20"></i>
<span class="text-sm font-medium">누적 상금</span>
</div>
<p class="text-2xl font-bold text-gray-800">200억+</p>
<p class="text-xs text-gray-500">콘테스트 2만건+</p>
</div>
</div>
<!-- Tab Navigation -->
<div class="flex gap-2 mb-6 overflow-x-auto">
<button onclick="showTab('overview')" id="tab-overview" class="tab-btn px-5 py-2.5 rounded-lg font-medium transition-all whitespace-nowrap nav-active">기업개요</button>
<button onclick="showTab('financial')" id="tab-financial" 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('history')" id="tab-history" 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('competition')" id="tab-competition" 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]">
<!-- Overview Tab -->
<div id="overview" class="tab-content active space-y-6">
<h2 class="text-xl font-bold text-gray-800 flex items-center gap-2">
<i data-lucide="building-2" class="text-blue-600" size="24"></i>
기업 개요
</h2>
<div class="grid md:grid-cols-2 gap-6">
<div class="space-y-4">
<h3 class="font-semibold text-gray-700 border-b pb-2">기본 정보</h3>
<div class="space-y-2 text-sm">
<div class="flex justify-between"><span class="text-gray-500">대표</span><span class="font-medium">김승환</span></div>
<div class="flex justify-between"><span class="text-gray-500">설립일</span><span class="font-medium">2011년 6월</span></div>
<div class="flex justify-between"><span class="text-gray-500">업력</span><span class="font-medium">14.2년</span></div>
<div class="flex justify-between"><span class="text-gray-500">사업자번호</span><span class="font-medium">120-87-69298</span></div>
<div class="flex justify-between"><span class="text-gray-500">자본금</span><span class="font-medium">1억 468만원</span></div>
<div class="flex justify-between"><span class="text-gray-500">기업형태</span><span class="font-medium">비상장 / 중소기업</span></div>
</div>
</div>
<div class="space-y-4">
<h3 class="font-semibold text-gray-700 border-b pb-2">소재지</h3>
<p class="text-sm text-gray-600">
서울특별시 강남구 선릉로 636,<br />
키스톤빌딩 3층 302호 (삼성동)
</p>
<h3 class="font-semibold text-gray-700 border-b pb-2 mt-4">운영 서비스</h3>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm">라우드소싱</span>
<span class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm">노트폴리오</span>
<span class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm">스터닝 에이전시</span>
</div>
</div>
</div>
<div class="mt-6">
<h3 class="font-semibold text-gray-700 border-b pb-2 mb-4">비즈니스 모델</h3>
<div class="grid md:grid-cols-2 gap-4">
<div class="bg-gradient-to-r from-blue-50 to-blue-100 rounded-xl p-4">
<h4 class="font-semibold text-blue-800 mb-2">🏆 콘테스트</h4>
<p class="text-sm text-gray-600">의뢰자가 상금을 걸고 공모전 개최, 다수의 디자이너가 참여하여 경쟁</p>
</div>
<div class="bg-gradient-to-r from-purple-50 to-purple-100 rounded-xl p-4">
<h4 class="font-semibold text-purple-800 mb-2">🛒 라우드마켓</h4>
<p class="text-sm text-gray-600">1:1 직접 의뢰 방식, 원하는 디자이너를 선택해 프로젝트 진행</p>
</div>
<div class="bg-gradient-to-r from-green-50 to-green-100 rounded-xl p-4">
<h4 class="font-semibold text-green-800 mb-2">🤝 디자이너 매칭</h4>
<p class="text-sm text-gray-600">23만명 디자이너로부터 무료 비교견적 수령 가능</p>
</div>
<div class="bg-gradient-to-r from-orange-50 to-orange-100 rounded-xl p-4">
<h4 class="font-semibold text-orange-800 mb-2">🎯 에이전시</h4>
<p class="text-sm text-gray-600">전담 매니저가 프로젝트 매니징, 컨시어지 서비스 제공</p>
</div>
</div>
</div>
<div class="mt-6">
<h3 class="font-semibold text-gray-700 border-b pb-2 mb-4">주요 고객사</h3>
<div class="flex flex-wrap gap-2">
<?php
$clients = ['티몬', '농협', '포스코', '삼성 테크윈', '제주도 개발공사', '바카디코리아', '잡코리아', '도미노피자', 'BC카드', 'LG그램'];
foreach($clients as $client) {
echo '<span class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm">'.$client.'</span>';
}
?>
</div>
</div>
</div>
<!-- Financial Tab -->
<div id="financial" class="tab-content space-y-6">
<h2 class="text-xl font-bold text-gray-800 flex items-center gap-2">
<i data-lucide="trending-up" class="text-green-600" size="24"></i>
재무 및 성장 현황
</h2>
<div class="bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl p-6">
<h3 class="font-semibold text-gray-700 mb-4">매출 추이</h3>
<div class="flex items-end justify-around h-40 mb-4">
<div class="flex flex-col items-center">
<div class="bg-green-400 w-16 rounded-t-lg" style="height: 51%"></div>
<span class="text-xs mt-2 text-gray-600">2020년</span>
<span class="text-sm font-bold">33억+</span>
</div>
<div class="flex flex-col items-center">
<div class="bg-green-500 w-16 rounded-t-lg" style="height: 100%"></div>
<span class="text-xs mt-2 text-gray-600">2023년</span>
<span class="text-sm font-bold">64.3억</span>
</div>
</div>
<p class="text-sm text-gray-600 text-center">연평균 50~60% 성장률 유지</p>
</div>
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-6">
<h3 class="font-semibold text-gray-700 mb-4">직원 수 변화</h3>
<div class="flex items-end justify-around h-32 mb-4">
<div class="flex flex-col items-center">
<div class="bg-blue-400 w-16 rounded-t-lg" style="height: 28%"></div>
<span class="text-xs mt-2 text-gray-600">2020년</span>
<span class="text-sm font-bold">12명</span>
</div>
<div class="flex flex-col items-center">
<div class="bg-blue-500 w-16 rounded-t-lg" style="height: 100%"></div>
<span class="text-xs mt-2 text-gray-600">2025년</span>
<span class="text-sm font-bold">43명</span>
</div>
</div>
<p class="text-sm text-gray-600 text-center">5년간 약 3.5배 인력 확대</p>
</div>
<div>
<h3 class="font-semibold text-gray-700 border-b pb-2 mb-4">투자 유치 현황</h3>
<div class="space-y-3">
<div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
<div>
<span class="font-medium">Series A</span>
<span class="text-gray-500 text-sm ml-2">2020년 3월</span>
</div>
<span class="font-bold text-green-600">20억원</span>
</div>
<div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
<div>
<span class="font-medium">Series A Bridge</span>
<span class="text-gray-500 text-sm ml-2">2021년 9월</span>
</div>
<span class="font-bold text-green-600">60억원</span>
</div>
<div class="flex items-center justify-between p-4 bg-blue-50 rounded-lg border-2 border-blue-200">
<span class="font-semibold">누적 투자금</span>
<span class="font-bold text-blue-600 text-lg">60~80억원</span>
</div>
</div>
<div class="mt-4 p-4 bg-gray-100 rounded-lg text-sm text-gray-600">
<strong>투자사:</strong> DSC 인베스트먼트, 미래에셋벤처투자, 나이스투자파트너스, KDB캐피탈, 신한캐피탈
</div>
</div>
<div>
<h3 class="font-semibold text-gray-700 border-b pb-2 mb-4">핵심 성장 지표</h3>
<div class="grid md:grid-cols-3 gap-4">
<div class="text-center p-4 bg-purple-50 rounded-xl">
<p class="text-3xl font-bold text-purple-600">3.7배</p>
<p class="text-sm text-gray-600">MAU 증가 (2년간)</p>
</div>
<div class="text-center p-4 bg-blue-50 rounded-xl">
<p class="text-3xl font-bold text-blue-600">2.5배</p>
<p class="text-sm text-gray-600">디자이너 수 증가</p>
</div>
<div class="text-center p-4 bg-green-50 rounded-xl">
<p class="text-3xl font-bold text-green-600">2.7배</p>
<p class="text-sm text-gray-600">등록 작품 수 증가</p>
</div>
</div>
</div>
</div>
<!-- History Tab -->
<div id="history" class="tab-content space-y-6">
<h2 class="text-xl font-bold text-gray-800 flex items-center gap-2">
<i data-lucide="calendar" class="text-purple-600" size="24"></i>
성장 연혁
</h2>
<div class="relative">
<div class="absolute left-4 top-0 bottom-0 w-0.5 bg-gradient-to-b from-blue-500 to-purple-500"></div>
<?php
$history = [
['year' => '2011', 'title' => '창업', 'desc' => '(주)라우더스 창업, 라우드소싱 론칭', 'color' => 'blue'],
['year' => '2012', 'title' => '노트폴리오 설립', 'desc' => '디자이너 포트폴리오 커뮤니티 시작', 'color' => 'purple'],
['year' => '2017', 'title' => '벤처기업 인증', 'desc' => '기술혁신형 벤처기업 인증 획득', 'color' => 'green'],
['year' => '2020.03', 'title' => 'Series A 투자', 'desc' => '20억원 투자 유치', 'color' => 'blue'],
['year' => '2020.09', 'title' => '합병 & 스터닝 설립', 'desc' => '라우드소싱 + 노트폴리오 합병', 'color' => 'purple'],
['year' => '2021', 'title' => 'Main-Biz 인증', 'desc' => '경영혁신형 중소기업 인증', 'color' => 'green'],
['year' => '2021.09', 'title' => 'Bridge 투자', 'desc' => '60억원 추가 투자 유치', 'color' => 'blue'],
['year' => '2022', 'title' => '라우드마켓 출시', 'desc' => '1:1 의뢰 서비스 런칭', 'color' => 'purple'],
['year' => '2022.하반기', 'title' => '에이전시 출시', 'desc' => '컨시어지 서비스 시작', 'color' => 'orange'],
['year' => '2023', 'title' => '매칭 서비스', 'desc' => '디자이너 매칭 서비스 런칭', 'color' => 'green'],
];
foreach($history as $idx => $item) {
$color = $item['color'];
echo '
<div class="relative pl-10 pb-6">
<div class="absolute left-2 w-5 h-5 rounded-full bg-'.$color.'-500 border-4 border-white shadow"></div>
<div class="bg-gray-50 rounded-lg p-4">
<div class="flex items-center gap-3 mb-1">
<span class="px-2 py-0.5 bg-'.$color.'-100 text-'.$color.'-700 rounded text-xs font-medium">
'.$item['year'].'
</span>
<span class="font-semibold text-gray-800">'.$item['title'].'</span>
</div>
<p class="text-sm text-gray-600">'.$item['desc'].'</p>
</div>
</div>';
}
?>
</div>
</div>
<!-- Competition Tab -->
<div id="competition" class="tab-content space-y-6">
<h2 class="text-xl font-bold text-gray-800 flex items-center gap-2">
<i data-lucide="target" class="text-orange-600" size="24"></i>
경쟁 분석
</h2>
<div class="overflow-x-auto">
<table class="w-full text-sm">
<thead>
<tr class="bg-gray-100">
<th class="p-3 text-left font-semibold">구분</th>
<th class="p-3 text-center font-semibold text-blue-600">라우드소싱</th>
<th class="p-3 text-center font-semibold">크몽</th>
<th class="p-3 text-center font-semibold">숨고</th>
</tr>
</thead>
<tbody>
<tr class="border-b">
<td class="p-3 font-medium">특화 분야</td>
<td class="p-3 text-center text-blue-600">디자인 전문</td>
<td class="p-3 text-center">종합 프리랜서</td>
<td class="p-3 text-center">생활 서비스</td>
</tr>
<tr class="border-b bg-gray-50">
<td class="p-3 font-medium">핵심 방식</td>
<td class="p-3 text-center text-blue-600">콘테스트/공모전</td>
<td class="p-3 text-center">판매자 상품 등록</td>
<td class="p-3 text-center">요청서 기반 견적</td>
</tr>
<tr class="border-b">
<td class="p-3 font-medium">가격 결정</td>
<td class="p-3 text-center text-blue-600">의뢰자가 상금 설정</td>
<td class="p-3 text-center">판매자가 단가 설정</td>
<td class="p-3 text-center">고수가 견적 제시</td>
</tr>
<tr class="border-b bg-gray-50">
<td class="p-3 font-medium">수수료</td>
<td class="p-3 text-center text-blue-600">19.7%</td>
<td class="p-3 text-center">~20%</td>
<td class="p-3 text-center">포인트 차감</td>
</tr>
<tr>
<td class="p-3 font-medium">차별점</td>
<td class="p-3 text-center text-blue-600">다수 시안 비교</td>
<td class="p-3 text-center">빠른 매칭</td>
<td class="p-3 text-center">지역 기반</td>
</tr>
</tbody>
</table>
</div>
<div>
<h3 class="font-semibold text-gray-700 border-b pb-2 mb-4">SWOT 분석</h3>
<div class="grid md:grid-cols-2 gap-4">
<div class="bg-green-50 rounded-xl p-4">
<h4 class="font-semibold text-green-700 mb-3">💪 강점 (Strengths)</h4>
<ul class="text-sm text-gray-600 space-y-1">
<li>• 국내 디자이너 80% 점유율</li>
<li>• 14년 운영 노하우</li>
<li>• 다양한 시안 비교 가능</li>
<li>• 노트폴리오와 시너지</li>
</ul>
</div>
<div class="bg-red-50 rounded-xl p-4">
<h4 class="font-semibold text-red-700 mb-3">⚠️ 약점 (Weaknesses)</h4>
<ul class="text-sm text-gray-600 space-y-1">
<li>• 낙선 디자이너 보상 없음</li>
<li>• 수수료 부담 (19.7%)</li>
<li>• 콘테스트 방식 한계</li>
</ul>
</div>
<div class="bg-blue-50 rounded-xl p-4">
<h4 class="font-semibold text-blue-700 mb-3">🚀 기회 (Opportunities)</h4>
<ul class="text-sm text-gray-600 space-y-1">
<li>• 18조 국내 디자인 시장</li>
<li>• 프리랜서 경제 성장</li>
<li>• 아이디어 콘테스트 확장</li>
<li>• 기업 디자인 아웃소싱 증가</li>
</ul>
</div>
<div class="bg-orange-50 rounded-xl p-4">
<h4 class="font-semibold text-orange-700 mb-3">⚡ 위협 (Threats)</h4>
<ul class="text-sm text-gray-600 space-y-1">
<li>• AI 디자인 툴 부상</li>
<li>• Canva, 미리캔버스 등 경쟁</li>
<li>• 크몽, 숨고 등 플랫폼 경쟁</li>
</ul>
</div>
</div>
</div>
<div class="bg-gradient-to-r from-indigo-50 to-purple-50 rounded-xl p-6">
<h3 class="font-semibold text-gray-700 mb-3">시장 규모</h3>
<div class="grid md:grid-cols-2 gap-6">
<div class="text-center">
<p class="text-4xl font-bold text-indigo-600">18조원</p>
<p class="text-sm text-gray-600">국내 디자인 시장</p>
</div>
<div class="text-center">
<p class="text-4xl font-bold text-purple-600">1조원</p>
<p class="text-sm text-gray-600">국내 프리랜서 시장</p>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="mt-6 text-center text-sm text-gray-500">
<p>데이터 출처: THE VC, 혁신의숲, 원티드, 인크루트, 잡플래닛, 나무위키 등</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>
Reference in New Issue View Git Blame Copy Permalink