// 보고서 데이터(시세 추이·HBM 점유율·5년 실적·시나리오·컨센서스·리스크 매트릭스·NVIDIA 공급 매트릭스)를 인터랙티브 차트로 시각화하는 스킬. Chart.js·ECharts·D3.js 라이브러리 선택, 호버 툴팁·스크롤 진입 애니메이션·반응형 차트 구현. 차트 빌드, 데이터 시각화, 인터랙티브 그래프 요청 시 반드시 사용.
SK하이닉스의 분기·연간 실적, 사업부문별(DRAM/NAND/HBM) 매출 구조, 현금흐름, 부채, 밸류에이션, 가이던스, 컨센서스를 수집·분석하는 펀더멘털 분석 스킬. SK하이닉스 실적·재무·밸류에이션·HBM 매출·가이던스 분석 요청 시 반드시 사용.
메모리 반도체 산업 사이클·DRAM/NAND 가격·HBM 시장 점유율·AI 데이터센터 수요·경쟁사(삼성·마이크론·키옥시아)·기술 로드맵·산업 정책을 분석하는 스킬. 반도체 산업·HBM 시장·경쟁사 비교·AI 수요·메모리 사이클 분석 요청 시 반드시 사용.
SK하이닉스(000660.KS)의 시세·거래량·수급·기술적 지표를 수집·정리하는 스킬. 종가/시가총액/PER/PBR/외국인지분율/이동평균/RSI/MACD 등을 표준 형식으로 산출. SK하이닉스 시세 조사, 주가 현황, 차트 분석, 수급 분석 요청 시 반드시 사용.
SK하이닉스의 지정학·환율·공급망·고객집중·사이클·기술·규제·재무·ESG·변동성 리스크를 식별·평가하고 Bear/Base/Bull 시나리오를 작성하는 리스크 분석 스킬. SK하이닉스 리스크·미중 규제·환율 노출·HBM 수율·시나리오 분석·다운사이드 평가 요청 시 반드시 사용.
SK하이닉스 최근 30일 뉴스, 애널리스트 컨센서스/목표가, 증권사 의견 변화, 시장 심리 지표, 주요 이벤트 캘린더, 커뮤니티 분위기, 단기 카탈리스트를 정리하는 시장 심리·뉴스 분석 스킬. SK하이닉스 뉴스 흐름·목표가·애널리스트 의견·시장 분위기·다음 이벤트 분석 요청 시 반드시 사용.
SK하이닉스 주가 다각도 분석 에이전트 팀(시세·펀더멘털·산업·심리·리스크 5명)을 조율하여 통합 분석 보고서를 생성하는 오케스트레이터. 트리거: 'SK하이닉스 분석', '하이닉스 주가 보고서', 'SK Hynix 분석', '000660 분석', '하이닉스 다각도 분석', '하이닉스 투자 보고서'. 후속 작업: 보고서 수정/업데이트/보완/재실행/부분 재실행(예: 'risk 섹션만 다시', '실적 발표 반영해서 업데이트'), 이전 결과 기반 개선 요청 시에도 반드시 이 스킬을 사용.
| name | web-data-visualization |
| description | 보고서 데이터(시세 추이·HBM 점유율·5년 실적·시나리오·컨센서스·리스크 매트릭스·NVIDIA 공급 매트릭스)를 인터랙티브 차트로 시각화하는 스킬. Chart.js·ECharts·D3.js 라이브러리 선택, 호버 툴팁·스크롤 진입 애니메이션·반응형 차트 구현. 차트 빌드, 데이터 시각화, 인터랙티브 그래프 요청 시 반드시 사용. |
web/_design/data.json을 입력으로 받아 인터랙티브 차트를 web/scripts/에 구현하는 워크플로우.
| 차트 유형 | 권장 라이브러리 | CDN |
|---|---|---|
| 라인/바/도넛/콤보 | Chart.js v4 | cdn.jsdelivr.net/npm/chart.js@4 |
| 히트맵·sankey·복잡 인터랙션 | Apache ECharts v5 | cdn.jsdelivr.net/npm/echarts@5 |
| 커스텀 fan chart·복합 SVG | D3.js v7 (필요 시만) | d3js.org/d3.v7.min.js |
| 보조: 트윈 애니메이션 | GSAP (motion-designer가 사용 중이면 공유) | - |
원칙: 단일 사이트에 라이브러리 1~2개만. 표준 차트는 Chart.js, 특수 차트(매트릭스·sankey)는 ECharts.
| 차트 ID | 데이터 소스 | 라이브러리 | 차트 종류 |
|---|---|---|---|
chart-price | data.priceHistory + data.snapshot.high52w/low52w | Chart.js | 라인 + 영역 채우기 + 마커 |
chart-revenue-trend | data.revenueByYear | Chart.js | 콤보 (바: 매출/OP, 라인: OPM 보조축) |
chart-hbm-share | data.hbmShare2026 | Chart.js | 도넛 3개 (bit / revenue / hbm4 토글) |
chart-nvidia-supply | data.nvidiaSupplyMatrix | ECharts | 히트맵 (행: GPU, 열: 공급사) |
chart-consensus | data.consensus.targets | Chart.js | 가로 도트 차트 + 평균 라인 |
chart-scenarios | data.scenarios | Chart.js or D3 | Fan chart 또는 박스 (Bear/Base/Bull) |
chart-risk-matrix | data.riskMatrix | ECharts | 3×3 히트맵 + 라벨 |
web/scripts/chart-configs/)// 스크롤 진입 시 애니메이션 (motion-designer와 협업)
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting && !entry.target.dataset.animated) {
entry.target.dataset.animated = 'true';
initChartFor(entry.target.id); // 진입 시점에 차트 생성
}
});
}, { threshold: 0.3 });
document.querySelectorAll('[data-chart]').forEach(el => observer.observe(el));
// prefers-reduced-motion 대응
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const chartOptions = {
animation: prefersReducedMotion ? false : { duration: 800, easing: 'easeOutCubic' },
// ...
};
각 차트는 다음 HTML 구조에 마운트:
<div class="chart-container" data-chart>
<header class="chart-header">
<h3 class="chart-title">차트 제목</h3>
<p class="chart-subtitle">설명</p>
<!-- 토글 버튼 (필요 시) -->
</header>
<div class="chart-body">
<canvas id="chart-price"></canvas> <!-- 또는 <div id="..."> for ECharts -->
</div>
<footer class="chart-footer">
<p class="chart-source">출처: ...</p>
</footer>
</div>
이 마크업 명세를 frontend-engineer에게 SendMessage로 공유.
web/scripts/charts.jsimport { initPriceChart } from './chart-configs/price-chart.js';
import { initRevenueTrend } from './chart-configs/revenue-trend.js';
// ... 7개 차트 import
export async function initAllCharts() {
const data = await fetch('/web/_design/data.json').then(r => r.json());
// IntersectionObserver로 lazy init
const chartInitializers = {
'chart-price': () => initPriceChart(data),
'chart-revenue-trend': () => initRevenueTrend(data),
// ...
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
const id = entry.target.querySelector('canvas, div[id]')?.id;
if (entry.isIntersecting && chartInitializers[id]) {
chartInitializers[id]();
observer.unobserve(entry.target);
}
});
}, { threshold: 0.2 });
document.querySelectorAll('[data-chart]').forEach(el => observer.observe(el));
}
web/_design/visualization-notes.md에 다음 정리:
responsive: true + maintainAspectRatio: false. 모바일에서 레이블 단순화<table> 또는 aria-label) 제공이전 차트 코드 보존, 변경 필요 차트만 수정. data.json 변경 시 영향받는 차트만 갱신.