brunch

매거진 모바일 개발기록

라이킷 15 댓글 3

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 으뉴아빠 Aug 10. 2018

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

Feat. Apache Cordova

지난 시간에 이어 (첨부 메일 참고) Cordova를 사용한 하이브리드 앱 개발 실습을 진행 해 보고자 한다.

오늘의 목표는 Cordova 실행 오류 해결 및 Cordova 프로그램의 폴더 구조 설명 및 이해 이다. 또한 에뮬레이터가 아닌 자신의 모바일 기기에서 직접 테스트 하는 방법도 간략히 가이드 하도록 하겠다.

이번 시간은 하이브리드 앱을 빨리 개발하고 싶은 사람에게는 약간 지루한 시간이 될 수도 있을 것이고, 지난 실습에서 고생을 했던 사람에게는 조금은 쉬어가는 시간이 될 수 있을 것이다. 하지만 중요도에 있어서는 그 어떤 부분 보다 핵심적인 내용을 담고 있기 때문에 오늘 다루는 내용을 100프로 이해한다면 Cordova뿐 아니라 타 Android 모바일 프로그램 개발 시에도 도움을 받을 수 있을 것이라 생각한다.

본격적인 시작에 앞서, 지난 시간 피드백을 바탕으로 몇 가지 내용을 추가해 보겠다.
지난 번 실습에서 Cordova 식 Hello World 화면 띄우기(아래 사진 참고)를 성공하였다면 아래 내용은 Skip 해도 좋다.

< Cordova 식 Hello world >

. Cordova 실행 오류 해결

지난 시간의 실습은 사실 12번 까지의 과정을 갖고 있지만 성공을 위해서는 꽤나 많은 시간이 걸리는 실습이었다. 특히 환경 설정은 변수가 많이 발생하기 때문에 실제 모바일 개발을 해 본 사람이라면 7번 까지 진행하기도 얼마나 힘든지 알 수 있었을 것이다. 지난 실습 안내 후 몇 가지 문의 사항을 받았었는데 이는 꽤나 중요한 내용을 담고 있어서 같이 공유하는 시간을 갖고자 한다.

1. 마지막 실행 단계에서 에뮬레이터가 존재하지 않는다고 나옴

> 해당 오류를 만나면 아래와 같은 메시지가 나온다

< 에뮬레이터가 존재하지 않습니다 >

Cordova 프로그램은 자체 적으로 에뮬레이터를 생성하는 기능은 없다. 에뮬레이터 생성은 Android Studio를 통해서 할 수 있으며, Cordova는 생성 된 에뮬레이터를 호출하는 기능만 있을 뿐이다. 따라서 에뮬레이터를 생성하기 위해 Android Studio 실행 후 AVD Manager 를 사용하여 에뮬레이터를 생성한 후에 다시 실행하면 내부적으로 에뮬레이터를 자동 호출하여 화면을 표출한다.

