네이티브 앱 (Native App)
IOS, Android와 같은 구체적인 플랫폼을 위해 만들어진 응용 프로그램
Android =>Kotlin,Java
Ios ->Swift,Objective C
장점
- 사용자에게 가장 빠르고 안정적이며 반응이 빠른 환경을 제공
- 유용한 API 지원을 받을 수 있음
- 다양한 네이티브 기능의 활용 (카메라, 마이크, 스와이프 제스처, GPS)
단점
- 코드 베이스가 둘 이상으로, 호환이 되지 않아 별도로 제작
- 더 많은 비용이 들고 빌드하는데 시간이 오래 걸림
=> 크로스 플랫폼 프레임 워크 (Flutter,React-Native) 로 해결 가능 - 사용자가 앱을 사용하기 위한 별도의 설치 과정 필요
- 수정 사항이 생기는 경우 앱 마켓의 심사를 거치고 전체를 업데이트 해야 함
- 다운로드 받아야 하므로 쉬운 접근이 어려움
사용
- 3D 게임, 애니메이션 제작
- 어떤 장치의 특정한 기능을 이용하고 싶을 때
- 앱 기능이 많고 복잡할 때 성능이 정확히 나오게 하고 싶을 경우
웹 앱 (Web App)
네이티브 앱처럼 보이고, 기능 또한 앱과 동일하게 구현, 그러나 웹 기술을 활용하여 만들어졌기에 별도의 앱 파일을 설치하지 않고 인터넷 브라우저를 기반으로 동작함
모바일 웹의 경우 PC를 기주으로 제작한 뒤 모바일 화면 규격에 맞게 폰트나 이미지 등을 바꿈
웹 앱의 경우 모바일을 기준으로 제작되었기에 스마트폰 이용자에게 훨씬 편안한 환경을 제공
장점
- 인터넷 브라우저 기반이기에 별도의 설치 과정이 필요하지 않다.
- 표준 웹 언어를 사용하기에 상대적인 제작 비용이 저렴하고 개발 기간이 짧다.
- 업데이트 속도가 빠르다
단점
- 디바이스에 대한 접근 권한이 없어서 카메라나 음성 인식 등의 기능 활용이 불가능하다.
- 앱 설치 대신 브라우저 실행 및 URL 입력 등의 과정을 거쳐야 한다.
- 네이티브 앱에 비해 상대적으로 구동 속도가 느리고 안정성이 떨어진다.
모바일 웹 VS 웹 앱
모바일 웹=> 화면의 일부분이 바뀔 때 전체를 서버에서 새롭게 불러오는 풀 브라우저 방식,
웹 앱 => 필요한 부분만 바꾸는 SPA 방식을 사용
하이브리드 앱 (Hybrid App)
네이티브 앱 + 웹 앱
앱 화면이나 기능 등의 영역= 웹 기반 (웹 기반 언어 및 프레임 워크 사용)
겉모습은 앱 마켓 등록 및 설치를 위한 네이티브 앱으로 포장
웹, 앱의 api 모두 사용 가능
장점
- 하나의 코드 베이스로 두 플랫폼에서 모두 작동
- 네이티브 기능 액세스 가능
단점
- 크로스 플랫폼 개발과 ux의 어려움, 각 네이티브 플랫폼에서 적절하게 실행되도록 하려면 상당한 노력이 필요
- 디자인의 자유도가 떨어짐
- 네이티브 앱 개발 지식 필요
사용
- 다양한 플랫폼을 통한 사용자층이 넓을 때
- 애니메이션이나 복잡한 기능이 없을 경우
- 시간은 촉박한데 여러 디바이스에서 실행되어야 할 때
ex) 인스타그램, 금융기관 앱, gmail
PWA (Progressive Web App)
모바일 웹 앱을 마치 네이티브 앱처럼 만들고자 하는 방법론으로 기존의 기술들을 활용하여 모바일 웹 앱을 네이티브 앱처럼 사용할 수 있도록 하는 것
사용자들에게 네이티브 앱의 느낌을 주면서도 웹 브라우저에서 바탕화면 바로가기를 추가하여 기본 앱처럼 사용할 수 있다.
오프라인에서도 사용 가능 하며 알림 메세지도 받을 수 있고, 디바이스의 하드웨어적 기능 또한 사용할 수 있다.
장점
- 오프라인이나 느린 네트워크에서도 서비스 워커를 사용하여 작동 - 네트워크 독립적
- 항상 최신의 상태로 유지
- HTTPS를 통해 제공되므로 안정성 확보
- 다양한 플랫폼에서 실행 가능
- 네이티브 앱보다 훨씬 저렴하고 빠르게 개발, 홈화면에 추가 가능 - 설치 가능
- 다양한 화면 크기 수용 - 반응형
- 검색 엔진 검색 가능 - 발견 가능
- URL을 전송해 공유할 수 있음
- 안전, 민감한 데이터에 접근하려는 모든 제 3자로부터 안전
- 기존 브라우저의 기본 기능 여전히 사용 가능 - 점진적
단점
- 오래된 브라우저들을 PWA 지원하지 않음
- 애플 장치에 대한 지원이 적음
- 앱 스토어에서는 사용 불가
- 배터리 전력 소모가 큼
- PWA 지원 X (애플스토어, IOS파이어폭스...)
EX) 핀터레스트, 유투브, 틱톡, 스포티파이, 트위터, 스타벅스, 페이스북 etc
사용
- PWA Builder : 웹 사이트를 pwa로 전환할 때 검토
- work box- service worker자동으로 만들어줌
- Maskable - pwa를 위한 icon을 제작할 수 있는 웹
- Web.dev - pwa를 만들기 위해서 어떤 내용이 들어가야 하는 지
PWA 만들기
<1> 준비물
1. 웹 코드로 만든 웹 사이트 OR 웹 어플리케이션
2. HTTPs를 이용한 서비스 제공
3. Application Manifest (Json 포맷으로 웹 어플리케이션에 대한 여러 정보 제공)
4. service worker - js script, 어플리케이션에서 server와 데이터를 주고받을 때 오프라인 상태일 때 저장한 데이터를 보내주자, 미리 fetching을 해서 저장을 해놓자! 등의 역할
<2> DEMO
HTML+CSS+JS -> PWA (데스크탑에서도 가능)
1. 만들어두었던 웹 어플리케이션 배포 (ngrok 등 사용)
2. PWA Builder 에서 pwa 유효성 검사
3. manifest 등을 프로젝트에 옮김
