이롭게 현명하게
[IT 노트] 앱 개발 유형 / 네이티브 앱 / 하이브리드 앱 / 크로스 플랫폼 본문
목차
모바일 웹
모바일 웹앱
네이티브 앱
하이브리드 앱
크로스 플랫폼
간단하게 안드로이드 앱 개발 프로젝트를 진행해 본 경험이 있었지만 각각 다른 특징을 가진 앱을 개발해 보기로 하였다.
개발 방식에 대한 고민은 프로젝트 시작 전 또는 프로젝트 진행 중에도 계속된다.
각각 서로 다른 특징을 가지고 있기 때문에 사용자에게 어떤 서비스를 제공하는지에 따라 적절한 개발 방식을 사용해야 한다.
그래야 앱 개발 시 불필요한 비용과 개발을 줄일 수 있기 때문이다.
[ 개발 방법 선택 기준 ]
- 내가 개발해야 하는 앱의 특성은 어떤 특성을 가졌는가?
- 웹과 함께 개발해야 하는가?
- 자체 개발이 필요한가?
- 웹/앱에 들어가야 할 기술은 무엇인가?
- 개발 기간은?
- 어느 정도의 완성도가 필요한가?
- 내부 개발 인력이 있는가?
- 유지 보수 계획 및 향후 개발 계획은 어떻게 되는가?
이 외에도 개발 인력, 시간, 가지고 있는 예산에 따라 개발 계획이 변경될 수 있다.
개발 방법도 중요하지만 가장 중요한 것은 가지고 있는 자원으로 최고의 결과물을 만들어 내는 것이다.
결과물을 빨리 만들어 내는 것을 목표로 하기보단 사용자가 겪고 있는 문제를 정확히 파악하고 어떻게 해결해야 할 것인지, 유지 보수 및 추후 향후 개발 방향에 맞추어 설계해야 한다.
앱의 종류로는 5가지 종류로 모바일 웹, 모바일 웹앱, 네이티브 앱, 하이브리드 앱, 크로스 플랫폼 이 있다.
[ 모바일 웹 ]
모바일 웹이란 스마트폰 사용자들을 대상으로 만든 웹사이트이다.
pc에서 네이버에 접속하면 pc에 맞는 화면이 나타나지만
스마트 폰에서 크롬이나 사파리, 기타 브라우저로 들어가면 모바일 화면에 맞는 화면이 나타난다.
데스크톱에서 브라우저를 통해 웹사이트를 접속하는 것처럼 모바일 기기에 있는 기본 브라우저에서 url이나 검색을 통해 접근 및 이용이 가능하다.
다음은 모바일 기기에 있는 기본 브라우저이다.
기본 브라우저에서 네이버, 다음과 같은 포털 사이트를 스마트폰으로 접속하면 url 주소가 m.naver.com 또는 m.daum.net이라고 표시되는 것을 볼 수 있다. 이것이 모바일 웹이다.
 |
 |
