1장 웹 개요와 실습 환경 구축

1. 인터넷과 웹 소개

월드 와이드 웹은 인터넷에 연결된 커뮤터로 사람드리 정보를 공유할 수 있는 공간을 의미합니다.

인터넷은 전세계를 연결하는 국제 정보 통신망이고, 웹은 인터넷에서 작동하는 서비스이므로 이 둘을 구분해주세요.

월드 와이드 웹은 1991년에 처음 등장했습니다.

오래되지 않은 기술이지만 빠르게 발전했고 관련된 이야기도 많습니다. 이 절에서는 월드 와이드 웹의역사를 알아봅니다.

웹의 역사를 아주 간략히 설명하므로 생략된 부분이 많습니다. 재미있다면 해당 내용을 더 찾아봅니다.

NOTE

 국내 인터넷은 1982년에 구미 한국전자기술연구소(현 ETRI)와 서울대학교 컴퓨터공학과를 연결하면서 시작되었는데 어느덧 30년이 넘었습니다.

1.1 인터넷의 시작

인터넷이 미국 국방성에서 시작되었다는 이야기는 어디에선가 한번쯤은 들어 보았을 겁니다.

소련에서 최초로 인공위성 발사에 성공하자 위협을 느낀 미국은 신기술을 연구하는 ARPA (Advanced Research Projects Agency) 부서를 창설합니다. 그리고 이 ARPA에서 현재 웹의 모태가 되는 ARPANET을 1969년에 개발합니다.

ARPANET은 핵과 같은 공격에 대비해 전체 통신 시스템에서 데이터를 안전하게 보관 및 전송할 수 있는 시스템으로, 초기에는 미국 국방성과 대학교를 연결합니다. 시간이 지나면서 ARPANET은 민간 연구용이 아닌 작은 네트워크와 군사용인 MILNET으로 나뉩니다. 여기서 민간 연구용이 현재 전 세계의 모든 컴퓨터를 연결하는 인터넷으로 발전한 것입니다.

소련의 인공위성 발사부터 핵 공격까지 갑자기 뜬금없는 이야기를 해서 황당할 수도 있겠지만 인터넷은 이렇게 시작되었습니다.

그리고 더 뜬금없게도 우리가 웹 브라우저로 보는 웹은 유럽 공동원자핵연구소(CERN)의 팀 버너스 리(TIM Berners-Lee)가 개발했습니다.

1989년 팀 버너스 리는 하이퍼링크라는 특수한 기능을 사용해 인터넷 공간에서 문서와 문서 사이를 이동할 수 있는 새로운 개념을 제안합니다. 그리고 이 아이디어를 바탕으로 월드 와이드 웹을 개발해 1991년에 배포합니다. 발표와 동시에 월드 와이드 웹의 사용 인구가 폭발적으로 급증하자 1993년 팀 버너스 리는 소스 코드를 모든 사람이 사용할 수 있도록 공개합니다.

W3C (World Wide Web)

월드 와이드 웹 컨소시엄

1994년 팀 버너스 리는 W3C(World Wide Web Consrtium)를 창설합니다. W3C는 HTML 표준을 비롯한 웹 표준안을 제작하거나 제안하는 일을 하는 국제적인 웹 표준화 단체입니다. 지금까지 발표한 HTML 표준과 그 시기를 정의하면 다음과 같습니다. 소수점 아래의 버전은 표기하지 않았습니다.

HTML 1 : 1991년 10월

HTML 2 : 1995년 11월

HTML 3 : 1997년 1월

HTML 4 : 1997년 12월

HTML 5 : 2014년 10월

W3C HTML 표준을 제정하지만 강제하지는 않습니다.

이 때문에 웹 브라우저 전쟁이 시작됩니다.

1.2 1차 웹 브라우저 전쟁

