시스템 점검

무엇을 하는지, 그리고 얼마나 빠른지.

이 페이지의 모든 내용은 @tradecanvas/chart 1.26.0에 포함되어 있습니다. 프레임 시간은 내장 그래픽(Intel UHD)을 쓰는 노트북의 Chrome에서 측정했습니다. 저장소에서 node scripts/bench-render.mjs를 실행하면 같은 장면을 여러분의 기기에서 돌려 볼 수 있습니다.

아키텍처: 평범한 노트북에서도 빠른 이유. →

18
차트 유형: 134
내장 지표: 69
그리기 도구: 30
위젯 언어: 101
스타일 키: 114
위젯 기능 스위치: 0
서드파티 런타임 의존성: 3,000+
단위 테스트

내 컴퓨터에서 직접 측정하기

위의 수치는 저희 노트북에서 잰 것입니다. 아래 측정은 같은 장면을 여러분의 브라우저에서, 실제로 배포할 라이브러리로 실행합니다. 미리 녹화한 것은 없습니다.

1,000,000개 봉: Canvas 2D, 그다음 WebGL

볼린저 밴드, EMA, RSI, MACD가 붙은 1분봉 100만 개를 끝까지 축소하고 150프레임 동안 이동합니다. 먼저 Canvas 2D로, 다음에 WebGL 2로 그립니다.

100,000개 봉 위의 실시간 틱

지표 4개가 붙은 10만 봉 차트에 프레임마다 틱 20개가 들어옵니다. 각 지표는 전체를 다시 계산하지 않고 마지막 봉부터 갱신합니다.

1,000종목 시세판

1,000종목을 초당 50번 갱신하는 bo-grid. 값이 바뀐 셀은 깜박이고, 그 셀만 다시 그립니다.

WebGL 2, 그 아래에 Canvas 2D

renderer: 'webgl'은 차트 영역을 GPU로 그립니다: 캔들, 거래량, 지표 선과 채움, 호가 히트맵. 글자는 그 위의 Canvas 2D 레이어에 남습니다. 'auto'는 WebGL 2가 있는 곳에서 WebGL을 고릅니다.
WebGL 2가 없거나 컨텍스트를 잃으면 같은 차트가 Canvas 2D로 계속 그립니다. 코드는 바꿀 것이 없습니다.
한 페이지에서 최대 8개 차트가 동시에 WebGL로 그립니다(setMaxWebGLCharts). 나머지는 Canvas 2D로 그리다가 컨텍스트가 비면 WebGL로 돌아갑니다.
두 렌더러 모두 캔들이 같은 디바이스 픽셀에 놓여, 어느 쪽이 그려도 차트가 같아 보입니다.

프레임 시간

이동하는 동안 한 프레임을 그리는 데 걸리는 시간. 16.7 ms면 초당 60프레임입니다.

차트	픽셀 비율	Canvas 2D	WebGL
1600×900, 캔들 500개 + 지표 4개	2×	27.4 ms	19.6 ms
1600×900, 200,000개 봉 전체 보기 + 지표 4개	2×	34.5 ms	20.2 ms
1600×900, 1,000,000개 봉 전체 보기 + 지표 4개	2×	34.5 ms	16.7 ms
1600×900, 호가 히트맵, 스냅샷 240개 × 80단계	2×	25.5 ms	16.8 ms
차트 6개, 각각 캔들 500개와 지표 2개	2×	23.5 ms	17.2 ms
2560×1400, 캔들 2,000개 + 지표 4개	1×	41.6 ms	17.7 ms
2560×1400, 캔들 2,000개 + 지표 4개	1.5×	70.8 ms	17.6 ms
2560×1400, 캔들 2,000개 + 지표 4개	2×	114.5 ms	29.1 ms

기본값은 Canvas 2D입니다. renderer: 'webgl'(또는 'auto')로 하면 플롯 영역을 WebGL 2로 그리고, WebGL 2가 없거나 컨텍스트를 잃으면 Canvas 2D로 돌아갑니다.

데이터 경로

100,000개 봉에 볼린저 밴드, EMA, RSI, MACD를 얹은 상태의 실시간 틱 하나: ~0.001 ms
같은 네 지표를 100,000개 봉에서 전체 재계산: ~27 ms
화면에 보이는 1,000,000개 점의 라인을 한 프레임용으로 다운샘플링: ~2.6 ms
호버 시 다시 그리기(십자선, 범례): ~0.2 ms
종목이나 시간 단위를 바꿀 때 로딩 표시가 나타나기까지: 200 ms

