코드노예

Ionic 을 이용하면 Mobile 앱을 만들 수 있습니다.

이 포스트에서는 Android 앱을 생성하는 방법에 대해서 설명해 보겠습니다.

지난 포스트에서 생성한 myApp을 이용합니다. myApp이 없다면 아래 명령으로 생성합니다.

ionic start myApp sidemenu --type react

먼저 명령 프롬프트를 열고 myApp 폴더로 갑니다. 모바일 앱 프로젝트를 설정하기전에 빌드를 한번 합니다.

ionic build

빌드를 한번 해주는 이유는 capacitor에서 모바일 앱 프로젝트 추가시 build 폴더가 없으면, webDir이 www로 잡히기 때문입니다. 설정 파일에서 변경해 주면 되지만 편의를 위해서 build를 먼저 해 주었습니다.

그리고 모바일 앱 프로젝트를 시작합니다. 시작을 위해서는 npx 명령어를 사용합니다.

저는 npm을 주로 쓰기 때문에 npm으로 했지만 yarn도 지원합니다.

npx cap init --npm-client=npm

App name 에는 "My App"을 입력하고, App Package ID 에는 com.example.myapp 을 입력합니다.

해당 정보는 capacitor.config.json 에서 변경이 가능합니다.

이제 Android 플랫폼을 추가하기 위해서 아래 명령을 입력합니다.

npx cap add android

Android 빌드 하기전에 아래 명령어를 통해 리소스 및 변경된 플러그인을 싱크(업데이트) 합니다.

npx cap sync android

Android 빌드는 android 폴더에서 진행하는데, gradlew 명령어를 이용합니다. 원래 경로로 돌아오기 위해 마지막 cd .. 명령어도 추가하였습니다. gradle을 통해 Android 빌드하기 위해서는 환경변수에 ANDROID_SDK_ROOT 를 설정해야 합니다. Android Studio를 설치하고 SDK ROOT를 환경변수에 미리 추가해 둡니다.

cd android
gradlew assembleDebug
cd ..

생성된 Android 빌드는 프로젝트 경로 > android > app > build > outputs > apk > debug 에서 찾을 수 있습니다. (app-debug.apk)

코드 변경 후에 한번에 빌드를 하기 위해서는 아래와 같이 실행하면 됩니다.

ionic build && npx cap sync android && cd android && gradlew assembleDebug && cd ..

Production 빌드를 생성할 때는 다음과 같이 실행하며,

gradlew assemble

빌드는 프로젝트 경로 > android > app > build > outputs > apk > release 에 생성됩니다.

참고로 아래 명령을 사용하면 ionic build 와 npx cap sync android 실행 후 Android Studio 가 실행됩니다.

ionic capacitor build android

Android Studio 만 실행하고자 한다면, 아래 명령을 실행하면 됩니다.

ionic capacitor run android

Android Simulator 에 빌드를 배포할 때는, 아래 명령을 이용합니다.

ionic build && npx cap sync android && cd android && gradlew installDebug && cd ..

Ionic 프레임워크에 대해서 소개하는 글입니다.

Ionic 프레임워크는 웹 기술(html, css, javascript)을 이용해서 모바일 / 데스크탑 앱을 만들어 주는 오픈소스 UI 툴킷이라고 정의하고 있습니다. 현재 Angular, React, Vue 를 지원하고 있습니다. 부가적으로 Appflow 등을 이용하면 앱 빌드 및 배포도 편리하게 관리할 수 있습니다.

Ionic document 사이트

Ionic Framework - Ionic Documentation

Ionic 으로 앱을 개발하기 위해서는 Node & npm 만 설치되어 있으면 됩니다. 그 외에 개발시 사용할 editor로는 Visual Studio Code를 권장한다고 합니다. 

Ionic 설치는 터미널에서 진행합니다. Windows의 경우 Window 키를 누르고 cmd 라고 입력하면 명령 프롬프트가 검색되는데, 클릭 (혹은 enter를 입력) 해서 실행합니다. (혹은 Powershell에서 작업하셔도 됩니다.) 

명령 프롬프트에서 아래와 같이 입력하고 enter를 입력해서 ionic-cli 를 설치합니다. (install 대신 i 라고 입력해도 됩니다.)

> npm install -g @ionic/cli

Ionic 설치는 global로 진행되기 때문에 어느 경로에서 설치해도 상관 없지만, 프로젝트를 시작할 때는 시작할 경로에 가서 실행합니다.

아래 경로에서 프로젝트를 생성한다고 가정하고, 아래 명령어를 입력해서 ionic 프로젝트 폴더로 이동합니다. (입력 전에 탐색기를 이용해서 C:\Projects\ionic 폴더를 만들어 주세요.)

> cd C:\Projects\ionic

이제 아래 명령어로 ionic 앱을 생성합니다.

> ionic start myApp

실행을 하면, 프레임워크를 선택하라고 나옵니다. (Ionic 6.12.3 기준)

파란색 커서를 화살표 키로 위 아래로 움직여서 프레임워크를 선택할 수 있습니다. 원래 Angular가 기본이었는데, 요즘 핫한 React를 본격적으로 지원하는 것 같습니다. 본인이 익숙한 프레임워크를 선택하면 되는데, 저는 React를 선택해 보겠습니다.

프레임워크 선택 후에는 템플릿을 선택하라고 나옵니다.

역시 커서를 움직여서 선택해 주면 됩니다. 자유도가 높은 blank로 시작할 수도 있지만, 생성 후 간단한 화면을 보기 위해서 sidemenu 를 선택해 보겠습니다.

템플릿을 선택하고 나면, 프로젝트가 생성되고, 해당 프로젝트에 필요한 모듈들이 설치가 됩니다.

마지막에 Ionic 계정을 만들거냐고 물어보는데, 일단 N을 눌러 만들지 않고 넘어 갑니다. 

설치가 끝나고 나면, 다음에 해야할 액션들에 대해서 설명을 해줍니다.

cd 명령어로 생성된 프로젝트 폴더로 가서, ionic serve 명령으로 앱을 실행할 수 있다고 나와 있습니다.

> cd myApp
> ionic serve --no-open

--no-open 은 실행 후 브라우저가 자동으로 열리는 것을 막는 옵션입니다.

정상적으로 실행되었다면, Development server running 이라고 나오면서 접속 URL을 알려줍니다.

웹 브라우저를 열어서 주소를 입력해 봅니다. 보통 8100 포트가 사용되고 있지 않으면 8100으로 설정되지만, 사용중인 경우에는 다른 포트 번호로 세팅 됩니다.

http://localhost:8100

실행해 보면 다음과 비슷한 화면이 나옵니다. (화면크기에 따라서 보여지는 내용이 조금 다를 수 있습니다.)

왼쪽 메뉴들을 눌러보면 오른쪽에 각각에 연결된 페이지가 나타납니다.

Visual Studio Code를 이용해서 프로젝트 폴더아래 있는 src 경로의 소스를 편집해서 앱 개발을 할 수 있습니다.

다음 포스트에서는 android 앱을 빌드해 보겠습니다.