brunch

매거진 모바일 개발기록

라이킷 35 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 으뉴아빠 Aug 06. 2018

모바일 프로그램 개발 (2)
하이브리드 앱

Feat. Apache Cordova

이번 시간에는 지난 시간에 이어 하이브리드 앱 개발 실습 시간을 가져보고자 한다.

개발 언어는 Apache Cordova이며 이는 안드로이드와 iOS를 동시에 제작해 주는 크로스 플랫폼 언어이다.
실습을 위한 준비물은 다음과 같다. (모두 무료로 다운 및 설치 가능)

. 프로그래밍 언어 작성 툴
    - Visual studio code, atom 등

. 크로스 플랫폼 언어
    - Cordova (기존에 Phonegap을 사용한 유저라면 Phonegap 명령어로도 실행 가능. Cordova는 Phonegap 컨트롤러로 패키징 하였으며, Phonegap은 adobe에서 업데이트 하지만 Cordova는 아파치 재단에서 관리하므로 보다 Open Source 느낌이 난다)

. Java JDK 설치 및 환경 변수 설정
    - JAVA

. 안드로이드 SDK 또는 iOS SDK
    - Android studio 또는 xcode(맥북 필요)

이번 시간은 모두가 쉽게 체험해 보는 것을 목표로 하기 때문에 안드로이드 기반의 환경 설정 세팅 및 hello world 수준의 앱 실행 실습을 진행할 것이다. 혹시라도 모바일 개발 경험이 없어 위 준비물의 1, 2, 3번이 무슨 말인지 또는 왜 필요한지에 대해 의문이 생길 지라도 지금은 우선 넘어가도록 하자. 경험 상 실습이 어떠한 이론보다 최고의 교수법이었으며, 실습 후 다시 한번 위 준비물이 왜 필요한지 각각의 역할에 대하여 정리할 것이다.

- 실습 -

1. 구글에서 visual studio code를 검색 후 다운로드 및 설치 (또는 아래 연결 링크 Ctrl 키 + 클릭)
연결 링크

2. 구글에서 node.js 검색 후 다운로드 및 안정적, 신뢰도 높음 버전 설치 (또는 아래 연결 링크 Ctrl 키 + 클릭)
연결 링크

3. 윈도우 > 시작 > cmd 입력 > command 창에서 node -v와 npm-v 입력 시 에러 없이 버전이 출력되면 설치 성공

4. Java JDK 다운로드 후 설치 및 환경 변수 설정
참고 블로그 : http://jun7222.tistory.com/53

5. 윈도우 - 시작 - cmd 입력 - command 창에서 java -version 입력 시 에러 없이 버전이 출력되면 설치 성공

6. 구글에서 android studio 검색 후 다운로드 및 설치 (최소 약 10G의 저장 공간 필요)

    연결 링크

7. android studio 실행 후 android sdk 설치
    참고 블로그 : http://jun7222.tistory.com/126

8. Cordova 설치 전 작업 소스를 저장하기 위한 폴더 생성 (필자의 경우 D:에 Cordova라는 폴더를 생성하였다. 아래 사진 참고)

8. 윈도우 - 시작 - cmd 입력 - command 창에서 npm install -g cordova 입력

cordova 설치 완료

9. 8번 완료 후 command 창에서 cordova create hello com.example.hello HelloWorld 입력
( 명령어 설명 : cordova create [폴더명] [package경로] [config에 들어가는 이름] )

10. 9번 완료 후 command 창에서 생성 폴더로 이동 cd hello

11. 10번 완료 후 command 창에서 cordova platform add android 입력
(명령어 설명 : cordova를 사용하여 android 앱을 만들 것이라는 선언)

12. 11번 완료 후 command 창에서 cordova run android 입력

13. 12번이 진행 중 Emulator 자동 실행과 함께 아래 화면이 뜨면 성공 (Emulator가 느려서 화면 출력까지 수 분 이상 걸릴 수 있다.)

Cordova 식 Hello world

아무 동작을 하지 않는 매우 간단한 화면 출력의 예제이지만 환경 설정 및 개발 도구 설치가 생각보다 번거롭다. 특히 처음 모바일을 개발하는 사람이라면 위 환경 설정 만으로도 충분히 어려울 수 있다. 따라서 이번 시간은 화면 출력을 목적으로 하고, 폴더 구조 및 본격적인 Native 부분의 개발은 다음 시간에 마저 이야기할 것이다. 마지막으로 지금까지 실습한 내용에 대해 각 단계가 어떠한 역할을 하는지 살펴보도록 하겠다. 실습을 통한 학습은 가장 빠른 이해를 도울 수 있지만 실습만으로 익히는 코딩은 고급 개발로 나아가는데 한계가 있다. 반면 원리에 대한 학습은 단순 개발 및 체험에는 비효율 적일 수 있으나 추후 고급 개발 및 디버깅 시 핵심을 파악하는데 필수 요소이기에 아래의 내용 또한 가능하다면 짚고 넘어가는 것을 권한다.

처음에 설치 한 visual studio code는 단순 편집 툴이다. 따라서 설치하지 않고 메모장으로도 프로그래밍이 가능하다. 하지만 작업 효율성 측면에서 영어 번역 시 전자사전으로 할 수 있는 것을 굳이 종이사전으로 할 필요는 없으므로 설치해서 사용하는 것을 권장한다.

이번 실습에서 node.js는 단지 npm만을 사용하기 위해 설치하였다. npm은 node package module의 약자로 node.js 설치 시 자동으로 같이 설치가 된다. 그 안에는 javascript를 사용하여 이용할 수 있는 수많은 module들이 존재한다. 한마디로 javascript를 사용해서 할 수 있는 프로그램은 다 있다고 보면 된다. 그 거대한 백화점에서 우리는 cordova라는 상품을 고른 것이다. 말했다시피 npm은 javascript 기반의 모듈을 제공하기 때문에 npm을 통해 받은 cordova의 초기 상태는 웹앱 쪽 만을 개발할 수밖에 없다.

Java와 android studio는 Android SDK만을 위해 설치하였다. Android SDK가 필요한 이유는 우리가 만드는 앱은 디자인은 웹으로 하지만 주소록, 카메라, 진동 울림 등 핸드폰 자체 기능인 Native 기능에 접근을 해야 하기 때문이다. Android SDK를 통하여 사용자는 이러한 Native 기능을 사용할 수 있다.
앞으로 실습이 이어지면서 plugin을 몇 가지 설치하게 될 것인데 이 plugin을 설치하게 되면 javascript를 통하여 Android SDK에 접근할 수 있는 api들이 생성된다. 즉 Native 기능까지도 사용할 수 있게 되는 것이다. 이번 실습에서는 단순 화면을 구현하는 것 이 목표였고 Native 기능은 전혀 사용되지 않았으므로 plugin 설치 또한 필요가 없다. 이와 같은 구조가 바로 일반적인 하이브리드 앱의 개발 방법이며 이를 그림으로 나타내면 아래와 같다.