네이티브 앱, 크로스 플랫폼 앱, 웹앱, 하이브리드 앱?!

Gabozago·2023년 12월 5일

webview

목록 보기

2/3

들어가며

기존 웹 프로젝트를 웹뷰를 사용해서 앱으로 개발하자는 얘기가 나왔다. "오케이~ 바로 웹뷰 적용방법 찾아봐야지!"라고 생각했는데..
웬걸 [네이티브 앱, 하이브리드 앱, 웹앱, 크로스 플랫폼 앱]의 용어정리가 정확이 안된 상태에서 찾으니까 갑자기 모든게 너무 헷갈려져서 앱의 종류부터 파헤치기로 했다!!

심지어 웹뷰를 하도 찾다보니 "웹..뷰? '웹'이 뭐고 '뷰'가 뭐지?" 이런 상태가 되어서 (webview) 시리즈1이 '웹? 앱?'이 되었다ㅋㅋ

1. 네이티브 앱

앱의 가장 정석이라고 볼 수 있는 네이티브 앱!

네이티브 (native)라는 단어를 직역하면 태생, 현지인, 토착이라는 의미가 된다.

그 뜻 그대로, 스마트폰에 설치되어 이를 기반으로 구동되고 따로 인터넷을 거치지 않고도 바로 실행할 수 있는 앱!

각각의 모바일 기기(아이폰과 안드로이드폰)에 최적화된 언어로 개발되며, 각 스마트폰의 모든 기능들을 쉽게 사용할 수 있음

그렇기에 안드로이드, iOS 등 각각의 운영체제에 맞는 언어로 개발해야 한다. 사용하는 언어도, 디자인 시스템도 다르기 때문..ㅠㅠ

스토어에서 앱을 다운로드할 때, ‘iOS 버전’, ‘안드로이드 버전’등의 단어를 보신 적이 있나요?

두 버전이 모두 다른 언어로 개발되기 때문....

개발언어

Android

: Kotlin, Java / Android Studio

IOS

: Swift / Xcode

장점

속도가 빠르고 안정적
- 각 운영체제에 최적화된 방식으로 만들어지므로
- 각 플랫폼의 API를 호출해 사용
네이티브앱이 갖는 가장 자연스러운 UX를 갖는다.
- 높은 사양의 그래픽으로 원하는 디자인 구현 가능 (비주얼 화려한 게임 등)
기기의 기능 모두 사용 가능
- 기기 전체에 접근 가능
- 카메라, GPS, 마이크, 블루투스 등과 같은 스마트폰 자체의 장치들을 사용 가능

이러한 장점으로 계산기나 노트 등 스마트폰에 기본적으로 셋팅된 앱이나 대부분의 게임 앱이 네이티브 앱의 대표적인 사례다.

단점

개발비용 및 유지비용 많이 듬
- 각 운영체제에 맞는 언어를 사용해서 개발해야 함
- IOS 개발자와 안드로이드 개발자가 각각 필요 (코드 또한 각각 짜야 함)
두 플랫폼의 심사기준 모두 통과해야 함
- 앱 배포(업데이트)시에 구글의 플레이스토어와 애플의 앱스토어의 심사를 각각 통과해야 함
- 심사에 각각 걸리는 시간을 예측할 수 없기 때문에 동시에 새버전을 출시하기에 어려움

2. 크로스 플랫폼 앱

하나의 모바일 앱을 두 개의 운영체제로 개발해야하는 네이티브 앱의 번거로움을 해소하기 위해 만들어짐

네이티브의 경우 플랫폼 간의 디자인 시스템이 서로 달라 UI/UX 디자인 부터, 앱 개발, QA, 출시 후 유지보수 모두 각각 해야하는 반면에 크로스 플랫폼의 경우 한번에 처리가 가능합니다!

(다만, 네이티브에 비해 라이브러리가 부족할 순 있습니다.)

Cross-Platform Frameworks

Flutter (Google), React Native (Facebook)

장점

개발비용 줄어듬
- 하나의 소스코드로 iOS와 안드로이드 모두 작동

단점

성능 저하 및 기기활용도 낮음
- 각 운영체제에 특화된 방식으로 제작된 앱은 아니기 때문에 네이티브 앱에 비해 성능이 떨어짐
일부 native 코드 구현 필요
- 디테일하게 구현을 해야하는 경우(프레임워크에서 설정이 어려운 부분)에는 결국 native 코드로 구현해야한다.
업데이트 과정 복잡
- 앱을 업데이트할 때마다 각각의 앱 스토어의 심사를 거쳐야 한다 (== 네이티브 앱의 단점)

3. 웹앱 (모바일 웹, 모바일 웹앱)

삽질한 이유

이게 가장 익숙한 형태임에도 불구하고 해당 용어가 이곳저곳 굉장히 많이 등장하고, 어떤 주제를 설명할 때 나오는 지에 따라 의미도 조금씩 달라져서 헷갈렸었다..
웹앱, 모바일 웹, 모바일 앱, 모바일 웹앱 등 다양한 용어로 불리우는데 어떤 곳에서는 같은 의미로 쓰이고 어떤 곳에서는 다른 의미로 설명하니 참..ㅠㅠ

사실 이것 때문에 "웹과 앱의 정의가 내가 알던거랑 다른가..?"하고 webview 시리즈1인 ‘웹? 앱?’을 작성해본 것이기도 하다.

