OpenPlug(ELIPS Studio3)를 이용한
아이폰용 App개발
본 문서에서는 OpenPlug Beta버전을 사용해 Flex3 기반으로 개발된 애플리케이션을 아이폰용 애플리케이션 릴리즈하는 방법을 소개하며, 결론적으로 현재 여러 가지 방법으로 Flex Code Base 애플리케이션들을 아이폰용 애플리케이션으로 개발할 수 있다는 것을 보여주고자 하며, 이러한 부분에 관심이 있는 사람들에게 도움이 되고자 작성하였다. 지금부터 애플리케이션 개발과정을 설명하고 그 과정에서 나온 문제점들 설명하도록 하겠다.
현재 수많은 Flash 플랫폼의 애플리케이션들이 아이폰용 애플리케이션으로 릴리즈 하기 위해 Flash CS5의 정식 출시를 기다리고 있을 것이다. 필자 또한 OpenPlug를 알기 전까지
Flash CS5가 나오기만을 기다리던 사람들 중 하나였다. 그러던 중 필요성에 의해 Flex3
Builder를 기반으로 개발된 애플리케이션을 아이폰용 애플리케이션으로 개발하기 위해 여러 가지 대안을 찾고 있는 중이었고, OpenPlug(http://www.openplug.com/)라는 사이트를 바탕으로 Flex3 Builder 기반으로 개발된 애플리케이션을 여러 가지 Mobile용 애플리케이션으로 변환할 수 있다는 사실을 알게 되었고, 그 Mobile에 아이폰도 포함되어 있다는 것을 알게 되었다.
OpenPlug에서 서비스하는 제품 중 ELIPS Studio3라는 제품을 통해 Flex 기반의 애플리케이션을 다양한 Mobile용 애플리케이션으로 변환할 수 있다. 그래서 이번에는 여러 Mobile 중 아이폰용으로 변환하는 테스트를 해봤다. 테스트의 목표는 Flex 기반의 애플리케이션을 아이폰용으로 변환해 실제 아이폰에 올려놓는 것이었다.
해당 URL(http://developer.openplug.com/index.php/)에 Download 메뉴를 통해 ELIPS
Studio 3 beta 를 설치하자. (다운로드를 받으려면 회원가입을 먼저 해야 한다.) 다운로드를 받았다면 설치를 하면 되겠다. 설치방법은 다음 URL을 참고하자.
[요구사항]
ELIPS Studio 3 beta 다운로드 : http://developer.openplug.com/index.php/
설치방법 : http://developer.openplug.com/index.php/learn/tutorials/?videoid=3
설치가 끝나면 Flex Builder가 아닌 시작메뉴 -> 프로그램 -> Openplug -> ELIPS Studio 3.0 아래에 있는 ELIPS for FlexBuilder 메뉴를 클릭해 실행 하자. 실행을 하게 되면 기존
Flex Builder에 Plug-In이 추가된 형태의 Builder가 실행될 것이다. 여기까지 왔다면 Plug-In설치는 끝난 것이다.
본격적으로 아이폰용 애플리케이션 개발에 대해 얘기해보자. 자세한 방법은 아래 URL에서 확인할 수 있다. http://developer.openplug.com/index.php/learn/tutorials/?videoid=20
다음과 같은 절차를 통해 아이폰용 애플리케이션이 만들어지게 된다.
[그림1] 개발 프로세스
해당 프로젝트 진행 당시 ELIPS Studio 3.0은 Window 버전만 나와있는 상태이다. 그렇기 때문에 Windows 환경에서 일단 ELIPS Studio 3.0이 설치된 Flex3 Builder에서 Plug-In을 통해 컴파일 하게 되며 C++파일형태의 파일들이 지정된 경로에 Deploy되게 된다. 이렇게 Deploy된 파일들을 USB 혹은 여러 가지 형태로 MAC OS로 옮겨 아이폰으로 릴리즈하면 된다.
[그림2] 새 프로젝트 화면
새로운 프로젝트는 기본적으로 AIR Type으로 설정이 된다. 이 부분은 기존 Flex3 Builder에서 새로운 프로젝트를 만드는 것과 다른 부분은 없다. 원하는 프로젝트 이름을 설정하고
Finish를 눌러 프로젝트를 생성하자. AIR 프로젝트가 하나 생성되었을 것이다. 이제 Mobile 환경 설정을 해보자. 해당 프로젝트의 Properties를 선택하고 들어가서 Elipse3 아래의
Targeted Devices를 선택하면 현재 변환 가능한 다양한 Mobile들이 나오게 되고, 지금은 현재 테스트할 대상인 아이폰을 선택하고, 우측 2번째 버튼인 Edit by Platform을 선택하자. 그러면 아래의 그림과 같이 나올 것이다.
[그림3] 프로젝트 모바일 환경설정
이 부분에서는 아이폰에 올라갈 아이콘, 애플리케이션 이름 그리고 컴파일 후 Deploy될 경로를 정해주는 부분이다. 이제 위와 같이 Mobile 환경설정이 끝났다면 상단에 Plug-In으로 추가된 부분에 아이폰을 선택할 수 있게 될 것이다
[그림4] Mobile 장치 선택 화면
아이폰을 선택하게 되면 아이폰용 애플리케이션으로 바꿔줄 준비가 끝나게 된다.
2-3. Windows 환경에서 Build 및 테스트
이제 간단하게 컴포넌트를 놓고 실행해 보자. 여기서 문제가 발생했다. 제공하는 컴포넌트가 적다는 것이었다. 기존 Flex에서 제공하는 컴포넌트가 아닌 Elipse Flex SDK를 사용하기 때문에 제공하는 컴포넌트가 매우 적은걸 알 수 있습니다. 해당 URL을 통해 제공하는 API를 확인할 수 있다. http://developer.openplug.com/index.php/learn/elips-3-api-reference
[그림5] Emulator 실행화면
결국 내가 가장 필요로 하는 Chart와 Datagrid가 없어 일단 Chart를 흉내내는 Component는 따로 만들 수 밖에 없었다. 이와 관련된 이야기는 뒤에서 하겠다. 그렇게 간단한 컴포넌트를 하나 올려 평소처럼 실행하게 되면 아이폰 이미지가 들어간 Emulator가 실행되는 것을 확인할 수 있을 것이다.
하지만 Emulator에서 실행된다고 해서 다되는 것이 아니었다. 실제 이 Emulator가 실행되는 것을 보면 그저 아이폰 Image에 크기만한 Flash Player를 넣어 만든 것을 알 수 있다. 그래서 실제로 Emulator에서는 동작되지만 아이폰 릴리즈 시 안되는 경우가 많았고, 런타임에서도 Emulator에서는 되지만 실제 릴리즈에서는 런타임에러가 발생해 애플리케이션이 꺼지는 경우가 많았다. 이 부분이 실제 이 프로젝트를 진행하면서 가장 힘들었던 부분이었다.
Flex3 Builder에 Plug-In으로 실행되는 Emulator는 디자인적인 부분만 확인해야할 정도로 실제 내부 프로세스는 실제 Mac에서 실행되는 Emulator와 아이폰으로 릴리즈 된 상태 두 가지랑 결과가 너무 틀렸기 때문이다. 또한 런타임에서 발생하는 에러는 어디서 에러가 발생하는지도 확인하기가 어려웠다. 런타임 에러 발생시 애플리케이션이 자동 종료되고, 이미 C++ 코드로 변환된 상태이기 때문에 디버깅 하기도 힘들기 때문이었다. 그래서 일일이 코드를 수정해 어렵게 작업을 하는 경우가 많았고, 덩달아 개발 기간도 상당부분 늘어나기도 했다.
2-4. Converting(C++코드) 및 아이폰으로 릴리즈
결과가 확실히 맞는 Emulator는 아니지만 기본적인 컴포넌트와 아이폰에서 쓸 수 없을만한 프로세스만 아니라면 아이폰용으로 릴리즈해도 크게 문제는 없다. 지금부터는 아이폰용으로 릴리즈하기 위해 C++코드로 컴파일되는 부분을 설명할 차례이다. 이 부분은 비교적 간단하다. 지금까지 잘 따라서 진행했다면 클릭 한번으로 컴파일이 되는 것을 확인할 수 있다.
[그림6] C++코드로 변환할 프로젝트 선택화면
물음표 오른쪽에 위치한 화살표를 클릭하게 되면 현재 등록된 프로젝트 이름이 나오게되고, 여기서 컴파일할 프로젝트를 선택하게 되면 Mobile 관련 세팅한 부분에서 선택한
Deploy 경로로 컴파일된 파일들이 Deploy된다. 컴파일시 Console View를 통해 컴파일이 진행되는 Log를 볼 수 있다. 이 때 에러가 발생한다면 에러가 발생되는 부분을 수정하면 되겠다.
에러없이 컴파일 되었다면 Deploy된 파일을 확인할 수 있다. 이제 Windows 환경에서 하는 일은 끝이다. Deploay된 파일을 Mac으로 옮겨서 아이폰으로 릴리즈만 시키면 끝이다. Mac에 옮겨 xcodeproj파일을 실행하기 전에 iphone-info.plist 파일을 열어 default로 설정되어 있는 인증키 부분을 수정 하자. 아이폰 개발을 위해 등록 인증키를 맞춰줘야 릴리즈 단계에서 에러가 발생하지 않는다.
[그림7] iphone-info.plist 파일
위 그림에서 com.yourcompany. << 이 부분을 자신이 가지고있는 인증키로 바꿔주고, Xcode Project File을 실행을 시키자. 그리고 디바이스 및 배포환경을 설정을 한 후 Build를 시키면 설정에 따라 Emulator나 IPhone으로 릴리즈 되는 것을 확인할 수 있게된다. 아래 화면은
Mac Emulator를 캡쳐한 것이다.
[그림8] IPhone Emulator에 Flex기반 애플리케이션이 실행된 화면
지금부터는 이번 프로젝트를 진행하면서 발생하였던 여러가지 문제점에 대해 얘기해보고자 한다. Flex SDK를 사용하지 않으므로 인해 발생하는 많은 컴포넌트의 부재가 가장 큰 문제였다. 이 문제를 해결하기 위해 기존에 있는 컴포넌트와 최대한 유사한 컴포넌트를 개발하기 시작하였고, 그 과정에서 여러가지 문제점들을 추가로 발견하게 됐다. Windows 환경에서 Emulator를 바탕으로 나오는 결과물이 이상하게 Mac OS환경에서 Emulator나 IPhone으로 릴리즈만 되면 그려져야하는 그림들이 그려지지 않았다. 그래서 찾아보았더니
UIComponent를 확장한 컴포넌트 위에 또 다른 UIComponent를 자식으로 할 경우 그 위에 Graphics 클래스를 사용해 그림을 그릴 경우 그려지지 않는 문제점을 찾을 수 있었다. 결국 조금 다른 형식으로 그림을 그려 올리긴 하였으나 쉬운 길로 가지 못해 많은 불편함을 감수할 수 밖에 없었다. 하지만 이 부분은 C++로 컴파일 하는 과정에서 발생하는 문제일 수도 있기에 차후에 CS5에서는 발생하지 않을 것이라 생각이 된다.
두번째로 얘기하고자 하는 것은 MouseEvent였다. 기존의 Flex 프로젝트는 마우스로 인터랙션을 발생시키기 때문에 대부분 MouseEvent를 사용하는 것이 익숙할 것이다. 그래서 너무 당연하듯 MouseEvent를 사용해 Click이나 Drag를 구현하였으나 이것은 Windows환경의
Emulator에서도 돌아가지 않는 것을 알 수 있었다. 그래서 OpenPlug에서 제공하는 API를 찾아보니 TouchEvent를 제공하는 것을 확인할 수 있었고, TouchEvent로 간단한 것들은 구현할 수 있었으나 Drag와 같은 기능은 결국 구현하는데 실패했다. 이유는 Flex 문법으로 사용한 여러가지 메서드들이 런타임에러를 발생시켰기 때문에 현재 이 환경에서 구현에 어려움이 있었다.
마지막으로 메모리 문제였다. 기존 개발환경에서 개발하듯 컴포넌트가 생성되고, 화려함을 더해주기 위해 여러가지 이펙트를 더하자 아이폰 릴리즈시에 과다한 메모리 사용으로 인해 엄청나게 느려지거나 끊기는 현상이 발생했다. 이번 프로젝트의 목표가 일단 아이폰에 릴리즈할 정도의 기간만을 가지고 한것이라 여러가지 방법으로 테스트 해보지 못해 좋은 결과는 볼 수 없었지만 차후에 기존 애플리케이션을 Mobile용으로 옮겨가는 과정에서 이런 부분들은 꼭 수정이 되어야 Mobile에서 원하는 결과물을 볼 수 있을 것이다.
지금까지 OpenPlug를 이용해 간단한 Flex 애플리케이션을 IPhone용 애플리케이션으로 만들어봤다. 위의 문제점들 이 외에도 많은 문제들이 있었고, 찾지 못한 문제점들도 많지만 목표로 했던 FlexBuilder를 기반으로 한 애플리케이션이 IPhone에 올라가는 것을 확인할 수 있었다. 하지만 무엇보다 ELIPS Studio3를 사용할 경우 생기는 장점은 IPhone뿐만이 아니라 다양한 mobile용으로 컴파일을 해주기 때문에 현재 다양한 mobile환경에서 일일이 각 디바이스에 맞춘 개발을 할 필요없이 한번의 개발로 다양한 mobile 장치에 사용할 수 있는 애플리케이션으로 바꾸어줄 수 있다는 것이다. 앞으로 조금 더 발전이 되어 한 번의 개발로 IPhone 뿐만이 아니라 다양한 장치에서도 사용할 수 있는 환경으로 발전하기를 기대해 본다.
<참고자료>
- OpenPlug 사이트
- OpenPlug Dev Zone
- 터칭! 아이폰 SDK3.0 강덕진 지음
댓글 없음:
댓글 쓰기