Adobe AIR 를 이용한 멀티플랫폼 어플리케이션

회사를 이직하면서 맡은 업무가 주로 모바일 플랫폼에 대응하는 어플리케이션을 개발하는 내용이었습니다.
iOS, Android, Phonegap(하이브리드) 등 개발한 앱 개수는 적응데 다양한 플랫폼을 경험 할 수 있었습니다.

고객사가 일본에 있는 교육 관련된 컨텐츠를 주로 만드는 회사여서 그런지 교육과 관련된 어플리케이션을 주로 작성하였습니다.

위의 두개는 Adobe AIR를 이용하여 직접 작성한 어플리케이션입니다. 작품의 퀄리티나 내용은 별로 없지만 처음 접하는 Adobe AIR를 사용한다는 것이 매력이 있었습니다.

위에 있는 6개의 항목은 제가 유지보수를 하고 있는 항목중의 일부 입니다. 초등학교용으로 제작된 어플리케이션으로 수학을 재미있게 배울 수 있도록 도움을 주는 어플리케이션입니다. 수학 어플리케이션은 컨텐츠도 많고 여러가지 기능이 많이 포함되어 복잡한 어플리케이션입니다.


Adobe AIR 로 어플리케이션을 개발 해도 괜찮은 경우

  1. iOSAndroid등에서 기본적으로 제공하는 컴포넌트등을 사용하지 않아도 되는 경우. 예) ListView, TableView.
  2. 디자이너가 별도로 있어 이미지 생산에 문제가 없는 경우
  3. 화려한 애니메이션 효과가 필요한 경우.

위의 3가지 경우에 해당된다면 Adobe AIR를 사용해서 어플리케이션을 개발해도 크로스플랫폼 대응에는 문제가 없습니다.

제가 대응한 플랫폼은 Android, iOS, Windows 입니다. 개수는 적지만 점유율이 많은 플랫폼을 대응하는거기 때문에 좋습니다.


Adobe AIR절대 개발하면 안되는 경우

절대라는 단어는 함부로 쓰지 말아야 하지만 절대라고 적은 이유는 Adobe AIR 로 어플리케이션을 개발 해도 괜찮은 경우 에서 해당되는 항목이 하나라도 있는 경우에는 개발 소스 작성 보다는 다른 부분에 더 많은 공수가 들어갑니다.

고객이 iOS, Android에서 제공하는 기본 컴포넌트와 같은 UI를 요청하는 경우

iOSAndroid에서는 기본 컴포넌트 사용이 편리하게 구성이 되어 있습니다. 그렇지만 그것과 동일한 기능을 Adobe AIR를 이용해서 하려면 정말 피곤이…몰려옵니다.

못 만드는 것은 아닙니다. 그렇지만 직접 만들려고 하면 쉽지는 않을 겁니다.

디자이너가 별도로 없는 경우

제가 말하는 디자이너는 그래픽 편집이 가능한 사람입니다. 개발자도 물론 편집은 할 수 있습니다. 그렇지만 고객이 원하는 만큼 좋게 하는 분은 찾기 힘듭니다.

고객이 원하는 디자인을 해줄 수 있는 사람이 없다면 포기해야 합니다. Adobe AIR의 경우 버튼을 만들때 이미지를 3개 정도 추가합니다. MouseOver, MouseDown, MouseUp 상태의 이미지가 필요합니다.
이런 사소한 이미지를 개발자가 직접 만들면서 작업한다는 것은 어려운 일입니다.

물론 다른 플랫폼용 개발에서도 디자인은 필요하지만 기본 버튼으로만 작성된 어플리케이션도 심심치 않게 볼 수 있습니다.

화려한 애니메이션 효과가 필요한 경우

Adobe Flash의 경우 화려한 UI를 작성하는데 다른 플랫폼에 비해 쉽습니다.
예를들어 Kiosk의 경우 기능이 많지는 않지만 화려하게 작성된 경우가 많이 있습니다. 이럴 경우 Adobe AIR를 사용하면 보다 쉽게 작성할 수 있습니다.

이상입니다.

Cordova Pros & Cons

Cordova


