Web App, Native App, Hybrid App, Cross-Platform App

2022. 11. 9. 01:17·Programming/Programming
728x90

모바일 웹(Mobile Web)

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

웹 앱(Web App) / 웹 기술로 구현

네이티브 앱처럼 보이고, 기능 또한 앱과 동일하게 구현되지만 웹 기술을 활용하여 만들어진 앱을 웹 앱(Web App)이라고 한다. 네이티브 앱과 달리 웹 앱은 웹 기반의 HTML, CSS, JavaScript등을 활용하며, 별도의 앱 파일을 설치하지 않고 인터넷 브라우저를 기반으로 작동된다.

(웹 앱은 모바일 웹과 네이티브 앱을 결합한 형태로 모바일 웹의 특징을 가지면서 네이티브 앱의 장점을 갖고 있다.

웹 앱도 모바일 웹처럼 일반적인 웹 기술로 개발되고 모바일 브라우저에서 실행되지만 풀 브라우저 방식이 아닌 단일 페이지 방식으로 화면을 진화해 속도가 빠르다는 장점이 있다.)

앱 없이 인터넷을 통해 구동되는 것을 보면 일반 모바일 웹과 똑같은 것이라 느낄 수 있지만, 두 가지는 약간 차이점이 있다. 모바일 웹의 경우 PC를 기준으로 제작된 뒤 모바일 화면 규격에 맞게 폰트나 이미지 등을 바꾼 것이지만, 웹 앱은 처음부터 모바일을 기준으로 제작되기 때문에 스마트폰 이용자에게 훨씬 편안한 환경을 제공한다. 하지만 모바일에 설치하는 앱이 아니므로 카메라나 음성 등 디바이스의 자체 기능에 접근은 할 수 없다.

 

웹 앱(Web App)의 장점

  • 웹 사이트를 보는 것이기 때문에 따로 설치할 필요가 없다.(인터넷 브라우저를 기반으로 동작하기 때문에 별도의 앱을 설치하지 않아도 된다.)
  • 표준 웹 언어로 만들 수 있기 때문에 상대적으로 제작 비용이 저렴하고 개발 기간도 짧은 편이다.
  • 모든 기기와 브라우저에서 접근할 수 있다.
  • 별도 설치 및 승인 과정이 필요치 않아 유지보수가 용이하다.
  • 수정사항이 생겨도 앱 마켓의 심사를 거치지 않아도 되기 때문에 업데이트 속도가 빠르다.

웹 앱(Web App)의 단점

  • 디바이스에 접근 권한이 없기 때문에 카메라나 음성 인식 등의 기능을 활용할 수 없다. (플랫폼 API(카메라 등)을 사용할 수 없고 오로지 브라우저 API만을  사용할 수 있다.)
  • 친화적인 터치 앱을 개발하기가 약간 번거로운점이 있다.(까다로움)
  • 네이티브, 하이브리드 앱보다 실행이 까다롭다.(앱 설치 대신 브라우저 및 url 입력이나 별도의 링크 클릭 등의 과정을 거쳐야 해서 번거롭다. → 브라우저를 열고 검색해 들어가야 한다.)
  • 네이티브 앱에 비해 상대적으로 구동 속도가 느리고 안정성도 떨어진다.

모바일 웹과 웹 앱의 차이점

모바일 웹과 웹 앱은 실행 방식에 차이점이 있다. 모바일 웹은 화면의 일부분이 바뀔 때 서버에서 새롭게 불러오는 풀 브라우저 방식(Full Browsing), 웹 앱은 변경이 필요한 부분만 바꾸는 단일 페이지 방식(SPA, Single Page Application)을 사용한다. 따라서 모바일 웹이 웹 앱보다 속도가 느리다는 특징이 있다.

하이브리드 앱(Hybrid App) / 웹과 앱의 장점을 하나로 합침

하이브리드 앱(Hybrid App)은 네이티브 앱과 웹 앱의 개발 방식을 모두 사용한다. 앱의 화면이나 기능 등 콘텐츠 영역은 웹 기반으로 제작하고 겉모습은 앱 마켓 등록과 설치를 위해 네이티브 앱으로 포장한 것이다. 두 가지 개발 방식을 이용하므로 웹과 앱의 API를 모두 사용할 수 있다. 따라서 웹 앱에서는 불가능 했던 디바이스 자체 기능에 접근할 수 있다.

