오늘의 HTML5 현황과 미래

HTML5 간단한 소개

이미지 출처 https://www.powwownow.co.uk

HTML5이란 웹 개발 생산성 향상 및 차세대 웹 애플리케이션 플랫폼으로서 더 나은 사용자 경험을 위해 함께 만들어 나가는 개방형 웹 표준이다.

2004년부터 전 세계 웹 개발자들이 직접 참여하여 만들어온 표준이기도 하다.

HTML5는 HTML4와 비교하기 어려울 정도로 엄청나게 확장된 표준이다. HTML4까지는 웹에서 문서를 표현하고 연결하는 기능에 중점을 두었다면, HTML5 표준은 앱 개발 플랫폼을 목표로 하였기 때문이다. 즉, HTML5에는 멀티미디어 기능으로 비디오, 오디오를 지원하며, 2차원 그래픽 기능인 캔버스 지원 한다. 또한 기존 웹 콘텐츠에서 가장 많이 활용되는 구조를 분석하여 확장 HTML5 Forms 및 마크업(Markup)이 추가 되었다. 이외에도 브라우저에 데이터 저장을 위한 웹 스토리지(Web Storage), 양방향 통신을 위한 웹소켓(Web Socket), 그리고 쓰레드 기능인 웹워커(Web Worker), 데이터베이스 기능인 Indexed DB 등도 지원한다. 이뿐 아니라 HTML5 기본 표준이 완료된 이후 지속적으로 추가 표준이 개발되고 있다. Skype와 같은 화상통화 기능인 webRTC, 디바이스에 해당 앱이 실행되어 있지 않아도 푸쉬(Push)를 보낼 수 있는 푸쉬 알림 기능, 오프라인 기능과 백그라운드 처리 기능인 서비스워커(Service Workers), 모바일 단말의 디바이스 API인 위치정보를 가져오는 기능, 배터리 정보를 확인하는 기능, 진동을 울리는 기능, 근접 센서, 조도 센서 등에 대한 표준이 개발되고 있다.

HTML5 주요 스펙

기능	설명
시멘틱 요소	문서의 구조와 데이터의 의미를 보다 명확히 하기 위한 시멘틱 요소가 추가됨   검색 엔진 및 문서 해석기 등에서 웹 문서 판별이 정확하고 용이해 짐   <section>, <article>, <aside>, <header>, <footer>, <address> 등
웹폼 요소	사용자 입력 양식 개선되고 추가됨   range, color, datetime 와 같은 입력 양식이 추가되어 스크립트 없이 표현 가능
2D 드로잉 요소	웹 상에서 2차원 그래픽을 표현하기 위한 태그(canvas)와 API 지원   모양, 텍스트, 애니메이션, 전환 등의 효과를 줄 수 있음
3D 드로잉 요소	Canvas 3D(WebGL)을 통한 3D 그래픽 표현 지원   WebGL을 기반으로 3D 애플리케이션 또는 게임 개발을 돕는 자바스크립트 3D 엔진
멀티미디어	웹 상에서 비디오, 오디오를 표현하기 위한 태그 및 API 지원
Web Storage	웹 사이트의 정보를 사용자의 pc에 저장할 수 있는 매커니즘을 제공함.   기존 쿠키의 용량 제한 및 트래픽 부담의 단점을 해소
Web Database	로컬 데이터베이스 및 표준 SQL 질의를 수행할 수 있는 API 제공
Application Cache	인터넷이 연결되지 않은 상태에서 오프라인 응용프로그램 구현이 가능토록 지원
Web Worker	비 동기 백그라운드 처리 수행이 가능한 API 제공.   멀티 쓰레드 웹 응용프로그램 개발이 가능해 짐
Web Socket	웹 상에서 양방향 통신이 가능한 API 제공
Server Push	서버로부터의 데이터를 푸시(push) 받을 수 있는 Server-Sent Events 제공
Geolocation	지리 정보 및 위치 정보를 이용할 수 있는 API 제공(장치 종속적임)
Drag & Drop	웹 페이지 내 혹은 외부 개체를 웹 페이지로 드래그, 드랍이 가능한 API 제공
Notifications	웹에서 메신저의 알림 기능이 가능한 API제공
File API	로컬 파일을 내용을 읽을 수 있는 API 지원
SVG	XML기반의 2차원 벡터 그래픽 표현하는 외부 마크업을 HTML 안에 삽입 가능

 

HTML5 지원 현황 비교 차트

 

Chart by http://www.webponent.com/main/webponentChart/index

HTML5 하이브리드 앱

최근 iOS8과 안드로이드5.0 의 웹뷰가 성능적, 기능적 측면에서 크게 개선되어 HTML5기반의 하이브리드 앱 개발이 활성화 되고 있다.

하이브리드 앱이란 Native App 과 Web App을 합친 형태의 앱이다.

