네이티브 앱 vs 크로스플랫폼 앱 vs 모바일웹앱 vs 하이브리드 앱

공부를 하다가 네이티브 앱/크로스플랫폼 앱/모바일웹 앱/하이브리드 앱의 차이를 정확하게 몰라 찾아서 정리를 하였다.

 

 

# 네이티브 앱 (Native app)

- 우리가 일반적으로 앱스토어(iOS-아이폰)나 구글플레이스토어(Android-삼성폰)에서 다운받아서 쓰는 앱을 의미한다.

- 모바일기기에 최적화된 언어로 개발된 앱으로, 안드로이드 SDK를 이용해 Java, Kotlin 등의 언어로 만든 앱, iOS기반 SDK를 이용해 Swift로 만든 대부분의 앱을 의미.

	안드로이드	iOS
개발환경	안드로이드 스튜디오	XCode
(현재) 프로그래밍 언어	코틀린(Kotlin)	스위프트(Swift)
(과거) 프로그래밍 언어	자바(Java)	오브젝트-C(Object-C)

 

- 이렇게 각 OS에 맞는 언어로 iOS 앱개발자, Android 앱개발자들이 각각 앱을 개발한다.

- 작동 기기에 최적화된 형태로 개발되기 때문에 카메라, 음성검색 및 인식, 2D, 3D, VR 기능도 가능하여 활용 범위가 넓다. 따라서, 카메라, GPS, 블루투스 등 기기 내 장치들을 세밀히 다루거나 영상편집 앱과 같이 성능을 최대한 사용해야 하는 앱은 네이티브 앱으로 만드는 것이 좋다.

ex: 페이스북, 인스타그램, 유튜브, 카카오톡 등

 

장점

- 모바일 웹앱, 하이브리드 앱에 비하여 더 빠르고 더 효율적(성능, 기능면)

 

단점

- 플랫폼에 한정적이다 : iOS용 앱은 iOS 운영체제 기기에서만, Android용 앱은 Android 운영체제 기기에서만 사용가능.

- 모바일 운영체제별로 앱을 만들어야하므로 개발시간이 길고 비용이 많이 든다.

- 앱을 만들더라도 Google(Android), 애플(iOS)의 승인을 따로 받아야 스토어에 등록, 배포 가능.

- 배포 이후 앱의 기능을 수정해야 한다면 다시 등록과 승인의 절차를 걸쳐야 하므로 번거롭다.

- 수정한 앱이 다시 등록되었다 하더라도 유저가 주기적으로 앱을 업데이트 시켜줘야 수정된 버전을 사용할 수 있다.

 

구글링을 통해 찾은, 영어로 된 좋은 설명이 있어 잠시 가져와봤다.

Native mobile apps are built for a specific platform, such as iOS for the Apple iPhone or Android for a Samsung device.

They’re downloaded and installed via an app store and have access to system resources, such as GPS and the camera function. Mobile apps live and run on the device itself. Snapchat, Instagram, Google Maps, and Facebook Messenger are some examples of popular mobile apps.

네이티브 (모바일)앱은 애플 아이폰의 iOS, 삼성폰의 안드로이드 같이 특정 플랫폼에 built되어진다. 앱스토어를 통해서 다운로드나 설치가 되고, GPS나 카메라 기능같은 시스템 자원들에 접근할 수 있다. 모바일앱은 디바이스 그 자체에서 구동되어진다.

스냅챗, 인스타그램, 구글맵, 페이스북 메신저가 인기있는 모바일 앱의 예들이다.

 

# 크로스 플랫폼 앱 (Cross-Platform app)

- 네이티브 앱이 OS간 호환이 불가능하다는 한계점을 개선하고자 등장

- 하나의 개발언어로 Android, iOS에서 사용할  수 있는 앱을 만들 수 있다.

- 대표적인 개발도구 : 구글에서 개발한 Flutter, 페이스북이 개발한 React Native, 마이크로소프트에서 개발한 Xamarin.

