자본시장과 IT

HTML5와 자본시장

2 65

1.
HTML5.
어느 때부터인가 자주 언급되는 단어입니다. HTML5를 도입하면 동영상 재생을 HTML에서 지원한다는 정도외에 아는 지식도 없고 관심도 없었습니다. 몇 년전까지만 해도 PM이자 기획자였기 때문에 알아야 한다고 생각했지만 이제는 그저 사용자일 뿐이라고 생각했습니다.  예전에 SDP를 간단히 소개하면서 실시간웹기술을 소개한 적이 있었습니다.

브라우저에서 실시간을

이 때 Ajax와 Comet기술을 소개하였습니다. HTML5를 발표하면서 실시간처리가 가능하도록 하는 표준을 발표하였습니다.  그런데 금융산업이 HTML5에 많은 관심을 가진 듯 합니다.

먼저 HTML5의 전도사역할을 하시는 Channy님이 정리한 글을 보죠.

4.1 Server-Sent Events
웹 서버로 부터 전달(Push)되는 데이터 예를 들어 SMS 같은 것을 받을 수 있도록 EventSource를 정의하고 이벤트를 기다릴 수 있도록 하는 API를 기술하고 있다.

4.2 HTML5 Communications
이 스펙은 기존 Ajax의 단점으로 알려진 크로스 도메인 문서 접근을 가능하게 해 주는 스펙이다. 마이크로소프트의 XHR 때문에 약간 논의가 지지부진한 면이 있지만 텍스트를 위한 서버 통신을 지원해 준다. 물론 보안 사항에 대한 부분도 중요하게 다루어지고 있다.

4.3 Web SQL Database
자바 스크립트를 이용해 웹 브라우저 내장 데이터베이스에 SQL을 통해 질의하는 API이다. 오프라인 웹 애플리케이션 개발이나 모바일에서 로컬 데이터 캐싱이 필요할 때 유용하게 사용할 수 있으며, 일반적인 DB 라이브러리 수준의 메소드를 지원해 준다.

4.4 Web Sockets API
한 웹 페이지에서 서로 다른 서버에 있는 웹 페이지에 양방향 통신을 할 수 있는 별도 프로토콜을 정의할 수 있는 API이다.

4.5 Web Workers
웹 애플리케이션이 주 문서와 병렬적으로 스크립트를 백그라운드로 수행할 수 있게 해 주는 API. 쓰레드 기반 메시지 처리를 가능하게 해 준다. CPU 부하를 많이 잡는 작업을 여러 워커(worker)로 나누어 작업하거나 클라이언트 DB를 업데이트 하거나 나누어서 작업이 가능한 자바 스크립트 API를 제공해 준다. 흥미로운 점은 암호화 작업에 대한 유즈케이스를 담고 있어서 웹 브라우저들이 지원만 한다면 향후 전자 서명 기능을 제공해 줄 수도 있을 듯.
HTML5의 모든 것중에서

그러면 지난 번에 소개한 Comet와 Websockets의 차이점을 알아보겠습니다.

Comet introduced an even greater departure from the HTTP communications model by enabling “push”-style of communications over HTTP. Comet defines several techniques that allow the server to send information to the browser without prompting from a client. With the help of an additional HTTP connection, Comet can even facilitate bi-directional communications over two HTTP connections. However, the trouble with Comet is its lack of standard implementation due the varying levels of support provided by browser vendors for XHR and iFrames?the two building blocks of Comet-style communications. In addition, there is a significant amount of overhead, both in terms of networking and development, to manage two connections for communications. These costs can introduce latency into Comet applications that limit the accuracy of the real-time communications they provide.

HTML 5 WebSocket represents the next evolution of Comet and Ajax in an attempt to stand HTTP communications on its head. The HTML 5 WebSocket specification defines a single-socket full-duplex (or bi-directional) connection for pushing and pulling information between the browser and server. Thus, it avoids the connection and portability issues of Comet and provides a more efficient solution than Ajax polling.  At present HTML 5 WebSockets is the predominant mechanism for facilitating full-duplex, real-time communications on the Web.
HTML 5 Web Sockets vs. Comet and Ajax중에서

Web Socket을 좀더 자세하게 소개한 한글문서입니다.

2.
앞서 Channy님이 정리한 내용을 SDP를 웹환경으로 개발하고 있는 Ian Alderson, Caplin Trader Product Manager의  버전을 살펴보겠습니다.

Web Sockets  provided they iron out all the kinks,Web Sockets should provide the ideal connection type for streaming real-time data

Web Workers  although the main browser thread is the only one allowed to interact with the DOM, you can pass off all other work, such as message parsing, to web workers to utilise the multiple cores that are ubiquitous these days. The result: better performance, lower latency and greater predictability.

Application Cache  pre-HTML5 solutions to this had to rely on a combination of the base tag and cache control settings. HTML5 replaces this home-grown functionality and additionally enables applications to work offline (potentially useful if the application is running on a mobile device that may experience transient connectivity issues)

Local/session storage  if the application can’t access the web server, layouts and other information can’t be saved. Local storage could be used to save layouts to the local browser database, then submit them (possibly the next time the user logs in) to the web server

