PhoneGap: Adobe 플랫폼의 개념, 기능 및 앱 개발 방법

PhoneGap이란?

PhoneGap은 2009년 Nitobi Software가 처음 개발한 모바일 애플리케이션 개발 플랫폼입니다. 2011년 Adobe가 Nitobi를 인수하고 PhoneGap을 상용 제품으로 출시했으며, 프레임워크 코어를 Apache Software Foundation에 Cordova라는 이름으로 이전했습니다.

역사와 진화

PhoneGap은 2008년 iPhoneDevCamp 컨퍼런스에서 Nitobi Software 개발자들이 웹 애플리케이션을 네이티브 컨테이너에 래핑하는 기술을 시연하면서 만들어졌습니다. 첫 번째 공개 버전은 2009년에 출시되었으며 Objective-C를 배우지 않고 모바일 시장에 진출할 방법을 찾던 웹 개발자 커뮤니티의 관심을 즉시 끌었습니다.

PhoneGap의 주요 혁신은 개발자가 익숙한 웹 기술(HTML, CSS, JavaScript)을 사용하여 앱 스토어를 통해 기기에 설치되고 카메라, GPS, 연락처, 가속도계와 같은 네이티브 기능에 액세스할 수 있는 애플리케이션을 만들 수 있다는 것이었습니다.

Adobe Developer Relations(2015년)에 따르면, 정점 시기에 전 세계 60만 명 이상의 개발자가 PhoneGap을 사용했습니다. 이 플랫폼은 iOS 및 Android 엔지니어를 고용하지 않고 모바일 프로젝트로 포트폴리오를 확장하려는 웹 스튜디오와 프리랜서 사이에서 특히 인기가 있었습니다.

PhoneGap과 Apache Cordova의 차이점

PhoneGap과 Apache Cordova의 주요 차이점은 배포 모델과 추가 서비스에 있습니다. Cordova는 Apache Foundation이 관리하는 순수 오픈 소스 프레임워크인 반면, PhoneGap은 Adobe의 독점 기능을 갖춘 상용 배포판입니다.

Apache Cordova 대비 PhoneGap의 주요 이점이자 상업적 차별점은 컴파일 단계를 처리하는 PhoneGap Build 서비스입니다. 개발자가 소스 파일을 Adobe 서버에 업로드하고 대상 플랫폼을 선택하면 Android SDK, Xcode 또는 관련 빌드 도구를 설치하지 않고도 준비된 바이너리를 받을 수 있습니다.

또한 PhoneGap은 Adobe Creative Cloud와의 통합을 포함하여 디자이너가 Photoshop에서 레이아웃을 PhoneGap 프로젝트 구조로 직접 내보낼 수 있게 했습니다. 이 기능은 전담 모바일 개발자가 없는 소규모 팀에서 수요가 있었습니다.

PhoneGap Build: 클라우드 앱 빌드

PhoneGap Build는 PhoneGap/Cordova 애플리케이션 소스 코드를 iOS(.ipa), Android(.apk), Windows Phone(.xap) 및 기타 플랫폼용 설치 파일로 컴파일하는 Adobe 웹 서비스입니다. 사용자는 자신의 컴퓨터에 대상 OS의 SDK를 설치할 필요가 없습니다.

빌드 프로세스는 세 단계로 구성됩니다. 개발자가 프로젝트를 아카이브(또는 Git 리포지토리 지정)하고 build.phonegap.com에 업로드한 후 플랫폼을 선택합니다. 몇 분 안에 서버가 앱 스토어에 업로드할 준비가 된 바이너리 파일을 반환합니다.

PhoneGap Build는 두 가지 유형의 구독을 지원했습니다. 무료(최대 2개 앱, 공개 빌드)와 유료(최대 25개 앱, 비공개 빌드, 맞춤형 아이콘 및 인증서)입니다. iOS의 경우 Apple Developer Program 서명 인증서가 필요했으며 사용자가 자신의 계정에 업로드했습니다. Build의 메커니즘은 간단했습니다. 사용자가 ZIP 아카이브를 보내거나 Git 리포지토리를 지정하면 서버가 자동으로 플랫폼을 결정하고 제어판을 통해 준비된 바이너리 파일을 반환했습니다.

Adobe Blog(2017년)에 따르면 매월 50만 개 이상의 빌드가 PhoneGap Build를 통과했습니다. 이 서비스는 참가자가 Mac 인프라에 접근할 수 없는 교육 기관과 해커톤에서 특히 인기가 있었습니다. 개발자들은 환경 설정 없이 클라이언트에게 기기에서 직접 프로토타입을 시연하는 데에도 Build를 사용했습니다.

코드 예제 및 PhoneGap 설정

PhoneGap 프로젝트의 구조는 Cordova와 동일합니다. 유일한 차이점은 설정 파일 config.xml에 PhoneGap 버전과 Adobe 애플리케이션 식별자를 나타내는 요소가 추가된다는 점입니다.

<?xml version='1.0' encoding='utf-8'?>
<widget id='com.adobe.phonegap.app'
        version='1.0.0'
        xmlns='http://www.w3.org/ns/widgets'
        xmlns:gap='http://phonegap.com/ns/1.0'>
    <name>PhoneGapApp</name>
    <description>
        PhoneGap 앱
    </description>
    <gap:platform name='ios' />
    <gap:platform name='android' />
    <gap:plugin name='cordova-plugin-camera' />
    <gap:config platform='ios' min-version='13.0' />
