네이티브 앱 & 웹 앱 & 하이브리드 앱

기술노트
Admin (토론 | 기여)님의 2025년 4월 17일 (목) 14:29 판 (CS 용어 정리 - 네이티브 앱 & 웹 앱 & 하이브리드 앱 추가)
(차이) ← 이전 판 | 최신판 (차이) | 다음 판 → (차이)

네이티브 앱 & 웹 앱 & 하이브리드 앱


네이티브 앱 (Native App)

<img src="https://mblogthumb-phinf.pstatic.net/MjAxNzA1MjNfMTYy/MDAxNDk1NTI0ODM5MTE4.TdQ3eHqNonWO6s_iP3--wu22JtO-plhsjTRxlC0UsU0g.jGJOzygOWVumEielqLMAo9PHzLizIpBRgqfPKFsUvPog.PNG.acornedu/02_%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C%EC%95%B1.png?type=w800">

흔히 우리가 자주 사용하는 어플리케이션을 의미한다.

모바일 기기에 최적화된 언어로 개발된 앱으로 안드로이드 SDK를 이용한 Java 언어나 iOS 기반 SDK를 이용한 Swift 언어로 만드는 앱이 네이티브 앱에 속한다.


          1. 장점
  • 성능이 웹앱, 하이브리드 앱에 비해 가장 높음
  • 네이티브 API를 호출하여 사용함으로 플랫폼과 밀착되어있음
  • Java나 Swift에 익숙한 사용자면 쉽게 접근 가능함
          1. 단점
  • 플랫폼에 한정적
  • 언어에 제약적



모바일 웹 앱 (Mobile Wep App)

<img src="https://mblogthumb-phinf.pstatic.net/MjAxNzA1MjNfMTU0/MDAxNDk1NTI1MDk3ODMx.9Sc2ujbBTWVg5nyCCJpKYdwYTGr7e2sxUfBPN7Cosf0g.OGUHbnWVbHSJ45w4n2CIVMOY6iJaQESD9RxTvG8n_NIg.PNG.acornedu/03_%EC%9B%B9%EC%95%B1.png?type=w800">

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

모바일 웹의 특징을 가지면서도, 네이티브 앱의 장점을 지녔다. 따라서 기존의 모바일 웹보다는 모바일에 최적화 된 앱이라고 말할 수 있다.

웹앱은 SPA를 활용해 속도가 빠르다는 장점이 있다.

> 쉽게 말해, PC용 홈페이지를 모바일 스크린 크기에 맞춰 줄여 놓은 것이라고 생각하면 편함


          1. 장점
  • 웹 사이트를 보는 것이므로 따로 설치할 필요X
  • 모든 기기와 브라우저에서 접근 가능
  • 별도 설치 및 승인 과정이 필요치 않아 유지보수에 용이
          1. 단점
  • 플랫폼 API 사용 불가능. 오로지 브라우저 API만 사용가능
  • 친화적 터치 앱을 개발하기 약간 번거로움
  • 네이티브, 하이브리드 앱보다 실행 까다로움 (브라우저 열거 검색해서 들어가야함)



하이브리드 앱 (Hybrid App)

<img src="https://mblogthumb-phinf.pstatic.net/MjAxNzA1MjNfOTAg/MDAxNDk1NTI1NDUyNDQ0.KwG7RyksdzOfh-hHZZcwZN3fWVproJNp0KZjlXn4utQg.lFZN2yClP6MbcJQEoeGN2FGg8_Q_c2RbqlpLo45cdnwg.PNG.acornedu/04_%ED%95%98%EC%9D%B4%EB%B8%8C%EB%A6%AC%EB%93%9C%EC%95%B1.png?type=w800">

> 네이티브 + 웹앱

네이티브 웹에, 웹 view를 띄워 웹앱을 실행시킨다. 양쪽의 API를 모두 사용할 수 있는 것이 가장 큰 장점


          1. 장점
  • 네이티브 API, 브라우저 API를 모두 활용한 다양한 개발 가능
  • 웹 개발 기술로 앱 개발 가능
  • 한번의 개발로 다수 플랫폼에서 사용 가능
          1. 단점
  • 네이티브 기능 접근 위해 개발 지식 필요
  • UI 프레임도구 사용안하면 개발자가 직접 UI 제작



요약

<img src="https://mblogthumb-phinf.pstatic.net/MjAxNzA1MjNfMTc1/MDAxNDk1NTI1NTk1OTQ3.Xwuq8V_m40A1CRCM-PHtqO2r5QTsTyAAGjHO1h0NX8cg.d5WrK9gZl58lDeb4wMWYkN3YaZth45WdnwwkGIikxNIg.PNG.acornedu/05_%EB%A7%88%EC%A7%80%EB%A7%89.png?type=w800">




          1. [참고 자료]