모바일 앱 + PWA

네이티브 앱, 모바일 앱, 웹앱, 하이브리드, 크로스-플랫폼의 모바일 앱의 종류를 알고 PWA에 대해 알아봅시다.

아래의 영상을 여러번 봤는데 계속 잊어버려서 타이핑 하면서 머리에 새겼습니다.
모바일 앱 종류에 대해서 블로그나 다른 유튜브 영상도 많이 찾아봤지만 이 영상이 제일 와닿았던거같습니다. 여러분도 이 영상 보시고 즐코하세요~

네이티브 앱

• 스마트폰이란 것이 탄생하면서 있었던 가장 기본적인 형태의 앱입니다.
• 해당 스마트폰에 깔린 OS(안드로이드 또는 iOS)전용으로 개발된 소프트웨어입니다.
• 예로 아이폼의 경우 Objective-C(과거) Switft(최근) 언어 사용하고 안드로이드 앱의 경우는 자바나 코틀린을 사용합니다.
• 해당 OS 제조사에서 가이드와 프레임워크를 제공하여 주어진 방식대 앱을 개발합니다.
• 장점
  • 안드로이드와 iOS 각각에서 주어진 모든 자원과 기능을 활용 가능
  • iOS나 안드로이드가 새로 나올 때마다 최신 기능 탑재 가능
  • 스마트폰의 성능을 최대한 활용할 수 있는 고퀄리티의 앱 개발 가능
  • 각각 iOS의 앱스토어, 안드로이드의 플레이스토어에 올려지기 때문에 구글과 애플에게 검증된 방식대로 쉽게 스토어에서 검색해서 찾을 수 있고 원하는 위치에 아이콘으로 추가해서 언제든 간편하게 사용 가능
• 단점
  • iOS와 안드로이드 각각 따로 만들어야함
  • 버전을 업데이트하는 과정이 까다로움.
    새로 만든 앱이나, 업데이트한 버전을 스토어에 올릴 때 안드로이드는 몇 시간, iOS는 며칠의 검수 기간이 필요한데 이 둘의 새 버전을 시간을 맞춰서 동시에 출시하는 일이 까다로움.
• 요약: 우수한 성능의 앱을 만들 수 있지만 개발하고 관리하는 과정이 어렵습니다.

모바일 웹

• 스마트폰 사용자들을 대상으로 만든 웹사이트
• 스마트폰의 좁은 세로화면에서 보기 편안하도록 만들어짐.
• 장점
  • 개발하고 운영하기가 네이티브 앱에 비해 훨씬 간편
  • 모바일용으로 웹사이트만 만들어놓으면 사용자 폰에서 크롬이나 사파리 같은 브라우저로 열 수 있기 때문에 웹 개발만 할 줄 알면 OS에 구분 없이 어느 폰에서든 동작하는 웹앱을 만들 수 있고 내용이 바뀔 때도 이 사이트만 업데이트하면 되니까 스토어의 검수를 기다릴 필요 없이 언제든 원하는 때에 버전업을 할 수 있는거죠.
• 단점
  • 기능과 성능
  • 웹사이트란 건 브라우저에서 돌아가는 컨텐츠이기 때문에 모바일 웹이 갖출 수 있는 기능은 스마트폰에 깔린 크롬이나 사파리, 기타 브라우저들이 공통적으로 제공하는 기능들에 국한
  • 브라우저 화면에 나타날 뿐인 모바일 웹으로는 할 수 있는 것들이 제한
  • 이걸로도 만들 수 있는 유용한 앱이 많지만 스마트폰의 모든 자원과 기능을 활용할 수 있는 고성능 게임이나 그래픽 툴 등의 앱은 어렵겠죠.
  • 브라우저 안에서 주소로 찾아 들어가는거라 홈 화면에 예쁜 아이콘으로 고정해두거나 주소창 없이 풀 화면으로 사용하는 편리함도 보장하기는 어려울거에요. 즐겨찾기로 해 두던가 해야겠죠.

웹앱

• 모바일 웹과 모바일 웹’앱’의 구분은 뚜렷하지 않음.
• 폰으로 보는 웹사이트이기보다는 앱에 가까운 사용자 경험을 제공하도록 만들어진 모바일 웹을 웹앱이라고 함.

하이브리드

