Ionic을 이용하여 하이브리드 앱을 개발해보자 -Intro

Ionic을 이용하여 하이브리드 앱을 개발해보자 (메신저 앱) - Intro

하이브리드 앱

하이브리드 앱은 HTML5, CSS, JavaScript를 사용해 만들어지며 다양한 모바일 플랫폼에서 네이티브 앱으로 실행된다. 표준 웹 개발을 사용하지만, 최종 앱은 기기에서 네이티브 앱으로 실행된다. 네이티브 앱과 웹 기반 앱의 장점만 결합하기위한 방법이다.

장점

• 웹 표준을 사용하여 제작
  

• 기존 웹 개발자들이 어렵지 않게 하이브리드 앱 개발 가능

• 신속한 수정, 업데이트 및 배포 가능

• 각 플랫폼에서 네이티브 앱으로 실행됨

단점

• 인터페이스가 표준 네이티브 앱과 다를 수 있음
  

• 그래픽, 멀티미디어 성능이 네이티브 앱에 비해 떨어질 수 있음

• 일반적으로 장치의 모든 센서 및 하드웨어에 접근할 수 있지만 새 기능을 지원할 때까지 다소 시간 지연 발생가능

• 네이티브 앱 '셸'의 각기 다른 코드 베이스를 유지해야 할 수 있음

• 개발자는 웹 앱을 네이티브 앱으로 변환시키기 위한 부가적인 소프트웨어를 사용해야 함

시작하기전에

하이브리드 앱을 만들수 있는 다양한 개발도구가 존재하지만 이번 블로그에서는 Ionic Framework를 사용하려고 합니다.

이에 앞서 다음 3가지의 사전지식이 필요합니다.

• Node.js
• AngularJs
• PhoneGap (Cordova)

이번 포스팅에선 위 3가지 기술에 대한 소개는 생략 하고 http://ionicframework.com/ 에서 나온 가이드를 기반으로 진행 합니다.

설치&시작

Node.js 가 설치가 되어있다면 콘솔에서 다음 명령어를 통해서 ionic을 설치합니다.

npm install -g cordova ionic

다음으로 ionic에서 준비된 app templates를 통해서 탭 형태의 app을 생성합니다. 

tabs 외에 blank, sidemenu 형태로 생성 할 수도 있습니다.

ionic start Messenger tabs

위처럼 start를 하면 기본적으로 필요한 리소스를 다운로드 받으면서 아래와 같이 Messenger 디렉토리에 기본 프로젝트가 생성이 됩니다.

그럼 바로 실행 해볼수 있습니다. HTML5기반이기 때문에 웹 브라우저로 바로 실행해볼 수 있는데요. 다만 네이티브 플랫폼 전용 플러그인을 사용할때는 브라우저에서 해당 기능을 테스트 해볼수는 없습니다. 하지만 기본적인 화면 구성과 기능은 테스트 해볼수 있으므로 상당히 편리하게 사용할 수 있습니다.

ionic serve

위 커맨드를 실행하시면 로컬에 서버형태로 실행되어 브라우저로 다음과 같이 앱 화면이 나타나게 됩니다.

자동으로 8100 포트로 실행이 되네요. 탭 template로 프로젝트를 만들었기 때문에 기본적으로 하단에 탭이 위치한 앱이 실행됩니다. 포트를 변경하고 싶을때는 ionic serve -p {port} 로 실행하면 됩니다. 별도의 에뮬레이터나 기기 없이도 테스트가 가능하기 때문에 화면 수정할때나 스크립트 디버깅할때 상당히 편리합니다. 

그리고 파일이 수정이 일어날때 마다 자동으로 refresh를 해주기 때문에 바로바로 변경사항을 체크하면서 테스트를 할 수 있습니다.

다음으로 실제 플랫폼에서 앱을 실행시키기 위해선 플랫폼을 추가해야 합니다.

현재 플랫폼 리스트를 볼까요? 

ionic platform list

위 커맨드를 실행하며 Installed platforms, Available platforms 리스트가 나타납니다. 아직 플랫폼을 설치하지 않았기 때문에 Installed platforms은 없고 지원 가능한 플랫폼 리스트가 나옵니다. 현재 개발 환경이 Mac 아니라서  ios 플랫폼은 나타나지 않네요. 그럼 안드로이드 플랫폼을 다음과 같이 추가 해보겠습니다.

ionic platform add android

다음으로 빌드는 다음과 같이 수행하며 맨 뒤에 플랫폼명을 쓰지 않으면 설치된 플랫폼 모두로 빌드를 수행하게 됩니다. 안드로이드로 빌드를 해보겠습니다.

ionic build android

Error: Failed to find 'ANDROID_HOME' environment variable. Try setting setting it manually. Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to include path to valid SDK directory.

안드로이드 sdk 경로를 path로 잡아줘야 가능하다는군요. 그럼 sdk를 설치하고 해당 경로를 환경변수 ANDROID_HOME 으로 설정합니다. 그리고 JAVA_HOME 으로 jdk 경로가 설정되어 있어야 합니다.

이렇게 안드로이드 빌드후 다음과 같은 커맨드로 에뮬레이터 혹은 실제 디바이스에서 앱을 실행 해볼 수 있습니다.

ionic emulate android

ionic run android --device

이렇게 Ionic을 이용해서 하이브리드 앱을 개발할 준비와 기본적인 명령어는 숙지가 되었습니다.

다음 블로그 부터는 간단한 매신저앱을 함께 만들어 가는 과정을 포스팅 하겠습니다.