희망을 보고, 나는 쓰네...








요즘 스마트폰 열풍으로 많은 분들이 앱들을 개발을 하시는데, 아이폰, 아이패드의 ios는 object-c로 개발을 하고(어제 뉴스에 보니 델파이로도 개발이 가능하다고), 안드로이드는 java를 이클립스를 이용해서 주로 개발을 합니다.

문제는 세상의 폰이 안드로이드, 아이폰이 전부가 아니라, 블랙베리, 윈도우모바일, 심비안의 노키아, web os의 HP 등 다양한 OS가 존재한다는것입니다.

구글이나 페이스북같은 회사들조차 이 모든 환경에 맞추어서 포팅을 한다는것이 정말 어렵하고 해서 최근에 회자가 되고 있는것이 바로 HTML5입니다.

하나의 개발로 모든 기종에 적용을 한다는 이야기인데, 여기에서 오해가 조금 생기는듯 합니다.

네이티브앱은 기종별로 만드는것이므로 구분이 확실하게 가는데, 하이브리드앱과 모바일앱을 거의 동일시하는듯 하더군요.

뭐 모바일 홈페이지를 하나 만들어서, xcode나 eclipse에서 웹뷰(webview) 컨트롤 하나 만들어서 링크주소만 던져주면 되지 않냐라는것이 잘못된 오해가 아닐까 싶습니다.


하이브리드 앱이라는것의 정의의 모호성도 좀 그렇고, 어찌보면 위의 방식도 우긴다면 하이브리드라고 볼수도 있기는 하지만, 전형적인 하이브리드 앱과는 다르다고 보시면 됩니다.


모바일 웹은 서버측에서 html, css, javascript, 이미지 등을 가져오는것이고,
하이브리드앱은 스마트폰자체에 html, css, javascript, 이미지 등을 가지고 돌리며, 모바일웹에서 할수 없는 카메라, 주소록 등 하드웨어와 폰의 데이터등을 제어할수 있도록 해줍니다. 
(네이티브 앱과 하이브리드를 합쳐서 개발을 할수도 있지만, 보통은 phonegap, 앱스프레소, titanium 등의 툴을 이용해서 범용적으로 만듭니다.)
한국형 통합 엡스토어 K-Apps(KWAC)와 하이브리드 모바일앱 개발의 폰갭(PhoneGap), 앱스프레소(Appspresso)



예를 들어서 기상청의 날씨자료를 가지고 안드로이드, 아이폰, 블랙베리 프로그램을 만들라는 오더가 떨어졌다고 합시다.

http://www.kma.go.kr/weather/forecast/mid-term-xml.jsp?stnId=108

네이티브앱은 안드로이드, 아이폰, 블랙베리 별로 각각의 개발툴로 화면을 만들고, xml이나 json을 파싱해서 앱을 3개를 따로 따로 만들어야 합니다.
만약 화면 인터페이스나 파싱 방법이 바뀐다면 각각의 앱을 전부 다 수정해서 다시금 마켓이나 앱스토어에 올려야 합니다.
거기다가 개발자가 한명이 3가지를 다 할수 있는 경우는 드물기 때문에 인건비도 상승하겠지요.

모바일앱으로 만든다면 웹개발자와 디자이너가 홈페이지를 하나 만들어서 javascript나 jquery 등으로 ajax 등을 이용해서 만들면 됩니다.
우선 인건비도 적게들고, 수정을 하게되면 모두 동시에 변경이 되는 장점까지 있습니다.
다만 네트워크가 연결되어 있지 않다면 page not found라는 메세지밖에는 보여줄수 없고, 사람들이 앱에 비해서 웹에 접근하는것은 접근성도 많이 떨어집니다.
편법으로 위에서 언급한 웹뷰로 링크를 던져주는 간단한 프로그램으로 만들수도 있어서 App인것처럼 포장을 할수도 있지만, 네트워크가 안되는 경우에는 마찬가지입니다.

하이브리드 앱으로 만든다면 모바일앱과 유사합니다.
다만 서버측 홈페이지에 올라가있던 html, css, javascript, jquery, 센차터치 등이 서버가 아닌, 스마트폰안에서 로컬로 실행이 된다는것 입니다.
그럼 물론 네트워크가 안되더라도 기본적인 화면은 보여줄수 있고, 네트워크 오류라고 메세지를 날려주고, 캐쉬파일로 예전 자료를 보여줄수도 있습니다.
거기다가 서버에서 자료를 받아오는것이 아니라, 스마트폰에서 바로 실행되기 때문에 웹보다는 속도가 훨씬 빠르고, 데이터만 ajax와 같은 방식으로 보여주면 됩니다.
그리고 이 로컬파일들을 아이폰, 안드로이드, 블랙베리 용 앱으로 변환을 시켜주는것이 바로 폰갭, 앱스프레소 등과 같은 프로그램입니다.
단점은 프로그램을 수정하면 네이티브앱처럼 다시금 컴파일을 해서 마켓, 앱스토어에 다시 올려야 하겠지요.
하지만 네이티브앱에 비해서 비용은 상당히 절감할수 있다는것이 장점입니다.

기타적으로 하이브리드앱과 모바일앱을 섞어서 타이틀바나 네이게이션바는 하이브리드로 본문내용은 모바일앱을 이용해서 만드는 경우도 많습니다.


프로그램을 다 만들었는데, 이번에는 사용자들이 사진을 찍어서 현재의 날씨를 GPS정보와 함께 올리도록 수정하라는 오더가 내려옵니다.


네이티브앱은 각각의 OS별로, 각각의 api에 따라서 사진을 찍고, gps정보를 가지고 서버에 올리는 프로그램을 기종별로 만들어야 합니다.

모바일앱은 GPS정보는 html5에서 지원을 하기때문에 가능하지만, 사진을 찍고 가져오는것은 현재로써는 불가능 하기때문에 포기하거나, 네이티브나 하이브리드로 변환을 해야 합니다.

하이브리드앱같은 경우는 폰갭, 엡스프레소에서 api를 지원해주기 때문에 해당되는 api를 이용하면 하나의 소스 추가만으로 변경이 가능합니다. 물론 컴파일은 os별로 다시 해야겠지요.



뭐 대충 설명을 하기는 했지만, 이 정도라면 하이브리드앱은 앞으로 아이폰, 안드로이드, 윈도우모바일, 바다, 블랙베리 등의 다양한 기종이 나오는 상황에서 상당히 매력적일수밖에 없습니다.

현재로써 cross platform과 web 서비스 매쉬업을 지원할수 있는 유일한 대안이고, html5에서 지원하는 다양한 새로운 기능으로 게임개발 등 다양한 확장이 가능한데, 현재 앱중에서 80% 이상은 하이브리드 앱으로 만들수 있다는 이야기도 있더군요.
(간혹 html5가 기존의 html과 전혀 다른것으로 인식하는 분들이 있던데, 기존의 html은 호환되면서 기능이 추가된것으로 보시면 되고, 현재 상당수의 홈페이지들이 html5로 구축되어 있습니다)

단점도 있습니다. 아무리 잘 만든다고 해도 컴파일된 네이티브앱에 비해서는 속도가 조금 느리고, 혼자나 몇명의 팀원이서 개발을 한다면 초기에 배워야 할것도 참 많습니다.
프로그래머들이 조금은 경시하던 html5, css3, javascript, ajax, jquery mobile(또는 sencha touch), 앱스프레소(또는 phonegap, titianium) 등에 대해서도 좀 심도깊게 학습을 해야 할듯 합니다.


저도 안드로이드로 개발은 조금 하면서 앱도 하나 만들었는데, 확장을 생각해보니 아무래도 하이브리드 앱으로 가야 하겠더군요.
html5가 스마트폰에서 대부분 지원을 하면서 캔버스로 그래픽처리 기능이 상당히 발전했고, 로컬 저장소에 스토리지나 sql 데이터베이스를 지원도 해주고, 웹소켓, 웹워커 등 다양한 지원으로 이제는 잘만 다룬다면 굳이 네이티브앱보다는 하이브리드앱으로 가는것이 좋지 않을까 싶은 생각이 듭니다.
물론 만들고자하는 앱의 특성에 따라서 비용이 들더라도 네이티브로 가는것이 좋은것도 있겠지만, 그런것이 아니라면 굳이 각 os별로 만들기보다는 하이브리드로 만들어 보시면 어떨까 싶습니다.

아이폰은 C, 안드로이드는 java 이고, 하이브리드는 html5, javascript가 주인데, 최근에 html5와 자바스크립트의 발전과 성장을 보면 미래를 위한 준비로 생각하고 공부를 하시는것도 좋지 않을까 싶습니다.


저도 요즘 관심을 갖게 되어서 이것저것 찾아서 공부하고 배우고 있는 입장인데, 상당히 놀랍고 괜찮은 개발방법이고, 잘못 오해하고 있던 부분도 많았습니다. 걍 모바일 홈페이지 만들어서 돌리면 되는거 아닌가 하는 생각을 했었는데, 생각도 정리해 볼 겸 포스티을 해봅니다.
저작자 표시 비영리 변경 금지


댓글을 달아 주세요

  1. Favicon of http://moai.tistory.com BlogIcon 기범롤링베베 2011/11/25 09:18  Addr  Edit/Del  Reply

    좋은 정보 감사합니다. ^^

    • Favicon of http://danbis.net BlogIcon 단비스 2011/11/25 17:57  Addr  Edit/Del

      조금이나마 도움이 되었으면 좋겠네요~
      오늘 하루도 즐거운 하루되세요!

  2. 모바일어려워 2011/12/09 16:41  Addr  Edit/Del  Reply

    좋은 정보 잘 읽고 갑니다.

    • Favicon of http://danbis.net BlogIcon 단비스 2011/12/12 08:53  Addr  Edit/Del

      조금이나마 도움이 되시길 바라겠습니다.
      오늘 하루도 즐거운 하루되세요~

  3. 하이브리드앱 2011/12/13 10:01  Addr  Edit/Del  Reply

    좋은정보 감사합니다.

    • Favicon of http://danbis.net BlogIcon 단비스 2011/12/13 19:07  Addr  Edit/Del

      두서없이 쓴글을 좋게 봐주시니 제가 더 감사하네요...^^
      아무쪼록 오늘 하루도 즐거운 하루되시길 바라겠습니다!

  4. 소프트존 2012/02/07 12:01  Addr  Edit/Del  Reply

    도움이 많이 되었습니다. 좋은 내용이네요..ㅋ

    • Favicon of http://danbis.net BlogIcon 단비스 2012/02/07 13:05  Addr  Edit/Del

      조금이나마 도움이 되셨다니 다행입니다.
      오늘 하루도 즐거운 하루되세요~

  5. 개발자 2012/02/17 11:42  Addr  Edit/Del  Reply

    정리가 되었네요 ^^..
    네거티브앱 -> 네이티브앱
    PhoneCap -> PhoneGap

    읽으면서 이해는 되었지만 ^^...

    • Favicon of http://danbis.net BlogIcon 단비스 2012/02/17 14:39  Addr  Edit/Del

      제가 봐도 오타가 많네요...-_-;;
      좋은 지적 감사합니다. 오늘 하루도 즐거운 하루되세요~