어떻게 개발할 것인가? ㅡ 네이티브앱 & 하이브리드앱 & 크로스플랫폼앱 & 모바일웹 & PWA [코드스테이츠 PMB 7기]

네이티브앱, 하이브리드앱, 크로스플랫폼앱, 모바일웹, PWA... 이게 다 뭘까?

 

제품을 고객에게 전달하는 다양한 방식들

그 중에서 어떤 방식을 선택할지, 전략적으로 접근해야 한다.

 

 

PM은 해당 개념들을 개발 난이도 측면에서 이해할 필요가 있다. '우리 제품의 고객들이 원하는 제품이 무엇인지'/'지금 보유하고 있는 리소스'에 따라 적합한 형태가 있기 때문. 이번 포스팅에서는 각 유형들의 특징과 단점, 적합한 경우들에 대해서 정리해보고자 한다. 

 

 

Photo by Jeremy Zero on Unsplash

 

웹과 앱의 차이

웹과 앱은 개발 언어와 구동 방식이 다르다.

 

• 웹의 경우, HTML, CSS, Java Script(이하 JS)으로 작성된다. 모바일 브라우저로 구동된다.
• 앱의 경우, 플랫폼마다 정해진 언어로 작성된다. (iOS: Swift, OBJECTIVE-C, Android: JAVA, Kotlin)  사용자의 디바이스에 설치된 앱으로 구동된다. 

 

 

Photo by  Markus Spiske  on  Unsplash

 

 

웹 ㅡ 모바일 웹, 모바일 웹앱, PWA (Progressive Web APP)

HTML, CSS, JS로 작성되는 코드

url 활용하므로 접근성 우수

일회성 이용 시에는 용이

반복적 이용 시에는 번거로움

 

📌 모바일 웹

모바일 디바이스 브라우저를 통해 url 입력하여 접근

PC에서의 웹 화면을 모바일 디바이스 화면 크기에 맞춰 보여주는 방식이다.

 

🤔 어떤 경우에 활용하면 좋은가?

모든 기기 브라우저에서 구동 가능한 제품을 빠르게 개발하고 싶을 때

디바이스 고유의 기능에 접근이 필요하지 않은 제품의 경우

 

 

📌 모바일 웹앱

모바일 웹과 네이티브 앱의 강점을 모아둔 방식

모바일 웹 ㅡ 즉, 모바일에서의 UX에 중점을 두고 개발한다.

모든 기기 & 브라우저에서 접근 가능

유지보수 용이

 

단점

디바이스 기능 활용에 제한이 있다.

일부 기능은 앱에서만 구동 가능하기도.

 

🤔 어떤 경우에 활용하면 좋은가?

사용자 방문 트래픽이 많은 경우

웹과 모바일 둘다 구동 가능한 앱을 만들고자 하는 경우

 

 

예시

Safari에서 구동시키는 네이버 모바일 웹앱.

배경화면에 바로가기 생성하여 앱처럼 사용할 수 있다.

일부 기능에는 제한이 있다.

 

 

 

 

🧐 모바일 웹앱 더 알아보기 ㅡ "PWA" 란?

최근 각광받고 있는 유형의 웹앱.

• "바로가기" 기능 활용, 배경화면에 아이콘을 만들수도 있다.
• 일부 디바이스 기능(ex. GPS)을 활용할 수 있다.
• 푸시 알림 수신 가능
• 보안 연결(HTTP)을 활용하므로 신뢰도 높음
• 웹이므로 검색엔진에서 검색 가능, 마케팅에 있어 SEO를 활용해볼 수 있다. 

 

프로그레시브 웹앱(Progressive Web Apps)이란?

 

 

---

 

앱 ㅡ 네이티브 앱, 하이브리드 앱, 크로스 플랫폼 앱

아이콘이 있다. 반복적으로 사용하기에 편리성이 좋다.

안정적인 속도와 성능을 제공한다.

앱 설치를 하게 되면 시간 및 용량 부담이 생겨 앱 설치까지 이어지기 어려울 수 있다.

 

📌 네이티브 앱

아이폰 앱, 안드로이드 앱 등 각 개발 플랫폼에 해당하는 언어로 개발하는 앱.

모바일 디바이스에 최적화된 앱

안정적인 속도, 기능을 제공.

 

단점

플랫폼 정책에 맞춰야 하고, 승인 절차/유저의 앱 설치를 걸처야 하므로

잦은 업데이트/유지보수에 불리하다.

 

🤔 어떤 경우에 활용하면 좋은가?

서비스에 있어 디바이스 고유의 기능을 필요로 할 경우

앱의 퍼포먼스(성능)이 중요하다면

개발자 리소스가 풍부할 경우

 

예시

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

 

 

 

📌 하이브리드 앱

네이티브 앱 틀 안에서 "웹 view"로 콘텐츠 보여주는 방식

웹 view는 HTML, CSS, JS로 작성된다. 

 

단점

결국엔 네이티브 앱 개발이 필요하다

앱 성능이 곧 브라우저 성능이라고 본다. 앱이 날쎄게 구동되어야만 웹 view도 날쎄게 보여지는 것이니까.

 

🤔 어떤 경우에 활용하면 좋은가?

디바이스 고유의 기능 일부에 접근할 필요 있을 때

업데이트와 유지보수가 자주 진행되어야 하는 경우

• 콘텐츠의 지속적인 업데이트 : 쇼핑몰, 포털 / 보안이 중요한 경우: 은행, 카드

 

예시

포털 앱, 쇼핑몰 앱, 퍼블리

 

 

 

 

🧐 모바일 앱 더 알아보기 ㅡ "크로스플랫폼 앱"이란?

개발 초기에 React 리액트(JS)와 같은, 1개의 개발 언어와 프레임워크 활용하여 만들어진다.

• JS를 사용하므로 다양한 배경의 개발자를 끌어모으기에 좋다. 
• 이후 코드 변환을 거쳐서 iOS, Android에서 구동 가능해진다. 
• 초기 개발 단계에서 1개의 언어로만 작업해 2가지 플랫폼에서의 앱을 출시할 수 있다는 장점이 있다. 

 

예시

대표적인 예시로는 페이스북, 인스타그램, 에어비앤비가 있다.

(리액트는 페이스북에서 자체적으로 개발한 프레임워크다)

 

출처: https://www.theverge.com/interface/2020/9/10/21429144/instagram-redesign-test-reels-shopping-adam-mosseri-interview

 

---

+) SPA란?

 

SPA : Single Page Application

최초 1회만 로드되는 형식

다른 정보들은 비동기적(Asynchronous : 요청과 결과가 동시에 일어나지 않는)으로

클라이언트에서 라우팅(routing: 어떤 네트워크 안에서 통신 데이터를 보낼 때 최적의 경로를 선택하는 과정)한다.

 

반응형 디자인을 만드는 데 용이.

빠른 호환성

동일한 양의 트래픽에 대해 더 적은 수의 서버를 사용하여 서버 비용을 절약

 

대신, 초기 구동이 상대적으로 느리다.

 

🤔 어떤 경우에 활용하면 좋은가?

탐색이 많고 반복되는 템플릿을 사용하는 페이지에서 매우 유용

 

 

 

출처: bloomreach

 

 

 

 

---

수수나

"어떻게 해야 더 많은 고객을 만족시킬 수 있을까?" 고민을 시작으로 PM에 도전합니다.
코드스테이츠 PM 부트캠프 7기에서의 배움을 시작으로 저만의 관점이 담긴 기록을 쌓아나가고 있습니다.

 

 

 

 

 

참고 자료

---

https://altenull.github.io/2018/02/25/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%A0%88%EC%8B%9C%EB%B8%8C-%EC%9B%B9-%EC%95%B1-Progressive-Web-Apps-%EB%9E%80/

프로그레시브 웹앱(Progressive Web Apps)이란?

 

https://www.hanl.tech/blog/native-vs-hybrid-vs-pwa/

네이티브 앱(Native App) vs 하이브리드 앱(Hybrid App) vs 프로그레시브 웹 앱(PWA) – 정의와 장단점 - 하

 

https://www.bloomreach.com/en/blog/2018/07/what-is-a-single-page-application.html

What is a Single Page Application | Bloomreach

https://private.tistory.com/24

동기와 비동기의 개념과 차이

https://wonit.tistory.com/231

[리액트 분석하기] 리액트가 페이지를 라우팅 하는 방법 (1) 부제 :: Single Page Application이 무엇이고