다운로드 크기

가져오는 모든 것을 포함해, 압축(minify)과 gzip을 거친 크기.

Chart, 헤드리스 API: 176 KB
ChartWidget, 전체 UI: 315 KB
WebGL 렌더러, 처음 사용할 때 로드: 18 KB

검증 방법

일곱 개 패키지에 걸친 3,000개가 넘는 단위 테스트가 풀 리퀘스트마다 CI에서 실행됩니다.
WebGL 렌더러는 캔들을 Canvas 2D와 같은 장치 픽셀에 그립니다. 선과 채우기는 안티앨리어싱된 가장자리의 몇몇 픽셀에서만 다릅니다.
WebGL 렌더러는 Chromium, Firefox, WebKit에서 확인했습니다. WebGL 2가 없거나 컨텍스트를 잃어도 차트는 Canvas 2D로 계속 그립니다.
문서와 에이전트 스킬의 코드 예제는 실제 API에 대해 타입 검사를 거칩니다.
차트는 스크린 리더로 읽을 수 있고 키보드로 조작할 수 있습니다. 위젯은 아랍어, 히브리어, 페르시아어에서 오른쪽에서 왼쪽으로 표시됩니다.

기능

영역으로 거르거나, 이름이나 API로 검색하세요.

80개 중 80개