최근에는 Feedly 를 이용하여 제가 주로 보는 글을 RSS 형태로 보고 있습니다. 매번 사이트에 들어가서 확인하기도 힘들고 해서 이용하는 굉장히 편리한 어플리케이션 입니다.

오늘 본 글 중에 Cordova의 정의, 동작원리, 장점, 단점등에 대한 내용중 장, 단점과 Phonegapcordova 에 대한 내용만 정리해보려고 합니다.

정리 내용중에는 제 경험도 일부 포함하였습니다.

원문: http://code.tutsplus.com/tutorials/an-introduction-to-cordova-basics–cms-25146

장단점

새로운 프로젝트에 cordova 또는 Phonegap을 도입하려고 한다면 아무래도 집중적으로 살펴야 하는 부분이 단점에 대한 부분인거 같습니다.

신경쓰지 않으면 나중에 아주 힘든 상황이 발생될 수 있습니다.

장점

1. 쉽게 배울 수 있다.

cordova는 HTML페이지만 잘 만든다면 바로 사용할 수 있습니다.

2. 네이티브 API 접근 가능

카메라, 연락처, 위치정보, 미디어등 기기에서 제공하는 항목에 대해 접근이 가능합니다.

3. 공짜

제가 생각하는 가장 중요한 이유입니다.

4. 오픈소스

5. 다양한 커뮤니티 및 많은 사용자

cordova에 관련된 이슈에 대해 문제 해결을 하기 위해 검색하면 많은 결과가 나옵니다. 비슷한 이슈사항을 가진 사람이 많으면 버그도 빠르게 수정될 수 있습니다.

6. 다양한 플랫폼 지원

안드로이드, iOS, Windows에 모두 지원되는 어플리케이션을 단일 코드로 작성할 수 있습니다.

단점

단점에 대한 경험을 제가 아는대로 공유해보겠습니다.

1. 문서 미흡

2. 네이티브 소스보다 느리다.

당연한 내용이지만 cordova 로 어플리케이션을 개발하면서 네이티브 어플리케이션과 동일한 성능을 나타낸다는 것은 어불성설입니다.

cordova는 하나의 소스로 다양한 플랫폼을 지원하는 편의성이 있지만 거기에 따른 비용을 무시할 수는 없습니다. 이것은 다른 하이브리드 어플리케이션도 비슷하다고 생각합니다.

3. 프레임워크

iOS 네이티브 어플리케이션의 경우 UITableView 형태의 구현이 정말 쉽습니다. 그렇지만 이와 같은 형태를 Phonegap으로 구현하기 위해서는 네이티브보다 훨씬 어려운 방법이 동원되어야 합니다.

또한 네이티브에서 사용되는 페이지 전환 애니메이션 효과를 나타내기 위해서도 많은 코드및 꼼수가 포함되어야 합니다.

cordova가 HTML 페이지를 Webview 에서 표시하는 형태이기 때문에 어플리케이션 사용시 네이티브 어플리케이션과 유사하게 만들어야 한다면 많이 어렵습니다.

4. 플러그인 버그

iOS 9 버전이 발표되며 고객사의 요구사항에 어플리케이션 대상에 iOS 9이 포함되었습니다. 요청에 대해 대응을하고자 빌드를 하였지만 iOS8에서는 정상동작을 하지만 iOS 9에서 잘못 표시되는 항목이 발생하였습니다.

원인은 포함된 플러그인의 버그 였습니다. 저희가 선택할 수 있는 방법은 플러그인이 업데이트 되기를 기다리는 방법과 플러그인을 사용하지 않고 빌드된 파일을 변경하는 방법이었습니다.

결론은 빌드된 파일을 변경하였습니다. 3rd 파티 플러그인의 경우 개발자가 빠르게 대응해준다면 고마운 일이지만 그렇지 않다면 언제 개선될지 모르기 때문입니다.

5. 모든 플랫폼에 동일하지 않다

폰갭으로 빌드한 결과물을 실제 단말에 올려보기 전에는 화면 표시 및 다른 부분이 어떻게 동작할지 예상할 수 없습니다. iOS에서 동작이 잘되니까 Android에서도 잘되겠지라는 생각은 금물입니다.

폰갭(Phonegap)과 Cordova

Phonegap API를 참조하다 보면 링크가 cordova 페이지로 넘어가는 경우가 많습니다. 간단하게 생각하면 cordova를 한번 감싼게 Phonegap이라고 생각됩니다.

두개를 로컬에서 빌드한다면 명령어만 다르고 나머지는 대동소이합니다.

[개발후기] 폰갭을 이용한 어플리케이션 개발

안녕하세요. 벌써 가을이 가고 겨울이 오는거 같습니다.

오늘은 그간 제가 진행 했던 하이브리드 어플리케이션 개발에 대해 리뷰를 조금 하려고 합니다.
만약 하이브리드 어플리케이션 개발을 생각중이거나 현재 개발중이라고 하면 조금은 도움이 될거라고 생각합니다.
폰갭은 HTML, Javascript, CSS를 이용하여 개발한 내용을 소스 수정 없이 안드로이드와 iOS단말에 적용이 가능하다는 장점이 있습니다.
웹에서 검색을 하게 되면 폰갭으로 주로 작업하는 내용은 간단한 HelloWorld 출력을 하거나 단순 예제를 빌드하는 문제가 없을 것 같은 부분만 만들어 문제점이 없는 것처럼 보입니다.
그렇지만 실제 개발을 해보니 문제가 없는 것은 아니었습니다.
1. 화면 레이아웃 문제
선택 영역_004
위의 이미지를 보시게 되면 Kitkat과 ICS에서 서로 다르게 보이는 것을 확인할 수 있습니다.
비록 여백이 빠지는 내용이긴 하지만 사용자의 입장에서 보면 해당 어플리케이션은 문제가 있는 것 처럼 보입니다.
(제가 테스트한 Kitkat과 iPad4, WebBrowser에서는 모두 동일하게 출력이 되는 것을 확인 하였습니다.)
화면 레이아웃은 개발을 하면서 수정하기가 가장 어려운 부분입니다. 현재 화면과 관련된 CSS를 수정하고 빌드해서 안드로이드 단말에 설치하고 다시 수정하고 이런일을 수십번 반복해야 동일한 화면을 얻을 수 있습니다.
2. 연산 오류
선택 영역_005
곱셈 연산을 하는 어플리케이션 입니다. 그렇지만 연산의 결과가 서로 다릅니다. 문제는 Javascript API 연산에 있었습니다. Javascript에는 String Type을 Integer Type으로 변경하는 parseInt() 라는 메소드가 있습니다. parseInt()의 결과값이 두 버전간에 서로 다르게 표시되어 발생된 문제입니다.
Kitkat: parseInt("010") => 10
ICS: parseInt("010") => 0
위의 표처럼 두개의 연산 결과가 서로 다르기 때문에 문제가 발생됩니다.
 3. 성능
저의 경우는 주로 Java 위주로 개발을 했기 때문에 Javascript는 그냥 문법 정도만 알고 있습니다. 그런 수준으로 개발을 해서 그런지는 몰라도 앱의 반응이 굉장히 느려 보였습니다. 성능은 검색을 해보면 “Phonegap에서 성능 최적화 하기” 등의 글을 쉽게 찾을 수 있습니다. 어느 정도는 해결이 가능할 것으로는 보입니다.
4. 어떤 문제가 나올지 모름
 폰갭의 주된 개발은 웹 브라우저를 기반으로 해서 작업을 합니다. 그렇지만 위에서 보는 것처럼 브라우저와 폰갭으로 빌드한 어플리케이션에서 다르게 동작한다면 반드시 해당 단말에서 테스트를 해야만 합니다. 지뢰가 묻혀 있는 밭을 건너는 느낌일겁니다.
UI, 연산 오류, 성능은 어찌 보면 모두 수정이 가능한 내용입니다. 그렇지만 저의 경우 위와 같이 간단한 수학 문제 풀이를 하는 어플리케이션을 한달동안 30개 정도 만들었는데 개발기간이 10일이었다면 UI를 수정하고 확인하는데 걸린 시간이 20일정도 소요된거 같습니다.
만약 폰갭으로 어플을 개발할 예정이시라면 에로 사항도 분명히 있다는 점을 염두하셨으면 좋겠습니다.