ݺߣ

ݺߣShare a Scribd company logo
하이브리드 앱 개발개요
비트모바일
장봉수
목 차


앱이란?



앱 개발의 종류



왜 하이브리드 앱인가?



하이브리드 앱 개발시 유의할점



웹을 앱으로 만들어주는 Tools



하이브리드 UI 개발 프레임워크



개발과정(하이브리드 앱)
1. 앱이란?


어플리케이션의 줄임말



플랫폼 안에 들어가는 한가지 목적을 위해 만들어진 응용 프
로그램(게임, 일정관리, 음악 등)



애플의 앱스토어 같은 응용 소프트웨어 가게에 올려서 팔 수
있음


이외에 크롬, 윈도우8, 플레이스테이션에서 운영하는 부분에 대해서도 앱이
라함
2. 앱의 종류
Native
App

App

Hybrid
App

Web
App
2. 앱의 종류 – 네이티브 앱


각 플랫폼의 언어로 구현


아이폰(Object-C), 안드로이드(JAVA), 윈도우(C#), 바다(C++), 블랙베리
(JAVA) 등



화려한 UI사용



단말 고유 기능을 사용할 수 있음



특정 플랫폼에만 동작



앱의 업데이트는 앱스토어를 통해서만 이루어짐
2. 앱의 종류 – 네이티브 앱

메모리관리용 어플
실시간 어플 킬러 앱
위젯을 눌러서 정리
2. 앱의 종류 – 웹앱


HTML5, CSS, Javascript 등을 활용


웹 표준 기술을 활용하여 앱을 표현



여러 기기에 한 가지의 앱으로 서비스할 수 있기에 개발 및
유지보수 용이



허나 웹에서 구동하기에 서버 필요 및 네트워크 상황에 따라
구동자체가 거의 불가능


Application Cache나 Web Storage를 사용하여 부분적 해결가능(HTML5)
2. 앱의 종류 – 웹앱 – 예시(크롬 에버노
트)
2. 앱의 종류 – 웹앱 – 예시(크롬 에버노
트)
2. 앱의 종류 – 웹앱 – 예시(크롬 에버노
트)
2. 앱의 종류 – 하이브리드 앱


네이티브 앱과 웹 앱의 장점을 합쳤음



네이티브 앱 보다 유지보수 용이(아이폰, 안드로이드,
윈도우폰 등 여러 기기에 같은 종류의 앱 개발시간 최소화)



HTML5, CSS, Javascript 등을 활용





웹앱과 달리 로컬에서 구동가능함
웹 표준 기술을 활용하여 앱을 표현

네이티브 적인 부분도 활용가능


화려한 UI사용



단말 고유 기능을 사용할 수 있음
2. 앱의 종류 – 하이브리드 앱 - 다음

Web 부분

Native 부분
3. 왜 하이브리드 앱인가?


네이티브 앱에 비해, 유지보수 용이



다양한 플랫폼에 대응 가능




다양한 기기와 해상도에도 대응 가능(HTML5와 CSS3 이용, 웹앱과 같음)

웹 기술이 주이지만, 마켓에도 팔 수 있음(일반적으로
webview만 있는 웹앱은 애플 앱스토어에서 웹앱으로 따로
팔 수 있지만, 일반 앱으로는 등록 불가)
4. 하이브리드 앱 개발시 유의할 점


일부 플랫폼의 경우 성능 저하




통신을 이용하는 방식에서 성능저하(폰갭-뒤에서 설명-의 경우 특히 심함)

웹 표준 침해 가능성 존재





각 플랫폼마다 자신들만의 기술 정립
웹은 같은 기술을 썼을때, 같은 화면을 보여주어야한다.

최신 모바일 기술 접목의 어려움


지원해주는 프로그램 필요(웹으로 개발한것을 각 플랫폼에 맞게 바꿔줌)



불가능하지는 않으나 시간이 약간 걸릴 수 있음(webview이용시 개발가능)
5. 웹을 앱으로 만들어주는 Tools


PhoneGap



Titanium



Appspresso
5. 웹을 앱으로 만들어주는 Tools
- PhoneGap


최초의 하이브리드 앱 프레임워크



개발환경 제공은 하지 않고 패키징만 지원(빌드)


손이 많이 감



브라우저도 웹앱을 구동하는 방식으로 성능이 네이티브앱
에 비해 떨어짐



폰갭만의 API 제공
5. 웹을 앱으로 만들어주는 Tools
- Titanium


폰갭의 단점인 성능 부분을 개선


브라우저로 웹앱을 구동하는 방식이 아닌 웹 기술을 활용하여 네이티브 앱으로
개발



Titanium만의 API 제공



데스크탑 플랫폼도 지원




단, 모바일 플랫폼 개발시, javascript위주의 개발방식
(Webkit엔진이 아닌 javascript 엔진을 쓰고 있음)

플랫폼마다 결과화면이 다르게 표시될 수 있음
5. 웹을 앱으로 만들어주는 Tools
- Appspresso


KTH에서 개발된 프레임워크




가장 최근에 개발된 프레임워크(2011년 10월)

강력한 개발환경 지원


웹앱 표준인 WAC Waikiki API 지원



이클립스 IDE 지원(이클립스를 이용해서 만들었음)



폰갭과 같은 형식의 개발로 성능제한이 있음



2013년 3월 30일. 현재 안드로이드 SDK 1.7 버전이상 지원 안 함
6. 하이브리드 UI 개발 프레임 워크


JQuery Mobile



Sencha Touch



Joapp
6. 하이브리드 UI 개발 프레임 워크
- JQuery Mobile


표현방식이 기존의 HTML과 비슷하여 빠르게 적응 가능


HTML 마크업 기반



다양한 플랫폼에 대응 가능



Sencha touch에 비해 표현력이 떨어짐
6. 하이브리드 UI 개발 프레임 워크
- Sencha Touch


ExtJS 라이브러리 중심으로 구성
※ ExtJs는 웹애플리케이션을 만들기 위한 client-side-JavaScript framework이
다.


Extjs를배우기위한별도교육필요



기능이 매우 강력하고 Extjs를 활용하여 보다 앱적인 표현력
이 강력하다.



라이선스를 구매해야 한다.
6. 하이브리드 UI 개발 프레임 워크
- JoApp


많이 쓰이지는 않으나 다양한 기능 제공



대부분 Javascript로 구성되어 개발이 어려움
7. 개발과정 (하이브리드 앱)

UI 개발
(WEB환경)

APP 패키징

Web App

네이티브 개발

Native App
Hybrid App
Q&A
"새로운 작품을 만든다는 것은 아무도 발을
들여놓은 적이 없는 미지의 초원을 걸어가는
느낌이다."
사카구치 히로노부 (파이널 판타지 개발자)
끝


name : 장봉수



E-mail : jbs0209@bitmobile.co.kr



Phone :010-6662-5306

More Related Content

하이브리드 앱_개발_개요

  • 2. 목 차  앱이란?  앱 개발의 종류  왜 하이브리드 앱인가?  하이브리드 앱 개발시 유의할점  웹을 앱으로 만들어주는 Tools  하이브리드 UI 개발 프레임워크  개발과정(하이브리드 앱)
  • 3. 1. 앱이란?  어플리케이션의 줄임말  플랫폼 안에 들어가는 한가지 목적을 위해 만들어진 응용 프 로그램(게임, 일정관리, 음악 등)  애플의 앱스토어 같은 응용 소프트웨어 가게에 올려서 팔 수 있음  이외에 크롬, 윈도우8, 플레이스테이션에서 운영하는 부분에 대해서도 앱이 라함
  • 5. 2. 앱의 종류 – 네이티브 앱  각 플랫폼의 언어로 구현  아이폰(Object-C), 안드로이드(JAVA), 윈도우(C#), 바다(C++), 블랙베리 (JAVA) 등  화려한 UI사용  단말 고유 기능을 사용할 수 있음  특정 플랫폼에만 동작  앱의 업데이트는 앱스토어를 통해서만 이루어짐
  • 6. 2. 앱의 종류 – 네이티브 앱 메모리관리용 어플 실시간 어플 킬러 앱 위젯을 눌러서 정리
  • 7. 2. 앱의 종류 – 웹앱  HTML5, CSS, Javascript 등을 활용  웹 표준 기술을 활용하여 앱을 표현  여러 기기에 한 가지의 앱으로 서비스할 수 있기에 개발 및 유지보수 용이  허나 웹에서 구동하기에 서버 필요 및 네트워크 상황에 따라 구동자체가 거의 불가능  Application Cache나 Web Storage를 사용하여 부분적 해결가능(HTML5)
  • 8. 2. 앱의 종류 – 웹앱 – 예시(크롬 에버노 트)
  • 9. 2. 앱의 종류 – 웹앱 – 예시(크롬 에버노 트)
  • 10. 2. 앱의 종류 – 웹앱 – 예시(크롬 에버노 트)
  • 11. 2. 앱의 종류 – 하이브리드 앱  네이티브 앱과 웹 앱의 장점을 합쳤음  네이티브 앱 보다 유지보수 용이(아이폰, 안드로이드, 윈도우폰 등 여러 기기에 같은 종류의 앱 개발시간 최소화)   HTML5, CSS, Javascript 등을 활용   웹앱과 달리 로컬에서 구동가능함 웹 표준 기술을 활용하여 앱을 표현 네이티브 적인 부분도 활용가능  화려한 UI사용  단말 고유 기능을 사용할 수 있음
  • 12. 2. 앱의 종류 – 하이브리드 앱 - 다음 Web 부분 Native 부분
  • 13. 3. 왜 하이브리드 앱인가?  네이티브 앱에 비해, 유지보수 용이  다양한 플랫폼에 대응 가능   다양한 기기와 해상도에도 대응 가능(HTML5와 CSS3 이용, 웹앱과 같음) 웹 기술이 주이지만, 마켓에도 팔 수 있음(일반적으로 webview만 있는 웹앱은 애플 앱스토어에서 웹앱으로 따로 팔 수 있지만, 일반 앱으로는 등록 불가)
  • 14. 4. 하이브리드 앱 개발시 유의할 점  일부 플랫폼의 경우 성능 저하   통신을 이용하는 방식에서 성능저하(폰갭-뒤에서 설명-의 경우 특히 심함) 웹 표준 침해 가능성 존재    각 플랫폼마다 자신들만의 기술 정립 웹은 같은 기술을 썼을때, 같은 화면을 보여주어야한다. 최신 모바일 기술 접목의 어려움  지원해주는 프로그램 필요(웹으로 개발한것을 각 플랫폼에 맞게 바꿔줌)  불가능하지는 않으나 시간이 약간 걸릴 수 있음(webview이용시 개발가능)
  • 15. 5. 웹을 앱으로 만들어주는 Tools  PhoneGap  Titanium  Appspresso
  • 16. 5. 웹을 앱으로 만들어주는 Tools - PhoneGap  최초의 하이브리드 앱 프레임워크  개발환경 제공은 하지 않고 패키징만 지원(빌드)  손이 많이 감  브라우저도 웹앱을 구동하는 방식으로 성능이 네이티브앱 에 비해 떨어짐  폰갭만의 API 제공
  • 17. 5. 웹을 앱으로 만들어주는 Tools - Titanium  폰갭의 단점인 성능 부분을 개선  브라우저로 웹앱을 구동하는 방식이 아닌 웹 기술을 활용하여 네이티브 앱으로 개발  Titanium만의 API 제공  데스크탑 플랫폼도 지원   단, 모바일 플랫폼 개발시, javascript위주의 개발방식 (Webkit엔진이 아닌 javascript 엔진을 쓰고 있음) 플랫폼마다 결과화면이 다르게 표시될 수 있음
  • 18. 5. 웹을 앱으로 만들어주는 Tools - Appspresso  KTH에서 개발된 프레임워크   가장 최근에 개발된 프레임워크(2011년 10월) 강력한 개발환경 지원  웹앱 표준인 WAC Waikiki API 지원  이클립스 IDE 지원(이클립스를 이용해서 만들었음)  폰갭과 같은 형식의 개발로 성능제한이 있음  2013년 3월 30일. 현재 안드로이드 SDK 1.7 버전이상 지원 안 함
  • 19. 6. 하이브리드 UI 개발 프레임 워크  JQuery Mobile  Sencha Touch  Joapp
  • 20. 6. 하이브리드 UI 개발 프레임 워크 - JQuery Mobile  표현방식이 기존의 HTML과 비슷하여 빠르게 적응 가능  HTML 마크업 기반  다양한 플랫폼에 대응 가능  Sencha touch에 비해 표현력이 떨어짐
  • 21. 6. 하이브리드 UI 개발 프레임 워크 - Sencha Touch  ExtJS 라이브러리 중심으로 구성 ※ ExtJs는 웹애플리케이션을 만들기 위한 client-side-JavaScript framework이 다.  Extjs를배우기위한별도교육필요  기능이 매우 강력하고 Extjs를 활용하여 보다 앱적인 표현력 이 강력하다.  라이선스를 구매해야 한다.
  • 22. 6. 하이브리드 UI 개발 프레임 워크 - JoApp  많이 쓰이지는 않으나 다양한 기능 제공  대부분 Javascript로 구성되어 개발이 어려움
  • 23. 7. 개발과정 (하이브리드 앱) UI 개발 (WEB환경) APP 패키징 Web App 네이티브 개발 Native App Hybrid App
  • 24. Q&A "새로운 작품을 만든다는 것은 아무도 발을 들여놓은 적이 없는 미지의 초원을 걸어가는 느낌이다." 사카구치 히로노부 (파이널 판타지 개발자)
  • 25. 끝  name : 장봉수  E-mail : jbs0209@bitmobile.co.kr  Phone :010-6662-5306