일하게 된 곳에서 Framework7이라는 하이브리드 앱 프레임워크를 이용해 쇼핑몰 어플리케이션을 만들게 되었다. 백엔드는 루비온레일즈, 프론트엔드는 리액트로 구현한다.
구현에 앞서, Framework7란 무엇인지, 즉 하이브리드 앱이란 무엇인지, 프레임워크는 무엇이 있는지 알아보고자 한다.
👀 네이티브 앱, 모바일 웹(앱), 그리고 하이브리드 앱
1. 네이티브 앱
: 모바일 기기에 최적화 된 언어로 개발된 앱
1) 👍장점
- Android, iOS기반의 api로 개발하여 속도가 빠르고 안정적이면서 동적인 효과를 구현하기에 좋음.
- 스마트폰의 다양한 기능들에 대한 접근이 자유로움
2) 👎단점
- Android, iOS 개발자가 각각 두 개의 버전으로 개발해야함으로 비용과 시간 소요가 큼.
- 앱 오픈시 이외에도 수정, 추가 개발을 했을 경우 앱스토어에 심사 요청하여 승인 후 업데이트가 진행되어야 반영된 버전을 사용할 수 있음.
- 하이브리드 앱에 비해 용량이 큼.
2. 모바일 웹, 웹앱
: 사파리나 크롬같은 브라우저로 URL을 통해 들어가는 사이트 형태의 서비스
- 모바일 웹 : 웹이지만 모바일 화면에 맞게 구성한 웹
- 웹앱 : 모바일웹과 근본적인 차이는 없지만 겉모습과 구동방식을 앱인 것처럼 보이게 꾸며놓은 것
1) 👍장점
- 개발하는데 있어 네이티브, 하이브리드 앱에 비해 적은 리소스, 비용, 시간이 들어감. 사용자가 앱을 설치할 필요가 없으며 따라서 수정 사항이 발생해도 사용자가 업데이트 할 필요가 없음.
- 반응형으로 제작 시 PC/태블릿/모바일 사이즈 모두 대응이 가능.
2) 👎단점
- 앱이 아니므로 사용자가 검색이나 url을 통해 들어와야함
- 폰의 OS에서 제공하는 기기 고유의 정보 및 기능 (카메라, 마이크, 푸시 알림 등)을 활용할 수 없음
3. 하이브리드 앱
: 겉으로 보기에는 앱이지만 실제로는 웹을 기반으로 앱의 기능을 차용한 형태의 앱
: 하이브리드 앱은 네이티브 개발과 웹 기술을 융합한 방식. 기본 기능은 HTML 등의 웹 문서로 구현하고, 패키징은 아이폰, 안드로이드 등 모바일 운영 체제(OS) 별로 구현하는 것.
1) 👍장점
- 앱 안에 웹페이지를 불러오는 방식이므로 웹상에 수정 사항이 있는 경우 사용자가 업데이트 할 필요가 없음
- iOS나 Android에서 동일한 웹페이지를 사용할 수 있으므로 개발 비용 및 시간 소요가 네이티브에 비해 적게 들어감.
- 앱 용량도 비교적 가벼움.
2) 👎단점
- 네이티브 앱보다 동적인 요소의 구현이 어려움
- 네트워크 환경과 웹사이트의 용량에 따라 속도가 느려질 수 있음.
💡 하이브리드 애플리케이션이란?
HTML5애플리케이션을 만들어서 네이티브 앱처럼 작동시킬 수 있는 것HTML5,CSS,JavaScript와 같은 웹 기술로웹 애플리케이션을 만들고, 이를 네이티브 컨테이너로 감싼 네이티브 애플리케이션- 네이티브 애플리케이션은
WebView라는 내장 브라우저로HTML을 표시함 Cordova나PhoneGap같은 네이티브와 연결해주는 도구를 이용하면HTML을 네이티브 코드로 간단하게 감쌀 수 있고, 카메라, 가속도계, 위치정보, 연락처 같은 네이티브 기능에 접근할 수 있으며, 이 애플리케이션을 앱스토어에 올릴 수 있음- 하이브리드 앱을 제작하기 위해서는 별도의
하이브리드 앱 프레임워크가 필요함
- 대부분의 경우 하이브리드 앱은
크로스 플랫폼을 지원한다. - 이는 곧 개발에 필요한 비용과 시간을 줄여준다.
- 아이디어가 생기는 즉시 빠르게 개발할 수 있다.
- 어떤 웹 개발자든 역량과 상관 없이 간단한 학습을 통해 앱 개발자가 될 수 있다는 점이다.
- 하이브리드 앱이 이런 장점을 가진 덕분에 저렴한 비용으로 도입할 수 있고, 네이티브 언어보다 학습 곡선도 낮다.
- 애플 앱스토어 검수시에는 네이티브 기능 없이 웹만 앱 모양으로 감싸서 내면 등록 거부 당한다고 함.(앱으로 만들어야 하는 이유가 있어야 한다고.)
- PC버전과는 UI가 분리될 수밖에 없으며, 대부분의 경우 IOS 또는 안드로이드 둘 중 하나의 UI셋을 사용하게 되는데 그럼 필연적으로 반대 진영의 사용자에게는 어색하게 된다고 함.
✅ 하이브리드 앱 프레임워크 선택을 위한 질문
- iOS만을 위한 앱을 만드는가?
- 크로스 플랫폼을 지원하는가?
- 매끄러운 애니메이션과 트랜지션을 이용한 UX가 필요한가?
- 빠른 개발이 필요한 프로젝트인가?
- 개발할 앱의 사용자가 가지고 있는 기기의 성능은 어떤가?
🎪 Framework7 이란?
- iOS와 안드로이드 하이브리드앱을 만들기 위한 HTML Framework
👍장점
- 거의 완벽한 iOS UX 제공
- 다양한 유틸리티
- 간편한 시작과정
👎단점
- 크로스플랫폼 미지원
- 자체 MVC 프레임워크를 사용
- 사용자가 많지 않음
- 기본 템플릿이 없음
- 참고: F7으로 개발할 때는 웹 서버의 디렉토리에 파일을 넣고 서버(localhost)에서 작업해야 한다. Ajax 호출을 이용해 페이지 이동을 하기 때문. Cordova/PhoneGap으로 배포할 때는 이 과정이 필요없음.
참고자료
Be Playful Front-end Developer