Web App 은 기본적으로 웹 서버에 올려지고 원격으로 모바일 디바이스 에 다운로드 받는 방식으로 진행된다. 즉, 구조 자체는 기존의 Web Site 와 다른점이 없다. 여기서 소개하는 하이브리드 앱은 작성된 Web App 의 소스를 Native App 안에 내장하여 모바일 디바이스에는 앱처럼 설치하고 실행은 웹브라우저가 로컬에 있는 파일을 불러들이는 형태의 하이브리드 앱을 만들 수 있게 한다.

하이브리드 앱의 장점이 몇가지 있다.

• Multi Platform–Web App 하나로 iPhone,Android,Blackberry,PalmPre 등 다양한 디바이스동시 지원 가능
• Camera , Contacts 와 같은 Device API 에 접근할 수 있는 방법이 제공
• App Store / Market 을 통한 어플리케이션 판매 가능

하이브리드 앱을 만들 수 있도록 하는 Cross Platform Mobile Application Framework 들도 다양하게 등장하고 있다.

• PhoneGap: http://www.phonegap.com
• Titanium Mobile: http://www.appcelerator.com
• QuickConnect: http://www.quickconnectfamily.org
• NimbleKit: http://www.nimblekit.com

 

HTML5 사물인터넷(IoTs)

IoTs는 ‘다양한 사물들이 연결되어 새로운 가치와 사용환경을 만들어진 세상’ 으로 HTML5가 지향하는 웹 중심의 세상과 그 의미가 다르지 않다. 물론 IoTs에 대한 다양한 분류가 있겠지만 데이터 트래픽(Data Traffic) 또는 컴퓨팅 파워(Computing Power) 관점에서 ‘무거운 연결'과 ‘가벼운 연결'으로 나눌 수 있다. 무거운 연결은 멀티미디어와 같은 대용량 데이터를 처리하거나 송ㆍ수신하는 연결이고, 가벼운 연결은 온-오프 등과 같은 작은 데이터 처리 및 송ㆍ수신 가능한 제어 등에 해당된다.

IoTs는 지금까지의 온라인 중심의 변화와 달리 오프라인 세상 변화와 함께 진행되어야 하므로 그 변화가 느릴 수밖에 없다. 그리고 IoTs가 사용되는 환경이 안정화되지 않았고 그 가치도 명확하지 않은 상태에서 이미 연결되어 사용되는 디지털, 온라인의 특징이 강한 사물들부터 적용될 것이다. 그러므로 이들 온라인 및 디지털 콘텐츠를 다루는 스마트폰 및 태블릿PC 등을 통해 이미 가치가 검증된 영화, 음악, 게임 등을 통한 무거운 연결 중심으로 진행될 수밖에 없다.

 

HTML5도 이러한 IoTs 환경으로 변화에 대응하며 진화해 가고 있다. 이와 관련해 WebRTC(Web Real-Time-Communication)라는 기기간 연결(Peer-to-Peer) 방식의 기술이 주목받고 있다. WebRTC를 통해 사용자들은 웹브라우저로 전화, 화상 통화, 웹 컨퍼런싱(Web Conference) 등을 할 수 있게 되었다. 이러한 WebRTC 기능으로 이제 사용자들은 웹 브라우저를 통해서 아직 완성도는 떨어지지만 멀티미디어 콘텐츠 사용이 가능해 졌다. 또 가벼운 연결을 위한 HTML5의 기술 표준 정립 등 다양한 준비도 지속되고 있다.

국내에서의  HTML5

아직 국내에서는 70%가 구형 브라우저를 사용하고 있기 때문에 국내 사용자 10명 가운데 7명은 새로운 웹 표준으로 제작된 웹 사이트를 정상적으로 이용 할 수 없는 실정이다.

구형 브라우저 사용자가 여전히 많다 보니 ActiveX 기반 공인인증서를 웹표준으로 대체하는 작업도 이중 방식으로 진행되고 있다. KISA는 올해를 웹표준 환경 조성 원년으로 삼기로 했고 ActiveX폐지, IE의존성 완화, 웹표준 도입 확산등에 총 40억언의 예산을 지원할 계획이라고 발표했다.

점차적으로 심형 브라우저의 국내 사용자 점유율이 증가하고 있고 대기업, 금융과 같은 웹기술에 보수적인 산업계가 HTML쪽으로 이동하고 있다. 정리해 보자면 OS와 기기에 종속적이던 시장은 브라우저와 HTML5라는 새로운 파괴적 기술 앞에 큰 변화를 앞두고 있다.

참고

http://www.dt.co.kr/contents.html?article_no=2014051902012351742002

http://www.atelierth.net/bbs_view.php?term_id=6673&id=32304

http://www.zdnet.co.kr/column/column_view.asp?artice_id=20130424095928

http://news.naver.com/main/read.nhn?mode=LSD&mid=sec&sid1=105&oid=015&aid=0003263931

http://www.zdnet.co.kr/news/news_view.asp?artice_id=20150512091354