- 위 개발도구 중 하나를 활용하여 코드를 작성하면, 각 OS에 맞춰 코드를 컴파일하고 실행할 수 있다.

 

 

장점

- 하나의 개발 언어와 도구로 안드로이드와 iOS 모두 동작할 수 있는 앱을 만들 수 있다.

- 따라서 네이티브앱과 비교 시, 개발과 운영에 필요한 비용과 시간 절약.

 

단점

- 네이티브 앱만큼 높은 성능과 OS에서 제공하는 API 활용 어려움.

- 크로스 플랫폼에 지나치게 의존하게 된다. OS에서 새롭게 API를 업데이트해도, 크로스 플랫폼에서 지원해 줄 때까지 사용 불가능.

- 디버깅이 까다로움. 크로스플랫폼 측 버그가 발생했다면, 해당 플랫폼 개발자가 버그를 해결할 때 까지 기다릴 수 밖에 없다.

- 예시 : 실제로 Airbnb는 초기에 React Native로 서비스를 개발/운영해왔으나 위와 같은 이슈로 2018년부터 네이티브 앱을 활용.

 

 

 

# 모바일 웹앱 (Mobile Web app)

- 모바일 웹 + 네이티브앱을 결합한 형태.

- 간단하게 말하면, 모바일 웹인데 앱 모습(UX/UI)으로 되어있는 것.

즉, 내가 이해한 대로 예를 들어서 설명을 해보자면 구글 또는 사파리 등의 브라우저를 통해 네이버를 들어가게되면, 네이버 웹사이트지만 우리가 컴퓨터를 통해 보여지는 네이버메인화면이 아닌 폰 크기에 맞춰서 조정되어 보여진다.(모바일 웹)

이 모바일웹이 거의 앱과 유사한 형태로 되어있으면 그걸 '모바일 웹앱'으로 정의하는 것으로 이해했다.

(만약 틀렸으면 지적 부탁드립니다!)

실제 네이버 모바일웹앱과 네이버 네이티브 앱 화면은 아래에 나와있다.

 

영어로 된 설명이 있어 잠시 가져와봤다.

Web apps are accessed via the internet browser and will adapt to whichever device you’re viewing them on.

They’re not native to a particular system, and don’t need to be downloaded or installed. Due to their responsive nature, they do indeed look and function a lot like mobile apps—and this is where the confusion arises.

 

웹앱은 인터넷 웹브라우저를 통해 접근하고, 웹앱을 볼 수 있는 어떤 디바이스에서도 적용할 수 있다. 웹앱은 특정 시스템의 네이티브가 아니고 다운로드 또는 설치를 할 필요가 없다. 웹앱들의 반응성의 성질때문에, 웹앱이 모바일 앱처럼 보이고 기능을 해서 유저들 사이에서 많은 혼란을 초래한다. 

 

장점

- 유저가 따로 업데이트를 시켜줄 필요없이 언제든 최선 버전으로 유지할 수 있다.

- 웹앱은 정확히 '애플리케이션'이 아니고, '웹사이트'이다. 그러므로 안드로이드용/iOS용 앱을 따로 개발할 필요 없이, 웹개발만으로 개발할 수 있다. 

- 웹 개발을 통해 만들어지므로 상대적으로 개발 기간이 짧고 비용이 적게 든다.

 

단점

- 앱스토어에 등록이 불가능하다.

- 디바이스 기능(카메라, 음성인식 등)을 사용할 수 없고 오로지 브라우저 API만을 사용할 수 있다.

** 디바이스 기능을 사용할 수 없는 단점에 대하여..

사실 모바일웹앱으로 카메라를 사용해본적이 없어 직접 해보았다.

 

 1) 먼저 Google앱을 통해 네이버(네이버 모바일 웹앱)를 들어간다.

