RIA계열 Flash의 문제점과 HTML5의 캔버스 구현 사이트들!!

요즘 HTML5에 대한 관심이 이전에 비해서 많이 높아진 것 같습니다. 그 시발점은 스마트폰 경쟁을 촉발시켰다고 할 수 있는 애플의 iPhone에서 지원하지 않는 플래시, 또한 iPad에서도 지원하지 않을 플래시! 그 플래시 때문에 HTML5에 대한 관심이 높아졌는데요. 그 이유는 무엇일까요?

 

 

 

             VS.               

플래시는 브라우저 안에서 돌아가는 RIA(Rich Internet Applications)의 일종으로 기존의 HTML이 만족시켜주지 못하는 Rich Effects들을 대신 만족시켜줘 왔습니다. 과거에 Microsoft Explorer 6.0가 나온 이후 브라우저간의 경쟁이 없어지고 Explorer가 브라우저 시장을 독점해 버려 브라우저를 개선시키고 그 기반이 되는 HTML를 발전시키려는 노력이 없어졌습니다. 하지만 웹이 발전함에 따라 소비자들의 Rich Effects Needs는 갈 수록 커져만 갔고 그래서 그 사이의 간격을 매우기 위해 나온 대표적인 RIA가 Adoebe사의 Flash입니다.

하지만 이 Flash는 큰 문제들을 가지고 있는데요. HTML 코드를 해석하고 화면에 보여주는 기능만을 가진 브라우저에 그 이상의 효과들을 표현하는 것이기 때문에 따로 Flash를 설치해야만 브라우저 상에서 볼 수 있고 브라우저에서 플래시로 만들어진 파일(.swf)을 자동으로 열어서 실행을 시켜야만 우리의 화면상에서 볼 수 있습니다. 그렇다보니 독자적인 툴을 사용해 만들기는 쉬워도 그것들이 첨부가 되어 실행이 되었을 때 Adobe Flash의 프로그램을 실행시켜 처리과정을 또 겪어야 하며 더 느리고 더 많은 CPU 리소스도 차지하게 됩니다. 이 것이 CPU 속도가 빠르고, 인터넷환경도 다소 쾌적한 데스크톱 PC에서 하면 그나마 견딜만 한데 성능의 한계를 가지고 배터리까지 걱정해야 하는 모바일 기기라면 다소 문제가 될 수 있다는 거죠. 게다가 브라우저의 경쟁이 다시 시작되며 플래시가 보여줄 수 있는 대부분의 기능이 구현 가능한 HTML5가 표준화 되고 그 것들이 브라우저 상에서 다 돌아간다면 굳이 느리고 추가 프로그램을 설치해야 하고 배터리 소모까지 더 빠르게 하는 Flash와 Silverlight와 같은 계열의 RIA를 쓸 필요가 없어 지는 겁니다.

최근 추가적인 HTML5 효과들이 적용이 된 파이어폭스 3.5, 사파리4, 구글 크롬 4.0 등의 브라우저에서는 Flash와 같은 RIA없이 Rich Effects들을 보여줄 수 있는데요. 아래 HTML5를 통해 구현한 Rich Effects의 좋은 예가 있습니다. 만약 혹시 보여지지 않는다면 사용하고 있는 브라우저를 업그레이드 하시고 보면 될 것 같습니다.


HTML5 캠버스에 내 그림 그려보자! (※: 익스플러로 안됩니다!)

링크클릭:

(http://mugtug.com/ske)

위 사이트 설명: HTML5로 만든 포토샵과 같은 프로그램의 역할을 담당하는 서비스. 아직은 HTML5의 많은 기능이 표준화되지 못했고 만들어 가고 이는 중이라 많은 기능을 보여주지는 못한다. 하지만 HTML5의 가능성을 보여주기에는 충분한 것 같다.

HTML5를 통해 만든 그래픽 효과 (※ 익스플러로 안됩니다!)

링크클릭: (http://9elements.com/io/projects/html5/canvas/)

위 사이트 설명: 트위터에서 HTML5와 관련된 100개의 글을 뽑아서 그 각각 하나의 글을 다른 색깔을 가진 입자로 만들었습니다. 그리고 그 입자가 사용자의 마우스의 움직임에 따라 N극과 S극이 만나는 것처럼 따라 오고, 그 입자를 클릭했을 때 해당 입자의 트위터 글 내용이 보여집니다. 시간이 좀 지나가다 보면 음악이 바뀌고 그 음악에 따라 입자들이 춤을 추는 것을 볼 수 있습니다. 현란한 효과! 그리고 그 동안에도 사용자가 마우스를 움직여 그 입자들의 움직임에 영향을 줄 수 있습니다. Try it!

 

(※주의: 익스플로러8.0에서는 HTML5를 아직 지원하지 않습니다. 혹시 익스플로러 유저이시면 이번 기회에 구글 Chorme이나 모질라 재단의 Firefox로 바꿔보시는 게 어떤 가 합니다. 익스플로러 8.0도 ActiveX가 설치되지 않았을 때는 빠르지만 아마 한국 유저들 대부분이 ActiveX가 설치로 익스플로러가 많이 느려져 있을 겁니다. 금융권이나 국내 네이버,싸이 사이트 같은 경우는 익스플로러를 사용해서 다음이나 구글 등에서는 파이어폭스나 크롬을 써보세요. 그 속도감의 차이에 놀라실 꺼예요. 고속도로를 달리는 기분이랄까요? ㅎㅎ)