본문영역

애플 WWDC10 세션 감상 - HTML5 웹 어플리케이션의 가능성

얼마 전, 애플의 WWDC 2010의 모든 세션의 영상과 발표자료가 개발자들에게 공개되었다. 애플 개발자로 등록된 사람들은 아이튠으로 세션 영상을 다운 받을 수 있고, 다운 받은 영상은 iTune U 카테고리에 추가된다. WWDC10은 총 6개의 세션으로 구성된다.

Apple WWDC 2010 Keynote Address (1)
Core OS (24)
Developer Tools (36)
Application Frameworks (81)
Graphics and Media (52)
Internet and Web (26)

괄호 안의 숫자는 세션에 포함된 트랙의 수를 나타낸다. 각각의 트랙은 대체로 1시간 정도의 영상과 PDF 발표자료로 구성된다.

최근 인터넷 환경에 관심이 많아진 나는 Internet and Web 세션을 자세히 살펴보고 있다. 이 세션을 통해 HTML5를 구성하는 각각의 세부 기술들과 다양한 응용 사례를 배울 수 있는데 특히 웹 어플리케이션 개발에 초점을 맞추고 있다. 웹 어플리케이션 개발의 핵심이 되는 기술은 CSS3와 자바 스크립트, Offline Storage 기술이다.

CSS3는 CSS(Cascading Style Sheet)의 다음 버전이다. CSS3의 특징으로는 강력한 셀렉터와 Transition/Transform을 들 수 있다. 셀렉터는 HTML 문서 내에서 특정 엘리먼트를 지정하는 막강한 방법을 제공한다. 기존의 방법이 대부분 id나 class 기반으로 엘리먼트를 지정하는 반면 CSS3는 '어떤 id를 갖는 엘리먼트의 자식 노드 중 두 번째로 나타나는 img 태그'이런 식으로도 지정이 가능하다.

HTML5가 나오기 전까지는 웹 페이지에 애니메이션 효과를 주기 위해 자바스크립트를 사용했다. 그러나 애니메이션을 위한 자바스크립트가 동작하는 동안 다른 스크립트를 수행할 수 없어서 반응 속도가 현저히 떨어지고, 하드웨어 가속을 지원하지 않아서 매끄럽지 못했다. 그러나 CSS3의 Transition/Transform은 자바스크립트 실행과 별개로 동작하기 때문에 웹 페이지의 반응 속도를 크게 개선시킨다. 뿐만 아니라 애니메이션 효과는 브라우저 구현에 따라 하드웨어 가속을 활용하므로 매우 부드럽고 아름답게 동작한다. CSS3와 자바스크립트의 조합은 충분히 플래시를 위협할만큼 매력적이다.

이와 함께 HTML5 Offline Storage 기술은 로컬 환경에 정보를 저장하고 관리할 수 있게 한다. 예를 들어 포스트잇 어플리케이션을 개발한다고 치자. 사용자가 포스트잇을 생성할 때마다 웹 서버로 정보를 전송하여 저장하고, 다시 접속했을 때 웹 서버로 질의하는 현재의 구조에서는 반드시 정보를 저장하기 위한 웹 서버 또는 데이터베이스가 필요하다. 이 때문에 인터넷 연결이 끊기면 웹 어플리케이션이 무용지물이 되기도 한다. Offline Storage 기술을 이용하면 정보를 로컬 환경에 저장하고 관리할 수 있기 때문에 정보를 저장하기 위한 웹 서버나 데이터베이스가 필요하지 않으며, 인터넷 연결이 끊기더라도 기능을 지속할 수 있다.

HTML5는 이름만으로는 HTML의 다음 버전이라 생각하기 쉽지만, 사실은 굉장히 다양한 기술을 포괄한다. HTML, CSS3, Canvas, Geolocation, Offline Storage 등이 그것이다. 이러한 기술의 변화는 단순히 정보를 전달하던 웹 페이지를 사용자와 상호작용하여 정보를 생산/가공하는 웹 어플리케이션으로 확장시킨다. 언젠가 누군가가 그랬지, 웹이 곧 플랫폼이라고...

앞으로 몇 번의 포스팅을 통해 웹 어플리케이션 개발 과정을 설명할 생각이다. 이제 막 배우는 단계이기 때문에 분명 굉장히 어설프겠지만, 만들어 가면서 배우고 이해한 내용을 적어 놓으면 많은 사람들에게 도움이 될 것 같다.