[Spring Boot] 모의 투자 사이트 개발기 (1)

개요

https://toss.im/career/next-developer-2024

2024 토스 NEXT 개발자 챌린지

 

토스 개발자 챌린지에서 좋은 기회로 면접까지 볼 수 있었다. 면접 결과는 불합격이었지만 너무 좋은 면접 경험을 가지고 있어서 꼭 토스에 한 번 입사해보고자하는 마음이 들었다.

 

이후 좋은 기회로 8년차 개발자분과 커피챗을 가질 수 있었고 아주 깊은 감명을 받았다. 아주 간단한 결론으로는 토스에 가고 싶으면 현재 토스에서 하는 일을 할 줄 알면 된다는 것이다. 

 

이러한 결론을 토대로 토스 증권과 업비트를 참고한 모의 투자 사이트를 개발해보고자 한다. 

 

시작하기

백엔드 개발자를 희망하면서 포트폴리오를 어떻게 짜야할 지 많은 고민이 있었다. 백엔드는 결과물을 한 눈에 보여주기에는 힘들다는 편협한 생각을 가지고 있었다. 물론 어느 프로젝트를 하더라도 깊은 고민이 있었고 좋은 과정을 잘 기록했다면 정말 좋은 프로젝트이다. 하지만 개인적으로 결과물을 보여줄 수 있는 서비스를 원했고 이게 핑계로 작용했다. 

 

하고싶은 말은 그냥 하자이다. 실제로 이전에 React 를 사용해서 프론트까지 직접 구현했던 프로젝트들이 있었고 요즘에는 더 쉬운 환경이 되었다. 지금 뭘 해야할 지 모르겠다라는 말은 핑계만 될 뿐이다. 

 

현재 Spring Boot 를 백엔드로 진행하고 있으며 Cursor AI 를 적극적으로 활용하며 React 로 프론트엔드를 제작하고 있다. 

 

타 사이트 분석하기

처음 프로젝트를 시작할 때 유사한 서비스가 있다면 참고하는 것이 매우 중요하다고 생각한다. 실제로 참고한 사이트는 2가지이다.

 

개미톡

https://www.anttalk.co.kr/Page/?Page=Main

개미톡

 

현재 모의 투자 서비스를 운영하고 있는 유일한 웹 사이트이다. 커뮤니티 기능도 함께 존재하지만 모의 투자를 중점적으로 살펴보자.

 

해당 사이트에서는 BTCUSDT, ETHUSDT 두 가지 상품에 대해서만 모의 투자를 진행하고 있다. 차트는 TradingView 를 사용하고 있으며 React 에서 라이브러리 형태로 제공하는 것을 확인했다. 

 

여기서 확인해야할 점은 크게 3 가지이다.

1. 실시간 데이터를 어떤 식으로 가져오는 지
2. 차트의 과거 데이터 및 캔들 데이터를 어떻게 가져오는 지
3. 주문 시 데이터 처리는 어떻게 이루어지는 지

세 가지 질문에 대해서 차근차근 살펴보자. 

 

웹소켓의 대표적인 예제가 주식 시세인만큼 실시간 데이터는 웹소켓을 통해 전달될 것이다. 개발자도구의 네트워크에서 WS 필터를 통해 확인해보면 개미톡에서는 3개의 WS 이 연결되어있으며 그 중 하나에서 코인에 대한 모든 정보가 수신되는 것을 확인할 수 있다. 이때 정보는 시세, 체결데이터, 호가가 한 번에 들어온다. 

 

차트의 과거 데이터같은 경우 차트를 움직이면 그때마다 bybit 의 API 를 활용하여 데이터를 가져오고 있다. 서버에서 별도의 처리 없이 bybit 의 OpenAPI 를 그대로 사용한다. 

 

매수매도 주문 데이터는 웹소켓에서 보낸 데이터를 확인하면 볼 수 있다. 웹소켓은 양방향 통신이 가능하기에 실시간성이 무엇보다 중요한 거래에서도 웹소켓을 통해 송신하는 것을 확인할 수 있다. 

 

