HTML 언어의 역사
HTML 언어는 물리학자인 팀 버너스리가
1990년에 정의한 것으로,
표준화된 태그로 웹 페이지를 작성하는
언어이다.
그러므로 웹 페이지를 HTML 페이지
혹은 HTML 문서라고도 부른다.
그 뒤 HTML 언어는 태그의 숫자를
늘리면서 발전했다.
HTML5의 출현 배경
HTML5의 출현 배경을 이해함으로써
웹 기술 발전 과정과 문제점을 이해하고
미래의 웹 기술 방향을 예측할 수 있다.
비표준 기술의 혼재, 웹 브라우저의 비호환성
1990년대 초기 HTML의 등장과 함께,
웹 브라우저의 전쟁이 시작되었다.
넷스케이프사의 '넷스케이프 내비게이터'와
MS사의 IE 사이의 시장 점유를 위한 경쟁이
치열하게 전개되었다.
이 전쟁은 IE의 승리로 끝나긴 했지만,
이 과정에서 W3C의 규정을 무시하고,
오디오, 비디오 등 멀티미디어를
웹 페이지에 삽입하기 위해
플러그인*, 엑티브엑스** 등의 비표준
기술을 마구잡이로 도입하고,
* plugin
** Active-X
웹 브라우저마다 상호 다른 JS 기능을
추가하여
웹 페이지의 웹 브라우저 호환성은
무너지게 되었다.
그 후 지금까지 Adobe Flash, MS
silverlight, Sun JavaFX 플러그인 등
다양한 비표준 기술이 웹 브라우저에
혼재되어 사용되고 있다.
2000년대 이후 다양한 웹 브라우저가
속속 등장하여
웹 페이지들은 더욱 호환성을 잃게
되었다.
웹 개발자들은 브라우저 종류별로
혹은 브라우저의 버전마다
다른 코드를 작성하는 등 어려움을
겪고 있다.
인터넷 기기의 다양화
모바일과 통신 기술의 발전으로 인터넷에
접근하는 기기가 다변화 되어
PC와 데스크톱에 의해 독점되던 인터넷이
이제는 이동성을 장점으로 하는
모바일 장치와 태블릿이 지배할 정도로
변화되었다.
하지만 PC나 데스크탑용으로 개발된
플러그인을
모바일이나 태블릿에서 사용할 수
없으므로,
PC나 데스크톱의 웹 브라우저에서
보이도록 작성된 기존의 웹 페이지들이
모바일 장치나 태블릿에서 제대로
출력되지 않는 상황에 놓여있다.
그래서 많은 웹 사이트들은 모바일 혹은
태블릿용 웹 페이지를 따로 만들고 있다.
새로운 범용 웹 표준의 필요성
엑티브엑스나 플러그인, 플래시 등의
비표준 기술에 의존하는 PC위주의
기존 웹 방식으로는 폭발적으로 시장
지배력을 넓혀가고 있는
스마트폰과 태블릿 장치 등의 모바일
기기를 수용할 수 없기 때문에,
프로그램 다운로드나 설치가 필요
없이 모바일과 PC에서
사용할 수 있도록 하는 범용 웹 표준을
개발할 필요성이 강력히 대두되었다.
HTML% 표준과 의의
W3C와 하이퍼텍스트 워킹 그룹*은
공동으로 HTML5의 표준을 제정하였다.
* WHAT WG, Web Hypertext Application Technology Working Group
웹 페이지를 구조와 내용(structure),
모양(Presentation), 행동(Behavior)을
명확히 분리하여 개발할 수 있도록,
HTML 태그에서 문서의 모양과 관계된
태그나 속성을 폐기하였다.
또한 문서 구성을 명확히 하는 태그를
도입하여
웹 문서 구성의 편의성, 명확성을
확보하고
외부 플러그인 없이 그래픽, 오디오,
비디오 등의 미디어를 사용하고
오류 처리가 수월하며 자바스크립트
작성이 쉬우며
문서의 개념을 넘어 웹 애플리케이션을
작성할 수 있는 기능도 포함하였다.
그리하여 PC, 모바일 등을 막론하고
어떤 인터넷 장치에든 사용할 수 있는
웹 표준을 만드는 것을 목적으로 한
HTML5의 표준을 제정하였다.
그러므로 HTML5는 플랫폼이나 장치에
대한 의존성이 없다.
현재 안드로이드, iOS 등 대부분 모바일
장치의 앱*은
* 네이티브 애플리케이션(native application)
각 플랫폼 전용 개발 도구를 이용하기
때문에 개발이 어렵고 상호 호환성도 없다.
즉, Android 앱 개발과 iOS 앱 개발은 각각의 전용 개발 도구(언어 등)로 개발할 수 있다.
예를 들면, Android는 Java 언어를 사용하여 개발할 수 있고 iOS는 swift 언어를 사용하여 개발할 수 있다.
HTML5로 개발된 웹 애플리케이션은
HTML5 웹 브라우저만 있으면
PC뿐 아니라 어떤 모바일 플랫폼에서도
실행이 가능하다.
심지어 웨어러블 장치에도 쉽게
적용할 수 있다.
즉, HTML5로 만든 웹 페이지가 HTML5
브자우저에서 실행되면
텍스트 뿐만 아니라, 동영상, 게임,
애니메이션 등
웹 애플리케이션을 실행하는데
플러그인이 필요하지 않으며,
PC나 데스크톱 뿐만 아니라 태블릿,
모바일 등
기기의 관계 없이 실행이 가능함을
설명한 것이다.
HTML5의 기능
HTML5의 전체 기능은 크게 2부분으로
나눌 수 있다.
- 웹 문서 작성을 위한 HTML 태그 셋
- 웹 애플리케이션 작성을 위한 API
HTML5는 이전 HTML 태그를
계승하였지만,
문서의 모양을 표현하는 HTML 태그와
속성들은 과감히 청산하였다.
그리고 문서의 구조를 명확하게 표현하는
시맨틱 태그*를 추가하였다.
* 문서의 구조와 의미를 브라우저와 개발자 모두에게 명확하게 설명하는 것, 3장 참조
또 다른 것으로, HTML5의 출현은
웹 문서 시대에서
웹 애플리케이션의 시대로의 변화를
뜻한다.
그것은 기존 HTML이 웹 문서를 만들기
위한 언어 역할밖에 할 수 없었지만,
HTML5는 나아가 웹 브라우저상에서
플러그인의 도움 없이
웹 애플리케이션을 만들 수 있는
언어이면서
플랫폼을 갖추었다는 뜻이다.
이를 위해, HTML5 웹 브라우저는
웹 애플리케이션을 개발할 수 있는
자바스크립트 API*를 표준화하였다.
* Javascript Application Prgramming Interface, 간단히 API라 칭하겠다.
자바스크립트 API는
HTML5 표준을 갖춘 어떤 웹
브라우저에서도 지원되므로,
웹 개발자들은 API를 이용하여
자바스크립트 프로그램을
작성하기만 하면 된다.
HTML5의 세부 기능을 간단히 정리해보자.
- 웹 폼(Web Form)
사용자로부터 입력을 받기 위한 다양한 HTML 태그와 속성을 제공한다(3장). - 오디오, 비디오(Audio, Video)
오디오나 비디오를 재생하는 HTML 태그를 지원하며, 별도의 플러그인 설치 없이 재생이 가능하다(2장). 또한 자바 스크립트 코드를 이용하여 오디오, 비디오의 재생, 중지 등을 제어할 수 있다(13장). 세계적인 비디오 스트리밍 기업인 넷플릭스(Netflix)는 이미 HTML5로 비디오 스트리밍 서비스를 제공하고 있다. - 캔버스(Canvas)
Canvas는 <canvas> 태그와 자바스크립트를 이용하여 웹 브라우저상에서 동적으로 2, 3차원 그래픽을 그릴 수 있는 API이다. 이 기능을 이용하면 차트, 애니메이션, 게임 등 GUI 기반의 웹 애플리케이션을 만들 수 있다(11장). - SVG(Scalable Vector Graphics)
XML로 표현하는 2차원 벡터로 그래픽을 그리는 API이다. - 웹 스토리지(Web Storage)
웹 스토리지는 웹 브라우저가 실행되는 로컬 컴퓨터에 데이터를 저장하는 API이다. 이 기능으로 쇼핑몰, 게임 등에서 발생하는 데이터를 사용자 컴퓨터에 저장하여 웹의 성능을 높이거나 웹 서버와 연결되지 않은 상황(offline)에서도 웹 애플리케이션을 실행할 수 있다(12장). - 웹 SQL 데이터베이스(Web SQL Database)
웹 브라우저가 실행되는 로컬 컴퓨터에 DB를 두고 표준 SQL로 활용할 수 있는 API이다. - 인덱스 데이터베이스 API(Indexed Database API)
웹 브라우저가 실행되는 로컬 컴퓨터에 대용량의 데이터를 저장하고, 인덱스를 이용하여 검색하는 API이다. 이 기능으로 데이터를 다루는 광범위한 웹 애플리케이션을 구현할 수 있다. - 파일 입출력(File I/O)
로컬 컴퓨터의 파일을 읽고 쓸 수 있는 API이다. - 위치 정보 API(Geolocation API)
구글 맵이나 지도 앱을 이용하지 않고, 웹 브라우저 사용자의 위치를 알아내거나 사용자의 위치를 계속 추적하여 변경되는 위치를 알려주는 API이다(13장). - 웹 워커(Web Worker)
백그라운드 작업을 만들 수 있는 API이다. 시간이 오래 걸리는 작업을 백그라운드 작업(자바스크립트 코드)으로 만들어 웹 브라우저의 사용자 인터페이스가 느려지지 않도록 할 수 있다(13장). - 웹 소켓(Web Socket)
웹 브라우저에서 실행되는 웹 애플리케이션이 웹 서버에서 실행되는 응용프로그램과 직접 통신을 할 수 있도록 지원하는 API이다. - 오프라인 웹 애플리케이션(Offline Web Application)
인터넷에 연결되지 않는 상황에서도 웹 애플리케이션이 정상적으로 실행될 수 있도록 지원하는 API로 애플리케이션 캐시와 데이터 캐시로 구성된다.
참고 및 출처
 |
|