하이브리드 앱 만들기(2)
이전 글 바로가기
웹뷰(WebView)란?
웹뷰(WebView)는 네이티브 앱에 내재되어 있는 웹 브라우저입니다. 웹뷰를 사용하면 웹 콘텐츠를 네이티브 앱 뷰와 같이 사용자에게 보여줄 수 있습니다. 일반 웹 브라우저와 달리 웹뷰에는 주소창, 새로고침, 즐겨찾기와 같은 기능은 없고 단순히 웹페이지만 보여줍니다.
즉, 해당 기능을 사용하면 웹 개발을 한 뒤 이를 웹뷰 기능을 통해 네이티브 앱에서 보여주게 되면 최종적으로 하이브리드 앱을 만든 것과 같은 결과가 됩니다.
웹뷰 기반 프레임워크 종류
- 아이오닉(Ionic)
- 코르도바(Cordova)
- 폰갭(PhoneGap)
기본적으로 코르도바가 가장 먼저 개발되고 이후에 아이오닉과 폰갭은 코르도바를 기반으로 개발되었다고 알고 있습니다. 그리고 이 중 코르도바는 무료로 접근이 쉬워 해당 프레임워크를 사용하는 것이 가장 좋다고 생각했습니다.
Cordova 이용해 하이브리드 앱 시작하기
Apache Cordova는 웹 기술(HTML, CSS, JavaScript)을 사용하여 하이브리드 앱을 개발할 수 있는 오픈 소스 프레임워크입니다. Cordova를 사용하면 동일한 코드베이스를 기반으로 iOS, 안드로이드, 웹 등 다양한 플랫폼을 대상으로 앱을 개발할 수 있습니다.
1. Cordova 설치하기
Cordova를 사용하기 위해서는 Node.js와 npm이 설치되어 있어야 합니다.https://nodejs.org/en/download/ Node.js와 npm이 설치되어 있다면 터미널 또는 명령 프롬프트에서 다음 명령을 사용하여 Cordova를 설치합니다.
npm install -g cordova
2. 프로젝트 생성하기
Cordova를 사용하여 새로운 앱 프로젝트를 생성합니다. 터미널에서 다음 명령을 실행하여 새로운 Cordova 프로젝트를 생성합니다.
cordova create [프로젝트 이름] [앱 패키지 이름] [앱 표시 이름]
여기서 [프로젝트 이름], [앱 패키지 이름], [앱 표시 이름]은 각각 새로운 프로젝트의 이름, 앱의 패키지 이름(일반적으로 com.example.myapp 형식), 그리고 앱의 표시 이름입니다.
3. 플랫폼 추가하기
Cordova는 여러 플랫폼을 지원하며, 개발하려는 플랫폼에 따라 해당 플랫폼을 추가해야 합니다. 플랫폼은 iOS, 안드로이드, 웹 등이 될 수 있습니다. 플랫폼을 추가하려면 다음 명령을 사용합니다.
cd [프로젝트 경로]
cordova platform add [플랫폼 이름]
ex)
cordova platform add android
cordova platform add ios
4. 웹 애플리케이션 개발하기
Cordova 프로젝트의 www 폴더 안에는 웹 애플리케이션을 개발하는 데 사용되는 파일이 있습니다. HTML, CSS, JavaScript 등을 이용하여 앱의 UI와 로직을 개발합니다.
5. 플러그인 추가하기
Cordova 플러그인은 웹 애플리케이션에서 네이티브 기능에 접근할 수 있도록 도와줍니다. 예를 들어 카메라, 파일 시스템, 지리적 위치 등의 기능을 사용하려면 해당 플러그인을 추가해야 합니다. 플러그인은 다음과 같은 명령으로 추가할 수 있습니다.
cordova plugin add [플러그인 이름]
6. 빌드하기
앱을 실제 디바이스에 설치하고 실행하려면 해당 플랫폼용으로 앱을 빌드해야 합니다. 빌드하기 전 필요한 컴파일 또난 sdk를 확인하고 이후에 빌드 명령은 다음과 같이 실행합니다.
cordova requirements
만약 requirements가 만족되지 않는 상태라면 빌드를 진행할 수 없습니다. 각 설정에 관한 내용은 아래 내용을 참조(Requirements 설치)해주세요.
cordova build
혹은 특정 플랫폼만 빌드하려면 아래 명령어를 사용합니다.
cordova build [플랫폼 이름]
7. 실행 및 테스트하기
빌드가 완료되면 해당 플랫폼용으로 앱을 실행하고 테스트할 수 있습니다. 예를 들어 안드로이드용 앱을 실행하려면 다음 명령을 사용합니다.
cordova run android
Cordova를 사용하여 앱을 개발하는 방법은 이러한 기본 단계를 따라가면 됩니다. 필요에 따라 추가적인 설정 및 기능 구현을 할 수 있습니다.
Requirements 설치
cordova requirements 명령어를 통해 확인한 결과 not installed 라는 결과가 나오는 경우 해당 프로그램을 따로 설치 진행주셔야 합니다.
JDK 설치
- 위 링크를 통해 원하는 JDK 버전과 자신의 환경(Linux, macOS, Windows)에 맞는 JDK 다운로드 및 설치
-
시스템 환경 변수 설정
시스템 환경 변수 설정 시스템 환경 변수 편집 > 환경 변수 > 새로 만들기
JAVA_HOME 설정 변수이름
JAVA_HOME변수 값 : 자신의 JDK가 설치된 경로. 저의 경우 다음과 같았습니다.
C:\Program Files\Java
Path 추가 (1) 
Path 추가 (2) 시스템 변수 Path > 새로 만들기 > 아래값 입력
%JAVA_HOME%\bin; -
확인하기
cmd창에서 다음 명령어를 입력합니다.
java --version다음과 같은 형식이 떠야 정상적으로 설치 완료된 것
java 21.0.2 2024-01-16 LTS Java(TM) SE Runtime Environment (build 21.0.2+13-LTS-58) Java HotSpot(TM) 64-Bit Server VM (build 21.0.2+13-LTS-58, mixed mode, sharing)
Android SDK 설치
- 위 링크를 통해 원하는 SDK 버전과 자신의 환경(Linux, macOS, Windows)에 맞는 SDK 다운로드 및 설치
-
시스템 환경 변수 설정
시스템 환경 변수 설정 시스템 환경 변수 편집 > 환경 변수 > 새로 만들기
ANDROID_HOME 설정 변수이름
ANDROID_HOME변수 값 : 자신의 SDK가 설치된 경로. 저의 경우 다음과 같았습니다.
C:\Users\smdh1\AppData\Local\Android\Sdk시스템 변수 Path > 새로 만들기 > 아래값 입력
%ANDROID_HOME