기능	영역	세부 내용과 API
캔들, OHLC 바, 라인, 영역, 기준선, 하이킨아시, 속이 빈 캔들	차트 유형	candlestick, bar, line, area, baseline, heikinAshi, hollowCandle
렌코, 라인 브레이크, 카기, 포인트 앤 피겨, 레인지 바	차트 유형	박스 크기 또는 ATR, 돌파할 선 수, 퍼센트나 가격 단위의 반전 폭, 봉당 범위
거래량 캔들, 이퀴볼륨, HLC 영역, 계단선, 마커가 있는 라인, 고가-저가	차트 유형	모두 18가지 차트 유형
메인 시리즈 숨기기	차트 유형	지표와 그림만 남김
대시보드용 차트	차트 유형	막대(묶음, 누적, 가로), 도넛과 파이, 산점도와 버블, 히스토그램, 캘린더, 상관 행렬, 섹터 맵, 역시계곡선, 스파크라인, 게이지, 히트맵과 트리맵, 워터폴, 호가 깊이, 자산 곡선
Canvas 2D 또는 WebGL 2	렌더링	renderer: 'canvas' \| 'webgl' \| 'auto', setRenderer, rendererChange 이벤트
축소 시 픽셀 열마다 한 구간	렌더링	봉당 1픽셀 미만일 때의 지표 선, 밴드, 히스토그램
봉 100만 개도 부드럽게 이동	렌더링	지표 4개, 픽셀 비율 2에서
GPU로 그리는 호가 히트맵, 거래량 프로파일, 마켓 프로파일	렌더링	pushDepthSnapshot(book, time)
한 페이지에 여러 WebGL 차트	렌더링	최대 8개(setMaxWebGLCharts). 나머지는 Canvas 2D로 그리고, 컨텍스트가 돌아오면 WebGL로 복귀
어떤 화면 배율에서도 선명하게	렌더링	100%, 125%, 200%에서 캔들, 거래량, 그림을 기기 픽셀에 맞춤
서드파티 런타임 의존성 없음	렌더링	따로 설치하거나 점검할 것이 없음
내장 지표 134개	지표	여섯 종류의 피벗 포인트, MA Cross, 다른 종목과의 상관관계
가격 소스	지표	open, high, low, hl2, hlc3, ohlc4, hlcc4
지표 위의 지표	지표	예: RSI의 이동평균, 틱마다 갱신
한 패널에 여러 지표, 패널 간 이동	지표	moveIndicatorToPane
같은 지표를 여러 개	지표	EMA 20과 EMA 50을 나란히
레벨과 기준값	지표	RSI 30/70, CCI ±100, 레이아웃과 함께 저장
축 위의 마지막 값	지표	가격 축과 각 패널의 축에, 선과 같은 색으로
패널 접기, 최대화, 순서 변경	지표	레이아웃과 함께 저장
지표 템플릿	지표	입력값, 스타일, 레벨, 패널을 함께 저장하고 적용
선마다 스타일과 표시 여부	지표	숨긴 선은 눈금을 늘리지 않음. setIndicatorDefaults
거래량 델타와 CVD	지표	봉에서 추정
지표 값 내보내기	지표	CSV 또는 JSON, 선마다 한 열
실시간 틱의 증분 갱신	지표	update()는 형성 중인 봉만 다시 계산
그리기 도구 69개	그리기 도구	선, 채널, 피보나치, 갠, 피치포크, 엘리어트 파동, 패턴, 사이클, 프로젝션
도구마다의 설정	그리기 도구	스타일, 속성, 시장 가격 단위에 맞춘 좌표
롱 포지션과 숏 포지션	그리기 도구	손익비, 위험 비율이나 금액으로 수량 계산
그림에 거는 알림	그리기 도구	그린 그대로의 추세선이나 채널을 가격이 넘을 때, 로그 눈금 포함
순서, 그룹, 템플릿	그리기 도구	앞으로 가져오기, 뒤로 보내기, 그룹, 잠금, 숨기기
메모, 말풍선, 화살표, 깃발, 브러시, 경로, 곡선	그리기 도구	자유 그리기와 여러 점 그리기
앵커 VWAP과 고정 범위 거래량 프로파일	그리기 도구	차트의 봉을 읽어 계산
지우개, 확대 상자, 강한 자석, 키보드 단축키	그리기 도구	Alt+T, Alt+H, Alt+J, Alt+V, Alt+C, Alt+F
날짜로 이동, 1D부터 All까지의 범위	눈금과 시간	축소 한도 없음
서머타임을 반영한 IANA 시간대	눈금과 시간	또는 거래소 고유의 시간대
모든 시간 단위와 틱 봉	눈금과 시간	7m, 90m, 2d는 피드가 제공하는 데이터로, 100T는 체결 내역으로 생성
왼쪽과 오른쪽 눈금, 패널별 로그·반전·퍼센트	눈금과 시간	왼쪽 눈금은 오버레이용이나 가격 눈금의 복사본으로
종목 비교, 스프레드와 비율	눈금과 시간	별도 눈금이나 패널에서 시간을 맞춰 표시
시간외 거래	눈금과 시간	종목의 거래 시간에 따라
가격과 시간 형식	눈금과 시간	priceFormat은 함수로도, 1/32 같은 분수로도. timeFormatter
종목의 소수 자릿수와 호가 단위에 맞춘 눈금	눈금과 시간	pricePrecision, minTick: 10 단위로 움직이는 주식에 21,705가 표시되지 않음
고가·저가 선, 매수·매도 호가	눈금과 시간	매수·매도 호가는 피드의 틱에서
차트 위 이벤트 표시	눈금과 시간	signalMarkerHover, signalMarkerClick
바로 쓰는 피드와 직접 만든 피드	데이터와 실시간	Binance, Bybit, Coinbase, Kraken, mock. WebSocketAdapter, PollingAdapter
왼쪽으로 스크롤하면 이전 기록 로드	데이터와 실시간	fetchHistoryBefore
세부 정보가 있는 종목 검색	데이터와 실시간	searchSymbols, resolveSymbol: 소수 자릿수, 호가 단위, 거래 시간, 시간대
연결 후에 알게 되는 종목 정보	데이터와 실시간	어댑터의 symbolInfo 이벤트
호가창 래더	데이터와 실시간	가격별 매수·매도 잔량, 클릭해 주문
관심 종목용 실시간 시세	데이터와 실시간	subscribeQuotes, setQuotes, getQuote
뉴스와 시장 상태	데이터와 실시간	fetchNews, 개장이나 마감까지의 카운트다운
거래소 규칙	데이터와 실시간	setMarket: 가격대별 호가 단위, 일일 상한가와 하한가, 매매 단위, 거래 세션, HOSE·HNX·UPCoM·VN30 선물
차트 위의 주문과 포지션	트레이딩	드래그로 수정하고, 선에서 바로 취소·청산·반전
체결 표시	트레이딩	executionFill에 사유와 손익
주문 티켓	트레이딩	수량, 유형, 손절과 익절, 유효 기간, 입력하는 동안 검사, 거래소의 호가 단위·상한가·하한가·매매 단위까지
계좌 패널	트레이딩	실시간 손익이 있는 포지션, 미체결 주문, 체결 내역
신호와 거래 구간	트레이딩	markers., tradeZones. 스타일 키
백테스트와 리스크 지표	트레이딩	@tradecanvas/analytics: 수수료, 슬리피지, Sharpe, Sortino, Calmar, 낙폭
가격 수준을 넘어선 알림	알림과 리플레이	선과 선의 교차, N개 봉 동안 N% 변동, 봉 마감 시, 만료 시간 지정
더 촘촘한 단계의 봉 리플레이	알림과 리플레이	큰 시간 단위를 작은 봉으로 리플레이
리플레이 중 모의 거래	알림과 리플레이	리플레이되는 가격으로 주문 체결
차트 그리드 전체 리플레이	알림과 리플레이	서로 보조를 맞춰 진행
애플리케이션용 리플레이	알림과 리플레이	startTime, hideHistory, duration, 재생되며 드러나는 표시, replayComplete
동기화되는 위젯 그리드	작업 공간	최대 6개, 종목·시간 단위·십자선·시간·그림을 공유
직접 정한 저장소에 이름 붙인 레이아웃	작업 공간	저장, 열기, 이름 바꾸기, 자동 저장. 서버에는 LayoutStorage
모든 작업의 실행 취소와 다시 실행	작업 공간	그림, 지표, 설정, 차트 유형. recordUndo
영역별 컨텍스트 메뉴	작업 공간	그림, 플롯, 패널, 가격 축, 시간 축
관심 종목	작업 공간	여러 목록, 드래그로 순서 변경
호스트 앱을 위한 이벤트	작업 공간	symbolChange, timeframeChange, ordersChange, executionFill, styleChange 등
위젯의 세 가지 외관	사용자 지정	Studio, Terminal, Capsule. ui와 setUI. --tcw-* CSS 변수
키 단위로 정하는 차트의 모양	사용자 지정	타입이 지정된 101개 키에 applyOverrides, 호스트 계층과 사용자 계층
모든 키에 닿는 설정	사용자 지정	보고 있는 차트 유형의 스타일 탭과 트레이딩 탭
기능 스위치 112개	사용자 지정	features, setFeatures, isFeatureOn. 실행 중에도 변경
위젯에 넣는 나만의 요소	사용자 지정	도구 모음 버튼과 드롭다운, 사이드바 버튼, 상태 항목, 슬롯, 메뉴 항목
나만의 단축키	사용자 지정	키보드 배열에 맞춘 addHotkey
30개 언어를 지원하는 위젯	언어와 접근성	아랍어, 히브리어, 페르시아어는 오른쪽에서 왼쪽으로
스크린 리더와 키보드	언어와 접근성	차트 요약, 봉을 하나씩 읽기, 키보드로 다루는 대화 상자
이 사이트와 문서는 4개 언어	언어와 접근성	English, Tiếng Việt, 한국어, 日本語
React, Vue, Svelte 컴포넌트	개발자	반응형 props: overrides, indicators, features
플러그인	개발자	지표, 그리기 도구, 차트 유형, 오버레이. overlayScale과 getPriceStep으로 가격 단위에 맞춰 그리기
코딩 에이전트를 위한 문서	개발자	llms.txt, llms-full.txt, 에이전트 스킬

알려진 한계

WebGL을 더 많은 기기에서 시험할 때까지 기본 렌더러는 Canvas 2D입니다. Safari와 5K 화면에서 WebGL의 프레임 속도는 아직 측정하지 않았습니다.
2560×1400 차트에서 픽셀 비율이 2이면, 내장 그래픽에서는 브라우저의 합성만으로 약 23 ms가 걸려 WebGL 프레임이 평균 29 ms가 됩니다.
틱 시간 단위는 피드가 돌려주는 최근 체결로 만들어지며, 그보다 오래된 틱 기록은 불러올 수 없습니다.
거래량 델타와 CVD는 체결마다의 매수·매도 방향이 아니라 봉에서 추정합니다.
한 페이지에서 동시에 WebGL로 그리는 차트는 최대 8개이며, 나머지는 Canvas 2D로 그립니다.

TradeCanvas로 트레이딩 화면을 만들고 계신가요?

이야기를 듣고 싶습니다.

[email protected]문의하기