SamProject/sam-manage
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: [china-tech] 중국의 기술도약 > 5대 신흥빅테크 페이지 추가

Browse Source 
- BigTechController 생성 (HX-Redirect 패턴 적용)
- 5개 탭 UI 구현 (첫 번째 탭: 천텐스, 캄브리콘 AI 반도체 분석)
- Chart.js 차트 3개 (주가, 매출 비중, 성능 레이더)
This commit is contained in:
김보곤
2026-03-04 09:30:47 +09:00
parent 9f45a82940
commit ed2ac18518
3 changed files with 418 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
app/Http/Controllers/ChinaTech/BigTechController.php Normal file
View File

@@ -0,0 +1,26 @@
<?php
namespace App\Http\Controllers\ChinaTech;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
use Illuminate\View\View;
/**
* 중국의 기술도약 > 5대 신흥빅테크 컨트롤러
*/
class BigTechController extends Controller
{
/**
* 5대 신흥빅테크 메인 페이지 (탭 UI)
*/
public function index(Request $request): View|Response
{
if ($request->header('HX-Request')) {
return response('', 200)->header('HX-Redirect', route('china-tech.big-tech.index'));
}
return view('china-tech.big-tech.index');
}
}

382
resources/views/china-tech/big-tech/index.blade.php Normal file
View File

