7장에서 보여지는 Line Chart는 기본적인 차트 기능만 있습니다. 금융 차트로 가장 유명한것은 트레이딩뷰의 차트이지만 기능제한 많고 무료 버전은 업데이트가 거의 없습니다.
거의 대부분의 코인가격이나 온체인 차트는 HighCharts를 사용합니다. “과거 시세를 분석하고, 다양한 지표를 얹어서 투자 전략을 세우는” 수준의 서비스를 지향하신다면, Highcharts(Highstock)를 사용하는 것이 개발 시간을 수백 시간 단축하고 훨씬 전문적인 결과물을 만드는 지름길입니다.
왜 금융 차트에는 Highcharts인가?
단순히 선을 그리는 것을 넘어, ‘투자 정보를 분석’해야 하는 금융 서비스에서 Highcharts가 압도적인 우위를 점하는 이유는 다음과 같습니다.
하나, 금융 전용 기능 (Highstock)
일반적인 차트 라이브러리는 선(Line)이나 막대(Bar)에 집중하지만, Highcharts는 금융 전용 패키지인 Highstock을 별도로 제공합니다.
- OHLC & Candlestick: 주식 데이터의 핵심인 시가, 고가, 저가, 종가를 표현하는 캔들스틱 차트를 기본 지원합니다.
- 거래량 통합: 가격 차트 하단에 거래량(Volume)을 겹쳐서 보여주거나 별도 영역(Pane)으로 나누는 작업이 매우 간단합니다.
둘, 대용량 데이터 처리 능력 (Performance)
주식이나 코인 데이터는 1분봉, 5분봉 등 수만 개의 데이터 포인트(Tick)를 다루어야 합니다.
- Boost Module: WebGL을 사용하는 부스트 모듈을 통해 수십만 개의 데이터 포인트를 렉(Lag) 없이 부드럽게 렌더링합니다.
- Data Grouping: 사용자가 차트를 축소하면 수많은 데이터를 자동으로 평균화하여 보여주고, 확대하면 상세 데이터를 보여주는 ‘데이터 그룹화’ 기능이 기본 탑재되어 있습니다.
셋, 강력한 인터랙티브 도구
투자자는 차트를 단순히 보는 것이 아니라 ‘조작’합니다.
- Range Selector & Navigator: 차트 하단의 내비게이터를 통해 전체 기간 중 특정 구간을 마우스 드래그로 빠르게 이동하고 확대할 수 있습니다.
- Zooming & Panning: 모바일 터치나 마우스 휠을 이용한 정밀한 줌 기능을 제공하여 과거 시세 분석이 용이합니다.
넷, 기술적 지표 (Technical Indicators)
전문적인 투자 서비스를 만들 때 가장 큰 장점입니다.
- 내장 지표: 이동평균선(SMA, EMA), RSI, 볼린저 밴드, MACD 등 수십 가지의 기술적 분석 지표를 별도의 계산 로직 없이 설정만으로 추가할 수 있습니다.
- Drawing Tools: 사용자가 차트 위에 추세선을 근거나 메모를 남기는 도구들을 쉽게 붙일 수 있습니다.
다섯, 추출 및 출력 편의성 (Exporting)
금융 보고서나 요약본을 만들 때 필수적입니다.
- 내장 수출 모듈: 버튼 하나로 현재 차트를 PDF, PNG, JPG, 심지어는 데이터 원본인 CSV나 Excel로 내보내는 기능이 기본으로 들어있습니다.
🤖 실전! 프론트엔드에 HighCharts 추가(2-7)
5장이나 7장에서 표시하는 LineChart는 apexcharts라이브러리를 사용하고 있습니다. apexcharts로 단지 라인만 그린다면 상용하기 충분합니다만 다른 유명한 무료 라이브러리들을 사용할수 있는 여건이 있는데 굳이 apexcharts를 고집할 필요는 없습니다.
🚨 장기간의 실습으로 로컬컴퓨터를 끄고 켜고 하면 도커데스크탑을 실행하고 난후 각 컨테이너 실행이 오류가 날 확률이 많습니다.
🔑 안티그래비티 터미널에 아래 명령을 입력합니다.
~/my-project$ docker-compose down && docker compose up -d ~/my-project$ docker-compose ps
💡 위 명령에도 해결이 안되면 채팅에 “컨테이너가 오류가 나고 있으니 해결해줘”라고 하세요!
매번 이야기 하지만 바이브 코딩은 AI 에이전트(제미니, 챗지피티, 클로드 등)에 따라 미세하게 다르게 설정합니다. 때문에 오류가 다를수 있고 언제든지 나타날수 있지만 바이브 코딩의 최대 장점인 “오류 수정해”라고 하는것으로 거의 대부분 해결됩니다.
사전작업
왜 HightChars를 사용해야 되는지 알아보았으니 바로 실습해서 적용해 보겠습니다.
- https://www.highcharts.com/demo#highcharts-stock-demo-general로 이동합니다.
- Stock chart with GUI를 클릭합니다.
- 좌측의 Javascript를 복사합니다.
const commonOptions = { api: { url: 'https://demo-live-data.highcharts.com', access: { url: 'https://demo-live-data.highcharts.com/token/oauth', token: 'token' } }};…이하 생략 …})();
- 프로젝트 루트에 temp/temp.md를 만들고 복사한 javascript를 붙여 넣습니다.
🧠 이번 실습은 프론트엔드에 HighCharts의 Stock 차트중 기본 GUI 차트를 http://localhost:3000/line-chart에 추가하는 과정입니다.
✨ 사용자의 의도(Vibe)
temp/temp.md에 있는 highcharts 자바 스크립트를 참고해서 프론트엔드 컴포넌트에 추가하고 /line-chart 페이지에 표시하는데 아래 사항을 적용하고 계획을 수립 해줘
- 파일 폴더 및 이름 : components/charts/highchart/HighChartGUI.tsx
- /line-chart 페이지 표시 위치는 자산관리 아래에 표시
💻 AI가 생성한 코드 (Syntax) 및 결과
- Implementation Plan 자동 수립 => 실행=>완료
- 🪄 바이브: “프론트엔드 컨테이너를 리빌드 리스타트해줘” => 완료
~my-project > docker compose up -d --build frontend
- http://localhost:3000/line-chart 에서 HighCharts확인
- 현재 차트가 NVIDIA (Highcharts Example)라고 나옵니다. 이는 HighCharts에서 제공하는 더미 데이터입니다.
- 🪄 바이브: “HighChartGUI.tsx를 LineChartOne.tsx와 같이 백엔드 엔드포인트( /api/v1/assets/ohlcv/{asset_id} ) 사용하도록 하고 http://localhost:3000/line-chart페이지의 자산관리 목록의 “차트보기”버튼을 클릭하면 해당 Ticker의 차트가 보이게 해줘”=> 완료
- 🪄 바이브: “프론트엔드 컨테이너를 리빌드 해줘” => 차트 확인 및 완료
~my-project > docker compose up -d --build frontend
