앵귤러에서 ionic Framework (아이오닉 프레임워크) 간단한 정리

이번에 앵귤러 모바일 프로젝트에 투입되었다. 애플리케이션 서버를 실행할 때 ng serve가 아닌 ionic serve로 서버를 실행하더라...? 생전 처음 들어본 inoic이 무엇인지 알아봤다.

사전지식

• 반응형 웹 (웹) : html, css, js로 이루어진 웹을 모바일 상의 화면으로 보는 것
• 네이티브 앱 (앱) : android(코틀린) 혹은 ios(스위프트) 환경의 코드로 제작된 모바일용 애플리케이션
• 하이브리드 앱 (앱) : 웹 코드로 이용해 각 플랫폼(android, ios)으로 패키징 한 애플리케이션 (웹+앱)
• 프로그레시브 웹앱 (웹) : 하이브리드 앱처럼 보이지만 설치가 필요하지 않고, 네이티브앱 기능을 사용할 수 있는 애플리케이션

ionic Framework (아이오닉)

2013년에 등장한 아이오닉은 하이브리드 모바일 앱개발을 위한 프레임워크이다. 네이티브 앱에 비해서 다양한 플랫폼을 지원하고, 서드파티(third-party) 코드를 이용할 수 있다. ionic 공식 홈페이지에서는 React, Vue, Angular 같은 서드파티 코드 기반으로 모바일 앱을 구축할 수 있는 모바일 UI 툴킷이라고 소개하고 있다.

아이오닉 최초 버전은 AngularJS와 아파치 코도바(Cordova)로 제작되었지만, 최신 버전은 React, Vue, Angular 그 어떤 UI 프레임워크라도 선택할 수 있다. 특히 모바일 앱은 이러한 웹 기술로 제작한 다음, 코도바나 캐파시터를 이용해 네이티브 앱 스토어를 통해 배포하여 기기에 설치할 수 있다.

스마트폰에 최적화된 UI를 디자인할 수 있고 무엇보다 크로스 플랫폼 개발이 가능하며, HTML5의 부족한 API는 네이티브 API로 보완할 수 있다. 아이오닉은 주로 typeScript를 사용하고 Angular를 통해 하나의 코드로 android/ios/web을 동시에 시작할 수 있다.

ionic 장점

• 웹 표준을 사용하여 제작한다.
• 신속한 수정, 업데이트 및 배포가 가능하다.
• 각 플랫폼에서 네이티브 앱으로 실행된다.

ionic 단점

• 인터페이스가 표준 네이티브 앱과 다를 수 있다.
• 그래픽, 멀티미디어 성능이 네이티브 앱에 비해 떨어질 수 있다.
• 일반적으로 장치의 모든 센서 및 하드웨어에 접근할 수 있지만 새 기능을 지원할 때까지 다소 시간 지연이 발생할 수 있다.
• 개발자는 웹 앱을 네이티브 앱으로 변환시키기 위한 부가적인 소프트웨어를 사용해야 한다.

ionic Framework 특징

• Cordova 환경을 제공하며, Cordova 플러그인을 사용할 수 있다.
• AngularJs를 기반으로 만들어졌으며, SPA를 MVC, MVVM으로 개발할 수 있다.
• 네이티브에 가까운 UI 컴포넌트들을 제공한다.
• 위에 장점에 있듯이 크로스 플랫폼 빌드가 가능하다.(android, ios, 이외에도 다양한 플랫폼 지원)

ionic 사용 전 알아야 하는 기술

• AngularJs : spa를 개발할 때 사용하는 프레임워크로 양방향 바인딩을 지원하며 Dom 조작에 있어 쉽고 간편하다
• TypeScript : AngularJs2가 기본적으로 TypeScript를 내세우며 필요하게 된 기술
• Cordova : 하이브리드 웹 애플리케이션 개발을 위한 프레임워크이다.
• Node.js : 자바스크립트를 활용하는 소프트웨어 플랫폼으로 확장성 있는 네트워크 애플리케이션 개발에 사용된다.

참고

• Ionic (아이오닉) vs React Native (리액트 네이티브)