저희 회사에서 서비스중인 아쿠아스토리에

데스크탑에서도 상황을 볼 수 있는 알리미를 서비스하고 있었습니다.

물론 AIR로 개발되었고

저 혼자 얼렁뚱땅 만든거라 그럭저럭 서비스를 시작했습니다.

생각보다 반응이 무지 좋았었고

꾸준히 유저들이 사용하는 것을 목격했습니다.

그래서 아이폰과 안드로이드 앱으로 개발해보면 어떨까라는 생각했고

때마침 Adobe CS 5.5가 출시되면서

모바일 앱을 개발하기 매우 쉬워졌었습니다.






그래서 시작했죠.

All Devices 라는 단어를 쓰고 싶었습니다.

그리고 Flash로 가능하다는 걸 경험해보고 싶었습니다.

솔직히 퍼포먼스는 크게 기대하지 않았습니다.

(애니팡때 이미 경험해봤기 때문에 대충 감이 오죠 ㅎㅎ)



결국 아이폰 앱과 안드로이드 앱이 라이브 되었습니다.

그리고 네이트 앱스토어를 통해서 모바일 웹도 서비스되었습니다.

모두 하나의 swf로 부터 나온 것입니다.

해상도나 사이즈로부터 자유로울 수 없었지만 Flash로 이정도까지는 가능하다는 것을 직접 한번 경험해보시기 바랍니다.

링크는 하단에 붙이겠습니다.



개발 후기

아마 직접 개발해본 경험을 듣고 싶어하시는 분들이 계실것 같아 몇글자 적어보겠습니다.

힘든것도 많았고 의외로 괜찮았던 부분도 있었습니다.


의외로 편했던 점.

1. iOS가 디버깅을 지원했다는 것.

 저는 텍스트필드 하나를 스테이지에 붙여놓고 거기에 찍어가면서 테스트했었는데

기본으로 Flash Builder 4.5에서는 디버깅을 하면

디버깅용으로 ipa를 패키징 후 원격 디버깅이 대기상태로 들어갑니다.

iTunes에 설치하고 동기화후 앱을 실행하면 자동으로 디버거를 연결합니다.

이거 정말 편리하더군요. (break point, error stack tracing 다 됩니다.)

개발하면서 압권이었던 부분이었습니다.


2. 안드로이드는 디버깅이 기본.

 안드로이드는 그냥 F11 누르면 폰에서 걍 돌아갑니다.

디버깅도 마찬가지구요.

패키징도 겁나 쉽습니다 -_-;;;

개발은 지존입니다. ㅋ


※ 불편한 점

1. 당근 아이폰은 패키징 시간과 설치 과정이 짜증납니다.

디버깅 한번에 최소 3분입니다 ;;;

패키징하고 아이튠즈에 깔고 실행하고... 못해도 3, 4분입니다.

익숙해지면 그럭저럭 편해지지만 처음엔 엄청 짜증납니다.

가뜩이나 에러도 여기저기 터지는데 디버깅하는데 3, 4분씩 걸리면 속터지죠...

근데 어쩔수 없습니다 -_-a

방법이 없는걸요... 흥...


2. Fragmentation 문제.

파편화, 즉 디바이스들마다 해상도와 성능이 다르기  때문에 앱이 제각각 따로 분리되어야하는 현상때문에 "파편화"라고 합니다.

아이폰 앱은 별개라고 생각한다면 큰 오산입니다.

기본적으로 iPhone 3와 iPhone 4는 원칙적으로는 둘 다 320x480입니다.

하지만 실제로는 iPhone 3는 320x480이고 iPhone 4는 640x960으로 개발해야합니다.

안드로이드는 WVGA 권장해상도인 480x800으로 개발한다고 하더라도

디바이스마다 모두 제각각입니다.

난리납니다.

그래서 이번 알리미는 RESIZABLE 하게 만드는게 핵심이었습니다.

사실 Auto Orientation도 지원되지만 안정성을 위해서 잠시 빼놓고 배포했습니다.

여기서 중요한게 아이폰입니다.

안드로이드는 그냥 해상도 자체가 달라서 그냥 늘려주기만 한다손치더라도

아이폰은 3와 4가 실제로는 사이즈가 같지만

픽셀은 차이가 크기 때문에

마냥 늘려주기만 한다면

아이폰4에서는 깨알같이 나오고 아이폰3에서는 대문짝만하게 나옵니다. (상상가시죠?)

스크린사이즈는 같은데 해상도가 다르기 때문에 무조건 늘려주기만하면

전혀 다르게 보입니다.

그래서 제가 선택한 방법은 iPhone 3에서는 기본이 되는 DisplayObject를 scaleX, Y를 0.5로 하고

모든 stageWidth, Height를 *2씩 해서 적용했습니다.

이게 가능했던 이유가 "RESIZABLE"하게 만들었기 때문입니다.

Resizable은 모바일에서 필수인것 같습니다.


3. 안드로이드 마켓의 불편함, 애플 앱스토어의 맥북 필수 -_-

안드로이드는 등록상 오류가 나더라도 에러문구가 디테일하지 못합니다.

일례로, 프로모션을 하지 않는데 프로모션용 문구를 넣으면 어디가 에러인지 알려주지않고 넘어가지도 않습니다.

마치 버그같죠...

그리고 등록되더라도 앱으로 가는 링크도 제공해주지 않고

메일로 알려주지도 않고 그냥 지켜보고 있는 수 밖에 없습니다.

검색도 잘 되지 않습니다.

