jQuery Mobile 1.0 적용기 (HolyBible)


jQuery Mobile 1.0이 나왔다는 소식을 들었는데(?).. 아니 봤는데.. ^^;
문득 완전 개인적인 용도로 사용하던 성경 웹앱 HolyBible에 적용해보고 싶다는 생각을 했다.

사실 웹앱을 만들기 시작할때 써볼까도 생각해봤다.
근데 이전까지 한번도 써본적도 없고, 별다른거 있겠냐는 생각에 그냥 나름대로 만들어서 썼었다.
하지만 왠지 오늘은 써보고 싶다는 생각이 많이 들었다.

jQuery Mobile을 쓰는 방법은 간단하다.
Quick start guide에도 나왔지만 js파일 하나(jquery 포함하면 2개), css파일 하나 로드하면 준비끝!
html element들에게 data-role만 잘 적어주면 바로 적용된다.


http://holybible.joostory.net/bible





일단 테마도 기본으로 사용했고 data-role을 정해주는 것 외에는 거의 만지지 않았다.

css3를 잘 써놔서 그런지 app 느낌이 물씬 난다.


물론 적용하는데 약간의 문제가 있었다.
(이미 웹앱을 나름대로 만들어둔 상태였기때문에 생긴 문제다. 처음부터 이걸로 만들기 시작했다면 겪지 않았을 문제다.)

첫번째, jQuery Mobile은 정적인 페이지를 대상으로 하기에 이미 ajax로 작성된 페이지에는 적용이 잘 안된다.
jquery-mobile의 link를 처리하는 방식은 기본적으로 ajax인데 link를 클릭하면 body에 div를 하나 추가한 뒤에 거기에 이동할 page를 넣어서 보여주는 방식이다. 그러니까 정적인 페이지를 ajax로 만들어주는거다.
그렇다보니 이미 ajax로 만들어진 페이지는 얻을게 별로 없다. 그래서 HolyBible에도 정적인 페이지에만 적용했다.

- HolyBible Ajax 버전 : http://holybible.joostory.net
- HolyBible Static 버전 : http://holybible.joostory.net/bible

두번째, jQuery Mobile의 theme css와 사용중인 css가 많이 부딪힌다.
jQuery Mobile만의 방식이 있기때문에 이미 사용중인 css가 있다면 많이 고쳐줘야 한다. 참... 귀찮은 짓이다. 그래서 그냥 기본테마를 썼다.

세번째, cakephp는 ajax로 요청이 올 경우 ajax layout를 사용한다.
HolyBible은 cakephp를 사용 중인데 ajax로 오는 요청은 view가 자동으로 layout을 ajax로 바꾼다. 그래서 render하기 전에 layout을 다시 강제로 지정해야 한다. 다 됐다고 생각한 순간 이 부분에서 걸리니 좀 짜증이 났다. ^^;;

어쨌거나 jQuery Mobile의 기본 테마로 웹앱을 만든다면 엄청나게 간단하고 쉽고 빠르게 만들 수 있다.
적용하고 나니 원래 쓰던 ajax버전보다 더 나아보이기도 하고.. -_-
공부를 더 많이 해야겠다.

반응형