하이브리드 앱은 웹과 앱 개발의 장점을 모두 가지고 있다. 하지만 패키징에 모바일 운영체제 별 네이티브 개발 언어를 활용하기 때문에 각 기술에 대한 전문지식이 있어야 하고, 앱의 콘텐츠가 웹에서 실행되기 때문에 브라우저 성능에 따라 속도가 떨어질 수 있다는 문제점도 있다.

 

하이브리드 앱(Hybrid App)의 장점

  • 웹 기술을 기반으로 제작되지만, 모바일 API도 사용할 수 있으므로 디바이스의 자체 가능을 활용할 수 있다.
  • 네이티브 앱에 비해 개발 비용 및 시간을 절약할 수 있다.
  • 한 번 개발해두면 패키징을 바꾸는 방식으로 여러 플랫폼에 대응할 수 있다.

하이브리드 앱(Hybrid App)의 단점

  • 네이티브 앱 개발 지식이 필요하다.
  • 브라우저의 성능이 떨어지면 앱 구동 속도가 저하된다.
  • 네이티브 앱에 비해 디자인의 자유도가 떨어진다.

네이티브 앱(Native App)

네이티브 앱(Native App)이란 모바일 기기에 최적화된 네이티브 언어로 개발된 앱을 뜻한다. 모바일 운영체제는 개발을 위해 각기 다른 언어를 사용해야 한다. 안드로이드 운영체제의 대표적인 네이티브 언어는 코틀린(Kotlin) 또는 자바(Java)이며, IOS는 스위프트(Swift) 또는 오브젝티브C(Objective C)이다. 해당 언어를 기반으로 각 모바일의 운영체제에 맞는 앱을 개발하면 그것이 네이티브 앱이다.

구글 플레이 스토어나 앱 스토러 등 앱 마켓에 등록된 대부분의 애플리케이션을 네이티브 앱이라고 보면 된다. 계산기같은 스마트폰에 기본적으로 셋팅된 앱이나 대부분의 게임 앱이 네이티브 앱의 대표적인 사례이다.

네이티브 앱은 특정 플랫폼에 맞춰 개발되기 때문에 스마트폰에서 기본적으로 제공되는 기능을 쉽게 활용할 수 있다. 앱을 처음 실행했을 때 카메라, 마이크, GPS 등에 접근 권한을 요구했고 해당 기능을 앱 내에서 자유롭게 쓸 수 있다면 네이티브 앱일 가능성이 크다.

네이티브 앱은 자유도가 높은 반면 개발하는데 시간과 비용이 많이 든다는 단점도 있다. 운영체제에 따라 다른 개발 언어를 다룰 줄 알아야 하므로 앱 개발을 위해 기업에선 안드로이드 앱 개발자와 IOS 앱 개발자를 별도로 채용해야 한다.

 

네이티브 앱(Native App)의 장점

  • 각 운영체제에 최적화된 방식으로 만들어지므로 앱의 구동 속도가 빠르고 안정적이다.
  • 높은 사양의 그래픽으로 원하는 디자인을 구현할 수 있다.(비주얼이 화려한 게임은 대부분 네이티브 방식으로 앱 개발이 이루어짐)
  • 디바이스 전체에 접근 권한을 가질 수 있기 때문에 기기 자체의 기능을 앱에 활용할 수 있다.

네이티브 앱(Native App)의 단점

  • 다른 운영체제에서 호환이 되지 않기 때문에 안드로이드와 iOS 앱을 별도로 개발해야 한다.
  • 다른 앱 개발 방식에 비해 제작하는 데에 비용과 시간이 많이 든다.
  • 앱에 수정사항이 생기는 경우 앱 마켓의 심사를 거치고 전체 업데이트를 진행해야 한다.

비교

  앱 설치 여부 개발 방식 디바이스 기능 접근 개발 지식
네이티브 앱 O 모바일 운영체제 별 전문 개발언어 사용(Kotlin, Java, Swift, Objective C등) 가능 iOS, 안드로이드 앱 개발 지식 필요
웹 앱 X 웹 코딩 기반(HTML, CSS, JavaScript 등) 불가능 웹 표준 웹 개발 지식 필요
하이브리드 앱 O 앱, 웹 기반 언어와 코딩을 모두 사용 가능 내부 페이지 개발을 위해 웹 개발 지식, 외부 앱 패키징을 위해 앱 개발 지식 필요