미국 일리노이공과대학교의 연구 기관인 NCSA는 1993년에 그래픽 사용자 인터페이스 웹 브라우저 모자이크를 최초로 발표합니다. 모자이크의 핵심 개발자인 마크 안데르센은 대학교를 졸업한 후 실리콘밸리로 가서 모자이크 커뮤니케이션을 세웁니다. 그리고 대학교에서 개발한 웹 브라우저를 본떠서 만든 모자이크를 발표합니다.

NCSA는 모자이크와 같은 명칭을 사용하는 것에 불만을 표시합니다. 이에 모자이크 커뮤니케이션은 넷스케이프 커뮤니케이션으로 이름을 바꾸고 웹 브라우저의 이름도 넷스케이프로 발표합니다.

NOTE 

 넷스케이프의 개발 코드 일므인 모질라(Mozilla)와 관련된 두 가지 설이 있습니다.

  하나는 Mosaic + Killer의 준ㅇ말이라는 설

  다른 하나는 Mosaic A+ GodZilla의 준말 이라는 설

 둘 다 NSCA의 모자이크 웹 브라우저를 파괴하겠다는 말입니다.

1994년에 넷스케이프는 정식 버전을 발표하고 배포를 시작합니다. 그리고 이 시기에 마이크로소프트는 인터넷 익스플로러를 발표합니다. 두 회사는 W3C의 표준을 무시하고 아주 많은 기능을 추가해 서로읭 웹 브라우저를 이기려고 합니다.

인터넷 익스플로러의 점유율이 넷스케이프를 넘지 못하자, 마이크로소프ㅌ츠는 인터넷 익스플로러를 윈도우 운영체제에 강제로 설치합니다. 또 애플과 계약을 맺어 5년간 매킨토시의 기본 웹브라우저를 인터넷 익스플로러로 설정합니다. 당시에 있던 대부분의 PC에 자사의 웹 브라우저를 강제로 설치한 것입니다. 이에 넷스케이프는 마이크로소프트에 소송을 거는데 법원에서는 판결을 계속 미룹니다.

넷스케이프는 극단의 조치로 웹브라우저의 소스 코드를 공개하고 모질라 재단을 세워 일반 개발자의 참여를 유도합니다.

1998년에 아메리카 온라인(AOL)은 넷스케이프 커뮤니케이션을 인수합니다.

이후 넷슼네이프의 기술개발은 하락의 길을 걷습니다. 결국 1998년에는 인터넷 익스플로러가 넷스케이프의 점유율을 넘어서고, 넷스케이프는 붕괴합니다. 

웹 브라우저 전쟁이 일어나는 동안 웹은 엄청난 속도로 발전했지만 웹 표준을 제정하는W3C는 발빠르게 대응하지 못했습니다.

이에 불만을 느낀 기업들은 플러그인을 만들기 시작합니다 .플러그인은 웹 브라우저와 연동되는 특정 프로그램을 사용자의 PC에 추가로 설치해 웹 브라우저의 기능을 확장하는 방법 입니다.

1996년부터 현재까지 어도비 플래시로 알려진 Future Splash Animator A(Future Media)를 비롯해 마이크로소프트의 액티브X와 같은 플러그인은 웹 공간을 점점 풍부하게 만들어 주었습니다. 우베 브라우저에서 동영상과 음악 감상은 물론 은행 업무도 처리할 수 있게 되었습니다.

액티브X는 C++을 사용해 개발하고, 플래시는 액션스크립트를 사용해 개발합니다. 웹 표준인 자바스크립트(JavaScript)보다 다양한 응용프로그램을 편리하게 제작할 수 있습니다.

NOTE

 자바스크립트가 현재의 위상을 찾디 한 것은 최근의 일입니다. 과거에는 수준이 낮은 프로그래밍 언어로 취급했습니다. 2008년 크롬의 등장으로 웹 페이지 로딩과 자바스크립트의 속도가 빨라지면서 개발자가 기하급수적으로 증가해 현재의 위상을 갖게 되었습니다.

이제 2000년 초반의 상황입니다. 액티브X를 기반으로 기업의 웹 응용 프로그램을 제작하고 플래시를 기반으로 졸라맨, 우비소년, 마시마로 등 애니메이션을 만드릭 시작합니다.

플래시와 액티브X는 점점 발전해 갑니다. 플래시는 액션스크립트에 객체지향 개념을 도입해 응용 프로그램을 쉽게 개발할 수 있는 형태로 개선됩니다. 그리고 이에 힘입어 2004년에는 웹 응용 프로그램을 개발할 수 있는 플렉스로 발전 헙니다.

인터넷은 점점 사용자와 사용자가 뭉쳐 새로운 콘텐츠를 개발할 수 있는 공간으로 확장됩니다.

이렇게 서로 다른 사용자가 함께 새로운 콘텐츠를 창조할 수 있는 시대를 웹 2.0이라고 합니다.

유튜브는 동영상을 올릴 수 있는 단순한 공간이었지만 웹 2.0 시대에서는 사용자와 사용자가 뭉쳐 거대한 동영상 생태계를 형성했습니다.

또 단순히 자신이 아는 정보를 올리는 공간이었던 위키피디아도 사용자와 사용자가 뭉쳐 하나의 거대한 사전을 창조 했습니다.

1.3 2차 웹 브라우저 전쟁

세계적으로 점유율이 높은 인터넷 익스플로러가 사실상 표준 웹 브라우저가 됩니다. 그런데 대부분의 우베사이트에 액티브X같은 플러그인이 들어가면서 웹 사이트는 점점 무거워집니다. 이를 막고자 2004년 W3C 회의에서 모질라 재단과 오페라 소프트웨어는 새로운 HTML 표준 제안서를 제출 합니다. 하지만 이 제안은 기존 웹이 지향하는 혁명과는 위배된다며 거절을 당합니다.

인터넷 익스플로러를 제외한 우베 브라우저 제공 기업(애플,모질라,오페라 소프트웨어)은 독자적으로 새로운 웹 표준 기관을 설립합니다. 그렇게 2004년 6월에 HTML5 표준을 제정하는 WHATWG(Web Hypertext Application Technology Working Group)를 설립합니다.

WHATWG는 새로운 웹 표준으로 Web Application 1.0 표준을 작성하고, W3C는 비슷한 시기에 XHTML 2.0 표준을 작성합니다. 하지만 XAHTML 2.0 표준은 기존 표준과 너무 동떨어진 내용이라 자연스럽게 개발자들은 이 표준을 사용하지 않습니다. 결국 2009년에 XHTML 2.0 표준은 폐기되고, W3C는 새로운 웹 표준으로 WHATWG의 Web Application 1.0 표준을 채택합니다.

W3C는 Web application 1.0 표준을 HTML5 표준으로 변경하고 WHAWTWG와 함께 HTML W/G를 결성해 HTML5 표준을 작성합니다. 2012년에 초안을 발표했고, 2014년에 정식 권고안을 발표했습니다.

이제 현재 상황을 살펴봅시다.

마이크로소프트와 W3C가 함께한 XHTML2.0  표준이 폐기되면서 인터넷 익스플로러의 기능 문제가 대두됩니다. 다른 웹 브라우저는 모두 최신 표준을 지원하는데 인터넷 익스플로러만 지원하지 못하는 역 현상이 발생한 것입니다. 한마디로 웹 브라우저 점유율을 뒤집을수 있는 기회가 생긴 것입니다. 이 때를 놓치지 않고자 모든 웹 브라우저가 빠른 속도로 업데이트되고 있습니다. 모질라는 2011년까지 3년마다 하던 버전 업데이트를 현재 약 2개월 단위로 하고, 구글 크롬은 버전 업데이트를 10주 단위로 합니다.

모든 웹 브라우저 회사가 다른 곳보다 기술적으로 앞서려고 빠른 속도로 업데이트를 합니다. 이외에도 다양한 방법으로 웹 브라우저를 마케팅 하고 있습니다.

