WebSocket과 Google Cloud를 사용한 프런트엔드 실시간 시장 데이터 구축

 * 본 아티클의 원문은 2021년 3월 19일 Google Cloud 블로그(영문)에 게재되었습니다.  

금융 업계에서 사용되는 금융 상품 전자 거래용 핵심 애플리케이션은 지연 시간, 처리량, 간섭의 허용 범위가 엄격한 편입니다. 하지만 데이터 시각화 및 모니터링 애플리케이션과 같이 실시간 시장 데이터 스트림을 활용하면서도 성능 변동성에 대한 허용 범위가 더 넓은 부수적인 사용 사례도 있습니다. 최근까지도 실시간 시장 데이터의 온보딩, 라이선스, 전체적인 유지보수에 필요한 비용이 높아 많은 기업에서 채택하기 어려웠습니다. 하지만 클라우드 기반 서비스 제공으로 이제 실시간 시장 데이터를 보다 다양한 애플리케이션에서 사용할 수 있게 되었습니다.

기업에서 기술 전략을 클라우드 중심 관점으로 재구성하면서 실시간 데이터(및 그에 따른 이점)를 부수적인 사용 사례에 적용하고 유용한 정보를 더욱 빠르게 도출할 수 있게 되었습니다. 

이 블로그 게시물에서는 프런트엔드의 애플리케이션에 대한 서비스 제공에 초점을 맞춰 실시간 시장 데이터 스트림에 액세스할 수 있는 간편한 수단을 개발자에게 제공하는 클라우드 중심 아키텍처 패턴에 대해 다룹니다. 이 패턴은 작년 Next OnAir ’20 컨퍼런스에서 Google Cloud에 구축한 분석 시장 데이터 앱을 기반으로 합니다.

실시간 시장 데이터 액세스 간소화

기존의 실시간 시장 데이터 액세스 방법에서는 기업과 데이터 센터가 같은 곳에 위치해야 하고 물리적 하드웨어를 구입 및 유지보수해야 하며 제공업체와 자체 데이터 센터 간의 연결을 관리해야 합니다. 자본 시장에 참여하는 대규모 기업에서는 전체 글로벌 팀이 이러한 활동을 담당할 수 있습니다. 

클라우드에서 시장 데이터를 스트리밍하면 소비자의 진입 장벽을 낮출 수 있습니다. 인프라 및 유지보수 비용이 필요 없는 실시간 데이터 액세스 확장은 소매 스크린 거래, 시가평가 노출 모니터링, 지수 게시, 미래 예측, 팬 차트, 모델 중심 예측 등의 애플리케이션 유형에 도움이 되지만 현실적으로 필요한 예산과 조직 구조를 갖춘 기관으로 사용이 제한되어 있었습니다.

하지만 비교적 새로운 한 자산군의 경우 존재 자체가 클라우드 중심에서 시작되었습니다. 암호화폐 거래 애플리케이션에는 WebSocket을 통해 프런트엔드의 거래자에게 스트리밍되는 실시간 시장 데이터가 포함될 때가 많습니다. Next OnAir ’20 앱을 빌드할 당시 실시간 보급 모델을 상품 선물 및 금융 선물 거래 시장에 적용했습니다. 구현에 대한 자세한 내용을 다음과 같이 소개합니다.

실시간 시각화를 위한 아키텍처 검토 

Google에서 사용한 실시간 데이터 소스는 Google Cloud에 사용할 수 있는 CME Group의 서비스인 Smart Stream이었습니다. 데이터 출처는 CME Globex 거래 플랫폼이며 멀티캐스트를 통해 실행되는 사용자 데이터그램 프로토콜(UDP) 스트림을 사용합니다. 상품 가격 데이터가 상호 연결을 통해 은 또는 버터 선물과 같은 단일 제품에 각각 해당하는 여러 Pub/Sub 주제로 전달됩니다.

Pub/Sub는 Google Cloud 전역에서 실행되는 애플리케이션에 적합한 핵심 배포 메커니즘입니다. 하지만 Google Cloud 외부에 위치한 애플리케이션에서 Pub/Sub 주제의 메시지에 액세스해야 하는 경우가 있습니다. 주제 메시지를 익명 소비자에게 표시할 수 있는 공개 웹사이트가 그 예에 해당합니다. 이와 같은 요구를 해결하기 위해 Google Cloud에서는 Pub/Sub 메시지를 표준 Websocket 연결을 통해 배포하는 Autosocket이라는 이름의 패키지를 오픈소스로 제공했습니다.  

Autosocket은 단일 주제에 게시된 Pub/Sub 메시지를 수신하여 프런트엔드 클라이언트에 제공하는 어댑터의 역할을 합니다. 이 클라이언트는 부하 분산된 IP 주소에서 Websocket 프로토콜을 통해 클러스터에 연결됩니다. Cloud Run을 사용하는 컨테이너식 애플리케이션으로, 미러링되는 Pub/Sub 주제 이름을 사용해 구성됩니다. 

