코인 차트 뭐 어렵나?

요즘 가상 화폐에 대한 관심이 늘어나면서 종종 차트를 마주할 기회가 생긴다. 개발을 배우기 전에야 그냥 차트겠지만 개발을 배운 이상 단순한 차트가 아니다. 다양한 곳에서 데이터를 실시간으로 받아오고 있고, 그에 따라 화면이 실시간으로 바뀐다. 전에는 내가 이런 페이지를 만들수 있을까 싶은 의구심이 들었지만 지금은 왠지 만들수만 있을 것 같다는 자신감이 든다. 사실 내가 스스로 만드는 것은 아니고 위의 이미지를 클론 코딩하는 것이다. 하지만 두가지 목표를 가지고 시작하겠다.

1. 차트 라이브러리 사용하기
2. 실시간 데이터 적용

이렇게 두가지 목표를 가지고 시작하겠다.

기술 스택 선정

프로젝트를 구현하기전 기술 스택을 선정해보겠다.

• Next.js 15 (App router)
• Lighthouse Chart
• Zustand
• Binance API

대표적으로 위의 기술을 사용해서 구현해보겠다. 우선 Next.js 15버전이 출시되었고, React 19버전이 출시되었기 때문에 사용하지 않을 이유가 없다. Server Caching 방법도 변경되었고, React 19에서 새롭게 등장한 메서드들도 존재하기 때문에 이번 기회에 사용해볼 것이다.

Lighthouse Chart을 사용한 이유는 간단하다. 우선 나는 Next.js를 통해 프로젝트를 만들기 전에 Templates를 참고하는 편이다. 소스코드도 제공하기 때문에 어떤 방식으로 코드를 작성하도록 가이드하는지 확인할 수 있고, 당연히 호환성 측면에서도 문제가 없기 때문이다. 마침 제공하는 템플릿에 차트를 사용한 템플릿이 존재한다. 우선 Next.js에서 호환성에는 문제도 없고 우리가 사용할 금융 데이터를 표현하기에 적절하다. 약간 아쉬운 것은 Next.js 14버전으로 되어있다는 점인데 엄청난 기능 변경이 일어난 것은 아니기 때문에 무관할 것으로 판단했다. 또한 Lighthouse Chart를 만든 곳이 Trading View라는 트레이딩 기업이다. 트레이딩 기업에 만든 차트 라이브러리는 신뢰도가 상당히 높다.

물론 차트 라이브러리중, Chart.js와 같은 다른 선택지도 많았지만 금융 데이터에 한정하는 것이 목표이기 때문에 우선적으로 Lighthouse Chart를 도입했다.

Zustand는 전역 상태 관리 라이브러리이다. 전역 상태 관리 라이브러리라고 한다면 redux나 recoil도 있지만 최근 Zustand의 사용자가 많이 늘었고, 내가 생각하기에 가장 사용하기 간단하다는 생각이 든다. 컴포넌트간 거래 데이터를 주고 받아야하기 때문에 전역 상태 관리의 필요성을 느껴서 도입하게 되었다.

만들어보기

기능 구체화시키기

이제 본격적으로 어떻게 만들면 되는지 알아보겠다. 우선 데이터는 Binance API를 사용할 것이다.

API Document

여기에 보면 어떤 데이터를 제공하는지 확인이 가능하다. 사실상 모든 데이터를 전부 제공해준다. 이 데이터를 어디에 어떻게 사용할지가 관건이다.

그럼 어떤 기능을 만들지 추려보겠다. 우선 order book이다. 현재 어떤 가격에 얼마만큼의 수량이 거래 신청이 되어있는지 확인하는 기능이다. 메인 기능인 차트 기능이다. Interval에 따라 차트 간격을 설정하고, 마우스 hover시에 해당 데이터를 알수가 있다. 가격과 거래량을 확인할 수 있다. 가상 화폐 리스트이다. 접속한 통화 기준으로 가상 화폐를 확인할 수 있고, 가격과 상하향 퍼센트를 확인할 수 있다. sort를 통해 정렬 가능하다. 실시간 거래 데이터이다. 어떤 가격에 몇개의 가상 화폐가 거래되었는지 시간과 확인할 수 있다. 거래 요청을 하는 기능이다. order book의 거래를 클릭하면 거래를 요청할 수 있다.

이제 추가적으로 전체를 똑같이 만드는 것은 불가능하기 때문에 가장 거래량이 많고 데이터도 많은 BTCUSDT기준으로 하겠다. 쉽게 표현하면 비트코인인데 미국 달러 기준이다.

마무리

일단 간단하게만 기능 정리만 해두고 마무리하겠다. 자세한 기능 구현들은 이후 포스팅에서 한번에 작성해보겠다.