• 네이티브 앱과 모바일 웹 사이에서 절충점을 찾은게 하이브리드 입니다.
• 네이티브로 만들되, 그 앱에 브라우저 창을 둬서 일부 또는 대부분의 기능을 웹 형태로 제공하는 거죠. 보다 쉽게 말하자면, 안드로이드나 iOS 전용으로 각각 스토어에 올리는 네이티브 앱을 만드는데 그 앱 안에 크롬이나 사파리같은 브라우저처럼 웹사이트를 보여주는 창을 하나 넣는 거에요.
• iOS와 안드로이드에서 둘다 WebView라 불리죠.
• 그래서 이 앱을 실행하면 이 웹뷰에 사용자들이 이용할 모바일 웹이 접속되는거에요.
• 웬만한 기능들은 웹사이트로 만들어서 이 웹뷰 안에서 이용할 수 있도록 만들고 웹사이트로써 구현할 수 있는 기능들은
• 이 네이티브 레벨에서 처리하도록 하는거죠. 흔히 볼 수있는 예가 네이버 앱이에요. 브라우저에서 네이버 사이트를 들어갔을때랑 네이버 앱을 실행해서 사용해볼 때를 비교하면 네이버 앱에서만 실행할 수 있는 혹은 네이버 앱에서 더 깔끔하게 작동되는 그런 기능들이 있을거에요. 그것들이 네이버 앱의 네이티브 기능들인거죠.
• 이런 앱들은 이 네이티브 기능들에 대해서만 스토어를 이용한 업데이트가 필요하고 웹뷰에 나타나는 컨텐츠들은 웹쪽만 업데이트하면 되기 때문에 네이티브 앱보다 더 유연한 운영이 가능하고 탑재할 수 있는 기능에도 제한이 없을거에요.
• 개발자의 선택에 따라 그냥 순수 iOS, 안드로이드 개발로 할 수도 있고 ionic 같은 프레임워크를 사용하기도 해요.

크로스-플랫폼

• React Native, Flutter, Xamarin 이런 크로스-플랫폼은 또 다른 방식의 접근입니다.
• 하나의 언어, 한 번의 개발로 안드로이드와 iOS 모두에서 동작하는 네이티브 앱을 만들기 위한겁니다.
• 리액트 네이티브의 자바스크립트나 플러터의 다트, 자마린의 C#으로 코딩을 하면 iOS와 안드로이드에서 각각 이해할 수 있는 언어로 변환이 돼서 폰에서 돌아가게 되는 거거든요.
• 웹은 브라우저나 웹뷰가 제공하는 영역까지의 기능만 사용할 수 있지 크로스-플랫폼 앱들은 양쪽 OS의 더 깊은 영역까지 닿을 수 있도록 만들어졌어요.
• 얼마나 깊이 내려가는지, 그리고 이를 위해 어떤 방식을 상요하는지는 각각이 다르죠.
• 플랫폼별 순수 전용 언어와 프레임워크로 만드는 것보다는 아직은 활용할 수 있는 기능들에 그리고 그 속도와 매끄러움에 한계가 있지만 이미 웬만한 수준과 기능들의 앱들은 준수한 퀄리티로 만들 수 있을만큼 발전해 있어요. 만약 여기에 웹뷰를 띄워서 웹사이트를 보여준다면 크로스-플랫폼이자 하이브리드 앱이 되겠죠. 필요에 따라 이렇게 여러 방식들을 차용해서 내게 최적인 앱을 만들 수 있는거에요.

PWA(Progressive Web Application)

PWA는 먼저 설명한 것들을 대체하기 위한 것 또는 그것들의 단점을 다 해결할 수 있는 무언가가 아니라 개발하기 쉽고 사용하기 편리한 앱을 만들기 위한 또 하나의 접근법, 방법론입니다.
더 정확히는, 이 모바일 웹의 한계를 브라우저의 발전을 통해 끌어올린것입니다.

일반 모바일 웹으로 만든 사이트가 PWA가 되면서 가능해지는 것들을 먼저 살펴봅시다.

• 지정된 아이콘 형태로 스마트폰 홈에 추가가능(마치 스토어에서 다운로드한 앱처럼)
• 추가된 아이콘으로 실행하면 주소창 등의 버튼 없이 네이티브나 하이브리드 앱인것처럼 작동
• 통신이 안되는 상태에서도 앱의 오프라인 기능들이 화면에 표시
• 구글 등에서 검색이 잘 되도록 최적화 가능
• 안드로이드에서는 푸시 알람, 스토어에 출시 가능

브라우저에서 돌아가는 모바일 웹이 어떻게 가능할까요.
브라우저들이 이제 이런 기능들을 지원하기 때문입니다.
보다 편리한 PWA의 생태계를 위해 위 기능들 뿐 아니라 여러 다른 것들을 가능하도록 하기 위한 브라우저 기능들이 개발되고 발달해가고 있어요.
물론 브라우저마다 그 정도에 차이는 있습니다.
네이티브 앱이나 하이브리드로 할 수 있는 고성능의 앱은 불가능하겠지만 웹으로 개발 가능한 수준의 앱은 브라우저에서 돌리는 것보다 훨씬 편리하게 그리고 지원되는 더 많은 기능들과 함께 이용할 수 있습니다.
오늘날 폰 이용자들은 스토어에 굳이 접속해서 앱을 다운받는 빈도가 그다지 높지 않습니다.
이미 다운받은 앱을 사용하면서 혹은 브라우저로 웹서핑을 하면서 대부분 시간을 보냅니다.
스토어에서 찾아 다운받아야 하는 앱들보다 웹서핑으로 찾아낼 수 있는 모바일 웹들이 새 사용자들을 유입시키기에 더더욱 유리합니다.
홈에 아이콘으로 추가까지 되니까 스토어에서 다운받는 앱들처럼 기존 사용자들을 묶어놓는 것도 가능해집니다.