Native App / Web App / Hybride App의 개념

안녕하세요 코딩초밥입니다 ㅇㅅㅇ

개발를 처음접하시거나 Android studio로 Native app만 만드는데 생각보다 잘안되서 힘드신분들많으시죠??

예. 그게 바로 전데요 😄😅

​

​

'어플 개발한다'라는 말에 Native app가 아닌 다른 개발방법도 포함되어있는거 아시나요?

Native app이 본인과 잘 맞지않는다면 다른곳에 시선을 돌려보는것도 방법이 될수있으실겁니다.

고로 오늘은 그 다른 방법! 무엇이 있는가와 어떻게쓰이는가를 중점적으로 파보겠습니당!

 

방법 들을 보시고 3가지 개발 방법 모두

블러그에 하나씩 진행하오니 궁금하시다면 구경하시길 바랍니당~ 😁😍

 

 

---

Native App / Web App / Hybride App

Native App

"가장알려져있는 앱개발방식입니다"

네이티브 앱은 안드로이드 와 ios로 개발방식이 나누어져있으며 FramWork도 다릅니다.

*Framwork - 각 개발자 마다 파일정리하는것도 다르고 방식이달라서 일정부분통일하기위한 프로그램을 지칭.

 

Android

사용언어 - java, kotlin, xml

Framwork - android studio

 

Ios

사용언어 - object-c,swift

Framwork - xcode

*대표적인것들만 써놓은겁니다

 

1-1.Native APP의 장점.

코드를 직접 쓰다보니 성능이 웹앱, 하이브리드 앱과 비교해서 가장 높습니다.

네트워크가 없다하더라도 기본 틀은 켜집니다.

해당 언어를 써왔던 개발자라면 제일 친숙하게 활용가능합니다.

​

1-2.Native APP의 단점.

하나의 네이티브어플을 만들고 android도 만들고 ios 도 또 만든다면

아마 디자인도 조금씩다르고 코드도 다르다보니 시간도 더욱 걸릴것입니다.

만드는것에도 한정이 있기에 제약이 있습니다.

그리고 업데이트도 하려면 버전코드를 바꾸어서 다시 마켓에 올리는 과정을 거쳐야하죠.

 

---

Web App

"Web으로 작업하고 Native App으로 보여주는 App입니다."

​Native App의 단점을 보완 하고자 Webapp을 쓰는 경우가있습니다.

 

간단하게 설명하자면 android 개발자 님들이 안드로이드 스튜디오에서

<webview> 를 사용하여 NativApp에서 Web을 키게 한다면 그게 간단한 Web app이 될수있는겁니다.

인제 그 web자체를 꾸미면 되겠죵?

 

---

WebAPP를 만들려면 3가지를 다루어야합니다.

 

html- 웹페이지를 전체를 다루는 코드

css -html을 꾸미는 디자인

javascript -html의 설정을 만드는 코드

---

디자인 라이브러리의 종류

 

javascript를 만드는데 더효율적이게 만드는 디자인라이브러리또한있다.

JQM- javascript 코드 가 어려워서 만든 JQUERY 를 이용해서 모바일 앱을 이용해서 만든 게 JQM (JQUERY MOBILE)

Bootstrap - 모바일앱이 너무 디자인이 재각각이여서 통일시키려고 만든 라이브러리.

---

WebAPP의 Framework

 

1. Angular -한시대를 풍미했던 프로그램..

2.React - 현재 제일많이 쓰는 프로그램.

3.Vue - 신흥강자.

​

---

PHP Framework

 

codeigenitor

lalabel

 

2-1WebAPP의 장점.

업데이트를 빠르게 진행할수있습니다. 유지보수가 아주 용이합니다

모든기기와 브라우저에서 접근할수 있습니다.

native app보다 비교적 간단하게 만들수있습니다.

 

2-2WebAPP의 단점.

1. 느리다.

- 버튼하나를 누르면 앱보다 어플리케이션 운영채제가 먼저 반응하기때문에

어플 운영체제- 웹뷰 이기때문에 2중으로 실행되는것이기때문에 느립니다

