[모바일] 네이티브APP / 모바일WEB+APP / 하이브리드앱

1. 네이티브 앱

Native App

네이티브 앱은 우리가 흔히 말하는 '어플리케이션'을 의미합니다. 모바일 기기에 최적화 된 언어로 개발된 앱으로 안드로이드로 개발 된 앱을 안드로이드 SDK를 이용해 Java(자바) 언어로 만드는 앱과 IOS기반 SDK를 이용해 Swift(스위프트)로 만드는 대부분의 앱이 여기에 속함

 

네이티브 앱의 장점

• 성능이 웹앱, 하이브리드 앱에 비하여 가장 높다.
• 네이티브 API를 호출하여 사용함으로 플랫폼과 밀착되어 있다.
• 해당 언어에 익숙하면 더 쉽게 접근가능.
•  

네이티브 앱의 단점

• 플랫폼에 한정적이다.
• 언어에 제약적이다. 따라서 해당 언어와 플랫폼의 API를 다루는데 익숙해져야한다.

 

2. 모바일 웹앱

WEB + APP

웹앱은 모바일웹과 네이티브앱을 결합한 형태로 모바일웹의 특징을 가지면서 네이티브앱의 장점을 갖고 있습니다. 모바일 웹 보다는 조금 더 모바일에 최적화 된 앱을 의미 합니다. 웹앱도 모바일 웹 처럼 일반적인 웹기술로 개발되고 모바일 브라우저에서 실행되지만 풀 브라우저 방식이 아닌 단일 페이지 방식으로 화면을 진화해 속도가 빠르다.

 

모바일 웹 web이란

모바일 웹은 모바일에서 PC용 사이트의 글자폰트와 이미지, 터치 아이콘 플레시 등 데스크탑 브라우저에서 실행되는 기능을 모바일에 맞추어 표현한 사이트를 의미한다. 쉽게말해 PC용 홈페이지를 모바일 스크린의 크기에 맞춰 줄여 놓은 것이라고 생각하면된다.

 

모바일 웹앱의 장점

• 웹사이트를 보는 것이기 때문에 따로 설치할 필요가 없다.
• 모든 기기와 브라우저에서 접근가능
• 별도 설치 및 승인과정이 필요치 않아 유지보수가 용이하다.

모바일 웹앱의 단점

• 플랫폼 API 카메라등 사용할 수 없고 오로지, 브라우저 API만 사용할 수 있다.
• 친화적인 터치앱을 개발하기가 약간 번거롭다.
• 네이브티, 하이브리드 앱보다 실행이 까다롭다. (브라우저를 열고 검색해 들어가야한다.)

 

3. 하이브리드 앱

하이브리드 앱은 기본적으로 '네이티브 앱 + 웹앱 ' 이라고 생각하시면 쉽습니다. 일반적으로 네이티브웹에 웹 View를 띄워 웹앱을 실행시키는 것이 보현적이며 양쪽의 API를 모두 사용 가능

하이브리드 APP의 장점

• 네이티브 API와 브라우저 API를 이용한 다양한 개발이 가능
• 웹 개발 기술을 사용해 앱을 개발할 수 있다.
• 한 번의 개발로 다수의 플랫폼 대응

하이브리드 APP의 단점

• 네이티브 기능에 접근하기 위해선 네이티브 개발 지식이 결국 필요함.
• 웹뷰에서 앱을 실행하는 경우이기 때문에 앱의 성능이 곧 브라우저의 성능.
• UI 프레임 워크 도구를 사용하지 않는다면 개발자가 UI를 제작해야함.

2020년 개발자가 사용하는 웹 프레임워크 TOP5

1. Vue.js
2. React.js
   • UI를 구축하는데 널리 사용되는 JavaScript 라이브러리입니다. '구성요서'라고하는 작고 격리된 코드 조각에서 복잡한 UI를 구성할 수 있는 선언적이고 동적이며 유연한 JavaScript 라이브러리입니다. 대화형 UI를 만들고 앱을 각 상태에 대한 간단한 보기를 디자인합니다. 자체 상태 관리하는 캡슐화된 구성요소를 빌드 한 다음이를 구성하여 복잡한 UI를 만든다. 기존코드를 다시 작성하지 않고도 React에서 새로운 기능을 개발할수 있다.
3. Angular
4. Angular.js
5. JQuery

2019년 하이브리드 앱 개발 프레임워크 TOP5

1. React Native
   • 2013년 Facebook에서 출시했으며, 많은 앱 개발자들에게 선택받았습니다. JavaScript 기반의 오픈 소스 크로스 플랫폼 앱 개발 프레임워크로, 개발자는 더욱 짧은 개발 주기와 빠른 개발 속도로 고성능의 모바일 앱을 개발할 수 있게 되었습니다.
   • React Native는 JSX 기반(JavaScript-XML) 프레임워크라는 장점이 있습니다. 모바일 앱 개발을 위해 Swift나 Java와 같은 복잡한 프로그래밍 언어를 학습할 필요가 없지요. 프레임워크에서 React Native 코드를 네이티브 뷰로 변환한 다음 렌더링을 수행하므로 유저에게 네이티브와 같은 환경을 제공합니다.
2. FLUTTER
3. IONIC
4. XAMARIN
5. ADOBE PHONEGAP