Cordova iosrtc 개발환경 구축하기

Published in

Pagecall Engineering

7 min readDec 3, 2018

이 글은 우리가 기존에 개발한 웹기반의 WebRTC 어플리케이션을 iOS에서 구축하기 위한 목적으로 시작한다. 우리는 기존의 웹기반의 서비스를 모바일로 확장하기 위해 하이브리드 앱 개발을 선택했고 Android의 경우 웹뷰에서 WebRTC가 모두 지원되지만iOS12의 웹뷰는 WebRTC의 기능이 일부만 지원되고 있다는 것을 확인 하였다. 이런 상황에서 가장 최선의 선택은 Cordova였다.

Apache Cordova

Apache Cordova는 멀티 플랫폼 하이브리드 앱 개발 프레임워크이다. 소프트웨어 프로그래머가 Android, iOS 또는 Windows Phone과 같은 플랫폼 별 API에 의존하는 대신 CSS3, HTML5 및 JavaScript를 사용하여 모바일 장치 용 응용 프로그램을 만들 수있게한다. 하이브리드 앱이라는 말은 웹의 기술과 네이티브앱의 기술을 융합해서 사용하여 만든 앱이다. 웹에서 접근할 수 없는 네이티브 자원을 네이티브 코드로 만들고 웹에서 접근할 수 있는 인터페이스를 이용해서 웹과 네이티브의 자원을 함께 사용할 수 있는 것을 또는 반대의 개발 방법을 적용하여 앱을 만들 수 있는 것을 말한다.

Cordova에서는 이런 일련의 과정을 Plugins이라는 것을 사용해서 구현할 수 있다. 우리가 많은 하이브리드 앱 개발 프레임워크 중 하나인 Cordova를 선택한 이유는 바로 cordova-plugin-iosrtc이란 훌륭한 Plugin을 사용하기 위해서다.

Cordova 설치

맥에 OS X 운영 체제에서 iOS 앱을 빌드하는 데 필요한 최신버전의 Xcode가 설치되어있어야 한다. Xcode와 함께 설치된 SDK와 iOS 시뮬레이터를 통해 Cordova의 기능을 대부분 테스트 할 수 있지만 장치에 배포하기 위해서는 애플의 iOS 개발자 프로그램이 추가적으로 필요하다.

Node.js 설치

Cordova 모듈을 설치하기 위해서는 Node.js의 npm 유틸리티가 필요하다. Node.js를 다운로드 후 설치한다.

2. Cordova 설치

$ sudo npm install -g cordova

Cordova command를 전역에서 사용하기위해 -g 옵션으로 설치한다.

3. ios-sim, ios-deploy 설치

$ npm install -g ios-sim
$ npm install -g ios-deploy

4. 프로젝트 만들기

프로젝트를 만들 디렉토리로 이동하여 프로젝트를 생성한다.

$ cordova create hello com.pplink.hello "Hello pplink"

Plugin 설치

cordova-plugin-swift-support

우리 프로젝트는 Swift를 지원하기 위해 첫 Plugin으로 swift-support를 추가한다.

$ cd hello$ cordova plugin add cordova-plugin-add-swift-support --save

2. cordova-plugin-iosrtc

이 프로젝트의 가장 중요한 plugin iosrtc를 추가한다.

$ cordova plugin add cordova-plugin-iosrtc

Xcode 프로젝트 생성시 cordova-plugin-iosrtc에 필요한 iosrtc-swift-support를 자동으로 추가하기 위해 Hook 스크립트 파일을 넣어줘야 한다.

plugins/cordova-plugin-iosrtc/extra/hooks/iosrtc-swift-support.js 파일을 해당 프로젝트의 “hooks” 폴더에 복사하고 다음과 같이 권한을 준다.

$ chmod +x hooks/iosrtc-swift-support.js

3. config.xml

