현재 Web App을 만들기 위한 Framework으로 가장 적합한 것은 jQTouch라고 생각합니다.

Sencha가 있지만 개발자 1인당 $99의 사용료를 내야하기도 하고 작업방식이 어렵습니다.

그런 이유로 저는 올 연말에 jQuery Mobile이 나오기 전까지는 jQTouch를 사용하여 WebApp 작업을 할 계획입니다.

jQTouch는 jQuery의 Plug in으로서 사용하고 수정하기가 가장 쉽습니다.

파일을 다운받아서 계정에 업로드 하면 웹사이트에 접속했을 때 iPhone App과 같은 형태로 보여줍니다.

사용자는 HTML 파일의 내용을 수정해서 작업을 시작하면 되는 것이지요.

jQtouch.com의 메인 화면 - Flash로 jQtouch의 동작화면을 보여주고, Download 버튼을 제공

또한 iPhone Safari에서 제공하는 '홈 버튼에 추가' 기능을 활용하면 바로가기 아이콘이 설치됩니다.

이 기능을 활용했을 때는 Safari에서 접속했을 때와는 달리 주소줄이나 브라우저 메뉴도 없애줍니다.

왼쪽이 jQT, 가운데가 Apple 테마입니다. 오른쪽과 같이 사용자가 원하는 디자인으로 수정하여 사용할 수 있습니다.

하지만 jQTouch의 아쉬운 점은 몇가지 정말 중요한 기능들이 아직 제공되고 있지 않다는 점인데요.

가장 많이 이야기 되는 것이 Fixed Scroll 기능과 Tab bar 입니다.

고정된 영역에서만 Scroll 하는 것이 되지 않아 상단 Title 영역이 밀려 올라가는 것을 볼 수 있습니다. 또한 Tab bar도 나타나지 않습니다.

위와 같이 Fixed Scroll이 지원되지 않으면 Object C로 작업한 iPhone Native App과 같은 UI를 만들 수 없게 됩니다.

참고로 iPhone이나 Android 브라우저에서는 CSS의 overflow: scroll 속성을 사용하여도 스크롤 바가 나타나는 영역을 만들 수 없습니다.

iframe의 사용 또한 많은 문제가 있습니다.

이러한 문제가 있어서 jQTouch는 사용자들에게 많은 아쉬움을 주고 있습니다.

또한 jQTouch의 개발자인 Jonathan Stock이 Sencha Touch 개발에 참여하면서 jQTouch의 공식업데이트가 수개월동안 없는 것도 많은 웹개발자들이 jQTouch를 선택하기를 꺼리는 이유가 되었지요.

이런 문제를 보완하기 위해 jQTouch를 공개소스 iScroll과 결합하여 Fixed Scroll, Tab bar 기능이 동작하도록 배포한 버전이 있습니다.

Git hub에서 DataZombies 라는 유저가 아래 URL에서 배포하고 있습니다.

http://github.com/DataZombies/jQTouch

Downloads 버튼을 클릭하면 파일을 내려받을 수 있습니다.

이 버전은 video 파일이 포함되어 80MB이상의 큰 용량을 가지고 있으므로, 필요하지 않다면 demos/main/video, demos/main_tabbar/video 폴더에 있는 video 파일은 삭제하시고 이용하셔도 좋을 것 같습니다.

 

붉은색으로 표시된 구간(Scroll Area)에서만 스크롤이 되고 있으며 Tab bar가 추가된 것을 볼 수 있습니다.

  

또한 Landscape로 방향전환시에도 Tab bar가 정확한 위치에 놓여지며, 필요한 경우 특정 메뉴에서는 Tab bar를 사라지게 할 수 있습니다.

이 버전의 Demo를 보고 싶으신 분을 위해 제 계정에 파일을 올려놓았습니다.

iPhone에서 http://j.mp/tobydz2 에 접속해서 보시면 됩니다.

하지만 이 DataZombies 버전은 또 다른 문제점을 가지고 있는데요.

그것은 각 메뉴 전환시 효과가 랜덤하게(?) 문제를 일으키는 점입니다.

Jumpy transitions 라고 불리는 것 같네요.

jQTouch의 공식 배포버전인 Version1 beta2에서는 이러한 문제가 나타나지 않습니다.

jQTouch 또한공식 배포 버전외에 Git hub를 통해서 개발중인 jQTouch를 공개하고 있는데요.

이 버전은 메뉴 전환 효과 버그를 포함하고 있습니다.

DataZombies 버전에서 이 개발중인 jQTouch를 사용하기 때문에 이러한 문제가 동일하게 나타나고 있는 상태입니다.

결국 이 문제를 해결하려면 jQTouch가 공식적으로 업데이트가 되거나, 유저에 의해 이 문제가 해결된 버전이 나와야 할 것 같습니다.

혹시 이 문제를 해결하신 분이 계시다면 제게도 알려주시면 큰 도움이 되겠습니다. ^^;

참고로 jQTouch 공식배포버전은 jQuery.1.3.2 버전을 사용하고 있으며, 최신 개발버전은 jQuery 1.4.2 를 사용하고 있습니다.

또한 HTML 구조면에서도 아래 이미지와 같은 차이를 가지고 있는데요.

최신 개발버전과 같이 전체 내용을 감싸는 Container DIV를 가지고 있는 쪽이 개발하면서 부H히는 많은 이슈에 쉽게 대응할 수 있기 때문에 더 좋습니다.