Canvas  great for building graphical displays such as charts. Although Canvas has been supported in Firefox for a long time, IE has been stuck with VML

Video/Audio tags no need for external plug ins (provided the video is using the right codec), easier to embed video/audio content

CSS Transitions  pretty much had to be implemented in JavaScript previously, now a whole load of effects can be done in CSS and they look greatStacks of CSS eye-candy ? things such as rounded corners that previously could only be done using images
HTML5: what does it mean for capital markets e-commerce?중에서

HTML5에서 제공하는 기술들이 트레이딩시스템을 개발할 때 어떻게 적용할 수 있는지 보여줍니다. Websockets을 이용하여 트레이딩시스템을 구축하는데 적극적인 회사가 Kaasing이며 Open Gateway라는 제품입니다. Web Sockets제품과  Messaging 제품을 결합하여 아래와 같은 시스템 구성이 가능하다고 말합니다.
사용자 삽입 이미지                       출처:HTML5 Web Sockets: A Quantum Leap in Scalability for the Web

Kaasing에서는 Comet에 비해 Web Sockets이 Low Latency와 High Performance를 구현하는데 더 좋다고 합니다. 그러면 Trading System을 어떻게 구현할지 Kaasing가 인도에서 개최한 컨퍼런스에서 발표한 자료를 참조바랍니다. 

발표한 자료는 How to build an enterprise trading solution using HTML 5’s WebSockets

3.
이상으로 Comet과 Web Sockets을 비교정리하였습니다. 그런데 Web Sockets을 도입하는데 몇가지 걸림돌이 있다고 Caplin Technology는 주장합니다.

1. Browser support

We still have to deal with IE6 at the moment and WebSocket is not supported yet in the current browsers (apart from Chrome). So when can a web developer realistically rely on WebSocket being available for the majority of his users? This is likely to remain an issue for a long time.

2. Proxy support

WebSocket through proxies are a fairly unknown quantity ? WebSocket is designed to fail cleanly so falling back to another mechanism is possible. However we don’t really know how many proxies will work with WebSocket. This includes server side proxies, which are often overlooked and are usually out of the control of the server side developer.

3. Features

What I am referring to here are the low level features that Greg talks about. His blog demonstrates that you cannot just take the simple WebSocket API and write a real time application (other than a demo) without taking into account the kind of edge cases he describes. Without this a web application could appear unstable for many users.
Why we don’t need HTML5 WebSocket중에서

특히 트레이딩시스템의 경우 고객중 Proxy Server를 사용할 경우 실패할 확률이 높을 수 있기때문에 좀더 신중한 접근을 필요로 합니다.
How HTML5 Web Sockets Interact With Proxy Servers
마지막으로 HTML5를 이용하여 파일럿제품으로 개발한  SDP(Sing Dealer Platform)/SBP(Single Bank Platform)의 스크린을 보시길 바랍니다. 상업투자은행의 딜러가 사용하기에 부족함이 없을 듯 합니다.
사용자 삽입 이미지

About the author / 

smallake

2 Comments

  1. 나경아빠 10월 12, 2010 at 2:25 오후 -  응답

    와우.. 이 많은 자료와 시각은 어떻게… 입이 떡 벌어집니다…

    • smallake 10월 13, 2010 at 6:50 오전 -  응답

      ^^
      저의 주특기는 Copy&Paste입니다.또 웹기술은 개인적으로 관심을 가지고 있기도 하고….

댓글달기

최신 댓글

트윗

  • 오늘 아침 지하철 스크린도어에 읽은 시 "아직 희망은 길고, 기억의 흐름은 짧은 젊은 시절에, 비록 슬프고 고통이 지속되더라도, 지나간 일들을 회상하는 것은 오, 얼마나 기분 좋은 일인지!" 희망과 기억으로 묘사한 젊음을 다가왔습니다.

    13 hours ago
  • 암호통화거래에 대한 CFTC의 규제가 한국 거래소에 영향을 미칠까요?법과 사례를 놓고 보면 가능합니다. https://t.co/7GMf1KjYUj https://t.co/WJ0jur9iWO

    yesterday
  • 핀테크의 지불서비스가 제공하는 기능중 많이 활용하는 '더치페이' !! 카드도 지원한다고 합니다. 규제완화이지만 지불서비스를 하는 회사들에겐 악재일 듯. https://t.co/5XtySoa24T

    3 days ago
  • 이재무 ‘기도’중 “기도란 무릎 꿇고 두 손 모아 하늘의 소리를 듣는 것이 아니라 바람 부는 벌판에 서서 내 안에서 들려오는 내 음성을 듣는 것이다” 내 안에서 들려오는 하느님의 목소리에 귀를 기울이고 이를 실천하는 것이 신앙입니다.

    3 days ago
  • ㅇㅇㅇ

    3 days ago
트레이딩컨설팅그룹이음 서비스

ZeroAOS, 매매API
ZeroFIX/OMS
국내외매매플랫폼
Jira, SPA, Node.js
매매서버 및 튜닝

자세한 정보는 아래를 선택하세요
    바   로   가   기