즉 같은 사이트인데 pc용 웹사이트와 모바일용 웹사이트 두 가지 버전의 웹사이트가 존재한다.
HTML 기반의 웹 브라우저로 동작한다.
[ 모바일 웹의 장점 ]
- 반응형으로 제작할 경우 : pc, 태블릿, 모바일에서 모두 기기에 적합한 형태로 이용이 가능하다.
- 개발 시 네이티브, 하이브리드 앱에 비해 적은 리소스, 비용, 시간이 들어간다.
- 앱을 따로 설치하지 않아도 돼 모바일 기기에서 빠른 접근이 가능하다.
- 콘텐츠나 디자인 변경 시 웹 표준에 맞춰 작업하면 된다.
- 별도의 배포나 승인 절차가 필요하지 않아 수정사항을 바로 반영할 수 있다.
- 수많은 종류의 모바일 기기와 유저가 접속할 수 있다면 웹사이트 RUL은 QR코드, SMS, NFT 등으로 쉽게 접근할 수 있다.
- 개발하고 운영하기가 편리 : 사용자 폼에서 크롬이나 사파리 같은 브라우저로 열 수 있기 때문에 웹개발을 할 수 있다면 OS에 구분 없이 어느 폰에서든 동작하는 웹을 만들 수 있다.
- 웹이 수정되면 사이트만 업데이트하면 된다. 스토어의 검수를 기다릴 필요가 없다.
[ 모바일 웹의 단점 ]
- 콘텐츠, 디자인 변경 시 웹 표준에 맞춰 수정하면 되지만 모바일 앱은 OS 별로 각각 수정해야 한다.
- 모바일 앱에 비해 실행 속도가 느리다.
- 모바일 기기의 하드웨어를 제어할 수 없다.
- 검색 엔진이나 별도의 URL을 통해 접속해야 한다.
- 운영체제에서 제공하는 기능을 활용할 수 없다.
- 브라우저 안에서 주소로 찾아 들어가기 때문에 할 수 있는 것들이 제한되어 있다.
- 고성능 게임, 그래픽 툴 등의 앱은 어렵다.
* 운영체제 기능 : 푸시 메시지, 블루투스, 위치기반 서비스, QR코드 인식, 주소록 연동, SNS 로그인, 인앱 결제 등
[ 모바일 웹 특징 ]
모바일 웹은 새로운 정보를 지속적으로 제공하는 것이 목적으로 콘텐츠를 제공하고자 하는 경우에 사용한다.
제품 리뷰, 블로그, 뉴스 등과 같은 실시간으로 정보가 업데이트가 되는 콘텐츠를 제공할 때 사용하기 적합하다.
풀 브라우저 방식으로 화면 일부분이 업데이트 시 화면 전체 내용을 서버에서 새로 받아오는 방식이다.
페이지를 새로고침할 경우 속도가 느려지는 단점이 있다.
모바일 기기 특성상 이동 중에 서버 접속 장애가 발생할 위험이 있다.
[ 모바일 웹 개발 언어 ]
HTML, CSS, Javascript 등
[ 모바일 웹 앱 ]
모바일 웹앱 이란 웹 기술로 구현하는 앱으로 모바일 웹과 네이티브 앱을 결합한 것이다.
모바일 웹앱이라고도 하고 프로그레시브 웹앱(PWA:Progressive Web Apps)이라고도 한다.
요즘은 이미 다운로드한 앱을 사용하거나 브라우저로 웹서핑을 하며 시간을 보낸다.
스토어에서 찾아 다운로드하여 사용하는 앱 보다 브라우저로 웹서핑을 하며 시간을 보낸다.
스토어에서 찾아 다운로드하여야 하는 앱들보다 웹서핑으로 찾아낼 수 있는 모바일 웹들이 새 사용자들을 유입시키기가 더욱 유리하다.
브라우저에서 접속되는 웹의 형태로 홈 화면에 추가 기능을 통해 지정된 아이콘 형태로 홈에 추가된다.
스토어에서 다운한 앱처럼 보인다.
홈에 아이콘으로 추가까지 가능하니 스토어에서 다운받는 앱들처럼 기존사용자들을 묶어 놓기가 가능하다.
홈 화면에 추가된 아이콘으로 실행하면 주소창 등의 입력 없이 네이티브나 하이브리드 앱인 것처럼 작동한다.
모바일 웹의 특징을 가지면서 네이티브 앱의 장점을 가지고 있다.
모바일 웹과 같아 보이지만 조금 더 모바일에 최적화되어 있는 앱이다.
브라우저를 통해 HTML, CSS, Javascript를 사용하여 만들어진 앱이다.
모바일 웹은 풀 브라우저 방식으로 모바일 기기에서 데스크톱과 같이 웹사이트를 동일하게 이용할 수 있는 서비스 방식이다.
모바일 웹앱은 단일 페이지방식(SPA:Single Page Application)으로 웹사이트에서 데이터 변경이 일어날 때 웹 페이지 자체를 새로고침을 하지 않고 데이터 변경이 일어나는 부분만 바꿔서 보여주는 방식이다.
[ 모바일 웹과 모바일 웹 앱의 공통점 ]
- HTML, CSS, 자바스크립트 기반의 웹 기술을 똑같이 사용
- 모바일 기기의 하드웨어에서 제공하는 센서, 카메라 등을 사용할 수 없다.
- 모바일 기기 운영체제 혹은 플랫폼에서 제공하는 API를 사용할 수 없다.
- 운영체제 혹은 플랫폼 그리고 브라우저에서 사용할 수 있도록 제공하는 API만을 사용
[ 모바일 웹과 모바일 웹 앱의 차이점 ]
| 모바일 웹 | 모바일 웹앱 |
| 풀 브라우저 방식 | 단일 페이지 방식 |
| HTML 기반의 웹 브라우저로 동작 | 디바이스에 직접 설치 후 사용하는 방식 |
| 인터넷 연결 없이 사용 불가능 | |
[ 모바일 웹 앱의 장점 ]
- 모든 OS와 브라우저에서 접근이 가능하다.
- 개발 기간 및 비용이 상대적으로 적게 든다.
- 별도의 설치나 앱 스토어 승인과정을 거치지 않아도 배포가 가능하기 때문에 유지보수가 쉽다.
[ 모바일 웹 앱의 단점 ]
- 플랫폼 API를 사용할 수 없고 브라우저 API만 사용이 가능
- OS 기능의 일정 부분의 사용이 어렵다.
- 별도의 URL을 통해 접속해야 한다
- 페이지 로딩속도가 상대적으로 느리다.
- 네이티브 앱과 달리 네트워크가 연결되지 않으면 서비스를 수 없다
[ 모바일 웹 앱 특징 ]
모바일 웹처럼 html, CSS, Javascript, jsp, php, asp 등 일반적인 웹 기술로 개발
웹 개발 기술을 사용해 모든 UI와 UX를 앱과 유사하게 제작
[ 네이티브 앱 ]
네이티브 앱은 스마트폰이 탄생하면서 생겨난 가장 기본적인 형태의 앱이다.
 |
 |