토스 증권

https://tossinvest.com/

토스증권

 

다음은 토스 증권이다. 웹 기반 서비스를 제공하고 있기 때문에 토스 증권 역시 개발자도구를 통해 어떤식으로 데이터를 주고 받는 지 확인해볼 수 있었다. 

 

하지만 토스 증권에서 개발자도구를 통해 웹소켓을 직접 확인할 수가 없었고, 전체에서도 socket 관련해서는 js 파일 하나만 존재할 뿐이었다. js 파일도 웹팩으로 번들링되어있고 난독화되어있다는 GPT 의 답변만 받았다. 

 

하지만 토스 면접 준비를 위해 본 SLASH 영상 중 기억에 남는 영상이 하나 있었다. 

 

https://www.youtube.com/watch?v=SVt1-Opp3Wo

 

제목처럼 SharedWorker 를 사용해서 단 하나의 웹소켓을 사용한다는 내용이다. 크롬에서는 N 개의 탭이 있더라도 모두가 사용할 수 있는 SharedWorker 를 사용할 수 있다는 것이다. 

 

해당 내용이 생각나 크롬의 Shared workers 를 확인해보았고, 아래처럼 웹소켓의 존재를 드디어 확인할 수 있었다. 

Inspect 를 통해 네트워크 탭을 살펴보면 드디어 웹소켓을 만나볼 수 있다. 토스 증권에서는 사이트에 접속할 때 WS 을 연결하기 때문에 이를 확인하기 위해서는 강력 새로고침 혹은 나갔다 들어와야 한다. (혹시나해서 message-id 는 가렸다)

 

메세지 형식을 보면 STOMP 프로토콜을 사용하고 있다. 매도매수 주문 시에도 STOMP 프로토콜을 사용하는 것을 확인해볼 수 있었다. 

 

 

차트같은 경우 토스 역시 TradingView 를 사용하고 있었으며 자체 API 를 통해서 캔들 데이터를 가져오고 있었다. 

업비트

https://upbit.com/

업비트

마지막으로 국내 코인 거래소인 업비트이다. 

 

업비트에서는 자체 차트를 사용하고 있었다. 최근들어 TradingView 도 사용할 수 있게 한 것을 보면 TradingView 가 새삼 매우 강력한 툴임을 인지하게 된다.

 

업비트에서도 과거 데이터를 불러오는 것은 동일하다. 업비트도 Open API 를 제공하고 있기 때문에 실제 어떤 식으로 호출되는 지도 짐작할 수 있다.

 특이하게 업비트는 바이너리 메시지를 통해 실시간 데이터를 받아오고 있다. 

 

CRIX.UPBIT.KRW-BTC,10,18,14123.21,1.0948,58530.00
CRIX.UPBIT.KRW-BTC,10,18,10.0688,1.0948,58530.00
CRIX.UPBIT.KRW-BTC,10,29,14123.21,1.0000,58530.00
CRIX.UPBIT.KRW-BTC,10,41,14123.21,1.0000,58530.00
CRIX.UPBIT.KRW-BTC,10,49,14123.21,1.0000,58530.00
CRIX.UPBIT.KRW-FCT2,10,18,153.62,1.0009,50000.00

 

문자열로 변환하면 위와 같다. 업비트에선 한 화면에 정말 많은 종목의 데이터를 실시간으로 보여주고 있기 때문에 내부적으로 사용하는 웹소켓에서는 데이터 형식을 최소화한 것으로 보인다. 하지만 가독성이 매우 떨어진다는 점은 어쩔 수 없다.

Bybit

정말 마지막으로 호기심에 Bybit 까지만 확인해보고자 한다. 특이하게 또 3개의 웹소켓이 존재한다.

v1 이라는 웹소켓은 borrow 관련 데이터가 들어온다. 아마 배수 레버리지 투자가 있고, 미수거래를 위한 데이터이지 않을까 싶다.

