#web #trend

html5는 차세대 웹표준으로 확정(2014년 10월 28일)된 html의 새로운 버전이다 html5는 Client Side Technology를 강력하게 지원하여 단순 표현 html에서 그 이상의 의미를 가지도록 발전시킨 기술이다

클라이언트와 서버와의 통신이 가능하여 이에 대한 부가기능을 제공함으로써 Active-X와 같은 plug-ins를사용 하지 않고 웹서비스를 제공할수 있다. 가장 쉬운 예로 비디오 및 오디오 기능을 자체적으로 지원한다. (MULTIMEDIA 요소)

최근 브라우저가 상당한 기능을 하기 때문에 html를 통해서 보여주기만 하는 뷰어가 아니라, html 페이지를 프로그램으로 간주 하고 이것이 실행되는 운영 체제를 브라우저로 본다.

즉, 브라우저 자체를 플랫폼으로 보자는 발상의 전환이 html5의 핵심이라 할 수 있다

2004년 7월부터 WHATWG에서 웹어플리케이션 1.0이라는 이름으로 세부 명세 작업을 시작하였고 현재 W3C에서 html5.1 권고안을 공개 했다.

  • 권고안의 정은 총 5개 단계로 이루어져 있다
    1. 초안 (Working Draft)”
    2. 최종 초안 (Last Call Working Draft)
    3. 권고 후보 (CR : Candidate Recommendation)
    4. 권고안 (PR : Proposed Recommendation)
    5. W3C 권고안 (Rec : Recommendation)

W3C측은 HTML 포맷 안정화를 1년에 한 번 권고안으로 공개할 수 있는 워크플로우 개발을 목표로 한다고 밝히고 있다.

지금은 HTML 5.2 책정 작업을 진행중이고 2017년 말 경 출시 될 것으로 예상된다. \ (인용 : http://techholic.co.kr/archives/62456)

html5의 스펙

html5는 다양한 스펙들이 있지만, 그 중 개인적으로 흥미로웠던 부분은 웹의 진정한 실시간 통신, 웹소켓의 등장이다.

초기 웹이 문서전달과 하이퍼링크를 통한 문서 연결이였다면, HTTP 프로토콜은 이런 목적에는 매우 부합하는 모델이다.

HTTP를 사용한 통신은 웹브라우저가 먼저 요청을 하고 그 요청에 웹서버가 응답을 보내는 형태이며 응답을 보낸 후에는 브라우저와 접속을 끊는다. 보낼때 마다 요청하고 응답하는 방식이기에 데이터 전송에 효율이 떨어지고 서버가 접속을 계속 유지하지 않아 통신을 위해서 접속과정을 거쳐야 한다.

그러나 시대가 발전하고 갈수록 동적인 표현과 뛰어난 상호 작용이 요구 되면서 iframe를 통한 재요청 또 flash socket/silverlight socket/active-x 의 기술을 통해 통신을 했으나 이것들은 모두 설치를 해야 쓸 수 있었다.

이후 Ajax를 사용하여 비동기로 반복요청을 할 수 있어 조금씩 개선하고 있었지만, 클라이언트의 비효율적인 재요청을 피할 수는 없었다. 그러한 요구들을 반영하여 HTML5 사양의 일부로 웹 서버와 웹 브라우저가 지속적으로 연결된 TCP 라인을 통해 실시간으로 데이터를 주고 받을 수 있도록 하는 HTML5의 새로운 사양인 웹소켓이 등장하였다.

따라서 웹 소켓을 이용하면 일반적인 TCP소켓과 같이 연결지향 양방향 전이중 통신이 가능하다. 처음에는 html5를 지원하는 브라우저가 많지 않아 되는 브라우저는 거의 없었지만 현재는 모든 브라우저들이 지원하고 있다

Peter Lubbers 라는 개발자의 ‘Five Signs You Need HTML5 WebSockets’이라는 포스팅을 보면

  1. 실시간 양방향 데이터 통신이 필요한 경우
  2. 많은 수의 동시 접속자를 수용해야 하는 경우
  3. 브라우저에서 TCP 기반의 통신으로 확장해야 하는 경우
  4. 개발자에게 사용하기 쉬운 API가 필요할 경우
  5. 클라우드 환경이나 웹을 넘어 SOA 로 확장해야 하는 경우

다섯 가지의 경우의 예를 들어 웹소켓을 이용하면 좋은 경우를 작성해 놓았다.

실제 적용 사례를 보자면

https://www.auctionblue.com/에서 이루어 지는 실시간 경매가 웹소켓을 사용하여 개발되어 실제 사용되고 있다. (Stomp 프로토콜을 이용하여 실시간 통신을 구현하였다. 최근은 RTC 라고 해서 브라우저 실시간 통신용 규격이 있으며 이 규격을 사용한 하이퍼커넥트의 아자르/SK플래닛 의 PlayRTC이 있다.)

웹 소켓은 일반적인 TCP 소켓과는 다른 프로토콜로 설계되어 있어 기존 TCP 서버를 그대로 이용할 수 없어서 웹 소켓 서버 사양에 맞도록 새로 구현해야 한다. 웹 소켓 서버를 위한 다양한 오픈소스가 온라인에서 제공되고 있는데, pywebsocket , phpwebsocket, jWebSocket, web-socket-ruby, Socket.IO-node 와 같은 모듈을 이용하면 웹 소켓 서버를 쉽게 구축할 수 있다.

최근에는 웹소켓과 node.js를 이용하여 실시간 채팅장을 만든 예제를 검색만으로도 쉽게 볼 수 있다. 별도의 플러그인없이 웹에서 쉽게 채팅을 구현할수 있게 된 것이다. html이 단순히 글자나 출력해주는 마크업 언어가 아닌 html에서 실시간 양방향 통신이 가능하다는 것이 주목할 만한 점이다.

html5웹소켓 솔루션 업체인 카징(Kaazing)의 존 펠로우스(CTO)의 말을 인용하자면 앞으로의 웹은 살아있는 존재가 될 것이다. 그 시대가 도래하면 웹소켓은 가장 주목받는 기술이 될 것이라고 한다.

기존 사이트에서 많은수의 동시 접속자를 수용해야 하는 경우 실시간으로 받아 오는 데이터의 정확성을 처리 해야 하는 경우, 웹소켓의 기술은 고려 해볼 사항이 아닌 필수 조건이 되야 한다.

yoon.kim's avartar

yoon.kim

프론트 앤드를 꿈꾸는 퍼블리셔입니다.

More posts by this author