웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UI/UX Planner and Designer
Humans dreaming of new creation through the UI/UX



WEBDESK
Web Standard
HOME WEBDESK Web Standard
네이티브, HTML5, 하이브리드 모바일 앱: 장단점 분석하기
Posted by kimdirector | 2015.10.06 | Hit : 2774
네이티브 HTML5 하이브리드 모바일 앱
목록보기이전보기
다음은 모바일 앱을 개발하는 세 가지 주요 방법이다. 각각의 스냅샷에는 간략한 설명, 가장 적합한 분야, 장단점, 관련 개발 도구가 포함되어 있다.


 
네이티브 앱 개발
 
네이티브 앱 개발에서 모바일 앱은 iOS, 안드로이드, 윈도우 폰을 비롯한 특정 모바일 플랫폼에 맞게 작성된다. 모바일 기기에 상주하며 일반적으로 플랫폼 제작사의 개발 도구를 사용해 만들어진다. 다른 플랫폼에서 코드를 재사용할 수 없다.
 
가장 적합한 분야…
- 소비자용 앱
- 게임
- 그래픽 및 멀티미디어 집약적인 앱
 
장점
- 특히 게임의 경우 웹 기반 앱 또는 하이브리드 앱에 비해 일반적으로 높은 성능
- 기기의 모든 센서, 하드웨어, 연락처, 알림에 접근 가능
- 애플 앱 스토어, 구글 플레이, 윈도우 스토어와 같은 공개 앱 스토어를 통해 배포
- 설치 시 즉시 기기의 홈 스크린에 아이콘 표시
 
단점
- 개발자 부족
- 플랫폼별로 따로 앱을 만드는 데 따르는 비용 소비
- 플랫폼별로 별도의 코드 베이스를 관리하는 데 따르는 비용과 시간 소비
- 긴 개발 시간
- 상이한 개발 시간으로 인해 플랫폼 간 버전이 일치하지 않을 수 있음
- 각 앱 스토어의 승인 절차를 거쳐야 하므로 앱 배포 속도가 느려질 수 있음
 
개발 도구
- 애플 iOS: 엑스코드(XCode)
- 안드로이드 : 구글 안드로이드 스튜디오(Google Angoid Studio)
- 윈도우 폰: 비주얼 스튜디오(Visual Studio)
 
 
 
HTML 5, CSS, 자바스크립트로 만들어지는 웹 앱
 
웹 앱은 HTML 5, CSS, 자바스크립트로 만들어진다. 모바일 기기의 브라우저를 통해 접근할 수 있고 인터랙티브한 특성을 갖는다. 연락처 목록이나 센서와 같은 모바일 기기의 기능에 접근하는 데 제약이 있다. 한 번만 만들어 웹 서버에 배포하면 된다.
 
가장 적합한 분야…
- B2B 및 B2E 앱, 내부 회사 서비스 및 리소스
 
장점
- 웹 표준을 사용하여 제작되지만 “응답성이 높은” 앱으로 설계됨
- 기업에서 기존 웹 개발자를 활용해 제작 가능
- 가장 비용이 덜 드는 앱 제작 방법
- 하나의 코드 베이스만 관리하면 됨
- 신속한 수정, 업데이트 및 배포 가능
 
단점
- 인터페이스가 표준 네이티브 앱과 다를 수 있음
- 특히 게임 및 그래픽, 멀티미디어 성능이 네이티브 앱에 비해 떨어짐
- 사람들이 새로운 앱을 찾는 주 경로인 앱 스토어에 없음
- 기기의 센서, 하드웨어, 알림과 같은 기능에 대한 접근이 제한될 수 있음
- 사용자가 직접 아이콘을 배치하지 않는 한 기기의 홈 스크린에 아이콘이 표시되지 않음
 
개발 도구
HTML 5, 자바스크립트, CSS를 사용하여 웹 페이지를 구축하는 데 사용되는 모든 개발 도구는 모바일 웹 앱을 제작하는 데 사용 가능하다. 
 
- 앵귤러JS(AngularJS) – 구글이 관리하는 오픈 소스 웹 애플리케이션 프레임워크
- Ember.js – 오픈 소스 자바스크립트 웹 애플리케이션 프레임워크
- 리액트(React) – 페이스북 등이 구축하고 관리하는 오픈 소스 자바스크립트 라이브러리
- Backbone.js : 자바스크립트 라이브러리
- J쿼리(JQuery) : 자바스크립트 라이브러리
- 미티어(Meteor) : 오픈 소스 자바스크립트 프레임워크
- 부트스트랩(Bootstrap)과 부트스트랩 자바스크립트(Bootstrap Javascript) : “응답성”을 강조하며 모바일을 우선하는 CSS 프레임워크
 
 
 
