어제 eLancer에서 주최한 컨퍼런스에 다녀왔습니다.
제목은 “1인 IT기업, 웹으로 모바일을 정복하라!”였습니다.
레프트21도 모바일 대응을 준비하고 있는 터라 참가했습니다. 다양한 세션이 있었지만, 단연 가장 기대했고 실제로 도움도 크게 됐던 것은 마지막 세션이었습니다.
제목은 ‘PhoneGap을 이용한 모바일 앱개발’이었고, 이미지 클릭의 김민태 팀장님(@ibare)이 발표해 주셨습니다.
필기하기보다는 아이폰을 이용해서 트위터에 실황중계(?) 비슷하게 말을 받아 적었습니다. 당연히 모든 내용을 받아 적을 수는 없었지만, 꽤 많은 내용을 받아 적을 수 있었습니다. 아래는 트위터에 올린 것들을 나름대로 재정리한 것입니다.
폰갭(PhoneGap)을 이용해서 앱 개발을 하려는 분들에게 도움이 되길 바랍니다.
————-
폰갭은 지난 6월 8일에 0.9.1 버전을 발표했다. 아직 버전 1.0도 아니다. 즉, 여전히 개발중인 기술이다.
며칠 전 폰갭으로 프로그램을 하나 감싸는 데 2시간이 걸렸다. 웹을 앱으로 만드는 데 이정도면 상당히 편리한 거라고 할 수 있다.
웹을 앱으로 만드는 라이브러리가 몇 개 있는데 폰갭은 그중 가장 오픈된 라이센스를 채택하고 있다. 폰갭의 소스를 직접 수정한 후 재배포하는 것까지 허용된다. 완전한 오픈이다.
디바이스API라는 말을 들어 봤을 거다. WAC(저는 ‘왁’이라고 읽습니다)이나 W3C에서 기기의 하드웨어를 직접 제어하는 디바이스API 표준화 작업을 진행하고 있는데, 폰갭에서도 디바이스API를 사용한다. 당연히 WAC나 W3C와 폰갭 사이의 약간의 차이는 있다. 아직 디바이스 API가 표준화되지 않은 상황에서 이 기술을 사용해야 하므로 폰갭은 나름의 디바이스API를 제공한다.
얼마 전에 WAC의 디바이스API 스펙이 공개됐는데 폰갭과 상당히 유사한 형태였다. 네이밍도 비슷했다. 서로 참고하는 게 당연하다. 폰갭을 지금부터 사용한다면 WAC이나 HTML5의 디바이스API에 대한 대응도 한결 쉬워질 것이라고 생각한다.
아래는 폰갭이 제공하는 디바이스API의 목록이다.
블랙베리의 가속도계와 팜의 연락처목록 빼고는 주요한 디바이스API를 모두 지원한다.
올해 안에 이 외에도 다양한 디바이스API를 모두 제공할 계획이라고 한다.
웹앱과 HTML5
어떤 분들은 웹앱을 만들려면 HTML5를 알아야 하는 거냐고 묻는다.
HTML5나 CSS3를 활용하면 높은 퍼포먼스로 다양한 시각적 효과를 낼 수 있지만, 모른다면 그냥 HTML4 트렌지셔널로 해도 상관없다.
사실 이런 류의 기술적인 것보다 인터페이스의 차이를 이해하는 게 웹앱 개발에서 가장 중요하다.
웹앱 개발 때 가장 힘든 부분은 클릭 인터페이스와 터치 인터페이스 사이의 차이를 이해하고 기획을 다시 하는 부분이다. 단순히 웹사이트의 축소 버전으로 이해해선 안 된다는 것이다.
터치 인터페이스에 적응하는 걸 가장 쉽게 해 주는 게 jQTouch 같은 터치 인터페이스 프레임웍을 사용하는 것이다. jQuery Mobile은 올해 11월 혹은 12월에 나온다. 기대 중이다.
jQTouch에 대해
jQTouch를 까보면 코드가 정말 짧다. 그런데 UI는 화려하다. jQTouch가 짧은 코드로 화려한 UI를 가질 수 있었던 이유는 CSS3 기능을 사용하기 때문이다.
또한 스킨을 갈기 참 쉽다. 새 스킨을 만드는 데 30분 걸렸다. 센차 터치에 비해 큰 장점이다.
그러나 그런 만큼 기능의 한계가 있다. 가장 큰 문제는 툴바가 함께 스크롤 돼 올라가 버리는 거다. 네이티브앱에서는 그렇게 되지 않는다.
jQTouch의 가장 큰 단점은 업데이트가 느리다는 것이다. 개발자가 sencha 터치에 입사했기 때문인 듯하다. 그래서 미래는 어둡다고 할 수 있다.
Sencha Touch에 대해
센차 터치는 게임까지 구현할 수 있는 강력한 프레임웍이다. 그러나 너무 많은 기능을 제공하기 때문에 진입장벽이 너무 높다는 단점이 있다.
EXT JS기반인데, EXT JS 자체의 진입장벽이 높은 데다, EXT JS를 해외에선 많이 사용하지만 국내에서는 거의 사용하지 않기 때문에 이것도 진입장벽을 높이는 요소다.
센차 터치는 폰과 패드에 맞는 UI를 모두 알아서 자동 제공하는 게 장점이다. 한 번만 디자인하면 기기에 맞춰 알아서 디자인을 내보내 준다.
그러나 디자인을 커스터마이징하기 어렵다.
또한 복잡하고 무거운 구조고 상용 서비스 개발시에는 라이센스를 지불해야 한다.(개발자 1인당 99$로 그렇게 비싸지는 않다.)
스크롤링 이슈 같은 것도 없다 기능은 최강이다.
센차 터치 사용시 디자인 변경이 어렵다는 것은 퍼블릭한 앱을 만들 때는 장벽이 된다. 내가 만든 것과 남이 만든 것이 디자인이 같아 버리면 골때린다.
센차 터치가 무겁고 복잡하다고 했는데 퍼포먼스가 심각하게 떨어지는 간 아니다. 물론 다른 것보다는 좀 느리다. 간혹 끊길 때가 있다는 것 정도.
(녹풍의 한마디 : 그리고 다른 강연에서 나왔던 이야기인데, Sencha Touch는 개발자 쪽에서만 제어할 수 있다고 합니다. 즉, 이걸로 개발하게 되면 퍼블리셔가 할 일이 없어진다는 이야기입니다.)
jQuery Mobile
jQueryMobile은 스크린샷만 나온 상태. 특징 추측해 본다. jQuery팀에서 만들었다는 게 가장 기대를 하게 하는 요소다. 특징. 폰과 패드 그리고 데탑까지 지원한다. 센차는 데탑 지원 안 한다.
jQuery Mobile ㅡ 대부분의 모바일 UI를 지원한다는 점도 특징. 단점은 나와야 알 수 있다.
올해 11~12월에 나온다고 했다.
폰갭으로 돌아와서
폰갭은 아직 사이트에도 정보가 많이 없다. 별로 큰 회사는 아니라고 한다. 몇 주 전만 해도 다운로드 링크조차 제공하지 않고 github를 통해 콘솔로 접속해서 내려받아야 했다. 두 달째 버전이 0.9.1에 머물러 있다.
이용하려면 여섯 개의 폰 플랫폼 SDK에 각각의 폰갭 플러그인을 설치해야 한다. 폰갭 자신의 IDE는 없다.
아이폰을 예로 든다면, 폰갭으로 앱을 만들려면 Xcode가 있어야 한다. 내가 이십 번쯤 폰갭 설치해 봤는데 익셉션은 한 번도 없었다. 안정성은 확보된 상태라고 볼 수 있다.
폰갭 일단 설치하면 프로젝트가 생성된다. ‘어? 난 아이폰 개발 하나도 모르는데’ 하면서 겁먹을 거 없다. 개발해 둔 웹앱을 www 폴더에 넣으면 된다.
근데 반드시 스타트파일을 index.html 로 해야 한다. htm도 안 된다. index.html이 없어도 컴파일까지 잘 된다. 하지만 앱을 실행하면 아무 메세지도 없이 아무 일도 일어나지 않는다. 이것 때문에 헤매는 경우가 많다.
폰갭으로 개발한 아이폰 앱을 앱스토어에 올리기
앱스토어에 앱을 올리려면 일단 개발자 라이선스를 구매해야 한다. 1년에 99달러다. 몇년 전에 등록했을 때는 영어로 전화가 왔다. 내용은 간단했다. “정말 할래?” 이거다. 요즘은 한국말로 전화 온다.
라이선스 사면 애플 개발자 센터에 디바이스 등록 가능해진다. 그러면 내 폰에 내가 개발한 앱을 설치할 수 있게 된다.
이후 과정은 개발&테스트. 앱스토어 등록. 그리고 계속 업데이트. 이 과정 거치면 된다.
폰갭과 웹앱, 그리고 폰갭의 미래
만약 디바이스 API를 사용하지 않으면 폰갭으로 웹앱을 감싸는 것은 정말 쉽다. 그냥 감싸기만 하면 된다.
그러면 이런 질문을 할 수 있다. 아이폰의 경우 그냥 웹앱을 홈 화면에 추가해서 쓸 수 있는데, 굳이 폰갭으로 감쌀 필요가 없지 않나 하는 거다.
사소하지만 중요한 차이가 있다. 폰갭으로 앱을 감싸면 앱의 스테이트를 유지할 수 있다. 웹앱은 나갔다 들어가면 처음부터 다시 시작하지만 앱은 끝냈던 바로 그 자리부터 시작한다. 즉 멀티태스킹 기능을 사용할 수 있다. 이거 하나만으로도 웹앱을 폰갭으로 감쌀 만한 가치가 있다.
폰갭의 큰 장점은 플러그인을 손쉽게 만들 수 있다는 점이다. 이미 iAds/AdMOD 플러그인이 나와 있고 나도 사용해 봤다. 네이티브 앱에서 광고를 붙이려면 상당히 많은 코드가 필요한데, 폰갭에서는 단 다섯 줄을 코드만 추가해서 광고를 붙였다.
Action Sheet. HTTP Loader 같은 플러그인은 내가 만들었다(?)
폰갭을 이용하면 네이티브앱 기능의 98%쯤은 구현할 수 있다고 본다.
이런 것으로 볼 때 폰갭은 과도기적인 기술이라기보단 나름의 생명력이 있는 기술로 볼 수 있다.
댓글 남기기