brunch

You can make anything
by writing

C.S.Lewis

by 해리스본스 Aug 09. 2022

네이티브 앱, 하이브리드앱,웹 앱, 모바일 웹이 뭘까?

[코드스테이츠 PMB 13기]W7D2

  


PM은 앱 개발 시 어떤 유형의 앱을 선택해야 할까?


출처: 비전공자를 위한 이해할 수 있는 IT 지식


내가 PM인데, 새로운 프로덕트를 개발하고 출시하여야 한다. 도대체 어떤 유형의 앱을 만들어야 할까? 

네이티브? 하이브리드? 웹 앱? 모바일 웹? 아니 이게 다 뭔데?????? 


오늘은 네이티브, 하이브리드, 모바일 웹, 웹 앱의 유형의 특징과 장단점을 알아보고, 어떤 상황에서 어떤 유형의 앱을 선택해야 하는지 고민해보려 한다.



네이티브 앱(Native APP)


네이티브 앱은 스마트폰의 운영 체제에 맞춰 개발된 프로그램이다. 네이티브 앱을 개발하려면 각 운영 체제에서 사용하는 언어를 이용해 코딩을 해야 한다. 안드로이드 SDK를 이용해 JAVA 언어로 만드는 앱과 ios 기반 SDK(*)를 이용해 Swift로 만드는 대부분의 앱이 여기에 속한다. 


SDK(Software Development Kit): OO소프트웨어를 개발하기 위해 도움을 주는 '다른 소프트웨어'이다. 예를 들어 어떤 회사가 구글에서 만든 구글 지도 SDK를 설치하면 해당 회사는 구글 지도 기능을 넣을 수 있다. 


예: 유튜브, 네이버 지도, 틱톡, 인스타그램(주요 페이지), 대부분의 게임, 계산기와 노트 등 핸드폰에 기본적으로 내장되어 있는 앱들

유튜브 / 네이버 지도 / 틱톡

장점

- 앱의 실행 속도가 빠르다

- 유용한 API(*)의 지원을 받을 수 있다. 

- 카메라, 페이스 인식, 연락처 조회 등 스마트폰의 기본 기능들을 활용할 수 있다.

- 각 운영 체제에 최적화됐기 때문에 안정적인 서비스를 제공할 수 있다. 

- 고성능 그래픽 처리가 가능하다(2D, 3D, 증강현실 등)


단점

- 해당 플랫폼 별로 다른 언어를 사용함으로 각각의 언어를 알고 있어야 한다. 

- 플레이 스토어와 앱 스토어에 올려 심사를 받고 통과해야만 앱이 등록되기 때문에 번거롭다.

- 앱을 업데이트할 때도 심사를 거쳐야 하기 때문에 업데이트 또한 번거롭다.

- 개발에 더 많은 비용이 든다.


API(Appliation Programing Interface): 클라이언트, 서버와 같은 서로 다른 프로그램에서 요청과 응답을 주고받을 수 있게 만든 체계이다. 



크로스 플랫폼 프레임 워크(Cross-platform frameworks)


 한 가지의 개발 언어와 프레임워크로 iOS나 Android 양쪽 스토어에 출시할 수 있는 개발 방법으로, 둘 이상의 플랫폼에서 돌아가는 앱을 만들 수 있다. 대표적인 예로 구글이 만든 Flutter와 페이스북이 만든 React Native가 대표적인 예다. 



예: 네이버 지식인 (Flutter로 개발), 인스타그램 설정 페이지(React Native로 개발)

네이버 지식인



장점

- 코드를 하나만 작성하면 플레이 스토어와 앱스토어에서 모두 사용할 수 있어 시간을 줄일 수 있다.

- 빠르게 개발할 수 있다. 

- 하나의 코드로 작성하기 때문에 유지보수가 쉽다.


단점

- 기존 네이티브 앱이 가지고 있는 동적인 요소 퍼포먼스를 100% 구현할 수 없다.

- 일반적으로 네이티브 앱에 비해 성능이 떨어져 느린 경우가 있다.

- 라이브러리가 다양하지 않아 기능 구현이 어려운 경우가 있을 수 있다.

- 업데이트 지연이 발생할 수도 있다. 




하이브리드 앱(Hybrid APP)


네이티브 앱과 웹 앱이 섞인 형태이다. 일반적으로 앱의 기본 틀은 네이티브 앱으로 만들되, 특정 영역은 브라우저를 띄어 화면을 보여준다.


여기서 잠깐! 어떤 영역을 나눠서 개발하는 걸까?

네이티브 앱 영역: 자주 바뀌지 않는 영역을 네이티브 영역으로 개발한다. 수정할 때마다 심사를 받아야 하고, 사용자가 업데이트해야지 수정 사항이 적용되기 때문이다.

웹 앱 영역: 자주 바꿔야 하는 페이지를 웹 앱 영역으로 개발한다. HTML 코드만 수정하면 모든 사용자가 수정된 페이지를 볼 수 있기 때문이다. 