국내는 인터넷 익스플로러가 압도적인 점유율을 보이므로 다른 웹 브라우저 회사들이 마케팅을 하지 않습니다. 그렇지만 이웃 나라 일본만 해도 유명한 캐릭터는 물론 다양한 광고를 제작해 유튜브에 올립니다. 크롬 웹 스토어나 모질라 마켓플레이스 등을 사용해 자사 웹 브라우저에서만 동작하는 응용 프로그램을 만들도록 장려합니다.

여기까지는 그래도 매너 있는 행동입니다. 웹 브라우저 점유율을 높이려고 아예 다른 웹 브라우저가 서비스에 접근하지 못하도록 합니다.

2차 웹 브라우저 전쟁이 언제 끝날지, 어떤 웹 브라우저가 가장 높은 점유율을 유지할지는 알 수 없습니다. 하지만 이 시기가 웹 브라우저 개발 회사는 물론이고 웹 개발자에게도 좋은 기회를 제공한다는 것은 분명합니다.

NOTE

 웹 브라우저는 회사마다 다양한 방법으로 수익을 창출합니다. 웹 브라우저 내부의 검색 서비스 로열티가 가장 기본적인 수익 모델입니다. 예를 들어 모질라 재단은 2010년에 1억 2110만 달러를 벌었는데 98%가 로열티 비용입니다. 오페라 소프트웨어는 게임기에 웹 브라우저를 장착해 이익을 내기도 했습니다.

지금까지 웹 역사를 간략하게 살펴보았습니다. 주요 흐름만 다루었기 때문에 생략한 내용의 많습니다.

각 주제와 관련된 재미있는 내용이 많은데 다른 웹브라우저에서 직접 찾아보세요.

2. 웹의 동작 원리

웹은 요청과 응답이라는 간단한 형태로 동작합니다. 치킨을 주문하는 과정으로 요청과 응답을 살펴보겠습니다. 우선 치킨집의 전화번호를 찾아 전화를 걸어 집주소와 메뉴를 말합니다.

" 여기는 서울특별시 강서구 내발신동 ------ 이고요, 양념 치킨 두 마리 배달해 주세요. "

양념 치킨 두마리를 주문 받은 치킨집 사장은 주문에 맞게 닭을 조리해 해당 주소로 배달합니다 이 과정에서 요청과 응답을 나타내자면 다음과 같습니다.

사람 -> 스마트폰 (요청) -> 치킨집 -> 치킨 배달중(응답) -> 사람

이제 컴퓨터 세계로 살펴보겠습니다. 웹 서버는 치킨집과 같습니다. 여러 웹 브라우저에 원하는 웹 서버 주소(웹 페이지 URL)를 입력하면 웹 브라우저에서는 해당 웹 페이지를 제공합니다. 웹 브라우저에 "http://www.naver.com'을 입력해 네이버에 웹 페이지를 주문해 봅시다.

웹 서버는 네이버라는 요청을 받아들이고 그림처럼 웹 페이지를 제작해 배달합니다. 네이버 웹페이지를 응답받은 웹 브라우저는 화면에 해당 웹페이지를 띄웁니다. 

요청과 응답을 이해했다면 그 과정을 좀 더 자세히 살펴봅시다. 컴퓨터 세계에서는 요청하는 쪽을 클라이언트(사용자)라고 하며, 응답하는 쪽을 서버(제공자)라고 합니다. 웹은 클라이언트가 서버에 HTML 페이지나 파일을 요청하면 섭가 해당 요청에 응답해 요청한 HTML 페이지나 파일을 클라이언트에 제공하는 자옷입니다.

보통 클라이언트와 서버는 그림처럼 표현합니다. 네이버나 다음처럼 웹 서비스를 제공하는 기업을 서버, 해당 서버에서 웹 페이지를 제공받는 일반  사용자를 클라이언트라고 보면 됩니다.

이 때 서버에서 실행되는 프로그램을 서버 프로그램이라고 하며, 클라이언트에서 실행되는 프로그램을 클라이언트 프로그램이라고 합니다.

