이 포스트에서는 아파치 코르도바 프레임워크를 소개합니다.
코르도바 프레임워크는 Node.js 플랫폼을 기반으로 한 프레임워크로, 웹앱을 스마트폰 플랫폼으로 내보내서 하이브리드 앱으로 만드는 데 쓰입니다. 즉, NW.js 프레임워크 소개 포스트에서 소개한 NW.js와 비슷한 프레임워크입니다. NW.js와의 차이점은 NW.js의 경우 데스크톱용 하이브리드 앱을 만드는 데 쓰이는 반면 코르도바는 모바일용 하이브리드 앱을 만드는 데 쓰인다는 점입니다. 모바일용 하이브리드 앱을 만들기 위한 폰갭(PhoneGap)이라는 프레임워크가 코르도바를 기반으로 하고 있습니다.
일단 코르도바를 설치하려면 Node.js가 필요합니다. 명령 프롬프트(콘솔)에서 다음과 같이 입력합니다.
$ npm install -g cordova
이렇게 입력하고 기다리면 코르도바가 설치됩니다. 설치 상황이 콘솔에 표시됩니다.
설치가 완료되었으면, 프로젝트를 저장하기 위한 디렉터리(workspace)로 이동한 후 다음과 같이 입력합니다.
$ cordova create MyApp
여기서 MyApp이라 함은 앱 폴더 이름을 말합니다. 만약 앱 폴더 이름을 Hello라고 하고 싶다면 MyApp 대신 Hello라고 입력하면 됩니다.
위와 같이 입력하고 나면 Creating a new cordova project.라는 메시지가 뜹니다. 그리고 프로젝트 디렉터리를 확인해 보면 그 밑에 MyApp이라는 이름의 디렉터리가 있을 것입니다. (물론 이름을 다르게 했다면 MyApp 대신 그 이름의 디렉터리가 생겨 있습니다.) 그러면,
$ cd MyApp
이렇게 입력해서 만들어진 프로젝트 디렉터리로 들어갑니다. 그러면 그 밑에는 또 4개의 디렉터리(hooks, platforms, plugins, www)와 설정을 위한 config.xml 파일이 있습니다. 그 중 platforms는 내보낼 플랫폼(안드로이드, iOS 등)을 추가하였을 때 그 플랫폼에 맞는 파일이 생성되는 공간이고 plugins는 플러그인을 넣는 디렉터리, www는 내용이 될 웹 페이지가 들어가는 디렉터리입니다.
$ cordova platform add browser
프로젝트 디렉터리로 들어갔으면 이렇게 입력해서 브라우저를 플랫폼으로 추가합니다. 이렇게 하면 브라우저를 통해 앱이 어떻게 돌아가는지 확인해 볼 수 있습니다.
$ cordova run browser
이 명령은 만들어진 앱의 실행을 웹 브라우저로 확인하기 위한 명령입니다. 이렇게 실행해 보면
이와 같이 웹 브라우저가 열리면서 앱이 실행됩니다. 확인이 끝난 뒤에는 Ctrl-C 키를 눌러 다시 콘솔 명령 모드로 돌아오면 됩니다.
이렇게 만들어진 웹앱을 안드로이드용 하이브리드 앱으로 만들려면,
$ cordova platform add android --save
이와 같이 입력하여 안드로이드로 내보내기 위한 파일을 생성합니다. 아이폰용도 같은 방법으로,
$ cordova platform add ios --save
이와 같이 입력합니다.