앱 개발 시작 전에 가장 중요한 것은 앱의 목적과 사용 타겟, 투입 가능한 자금, 인력, 시간 등을 고려하여 어떤 방식으로 개발할지를 정하는 것이다. 한정된 자원 안에서 최상의 결과물을 낼 수 있는 방법에 집중한다.

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

크로스 플랫폼 앱은 한 가지의 개발 언어와 프레임워크로 안드로이드, iOS 네이티브 앱을 만드는 개발 방식이다. 네이티브 코드가 아닌 다른 개발 언어로 코드를 작성 후 각각의 OS가 이해할 수 있는 코드로 컴파일 한 후, 각각의 OS의 엔진으로 실핸하는 방식이다. 대표적으로는 플러터(Flutter), 리액트 네이티브(React Native), 자마린(Xamarin)이 있다.

 

크로스 플랫폼 앱의 장점

  • 네이티브 앱으로 안드로이드와 iOS 앱을 개발하기 위해서는 각각의 스펙에 맞는 개발자 인력이 필요하다. 비용과 시간 또한 2배로 소요되는 반면 크로스 플랫폼 앱은 한 가지의 코드로 2가지 플랫폼 앱을 모두 개발할 수 있다는 점에서 개발 시간과 비용을 줄일 수 있다.

크로스 플랫폼 앱의 단점

  • 기존 네이티브 앱이 가지고 있는 동적인 요소 퍼포먼스를 100% 구현할 수 없는 단점이 있다. 일반적으로 네이티브 앱에 비해 성능이 떨어져 느린 경우도 있고, 라이브러리가 다양하지 않아 기능 구현이 어렵기도 하다.
  • 안드로이드와 iOS OS에 새로운 기능이 추가되면 네이티브 앱은 즉시 사용 및 업데이트가 가능하지만 크로스 앱은 사용에 있어 업데이트 지연이 발생할 수 있다.

'Programming > Programming' 카테고리의 다른 글

[IntelliJ] 인텔리제이 단축키  (0) 2022.08.21
[IntelliJ] IntelliJ IDEA 다운로드 및 설치  (0) 2022.08.21
교착상태와 기아상태  (0) 2022.08.11
vi/vim에서 기존 파일을 새 파일로 저장하는 방법  (0) 2022.07.24
[Database] 데이타베이스 용어  (0) 2022.07.24
'Programming/Programming' 카테고리의 다른 글
  • [IntelliJ] 인텔리제이 단축키
  • [IntelliJ] IntelliJ IDEA 다운로드 및 설치
  • 교착상태와 기아상태
  • vi/vim에서 기존 파일을 새 파일로 저장하는 방법
arajo
arajo
  • arajo
    아라 메모장
    arajo
  • 전체
    오늘
    어제
    • 분류 전체보기 (509)
      • Language (298)
        • HTML (55)
        • CSS (11)
        • JavaScript (70)
        • TypeScript (8)
        • Python (33)
        • Java (119)
        • C (0)
        • C# (2)
      • Programming (92)
        • Programming (14)
        • Web (51)
        • Apache (1)
        • MySQL (23)
        • AWS (3)
      • Framework | Library (26)
        • Framework | Library (3)
        • Vue.js (2)
        • React.js (5)
        • React Native (4)
        • Node.js (1)
        • Ajax (1)
        • Bootstrap (8)
        • Spring (1)
        • Flutter (1)
      • etc (2)
      • 휴식 (19)
        • 책 (13)
        • 일기 (5)
        • 게임 일기 (1)
      • A (71)
        • 공부 (18)
        • 기타 (6)
        • 일 (47)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    Python
    변수
    TypeScript
    event
    react
    제어문
    array
    web
    리액트
    HTML
    파이썬
    Java
    MySQL
    타입스크립트
    JavaScript
    CSS
    객체
    next.js
    자바스크립트
    object
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.1
arajo
Web App, Native App, Hybrid App, Cross-Platform App
상단으로

티스토리툴바