서버 프로그램은 클라이언트의 요청에 따라 적절한 파일과 데이터를 제공합니다. 일반적으로 서버 프로그램은 자바, C#, 루비, 파이썬, 자바스크립트 같은 프로그래밍 언어로 개발합니다. 기본 웹 프레임워크(ASP, NET, JSP, PHP 등)부터 MVC 프레임워크(ASP,NET,MVC,Spring,Ruby, on Rails 등), 비동기 프레임워크(Node,js Express, Jetty)까지 다양한 프레임워크로 개발합니다. 클라이언트 프로그램은 웹 브라우저에서 작동하는 프로그램을 의미합니다. 간단하게 서버에서 전달된 HTML을 생각하면 됩니다. 서버 프로그램과 달리 클라이언트 프로그램은 반드시 HTML, CSS, 자바스크립트로 개발해야 합니다.

클라이언트 프로그램은 HTML로 요소를 생성하고 CSS로 디자인해 자바스크립트로 프로그램요소를 부여합니다. 다음은 구글 문서도구로 대표적인 클라이언트 프로그램 예입니다.

이렇게 복잡한 클라이언트 프로그램이 아니더라도 웹 브라우저에서 실행되는 우베 페이지라면 클라이언트 프로그램이라고 할 수 있습니다. 

3. 보조 웹 표준 기술 소개

현대 웹 페이지에 사용되는 표준 기술은 세 가지로 정리할 수 있습니다. 바로 HTML5표준, CSS3표준, ECMAScript5 표준입니다. ECMAScript 표준은 자바스크립트 표준의 공식 명칭입니다.

3.1 HTML5 소개

HTML5는 ㅋ는 의미와 작은 의미로 나누어 생각할 수 있습니다. 큰 의미의 HTMl5는 웹 표준 기술을 총칭하고, 작은 의미의 HTML5는 웹 문서의 문법을 의미합니다. 대개 HTML5라고 하면 큰의미의 HTML5를 말합니다.

NOTE

 - HTML5를 마크업언어라고 합니다. 마크업(Markup)은 대상이 화면에 어떻게 보일지 나타내는 일련의 문자를 의미합니다. '마크업한다'는 표현은 HTML로 웹 페이지의 구조나 요소를 프로그래밍한다고 이해하면 됩니다.

3.2 CSS3 소개

CSS(Cascading style sheets)는 HTML 문서를 표현하는 방법을 기술하는 언어입니다. HTML 페이지의 스타일을 지정할 때 사용하는 언어라고 할 수 있습니다. CSS 표준은 1996년부터 웹 표준으로 채택되었으며, 2013년에 CSS3 버전을 발표했습니다.

스타일시트는 현대 웹 페이지에서 매우 중요한 역할을 수행합니다. 다음은 네이버 메인 페이지에 스타일시트를 적용하기 전과 후의 모습입니다. 단순한 웹 문서에 스타일시트를 적용해야 익숙한 네이버 메인페이지가 됩니다. 스타일 시트는 이 책의 5~6장에 걸쳐 차근차근 설명합니다.

3.3 자바스크립트

자바스크립트는 HTML 페이지에서 사용자 반응 등을 처리하는데 사용하는 프로그래밍 언어입니다. 표준 명칭은 ECMAScript5이지만 대개 자바스크립트로 칭합니다.

NOTE

- 자바와 자바스크립트를 혼동하는 사람이 굉장히 많습니다. 두 프로그래밍 언어는 마케팅 때문에 자바라는 동일한 이름을 사용해 출시했을 뿐입니다. 서로 관계가 없으며, 이름은 비슷하지만 전혀 관계가 없는 코끼리와 바다코끼리를 생각하면 쉽게 이해할 수 있습니다.