2. Android Studio를 실행하면 AVD Manager가 회색으로 활성화 되어 있지 않음

  > 이 문제를 만났을 때 보통은 눈 앞이 캄캄해지기 쉽다. 최소한 버튼이라도 눌려야 무엇이 문제인지 생각 해 볼 수 있을텐데, 버튼 조차 활성화가 되어 있지 않으니 어디서부터 손을 대야 할 지 감을 잡기가 쉽지 않다. 하지만 원리부터 차근차근 접근하면 의외로 쉽게 해결의 실마리를 찾을 수 있다.
  지난 시간에 설치한 프로그램을 보면 Cordova, Android Studio, Java JDK, Android SDK로 크게 총 4가지가 있었다. 이 중 Cordova는 하이브리드 앱 개발 툴, Android Studio는 네이티브 앱 개발 툴, Java JDK는 Android Studio의 Java 기반 기능 및 개발을 담당하는 라이브러리, Android SDK는 Android 모바일의 네이티브 기능을 구성하는 라이브러리 이다. 이 중 해당 문제에 연관 된 프로그램은 무엇일까. 지금 문제가 발생한 것은 Android Studio의 기능이므로 정답은 Java JDK 이다. 따라서 다른 것 보다 JDK를 가장 먼저 살펴보는 것이 중요하다. 분명 자신의 기억으로는 정상적으로 JDK를 설치 하였는데도 문제가 생기는 것이라면 발생할 수 있는 케이스는 두 가지 이다.

  하나는 JDK 대신에 JRE를 설치 한 경우. Java 다운로드를 받을 때 JDK, JRE 선택을 할 수 있는데, Java 기반의 개발을 하기 위해서는 반드시 JDK가 필요하다. JDK는 Java Development Kit의 약자로 프로그램에 필요한 컴파일러 등의 도구가 들어있다. JRE는 Java Runtime Environment의 약자로 컴파일이 완료 된 자바 프로그램을 실행 시킬 수 있는 환경을 제공해 주는 역할을 한다. 즉 JRE를 통해서는 Java 프로그램을 실행만 시킬 수 있고 개발을 할 수 없다. 따라서 현재 내가 설치한 Java가 JDK인지 JRE인지 확인하는 작업이 필요하다.

> cmd (명령 프롬프트) 실행 > java –version 입력 > 버전 확인 (아래의 경우 1.8.0_144)

> C:\Program Files\Java에서 1.8.0_144의 JDK가 있는지 확인 (32 bit java 설치의 경우 Program Files (x86) 폴더 확인)

두 번째로 JDK를 설치 했음에도 실행이 되지 않는 경우. 이 경우는 첫 번째 경우보다 해결이 힘든 경우이며 결론부터 말하자면 JDK를 정상적으로 설치 했으나 컴퓨터에서 정상 인식하고 있지 않는 경우이다. 어느정도 규모의 기업에서 개발 업무를 하는 경우 ERP를 기반으로 업무가 많이 이루어지므로 보통 제어판에서 프로그램 및 기능을 실행하면 Java가 많이 깔려 있는 경우가 많다. ERP를 사용하면 Java 기반의 프로그램을 사용해야 하는데 이 경우 JRE가 자동으로 설치 되면서 우선 경로로 시스템에 등록을 해 버린다. 따라서 나는 JDK를 사용하고 싶은데도 우선 등록 된 JRE가 JDK의 사용을 막게 되는 경우가 발생하는 것이다.

< 보통 이 정도 Java는 갖고 시작 하잖아요 >

이 부분을 해결하기 위해서는 환경 변수에 대한 이해가 필수이다. 프로그램을 할 때 이 환경 변수 편집을 가끔 겪게 되는데, 사실 이걸 왜 등록하는 지 모르는 사람이 매우 많다. 그냥 시키니까 편집하고 본다. 하지만 이 단계가 앞으로의 프로그램 사용에 큰 영향을 미치는 부분이기 때문에 꼭 알고 넘어가야 할 필요가 있다.
환경 변수는 시스템과 관련한 글로벌 변수를 등록하는 곳이다. 글로벌 변수란 언제 어디서든 사용할 수 있는 변수를 의미한다. 여기에는 각종 경로 등이 변수로 등록 되어있다. 따라서 환경 변수에 프로그램 경로를 등록하게 되면 이 컴퓨터 내의 모든 프로그램에서 해당 경로 내의 프로그램을 실행 할 수 있게 된다. 보통 Atom 편집기나 Node.js 언어를 설치하면 이러한 환경 변수를 자동으로 등록해주는 기능이 있다. Oracle 프로그램 또한 Java에 대해 자동으로 환경 변수를 등록해 주는데 대부분 JRE가 설정되는 경우가 많다. 하지만 Java를 직접 설치하는 경우 이러한 환경 변수 설정을 스스로 해주어야 하는데 JDK 를 환경 변수로 등록 할 지라도 기존의 오라클 또는 기타 자바 환경 변수가 이것을 인식하지 못하게 막는다. (환경 변수는 먼저 들어온 것을 먼저 인식)

