Apache Cordova는 오픈소스 모바일 개발 프레임워크입니다. 개발자는 표준 웹 기술인 HTML5, CSS3, JavaScript를 활용해 크로스플랫폼 개발을 진행할 수 있습니다. 애플리케이션은 각 플랫폼에 맞춰 캡슐화된 컨테이너 위에서 실행되며, 표준 호환 API 바인딩을 통해 센서, 로컬 데이터, 네트워크 상태 등 디바이스 기능을 호출합니다.
단일 코드베이스로 여러 플랫폼을 지원하며 무료로 사용 가능한 오픈소스입니다.
아래 상황에 해당한다면 Apache Cordova를 선택할 수 있습니다.
- 모바일 개발자로서 하나의 앱을 여러 플랫폼에 배포하고 싶고, 플랫폼별 언어와 툴체인으로 중복 개발을 피하고 싶은 경우；
- 웹 개발자로서 웹 애플리케이션을 패키징해 주요 앱 스토어에 배포하고 싶은 경우；
- 모바일 개발자로서 네이티브 컴포넌트와 WebView(전용 브라우저 창)를 혼합한 하이브리드 개발을 진행해야 하고, 웹 코드가 디바이스 하위 API에 접근해야 하거나 플러그인을 개발해 네이티브 코드와 WebView 간 호출 통신 경로를 구축해야 하는 경우.
Cordova 앱은 여러 컴포넌트로 구성됩니다. 아래 이미지는 Cordova 앱 아키텍처의 고수준 개요입니다.
WebView (웹뷰)
Cordova 기능이 탑재된 WebView는 앱 전체 화면을 담을 수 있습니다. 일부 플랫폼에서는 컴포넌트 형태로 하이브리드 앱에 삽입되어 네이티브 컨트롤과 함께 작동할 수 있습니다.
Web App (웹 애플리케이션)
이곳에 업무 로직 코드를 배치합니다. 앱 자체는 웹 페이지 형태로 구현되며 기본 진입점은 로컬 index.html 파일입니다. 페이지에서 필요한 CSS, JavaScript, 이미지, 미디어 리소스 파일을 불러옵니다. 전체 앱은 네이티브 컨테이너 내부의 WebView에서 실행되고 최종 패키징되어 각 앱 스토어에 배포됩니다.
컨테이너에는 매우 중요한 파일인 config.xml이 존재합니다. 이 파일은 앱 기본 정보를 기록하고 화면 가로세로 전환 지원 여부 등 각종 실행 매개변수를 정의합니다.
Plugins (플러그인)
플러그인은 Cordova 생태계의 핵심 구성 요소입니다. Cordova와 네이티브 코드가 서로 통신할 수 있도록 다리를 제공하며 각종 디바이스 표준 API를 캡슐화해 JavaScript가 네이티브 코드를 호출할 수 있게 만듭니다.
Apache Cordova 공식에서는 핵심 플러그인 그룹을 유지보수하며 배터리 상태, 카메라, 연락처 등 디바이스 기본 기능에 접근할 수 있는 인터페이스를 제공합니다.
공식 핵심 플러그인 외에도 모든 플랫폼에서 호환되지 않는 확장 기능을 캡슐화한 다수의 서드파티 플러그인이 존재합니다. 플러그인 검색 플랫폼 또는 npm으로 Cordova 플러그인을 찾거나 《플러그인 개발 가이드》에 따라 직접 개발할 수 있습니다. 대표적인 활용 사례는 Cordova와 커스텀 네이티브 컴포넌트 간 통신 구현입니다.
주의: 새 Cordova 프로젝트에는 최신 버전 기본 규칙에 따라 어떤 플러그인도 기본 포함되지 않습니다. 핵심 플러그인이든 서드파티 플러그인이든 수동으로 명시적으로 설치해야 합니다.
Cordova는 UI 컨트롤 및 MV 계열 프론트엔드 프레임워크를 제공하지 않으며, 웹 코드를 실행하는 환경만 제공합니다. 화면 컴포넌트나 프론트엔드 아키텍처 프레임워크가 필요하다면 직접 선택해 프로젝트에 통합해야 합니다.
두 가지 개발 워크플로우
Cordova는 모바일 앱 제작에 활용할 수 있는 두 가지 주요 워크플로우를 제공합니다. 많은 상황에서 두 방식 모두 목표를 달성할 수 있지만 각자의 장점이 있습니다.
크로스플랫폼 워크플로우 (CLI 명령줄 도구)
대상 플랫폼이 많고 플랫폼별 별도 커스터마이징 개발이 거의 없는 경우에 적합합니다. 핵심 도구는 cordova CLI입니다. CLI는 고수준 도구로 여러 플랫폼 프로젝트를 한 번에 빌드할 수 있으며 하위 스크립트 세부 사항을 가립니다. 공통 웹 리소스를 각 플랫폼 하위 디렉터리로 복사하고 플랫폼 설정을 자동 처리한 뒤 빌드 스크립트를 실행해 설치 패키지를 생성하며, 플러그인 관리용 통합 명령줄 인터페이스를 제공합니다.
플랫폼 전용 워크플로우
단일 플랫폼에 집중해 개발하고 프로젝트 하위 레벨을 심도 있게 수정해야 하는 경우에 적합합니다
대표 사용 사례: 앱 내에 커스텀 네이티브 컴포넌트와 Cordova WebView를 혼합해 사용하는 개발
플랫폼 SDK 내 프로젝트 파일을 직접 수정해야 한다면 이 워크플로우를 선택하십시오.
이 워크플로우는 각 플랫폼 전용 하위 스크립트를 기반으로 하며 독립 도구 Plugman을 통해 플러그인을 관리합니다. 다중 플랫폼 개발에 사용할 수는 있지만 비용이 높습니다. 고수준 도구의 통합 관리가 없으므로 각 플랫폼별로 개별 빌드하고 플러그인 설정을 따로 유지보수해야 합니다.
한번 CLI 모드에서 플랫폼 SDK + 하위 스크립트 모드로 전환하면 되돌릴 수 없습니다.
CLI는 크로스플랫폼 공통 소스코드를 유지하며 빌드할 때마다 플랫폼 디렉터리 내 코드를 덮어씁니다. 플랫폼 디렉터리 파일에 적용한 수정 사항을 유지하고 싶다면 하위 스크립트 모드로 전환해야 합니다. 이 모드는 공통 웹 소스를 읽지 않고 플랫폼 디렉터리 내 독립 코드를 직접 사용합니다.
Cordova 설치하기
설치 방식은 선택하는 개발 워크플로우에 따라 달라집니다.
여기서는 크로스플랫폼 CLI 워크플로우를 예시로 설명합니다.
Cordova 명령줄 도구(CLI)는 npm 패키지 형태로 배포됩니다.
아래 단계로 cordova CLI를 설치하십시오.
- Node.js를 다운로드 후 설치합니다. 설치 완료하면 터미널에서
node와npm명령을 직접 호출할 수 있습니다. - (선택 사항) Git이 설치되지 않았다면 Git 클라이언트를 다운로드해 설치하십시오. 설치 후 명령 프롬프트(터미널)에서
git명령을 실행 가능하며, Git 저장소 주소로 리소스를 내려받을 때 Cordova CLI와 npm이 git을 호출합니다. - Node.js에 기본 탑재된 npm 도구로 cordova 모듈을 설치합니다. npm이 자동으로 다운로드를 진행합니다.
nodejs 설치
nodejs 설치는 간단합니다. Windows 시스템의 경우 msi 파일을 다운로드한 뒤 더블클릭하고 안내에 따라 다음을 누르면 거의 완료됩니다. 설치가 끝나면
CMD 터미널을 열고 정상 설치되었는지 확인합니다
두 가지 명령을 입력하고 두 명령 모두 버전 번호가 정상 출력되어야 성공으로 간주합니다(아래 이미지처럼 버전이 표시됨)
node -v
npm -v
Node.js 설치가 완료되었으면 이제 cordova를 설치합니다
macOS / Linux 시스템：
npm install -g cordovamacOS 와 Linux 사용자 참고: /usr/local/share 처럼 권한이 제한된 디렉터리에 도구를 설치해야 하는 경우 npm 명령 실행 시 sudo를 추가해야 할 수 있습니다.
하지만 nvm / nave 같은 버전 관리 도구를 사용하거나 현재 디렉터리에 쓰기 권한이 있다면 sudo 없이 실행 가능합니다.
권장 사항: 가능하면 sudo와 npm을 함께 사용하지 마십시오. 권한 문제, 패키지 설치 오류 등을 방지할 수 있습니다.
nvm(Node Version Manager) 또는 nave 버전 관리자를 사용해 Node.js와 npm을 관리하면 패키지 설치 시 sudo가 거의 필요하지 않습니다.
Windows 시스템：
C:\>npm install -g cordova매개변수 -g는 cordova를 전역 설치하는 옵션입니다. 해당 매개변수를 생략하면 현재 디렉터리의 node_modules 하위 폴더에만 설치됩니다.
설치를 마친 뒤 터미널에서 매개변수 없이 cordova를 실행하고 도움말 정보가 정상 출력되면 설치 성공입니다.
설치 과정에서 “added 217 packages in 14s” 문구가 표시됩니다
설치 성공 여부 확인
cordova -v버전 번호(예: 13.0.0)가 정상 출력되면 준비 완료입니다.
시스템 요구사항 및 버전 지원
| Cordova CLI 버전 | 지원 최소 Node.js 버전 |
|---|---|
| 13.x | >=20.17.0 |
| 12.x | >=16.13.0 |
| 11.x | >=12.0.0 |
| 10.x | >=10.0.0 |
| 9.x | >=6.0.0 |
설치가 완료되었으니 이제 Cordova 학습을 시작합니다.
소개 및 설치