HTML5 모바일 웹앱 프레임웍 LungoJS

데모 (가능한것들) :
(모바일 브라우저에서는 http://lungojs.tapquo.com/의 주소로 접근하시면 됩니다.)

jQuery Mobile, Sencha Touch2 로 개발을 경험해 보았는데
2012 현재 시점으로 한국에서 가장 많이 사용되고 있는 Android 2.x 버젼대에서
모두 트랜지션 효과에서 문제가 발생하였습니다. 이거 IE6 호환 개발 문제 만큼 멘붕일으킵니다.
(iOS는 무조건 잘 동작하므로 실험에서 제외)

대안을 찾다가 발견한것이
- 진도 모바일 (무료 GPL)
- Kendo Mobile (유료)
- iUI (무료 MIT 라이센스)
- LungoJS (무료 GPL)
입니다.

진도 모바일은 호환성이 뛰어나 모든 기기에서 너무도 잘 작동하며 속도도 좋습니다.
하지만 기본적인 버튼 위젯부터가 지원되지 않는다는 단점,
jQuery 호환 불가한 네이버 자작의 jindo 라이브러리를 써야하는 단점을 지닙니다.

다음, Kendo Mobile은 찾은 대안 중 가장 뛰어납니다.
jQuery 기반이며 HTML5 마크업 방식입니다.
테마가 iOS에서와 Android에서 자동적으로 바뀌어 보여지는 훌륭한 UI기술을 보여줍니다.
비용 지불이 의사가 있다면 이 프레임웍이 현재는 최강이라 개인적 평을 해봅니다.

다음, iUI는 Android 2.x 지원되는 Sencha Touch 2 급이라고 판단하고 있습니다.
HTML5 마크업은 아니지만 CSS class를 통한 쉬운 UI 제작이 가능합니다.
위젯이 적으며 디자인이 iOS쪽에 치중되어 있는점이 괜찮으신 분들은 이 프레임웍도 좋습니다.

개인적으로는 이 중 최종적으로 LungoJS를 선택하게 되었습니다.
(이제부터 LungoJS에 대해서만 쭉 갑니다.)
기본 UI 디자인은 Android halo 테마쪽에 가까우며
제공되는 위젯들이 많습니다.

고유 javascript library를 쓰기때문에 jQuery와 혼용이 가능하며
HTML5 마크업으로 UI를 코딩할 수 있기에 좋습니다.

vimeo 강좌 동영상으로 보아 스페인 사람이 만든듯하며
포럼 또한 영어와 스페인어 게시판이 나뉘어 있습니다.
(젠장할 언어의 장벽...)

문제점은
1. 아이콘을 @font-face를 통한 base64 웹폰트를 쓰는데 이런방식 처음인 분들에게는 쉽고 다양하게 쓰기가 다소 신경쓰입니다.
2. 가끔 상단바에서 버튼들과 제목이 사라져 보이는 문제가 발생합니다.
3. 튜토리얼이 현존 버젼과 맞지않기에 쓸만한 것들은 소스의 /example/을 통해 익혀야 합니다.
4. 포럼이 활발하지 못하며 질문하려면 영어의 장벽을 이겨내야 합니다.

기본 사용법을 보고 백문이불여일타 해 보았는데
시작부터 스크립트 오류, CSS문제가 파바박! 뜹니다.

release/lungo.theme.default.font.css 파일에서

@font-face{font-family:'Roboto';src:url(data:font/truetype;charset=utf-8;base64,블라블라...) format('truetype');font-weight:normal;font-style:normal;}

을

@font-face{font-family:'Roboto';src:url(data:font/opentype;charset=utf-8;base64,블라블라...) format('opentype');font-weight:normal;font-style:normal;}

로 변경해 주어야 크롬에서 CSS경고가 안뜹니다.

release/lungo-1.2.min.css 파일에서도 truetype을 찾아 opentype으로 변경해 주어야 합니다.

소개는 이쯤에서 마무리 하겠습니다.