모바일 어플리케이션의 종류

PWA를 배우기 앞서 Native Application, WebApp, Hybrid-App, Cross Platfrom 에 대해 학습해보자.

 

 ✅ Native Application 

가장 기본적인 형태의 앱이다 ===  모바일 기기에 최적화된 네이티브 언어로 개발된 앱

👉  해당 스마트폰에 깔린 OS, 안드로이드 또는 iOS 환경 전용으로 개발된 소프트웨어이다.

• Android 모바일 앱 개발의 경우는 Kotlin 또는 Java
• iOS의 경우 Swift 또는 Objective C

덕분에 앱의 실행 속도가 빠르고 유용한 API의 지원도 받을 수 있다.
반면 ‼️다른 운영체제 ‼️에서도 실행되기 위해서는 시간도 노력도 돈도 많이 드는 단점이 있다.

장점	단점
사용자에게 가장 빠르고 안정적이며 반응이 빠른 환경을 제공	둘 이상의 코드 베이스:네이티브 앱은 Android와 IOS의 호환이 되지 않기 때문에 별도로 제작
다양한 네이티브 기능을 쉽게 활용: 예를 들자면 카메라, 마이크(microphone), GPS 및 스와이프 제스처(swipe gesture)	더 많은 비용이 들고 빌드하는 데 시간이 더 오래 걸림

 

🤔 언제 유용한 것일까?

1. 3D 게임 또는 애니메이션 제작
2. 어떤 장치의 특별한 기능을 사용하고 싶을때
3. 앱의 기능이 많고 복잡한데 성능 구현을 정확하게 하고 싶을 때
4.  

💡 최근 들어..!!!!

Java나 Swift/Objective C 통한 네이티브 앱 개발 외에,
크로스 플랫폼 프레임 워크(Cross-platform frameworks)의 인기가 증가하고 있다.
Google이 만든 Flutter와 Facebook이 만든 React Native가
현재 크로스 플랫폼 앱 개발 시장의 선두 주자로 떠오르고 있다!

 ✅ Web App 

Native App 처럼 보이고 기능 또한 앱처럼 구동되지만 웹 기술을 활용해 만든 앱이다.

👉 웹 기반의 HTML, CSS, Javascript를 활용해 별도의 앱 파일을 설치하지 않고 인터넷 브라우저를 기반으로 작동된다

 

 

 

앱 없이 인터넷을 통해 구동되는 것을 보면 일반 모바일 웹과 똑같은 것이라 느낄 수 있지만,
두 가지는 약간의 차이점이 있다!!

1. 모바일 웹의 경우 PC를 기준으로 제작된 뒤 모바일 화면 규격에 맞게 폰트나 이미지 등을 바꾼 것이지만, 웹 앱은 처음부터 모바일을 기준으로 제작되기 때문에 스마트폰 이용자에게 훨씬 편안한 환경을 제공
2. 하지만 모바일에 설치하는 앱이 아니므로 카메라나 음성 등 디바이스의 자체 기능에 접근은 할 수 없다.

장점	단점
인터넷 브라우저를 기반으로 작동하기 때문에 별도의 앱을 설치하지 않아도 된다.	디바이스에 접근 권한이 없기 때문에 카메라나 음성 인식 등의 기능을 활용할 수 없다.
표준 웹 언어로 만들 수 있기 때문에 상대적으로 제작 비용이 저렴하고 개발 기간도 짧은 편이다.	앱 설치 대신 브라우저 실행 및 url 입력이나 별도의 링크 클릭 등의 과정을 거쳐야 해서 번거롭다.
수정사항이 생겨도 앱 마켓의 심사를 거치치 않아도 되기 때문에 업데이트 속도가 빠르다.	네이티브 앱에 비해 상대적으로 구동 속도가 느리고 안정성도 떨어진다.

 

 

🚨 여기서 잠깐, 모바일 웹 ↔ 웹 앱의 차이점  🚨

모바일 웹과 웹 앱은 실행 방식에 차이점이 있습니다.

• 모바일 웹
  → 화면의 일부분이 바뀔 때 전체를 서버에서 새롭게 불러오는 풀 브라우저 방식(Full Browsing)Full Browsing 방식

