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)
11. 2. 앱의 종류 – 하이브리드 앱
네이티브 앱과 웹 앱의 장점을 합쳤음
네이티브 앱 보다 유지보수 용이(아이폰, 안드로이드,
윈도우폰 등 여러 기기에 같은 종류의 앱 개발시간 최소화)
HTML5, CSS, Javascript 등을 활용
웹앱과 달리 로컬에서 구동가능함
웹 표준 기술을 활용하여 앱을 표현
네이티브 적인 부분도 활용가능
화려한 UI사용
단말 고유 기능을 사용할 수 있음
13. 3. 왜 하이브리드 앱인가?
네이티브 앱에 비해, 유지보수 용이
다양한 플랫폼에 대응 가능
다양한 기기와 해상도에도 대응 가능(HTML5와 CSS3 이용, 웹앱과 같음)
웹 기술이 주이지만, 마켓에도 팔 수 있음(일반적으로
webview만 있는 웹앱은 애플 앱스토어에서 웹앱으로 따로
팔 수 있지만, 일반 앱으로는 등록 불가)
14. 4. 하이브리드 앱 개발시 유의할 점
일부 플랫폼의 경우 성능 저하
통신을 이용하는 방식에서 성능저하(폰갭-뒤에서 설명-의 경우 특히 심함)
웹 표준 침해 가능성 존재
각 플랫폼마다 자신들만의 기술 정립
웹은 같은 기술을 썼을때, 같은 화면을 보여주어야한다.
최신 모바일 기술 접목의 어려움
지원해주는 프로그램 필요(웹으로 개발한것을 각 플랫폼에 맞게 바꿔줌)
불가능하지는 않으나 시간이 약간 걸릴 수 있음(webview이용시 개발가능)
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
"새로운 작품을 만든다는 것은 아무도 발을
들여놓은 적이 없는 미지의 초원을 걸어가는
느낌이다."
사카구치 히로노부 (파이널 판타지 개발자)