컴퓨터 운영체제는 크게 윈도우와 맥 두 가지가 있다.
운영체제가 다르면 화면 디자인, 컴퓨터에서 실행할 수 있는 프로그램, 단축키 등이 다르다.
윈도우 버전인 ms 워드는 맥에 설치하여 사용할 수 없다.
맥 버전인 애플 뮤직은 윈도우에서 사용할 수 없다.
포토샵 또한 윈도우, 맥 용이 따로 있다.
 |
 |
모바일 기기도 컴퓨터와 마찬가지로 갤럭시 시리즈가 사용하는 안드로이드와 애플 시리즈에서 사용하는 IOS 운영체제가 있다.
각각 다른 플랫폼을 사용하기 때문에 스마트폰 앱은 안드로이드 앱과 IOS 앱을 개발한다.
 |
 |
안드로이드 앱은 안드로이드 스튜디오에서 코틀린이라는 언어로 개발되어 플레이 스토어에 업로드된다.
Ios앱은 xcode에서 스위프트라는 언어로 개발되어 앱스토어에 업로드된다.
해당 스마트폰의 OS에 맞게 전용으로 개발된 소프트웨어이다.
각각 가이드와 프레임워크로 주어진 방식대로 앱들이 개발된다.
OS에 맞게 전용으로 개발된 소프트웨어이기 때문에 네이티브 앱은 안드로이드와 IOS 각각에서 주어진 모든 자원과 기능들을 활용할 수 있다.
스토어에서 다운로드를 통해 사용 가능하며 각 운영체제에 최적화된 앱을 개발하는 방법을 네이티브 앱이라고 한다.
[ 네이티브 앱 장점 ]
- 네이티브 앱은 각 운영체제에 최적화된 앱을 개발하는 것이기 때문에 모바일 기기의 모든 기능을 사용할 수 있다.
- 작동하는 기기에 최적화된 형태로 개발되어야 하기 때문에 모바일 웹에서 사용하지 못했던 OS 기능을 사용할 수 있다.
- 각 운영체제에 최적화된 언어로 개발되어 사용자에게 빠르고 안정적으로 기능을 제공할 수 있다.
[ 네이티브 앱 단점 ]
- 안드로이드와 IOS 각각 만들어야 한다.
- 각각 운영체제에 맞는 앱을 개발하려면 개발에 소요되는 시간과 인력이 많이 필요하다.
- 우수한 성능의 앱을 만들 수 있지만 개발하고 관리하는 과정이 어렵다.
- 앱 업데이트 시 플레이스토어, 앱스토어에 업로드하는 것에 있어서 까다롭다.
- 새 버전을 출시할 때마다 스토어에 업로드하면 심사를 거치게 된다.
- 심사가 몇 시간 만에 통과가 되기도 하지만 며칠씩 걸리거나 반려될 때도 있다.
- 심사 기간을 예측할 수 없기 때문에 동시에 새 버전을 출시해야 하는 상황이라면 네이티브 앱은 운영에 있어 어려움을 겪게 된다.
[ 네이티브 앱 예시 ]
카카오톡, 스노우 : 카메라, 카카오 지하철(지도, 교통), 토스(금융), 애니팡(게임), 스타벅스(멤버십)
[ 하이브리드 앱 ]
하이브리드 앱은 네이티브 앱으로 만들되 그 앱에 브라우저 창을 둬서 일부 또는 대부분의 기능을 웹 형태로 제공하는 것이다.
네이티브 앱은 안드로이드, ios 각 운영체제에 맞는 프로그래밍 언어로 개발해야 한다.
네이티브 앱은 운영체제나 모바일 기기에 최적화된 기능을 제공하는 장점이 있지만
운영체제가 달라 개발 시 새롭게 개발해야 하기 때문에 시간과 비용, 인력이 많이 들어간다.
이러한 네이티브 앱의 단점을 보완한 것이 하이브리드 앱이다.
안드로이드나 IOS 전용으로 각각 스토어에 올리는 네이티브 앱을 만드는데 그 앱 안에 크롬이나 사파리 같은 브라우저처럼 웹 사이트를 보여주는 창을 하나 넣은 것이다.
안드로이드와 IOS 둘 다 웹뷰라고 불린다.
이 앱을 실행하면 이 웹뷰에서 사용자들이 이용할 모바일 웹이 접속된다.
웬만한 기능들은 웹사이트로 만들어서 이 웹뷰 안에서 이용할 수 있도록 만들고 웹사이트로써 구현할 수 없는 기능들은 이 네이티브 앱에서 처리하도록 한다.
웹사이트를 앱으로 보인다고 해서 네이티브에 있는 기능을 사용하지 못하는 것은 아니다.
웹앱에서 사용하지 못했던 카메라, 푸시 알림, qr코드 검색 같은 기능 사용이 가능하다.
실시간으로 신규 콘텐츠와 정보를 보여주어야 하는 서비스에서 사용된다.
운영체제가 달라 두 번 개발해야 하는 어려움 없이 웹앱으로 개발해 시간과 개발 비용을 절감할 수 있다.
예시로 브라우저에서 네이버를 접속한 것과 네이버 앱을 실행해서 사용할 때를 비교하면 네이버 앱에서만 실행할 수 있는 혹은 네이버 앱에서 더 깔끔하게 작동되는 기능이 있다.
그런 것들이 네이버 앱의 네이티브 기능들이다.
이런 앱들은 이 네이티브 기능들에 대해서만 스토어를 이용한 업데이트가 필요하고 웹뷰에 나타나는 콘텐츠들은 웹 쪽만 업데이트하면 되기 때문에 네이티브 앱보다 더 유연한 운영이 가능하고 탑재할 수 있는 기능에도 제한이 없다.
개발자의 선택에 따라 순수 IOS, 안드로이드 개발로 할 수 있고 프레임워크를 사용하기도 한다.
[ 하이브리드 앱 장점 ]
- 유지 보수가 쉬움 : 웹 페이지에 수정이 있을 경우 업데이트 없이 바로 반영 가능
- 브라우저 API와 모바일 OS의 기능들을 이용해 다양한 개발이 가능하다.
- OS 기능 : 푸시 메시지, 블루투스, 위치기반 서비스, QR코드 인식, 주소록 연동, SNS 로그인, 인앱 결제 등
- 한 번의 개발로 다수의 플랫폼에 대응할 수 있다.
- 안드로이드와 IOS 모두 동일한 웹페이지를 사용할 수 있어서 개발 비용 및 시간 소요가 네이티브에 비해 적다.
- 앱 요량이 비교적 가볍다
- HTML로 개발되기 때문에 비용과 시간이 적게 들고 업데이트 및 유지 보수가 편하다.
- 네이티브 API와 브라우저 API를 이용해서 다양하게 개발할 수 있고 한 번의 개발로 다수의 플랫폼에 유연하게 대처가 가능하다.
- 하이브리드 앱 개발자는 종종 네이티브 애플리케이션 개발자보다 저렴하다.
- 확장이 쉽다. : 네이티브 기능 사용 가능
[ 하이브리드 앱 단점 ]
- 네이티브 앱보다는 동적인 요소의 구현이나 디자인 부분이 취약하다.
- 네트워크 환경과 웹 사이트의 용량에 따라 속도가 느려질 수 있다.
- 네이티브 앱보다 UI 디자인이 취약하다.
- 하이브리드 플랫폼이 각 네이티브 플랫폼에서 적절하게 실행되도록 하려면 일반적으로 상당한 노력이 필요하다. 경우에 따라 하이브리드 앱 개발 총비용이 네이티브 앱 개발 비용과 비슷할 수 있다.
[ 하이브리드 앱 예시 ]
다운로드하여 사용하는 네이버, 크롬 어플, 쿠팡, 우버, 금융기관 앱 등
[ 언제 유용한가? ]
- 다양한 플랫폼( 모바일이나 웹)을 통한 사용자 층이 넓을 때
- 내용을 기본으로 한 간단한 프로젝트인 경우 : 애니메이션도 없고 복잡한 기능도 필요 없을 경우
- 시간은 촉박한데 여러 디바이스에서 실행되어야 하는 앱을 만들어야 할 때
- 프로젝트 아이디어가 있는 경우 가장 간단하게 테스트해보고 싶을 때
[ 크로스 플랫폼 앱 ]
하나의 모바일 앱을 두 개의 운영체제로 개발해야 한다는 어려움이 있다.
이러한 문제점을 해결하기 위해 하나의 언어와 프레임 워크로 안드로이드, ios 앱 개발이 가능한 크로스 플랫폼 프레임 워크가 생겨났다.
즉 하나의 언어, 한 번의 개발로 안드로이드와 IOS 모두에서 동작하는 네이티브 앱을 만들 수 있다.
네이티브 앱은 각 운영체제에 맞는 앱 개발이고, 크로스 플랫폼은 여러 운영체제에서 동작할 수 있는 앱을 한 번에 개발하는 기술을 말한다.
리액트 네이티브의 자바스크립트, 플러터의 다트, 자바린의 C#으로 코딩을 하면 IOS와 안드로이드에서 각각 이해할 수 있는 언어로 변환이 되어 폰에서 실행된다.
웹은 브라우저나 웹뷰가 제공하는 이 영역까지의 기능만 사용할 수 있지만 이 크로스 플랫폼 앱들은 양쪽 OS의 더 깊은 영역까지 닿을 수 있도록 만들어졌다.
[ 크로스 플랫폼 앱 장점 ]
- 각 운영체제의 앱을 하나의 언어로 프로그래밍할 수 있다.
- 네이티브 앱으로 제작하는 것보다 쉽다.
- 적은 자원으로 앱을 개발할 수 있다.
- 리액트 네이티브로 개발 시 코드 푸시라는 라이브러리로 앱스토어, 플레이스토어 심사 없이 업데이트가 가능하다.
[ 크로스 플랫폼 앱 단점 ]
- 성능에 한계가 있다.
- 크로스 플랫폼 프레임 워크로 개발된 소프트웨어는 안드로이드 앱과 ios 앱으로 변환되어 출력된다.
- 각 운영체제에 최적화된 방식으로 제작된 순수한 프로그램이 아니기 때문에 프레임 워크마다 네이티브 앱보다 성능이 떨어질 수 있다.
- 앱을 수정할 때마다 플레이스토어, 앱스토어 두 앱 마켓의 심사를 거쳐야 한다.
이러한 이유로 한정된 자원을 가진 기기에서 비교적 단순한 기능으로 이루어진 앱을 제작하는 데 사용한다.
스케줄 관리 앱, 쇼핑 앱, 사진 보정 앱, 캘린더, 카메라 등 모바일 기기의 기본 기능을 활용하면서 높은 성능을 요구하지 않는 앱을 개발하기에 적합하다.
[ 크로스 플랫폼 예시 ]
에어비앤비, 페이스북, 인스타그램, 구글에서 출시한 플러터, 페이스북의 리액트 네이티브, 마이크로 소프트의 닷넷마우이(구 자마린)
플러터 : 다트 언어 사용
리액트 네이티브 : 자바스크립트
닷넷 마우이 : C#
잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊
댓글과 좋아요는 큰 힘이 됩니다!
'IT 노트' 카테고리의 다른 글
| [IT 노트] 라이브러리와 프레임워크 (0) | 2023.12.08 |
|---|---|
| [IT 노트]오픈 소스와 라이선스 (0) | 2022.11.15 |
