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

모의 투자 사이트를 개발한 지 2주가 채 안되었다. 솔직히 더 매진해야하지만 IT 동아리도 참여하게 되었고 여러 사정으로 인해 이번 주말에 살짝 정체되었다. 그러한 김에 지금까지 개발된 내용과 함께 두 번째 개발기를 작성해보고자 한다.

1. 지난 이야기

지난 글에서는 다른 투자 사이트들에서 WS 을 통해 실제 어떻게 데이터를 주고받는 지 비교해보았고, 프론트엔드와 백엔드 관점에서 어떤 부분을 개발해야할 지 생각해봤다. 그 결과로 2주간을 정리하자면 다음과 같다.

• Cursor AI 는 신이다.
• 역시 지금까지 개인 프로젝트를 못한다는 말은 핑계다.
• 이 프로젝트에서 어떤 고민을 담을 수 있을까

프론트엔드의 전체를 Cursor 를 통해서 진행하고 있다. 완벽하지는 않지만 프롬프트만을 이용해서 내가 원하는 화면을 그려내고 있다는 것 자체가 엄청나게 느껴진다. 물론 프론트엔드 코드의 질을 생각하지는 않기에 품질은 안좋지만 내가 원하는 화면을 그려내기에는 충분하다.

 

이렇게 프로젝트를 진행해보고 내가 원하는 대로 프론트엔드까지 그려보다보니 지금까지 프론트엔드를 구현하기 어려워서, 팀 프로젝트에 참가하기 어렵다는 말이 무색하게 되었다. 자기가 뜨문뜨문 프론트엔드를 구성해보거나, Cursor 를 사용하거나 하면 충분히 개인 프로젝트도 할 수 있다는 뜻이다.

 

결국 프로젝트의 완성이 내 목적이 아니다. 내 목적은 프로젝트를 하면서 실무에서 필요한 고민들을 해보고 문제를 가정하며 해결해나아가는 과정을 경험하는 것이다. 그렇기 때문에 지속적으로 프로젝트를 하면서 어떤 고민들을 해결할 수 있을까 지속적으로 찾아내야한다.

2. 프론트 엔드

(1) TradingView

참고 사이트들을 모두 둘러보았을 때 대부분이 TradingView 를 사용하고 있었다. 아래 사이트에서 살펴보면 구독 모델에 따라 제공하는 차트의 형식이 달랐으며 기본적으로 무료로 제공하는 Lightweight Charts 가 존재했다. 이는 React 에서도 사용가능했기에 이걸 사용해서 차트를 그렸다.

https://www.tradingview.com/HTML5-stock-forex-bitcoin-charting-library/

Financial HTML5 Charts

 

차트의 실시간 데이터는 웹소켓을 활용한다. bybit 의 웹소켓 API 에서 kline 을 사용하면 위 처럼 실시간으로 변화되는 가격을 차트에 그려줄 수 있다.

      const response = await fetch(
        `https://api.bybit.com/v5/market/kline?category=linear&symbol=${this.symbol}&interval=1&end=${this.lastLoadedTime}&limit=${count}`
      );

차트의 과거 데이터는 bybit 에 API 를 요청해서 가져온다. 화면이 움직일때마다 이를 추적하는 변수가 존재하고 라이브러리에 맞는 요청 응답으로 위 처럼 무한 스크롤이 가능하다.

(2) 실시간 데이터

실시간 데이터 역시 bybit 의 웹소켓을 사용하였다.

wss://stream.bybit.com/v5/public/spot 해당 주소로 웹 소켓을 연결하고

{
    "op": "subscribe",
    "args": [
        "tickers.BTCUSDT",
        "tickers.ETHUSDT"
    ]
}

위와 같은 데이터 형식을 보내 실시간 가격 정보를 구독한다. 이를 통해 실시간으로 들어오는 가격 정보를 프론트엔드에서 바로 받아 사용할 수 있는 것이다.

3. 백엔드 + 프론트엔드

보다 쉬운 이해를 위해 화면들을 소개하면서 개발한 부분을 소개하겠다.