Full Browsing 방식

• 웹 앱
  → 변경이 필요한 부분만 바꾸는 단일 페이지 방식(SPA, Single Page Application)을 사용합니다.

SPA

따라서 모바일 웹이 웹 앱보다 속도가 느리다는 특징이 있습니다.

 

📍 모바일 최적화를 위한 반응형과 적응형이 과정에서 모바일 최적화를 위한 다양한 방법들이 등장  

1. 반응형 웹 (Responsive Web)
   한 개의 URL로 다양한 디바이스 사이즈에 맞게 변동
   1. 미디어 쿼리를 사용해 기기 화면의 크기를 확인하고 유연한 이미지와 그리드를 활용해 화면 크기 변화에 따라 페이지의 크기 및 레이아웃을 조절하는 기술
   2. 하나의 템플릿만을 사용해 다양한 사용자와 기기에 대응할 수 있어 개발이 간편
   3. 다만, 사용자는 단 하나의 기기만으로 접속하지만 그 경우에도 모든 기기를 위한 CSS를 전부 다운로드 해야한다
      → 데이터를 낭비하고 로딩 시간을 늘리는 단점을 가진다.
   4. 기존에 이미 운영 중이었던 데스크톱용 사이트가 있었다면
      사이트를 재구축해야만 한다는 점에서 불편할 수 있다.
2. 적응형 웹 ( Adaptive Web)
   각 디바이스 별로 템플릿을 만들어 접근한 디바이스에 따라 알맞는 템플릿을 제공
   1. 모바일의 경우 모바일용 템플릿을, 데스크톱의 경우 데스크톱용 템플릿을 제공
      → 따라서 기기별로 다른 템플릿을 제작해야 할 필요가 있다.
   2. 기존에 이미 데스크톱용 템플릿을 작성했다면, 바닥부터 재구축할 필요 없이 다른 기기용 템플릿만 따로 만들면 되어 편리
   3. 사용자의 기기에 ‼️ 맞는 템플릿 및 CSS만 다운로드 ‼️하므로
      데이터 낭비가 적고 로딩 속도가 빠르다.
      → 다만, 각 기기별로 별로의 템플릿을 작성해야 하므로 개발이 복잡해진다.

점차 모바일 환경이 발달하면서 PC기반으로 개발된 웹페이지들이 모바일 환경으로 적응!

ex) 브라우저의 가로 길이가 변하는 상황
👉 어느 순간 레이아웃이 툭 바뀐다 === 적응형

👉 이미지와 그리드가 실시간으로 변한다 === 반응형

 ✅  Hybrid App 

 

Native Application + Web App의 결합

앱의 화면이나 기능 등 콘텐츠 영역은 웹 기반으로 제작하고 겉모습은 앱 마켓 등록과 설치를 위해 네이티브 앱으로 포장한 것이다.

 

두 가지 개발 방식을 이용하므로 웹과 앱의 API를 모두 사용할 수 있습니다.
따라서 웹 앱에서는 불가능 했던 디바이스 자체 기능에 접근할 수 있습니다.

장점	단점
하나의 코드 베이스로 작동 👉 하나의 앱을 빌드 👉 두 플랫폼(안드로이드,ios)모두 작동	Performance 문제가 가장 큰 단점
시간과 돈 절약	크로스 플랫폼 개발과 UX의 어려움
손 쉬운 확장 👉 Native 기능 접근 및 사용 가능

 

🤔 언제 유용한 것일까?

1. 다양한 플랫폼(모바일이나 웹)을 통한 사용자층이 넓을 때
2. 내용을 기본으로 한 간단한 프로젝트인 경우; 애니메이션도 없고 복잡한 기능도 필요 없을 경우
3. 시간은 촉박한데 여러 디바이스에서 실행돼야 하는 앱을 만들어야 할 때
4. 프로젝트 아이디어가 있는 경우 가장 간단하게 테스트해보고 싶을 때

✅ Cross Platform Framework  

하나의 소스코드로 iOS, Android 운영체제 모두 배포할 수 있다!!

• Flutter
• React Native

🌈 정리