v2 라는 웹소켓은 흔히 실시간 금액, 호가창에 대한 데이터가 들어온다.

세 번째로 realtime 이라는 웹소켓은 바이너리메시지가 계속해서 들어오는데 GPT 에 물어봐도 암호화되어있어서 해석이 불가능했다. 근데 킬로바이트 수준의 데이터를 계속해서 보내야할 정도면 굉장히 큰 리소스를 사용하는데 이유를 찾을 수가 없었다. 블록체인과 연관되었을까 싶지만 보내는 데이터는 ping 말고 전혀 없다. 

 

구글링을 해도 전혀 관련한 내용이 없다. 굉장히 많은 리소스를 사용하고 있는데, 관련 정보가 없으니 궁금하긴 하다. 도메인을 이해한다면 궁금증이 풀리지 않을까 싶다.

구상하기

타겟

원래는 토스 증권처럼 주식을 타겟팅하려했다. 하지만 주식은 24시간 열려있지 않기에 코인을 선택하였다. 코인은 Upbit, Bybit 등 다양한 곳에서 Open API 를 제공하고 있기에 더 적합하다 생각했다. 

프론트엔드

프론트엔드는 Cursor AI 를 적극 활용하여 구동만을 목적으로 생성하려한다. 차트는 TradingView 의 무료 라이브러리를 사용할 예정이다. 데이터를 가져오는 것은 단계적 목표를 두었다.

 

첫 번째로 기존 Bybit API 를 그대로 사용하여 화면을 구성할 예정이다. 개미톡에서도 캔들 데이터는 외부 API 를 그대로 사용하고 있으며 Bybit 에서도 실시간 시세 및 캔들 데이터에 대해서 웹소켓을 열어놓았기 때문에 큰 제약없이 가능할 것 같다.

 

두 번째로 토스 증권처럼 서버에서 외부 API 데이터를 가공해 전달받고자 한다. 캔들 데이터 및 실시간 데이터까지 서버로부터 가져오는 것이 목표다.

 

무엇보다 백엔드 고도화를 목적으로 시작하는 프로젝트이므로 프론트엔드는 구동만을 목표로하는 점 다시 강조한다.

백엔드

기본적인 회원관리를 모두 포함하며 결과적으로 금융 주제인만큼 정밀한 서비스를 만들고자 한다. 

실시간 데이터 처리

실시간 데이터는 토스 증권을 참고해 STOMP 를 사용할 예정이다. 아마 토스에서도 메시지 브로커로 Kafka 를 사용하고 있을 것 같은데, 추후 주문에서 Kafka 를 연결시켜 관리하면 정합성 보장 측면에서 이점이 있을 것 같다.

거래 처리 방법

고민되는 지점은 거래처리 방법이다. 실제에서는 거래소에서 호가를 해당 가격에 파는 사람이 있어야 살 수 있다. 그래서 100개 수량의 주문을 넣더라도 한 번에 처리되는 것이 아니라 30개만 체결되고 70개 수량은 미체결될 수 있다. 하지만 모의 사이트에서는 호가 정보를 가져오기만 하기 때문에 모의 주문이 호가창에 영향을 끼치지 않는다는 문제가 있다. 

 

1만원에 10개 매수 주문이 걸려있을 때, A 가 1만원에 10개를 사더라도 실제 호가창에는 반영될 수 없기에 B 도 1만원에 10개를 살 수 있다는 것이다. 

 

하지만 사실상 거래소의 데이터를 가져오기만 하기 때문에 절대 제어할 수 없는 부분이므로 호가가 아닌 현재가를 기준으로 주문을 처리하겠다. (실제 서비스에서도 주식은 거래소가 별도로 존재하기에 주문만 전달하면 되는 것 같다)

 추가 - 과거 데이터 관리

토스 증권에서도 실시간 데이터를 모두 수집하고 자체적으로 캔들 API 호출을 지원한다. 이를 구현해 프론트엔드에서 외부 API 의존성을 제거하는 게 첫 번째 목표로 삼고 있다.