아래 사진은 네이버앱(네이티브앱)이 아닌, 모바일 웹앱으로 들어갈 때의 네이버 메인화면!

 

 2) 중간 동그란 버튼을 클릭 → '렌즈'를 클릭하여 카메라가 작동되도록 하였다.

 

 3) '렌즈'를 클릭하니 네이버앱(네이티브앱)이 열리면서 카메라가 작동이 되었다. 그래서 네이버앱을 삭제하고 다시 1번부터 실행하니 아래와 같은 화면이 나왔다.

 

4) '네이버앱 설치하기'를 누르면 → 네이버앱 설치화면으로 이동. '모바일웹으로 열기'를 클릭 → 아래와 같이 다시 모바일웹앱 메인화면으로 돌아온다. 메인화면으로 돌아오고 카메라는 작동되지 않았다.

카메라 뿐만 아니라 음성인식도 위와 동일하게 모바일웹앱에서 작동되지 않았다.

즉, 모바일웹앱으로는 디바이스 기능 사용이 제한적이다.

 

이러한 웹 앱은 하이브리드 앱 또는 PWA의 형태로 보완되어 제공된다.

(PWA는 다음에 다시 정리할 예정!)

 

 

**참고

## 모바일 웹 (Native app)

- 웹인데 모바일 화면에 맞게 구성한 웹을 말한다.

- PC용 사이트의 글자폰트와 이미지, 터치 아이콘, 플래시 등 데스크탑 브라우저에서 실행되는 기능을 모바일에 맞추어 표현한 사이트.

- 모바일 브라우저를 통해 들어간 웹페이지가 모바일웹. 그 모바일웹 중 네이티브앱과 유사하게 개발되고 작동된다면 모바일 웹앱으로 부르는 걸로 이해했다.

 

 

 

# 하이브리드 앱

- 모바일 웹앱 + 네이티브앱이 합쳐진 것

- 겉보기에는 일반 앱(네이티브 앱)과 다를바 없지만, 실제로는 앱 안에서 웹앱을 불러오는 방식으로 실행된다.

- 일반적으론 네이티브 앱에 웹view를 띄워 웹앱을 실행시키는 것이 보편적

 

ex: 우리에게 너무나도 익숙한 네이버앱!

앱스토어/구글플레이스토어에서 다운받은 네이버앱(네이티브 앱)을 실행시켜보면 모바일웹앱과 크게 차이가 나지 않는다. 이는 네이버앱 안에서 네이버 모바일 웹앱을 불러와서 실행시켰기 때문이다.

 

네이버앱(네이티브앱) 메인화면

 

 

네이버 모바일웹앱 메인화면

장점

- 카메라, 음성검색 등 디바이스 기능이 사용 가능 : 네이티브앱의 장점인 모바일 디바이스 기능을 사용할 수 있다.

- 개발 및 유지보수가 쉽다 : 각 OS에 맞는 언어(swift, java, Kotlin)로 개발할 필요없이 HTML을 기반으로 개발되어 개발 및 유지보수가 쉽다.

- 한번의 개발로 다수의 플랫폼(iOS, 안드로이드 등)에 대응할 수 있다.

 

단점

- 아무래도 모바일에 최적화된 네이티브 앱보다는 속도가 느리다.

- 네이티브앱의 기능에 접근하기 위해서는 네이티브앱 개발지식이 결국은 필요하다.

 

 

 

* 참고

하이브리드 앱 VS 네이티브 앱 VS 웹앱 , 차이점은?

[모바일] 네이티브앱 vs 모바일웹앱 vs 하이브리드앱

 

모바일 앱 종류와 특징 - 네이티브 앱, 크로스 플랫폼, 웹 앱, 하이브리드 앱

 

앱들이 뭐 이리 많어..(네이티브 앱 vs 모바일 웹앱 vs 하이브리드 앱)

 

모바일 웹 vs 웹 앱 vs 하이브리드 앱 vs 네이티브 앱 [W7D2_코드스테이츠 PMB 12기]

 

네이티브 앱 vs 크로스 플랫폼 앱: 개념 및 장단점 비교