차세대 웹을 선도할 표준 기술 HTML 5 & CSS3 & AJAX

차세대 웹을 선도할 표준 기술 HTML 5 & CSS3 & AJAX

차세대 웹이라면 현재 Web 2.0이라 불리워지는 Rich Client(멀티미디어와 웹 기반 애플리케이션)과 집단 지능, 매쉬업, 소셜 네트워크, 사용자 참여 정보(UCC), 협업, 지능형 웹 등의 특징을 들 수 있습니다.

이러한 차세대 웹을 구현할 기술의 대표적인 기술이 HTML 5와 CSS3 그리고 AJAX라고 할 수 있겠습니다.

AJAX는 W3C와 같은 기관에서 표준으로 지정한 바가 없어서 표준 기술이라고 할 수는 없겠습니다만 업계에서 널리 쓰이고 인정하고 있으므로 현실적인 표준이라고 봐야하지 않을까 합니다.

본 글에서는 웹의 발전에 대한 간략한 소개와 위의 세가지 기술의 역할과 특징에 대해서 이야기 해 볼까 합니다.

두가지 기술은 기존의 비교적 정적이고 단순한 정보를 보는 매체 즉 웹 문서를 보는 HTML 기술과 javascript 기술을 웹 애플리케이션으로서의 기능, 더 나아가 Web 2.0의 포괄적인 요구사항을 효율적으로 지원하기 위해 개선된 최신 기술입니다.

차이점

HTML5는 텍스트, 이미지, 미디어 등의 정보의 구조를 정의합니다.

CSS3는 HTML의 정보를 화면에 표현하는 방법을 정의합니다.

AJAX는 HTML과 CSS의 정보를 조작합니다.

동일한 점

세 가지 기술은 웹을 문서를 보는 매체에서 애플리케이션을 구동하기 위한 기술로 발전 시키기 위한 새로운 표준입니다.

• 초창기 인터넷은 단순한 텍스트만을 전송하고 볼수가 있었습니다. 단지 전 세계가 하나의 네트웍을 통해서 정보를 공유할 수 있다는 것 만으로 대단한 혁신이었죠.
  
• HTML이라는 정보 표현 태그와 모자익이라는 최초의 브라우저가 나와서 글자의 크기와 색깔을 표현하고 이미지를 보여줌으로써 사람들은 또 한 번 경악을 했죠.
  
• CGI라는 기술은 수동적으로 문서를 보기만 하던  사용자가 게시판과 같은 프로그램을 통해 웹 서버에 정보를 보내서 저장하고 처리하게 함으로써 사용자 참여가 가능한 웹을 만들었습니다. CGI가 발전하여 요즘의 ASP, PHP, JSP, DotNet 과 같은 전문 서버측 프로그래밍 언어가 되었습니다.
  
•  자바스크립트는 웹 페이지의 데이터를 조작할 수 있게 하는 기술로 정적인 HTML 정보가 기능적으로 동작하도록 했습니다.
  
•  HTML이 문서의 구조와 스타일을 한번에 처리하다 보니 웹의 문서를 정교하게 다루는 것이 어려워 CSS라는 문서의 모양새만을 전문적으로 처리하는 표준 기술이 나와 자바스크립트와 CSS, HTML을 활용하는 DHTML 기술이 발전하여 정교하고 미려한 웹페이지가 동적으로 사용자와 소통하는 것이 가능해서 웹이 단순한 문서가 아니라 데이터를 처리하고 서비스를 제공하는 웹 애플리케이션이 급속도로 발전하게 됩니다.
  
• 웹 애플리케이션이 발전하고 Web 2.0 이 확대 됨에 따라 HTML 자체가 문서를 표현하는 기술이 아닌 애플리케이션의 구조를 처리하는 기능을 포함해야 될 필요성이 커져서 W3C는 문서의 정보만을 정의하는 태그에 멀티미디어와 데이터 처리, 통신 기능을 처리할 수 있는 HTML 5를 정의하고 있습니다.
  
• 단순히 다이나믹한 웹을 넘어서 협업과 매쉬업 등의 기능들을 구현하기 위해서 웹문서인 HTML을 처리하기 쉬우면서도 표준화된 프로그램 기술이 발전해야 되었는데 그것이 자바스크립트와 XML 그리고 비동기 통신(하나의 통신이 진행중일때 다른 통신을 추가로 수행 가능함) 기술입니다. 이러한 3가지 요구를 위해 만들어진 것이 AJAX(asynchronous JavaScript and XML)입니다.
  
• 이러한 추세에 발맞추어 미려하고 정교한 화면 구성을 위한 CSS3도 만들어 졌습니다.
  

그럼 차세대 웹을 위한 3가지 기술을 정리해 보겠습니다. 먼저 간단하게 세가지 기술의 역할을 보면

HTML 5은 정보의 구조를 정의하고 그것을 처리합니다.

CSS3는 정보를 미려하고 정교하게 화면에 표현합니다.

AJAX는 정보를 조작하고 다른 서비스들과 XML을 이용하여 통신합니다.

HTML 5

단순히 텍스트와 이미지 정도의 정보를 처리하던 기존 HTML에서 다양한 멀티미디어 정보 표현 : 벡터 이미지(SVG), 동영상(기존에는 ActiveX나 flash 등으로 처리하던 것을 브라우저가 직접 태그를 통해서 처리함)

웹 페이지내에서 다른 서버나 서비스와 통신이 가능하고 사용자 정보를 저장하여 웹 프로그램의 기능을 확대합니다.

CSS3

정교하고 미려한 화면 구성은 물론이고 다양한 효과와 애니메이션까지 지원하게됩니다.

AJAX

단순히 웹페이지 내의 정보만을 조작하던 Javascript나 DHTML 시대를 지나 서버와의 빈번한 통신과 정교한 HTML 구조 조작등이 가능하며 최근 AJAX의 초기 사용 범위를 넘어서 웹 애플리케이션에 필요한 대부분의 기능들을 AJAX로 처리합니다.

 

출처  http://kin.naver.com/open100/detail.nhn?d1id=1&dirId=10402&docId=1320620&qb=aHRtbDU=&enc=utf8&section=kin&rank=2&sort=0&spq=0&pid=f/vsfloi5T8ssuM/4r8sss--490743&sid=S-DASrey8EsAACO-EIk