해결은 의외로 간단하다. 위 오라클이 자동 등록해 준 JRE를 바라보는 환경 변수를 삭제 해 주면 된다. (오라클에서 사용하는 Java 버전이 특정 버전이라면 우선 순위 조정이 필요) 삭제가 완료 되면 시스템은 자동으로 JDK가 지정되어 있는 폴더를 글로벌 환경 변수로 인식하게 된다.

. Cordova 프로그램의 폴더 구조 설명 및 이해 (Visual Studio Code 기준)

Cordova 프로그램의 구조는 생각보다 단순하다. 웹 프로그램을 한 사람이라면 더욱 부담 없이 접근할 수 있다. Visual Studio Code를 설치 했다면 샘플 파일이 있는 경로로 이동해서 “code .” 라고 타이핑을 해 보자.

앞서 입력한 code 라는 명령어는 Visual Studio Code 실행 명령이며 .은 현재 경로를 의미한다. 즉 현재 경로로 편집기를 실행해 달라는 뜻이다. code라는 명령어가 임의의 폴더에서 오류 없이 실행 되는 이유는 앞에서 설명 하였듯이 환경 변수와 연관이 있다. Visual Studio Code를 설치하게 되면 환경 변수 자동 등록을 통하여 언제 어느 폴더에서나 해당 편집기를 실행할 수 있는 것이다.

< Visual Studio Code의 환경변수 등록 확인 >

해당 편집기가 실행되면 아래와 같은 구조의 탐색기와 함께 편집기가 실행 되는 것을 볼 수 있다.

여기서 가장 중요한 폴더는 “www”이다. 다른 폴더들은 img, icon, resource, module 등의 기타 자원에 관한 폴더 혹은 파일 이지만 프로그램 시 모든 소스 편집은 www 폴더 내에서 이루어 지게 된다. 해당 폴더를 열면 다음과 같은 트리 구조가 나온다.

여기서 css 폴더는 모바일 화면 내 글자 크기, 색상, 테두리 선 등을 담당해 주는 파일이 있는 폴더이다.
img 폴더는 사진, 그림 파일 등을 관리하는 폴더이며, js 폴더는 JavaScript 함수가 들어있는 폴더로 MVC 모델로 보았을 때 Controller의 역할을 하는 파일들이 있는 곳이다. 위의 폴더 구조는 처음에 만들어 주는 서식 일 뿐 필요에 따라 개인이 자유롭게 바꾸어도 상관 없다. 마지막으로 index.html은 View를 담당하는 화면을 그려주는 역할을 하는 파일이다. 처음 실습 때 실행 해 보았던 파일을 기준으로 index.html을 열어보면 웹 프로그래밍과 거의 비슷한 html 파일이 보일 것이다. 이를 자유롭게 편집하면 화면에도 바로 반영 되는 것을 실습해 볼 수 있다.

< 실행 시 index.html 파일 변경 사항이 반영 >

참고로 Cordova를 사용하여 개발 시 직접 내 모바일 기기를 사용하여 프로그램을 Deploy하고 싶은 경우, 삼성 갤럭시 등의 Android 모바일은 조금의 환경 설정 만으로 직접 연결하여 Deploy가 가능하니 개발에 참고하기 바란다. ( 참고 URL : http://jin93hj.blog.me/220747257527 블로그 내에서 “이로써 안드로이드 스튜디오 USB 디버깅을 하기 전 사전 작업이 모두 끝났습니다.” 까지만 진행하면 된다.) 디버깅 모드가 활성화 된 상태에서 컴퓨터와 USB로 연결 후 Cordova run android 를 실행하면 Emulator를 인식하지 않고 모바일을 가장 먼저 인식하게 된다.

다음 시간은 실제 샘플 소스를 사용하여 Native 기능을 추가한 하이브리드 앱 개발을 실습 해 보도록 하겠다.

keyword