(그래서 게임은 못만들겠죠?)

​

2. 핸드폰의 모빌리티 기능을 사용하질못한다.

카메라 안됨. 블루투스 안됨. 현재 위치 gps (현재는가능함) . 내 갤러리에서 프로필사진못올림. 전화안됨.

핸드폰의 기능들을 가져다 쓸수가없습니다.

​

​

여기서 check!

* webview+ PWA

google에서 만들었다. 이건 앱스토어에 올라가지도않는다.

한 웹사이트를 들어가기만하면 설치여부를 물어보고 바로 인스톨받아서 쓸수있게한다.

[ 다운 받으시겠습니까?]

푸시서비스도 가능하다. 하이브리드가 좋아서 웹뷰에서도 이 방법이 나왔다

ms사와 손잡고 지금 google에서 밀고있다.

​

---

Hybride App

"WebView의 장점과 Android 장점 만 빼서 쓸수없을까?

그래서 만듬."

​

HybrideApp -

1.webview(디자인) + native code(기능)

ex> webview안에 버튼을 넣으면 버튼을누른다고 webview는 제어를못한다.

그래서 webview안에 native ui를 오버랩을 한다.

"간단히 말하자면, 보여지는건 webview 기능은 native app이 실행하는것이다."

​

webview에서 javascript(기능) 과 java는 연동가능함 그래서 앱만드는것이 가능하다.

​

2-1HybrideAPP의 장점.

native app과 webapp의 장점만 끌어다 쓴 장점of 장점.

​

2-1HybrideAPP의 단점.

hybride app을 만드려면 장점이 단점이 된다.

웹앱과 네이티브앱의 장점을 다가져왔기떄문에 그기능들은 웬만큼은 다룰줄알아야 쓸수있다는점이다.

"javascript, java code 다 알아야한다."

​

 

여기서 check!

[Phongap]이라는 회사에서

native code가 어려우니까

javascript로 native code를 제어할수있는 기능을 할수있게만들었다.

허나 너무 느려졌다.

​

그 이후

Adobe사에서 phongap 라이센스를 사서 [Cordova]를 무료로 만들었다.

그런데 cordova에서도 문제가 있다고 생각들어서 다른 Framwork을만들었다.

자, 인제 일을 하기위해서 쓰이는 프로그램

Framwork의 종류를 보자

 

HybrideAPP Framwork 종류

​

1.Ionic : angular와 cordova 기반으로만든 Framwork. java코드를 자동으로 만들어줌.

안드로이드 기술을다쓸수있다해도 블루투스기능은 아직 못씀. 블루투스는 무조건 native app 느리다는단점.

​

2.React Native ​: 주목. 느리지않은 하이브리드 앱이 가능하게되었다

페이스북 팀에서 만든 라이브러리. React를 버전업해서 하이브리드 전용으로 만들었다.

실제로 페이스북은 이 라이브러리로 만들어져있다.

<List>로 쓰면 native app <Listview>로 실제로 바뀐다. 장점은 javascript로 webview로 짜도

native app의 코드로 1:1 바뀌어서 결국 구글스토어나 앱스토어에 올릴때는

나는 javascript로 썼는데도 불구하고 java로 native app으로 올라간다. 속력의 문제가 없으며 심지어 어떤부분은 동작이 더 빠른경우도있다.

그래서 제 2의 하이브리드 앱의 시대가 왔다고 한다.

[javascrip+ xml]

제 블러그에 기본 사용법을 알려드리겠습니다.

 

3.Flutter

구글에서 만든 React Native와 비슷하다

dart 라는 언어를 기반으로 쓰나 사용하기 꽤 까다롭다.

​

4.xarmarin

있으나 국내에서는 거의 쓰지않는다. 알아만 두자.

 

---

어떤게 제일 좋다 하는건 없습니다. 만들고싶은 어플리케이션의 종류와 성격에 따라 선택해서 만드시면될것같습니다. 다음 글에서는 WEBAPP 을 만들때 써야하는 HTML과 CSS, JAVASCRIP 에 대해 말하겠습니당

감사합니당