배포된 클러스터는 스테이트리스(Stateless), 디스크리스, 탄력성, 글로벌 부하 분산을 특징으로 합니다. 또한 클러스터에 연결되면 주제에 게시된 최근 10개의 메시지 캐시가 Websocket 클라이언트에 스트리밍됩니다. 덕분에 메시지 트래픽이 적을 때 더 나은 사용자 경험을 지원할 수 있습니다.

구현 시작하기

사용자 자체 환경에서 유사한 아키텍처를 구현하는 단계는 크게 2가지로 구성됩니다.

• Pub/Sub 주제와 프런트엔드 웹 애플리케이션에 전송되는 Websocket 데이터 간의 브리지를 제공하는 Cloud Run 인스턴스 배포
• Websocket 연결을 관리하고 인바운드 데이터 스트림을 기반으로 한 시각화의 지속적 새로고침을 관리하도록 프런트엔드 애플리케이션 코딩

연결 관리

그림 3: JavaScript를 사용한 Websocket 연결 관리   

규모에 따른 시각화

이 애플리케이션의 시각화 중에 포함된 선도 곡선 차트는 거래소의 주문장 상단(top-of-book) 데이터 스트림을 읽습니다. 대부분의 선도 곡선에 표시되는 가격은 단일 결제 또는 최종 판매 가격을 나타냅니다. Smart Stream을 통해 양면 시장의 실시간 가격을 확보한 이후부터는 실시간 가격을 대신 표시했습니다. 덕분에 특정 선물 계약의 기간 구조에서의 매매 가격 차이를 파악할 수 있습니다. 그림 4는 애플리케이션의 선도 곡선 시각화의 스냅샷입니다.

다음은 차트 시각화를 위한 코딩 접근 방식을 요약한 내용이며 이어서 그림 5에서는 JavaScript 구현 샘플이 제시되어 있습니다. Google Charts를 사용해 시각화를 렌더링했습니다.

• JavaScript의 Websocket API를 사용해 제품 코드의 Websocket 엔드포인트에 연결합니다.
• 선물 계약의 만료 월을 JavaScript 지도에 입력하고 가장 최근 가격을 각 항목의 해당 값으로 유지합니다.
• 각각의 새 메시지에서 SocketManager로 호출되는 processMessage() 루틴으로 이 지도를 업데이트합니다. 새 만료 월이 지도에 추가되거나 이미 지도에 있는 기존 월의 최신 가격이 업데이트될 수 있습니다.
• Object.keys()를 사용해 지도를 정렬하여 만료 월을 시간순 범위로 나타냅니다.
• drawChart() 루틴으로 새 데이터를 사용해 시각화를 업데이트하고 drawChart()를 setInterval(x,i)의 콜백으로 사용해 지도의 현재 값으로 차트를 지속적으로 렌더링합니다.

그림 5: JavaScript에서 실시간 가격 데이터를 사용한 차트 새로고침

실시간 시장 데이터 피드를 주문 관리 시스템이나 거래소 Drop Copy의 데이터와 결합하여 거래자의 실시간 시가평가 노출을 표시할 수 있습니다. 미실현 손익(P&L) 시각화에서는 거래자의 진입 포지션과 종목의 실시간 가격에 각각 해당하는 두 Websocket 연결을 동시에 사용합니다. 각각의 출처는 별도의 Pub/Sub 주제입니다. 손익(P&L) 금액은 런타임에 거래자의 포지션 진입 가격과 실시간 시장 가격의 차이에 따라 파생되며 거래 방향(매수 또는 매도)을 나타내는 만료 월 앞에 화살표가 표시됩니다.

그림 6의 왼쪽 끝에 있는 상자는 주문 스트림에서 제공된 데이터를 강조표시하며 데이터에는 거래 방향, 상품, 진입 가격, 거래자 이름이 포함됩니다. 오른쪽 끝에 있는 상자는 가격 스트림에서 제공되는 상품의 실시간 시장 가격을 강조표시하며 가격 변동에 따라 손익(P&L) 열이 지속적으로 재평가됩니다. 

실제 작동 방식

클라우드의 시장 데이터 사이트에서 CME Group의 실시간 데이터를 사용해 이 아키텍처 패턴을 구체적으로 구현합니다. 백그라운드에서 Google Cloud Build를 사용해 앱의 독립적인 요소를 빠르게 가동하고 상호 연결할 수 있습니다. 또한 Terraform과 Google Cloud가 함께 구성 드리프트를 방지하는 선언적이고 반복 가능한 배포를 지원합니다.