웹 캔버스(Canvas)로 구현한 고성능 주식 차트: 개발 비하인드 스토리

최근 오픈한 '더 차트(The Chart)' 게임은 실시간으로 변동하는 주가를 부드러운 애니메이션으로 보여주는 것이 핵심입니다. 처음에는 간단하게 div 태그를 여러 개 나열해서 막대 그래프를 만들려고 했습니다. 하지만 데이터가 100개, 1,000개 쌓이자 브라우저가 버벅거리기 시작했습니다. 이것이 바로 DOM(Document Object Model) 조작의 한계였습니다.

수천 개의 데이터를 끊김 없이 렌더링하기 위해 저는 HTML5 Canvas API를 도입하기로 결정했습니다. 이번 글에서는 웹 개발자들이 시각화 프로젝트를 할 때 반드시 알아야 할 캔버스 렌더링 최적화 기법과, 주가 차트 구현의 핵심 로직을 공유합니다.

1. DOM vs Canvas: 성능의 차이

DOM 방식은 각 막대(Candle)가 하나의 HTML 요소가 됩니다. 요소가 늘어날수록 브라우저는 레이아웃을 다시 계산(Reflow)하고 다시 그리는(Repaint) 작업에 엄청난 자원을 소모합니다. 반면 Canvas는 화면상의 픽셀을 직접 제어하는 비트맵 방식입니다. 도형을 1개를 그리든 1만 개를 그리든 브라우저 입장에서는 그저 '하나의 이미지'일 뿐입니다.

'더 차트' 게임은 매 프레임(약 16ms)마다 전체 차트를 지우고 다시 그리는 방식을 사용합니다. "전체를 다 지우면 느리지 않나요?"라고 반문하실 수 있지만, 현대의 GPU 가속을 받는 캔버스는 이 정도 연산을 눈 깜짝할 새에 처리합니다. 덕분에 60FPS의 부드러운 차트 움직임을 구현할 수 있었습니다.

2. 좌표 변환(Coordinate Transformation)의 수학

차트를 그릴 때 가장 골치 아픈 부분은 '데이터 값'을 '화면 좌표(Pixel)'로 변환하는 것입니다. 주가가 50,000원에서 55,000원으로 올랐다면, 화면에서는 y축 몇 픽셀 위치에 점을 찍어야 할까요?

이를 위해 정규화(Normalization) 공식을 사용했습니다. (현재가 - 최저가) / (최고가 - 최저가) 공식을 통해 데이터를 0~1 사이의 비율로 만든 뒤, 캔버스의 높이를 곱해주는 방식입니다. 이때 중요한 점은 캔버스의 y축은 위에서 아래로 증가하기 때문에, Height - (비율 * Height)로 반전시켜야 한다는 점입니다. 이 간단한 수학이 차트의 뼈대입니다.

3. 랜덤 워크(Random Walk) 알고리즘

게임 속 주가는 어떻게 움직일까요? 실제 주식 시장의 움직임을 모사하기 위해 '랜덤 워크' 이론을 차용했습니다. 단순히 random() 함수를 쓰는 게 아니라, 이전 가격에 기반하여 변동폭(Volatility)을 더하거나 빼는 방식입니다.

여기에 '추세(Trend)'라는 변수를 더했습니다. 상승장일 때는 양수가 나올 확률을 높이고, 뉴스 이벤트가 터지면 변동폭을 5배로 키워 급등락을 연출했습니다. 이렇게 만든 알고리즘은 실제 비트코인 차트와 구별할 수 없을 만큼 리얼한 '공포의 파란불'을 만들어냈습니다.