추가한 Plugin과 iOS 개발환경에 맞게 config.xml에 몇 가지 항목을 추가해야 한다. 현재 진행하는 프로젝트의 config.xml의 iOS에 관한 항목이다.

아까 추가한 iosrtc-swift-support.js 파일을 위해 hook 항목을 추가한다. 그리고 iosrtc-swift-support는 Swift3 까지 지원하므로 UseSwiftLanguageVersion의 값을 3으로 지정했다. iOS 10 이상의 개발 환경에서는 권한 요청에 대한 설명을 첨부해야 한다. 그렇지 않으면 앱이 Crush된다.

iOS 플랫폼 설치

npm Xcode 패키지가 설치 되어있는지 확인한다.

$ sudo npm install -g xcode

2. iOS 플랫폼을 추가하고 빌드한다.

$ cordova platform add ios
$ cordova build ios

3. Bridging Header

iosrtc 플러그인은 Swift 언어로 코딩되어 있지만 Cordova의 Objective-C 헤더와 WebRTC Objective-C 래퍼를 사용하므로 Bridging Header가 필요하다. 위의 제공된 Hook을 사용하여 빌드 할 때 Bridging Header 파일이 자동으로 Cordova 프로젝트에 추가된다. 그리고 iosrtc 플러그인을 사용하기 위해 Xcode 프로젝트를 열어 Bridging-Header.h파일에 “cordova-plugin-iosrtc-Bridging-Header.h” 를 import 한다.

Build and Run

Xcode 10 이상 버전 부터는 기본적으로 새로운 빌드 시스템을 사용한다. cordova-ios 프로젝트 구조는 이 새로운 빌드 시스템과 호환되지 않으므로 빌드시 오류가 발생할 것이다. 이 오류는 다음과 같이 buildFlag 를 추가하여 해결 할 수 있다.

# Cordova CLI
$ cordova build ios --buildFlag='-UseModernBuildSystem=0'
$ cordova run ios --buildFlag='-UseModernBuildSystem=0'

Cordova 프로젝트 안에는 다음과 같은 디렉토리들이 존재한다.

platforms : iOS, android 등 여러 모바일 플랫폼 소스코드들이 존재한다.
plugins : 각종 플러그인을 추가하면 존재한다.
www : 웹에 관련된 코드와 리소스가 존재한다.

www 내의 리소스를 추가하거나 수정할때는 Cordova CLI를 통해 빌드해야 앱의 아카이브를 다시 생성하면서 변경사항이 적용된다.

Xcode

Xcode 를 통해 빌드 하려면 “Build Settings” 에서 다음 단계를 따라야 한다.

iOS Deployment Target 7.0 이상으로 설정
Deployment Target 7.0 이상으로 설정
Runpath Search Paths에 @EXECUTABLE_PATH/FRAMEWORKS 추가
Enable Bitcode 값을 No 로 변경
Project settings 에서 Build system을 Legacy Build Sytem으로 변경

Building `libwebrtc`

cordova-plugin-iosrtc 에는 libWebRTC가 포함되어있다. 만약 최신버전의 libWebRTC로 대체 하고 싶다면 여기에 나온 가이드를 통해 새로 빌드해서 추가해도 된다. 하지만 필자가 직접 해본결과 2018년 11월 기준 최신버전의 WebRTC를 적용하면 cordova-plugin-iosrtc 소스코드를 직접 수정해야 할 양이 너무 많아서 새로 Plugin을 만들어야 할 정도이므로 Plugin에 포함된 라이브러리로 프로젝트를 수행하기를 권한다.

여기까지 모두 완료되었다면 시뮬레이터나 디바이스를 통해 Cordova앱을 실행해 볼수 있다. 이제 기본적인 개발환경 구축은 끝났다. 앞으로 프로젝트를 진행해가면 문제해결에 성공하거나 Cordova에 대한 정보가 생기면 관련 글을 이어나갈 생각이다.

참고
https://cordova.apache.org
https://github.com/BasqueVoIPMafia/cordova-plugin-iosrtc