하이브리드 앱_개발_개요
DESCRIPTION
2013년 10월 26일 제주우분투 세미나에서 햇던 발표자료입니다. 제목은 하이브리드 앱 개발 개요입니다. 개요이기에 살짝 건드는 수준입니다.TRANSCRIPT
하이브리드 앱 개발개요비트모바일
장봉수
목 차
앱이란 ? 앱 개발의 종류 왜 하이브리드 앱인가 ? 하이브리드 앱 개발시 유의할점 웹을 앱으로 만들어주는 Tools 하이브리드 UI 개발 프레임워크 개발과정 ( 하이브리드 앱 )
1. 앱이란 ?
어플리케이션의 줄임말 플랫폼 안에 들어가는 한가지 목적을 위해 만들어진 응용
프로그램 ( 게임 , 일정관리 , 음악 등 ) 애플의 앱스토어 같은 응용 소프트웨어 가게에 올려서 팔 수 있음
이외에 크롬 , 윈도우 8, 플레이스테이션에서 운영하는 부분에 대해서도 앱이라함
2. 앱의 종류
App
Native App
HybridApp
WebApp
Native App
HybridApp
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. 앱의 종류 – 하이브리드 앱 - 다음
Native 부분
Web 부분
3. 왜 하이브리드 앱인가 ?
네이티브 앱에 비해 , 유지보수 용이
다양한 플랫폼에 대응 가능 다양한 기기와 해상도에도 대응 가능 (HTML5 와 CSS3 이용 , 웹앱과 같음 )
웹 기술이 주이지만 , 마켓에도 팔 수 있음 ( 일반적으로 web-view 만 있는 웹앱은 애플 앱스토어에서 웹앱으로 따로 팔 수 있지만 , 일반 앱으로는 등록 불가 )
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 로 구성되어 개발이 어려움
Hybrid App
Native App Web App
7. 개발과정 ( 하이브리드 앱 )
UI 개발(WEB 환경 )
APP 패키징 네이티브 개발
Q & A" 새로운 작품을 만든다는 것은 아무도 발을 들여놓은 적이 없는 미지의 초원을 걸어가는 느낌이다 ."
사카구치 히로노부 ( 파이널 판타지 개발자 )