우리것만 그런진 모르겠지만 앱이름으로도, app id로도, 개발사 이름으로도 검색이 되지 않더군요. 흠...

그리고 애플 앱스토어는 언제부터 바뀐지 모르겠는데 맥북에 xCode를 설치하면 사용할 수 있는 Application Loader가 있어야만

앱을 등록할 수 있도록 바뀌었습니다.

이걸 모르고 아이튠즈 커넥트에서 한참을 뒤적거렸었네요 -_-a

나름 편하긴한데 어이없긴 매한가지입니다.


스마트폰 앱 개발할 때 유의점

1. 리사이즈는 선택이 아니라 필수.

Resizable하게 만드는 건 모바일 앱이든 모바일 웹이든 필수입니다.

이건 더 할말이 없습니다. 그냥 필수입니다.


2. 인증서 관리 잘하세요.

인증서를 잃어버리거나 비밀번호를 잃어버리면 엄청 짜증납니다.

애플은 그나마 개발자센터에서 다시 받으면 되지만

안드로이드의 개인 인증서를 잃어버리면 -_-a

암호를 찾을수도 다시 받을수도 없습니다.

대박이지요...

관리 잘하시길 바랍니다. (전 svn에 올려놨습니다;;;)


3. 리소스 관리.

저희 사내 프레임웍에는 http 이미지를 호출할 경우 이미지를 받아서 로컬에 저장한 다음

그 다음부터는 로컬에 있는 이미지를 로드하는 방식을 활용하고 있습니다.

이는 모바일의 트래픽 특성상 필수입니다.

속도도 중요하지만 트래픽을 최대한 줄이는게 필요합니다.

이미지를 ipa에 다 포함하는 것도 좋지만

그럴경우 이미지가 추가되면 업데이트를 쳐줘야 한다는 점에서 선택을 잘 해야될 것 같습니다.


4. 이미지를 잘 준비하자.



아이폰은 대표이미지가 필요합니다.

앱이 실행될 때 보여지는 이미지인데

흔히들 Default.png 만 생각하기 쉽습니다.

하지만 이 이미지는 iPhone 3GS, iPod 3세대 이하 용이고

Retina Display에서는 640x960 사이즈의 이미지가 필요합니다.

이 이미지는 Default@2x.png 라는 이름으로 같이 include해야합니다.

iPad는 Default~ipad.png 라는 이름으로 include해야하고

그 밖에도 iPad는 4방향으로 모두 눕힐 수 있는데

이때마다 각 방향으로 실행될때의 이미지를 모두 따로 만들어줄 수 있습니다.

Default-Portrait~ipad.png
Default-PortraitUpsideDown~ipad.png
Default-LandscapeLeft~ipad.png
Default-LandscapeRight~ipad.png

많아요 많아...

그리고 아이콘도 많습니다.

29x29, 36x36, 48x48, 57x57, 72x72, 114x114, 512x512 헥헥....

저거 준비하는 것도 일입니다....

미리미리 고려해놓고 있지 않으면 개발 다 끝나고 스트레스 엄청 받습니다.

저 뿐입니까? 스샷도 준비해야지요, 설명도 써야지요, 영어로도 해야지요, 유료라면 결제 정보도 넣어야지요, 하유...

준비 단단히 하고 하세요.. 개발도 쉽지 않습니다만 그외에도 할게 무지 많아요.


5. OAuth

외부 API를 활용하려면 OAuth가 필수입니다.

xAuth를 지원하는데도 있지만 대부분 deprecate되고 있는 실정입니다.

AIR 2.6부터 StageWebView를 활용할 수 있는데

이걸로 OAuth를 잘 활용해야합니다.

연습뿐이 없습니다.

이건 딱히 OAuth마다 활용법이 정해질 수 없기 때문에 해보는 수 밖에 없습니다.

그저 주의할 점은 하나입니다.

StageWebView와 Flash가 통신할 수 없다는거 -_-

무슨 말이냐면 Javascript나 ExternalInterface로 통신할 수 없다는 이야기입니다.

오로지 감지할 수 있는 거라곤 location이 변하는 것 뿐입니다.

그래서 마지막으로 꼭 특정 주소로 원하는 값을 GET으로 담아서 쏴주면

그걸 받아채는 수 밖에 없습니다.

(p.s 혹시 더 좋은 방법 아는 분 있으시면 댓글 달아주시면 감사하겠습니다.)

가능은 해졌지만 손쉽게 사용하기는 힘든 돌덩이가 굴러온 셈입니다.



이상 개발 후기를 적어보았습니다.



결론은 이렇습니다.

가능은 하지만 쉽지는 않습니다.

스마트폰의 많은 기능을 사용할 수 있지만 만만찮은 테스팅과 노하우가 필요합니다.

앱 이외에 준비할 것도 많구요.

Possibility 하나에 도전해보실 분들에게는 추천합니다!!!

왜냐구요?


재밌거든요 ㅋ




애플 앱스토어 : http://bit.ly/jXklMj
 - iPhone 3GS, iPhone 4, iPad

안드로이드 앱스토어 : http://bit.ly/jaDkj1
 - All Android Phones

모바일 웹 : http://bit.ly/lJ8ONe
 - Android Browser

그 밖의 원래 서비스중이던 데스크탑 위젯 : http://bit.ly/iArpuX

아쿠아스토리(싸이월드 계정 필요) : http://appstore.nate.com/Apps/Canvas?apps_no=898

p.s) iPhone 3GS는 버그가 있어서 재승인 넣어놨어요 ㅋ



For the Better.

+ Recent posts