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

최근 오픈한 '더 차트(The Chart)' 게임은 실시간으로 변동하는 주가를 부드러운 애니메이션으로 보여주는 게 핵심입니다. 개발 초기에는 단순히 `div` 태그를 여러 개 나열해서 막대 그래프를 만들려고 했어요. CSS로 높이만 조절하면 되니까 구현하기 쉽고 간편했거든요. 그런데 데이터가 100개, 1,000개 쌓이자 브라우저가 버벅거리기 시작했습니다. 노트북 팬이 윙윙 돌아가고 프레임이 뚝뚝 끊기는 현상... 이게 바로 **DOM(Document Object Model) 조작의 한계**였습니다.

수천 개의 데이터를 끊김 없이(60fps) 렌더링하기 위해 저는 HTML5 Canvas API를 도입하기로 결정했습니다. 웹 개발자가 아니라면 조금 생소할 수도 있겠지만, 오늘날 웹에서 고성능 그래픽이나 게임을 구현하려면 필수적인 기술입니다. 이번 글에서는 웹 개발자들이 시각화 프로젝트를 할 때 반드시 알아야 할 캔버스 렌더링 최적화 기법과, 주가 차트 구현의 핵심 로직을 아주 쉽게 공유해 보겠습니다.

1. DOM vs Canvas: 왜 Canvas인가?

왜 `div` 태그로 그리면 느릴까요? DOM 방식은 각 막대(Candle)가 하나의 HTML 요소가 됩니다. 요소가 늘어날수록 브라우저는 레이아웃을 다시 계산(Reflow)하고 다시 그리는(Repaint) 작업에 엄청난 자원을 소모합니다. 1,000개의 막대가 매초 움직인다는 건, 브라우저가 1,000개의 `div` 위치를 매초 계산해야 한다는 뜻이니까요. CPU가 비명을 지를 만하죠.

반면 Canvas는 화면상의 픽셀을 직접 제어하는 **비트맵(Bitmap)** 방식입니다. 도형을 1개를 그리든 1만 개를 그리든 브라우저 입장에선 그저 '하나의 이미지'일 뿐이에요. '더 차트' 게임은 매 프레임(약 16ms)마다 전체 차트를 지우고(`clearRect`) 다시 그리는 방식을 씁니다. "전체를 다 지우고 다시 그리면 더 느리지 않나요?"라고 반문하실 수 있지만, 현대의 GPU 가속을 받는 캔버스는 이 정도 연산을 눈 깜짝할 새에 처리합니다. 덕분에 수천 개의 데이터가 흘러가도 60FPS의 부드러운 움직임을 유지할 수 있었습니다.

2. 좌표 변환의 수학: 데이터를 픽셀로

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

이를 위해 **정규화(Normalization)** 공식을 사용했습니다. `(현재가 - 최저가) / (최고가 - 최저가)` 공식을 통해 데이터를 0~1 사이의 비율로 만든 뒤, 캔버스의 높이를 곱해주는 방식이죠. 이때 중요한 점은 컴퓨터 그래픽스에서 캔버스의 y축은 위에서 아래로 증가하기 때문에, `Height - (비율 * Height)`로 반전시켜야 한다는 점입니다. 이 간단한 수학이 모든 차트 라이브러리의 뼈대입니다. 여기에 마우스 휠 줌인/줌아웃 기능까지 넣으려면 스케일링(Scaling) 매트릭스까지 고려해야 하죠.

3. 더블 버퍼링(Double Buffering)과 최적화

캔버스로 그릴 때 화면이 깜빡이는 현상(Flickering)을 막기 위해 **더블 버퍼링** 기법도 고려해야 합니다. 화면에 보이지 않는 가상의 캔버스(Off-screen Canvas)에 그림을 다 그린 뒤, 완성된 그림을 한 번에 실제 화면으로 복사하는 방식이죠. 다행히 최신 브라우저들은 이 과정을 자동으로 최적화해주지만, 복잡한 애니메이션을 구현할 때는 직접 구현해야 할 수도 있습니다.

또한, `requestAnimationFrame`을 사용하여 브라우저의 주사율에 맞춰 렌더링 타이밍을 조절함으로써 배터리 소모를 줄이고 부드러운 모션을 구현했습니다. 웹 기술의 발전으로 이제 브라우저 안에서도 네이티브 앱 못지않은 고성능 그래픽을 구현할 수 있게 된 것이죠.