Wallaby 다운로드
오마이갓! 오마이갓! 나올 줄은 알았지만~~~ 정말 나오다니~~!!! 누가 플래시의 미래가 없다 말했나~~~ 다 죽었으~~~라고 말하는 건 조금 오바지만 그래도 이건 대박이다! 이제 Labs 에 올라왔으니 앞으로 얼만큼 완벽하게 convert 해 줄지가 관건!
일단 간단한 플래시 무비를 컨버트 해 봤습니다. 살짝 문제가 보이지만 거의 완벽하게 covert 해주는 군요 +_+ 타임라인 베이스의 간단한 에니메이션은 거의 그대로 되지만 AS3는 얼마나 커버될지 의문이네요. 이건 이후에 더욱 테스트 해 봐야겠습니다. 테스트시 주의 할 점은 CS5 의 fla 만 된다는 점입니다. 그리고 이상하게 html 을 리로드하면 안나오네요.
이런 어처구니 없는;;;; 아직 모든 브라우저에서 호환되지 않습니다. 이런 치명적인 단점이;;; 일단 크롬과 사파리에서는 되는군요. 익스에서는 안되고 파복에서도 안된다는 정보입니다. ^^
p.s.
Google – swiffy
구글에서 개발하고 있는 SWF to HTML5 컨버터 입니다. Wallaby 와 다른 점은 Wallaby 는 fla to HTML5 라는 점 일 겁니다. 해당페이지에 보니 현재 지원하는 스펙은 SWF 8 and ActionScript 2.0 군요. SWF 5 가 더 잘 컨버터 되는 것 같습니다. 아마 기본적인 AS 2.0 액션은 잘 될 것 같습니다. 다만 플래시보다 확실히 속도면에서 떨어지는 군요.
일단 지원 브라우저는 Webkit 기반 (크롬, 사파리)의 브라우저인데 파폭에서도 되기는 합니다. 약간 문제점이 보이긴 하지만 속도는 파폭이 더욱 좋은 것 같네요. Wallby 의 경우 파폭에서 안되는 것과 비교 되는 부분입니다.
]]>
http://fractal.io/
Fractal Lab 은 WebGL 을 기반으로 하는 2D, 3D 프렉탈 렌더링 웹프로그램입니다. WebGL 을 사용하므로 최신 브라우저(Google Chrome 또는 Firefox 4 beta)를 사용해야 실행 해 볼 수 있습니다.
이 사이트는 사이트 기능만으로도 정말 수작입니다. 프렉탈을 시뮬레이션 하고 이미지로 저장 또 코드도 확인 할 수 있습니다. 그리고 이 모든게 브라우저에서 실시간으로 작동합니다. 하지만 제가 더 인상깊게 본 부분은 사이트 전체의 UI 들 입니다. 100%는 아니지만 많은 부분의 UI들이 CSS 와 Javascript 로 커스텀 되어 있습니다. 아래 이미지가 그 예입니다.
기존에 만들어진 라이브러리인지 사이트 제작자가 구현 한 것인지는 모르겠지만 사이트 전체의 룩앤필을 완성하면서도 사용성이 매우 편리합니다. 저 개인적으로 군입대전에 이와 같은 라이브러리 만들 던게 있었는데 이제야 슬슬 완성되는 것 같습니다.
다만 브라우저나 OS 에서 제공하는 UI 를 번거럽게 커스텀할 필요가 있는 가에 대해서는 개인적으로도 고민스러운 부분이지만 이 정도의 완성도로 만들 수 있다면 괜잖을 것 같기도 합니다.
출처 – http://www.creativeapplications.net/webapp/fractal-lab-webapp/
]]>
CHOICE 를 아주 강력히 찬성하는 입장입니다. 절대 어느 플렛폼이 더 좋으니 하는 소모적인 논쟁을 하려는게 아님을 분명히 합니다.
이 글을 쓰게 된 계기가 된 Androidity 사이트 입니다. 최근들어 생긴 버릇 중 하나가 괜잖은 모션을 보면 우클릭을 하는 겁니다. 아마도 플래시가 맞는지 확인 하고 싶은 욕구의 표출 일지 모르겠습니다. 다행히도 지금까지는 대부분 제 예상대로 플래시 였습니다. 고로 이 사이트에서도 호~ 모션 괜춘한데 하며 그냥 아무 생각없이 우클릭을 했습니다. 그런데 당연히 플래시 일 줄 알았던 모션이 플래시가 아닌겁니다. 소스를 확인해보니 HTML5 의 canvas 에 그려지 모션이더군요. 솔직히 조금 충격이었습니다. 그 동안 UI 나 위젯, 게임 같은 건 많이 봤지만 저 정도의 애니메이션을 HTML5 로 구현한건 처음이였으니까요.
http://morning.kia.co.kr/#main.html
영상을 제외한 모든 부분이 HTML 로 구성된 모닝 브랜드 사이트.
사실 이러한 기술은 어느날 갑자기 나온게 아니지요. 물론 HTML5만의 새로운 기능들이 있지만 현재 구현되고 있는 기술 특히 Javascript 와 CSS 의 조화는 수년 전 부터 있던 것들입니다. 거기에 HTML5 라는 것의 표준도 아직 완성되지 않은 상태입니다. 2014년 쯤에나 완성될거라더군요. 어쨋든 그러한 HTML5 가 최근 폭팔적인 관심을 받게 된 건 역시 모바일 때문입니다.
아~! 꼭 아이폰 때문은 아닙니다. 모바일 전체죠. 모바일 디바이스의 제한된 스펙과 인터넷 환경이 진화의 원리 처럼 기존 기술들 적자생존 시키고 있는 겁니다. 실제로 고객의 니즈는 분명합니다. 대부분의 플렛폼에서 자신의 사이트가 보여지길 원하고 있습니다. 거기에 플래시가 쓰이건 HTML5가 쓰이건 그건 관심 밖이지요. 이러한 상황에 현재로서 가장 이상적인 방법은 모바일용 사이트를 완전 따로 구축하는 겁니다. 하지만 아쉽게도 클라이언트는 자금이 없고 에이젼시는 시간이 없습니다. 그러다 보니 어쨋거나 컨텐츠가 보이는 HTML5 로의 이주가 확연히 생기고 있습니다. 그리고 돈이 있는 고객도 이왕이면 모바일에서 보이길 원하기 시작했습니다. 위의 모닝 사이트 처럼 말이죠.
그렇다고 HTML5 가 정답인가요? 그래서 저는 위의 사이트들을 제 아이폰에서 접속해 보았습니다. 일단 모두 화면은 정상적으로 나옵니다. 하지만 그게 전부죠. 이건 그냥 보이기말 한 뿐입니다. 결국 플래시랑 별반 다른게 없습니다. 안드로이쪽은 브라우저에서 플래시가 되니 오히려 플래시가 더 유리 할 수도 있습니다. 플래시가 되도 문제 입니다. 이견이 분분하지만 확실히 플래시는 밧데리 소모가 심합니다. 모바일기기에서 밧데리 시간만큼 중요한 것도 없는데 사실 이건 좀 치명적 문제입니다. 결국 모바일세계에서는 디바이스, HTML5 그리고 Flash 모두 아직 갈길이 멀기만 합니다.
아~ 또 글이 산으로 가기 시작했습니다. 점심시간도 지났으니 급 마무리 해야되겠습니다. 이 글을 쓰기 위해 찾아봤던 자료사이트들을 링크하면서 마치겠습니다.
반응형 웹디자인으로 개편
Internet Explorer 9 베타에서 최적화된 HTML5 사례
Canvas tutorial
canvasdemos.com
HTML 5 Demos and Examples
Flash Player 10.2: More Efficient than WebM
p.s. Androidity 의 모션은 뭘로 만든걸까요??? 소스를 보니 장난 아니던데 설마 그걸 전부 하드코딩해서??? 그걸 하드코딩 할 바에는 플래시를 아이폰에 올리고 말겠어!!!
]]>