자바스크립트는 1994년 넷스케이프의 브랜든 아이크(Brendan Eich)가 모카라는 이름으로 개발한 프로그래밍 언어입니다. 모카는 이후 라이브스크립트라는 이름으로 발전했씁니다. 자바스크립트는 1996년 3월 넷스케이프 2.0 버전부터 실제로 웹 브라우저에 탑재되었습니다. 마이크로소프트도 이를 보고 1996년 8월부터 JScript를 개발해 인터넷 익스플로러에 탑재했습니다.

넷스케이프와 마이크로소프트 두 회사의 프로그래밍 언어가 조금씩 다르게 발전하자 넷스케이프는 유럽컴컴퓨터제조협회(ECMA, European Computer MAnufacturer'sd Association)에 자바스크립트 기술 규격을 제출합니다. 1997년 6월에 ECMA-262라는 자바슼느립트 기술 규격이 정식 채택되고 ECMAScript 표준으로 칭합니다. 이후 모든 웹 브라우저 제조사는 ECMAScript 표준에 따라 프로그래밍 언어를 개발합니다.

ECMAScript 표준은 문서에 불과할뿐 실제 구현물이 아닙니다. 많은 제조사가 ECMAScript 표준으로 프로그래밍 언어를 구현해 사용하는데, 정리하면 다음과 같습니다. 그중에서 액션 슼느립트는 ECMAScript 표준을 기반으로 갭라했지만, 현재는 다양한 기능을 추가해 표준에서 많이 벗어났습니다.

모질라 파이어폭스 - JavaScript

구글 크롬 - JavaScript

마이크로소프트 인터넷 익스플로러 - JScript

오페라 소프트웨어 오페라 - ECMAScript

애플 사파리 - JavaScript

마이크로소프트 닷넷 프레임워크 - JScript.NET

어도비 플래시 - Action Script

어도비 아크로벳 - JavaScript

이러한 프로그래밍 언어를 사용하면 움직이는 웹 페이지를 만들 수 있고, 사용자의 반응도 처리할 수 있습니다. 자바스크립트는 클라이언트 웹 개발을 하려고 만들었지만, 현대에는 서버는 물론 로봇 개발에도 사용됩니다.

4. HTML5 주요 기능 소개

컴퓨터에서는 어떤 프로그래매을 가장 많이 사용하나요? 웹 브라우저를 가장 많이 사용하고 그 다음으로 음악이나 동영상 재생 프로그램, 워드 프로세서나 게임을 사용할 것입니다. 웹 브라우저에서 음아고가 동영상 쟂생은 물론 온라인 게임까지 된다면 어떤 일이 벌어질까요? 아마 다른 프로그램은 필요 없을 것입니다. HTML5는 이러한 기능을 모두 추가했습니다. HTML5에 추가된 기능을 간단하게 살펴봅시다.

4.1 멀티미디어 기능

기존 웹 페이지는 스스로 동영상이나 음악을 재생할 수 없었습니다.

"저는 유튜브에서 동영상을 봤는데요?"

잘 살펴보면 HTML 웹 표준에 따라서 동영상을 재생하지 않고 플래시라는 플러그인을 사용하고 있을 것입니다. 하지만 HTML5는 플러그인 도움없이도 스스로 음악과 동영상을 재생할 수 있습니다.

스마트폰은 대부분 HTMl5를 지원하므로 플래시가 없더라도 동영상을 재생할 수 있습니다. 반면 데스크톱에는 HTML5 멀티미디어를 지원하지 않는 인터넷 익스플로러 8이하의 웹 브라우저가 많음로 플래시를 사용합니다. 하지만 유튜브는 이미 HTML5 멀티미디어 기능을 제공합니다.

4.2  그래픽 기능

HTML5는 하드웨어의 가속을 받아 2차원 그래픽과 3차원 그래픽을 모두 구현할 수 있습니다. HTML5는 다음 두 가지 방법으로 2차원 그래픽을 구현합니다.

1. HTML 태그를 사용해 2차원 벡터 그래픽 구현

2. 자바스크립트 캔버스를 사용해 2차원 래스터 그래픽 구현

또 다음 두 가지 방법으로 3차원 그래픽도 구현할 수 있습니다.

1. CSS3를 사용해 3차원 그래픽 구현

2. 자바스크립트 WebGL을 사용해 3차원 그래픽 구현

NOTE

- 캔버스는 HTML5에서 추가된 요소<<canvas></canvas>>로 자바스크립트를 사용해 2D 그래픽과 3D 그래픽을 구현할 때 사용합니다. WebGL도 캔버스를 사용하는 예입니다.

CSS3를 사용한 구현 예 : CSS3D Clouds(http://www.clicktorelease.com/code/css3dclouds/)

WebGL을 사용한 구현 예 : From Dust(UbiSoft with WebGL on Chrome)

4.3 통신

HTML5는 서버와 소케 ㅅ통신을 할 수 있습니다. 지금까지 HTML 페이지는 서버에 데이터를 요청해서 받아만 오는 단방향 방식으로 구현되었습니다. 하지만 HTML5에서는 서버와 실시간으로 쌍방향 통신을 수행할 수 있어 웹에서 실시간 채팅이나 실시간 온라인 게임을 즐길 수 있습니다. 

TIP : HTML5 이하에서도 서버와 쌍방향 통신을 하는 것처럼 보이게 하는 기술이 있었습니다. 이를 폴링과 롱 폴링이라고 하는데 서버에 과부하가 걸리는 기술 입니다.

4.4 장치 접근

HTML5는 장치에 접근해 정보와 기능을 사용할 수 있습니다. 예를 들어 스마트폰의 배터리 잔량과 같은 정보를 가져오거나 스마트폰의 GPS를 사용할 수 있고, 진동 벨을 울리기도 합니다.

미국 통신사 AT&T에서 제공하는 HTML5 SDK 입니다. AT&T HTML5 SDK를 사용하면 스마트폰의 내장 기능을 이용하는 응용 프로그램을 만들 수 있습니다.

현재는 별도의 SDK로 내장 기능을 사용합니다. 하지만 장치 접근 표준을 완벽하게 제정한다면 일반 웹 브라우저에서도 장치에 접근해 내장 기능을 사용할 수 있을 것입니다.

TIP : SDK(Software Development kit)는 응용 프로그램을 만들 수 있는 개발 도구 모음 입니다. 디버깅 프로그램을 비롯해 개발에 필요한 유틸리티 등이 통합 개발 환영(IDE) 형태로 제공됩니다.

4.5 오프라인 및 저장소

HTML5는 인터넷이 연결되지 않은 상태에서도 응용 프로그램을 동작시키리 수 있습니다. 인터넷이 연결되지 않아도 웹 페이지를 활용할 수 있다는 것은 HTML5를 응용 프로그램의 중심으로 사용하는 운영체제의 등장을 의미 합니다.

구글 크롬에서 제공하는 오프라인 Gmail은 인터넷이 연결되지 않아도 응용프로그램을 실행할 수 있으며, 현재까지 받은 메일을 저장소에 별도로 저장해 읽을 수도 있습니다. 이외에도 구글 크롬 스토어에는 인터넷에 연결하지 않고도 즐길 수 있는 게임이 굉장히 많습니다. HTML5로 제작한 웹 페이지나 응용 프로그램은 웹뿐만 아니라 웹을 벗어난 곳에서도 동작할 수 있습니다.

4.6 시멘틱

HTMl5 표준에서도는 시맨틱(Semantic) 웹을 구현하는 데 필요한 시맨틱 태그를 새로 추가했습니다. 시맨틱 웹은 검색 엔진 같은 프로그램이 정보를 분석하고 , 자료를 검색 및 처리해서 제공하는 지능형 웹을 의미합니다. 이 내용은 HTML 태그를 모르면 다룰 수 없으므로 2장에서 자세히 설명합니다.

4.7 CSS3 스타일시트

HTML5는 CSS3 스타일시트를 완벽하게 지원합니다. CSS3 스타일 시트를 사용하면 3차원 변환은 물론 애니메이션 효과를 적용할 수 있습니다. 이 내용에서 전반적으로 다룰 내용이므로 추가 설명을 생략합니다.

NOTE

 사실 CSS는 Cascading Style Sheets의 약어이므로 CSS3 스타일시트라고 하는 것은 스타일시트를 두번 말하는 이중 표현 입니다. 하지만 일반적으로 사용하는 용어라서 이 내용에서도 CSS3 스타일시트라고 표현 합니다.

4.8 웹의 성능 극대화 및 통합

HTML5의 추가 기능으로 기존에 이용하던 웹의 성능을 극대화할 수 있습니다. 예를 들어 웹 워커를 이용하면 사용자 화면을 멈추지 않으면서 연산도 처리할 수 있습니다.

HTML5는 이렇게 다양한 기능을 추가하면서 일반데스크톱 응용 프로그램을 만들 수 있을 정도로 발전했습니다. 현재는 HTML5 표준을 적용한 웹 브라우저를 사용해 간단한 워드 작업이나 게임을 즐길 수 있습니다.

스마트폰 시대로 들어서면서 다양한 운영체제가 등장했습니다. 이러한 현상은 스마트폰뿐만 아니라 일반 데스크톱, 태블릿PC와 TV로 이엊딥니다. 소니 에릭스의 CEO 한스 베스트버그는 2020년안에 500억개의 장치가 웹과 연결될 것이라고 예측했습니다.

500억개 장치의 운영체제가 모두 다르다면 각 운영체제에 맞는 프로그램을 개발해야 합니다. 하지만 운영체제에 종속된 프로그램이 아니라 웹에서 작동하는 프로그램이라면 이야기가 달라집니다. 웹은 주인도 국적도 없고 모두에게 공개된 기술이므로 모든 장치에서 사용할 수 있습니다.

" 웹페이지 따위가 응용 프로그램을 만들어? "

과거에는 웹 표준이 응용 프로그램을 개발할 수 있는 수준이 아니었습니다. 하지만 HTMl5부터는 웹 페이지 자체가 하나의 응용 프로그램이 됩니다.

다이닝 코드와 페이스북의 모바일 페이지는 웹피이지이지만 마치 일반 응용프로그램처럼 작동합니다.

그런데 현재 모든 스마트폰에서 HTML5 표준을 완전하게 사용할수 있는 것은 아닙니다.

이에 스마트폰의 기본 프로그래밍 언어와 HTML5를 함께 사용해 응용 프로그램을 만드는 방법이 등장했습니다.

이를 하이브리드 응용 프로그램이라고 합니다. 하이브리드 응용 프로그램은 HTML5를 사용해 대부분의 기능을 구현하고, HTML5로 불가능한 부분은 자바나 ObjectiveC 같은 스마트폰의 기본 프로그래밍 언어로 개발합니다. 이는 응용 프로그램과 모바일 사이트의 장점을 합쳐 놓은 것입니다. HTML5 코드 부분은 모든 스마트폰에서 공유할 수 있으므로 한번 만들면 모든 운영체제에서 재사용할 수 있습니다.

HTMLl5를 사용해 만든 하이브리드 응용 프로그램입니다. 이처럼 스마트폰에서 다운로드하는 일반 응용 프로그램도 HTML5를 사용해 개발할 수 있습니다.

구글 크롬북과 마이크로소프트 윈도우 8의 기본 내장 응용 프로그램은 모두 HTML5를 사용해 개발합니다. 윈도우 8은 응용 프로그램 개발 언어를 HTML5, C#, Basic.NET, C++ 중에서 선택할 수 있습니다.

HTML5는 웹 페이지에만 중속되지 않고 일반 운영체제로도 퍼지고 있습니다. 리눅스 재단과, 인텔, 삼성이 함께 개발하는 타이젠 운영체제와 같은 HTML5 기반 운영체제가 더 출시된다면 스마트 TV 응용 프로그램도 HTMl5로 만들 수 있을 것입니다.