그래서 웹앱이 뭔데?

chatGPT에서도 ‘웹앱’이라는 단어가 비슷한 용어이지만 사용되는 맥락에 따라 차이가 있다고 설명해주고 있다.

요약하자면 해당 포스팅과 같이 ‘앱의 종류’를 설명할 때 등장하는 ‘웹앱’의 경우 ‘네이티브 앱’과 대조되며 브라우저를 통해 실행되는 애플리케이션인 것이다.
즉, 우리가 흔히 사용하는 웹 페이지를 모바일 기기의 화면 크기로 줄인 것이다.

웹이지만 앱'처럼' 보이기 때문에 웹앱이라는 용어를 쓰는 것 같은데, 사실상 웹이기 때문에 헷갈렸던 것이다ㅠㅠ

chatGPT 설명

추가 설명

앱의 종류를 설명하는 맥락에서 브라우저를 사용해서 실행하는 어플리케이션의 경우

웹앱 == 모바일 웹 == 모바일 웹앱

이렇게 세 용어를 크게 구분하지 않고 사용한다.

그렇지만 ‘앱의 종류’ 가 아닌 ‘사용자 경험’ 혹은 ‘실행 방식’ 측면을 기준으로 보고 아래와 같이 더 구체적으로 분리하기도 한다.

웹페이지를 단순히 반응형으로 구현했는가? 모바일 웹
화면의 일부분이 바뀔 때 전체를 서버에서 새롭게 불러오는 풀 브라우저 방식(Full Browsing)인가? 모바일 웹

처음부터 모바일을 기준으로 스마트폰 이용자에게 편한하고 앱같은 환경을 제공하는가? 웹앱
변경이 필요한 부분만 바꾸는 단일페이지 방식(SPA, Single Page Application)인가? 웹앱

(일단 여기서는 다른 앱과 달리 브라우저 위에서 동작하는 애플리케이션이라는 정도로 구분하고 싶다)

장점

개발과정 단순
- 웹 사이트의 크기를 단순히 줄이는 것이기 때문에
- 앱처럼 플랫폼에 맞는 복잡한 개발 과정이 필요하지 않음
유지보수 편리
- 별도의 설치과정이나 스토어 승인 과정이 생략되기 때문
- 수정사항이 생겨도 앱 마켓의 심사를 거치지 않아도 되기 때문 (업데이트 빠름)

단점

플랫폼 API 사용 불가능
- 카메라나 주소록과 같은 플랫폼 API이 사용이 불가능하고 브라우저 API만을 사용가능
사용자가 실행하기 복잡 (설치된 앱에 비하여)
- 접속을 위해서는 우선적으로 브라우저를 열고 검색이나 주소 입력 등의 과정을 거쳐야 함

4. 하이브리드 앱

위에서 설명한 네이티브(또는 크로스 플랫폼) 앱의 장점(모바일 기기의 기능 사용)과 웹앱의 장점(개발비용 절감)을 모두 합친 것!
따라서 웹만으로는 불가능 했던 디바이스 접근이 가능!!

간단히 설명하자면 네이티브 (또는 크로스 플랫폼)으로 앱을 만들지, 앱 화면을 일일이 직접 개발하지 않고 브라우저 역할을 하는 웹뷰를 띄우는 방식이다.
겉으로는 네이티브 앱과 동일하게 보이지만 실제로는 웹뷰를 띄워 웹을 실행시키는 형태로 구성되어있으며 어플 안에 웹 페이지를 불러오는 방식.

즉, 겉을 감싸고 있는 것은 앱이지만 실제로 보고있는 것은 웹 화면이라고 생각하면 된다.

앱의 화면이나 기능 등 콘텐츠 영역은 웹 기반으로 제작하고 겉모습은 앱 마켓 등록과 설치를 위해 네이티브(또는 크로스 플랫폼) 앱으로 포장한 것

단순히 앱 내에서 웹페이지를 불러와 보여주기만 할 수는 있지만, 그럴듯한 앱을 만들기 위해서는 네이티브(또는 크로스 플랫폼)앱의 개발은 필수적이다!

그래서 대부분 네이티브(또는 크로스 플랫폼) 앱과 웹 개발 방식을 모두 사용해야 함!

장점

웹 개발 기술로 앱 개발 가능
- 네이티브 API + 브라우저 API를 사용가능
- 스마트폰의 기능(카메라, 음성검색 및 인식) 또한 사용 가능하다.
네이티브 앱에 비해 개발 비용 절감 및 유지보수 용이
- 하나의 코드로 모든 플랫폼에 대응할 수 있기 때문

단점

웹뷰 방식이므로 앱의 성능은 브라우저의 성능과 비례한다.
네이티브 앱보다 UI/UX를 구성하는 디자인의 자유도가 떨어진다.
- 그렇지만 앱과 거의 유사한 UI/UX구현 가능
속도가 느리고 기능적인 접근에 제한이 있’었’다.
- 최근에는 웹 모듈 성능이 급격하게 좋아졌고, 디바이스 성능도 과거에 비하면 훨씬 좋아졌기 때문에 더이상 크게 문제되지 않음
네이티브 앱 개발지식 필요
- 웹 기술을 사용한다고 해도 결국 네이티브 앱을 사용
- 따라서 비중은 작지만 네이티브 개발을 할 수 있는 개발자가 필요