brunch

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 설치 또한 필요가 없다. 이와 같은 구조가 바로 일반적인 하이브리드 앱의 개발 방법이며 이를 그림으로 나타내면 아래와 같다.
 
              

 
 다음 시간에는 본격적으로 Visual Studio Code를 사용 + Emulator가 아닌 실제 Android Phone을 사용하여 테스트하는 방법과 Cordova의 폴더 구조에 대해서 실습해 보도록 하겠다.

매거진의 이전글 모바일 프로그램 개발 (1) 하이브리드 앱

작품 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari