WEB/HTML이론

모바일 앱 개발 유형 총정리: 네이티브 vs 하이브리드 vs 웹앱

찐망고 2024. 8. 1. 12:34

 

안녕하세요 찐망고입니다.

 

제가 오늘은 네이티브앱, 하이브리드앱, 웹앱을 좀 쉽게 포스팅해보려고 해요.

그니까 머랄까 다들 대충은 알고 있잖아요?

대충은 아는데 내가 아는 게 맞나 싶을 때 이 포스팅 읽으면 해결됨

 

자 먼저

 

1. 네이티브 앱(Native App)

네이티브 앱은 특정 플랫폼(iOS, Android)을 위한 전용 언어와 개발 도구로 개발된 애플리케이션인데요.

iOS 앱은 Swift나 Objective-C로, Android 앱은 Kotlin이나 Java로 작성됩니다.

Kotlin개발자가 전세계에서 작년 연봉 1위라면서요? 부럽다..

 

주요 특징:

 

  • 최적화된 성능: 하드웨어와 직접 상호작용하므로 높은 성능과 속도를 제공
  • 네이티브 UI/UX: 플랫폼별 UI 가이드라인을 따라 사용자 경험이 최적화
  • 광범위한 API 접근: 카메라, 마이크, 가속도계 등 모든 네이티브 기능에 접근
  • 앱스토어 배포: 애플 앱스토어나 구글 플레이 스토어를 통해 배포

 

대표적인 네이티브 앱을 몇 가지 소개해보면

Facebook, Instagram, Youtube, GoogleMaps, Naver, TikTok, Netflix, kakaobank 등 많은

유명 앱들이 네이티브 앱으로 개발됩니다.

배달의민족, 버거킹, 요기요 등등도 마찬가지구요.

우리가 자주 접속하는 패션 이커머스 앱들도 일반적으로 네이티브 앱으로 개발되고요

에이블리나, 무신사 같은 앱들 말이죠  한국에서 가장 큰 이커머스 플랫폼인 쿠팡도 마찬가지고요

게임 앱같이 고사양 그래픽, 복잡한 애니메이션, 실시간 반응등을 필요로 하는 경우도 네이티브 앱으로 개발됩니다.

 

그럼 단점은 멀까요? 아무래도 큰 단점은 개발비용이겠죠?

플랫폼별로 다른언어로 개발해야 하니 비용이 높아질 수 밖에 없을거에요.

앱스토어를 통한 업데이트가 필요하고, 배포에 시간이 걸릴 수 있겠죠 

 

 

 

2. 하이브리드앱(Hybrid App )

하이브리드앱은 웹 기술인 HTML, CSS, JavaScript로 작성된 애플리케이션입니다.

이런 앱은 여러 플랫폼에서 사용할 수 있도록 코드를 한 번만 작성해도 되는데요.

하이브리드앱은 웹 애플리케이션을 네이티브 컨테이너에 감싸서 개발되며,

이 컨테이너는 웹뷰(WebView)라는 브라우저 컴포넌트를 사용해 웹 페이지를 표시합니다.

 

주요 특징:

  • 단일 코드베이스: 여러 플랫폼에서 동일한 코드를 사용할 수 있어 개발 및 유지보수가 용이
  • 네이티브 API 접근: 플러그인이나 프레임워크(예: Cordova, Ionic)를 통해 카메라, 위치 정보 등 네이티브 기능에 접근
  • 성능 제한: 웹뷰를 통해 실행되기 때문에 네이티브 앱보다 성능이 떨어짐
  • 사용 예: 일부 소셜 네트워크 앱이나 전자상거래 앱.

 

지금은 아니지만 인스타그램, 트위터, Airbnb모두 초기에는 하이브리드 앱 형태로 제공했죠

초기에 하이브리드 앱으로 개발한 가장 큰 이유는 웹기술로만 작업하면서 여러 플랫폼에 맞출 수 있으니

별도의 iOS 및 안드로이드 개발팀을 운영할 필요가 없으니 비용절감 때문이지 않을까 싶...

 

현재 큰 이슈죠? 본의아니게 우리나라에서 가장 유명한 하이브리드앱은 티몬과 위메프입니다.

이 앱들은 전자상거래 플랫폼으로, 웹기술을 사용하여  개발된 후 네이티브 컨테이너 안에서 실행하죠

 

하이브리드의 큰 단점은 성능입니다. 웹뷰를 사용하므로, 네이티브앱에 비해 떨어질 것이고

제한된 UI/UX를 제공할 수 밖에..

 

 

 

3. 웹앱 (Web App)

웹앱이라는 용어는 보통 설치 없이 브라우저에서 바로 실행되는 웹 기반 애플리케이션을 말하며,

PWA(Progressive Web App)는 웹앱의 한 형태로,

추가적인 기능(예: 오프라인 지원, 푸시 알림, 홈 화면 추가 등)을 포함할 수 있는 것을 의미합니다.

웹앱과 모바일 웹사이트는 기본적으로 동일한 웹 기술을 사용하지만,

웹앱은 특정 작업이나 인터렉티브 한 경험을 더 잘 제공하도록 설계된 경우가 많습니다.

하지만 그 차이가 막 명확하지 않다는 것..

 

주요 특징:

  • 오프라인 지원: PWA서비스 워커(Service Worker)라는 기술을 사용하여 오프라인에서도 작동할 수 있는 기능을 제공.
  • 푸시 알림PWA는 사용자에게 푸시 알림을 보낼 수 있어 사용자와의 상호작용을 높임.
  • 홈 화면에 추가: 사용자가 앱을 설치하지 않고도 홈 화면에 바로가기를 추가
  • 자동 업데이트: PWA는 사용자가 웹사이트를 다시 방문할 때마다 업데이트된 최신 버전을 자동으로 받음

Gmail이나 Google Docs 같은 웹앱은 사용자가 이메일을 작성하거나

문서를 편집하는 등의 특정작업을 수행할 수 있도록 최적화되어있죠.

실시간 협엽기능이나, 실시간 저장등의 상호작용도 제공하고요

PWA웹앱 형태로 제공되는 스타벅스 PWA가 있죠

우리나라로 예시를 들자면 정부 24

정부 24는 모바일 웹사이트이지만 웹앱의 요소를 포함하고 있죠

신청서 작성이나 조회 같은 특정 작업을 수행할 수 있는 기능을 제공하니까요.

 

웹앱의 가장 큰 단점은 인터넷 의존성 일 것 같아요. 오프라인 상태에서는 제대로 작동하지 않을테니..

 

 

 

아! 참고로 우리나라에서 많이 사용되는 Cafe24는 온라인 쇼핑몰 구축을 위한 다양한 솔루션을 제공하는데

Cafe24플랫폼 사용자는 네이티브 앱, 하이브리드 앱, 또는 웹앱 중에서 선택할 수 있습니다.

 

 

 

네이티브 앱, 하이브리드 앱, 웹앱에 대해 포스팅 해봤습니다.
여러분의 이해에 도움이 되었길 바라며, 궁금한 점이나 더 알고 싶은 내용이 있다면 댓글로 남겨주세요.