@@ -0,0 +1,382 @@
@extends('layouts.app')
@section('title', '5대 신흥빅테크')
@push('styles')
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<style>
.bigtech-body { font-family: 'Noto Sans KR', sans-serif; background-color: #f0fdf4; color: #0f172a; }
.chart-container { position: relative; width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; height: 320px; max-height: 400px; }
@media (min-width: 768px) { .chart-container { height: 380px; } }
.gradient-text { background: linear-gradient(to right, #16a34a, #2563eb); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.card-shadow { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
/* 탭 버튼 스타일 */
.bigtech-tab { padding: 0.625rem 1.25rem; border-radius: 0.5rem; font-weight: 600; font-size: 0.875rem; transition: all 0.2s; border: 1px solid #e2e8f0; background: white; color: #64748b; cursor: pointer; }
.bigtech-tab:hover { background: #f1f5f9; color: #334155; }
.bigtech-tab.active { background: #16a34a; color: white; border-color: #16a34a; box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3); }
.bigtech-tab.placeholder { opacity: 0.6; cursor: default; }
</style>
@endpush
@section('content')
<div class="bigtech-body min-h-screen">
{{-- 탭 네비게이션 --}}
<div class="bg-white border-b shadow-sm sticky top-0 z-40">
<div class="max-w-7xl mx-auto px-4 py-3">
<h2 class="text-lg font-bold text-slate-800 mb-3">5대 신흥빅테크</h2>
<div class="flex flex-wrap gap-2">
<button class="bigtech-tab active" onclick="switchTab(0)">천텐스, 캄브리콘 AI 반도체 분석</button>
<button class="bigtech-tab placeholder" disabled>준비 중 (2)</button>
<button class="bigtech-tab placeholder" disabled>준비 중 (3)</button>
<button class="bigtech-tab placeholder" disabled>준비 중 (4)</button>
<button class="bigtech-tab placeholder" disabled>준비 중 (5)</button>
</div>
</div>
</div>
{{-- 탭 콘텐츠 영역 --}}
<div id="tab-content-0" class="tab-content">
{{-- 캄브리콘 분석 콘텐츠 --}}
<header class="bg-white border-b-4 border-green-600 shadow-sm">
<div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
<h1 class="text-2xl font-black text-slate-800 tracking-tight">CAMBRICON <span class="text-green-600">INSIGHT</span></h1>
<nav class="hidden md:flex space-x-6 font-semibold text-sm text-slate-600">
<a href="#founder" class="hover:text-green-600 transition">천텐스 & 철학</a>
<a href="#market" class="hover:text-green-600 transition">주가 & 시장</a>
<a href="#huawei" class="hover:text-green-600 transition">화웨이 파트너십</a>
<a href="#siyuan" class="hover:text-green-600 transition">Siyuan vs NVIDIA</a>
</nav>
</div>
</header>
<main class="max-w-7xl mx-auto px-4 py-10">
<section class="text-center mb-16">
<h2 class="text-4xl md:text-5xl font-black mb-4"><span class="gradient-text">캄브리콘 (Cambricon)</span>: 중국 AI 굴기의 핵심</h2>
<p class="text-lg md:text-xl text-slate-600 max-w-3xl mx-auto font-medium">
천텐스(Chen Tianshi)가 이끄는 캄브리콘은 중국의 대표적인 AI 반도체 기업입니다. 미국의 대중 반도체 수출 통제 속에서 엔비디아(NVIDIA)의 대체재로 급부상하며 폭발적인 성장을 기록하고 있습니다.
</p>
</section>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
<section id="founder" class="bg-white rounded-2xl p-8 card-shadow border-t-4 border-blue-500">
<div class="flex items-center mb-6">
<span class="text-4xl mr-4">🧠</span>
<h3 class="text-2xl font-bold text-slate-800">설립자 천텐스 학술 배경</h3>
</div>
<p class="text-slate-600 mb-6 leading-relaxed">
천텐스(Chen Tianshi)는 1985년생으로, 중국 영재의 산실인 중국과학기술대학(USTC) 소년반 출신입니다. 중국과학원 계산기술연구소(ICT)에서 박사 학위를 취득했으며, 세계 최초의 딥러닝 프로세서 아키텍처 중 하나인 <strong>'Diannao(전뇌)'</strong> 시리즈 연구를 주도했습니다.
</p>
<div class="space-y-4">
<div class="bg-blue-50 p-4 rounded-lg flex items-start border-l-4 border-blue-400">
<span class="text-xl mr-3">🎓</span>
<div>
<h4 class="font-bold text-slate-800">중국과학원(CAS) 연구원</h4>
<p class="text-sm text-slate-600">컴퓨터 아키텍처 및 인공지능 하드웨어 가속기 분야의 세계적 권위자.</p>
</div>
</div>
<div class="bg-indigo-50 p-4 rounded-lg flex items-start border-l-4 border-indigo-400">
<span class="text-xl mr-3">🏆</span>
<div>
<h4 class="font-bold text-slate-800">ASPLOS 및 ISCA 최우수 논문상</h4>
<p class="text-sm text-slate-600">국제 최상위 컴퓨터 구조 학회에서 AI 가속기 설계의 기초를 닦은 논문 발표.</p>
</div>
</div>
</div>
</section>
<section class="bg-white rounded-2xl p-8 card-shadow border-t-4 border-orange-500">
<div class="flex items-center mb-6">
<span class="text-4xl mr-4">⚙️</span>
<h3 class="text-2xl font-bold text-slate-800">NPU 설계 철학</h3>
</div>
<p class="text-slate-600 mb-6 leading-relaxed">
캄브리콘의 핵심은 범용성과 효율성을 모두 잡는 <strong>DSA (Domain-Specific Architecture)</strong>입니다. 기존 CPU/GPU와 달리, 신경망 연산에 특화된 독자적인 명령어 셋(ISA)을 사용하여 전력 소모를 최소화합니다.
</p>
<div class="flex flex-col space-y-2">
<div class="bg-orange-100 text-orange-800 font-bold p-3 rounded text-center">범용 AI 칩 지향 (General-purpose AI)</div>
<div class="text-center text-xl text-slate-400">&darr;</div>
<div class="grid grid-cols-2 gap-2">
<div class="bg-slate-100 p-3 rounded text-center border border-slate-200">
<span class="block font-bold text-slate-700">고효율 연산 유닛</span>
<span class="text-xs text-slate-500">텐서 처리 최적화</span>
</div>
<div class="bg-slate-100 p-3 rounded text-center border border-slate-200">
<span class="block font-bold text-slate-700">MLUarch 아키텍처</span>
<span class="text-xs text-slate-500">독자적 신경망 명령어 셋</span>
</div>
</div>
<div class="text-center text-xl text-slate-400">&darr;</div>
<div class="bg-orange-500 text-white font-bold p-3 rounded text-center shadow-md">엣지부터 클라우드까지 아우르는 생태계 (Cambricon Neuware)</div>
</div>
</section>
</div>
<section id="market" class="bg-white rounded-2xl p-8 card-shadow mb-12 border-t-4 border-green-500">
<div class="text-center mb-8">
<h3 class="text-3xl font-bold text-slate-800 mb-3">최근 주가 급등 원인 분석</h3>
<p class="text-slate-600 max-w-2xl mx-auto">미국의 대중국 반도체 수출 제재가 심화됨에 따라, 중국 내 AI 인프라 구축 수요가 캄브리콘으로 집중되고 있습니다.</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center">
<div class="space-y-6 lg:col-span-1">
<div class="p-4 bg-green-50 rounded-lg border border-green-100">
<div class="flex items-center mb-2">
<span class="text-2xl mr-2">📈</span>
<h4 class="font-bold text-slate-800">국산화 대체 (수혜)</h4>
</div>
<p class="text-sm text-slate-600">NVIDIA A100/H100의 중국 수출 통제로 인해 'Siyuan' 시리즈에 대한 통신사/국유기업의 대규모 발주 증가.</p>
</div>
<div class="p-4 bg-green-50 rounded-lg border border-green-100">
<div class="flex items-center mb-2">
<span class="text-2xl mr-2">🤖</span>
<h4 class="font-bold text-slate-800">생성형 AI 컴퓨팅 수요</h4>
</div>
<p class="text-sm text-slate-600">중국 빅테크 기업들의 자체 LLM(대규모 언어 모델) 개발 경쟁으로 인한 클라우드 AI 가속기 수요 폭발.</p>
</div>
<div class="p-4 bg-green-50 rounded-lg border border-green-100">
<div class="flex items-center mb-2">
<span class="text-2xl mr-2">💰</span>
<h4 class="font-bold text-slate-800">정부 지원금 및 국책 사업</h4>
</div>
<p class="text-sm text-slate-600">국가 주도의 '동수서산(東數西算)' 데이터센터 인프라 프로젝트 핵심 공급사로 선정.</p>
</div>
</div>
<div class="lg:col-span-2">
<div class="chart-container">
<canvas id="stockChart"></canvas>
</div>
<p class="text-center text-xs text-slate-400 mt-2">* 데이터: 캄브리콘(688256.SS) 최근 주가 추이 (예시 데이터)</p>
</div>
</div>
</section>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
<section id="huawei" class="bg-white rounded-2xl p-8 card-shadow border-t-4 border-red-500">
<div class="flex items-center mb-6">
<span class="text-4xl mr-4">🤝</span>
<h3 class="text-2xl font-bold text-slate-800">화웨이와의 협력과 홀로서기</h3>
</div>
<p class="text-slate-600 mb-6 leading-relaxed">
초기 캄브리콘의 성장은 화웨이(Huawei)와의 협력이 결정적이었습니다. 2017년 화웨이의 모바일 AP '기린(Kirin) 970'에 캄브리콘의 NPU IP가 세계 최초로 탑재되었습니다.
</p>
<div class="chart-container" style="height: 250px; max-height: 250px;">
<canvas id="revenueChart"></canvas>
</div>
<p class="text-sm text-slate-600 mt-6 bg-slate-50 p-3 rounded border border-slate-100">
<strong>피벗 성공:</strong> 화웨이가 자체 AI 아키텍처(Da Vinci)를 개발하며 IP 라이선스 매출이 급감했으나, 캄브리콘은 신속하게 클라우드 및 엣지 서버용 칩셋 제조사로 비즈니스 모델을 전환하여 자립에 성공했습니다.
</p>
</section>
<section id="siyuan" class="bg-white rounded-2xl p-8 card-shadow border-t-4 border-cyan-500">
<div class="flex items-center mb-6">
<span class="text-4xl mr-4">⚡</span>
<h3 class="text-2xl font-bold text-slate-800">엔비디아 대항마: Siyuan 시리즈</h3>
</div>
<p class="text-slate-600 mb-6 leading-relaxed">
Siyuan(스위안) 590 등 최신 라인업은 엔비디아의 A100 및 중국 수출용 다운그레이드 모델인 H20을 정조준하고 있습니다. 특히 FP32 및 메모리 대역폭에서 경쟁력을 확보하려 노력 중입니다.
</p>
<div class="chart-container" style="height: 280px; max-height: 300px;">
<canvas id="performanceChart"></canvas>
</div>
<p class="text-sm text-slate-600 mt-4 bg-slate-50 p-3 rounded border border-slate-100">
<strong>성능 평가:</strong> 최상위 칩인 H100에는 미치지 못하지만, 생태계 적응력과 중국 내 안정적 수급이라는 무기를 통해 H20 및 A100의 훌륭한 대체재로 평가받고 있습니다.
</p>
</section>
</div>
<section class="bg-slate-800 text-white rounded-2xl p-8 text-center card-shadow">
<h3 class="text-2xl font-bold mb-4">결론: 캄브리콘의 미래 전망</h3>
<p class="text-slate-300 max-w-3xl mx-auto mb-6">
천텐스의 학술적 깊이에서 출발한 캄브리콘은 이제 중국 국가 반도체 안보의 핵심 축이 되었습니다. 하드웨어 성능의 한계와 글로벌 파운드리 제재를 극복하고, 독자적인 'Neuware' 소프트웨어 생태계를 얼마나 견고하게 구축하느냐가 향후 글로벌 AI 반도체 전쟁에서의 생존을 결정지을 것입니다.
</p>
<div class="flex justify-center space-x-4">
<span class="px-4 py-2 bg-slate-700 rounded-full text-sm font-semibold">#AI반도체</span>
<span class="px-4 py-2 bg-slate-700 rounded-full text-sm font-semibold">#NPU</span>
<span class="px-4 py-2 bg-slate-700 rounded-full text-sm font-semibold">#기술자립</span>
</div>
</section>
</main>
<footer class="bg-slate-900 text-slate-400 py-6 text-center text-sm rounded-b-lg">
<p>&copy; 2024 Cambricon Analysis Report. Data presented is synthesized for infographic purposes.</p>
</footer>
</div>
</div>
@endsection
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
function switchTab(index) {
// 현재는 탭 0만 활성화
document.querySelectorAll('.bigtech-tab').forEach((btn, i) => {
btn.classList.toggle('active', i === index);
});
}
// Chart.js 초기화
document.addEventListener('DOMContentLoaded', function() {
const wrapLabel = (label, max = 16) => {
const words = label.split(' ');
const lines = [];
let currentLine = '';
words.forEach(word => {
if ((currentLine + word).length > max) {
if (currentLine) lines.push(currentLine.trim());
currentLine = word + ' ';
} else {
currentLine += word + ' ';
}
});
if (currentLine) lines.push(currentLine.trim());
return lines;
};
const commonTooltip = {
callbacks: {
title: function(tooltipItems) {
const item = tooltipItems[0];
let label = item.chart.data.labels[item.dataIndex];
if (Array.isArray(label)) {
return label.join(' ');
} else {
return label;
}
}
}
};
const commonOptions = {
responsive: true,
maintainAspectRatio: false,
plugins: {
tooltip: commonTooltip,
legend: {
labels: { font: { family: "'Noto Sans KR', sans-serif" } }
}
}
};
// 주가 차트
const stockLabelsRaw = ['2023 Q1 (생성AI 붐)', '2023 Q2', '2023 Q3 (수출규제 강화)', '2023 Q4', '2024 Q1 (대규모 수주)', '2024 Q2', '2024 Q3 (Siyuan 590)'];
const stockLabels = stockLabelsRaw.map(lbl => wrapLabel(lbl));
const ctxStock = document.getElementById('stockChart').getContext('2d');
new Chart(ctxStock, {
type: 'line',
data: {
labels: stockLabels,
datasets: [{
label: '상대적 주가 지수 추이 (추정)',
data: [60, 150, 140, 135, 180, 240, 290],
borderColor: '#16a34a',
backgroundColor: 'rgba(22, 163, 74, 0.1)',
borderWidth: 3,
pointBackgroundColor: '#2563eb',
pointRadius: 5,
fill: true,
tension: 0.3
}]
},
options: {
...commonOptions,
scales: {
y: { beginAtZero: true, grid: { color: '#e2e8f0' } },
x: { grid: { display: false }, ticks: { font: { size: 11 } } }
}
}
});
// 매출 비중 차트
const revLabelsRaw = ['모바일 IP (화웨이 등)', '클라우드/서버 가속기', '엣지 컴퓨팅', '기타 서비스'];
const revLabels = revLabelsRaw.map(lbl => wrapLabel(lbl));
const ctxRev = document.getElementById('revenueChart').getContext('2d');
new Chart(ctxRev, {
type: 'bar',
data: {
labels: revLabels,
datasets: [
{
label: '2018년 매출 비중 (%)',
data: [95, 2, 0, 3],
backgroundColor: '#ef4444',
borderRadius: 4
},
{
label: '2023년 매출 비중 (%)',
data: [5, 65, 20, 10],
backgroundColor: '#3b82f6',
borderRadius: 4
}
]
},
options: {
...commonOptions,
indexAxis: 'y',
scales: {
x: { stacked: false, beginAtZero: true, max: 100 },
y: { stacked: false, ticks: { font: { size: 11 } } }
}
}
});
// 성능 비교 레이더 차트
const perfLabelsRaw = ['AI 연산 (INT8 TOPS)', 'AI 연산 (FP32 TFLOPS)', '메모리 대역폭 (GB/s)', '에너지 효율성'];
const perfLabels = perfLabelsRaw.map(lbl => wrapLabel(lbl));
const ctxPerf = document.getElementById('performanceChart').getContext('2d');
new Chart(ctxPerf, {
type: 'radar',
data: {
labels: perfLabels,
datasets: [
{
label: 'Siyuan 590 (Cambricon)',
data: [75, 70, 80, 85],
borderColor: '#06b6d4',
backgroundColor: 'rgba(6, 182, 212, 0.2)',
pointBackgroundColor: '#06b6d4',
borderWidth: 2
},
{
label: 'NVIDIA H20 (수출통제용)',
data: [70, 65, 85, 75],
borderColor: '#f97316',
backgroundColor: 'rgba(249, 115, 22, 0.2)',
pointBackgroundColor: '#f97316',
borderWidth: 2
},
{
label: 'NVIDIA A100',
data: [65, 80, 95, 70],
borderColor: '#8b5cf6',
backgroundColor: 'rgba(139, 92, 246, 0.2)',
pointBackgroundColor: '#8b5cf6',
borderWidth: 2
}
]
},
options: {
...commonOptions,
scales: {
r: {
angleLines: { color: '#e2e8f0' },
grid: { color: '#e2e8f0' },
pointLabels: { font: { size: 11 }, color: '#475569' },
ticks: { display: false, min: 0, max: 100 }
}
}
}
});
});
</script>
@endpush

10
routes/web.php
View File

@@ -13,6 +13,7 @@
use App\Http\Controllers\Auth\LoginController;
use App\Http\Controllers\BoardController;
use App\Http\Controllers\CategoryController;
use App\Http\Controllers\ChinaTech\BigTechController;
use App\Http\Controllers\CategorySyncController;
use App\Http\Controllers\ClaudeCode\CoworkController as ClaudeCodeCoworkController;
use App\Http\Controllers\ClaudeCode\NewsController as ClaudeCodeNewsController;
@@ -811,6 +812,15 @@
});
});
/*
|--------------------------------------------------------------------------
| 중국의 기술도약 Routes
|--------------------------------------------------------------------------
*/
Route::prefix('china-tech')->name('china-tech.')->group(function () {
Route::get('/big-tech', [BigTechController::class, 'index'])->name('big-tech.index');
});
/*
|--------------------------------------------------------------------------
| 추가기능 Routes