No.003 하이브리드 앱 개요

3. 하이브리드 앱 개요

 

1. 하이브리드 앱의 개요

 1) 하이브리드 앱의 개념

 ● 웹 앱 개발 → 네이티브 앱 → 하이브리드 앱

 - 어플리케이션의 줄임말

 - 플랫폼 안에 들어

 

 ● 하이브리드 앱의 기술

 (웹 기술, HTML5, CSS, Javascript) + (네이티브 코드, Objetive-C, Java, C#)

 

 ● 하이브리드 앱의 장점

 - 네이티브 앱에 비해 유지보수가 용이함

 - 다양한 플랫폼에 대응 가능함

 - 웹 기술이지만 앱스토어나 구글 플레이에서도 판매 가능

 

 ● 하이브리드 앱의 특성

 - 주요 화면 부분은 웹 앱의 특성을 살려서 구현함

 - 어플리케이션의 주요 내용이 서버에 있음

 - 자유롭게 내용을 수정할 수 있음

 - 단말기의 특정 센서(사진기, GPS)를 사용할 수 있음

 - 사용자가 별도의 URL 입력 없이 앱을 사용할 수 있음

 

 ● 하이브리드 앱의 구성 요소

 - PhoneGap, Sench Touch 등 : 스마트 폰 고유의 기능을 제어하기 위한 플랫폼

 - jQueryMobile, Jqtouch 등 : 스마트환경에 적합한 UI를 제공해주는 프레임 워크

 - HTML5, CSS 등 : 웹 기술

 

 2) 하이브리드 앱의 사례들

 ● 은행

 ● HOT SPOT

 ● Chosun Biz

 ● 아웃백

 ● Daum

 

2. 웹 앱, 네이티브 앱, 모바일 웹의 개요와 차이점

 1) 웹 앱, 네이티브 앱, 모바일 웹에 대한 개념

 ● 웹 앱 : 웹 사이트를 제작할 때 사용되는 앱 종류 중 하나

 - 단말기에 구애를 받지 않음

 - 호환성이 높음

 - 자동적으로 업데이트가 되어 사용자 편의성이 뛰어남

 - 인터넷이 항상 연결이 되어있어야 사용이 가능함

 

 ● 네이티브 앱 : 현재 사용자들이 말하는 앱의 대부분이 해당됨

 - 모바일에 저장된 주소록, 파일 등 고유정보를 변경 가능함

 - 각종 센서의 제어가 가능함

 - 커널과 UI 프레임 워크가 제공하는 서비스를 직접 호출, 실행하므로 실행속도가 매우 빠르고 안정적임

 - 앱의 업데이트는 앱스토어를 통해서만 이루어짐

 

 ● 모바일 웹 : 현재 모바일 브라우저에서 볼 수 있는 대부분의 앱

 - 스마트 폰에 내장된 웹 브라우저를 통해 접속하는 형태

 - 일반적인  웹 기술로 개발함

  ex) HTML, CSS, JavaScript, JSP, PHP, ASP, NET

 - 단말기의 화면을 염두에 두고 제작함

 - 앱에 비해 접속속도가 느림

 

 ● 네이티브 앱과 웹 앱의 장, 단점 비교

비교항목	네이티브 앱 방식	웹 앱 방식
실행속도	실행속도가 빠르고, 안정됨	네이티브 앱 방식대비 느리게 작동함
보안성	시스템 내부의 처리 정보 노출 또는 처리 중간에 조작 등이 거의 불가능함	처리도중에값 조작이 가능함
장치제어	주변장치들을 완전하게 제어 및 통제가 가능함	주변 장치 제어 및 통제가 불가능함
장치제어	- 다양한 UI 및 UX 기능 구현이 가능함 - 음성인식, 조작, 번역 등과 같은 서비스까지 모두 활용 가능함	고안된 웹 브라우저의 UI 방식만 사용 가능함
Stand-Alone 지원	기기 내부에서 대용량 파일 및 데이터 처리가 매우 용이함	대용량 파일 및 데이터 처리의 제한이 많음
앱 개발 및 운영	운영체제별로 각각 개발해야 함	앱을 한번만 개발하면 웹 브라우저만 있으면 실행이 가능함

 

 2) 하이브리드 앱과의 차이점

 ● 웹앱, 네이티브 앱과의 차이점

 - 웹 기술로 개발됨

 - 콘텐츠 영역은 HTML 기반의 웹 앱으로 제작함

 - 모바일의 고유정보를 이용하고 하드웨어를 제어함

 - 외부 형태는 네이티브 앱이지만 실제 내부는 모바일 웹 앱으로 실행함

 - 별도의 하이브리드 앱 프레임워크가 필요함

 

 ● 네이티브 앱, 웹 앱, 하이브리드 앱의 비교

	네이티브 앱	웹 앱	하이브리드 앱
단말기에 설치	O	X(브라우저 이용)	O
앱스토어 판매	O	X	O
업데이트	불편	용이	불편
단말기 기능 이용	모두 가능	사용 불가	모두 가능
반응속도	가장 빠름	빠름	약간 느림
개발환경	스마트폰별	표준	표준

 

3. 하이브리드 프레임워크

 1) 개발 프레임워크

 ● PhoneGap

 - Cross Platform Mobile Aplication Framework

 - Web App을 Native App으로 패키징할 수 있음

 - Ajax 기술 전문기업인 Nitobi에서 개발한 오픈소스

 - 기존 웹 앱에서 불가능했던 디바이스 기능들을 Javascript를 통해서 접근이 가능하도록 함

 

 ● Titanium

 - Web App을 Native App으로 변환함

 - 개발은 HTML, CSS, Javascript를 사용하지만 결과물은 네이티브 코드로 변환함

 - 디바이스 기능을 자체적으로 제공함

 - Titanium의 자바스크립트를 사용함

 - 네이티브 코드로 변환하기 위해서는 Titanium에서 제공한 API만 사용해야 함

 

 ● Appspresso

 - KTH에서 개발된최신의 프레임워크

 - 유일한 국내 하이브리드 프레임워크

 - 웹 앱을 네이티브 앱으로 패키징함

 - 통합 개발환경 지원, Eclipse IDE

 - 풀 하이브리드 방식 → Web View 이용하지 않음

 

 

 2) UI 프레임워크

 ● jQuery : 자바스크립트의 생산성을 향상시켜주는 자바스크립트 라이브러리

 - jQuery를 이용하면 순수한 자바스크립트로 코딩하는 것 보다 10배 이상 생산성을 높일 수 있음

 - 컴포넌트, 레이아웃, 테마 등 모바일 웹 어플리케이션의 제작과정을 쉽게 도와줌

 - 거의 모든 브라우저에서 사용 가능함

 

 ● Sencha Touch : 모바일 웹 어플리케이션 개발을 위한 자바스크립트 프레임워크

 - jQueryMobile 보다 강력한 기능을 제공하며 더 앱스러운 기능을 구현 가능함

 - Mobile에 최적호된 기능을 탑재함 → 폰과 태블릿 기기를 위한 프레임쿼크

 - HTML, CSS, Javascript 등 순수 웹 기술만으로 네이티브 스타일을 표현할 수 있음

 - jQuery는 HTML의 태그요소를 기반으로 동작하지만, Sencha Touch는 대부분 Script  영역에서 개발함