</widget>

이 설정 파일은 iOS 및 Android를 지원하는 애플리케이션을 정의하고 최소 iOS 13 버전을 지정하며 카메라 플러그인을 포함합니다. PhoneGap Build에 업로드하면 서버가 자동으로 이 설정을 인식하고 필요한 종속성과 함께 프로젝트를 빌드합니다.

장치 준비 이벤트를 처리하고 네이티브 대화 상자를 호출하는 기본 JavaScript 코드 예제:

document.addEventListener('deviceready', function() {
  console.log('PhoneGap 사용 준비 완료');

  document.getElementById('btnAlert')
    .addEventListener('click', function() {
      navigator.notification.alert(
        'PhoneGap에서 안녕하세요!',
        function() { console.log('확인'); },
        '메시지',
        '닫기'
      );
    });
});

deviceready 이벤트는 모든 PhoneGap 및 Cordova 애플리케이션에서 필수 진입점입니다. 이 이벤트가 없으면 브리지가 아직 초기화되지 않았기 때문에 네이티브 API 호출이 작동하지 않습니다. 준비가 완료되면 네이티브 대화 상자 창용 notification.alert를 포함한 모든 플러그인을 사용할 수 있습니다.

PhoneGap의 장점과 단점

PhoneGap은 2010년대 중반에 인기를 끌게 한 여러 장점이 있었지만, 2018년 이후 시장 점유율 하락을 초래한 제한 사항도 있었습니다.

강점

PhoneGap의 주요 장점은 웹 개발자를 위한 낮은 진입 장벽입니다. HTML, CSS, JavaScript는 모든 프론트엔드 전문가가 숙달한 기술이므로 웹 개발 스튜디오가 iOS 및 Android 엔지니어를 고용하지 않고도 모바일 앱 시장에 신속하게 진입할 수 있었습니다.

PhoneGap Build 클라우드 서비스는 인프라 문제를 해결했습니다. Windows 팀이 Mac을 구매하지 않고도 iOS 앱을 빌드할 수 있었습니다. 이는 제한된 장비 예산의 스타트업에게 중요했습니다.

약점

PhoneGap의 주요 단점은 성능입니다. WebView는 네이티브 UI 프레임워크보다 느리며, 특히 복잡한 애니메이션, 대규모 목록 및 그래픽 처리에서 두드러집니다. HTML5Rocks 테스트(2016년)에 따르면 1000개 항목 목록을 렌더링하는 데 PhoneGap에서는 200~400ms가 걸린 반면 네이티브 애플리케이션에서는 16~30ms였습니다.

추가 제한 사항으로는 사용자 기기의 WebView 버전에 대한 의존성, 네이티브 플러그인 디버깅 문제, 해당 Cordova 플러그인이 출시될 때까지 새로운 iOS 및 Android API에 액세스할 수 없는 점 등이 있었습니다.

PhoneGap 현재: 지원 및 마이그레이션

2020년 Adobe는 PhoneGap과 PhoneGap Build에 대한 지원 종료를 발표했습니다. 회사는 Apache Cordova 또는 Capacitor로 전환할 것을 권장하며 개발 내용을 커뮤니티에 이전했습니다. PhoneGap Build는 폐쇄되었으며 클라우드 빌드를 더 이상 사용할 수 없습니다.

기존 PhoneGap 프로젝트의 경우 Capacitor로의 마이그레이션이 권장됩니다. 이는 최소한의 코드 변경으로 수행할 수 있는 직접적인 경로입니다. 초기화 스크립트를 교체하고 설정을 업데이트하기만 하면 됩니다. Capacitor가 동일한 브리지 원칙을 사용하므로 모든 JavaScript 코드와 HTML 템플릿은 변경되지 않습니다.

또 다른 옵션은 Apache Cordova로 직접 전환하는 것입니다. 이를 위해서는 CLI를 통해 로컬로 플랫폼을 설치하고 로컬 빌드를 설정해야 하지만 기존 플러그인 및 애플리케이션 아키텍처와의 완전한 호환성을 유지합니다.

폐쇄에도 불구하고 PhoneGap의 역사적 중요성은 과대평가하기 어렵습니다. 웹 기술이 모바일 애플리케이션의 기초가 될 수 있음을 시장에 보여준 것은 바로 PhoneGap이었으며, 현대 하이브리드 및 크로스 플랫폼 프레임워크의 길을 열었습니다. PhoneGap Build에서 처음 구현된 클라우드 빌드 개념은 이후 Ionic Appflow, Visual Studio App Center 및 기타 모바일 프로젝트용 지속적 통합 서비스에 채택되었습니다.

PhoneGap의 아키텍처 결정(WebView를 통한 브리지, 플러그인 시스템, config.xml을 통한 설정)은 하이브리드 개발의 사실상 표준이 되었습니다. 현대 Capacitor 프로젝트에서도 PhoneGap의 유산이 드러납니다. 플러그인 작업의 동일한 원칙과 유사한 빌드 프로세스입니다.

오래된 PhoneGap 프로젝트를 유지 관리하는 개발자에게 핵심 기술은 플러그인 브리지를 이해하고 최신 Android 및 iOS 버전에 플러그인을 적용하는 능력입니다. 이것이 없으면 오래된 시스템 권한으로 인해 새로운 스토어 요구 사항을 충족하도록 애플리케이션을 업데이트하는 것이 불가능해집니다.