하이브리드 앱
하이브리드 앱은 HTML 5, CSS, 자바스크립트를 사용해 만들어진 다음 래퍼 안에서 다양한 모바일 플랫폼에서 네이티브 앱으로 실행된다. 표준 웹 개발을 사용하지만, 최종 앱은 기기에서 네이티브 앱으로 실행된다. 네이티브 앱과 웹 기반 앱의 장점만 결합하기 위한 방법이다.
 
가장 적합한 분야…
- B2B 및 B2E 앱
- 내부 회사 서비스 및 리소스
- 여러 플랫폼에 네이티브 앱을 배포하고자 하는 기업
 
장점
- 웹 표준을 사용하여 제작(API를 통해 폰 기능에 접근하기 위한 약간의 특수한 코딩이 필요)
- 기업은 기존 웹 개발자를 활용하여 하이브리드 앱 개발 가능
- 신속한 수정, 업데이트 및 배포 가능
- 각 플랫폼에서 네이티브 앱으로 실행됨
 
단점
- 인터페이스가 표준 네이티브 앱과 다를 수 있음
- 특히 게임 및 그래픽, 멀티미디어 성능이 네이티브 앱에 비해 떨어질 수 있음
- 일반적으로 장치의 모든 센서 및 하드웨어에 접근할 수 있지만 새 기능을 지원할 때까지 다소 시간 지연 발생 가능
- 네이티브 애플리케이션 “셸”의 각기 다른 코드 베이스를 유지해야 할 수 있음
- 개발자는 웹 앱을 네이티브 앱으로 변환시키기 위한 부가적인 소프트웨어를 사용해야 함
 
개발 도구
기존 웹 코드를 가져와 네이티브 앱으로 변환해주는 도구부터 일체의 개발 환경에 이르기까지, 세 가지 중 개발 도구가 가장 다양하다. 다음은 그 중 극히 일부일 뿐이다.
 
- 아파치 코도바(Apache Cordova) : HTML 5, CSS, 자바스크립트를 사용하는 모바일 웹 앱을 가져와 이를 기반으로 네이티브 모바일 앱을 빌드하는 오픈 소스 플랫폼
- 어도비 폰갭(Adobe PhoneGap) : 어도비에서 만든 아파치 코도바의 변형
- 알파 애니웨어(Alpha Anywhere) : 웹 앱을 제작하고 이를 네이티브 앱으로 배포할 수 있게 해주는 개발 환경. 프로그래밍 경험이 부족하면 부족한대로 사용 가능하고, 숙련된 프로그래머라면 자신의 코딩 기술을 활용할 수 있다.
- 아이오닉 프레임워크(Ionic Framework) : 앵귤러JS 및 코도바와 연계해 웹 앱을 기반으로 네이티브 앱을 빌드하는 사용자 인터페이스 중심의 프레임워크
- 아웃시스템(OutSystems) : 시각적 도구를 사용한 웹 앱/네이티브 앱 빌드 지원
- 코니(Kony) : 다양한 플랫폼의 네이티브 앱 빌드를 위한 다양한 도구를 제공하는 플랫폼
- 자마린(Xamarin) : 네이티브 앱 빌드를 위한 크로스 플랫폼 개발 플랫폼
- 앱셀러레이터(Appcelerator) : 자바스크립트로 앱을 작성한 다음 이를 기반으로 네이티브 앱을 빌드할 수 있게 해주는 크로스 개발 플랫폼
Posted by kimdirector | 2015.10.06 | Hit : 2774
Origin http://www.itworld.co.kr/news/95791
Tags 네이티브 HTML5 하이브리드 모바일 앱
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=webaccessibility&no=118

COMMENT
목록보기 이전보기
WEBDESK
Design Review
Webdesign Report
Web Plan Report
Design Inspiration
Mobile Life
Web Standard
Recommend Site
Insight Story
Best View Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile UXD IT Information Web Identity Everyday Story Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
자산 퍼스널 브랜드 안드로이드 iPad 비즈니스 CSS 플랫 공통점 혁신 프리젠테이션 디자인 웹서핑 디지털 프로젝트 컨텍스트 Extensible Web 웹표준 CIP 디자인 무료 아이폰 NHN 트랜드 Dashel 윈두우 영감 블로그 디지털 혁명 웹 2.0 플랫폼 캘린더 메일 아이디어 여행 타이포그래피 생산성 일러스트 생각 리뉴얼