예: 네이버, 다음, 구글




장점

- 네이티브 API와 브라우저 API를 이용한 다양한 개발이 가능하다.

- 웹 기술만으로 개발해서 앱스토어에 배포할 수 있다.

- 하나의 코드 베이스를 사용하기 때문에 시간과 돈을 절약할 수 있다.


단점

- 브라우저 성능에 따라 앱의 성능이 좌우된다.

- 네이티브 기능에 접근하기 위해서는 결국 네이티브 개발 지식이 필요하다.

- 3D 기능 지원이 취약하다. 




웹 앱(Web APP)

모바일 웹과 네이티브 앱을 결합한 형태로 모바일 웹의 특징을 가지면서 네이티브 앱의 장점을 갖고 있다. 모바일 웹보다는 조금 더 모바일에 최적화된 앱을 의미한다. 요즘에는 웹 앱과 모바일 웹을 따로 구분하지 않는 경우가 많다고 한다. 


장점

- 웹 유형이기 때문에 다양한 언어로 개발이 가능하다. 

- 다른 유형보다 비교적 쉽게 개발할 수 있고 시간과 비용이 적게 든다. 


단점

- 웹 유형이기 때문에 모바일 환경 최적화가 힘들다. 

- 속도가 느릴 수 있다.



모바일 웹(Mobile WEP)


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


예: 네이버 모바일 웹, 다음 모바일 웹



장점

- 개발 및 유지보수가 간편하다.

- 새로운 버전을 릴리즈 할 때 웹사이트만 수정하면 되기 때문에 플레이 스토어나 앱 스토어의 검수도 전혀 필요가 없다.


단점

- 카메라 등 스마트폰의 기본 기능을 활용할 수 없다. (다만 최근에는 웹 기술이 발전애 앱처럼 사용할 수 있는 기능이 많아졌다. 카메라 접근이나 오프라인 작업 등도 가능해졌다.)

- 브라우저를 열고 검색해서 들어가야 하기 때문에 실행이 까다롭다. 




내가 PM이라면 어떤 앱의 형태를 선정해야 할까? 


앱 유형은 한번 정하면 바꾸는 것이 매우 어렵다. 따라서 초기에 다양한 것을 고려해서 선택해야 한다. 그렇다면 무엇을 고려해야 할까? 



1. 어떤 서비스를 만들 것인지 고려해야 한다.


서비스 유형에 따라 앱의 형태가 달라질 수 있다. 예를 들면 안전성이 중요한 핀테크 서비스일 경우 네이티브로 개발을 할 확률이 높을 것 같다. 이커머스와 같은 경우에는 내부 이미지와 데이터를 자주 업데이트해야 하기 때문에 네이티브로 개발할 경우 계속 앱스토어의 심사를 받아야 하기 때문에 적절하지 않을 것이다. 


2. 우리의 서비스를 사용할 주 타겟을 고려해야 한다.

만약 우리가 개발할 서비스를 90%가 안드로이드를 사용한다면 안드로이드만 우선 개발하면 된다. 만약 안드로이드와 iOS 둘 다를 비슷하게 사용한다면 말이 달라질 것이다. 따라서 우리의 서비스를 사용할 주 타겟을 파악해 어떤 기기를 주로 사용하는지, 어떤 상황에서 사용하는지를 고려해야 한다. 



3. 개발 리소스를 고려한다. 

이전 회사에서 신규 앱을 플러터로 개발한 적이 있다. 당시 플러터는 매우 초기 언어여서 관련 자료 찾기가 어렵고 API를 갖다 쓰기가 어려웠던 기억이 있다. 플러터를 선택한 이유는 iOS와 안드로이드를 한 번에 개발할 수 있기 때문인데, 결론적으로는 가장 중요한 기능을 당시에 플러터로 개발하지 못했고, 플러터를 사용하는 개발자 구하는 것에 어려움을 겪은 적이 있다.


이런 경우와 같이 초기의 언어는 예상치 못한 어려움을 겪을 수 있다. 또 회사 내에 어떤 언어의 개발자가 많은지도 고려해야 한다. 만약 내부 개발자가 없는 경우 앱의 유형에 따라 외주 비용이 달라지기 때문에 이런 측면도 고려해야 한다. 


4. 재무 상태를 고려해야 한다.


지금 당장 큰 비용을 들이지 못하는 초기 스타트업일 경우에는 상대적으로 개발 비용이 적게 드는 하이브리드 앱이나 크로스 플랫폼 프레임 워크를 사용해야 할 것이다. 만약 재무 상태가 좋은 기업이라면 비용에 상관없이 우리 서비스에 최적화된 유형을 선택할 것이다. 따라서 재무 상태도 앱 유형을 선택하는 중요한 이유 중에 하나가 될 것이다. 






참고 자료


[네이버 지식인 테크블로그]

https://d2.naver.com/helloworld/3384599



매거진의 이전글 HTML, CSS, JavaScript로 웹 분석하기
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari