자본시장과 IT

HTML5와 자본시장

2 64

어느 때부터인가 자주 언급되는 단어입니다. 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을 좀더 자세하게 소개한 한글문서입니다.

앞서 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

이상으로 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 / 



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

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

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

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


최신 댓글

  • smallake 내 기억속의 여의도
    저도 인터넷에서 받은 사진이라 저작권이 없습니다. 사용하셔도 무방할 듯 하지만 인터넷에서 검색을 해보시면 좋을 듯 합니다.
  • PB 내 기억속의 여의도
    안녕하세요 여의도 흑백사진이 정말 멋있습니다. 혹시 여의도 대지조사 자료에 저 사진을 인용해도 괜찮을까요??
  • smallake 늙은 개발자
    작고 낭만이 있고 소박한 삶이 어느 때부터 더 어렵다는 생각이 들더군요. 그런 생각이 몸과 마음을 힘들게 한다고 생각하지 않고요.…
  • 가오리 늙은 개발자
    small lake 작은호수...ㅋ 꿈이 그렇게 작고 낭만적이고 소박하니, 항상 힘든겁니다~


  • 원자력과 관련한 학계 사람들이 탈핵반대성명을 내놓았죠. 이에 대한 반론적 성격의 칼럼입니다. "원전에 대한 장밋빛 환상 거두자" 주류가 이해에 묶일 때 비주류는 세상을 넓고 다르게 본다는 생각이 드네요. https://t.co/A0w4dWhTsT

  • 무척이나 좋은 제품이지만 항상 비용이 부담을 준 Jira와 Confluence. 드디어 이별을 고하고 Redmine으로 돌아섰습니다. Bitnami가 패키징한 Redmine, 설치의 고통을 덜어줍니다. 좋은 제품보다 더 중요한 건 좋은 사용이죠

  • 국정운영 5개년 계획중 금융 및 소프트웨어와 관련한 전략과제입니다. 바꿀 수 있을지, 이제 실행력의 문제입니다. https://t.co/BGsGN7U2wP https://t.co/M4FWzu1Bss

  • '10년새 반토막' 이발소·사진관...주위서 사라지는 것들. 전 여전히 사각사각 가위질하는 소리가 좋습니다. 병원에서 목욕 봉사할 때 이발을 원하는 분들이 많은데 어디 무료로 가르쳐주는 곳이 없을까요?(^^) https://t.co/wIShQgWQA5

  • 이념적으로 인정하지 못하는 오바마케어를 없애려고 한 트럼프. 실패중입니다. 정책에 대한 지지율이 높고 수혜계층이 명확합니다. 대못을 박고 지속가능한 정책의 첫째는 명확한 수혜계층입니다. https://t.co/T4HGuNJxOh

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

ZeroAOS, 매매API
Jira, SPA, Node.js
매매서버 및 튜닝

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