(1) 홈 화면

아까 말했다시피 실시간 가격을 홈 화면에서 받아오고 있다. 또한 네비게이션바를 보면 로그인이 구현되어있는데, JWT 를 사용한 인증 방법을 사용하고 있다. 

 

(2) 종목 골라보기

다음은 종목 골라보기 화면이다. 실시간 데이터를 구독하고 있으며 이를 화면에 처리한다. 위에서 필터가 있는 것을 확인할 수 있는데 Quote 코인을 기준으로 실제 필터링이 가능하다. 또한 하트로 각 개인별 관심목록에 추가할 수 있고 관심 목록만 모아서 볼 수 있다. 

 

또한 조회 시에는 페이지네이션을 구현하였고, 일단 거래대금 순으로 정렬시켰는데 이는 백엔드 글로 다시 작성하며 작성 시 링크를 추가해 놓겠다.

 

(3) 거래

 

아까 소개한 차트와 매수, 매도 주문이 존재하는 화면이다. 실제 증권사 화면과 비슷하게 구성해보았으며 현재는 시장가 주문만 처리하고 있다. 주문 API 는 HTTP 로 통신하고 있다.

 

(4) 계좌

계좌 같은 경우에도 보유 종목과 실시간 가격을 통해서 현재 평가 자산을 계산한다. 이 또한 실제 금융 쪽 화면을 참고해서 만들었다. 

4. 지금까지..

(1) BigDecimal

금융권에서는 금액 계산이 철저하게 필요하다. 하지만 소수점 거래에서는 알다시피 부동 소수점이 부정확도를 높이고 있기에 이를 처리할 수 있는 방법이 필요하다.

2024.11.11 - [Programming/JAVA] - 부동소수점? BigDecimal 을 통한 정확한 계산

부동소수점? BigDecimal 을 통한 정확한 계산

(2) 거래 대금 순 정렬

실제 증권사이트에서도 거래 대금 순 정렬이 있다. 이를 위해서는 서버에서 데이터를 모두 가지고 있다는 가정하에 NoSQL 에서 쿼리를 통해 정렬이 가능하다. 

(3) Java 의 가격 동기화

실시간으로 변화하는 가격 속에서 시장가 거래를 처리하기 위해서는 동기화 된 가격을 사용해야한다. 병렬성을 해치지 않으면서 동시성을 보장하는 동기화 방법으로 시장가 거래를 처리한다.

2024.11.09 - [Programming/JAVA] - [Java] Volatile? Synchronized? Concurrent? 자바의 동기화 방식

[Java] Volatile? Synchronized? Concurrent? 자바의 동기화 방식

5. 추가 요소

가장 필수적인 요소는 화면에서 Bybit 로 연결되어있는 웹소켓을 로컬 서버로 연결시키는 과정이다. 이를 위해서는 로컬 서버에서 데이터를 뿌려줄 수 있어야하며 이는 Bybit 의 데이터를 모두 가지고 있음을 가정한다. 

 

두 번째로 현재 HTTP 를 사용하고 있는 매도, 매수 주문에 대해서 역시 웹소켓을 통할 필요가 있다. 

세 번째로는 토스 증권에서 STOMP 를 사용 중이기에 로컬 서버도 STOMP 양식을 사용하는 것을 목표로 한다. 

다섯 번째로 주문에 있어서 동시성 제어가 확실해야한다. 일단 DB Lock 을 생각하고 있다.

 

미리 개선할 것도 생각해보자.

 

1. 거래 대금 순 정렬 시 Redis 를 사용하자. NoSQL 에서 쿼리로 N(코인 수) * T(Tick) 의 데이터 속에서 매번 찾는 것보다 Redis 에서 N 개의 데이터들을 정렬하는 것이 훨씬 효과적일 것이다. 이는 데이터가 쌓일 수록 더 필수적
2. DB Lock 을 Redis Lock 으로 성능을 높이자.

추가 요소 개발과 개선된 부분과 함께 개발기(3) 으로 돌아오겠다!