시작하세요! 티타늄을 활용한 스마트폰 앱 개발

2000년 웹 초창기, 웹에 대한 수요가 폭발적으로 증가하면서 해당 분야가 눈부시게 성장했고, 웹 애플

리케이션(Web Application)이라는 신조어도 탄생했습니다. 기업들도 점차 기존 C/S(Client/

Server) 환경의 시스템을 웹 환경으로 이전해 갔으며, 이에 따라 복잡한 비즈니스 모델을 처리하기 위

한 자바, C# 등의 객체지향 언어가 웹을 지원하기 시작했습니다. 당시에는 웹브라우저 시장을 마이크로

소프트가 대부분 장악한 상태였으며, 웹 개발자들은 마이크로소프트 익스플로러에서 잘 작동하는 웹 애

플리케이션 개발을 최우선으로 삼았습니다. 그러나 2000년 중반부터 등장한 웹2.0과 웹 표준화는 기존

마이크로소프트 익스플로러 기반의 개발 방식에 제동을 걸었고, 크로스 브라우징을 반드시 지원해야 한

다는 새로운 개발 불문율이 만들어져 지금까지 유지되고 있습니다.

이러한 시기에 등장한 스마트 디바이스와 애플리케이션은 기존 개발자에게 신선한 충격과 함께 뭔가를

새로 시작해야 한다는 막연한 두려움으로 다가왔습니다. 시뮬레이터와 디바이스를 이용한 새로운 개발

방식과 오브젝티브-C라는 새로운 개발 언어, 디자인 패턴의 학습에 대한 것이 여기에 해당합니다.

물론 이러한 패러다임에 빠르게 적응하고 기발한 아이디어로 좋은 성과를 낸 사례도 많이 있습니다.

그럼 지금은 어떨까요?

오히려 다양한 스마트 디바이스의 보급이 기업 입장에서는 골칫거리가 되고 있습니다.

애플의 아이폰/아이패드의 성공으로 경쟁업체들은 앞다퉈서 안드로이드, 바다, 윈도우폰, 블랙베리 등 자

사의 운영체제를 기반으로 하는 디바이스를 시장에 소개했고, 기존의 웹 서비스를 애플리케이션으로 추

가 지원하거나 애플리케이션만을 서비스로 제공하는 기업들은 각기 다른 운영체제를 얼마만큼 지원하느

냐가 기업의 경쟁력이 되고 있습니다.

하지만 멀티 플랫폼에 맞게 서비스를 하는 것은 시간, 비용, 자원 관리 등 막대한 예산을 필요로 하며, 글

로벌 기업인 구글조차도 자사의 서비스를 모든 플랫폼에 맞게 지원하기에는 예산이 부족하다고 얘기할

정도입니다.

이것의 대안으로 웹 서비스를 모바일웹으로 개발하고 외형을 네이티브 애플리케이션으로 개발하는 하이

브리드 개발 방식이 많이 채택되고 있으며, 이를 지원하기 위한 폰갭, 앱스프레소, 티타늄 등의 하이브리

드 개발 플랫폼들이 등장했습니다.

하지만 티타늄은 다른 하이브리드 개발 플랫폼과는 구조적인 차이점이 있습니다. 기존 웹 기술을 이용한

다는 점은 동일하지만 개발 결과물이 네이티브 앱라는 가장 큰 차이점이 있으며, 다른 하이브리드 개발

플랫폼에서 제공하는 API는 그 수와 확장 범위가 제한적이지만 티타늄에서 제공하는 API의 수는 방대

하며 개발자가 직접 필요한 모듈을 개발해서 이용하는 것이 가능합니다. 이러한 티타늄 플랫폼의 개발 생

산성과 확장성은 기업의 멀티 플랫폼 지원에 대한 해결책을 제시할 것입니다.

이 책이 티타늄 플랫폼을 활용해 모바일 앱을 개발하고자 하는 많은 분들에게 좋은 길잡이가 되길 바라

며, 국내에 티타늄이 본격적으로 보급되기 전인데도 이 책을 집필하는 데 흔쾌히 도움을 주신 위키북스

대표님께 감사를 드립니다.

끝으로 항상 옆에서 새로운 도전에 용기를 북돋아 주는 아내 기영이와 건강한 미소로 아빠에게 힘을 주

는 아들 우진이에게 사랑한다는 말과 함께 이 책을 바칩니다.

저자 방현우

01앱 개발의 이해

네이티브앱…………………………………………………………………………………… 13

웹앱…………………………………………………………………………………………… 14

하이브리드앱………………………………………………………………………………… 16

정리…………………………………………………………………………………………… 17

02티타늄 플랫폼 소개

티타늄…플랫폼이란?………………………………………………………………………… 18

티타늄…플랫폼…구동…방식…………………………………………………………………… 20

다른…하이브리드…플랫폼과의…차이점……………………………………………………… 21

정리…………………………………………………………………………………………… 26

03티타늄 개발 환경 설정

호스트…환경… ……………………………………………………………………………… 29

개발자…라이선스… ………………………………………………………………………… 29

Xcode…&…iOS…SDK…설치………………………………………………………………… 30

Appcelerator…계정…등록…및…SDK…설치… …………………………………………… 34

Titanium…Developer…설치……………………………………………………………… 39

Titanium…Studio…설치…………………………………………………………………… 46

정리…………………………………………………………………………………………… 52

04Hello World! Titanium Mobile 시작하기

프로젝트…만들기… ………………………………………………………………………… 53

프로젝트…실행하기… ……………………………………………………………………… 60

Hello…World!…실행하기…………………………………………………………………… 63

프로젝트…구조…살펴보기…………………………………………………………………… 67

정리…………………………………………………………………………………………… 75

05Titanium.UI와의 상호작용 이해하기

모델,…뷰,…컨트롤러에…대한…이해…………………………………………………………… 76

Titanium.UI…모듈… ……………………………………………………………………… 78

UI와의…상호작용… ………………………………………………………………………… 79

Window…이해하기………………………………………………………………………… 81

View…이해하기……………………………………………………………………………… 90

Control…이해하기… …………………………………………………………………… 107

UI…레이아웃… …………………………………………………………………………… 142

정리………………………………………………………………………………………… 142

06사진 공유 애플리케이션 만들기

프로젝트…개요… ………………………………………………………………………… 144

프로젝트…만들기… ……………………………………………………………………… 144

PhotoVine…구성…살펴보기… ………………………………………………………… 149

정리………………………………………………………………………………………… 159

07서버와의 통신

서버…측…준비……………………………………………………………………………… 161

네트워크…통신… ………………………………………………………………………… 168

사진…리스트…가져오기…:…PhotoList.js………………………………………………… 171

커버플로우…슬라이드쇼…:…SlideShow.js… ………………………………………… 182

미디어…이용하기… ……………………………………………………………………… 185

사진…업로드하기…:…PhotoUpload.js………………………………………………… 186

정리………………………………………………………………………………………… 195

08Window 간 데이터 연동

사진…상세보기…:…PhotoView.js… …………………………………………………… 197

정리………………………………………………………………………………………… 203

09Titanium.UI.TableView 기능 더하기

Table…Plus…프로젝트…생성… ………………………………………………………… 205

정리………………………………………………………………………………………… 222

10Titanium.UI.iPad 다루기

Titanium.UI.iPad.SpliteWindow………………………………………………… 225

Titanium.UI.iPad.Popover………………………………………………………… 227

예제…살펴보기… ………………………………………………………………………… 229

정리………………………………………………………………………………………… 235

11데이터 저장

데이터베이스……………………………………………………………………………… 237

파일…시스템… …………………………………………………………………………… 240

애플리케이션…프로퍼티… ……………………………………………………………… 245

정리………………………………………………………………………………………… 247

12구글맵(GoogleMap)지도 및 위치정보

구글맵(GoogleMap)…………………………………………………………………… 248

Geolocation…………………………………………………………………………… 253

정리………………………………………………………………………………………… 256

13미디어

동영상…촬영… …………………………………………………………………………… 258

동영상…재생… …………………………………………………………………………… 262

오디오…녹음… …………………………………………………………………………… 266

정리………………………………………………………………………………………… 269

14기타 고급 기능

플랫폼…데이터… ………………………………………………………………………… 270

지역화……………………………………………………………………………………… 273

전화,…SMS,…브라우저…………………………………………………………………… 275

Badge…………………………………………………………………………………… 276

진동………………………………………………………………………………………… 280

암호화……………………………………………………………………………………… 281

정리………………………………………………………………………………………… 282

15인증서 발급에서 앱스토어 등록까지

iOS…개발자…프로그램…가입……………………………………………………………… 284

인증서…발급… …………………………………………………………………………… 284

디바이스…등록… ………………………………………………………………………… 290

APP…ID…생성……………………………………………………………………………… 291

프로비저닝…생성… ……………………………………………………………………… 293

디바이스…빌드… ………………………………………………………………………… 294

앱…스토어…등록…………………………………………………………………………… 298

정리………………………………………………………………………………………… 300

부록…A안드로이드 애플리케이션 개발하기

개발…환경…설정하기……………………………………………………………………… 301

부록…BTitanium Studio 디버깅……………………………………………………… 311

찾아보기………………………………………………………………………………………… 315

12 시작하세요 ! 티타늄을 활용한 스마트폰 앱 개발

스마트 기기의 출현으로 애플리케이션(Application)의 줄임말인 앱(App)이라는 신조어가 생

겨났으며, 개발자(사)가 개발한 앱을 판매하는 온라인 장터인 앱스토어(App Store)도 형성됐

습니다. 2011년 하반기 기준으로 애플 앱스토어에 약 60만 개, 안드로이드 마켓에 약 50만 개

의 앱이 등록돼 있으며, 아직도 새로운 앱들이 개발되고 있습니다.

이번 장에서는 앱, 즉 애플리케이션을 개발하는 방식에는 어떠한 것이 있으며, 각 방식의 개념

및 장단점을 살펴보겠습니다. 구현하려는 애플리케이션에 적합한 개발 방식을 선택해야 비용,

시간 등의 리소스를 최소화할 수 있으므로 각 방식을 잘 이해하기 바랍니다.

이 장을 읽고 나면 다음과 같은 내용을 이해할 수 있을 것입니다.

•애플리케이션 개발 방식

•개발 방식에 따른 장단점

앱 개발의 이해

01

13 01 장 _ 앱 개발의 이해

네이티브앱

개념

특정 운영체제에 종속적인 애플리케이션으로 모바일 디바이스(스마트폰/탭)에 직접 설치됩니

다. 운영체제를 만든 회사에서 제공하는 SDK를 내려받아 C, C++, 오브젝티브-C, 자바, 실

버라이트, C# 등으로 개발하며, 바이너리 파일을 앱스토어에 등록해 배포/판매합니다. 사용자

는 앱스토어에서 필요한 애플리케이션을 유/무료로 내려받아 설치한 후 사용합니다. 보통 “앱,

App”이라고 하면 “네이티브앱”을 가리킵니다.

장점

최적화된 UI 제공 및 빠른 반응 속도

운영체제를 만든 회사에서 제공하는 최적화의 UI 가이드라인과 디바이스 리소스를 직접 사용

할 수 있는 API를 통해 최적의 UX를 구현할 수 있고 빠른 반응 속도를 보장할 수 있습니다.

하드웨어 접근성

제공되는 SDK를 통해 모바일 디바이스에서 제공하는 리소스(가속센서, 카메라, 사진, GPS,

화면전환 등)를 이용할 수 있습니다.

배포의 용이성

앱스토어를 통해 배포할 수 있으며, 사용자는 필요한 애플리케이션을 내려받아 설치한 후 사용

할 수 있습니다.

다양한 수익 모델

개발된 애플리케이션을 유료로 판매하거나 무료 배포 후 광고를 노출해 수익을 얻는 등 다양한

수익 모델을 창출할 수 있습니다.


단점

많은 개발 비용

각 플랫폼(iOS, 안드로이드, RIM, 윈도우폰7 망고 등)마다 개발 환경이 다르므로 독자적인 애

플리케이션을 개발해야 하며, 그에 따라 추가 개발 비용이 발생합니다.

유지보수의 어려움

기능을 추가하거나 버그를 수정할 경우 애플리케이션을 다시 배포해야 하고, 다시 “검수” 단계

를 거쳐야 하므로 오랜 시간이 소요됩니다.

웹앱

개념

웹앱을 간략히 표현하면 모바일 디바이스에 최적화되고 인터랙션이 많은 모바일 웹사이트를

말합니다.

자바스크립트, VB스크립트 등의 클라이언트 측 기술과 ASP, PHP, JSP, ASP.NET 등의 서버

측 기술을 이용해 구축한 서비스를 일반적으로 웹이라고 부릅니다. 그리고 풀 브라우징을 지원

하는 피처폰 또는 스마트 디바이스에 최적화된 웹을 일반적으로 모바일 웹이라고 합니다.

모바일웹은 네이티브앱과 같이 다양한 UX를 제공하기 어려우므로 이러한 한계점을 보완하고

자 jQuery Mobile, jQTouch, Sencha Touch, WebApp.NET 등의 프레임워크가 등장했습

니다. 이러한 프레임워크와 HTML5, CSS3 등의 기술을 활용해 사용자 인터랙션이 많은 형태

의 모바일웹을 웹앱이라고 합니다.

현재 서비스 중인 구글 모바일웹을 보면 웹앱을 쉽게 이해할 수 있습니다.

15 01 장 _ 앱 개발의 이해

장점

높은 호환성

웹표준 기술을 이용해 개발하므로 크로스 브라우징 지원만 완벽하다면 모든 디바이스에서 서

비스할 수 있습니다.

유지보수의 용이함

모든 콘텐츠가 서버에 위치하므로 네이티브앱의 경우처럼 앱스토어나 마켓의 검수 과정이 필

요 없습니다. 즉 서비스 재배포가 수월합니다.

단점

웹브라우저에 의존적

디바이스에 설치된 브라우저를 통해 실행되므로 브라우저의 속도와 성능에 의존적입니다.

느린 반응 속도

웹은 사용자 요청에 따른 이미지, 자바스크립트, HTML, CSS 등의 서버 실행 결과물을 네트

워크를 통해 디바이스 브라우저로 전송하고 이를 다시 조합해 화면을 구성하므로 사용자 반응

속도가 느립니다.

하드웨어 접근 불가능

모바일 디바이스에서 제공하는 API에 대한 접근이 불가능하므로 카메라, 사진, GPS, 나침반,

디바이스 정보 등의 리소스를 이용한 개발이 어렵습니다.

* 현재 W3C에서는 DAP(Device APIs and Policy)라는 그룹을 통해 디바이스 API에 대한 접근 제

한을 뛰어넘기 위한 디바이스 제어 표준을 제정 중에 있습니다.


하이브리드앱

개념

네이티브앱과 웹앱의 장점을 이용해 겉으로는 네이티브앱의 형태를 갖추지만 내부 주요 구성

의 전체 또는 일부가 웹앱 형태인 앱을 “하이브리드앱”이라고 합니다.

“웹뷰(WebView)”라는 브라우저 컨트롤을 기반으로 네이티브 코드와 웹을 결합해 구동되

게 하는 방식과 티타늄(Titanium), 폰갭(PhoneGap), 앱스프레소(Appspresso), 모노터치

(MonoTouch) 등의 하이브리드 프레임워크 개발툴을 이용하는 방식이 있습니다.

하이브리드 프레임워크 개발툴은 리소스에 접근할 수 있는 디바이스 API를 재정의하고 기존

에 익숙한 자바스크립트, HTML를 재정의한 API를 이용할 수 있게 만들어 줍니다.

이러한 방식은 개발자에게 네이티브앱 개발에 필요한 새로운 언어를 학습하는 시간을 줄여주

며, 기존에 사용하던 이해도가 높은 언어를 이용하므로 생산성이 매우 높아집니다.

이 책에서 배우려는 티타늄은 다른 하이브리드 개발툴과 다르게 개발한 웹 소스를 내부 컴파일

러에 의해 원시 코드로 변환합니다. 즉, 웹 기술로 개발하지만 결과물은 순수 네이티브앱인 것

입니다. 또한 티타늄에서 제공하지 않는 API는 오브젝티브-C를 이용해 확장 모듈로 개발할

수 있고, 개발된 모듈은 다른 프로젝트에서 다시 사용할 수도 있습니다.

장점

원 소스 멀티 유즈(Once Source, Multi Use)

하나의 개발 소스로 iOS, 안드로이드, 바다, 블랙베리 등의 여러 운영체제용 앱을 만들 수 있습

니다. 단, 운영체제별로 특화된 API를 사용할 경우 약간의 예외 처리는 필요합니다.

높은 개발 생산성

비교적 개발이 쉬운 자바스크립트, HTML, CSS 등의 언어로 개발하므로 오브젝티브-C, 자바,

C# 등을 이용한 개발보다 개발 생산성이 높습니다.

17 01 장 _ 앱 개발의 이해

배포의 용이성

네이티브앱과 마찬가지로 앱스토어나 안드로이드 마켓을 통해 쉽게 배포할 수 있습니다.

단점

높은 프레임워크 의존성

선택한 프레임워크에서 제공하는 API 이외의 기능을 구현할 경우 어려움이 있습니다.

* 티타늄은 개발자가 확장 모듈을 직접 개발 및 배포가 가능하므로 프레임워크 의존성이 낮습니다.

정리

이번 장에서는 애플리케이션 개발 방식에 대한 개념과 각 개발 방식의 장단점을 살펴봤습니다.

무엇보다 개발하려는 애플리케이션의 기획 의도, 서비스 특성, 운영 이슈 등을 잘 파악해 목적

에 맞는 개발 방식을 선택하는 것이 가장 중요할 것입니다.

이 책에서 학습하는 티타늄은 위에서 살펴본 하이브리드 개발 방식이지만, 자바스크립트,

HTML, CSS등 기존 개발자에게 익숙한 언어를 이용해 개발할 수 있으므로 개발 생산성을 높

일 수 있고 SDK에서 제공되지 않는 필요한 모듈을 직접 개발할 수 있어 개발 유연성을 제공하

는 최고의 프레임워크라고 할 수 있습니다.

개발 호스트 환경에 있어서도 윈도우, 맥, 우분투 등 다양한 운영체제를 지원합니다. 단, 이 책

에서 다루는 아이폰/아이패드를 개발하려면 맥 운영체제가 반드시 필요합니다.

티타늄이 다른 하이브리드 개발 프레임워크와 다른 부분에 대해서는 2장에서 다시 설명하겠습

니다.

다시 한 번 강조하는 부분은 티타늄을 이용한 결과물은 네이티브앱이라는 것입니다.


티타늄 플랫폼은 비교적 개발하기 쉬운 자바스크립트, HTML, CSS, PHP, 파이썬, 루비 등

을 이용해 모바일, 태블릿, 데스크톱 애플리케이션을 개발할 수 있는 오픈소스 개발 플랫

폼입니다.

이번 장에서는 티타늄 플랫폼으로 네이티브앱을 개발하는 방법을 전반적으로 살펴보겠습니다.

이 장을 학습할 때 다음과 같은 내용에 주안점을 두길 바랍니다.

•티타늄 플랫폼의 개념 및 구동 방식

•티타늄 플랫폼의 특성

티타늄 플랫폼이란?

특정 플랫폼(iOS, 안드로이드, 윈도우 OS)에서 구동되는 모바일 애플리케이션을 개발할 때 필

요한 네이티브 언어(오브젝티브-C, 자바, 닷넷)를 학습하거나 사용할 필요 없이 보편적으로

티타늄 플랫폼 소개

02

19 02 장 _ 티타늄 플랫폼 소개

사용하는 표준 웹 기술을 이용해 모바일 또는 데스크톱 애플리케이션을 개발할 수 있게 돕는

개발 플랫폼이 바로 티타늄입니다.

물론 웹 개발 경험이 없는 개발자에게는 웹 기술을 이용한다는 점이 큰 이점으로 작용하지는

않을 것입니다. 하지만 자바스크립트, PHP와 같이 비교적 사용하기 쉬운 언어로 새로운 언어

(오브젝티브-C, 자바 등)에 대한 학습 부담을 줄여주고 신속하게 네이티브 애플리케이션을 개

발할 수 있게 지원하는 것이 티타늄 플랫폼의 목적이며 가장 큰 장점입니다.

티타늄 플랫폼의 또 다른 장점은 HTML과 CSS를 이용해 화면과 UI를 구성하므로 디자이너,

코더와의 협업이 쉽고 개발 생산성이 매우 높다는 것입니다.

그렇다면 이러한 티타늄 플랫폼이 어떻게 구성돼 있는지 알아보겠습니다.

티타늄 플랫폼은 크게 모바일 영역과 데스크톱 영역으로 구분할 수 있으며, 개발에 필요한

SDK도 모바일 SDK와 데스크톱 SDK로 구분해서 제공하고 있습니다. 모바일 SDK를 이용하

면 아이폰/아이패드, 안드로이드앱 개발뿐 아니라 모바일 웹과 웹 앱을 개발할 수 있고, 데스

크톱 SDK를 이용하면 PC나 맥용 애플리케이션을 개발할 수 있습니다.

[그림 2-1] 티타늄 플랫폼의 구성


그리고 티타늄 플랫폼을 이용한 개발 지원을 위해 Titanium Developer와 Titanium

Studio와 같은 개발 도구도 제공하고 있습니다. 초기 버전에서는 Titanium Developer로

다소 불편한 환경에서 개발해야 했지만 2011년 초반 IDE 개발사인 Aptana Studio를 인

수해 불편했던 개발 SDK를 Titanium Studio로 통합하고 다양한 기능을 대폭 업그레이드

해 최적의 개발 환경을 제공하고 있습니다. Titanium Studio에 대한 내용은 3장에서 자

세히 다루겠습니다.

티타늄 플랫폼 구동 방식

원리

자바스크립트, PHP 등의 스크립트를 이용해 네이티브 애플리케이션 개발이 어떻게 가능

할까요?

그것은 티타늄 엔지니어가 각 플랫폼(iOS, 안드로이드, Rim 등)에서 제공하는 API를 분석

해 표준화하고 이를 다시 라이브러리 형태로 개발했기 때문입니다. 티타늄 플랫폼에서는

“Titanium API”를 통해 이러한 표준화된 라이브러리에 접근할 수 있으며, 네이티브 코드로 변

환할 수도 있습니다.

쉽게 풀이하자면 각 플랫폼별 SDK를 표준화해 자바스크립트, PHP의 문법을 이용해 접근할

수 있게 티타늄 플랫폼에서 “Titanium Desktop API”와 “Titanium Mobile API”를 제공하고,

티타늄 개발자는 제공된 Titanium API를 이용해 iOS, 안드로이드 플랫폼에 쉽게 접근해 사용

할 수 있는 것입니다.

컴파일

티타늄 플랫폼은 Titanium API를 이용해 작성된 스크립트의 최적화 및 각 플랫폼 API 접근을

위해 “사전 컴파일, 프런트 앤드 컴파일, 플랫폼 컴파일”로 총 3번의 컴파일 단계를 거치며 단

계별 역할은 다음과 같습니다.


사전 컴파일

사전 컴파일러는 작성된 스크립트 코드의 최적화 단계를 수행합니다. 공백과 같은 스크립트 코

드에 불필요한 요소를 제거하고 스크립트에서 사용한 Titanium API의 정합성을 검사합니다.

프런트 앤드 컴파일

프런트 앤드 컴파일러는 완성된 스크립트 코드를 기반으로 네이티브 프로젝트를 생성하고 프

로젝트 내에 오브젝티브-C, 자바 등의 플랫폼별 원시 코드를 생성합니다.

이 단계에서 생성된 원시 코드를 확인하는 방법은 4장(Xcode로 구조 살펴보기)을 참고하기 바

랍니다.

플랫폼 컴파일 & 패키징

플랫폼 컴파일러는 네이티브 애플리케이션 컴파일러(iOS/Android SDK)를 이용해 최종 컴파

일을 진행하고 결과물을 패키징합니다. 또한 애플리케이션의 실행 및 테스트를 할 수 있게 기

본 시뮬레이터나 디바이스에 패키징한 애플리케이션을 배포합니다. 즉 Xcode를 이용한 소스

컴파일, 시뮬레이터 실행, 디바이스 배포의 역할을 대행합니다.

다른 하이브리드 플랫폼과의 차이점

1장에서 살펴본 바와 같이 외형은 네이티브앱 형태지만 내부는 웹 브라우저로 실행되는 웹앱

을 하이브리드앱이라고 합니다.

하이브리드앱 개발 방식은 크게 모바일 개발자와 웹 개발자가 각자의 영역을 나눠서 개발하는

방식과 웹 개발자가 모바일 영역을 하이브리드 개발 도구로 대체하고 웹 개발을 담당하는 두

가지 방식이 있습니다.

티타늄(Titanium), 폰갭(PhoneGap), 앱스프레소(Appspresso), 모노터치(MonoTouch) 등

이 가장 대표적인 하이브리드 개발 플랫폼이지만 티타늄은 다른 개발 플랫폼과 다른 구조적인

차이가 있습니다.


개발 확장성

폰갭, 앱스프레소 등은 디바이스 리소스(카메라, 미디어 등)에 접근할 수 있는 제한된 API를 제

공하며 개발자가 필요한 API를 추가로 개발할 수 없습니다. 즉 필요한 기능이 API로 제공되지

않으면 툴을 이용한 개발은 포기하고 네이티브앱을 이용해 개발하는 방법밖에는 없습니다.

하지만 티타늄은 필요한 API를 오브젝티브-C나 C, 자바를 이용해 개발할 수 있는 확장성을

갖추고 있습니다. 티타늄이 제공하지 않는 API나 성능이 좋은 모듈을 개발해 사용할 수도 있습

니다.

제공되는 API 규모

Titanium Mobile SDK(1.8.0.1버전 기준)는 총 35개의 모듈을 제공하며, 각 모듈과 관련된

112개 객체, 5178개 메서드, 2847개 속성을 제공합니다. 모바일 개발에 필요한 기능 대부분이

API로 제공된다고 생각하면 됩니다.

또한 유료 계정은 [그림 2-2]와 같이 adMob, Paypal, Barcode 등 추가 API를 제공합니다.

[그림 2-2] Titanium+Plus Modules (http://www.appcelerator.com 참조)


애플리케이션 통계

애플리케이션 개발을 완료한 뒤에도 사용자 반응, UI 배치 적합성, 총 사용자 수, 애플리케이

션 몰입도 등을 측정한 후 취약점을 보강해 지속적으로 업데이트를 해야 합니다. 티타늄은 이

러한 애플리케이션 사용 통계를 측정할 수 있는 모듈과 데이터를 조회할 수 있는 웹 페이지를

제공합니다.

애플리케이션 통계는 개발 과정에서 추출하기는 어려우며 앱스토어를 통해 설치한 후에 측정


티타늄이 제공하는 통계는 다음과 같으며 이벤트 통계는 특정 데이터를 수집하는 것이 목적이

므로 Titanium.Analytics 모듈을 이용해 개발 코드에 직접 입력해야 합니다.

•Users

New Users

Active Users

Total Users

•Sessions

Total Sessions

Avg. Sessions per User

Avg. Session Length

•Events

[그림 2-3]은 필자가 개발해 서비스 중인 애플리케이션의 통계 화면이며 별도의 Events 통계

는 추가하지 않았습니다.


[그림 2-3] Titanium Analytics 화면

마켓플레이스 지원

티타늄 플랫폼의 또 다른 장점은 마켓플레이스를 지원하는 것입니다. 개발 확장성 부분에서 언

급했듯이 티타늄은 개발에 필요한 모듈을 직접 개발해 사용할 수 있습니다. 또한 개발된 모듈

을 마켓플레이스에서 다른 개발자에게 판매할 수도 있으며 유용한 모듈을 구매해서 사용할 수

도 있습니다.


[그림 2-4] 모듈 마켓플레이스

지속적인 기능 추가

Titanium Mobile SDK를 이용해 HTML5 + CSS3를 지원하는 웹앱을 개발할 수도 있습니

다. 기존에는 애플리케이션 개발 후 모바일 브라우저 사용자를 위해 jQuery Mobile, Sencha

Touch 등의 오픈소스 모바일 프레임워크를 이용해 별도로 개발했습니다.


하지만 티타늄을 이용해 애플리케이션을 개발한다면 이러한 노력을 들이지 않아도 됩니다.

티타늄은 오픈 물리 엔진인 Box2D를 Titanium Module로 확장해서 배포하고 있습니다. [그

림 2-5]와 같이 간단한 게임은 물론 복잡한 게임도 개발할 수 있습니다.

[그림 2-5] Box2D를 이용한 예제

정리

이번 장에서 살펴본 티타늄 플랫폼은 개발자가 오브젝티브-C나 자바 등의 새로운 언어를 사용

하지 않고도 모바일 애플리케이션을 개발할 수 있게 도와줍니다.

웹 개발자가 아니더라도 자바스크립트에 대한 지식만 있으면 충분히 모바일 애플리케이션을

개발할 수 있는 기회를 제공받을 수 있습니다.


무엇보다 티타늄은 필요한 기능을 직접 확장해 개발할 수 있으며, 확장 개발한 모듈로 새로운

수익을 창출할 수도 있습니다.

티타늄 플랫폼은 다른 어떤 하이브리드 개발 플랫폼과 비교해도 기능이 많고 지속적으로 발전

할 가능성이 상당히 큽니다.


모든 개발 입문 도서에서 빠지지 않고 다루는 내용이 개발 환경 설정과 “Hello World”를 출력

하는 프로그램일 겁니다. 개발 환경 설정은 쉬운 것 같으면서도 막상 개발 환경이 바뀌어 새롭

게 설정하려면 가장 막히는 부분이기도 하고, 새로운 마음으로 책을 펴고 접기를 반복하면서

가장 많이 살펴보는 부분이기도 합니다.

이번 장에서는 티타늄을 이용한 애플리케이션 개발에 필요한 사항들을 살펴보겠습니다.

티타늄을 이용한 애플리케이션 개발 시 반드시 필요한 항목은 아래와 같습니다.

•호스트 환경(PC, Mac)

•개발자 라이선스 및 계정 (Apple, Appcelerator)

•Xcode & iOS SDK

•Titanium Developer 또는 Titanium Studio

티타늄 개발 환경 설정

03

29 03 장 _ 티타늄 개발 환경 설정

호스트 환경

현재 1.8.x 버전의 티타늄 플랫폼은 [표 3-1]에 나열돼 있는 호스트 환경에서 개발할 수 있습

니다. 이 책에서는 티타늄을 이용한 아이폰/아이패드 개발을 다루기 때문에 인텔 기반의 맥 운

영체제가 설치된 호스트가 반드시 필요합니다.

OS 플랫폼 OS 버전 개발 가능한 티타늄 플랫폼

윈도우 윈도우 XP (Starter Edition 제외), 윈도우 7 안드로이드, 블랙베리, 데스크톱

맥 OS X OS 10.6 (스노우 레오파드) 이상 iOS, 안드로이드, 데스크톱

리눅스 우분투 리눅스 9.10 이상 안드로이드, 데스크톱

[표 3-1] 티타늄 플랫폼 호스트 환경

* 참고로 안드로이드 개발은 플랫폼에 구애받지 않는 자바 기반으로 하기 때문에 어떠한 운영체제

에서도 개발할 수 있습니다.

개발자 라이선스

개발자(사)가 아이폰/아이패드용 애플리케이션 개발에 필요한 각종 기술 문서 및 샘플 코드

를 참고하려면 “iPhone Developer”로 등록해야 하며, 개발된 애플리케이션을 디바이스에서

테스트하거나 앱스토어에 등록하려면 [그림 3-1]과 같이 비용을 지불하는 “iOS Developer

Program”에 가입해야 합니다. 이때 Standard와 Enterprise의 차이를 확인하고 적합한 프로

그램에 가입하면 됩니다.

개발자 등록 및 프로그램 가입은 http://developer.apple.com에서 할 수 있습니다.

종 류 비 용 비 고

Standard Program 99달러 / 년 개인 개발자에 적합

Enterprise Program 299달러 / 년 2인 이상의 개발자 그룹에 적합

[표 3-2] iPhone Developer Program 비용


[그림 3-1] iOS Developer Program 등록 화면

Xcode & iOS SDK 설치

아이폰/아이패드 개발을 위한 호스트 환경과 iPhone Developer 등록을 마무리하고 나면 개

발에 필요한 Xcode를 설치합니다.

티타늄은 자바스크립트 코드를 원시코드로 변환하고 최종 컴파일하기 위해 Xcode와 iOS

SDK를 이용하므로 반드시 이 두 가지가 설치돼 있어야 하며 Xcode를 설치할 때 iOS SDK도

함께 설치됩니다.


Xcode & iOS SDK 내려받기

[그림 3-2]와 같이 앱스토어를 통해 Xcode를 내려받습니다.

[그림 3-2] Xcode 내려받기

Xcode Installer 실행 및 약관 동의

내려받은 파일을 클릭해 [그림 3-3]과 같이 Installer를 실행합니다. “Install” 버튼을 클릭 후

[그림 3-4]의 약관 동의 화면에서 ‘Agree’ 버튼을 클릭하고 다음 단계로 넘어갑니다.


[그림 3-3] Xcode and iOS SDKs 설치

[그림 3-4] 약관 동의

계정 확인 및 설치 진행

응용 프로그램을 설치할 계정에 대한 확인창이 활성화됩니다. 계정과 비밀번호를 입력한 후

“보조 응용프로그램 추가"를 클릭하면 설치가 진행됩니다.


[그림 3-5] 계정 확인

[그림 3-6] 설치 진행

Xcode 및 iOS SDK 설치 완료

설치가 완료되면 [그림 3-7]과 같이 Xcode가 초기 실행됩니다. 4장, 15장에서 Xcode 관련

내용을 살펴보니 여기서는 “취소” 버튼을 클릭해 Xcode를 종료합니다.


[그림 3-7] Xcode 실행 화면

Appcelerator 계정 등록 및 SDK 설치

티타늄 플랫폼 관련 개발 SDK를 내려받으려면 Appcelerator 계정이 있어야 합니다. 등록된

계정은 Titanium Studio를 실행할 때 필요한 로그인 계정이기도 합니다. 계정 유형은 유료,

무료로 분류되며 유료는 다시 3가지 형태로 구분됩니다.

각 계정 유형에 따른 차이점은 [표 3-3]과 같습니다.

구 분 Community Indie Enterprise

Mobile & Desktop SDKs 제공 O O O

Titanium Studio O O O

Titanium+Plus Starter 모듈 × O O

Titanium+Plus Enterprise 모듈 × × O


Titanium Analytics(애플리케이션 통계)

O O O

Additional Analytics(사용자 및 위치 통계)

× × O

개발 기술지원 × × O

비용 Free 49달러 / 월499달러 / 년

별도 협의

[표 3-3] Appcelerator 계정 유형(https://my.appcelerator.com/account 참고)

이 책에서는 Community 계정 유형을 사용하겠습니다. 지원 기능이 부족한 것 같지만 해당 계

정 유형에서 제공하는 모듈만으로도 필요한 개발은 얼마든지 가능합니다.

유료 계정을 사용하면 더 많은 API를 제공받을 수 있으며 온라인 또는 유선을 통한 기술 지원

도 받을 수 있습니다.

계정 등록 절차는 다음과 같습니다.

계정 정보 입력 및 인증

https://my.appcelerator.com/auth/signup에 접속해 이메일, 성명, 국가 이름 등의 정보를

입력하면 등록한 메일 계정으로 인증 메일이 발송됩니다. 메일에 포함된 인증 링크를 클릭해

계정을 활성화합니다.



[그림 3-8] Appcelerator 계정 생성

계정 생성 완료

인증 메일을 통해 계정 활성화가 완료되면 계정 메인 페이지로 이동해 각종 자료를 내려받을

수 있습니다.


[그림 3-9] Titanium Studio 다운로드 화면

계정 타입 변경

티타늄에서 제공하는 유료 모듈과 기술지원을 받고 싶다면 계정 유형(Account Type)을 Indie

나 Enterprise로 변경해야 합니다. 변경 방법은 로그인 후 계정 메인 페이지에서 Account 메

뉴를 선택한 후 원하는 계정 유형을 선택해서 진행합니다.


[그림 3-10] 계정 유형 변경

Titanium Developer 설치

초기 Titanium Studio가 배포되기 전에는 Titanium Developer를 통해 개발을 했습니다. 개

발은 보통 [그림 3-11]의 Aptana Studio를 이용하고 Titanium Developer는 시뮬레이터

애플리케이션을 디바이스에 설치하는 역할을 하는 분리된 개발 환경을 제공했습니다.

현재는 appcelerator사에서 에디터 개발 업체를 인수해 이클립스 기반의 Titanium Studio

를 제공하고 있습니다. 이클립스 기반의 Titanium Studio를 통한 개발이 익숙하지 않은 등

의 이유로 다른 에디터를 사용한다면 Titanium Developer를 사용해서 개발을 진행할 수

있습니다.


[그림 3-11] Aptana Studio 실행 화면

Titanium Developer는 에디터 기능을 제외한 프로젝트 생성, 관리, 에뮬레이터 실행, 애플

리케이션 빌드 등의 작업을 할 수 있습니다. Titanium Developer의 설치 방법 및 사용법에

대해 간략히 설명하겠습니다.

Titanium Developer 내려받기 및 설치

appcelerator.com에서 더는 Developer 버전을 배포하지 않으나 https://github.com/

adrianopaladini/titanium_developer에서 내려받을 수 있습니다. 내려받은 파일을 클릭하

여 [그림 3-12]와 같이 설치합니다.


[그림 3-12] Titanium Developer Installer 실행 화면

Sign Up & Login

설치가 완료되면 앞에서 등록한 appcelerator 계정으로 로그인합니다. Titanium Developer

를 통해 [그림 3-13]과 같이 신규 계정 등록도 가능합니다.

[그림 3-13] Titanium Developer 계정 등록


[그림 3-14] Titanium Developer 로그인

Dashboard & Community

로그인 후 최신 정보가 담긴 Dashboard 화면을 볼 수 있고 회원 간 정보 공유도 가능합니다.

[그림 3-15] Titanium Developer 대시보드


[그림 3-16] Titanium Developer 커뮤니티

New Project & Import Project

[New Project] 아이콘을 클릭해서 프로젝트를 생성하거나 [Import Project] 아이콘을 클릭해

서 기존에 생성된 프로젝트를 불러올 수 있습니다.

또한 [그림 3-18]과 같이 생성된 프로젝트에 대한 설정 정보를 수정할 수도 있습니다.


[그림 3-17] 신규 프로젝트 생성

[그림 3-18] 프로젝트 설정 정보 입력


에뮬레이터 실행

완성된 소스 코드를 실행하기 위해 “Run Emulator” 탭을 클릭한 후 iOS SDK 버전을 선택합

니다. “Launch” 버튼을 실행하면 결과물을 아이폰 시뮬레이터를 통해 확인할 수 있습니다.

[그림 3-19] 소스 컴파일

[그림 3-20] 아이폰 시뮬레이터


Titanium Studio 설치

Titanium Studio는 이클립스 기반의 IDE 툴입니다. 기존 이클립스용 플러그인을 사용할 수

있으며 Xcode 시뮬레이터 실행 및 디바이스 배포, 앱스토어 업로드 등의 일괄 작업이 가능합

니다.

무료 계정인 Community 계정 사용자는 Standard 버전을 내려받아 설치할 수 있으며 SDK

1.7.2 버전부터는 기존 Standard 버전 사용자들에게 제공되지 않던 “디버깅" 기능이 추가로

제공됩니다.

Titanium Studio 내려받기

appcelerator.com에 로그인한 후 Titanium Resources 페이지로 이동해 Downloads 항목

에서 OS X 버전을 내려받습니다.

[그림 3-21] Titanium Resources 페이지


Titanium Studio 복사

내려받은 파일을 실행한 후 [그림 3-22]과 같이 Applications 폴더로 드래그해서 복사합

니다.

[그림 3-22] 응용프로그램 복사 화면

Titanium Studio 실행

설치가 완료된 후 Finder를 통해 설치 항목을 확인합니다.


[그림 3-23] Titanium Studio가 설치된 폴더 화면

Titanium Studio 응용프로그램 파일을 드래그해서 Dock에 가져다 놓으면 프로그램 실행 시 편리

합니다.

[그림 3-24] Titanium Studio가 Dock에 추가된 화면

Tip

Titanium Studio를 클릭해서 실행합니다. [그림 3-25]와 같이 스플래쉬 로고가 보이면서 실

행됩니다.


[그림 3-25] Titanium Studio 스플래쉬 로고 화면

[그림 3-26]과 같이 프로젝트 공간(workspace)을 설정하는 창이 나타납니다. 프로젝트를 저

장할 폴더를 선택하고, 실행할 때마다 공간 설정을 묻는 것이 번거로우면 “Use this as the

default and do not ask again(더 이상 묻지 않음)” 체크 박스를 선택한 후 “OK” 버튼을 클릭

합니다.

[그림 3-26] Workspace 설정

앞에서 등록한 Appcelerator 계정으로 로그인하면 Titanium Studio가 실행됩니다.


[그림 3-27] Titanium Studio 로그인

[그림 3-28] Titanium Studio 실행 화면


Titanium Studio 화면 구성(선택 사항)

Titanium Studio는 화면 색상, 폰트 등을 테마 구성으로 변경할 수 있습니다. 기본 테마는 너

무 어두우므로 이 책에서는 밝은 테마(Aptana Studio 2)로 변경하겠습니다.

상단 메뉴에서 Titanium Studio > Preferences 를 선택한 후 [그림 3-29]와 같이 개인 취향

에 맞는 테마를 선택합니다.

[그림 3-29] Titanium Studio 화면 설정

Titanium SDKs 업데이트

Titanium SDK는 애플의 iOS가 업데이트되거나 퍼블리싱 문제, 심각한 버그 등이 발견되면

가급적 신속하게 업데이트 SDK를 배포합니다. 업데이트 파일이 있으면 Titanium Studio는

자동 설치 메시지를 보여줍니다.

설치가 완료된 후 Titanium Studio를 재실행합니다.


[그림 3-30] Titanium SDK 업데이트 과정

[그림 3-31] Titanium SDK 업데이트 완료

정리

iOS SDK와 티타늄 플랫폼을 이용한 애플리케이션 개발 준비 단계를 살펴봤습니다. 기본적으

로 iOS SDK를 이용하므로 해당 SDK에 대한 이해는 어느 정도 필요하다고 봅니다. 개발할 때

예상치 못한 부분에서 오류가 날 때가 종종 있는데, 이런 경우 iOS SDK에 대한 설정을 살펴볼

필요가 있습니다.

다음 장부터는 본격적으로 Titanium Studio를 이용해 티타늄 플랫폼이 얼마나 막강한 기능을

제공하는지 살펴보겠습니다.

53 04 장 _ Hello World! Titanium Mobile 시작하기

이번 장에서는 티타늄을 사용해 애플의 Xcode(오브젝티브-C)를 이용하지 않고 얼마나 신속

하고 유연하게 애플리케이션을 개발할 수 있는지 “Hello World”를 출력하는 예제를 통해 살

펴보겠습니다.

이번 장을 학습하고 다음의 내용은 반드시 이해하기 바랍니다.

•프로젝트 생성 방법

•프로젝트 요소(폴더, 파일)의 역할

•app.js의 중요성

프로젝트 만들기

프로그램 실행 및 로그인

응용프로그램 > Titanium Studio > TitaniumStudio.app을 실행합니다.

Hello World! Titanium Mobile 시작하기

04


Titanium Studio 설치 과정에서 가입한 아이디/비밀번호를 입력한 후 로그인합니다.

[그림 4-1] Titanium Studio 로그인

Titanium Studio가 실행되고 [그림 4-2]와 같은 화면이 전개됩니다.

[그림 4-2] Titanium Studio


프로젝트 생성

프로젝트를 생성하려면 다음의 두 가지 방법 중 자신에게 맞는 방법을 선택합니다.

➊ Create Project

“App Explorer” 영역에서 Create Project 버튼을 클릭합니다.

[그림 4-3] App Explorer 내의 Create Project를 이용한 프로젝트 생성

File > New 또는 단축키(Command + n)

주 메뉴에서 File > New > Titanium Mobile Project를 클릭하거나 단축키(Command +

n)를 이용합니다.

[그림 4-4] File 메뉴를 이용한 프로젝트 생성


프로젝트 기본 정보 입력

새로운 Titanium Mobile Project 창이 열리면 프로젝트 이름, 생성 위치, SDK 버전 등 기본

정보를 입력합니다. 프로젝트 생성 후 tiapp.xml 파일에서 더 많은 정보를 수정하거나 추가할

수 있습니다.

[그림 4-5] 프로젝트 기본 정보 입력

Project name

“HelloWorld”라고 입력합니다.

프로젝트 이름이면서 앱이 디바이스에 설치될 때 화면에 보이는 이름입니다.

Use default location

프로젝트 폴더가 생성되는 위치를 지정합니다.

“Use default location(디폴트)”에 체크하면 프로젝트가 처음 설치할 때 설정한 “Titanium

Studio Workspace”의 아래에 생성됩니다.


App Id

애플리케이션만의 ID이며 프로젝트명과 같게 작성합니다.

Company/Personal URL

개발사 또는 개발자의 웹 사이트 주소를 입력합니다.

* 애플리케이션 개발 완료 후 앱스토어에 등록하는 과정에서도 URL 입력란이 있으나 사이트가 실

제로 존재하는지 확인하지는 않습니다.

Titanium SDK Version

Titanium Compiler의 컴파일 버전을 설정합니다.

개발 중인 컴퓨터에 설치된 하위 버전 SDK를 선택할 수 있지만 가장 최신 버전의 선택을

권장합니다. 최신 버전에는 Xcode SDK 변경 사항 또는 앱스토어 정책 등의 내용이 반영

돼 있습니다.

* 본 교재는 1.8.x버전을 기준으로 작성했습니다.

Deployment Targets

개발 완료 후 배포할 디바이스(iPhone)를 선택합니다.

모든 정보를 입력했으면 “Finish(완료)” 버튼을 눌러서 프로젝트를 생성합니다.

프로젝트가 생성되면 프로젝트에 대해 상세한 설정을 할 수 있는 TiApp Editor가 자동으로 열

립니다.

프로젝트 상세 정보 입력

TiApp Editor를 이용한 기본정보 설정

프로젝트가 생성되고 자동으로 TiApp Editor가 열리면서 애플리케이션의 설정 파일인 tiapp.

xml에서 애플리케이션의 기본 정보를 설정할 수 있습니다.


[그림 4-6] TiApp Editor 화면

Application Id

프로젝트를 생성할 때 입력한 App ID가 자동으로 로딩되며 수정할 수도 있습니다.

Version

애플리케이션의 버전 정보를 나타내며 새로운 버전을 앱스토어에 새로 등록할 경우에는 반드

시 버전을 변경한 후 컴파일해야 합니다.


Publisher

개발사 또는 개발자를 입력합니다.

Publisher URL

개발사 또는 개발자의 웹 사이트 주소를 입력합니다.

Icon

애플리케이션을 아이폰에 설치했을 때 아이폰에 보이는 아이콘입니다.

아이콘에 대해서는 뒤에 나오는 “iPhone 4's Retina Display”에서 살펴보겠습니다.

Copyright

애플리케이션의 저작권자를 입력합니다.

Description

애플리케이션에 대한 간략한 설명을 입력합니다.

SDK Version

프로젝트를 생성할 때 선택한 SDK Version 정보입니다. 수정할 수 있지만 최신 버전 사용을

권장합니다.

Deployment Targets

애플리케이션을 배포할 디바이스를 선택합니다.

상세정보 설정

TiApp Editor로는 기본적인 정보만 설정할 수 있으며 애플리케이션의 상세정보는 tiapp.xml

파일에서 직접 설정해야 합니다. 상세정보를 설정하는 tiapp.xml에 대해서는 뒤에 나오는 프

로젝트 폴더 설명에서 다루겠습니다.


[그림 4-7] tiapp.xml 설정

프로젝트 실행하기

HelloWorld 프로젝트를 생성하고 설정 정보 입력을 마무리했으면 아이폰 시뮬레이터

(iPhone Simulator)로 실행해 보겠습니다.

파일 메뉴에서 실행

주 메뉴에서 Run > Run As > iPhone Simulator를 클릭합니다.


[그림 4-8] 파일 메뉴를 이용한 프로젝트 실행

단축 버튼으로 실행

실행 버튼( )을 클릭하고 컨텍스트 메뉴에서 “iPhone Simulator”를 클릭합니다.

[그림 4-9] 단축 버튼을 이용한 프로젝트 실행

코드 변환 및 빌드

아이폰 시뮬레이터를 실행하면 콘솔창에 INFO, DEBUG 등 다양한 정보가 출력됩니다.

작성한 소스 코드에 문제가 없으면 티타늄 컴파일러가 소스 코드를 네이티브 코드로 변환해 빌

드 단계까지 진행합니다.


[그림 4-10] 프로젝트 실행 시 나타나는 콘솔 창

아이폰 시뮬레이터 실행

정상적으로 빌드되면 아이폰 시뮬레이터가 실행되면서 작성한 코드가 실행됩니다.

[그림 4-11] 아이폰 시뮬레이터 실행 화면


코드 한 줄 작성하지 않고도 두 개의 탭이 있는 간단한 애플리케이션이 실행되는 것을 조금 이

상하게 생각하는 분도 있을 겁니다. 그 까닭은 Titanium Studio에서 프로젝트를 생성하면 기

본적으로 두 개의 Window가 있는 탭그룹 형태의 애플리케이션이 자동으로 만들어지도록 템

플릿화돼 있기 때문입니다. 그래서 오브젝티브-C와 인터페이스 빌더로 개발을 해 본 사람은

Titanium Studio의 개발 생산성에 박수를 보내리라 생각합니다.

Hello World! 실행하기

프로젝트를 생성하고 아이폰 시뮬레이터로 실행 결과를 확인했습니다. 이제 목표했던 Hello

World!를 출력하는 애플리케이션으로 변경해 보겠습니다.

템플릿 코드 변경

[그림 4-12]와 같이 App Explorer에서 Resources 폴더에 위치한 app.js 파일을 선택한 뒤

코드를 [코드 4-1]과 같이 수정합니다.

[그림 4-12] app.js 소스 코드 작성


[코드 4-1 app.js]

/*

* Titanium.UI 모듈의 createWindow 메서드를 이용해

* Window를 생성합니다.

* 속성은

* 제목(title:'HelloWorld')

* 배경색(backgroundColor:'#fff')

* 으로 값을 설정합니다.

*/

var mainWindow = Titanium.UI.createWindow({

title:'HelloWorld',

backgroundColor:'#fff'

});

/*

* Titanium.UI 모듈의 createLabel 메서드를 이용해

* Label을 생성합니다.

* 속성은

* 색상(color:'#999')

* 텍스트(text:'Hello World!')

* 폰트(font:{fontSize:30,fontFamily:'Helvetica Neue'})

* 정렬(textAlign:'center')

* 가로/세로(width:'auto',height:'auto')

* 로 값을 설정합니다.

*/

var label = Titanium.UI.createLabel({

color:'#999',

text:'Hello World!',

font: {

fontSize:30,

fontFamily:'Helvetica Neue'

},

textAlign:'center',

width:'auto',


height:'auto'

});

// 생성한 Label을 mainWindow에 추가(add)합니다.

mainWindow.add(label);

//mainWindow를 open 메서드를 이용해 화면에 출력합니다.

mainWindow.open();

다음 장에서 배우겠지만 티타늄에서는 기본적으로 하나 이상의 Window를 제공합니다.

Window는 Label, Button, ImageView와 같은 컨트롤(Control)을 담는 컨테이너 역할을 하

며 계층적인 내비게이션 형태와 팝업 형태 등으로 출력할 수 있습니다.

Window 생성

var mainWindow = Titanium.UI.createWindow({

title:'HelloWorld',

backgroundColor:'#fff'

});

이름이 mainWindow인 Window를 생성합니다. 속성으로 내비게이션바의 제목인 title과 배경색인

backgroundColor를 설정했습니다.

참고로 Titanium에서 색상 설정은 16진수 색상표와 색상명을 모두 사용할 수 있습니다.

Label 생성

var label = Titanium.UI.createLabel({

color:'#999',

text:'Hello World!',

font: {

fontSize:30,

fontFamily:'Helvetica Neue'

},


textAlign:'center',

width:'auto',

height:'auto'

});

이름이 label인 Label을 생성합니다. Label은 문자열을 출력하는 UI컨트롤이며 Label에는 다양한

속성이 있습니다.

본 예제에서는 속성으로 색상, 폰트, 정렬, 크기 등을 설정했으며 출력할 문자열은 text 속성에 지정

합니다.

컨테이너

mainWindow.add(label);

앞에서 잠시 설명했듯이 Window는 컨트롤을 담는 컨테이너의 역할을 합니다. 위에서 생성한 label

을 mainWindow에 위치시킵니다.

Window 출력

mainWindow.open();

label을 추가한 mainWindow를 화면에 출력(오픈)합니다.

시뮬레이터 실행 결과

[코드 4-1]과 같이 소스 코드를 수정했으면 아이폰 시뮬레이터를 실행해 결과를 확인합니다.

[그림 4-13]과 같은 결과를 확인할 수 있습니다. 아무런 문제 없이 실행됐다면 label의 color

속성을 16진수가 아닌 색상명으로(color:’red’) 변경한 후 실행해 보기 바랍니다.


[그림 4-13] Hello World! 실행 화면(좌), Label의 색상 변경 후 실행 화면(우)

자! 멋지게 Hello World를 출력하는 프로젝트를 완성했습니다. 소스 코드를 보면 이미 익숙한

자바스크립트와 CSS로 작성돼 있음을 확인할 수 있습니다.

프로젝트 구조 살펴보기

지금까지 프로젝트의 생성, 수정, 실행 방법을 알아봤습니다. 이제 티타늄으로 생성한 프로젝

트의 폴더 및 파일을 하나씩 살펴보면서 각 폴더와 파일의 역할을 자세히 살펴보겠습니다.


Finder에서 폴더 구조 확인하기

App Explorer 영역에서 Resources 폴더를 마우스 오른쪽 버튼으로 클릭한 뒤 나타나는 컨텍

스트 메뉴에서 Show In > Finder 항목을 클릭합니다.

[그림 4-14] Finder에서 Hello World! 프로젝트의 폴더 구조 확인하기

Project Explorer에서 폴더 구조 확인하기

Project Explorer 탭을 선택한 후 Local FileSystem > Documents > Titanium Studio

Workspace에서 Hello World 폴더를 클릭합니다.


[그림 4-15] Project Exploler에서 Hello World! 프로젝트의 폴더 구조 확인

프로젝트 폴더 내용 살펴보기

build

이 폴더에는 티타늄 컴파일러가 소스 코드를 빌드, 컴파일하고 아이폰 시뮬레이터가 실행되는

데 필요한 파일이 존재합니다. 또한 앱스토어에서 최종 개발된 애플리케이션을 배포하는 데 사

용하는 폴더이기도 합니다.

build > iphone 폴더로 이동한 후 HelloWorld.Xcodeproj 파일을 더블 클릭합니다.

티타늄이 생성한 네이티브 코드를 Xcode로 확인해 보면 다음과 같습니다. 자바스크립트로 작

성한 코드가 티타늄 컴파일러에 의해 네이티브 코드로 변환된 것을 확인할 수 있습니다.


[그림 4-16] Hello World! 프로젝트의 HelloWorld.Xcodeproj 파일을 Xcode로 확인

Resources

개발에 필요한 소스 코드와 이미지 등이 위치한 폴더입니다. 애플리케이션의 루트 폴더로 티타

늄이 소스 코드를 컴파일할 때 참조하는 가장 중요한 폴더입니다. 대부분의 개발 작업을 이 폴

더에서 하게 됩니다.

Resources/iphone

애플리케이션의 설치 및 실행에 필요한 아이콘과 애플리케이션의 로딩에 사용되는 스플래쉬

화면 이미지가 저장된 폴더입니다. 티타늄 로고가 들어간 기본 PNG 파일이 들어 있으며 개발

시 다음의 크기로 제작한 이미지로 덮어씌우면 됩니다.

appicon.png 57x57 픽셀 크기의 iPhone3용 애플리케이션 아이콘

[email protected] 114x114 픽셀 크기의 iPhone4 레티나 디스플레이용 애플리케이션 아이콘

Default.png 320x480 픽셀 크기의 iPhone3용 스플래쉬 이미지

[email protected] 640x960 픽셀 크기의 iPhone4 레티나 디스플레이용 스플래쉬 이미지


iPhone3의 디스플레이는 320x480픽셀의 해상도이고 iPhone4의 레티나 디스플레이는 iPhone3의

두 배인 640x960픽셀의 해상도입니다.

따라서 320x480픽셀의 디자인 요소가 iPhone4에서 일그러져 보이거나 콘텐츠의 퀄리티가 현저

하게 낮아 보이는 것은 당연한 현상입니다. 그렇다고 이러한 부분을 소스 코드에서 iPhone의 기

종을 확인해 하나씩 예외를 처리하는 방법은 너무나도 비효율적입니다.

다행스럽게도 iOS에서는 @2x가 포함된 이미지 파일의 이름은 자동으로 640x960 해상도로 인식

합니다. 디자인 요청 시 이 부분을 간과해서는 안 됩니다.

@2x가 뜻하는 의미를 조금 더 살펴보겠습니다.

app.js

Resources 폴더에서 가장 중요한 파일은 app.js입니다. app.js는 오브젝티브-C, C, C# 등의

main() 함수와 같은 역할을 합니다. 즉 애플리케이션의 출발을 알리는 진입점입니다.

Hello World처럼 UI가 복잡하지 않은 애플리케이션은 app.js 파일 하나만으로도 얼마든지

개발할 수 있지만 대부분 애플리케이션은 여러 개의 Window를 가지며 각 Window는 별도

의 js파일로 개발(관리)합니다.

이렇듯 app.js파일은 애플리케이션 코딩의 시작점이면서 애플리케이션 내의 다른 Window로

진입할 수 있는 중요한 역할을 담당하고 있습니다.

api.jsca

[그림 4-17] Titanium Studio의 코드 힌트 기능

Titanium Studio는 더욱 빠르고 효율적인 개발을 위해 코드 힌트 기능을 제공합니다. api.

jsca는 Titanium Studio에게 Titanium API에 대한 정보를 제공하며 코드 힌트 기능을 이용

할 수 있게 만들어줍니다.


tiapp.xml

앞에서 잠시 살펴본 바와 같이 애플리케이션의 설정에 관한 정보를 관리하는 파일입니다.

기본적인 정보는 Tiapp Editor로 수정할 수 있으며 상세 정보는 직접 XML 내용을 수정하면

됩니다. 그럼 각 XML 요소의 의미를 살펴보겠습니다.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<ti:app xmlns:ti="http://ti.appcelerator.org">

<deployment-targets>

<target device="mobileweb">false</target>

<target device="iphone">true</target>

<target device="ipad">false</target>

<target device="android">false</target>

<target device="blackberry">false</target>

</deployment-targets>

<id>HelloWorld</id>

<name>HelloWorld</name>

<version>1.0</version>

<publisher>titaniumapp.co.kr</publisher>

<url>http://titaniumapp.co.kr</url>

<description>HelloWorld Example!</description>

<copyright>titaniumapp.co.kr</copyright>

<icon>appicon.png</icon>

<persistent-wifi>false</persistent-wifi>

<prerendered-icon>false</prerendered-icon>

<statusbar-style>default</statusbar-style>

<statusbar-hidden>false</statusbar-hidden>

<fullscreen>false</fullscreen>

<navbar-hidden>false</navbar-hidden>

<analytics>true</analytics>

<guid/>

<iphone>

<orientations device="iphone">

<orientation>Ti.UI.PORTRAIT</orientation>

</orientations>


<orientations device="ipad">

<orientation>Ti.UI.PORTRAIT</orientation>

<orientation>Ti.UI.UPSIDE_PORTRAIT</orientation>

<orientation>Ti.UI.LANDSCAPE_LEFT</orientation>

<orientation>Ti.UI.LANDSCAPE_RIGHT</orientation>

</orientations>

</iphone>

<android xmlns:android="http://schemas.android.com/apk/res/android">

</android>

<modules>

</modules>

</ti:app>

배포할 디바이스의 종류를 설정합니다.

애플리케이션의 버전을 설정합니다.

기본값은 false이며 인터넷 연결(wifi/3G)이 꼭 필요한 애플리케이션은 true로 설정합니다. true로

설정하고 실행했을 때 인터넷에 연결돼 있지 않을 경우 [그림 4-18]과 같이 “설정/승인” 경고창을

띄울 수 있습니다.

[그림 4-18] persistent-wifi를 true로 설정했을 때의 화면

준비된 아이콘이 매끄러운 표면 효과가 처리돼 있는지 설정합니다.

기본값은 false며 자동으로 아이콘 표면에 매끄러운 표면 효과가 생성됩니다.

즉 표면효과를 처리한 아이콘은 설정을 true로 지정해야 합니다. 그렇지 않으면 원하는 아이콘 모

양을 얻을 수 없습니다.


상단에 있는 상태바의 스타일을 설정합니다.

gray, opaque_black, translucent_black으로 설정할 수 있으며 이 설정은 소스 코드에서도 제어


상태바를 보여줄지 설정합니다. 이 설정도 소스 코드에서 제어할 수 있습니다.

애플리케이션 실행 시 전체 화면으로 실행할 것인지 설정합니다.

애플리케이션의 회전에 대한 설정으로 다음 4가지 값으로 설정할 수 있습니다.

•Ti.UI.PORTRAIT : 기본값이며 홈 버튼이 하단에 위치

•Ti.UI.UPSIDE_PORTRAIT : 디바이스가 뒤집어진 상태를 말하며 홈 버튼이 상단에 위치

•Ti.UI.LANDSCAPE_LEFT : 홈 버튼이 좌측에 위치

•Ti.UI.LANDSCAPE_RIGHT : 홈 버튼이 우측에 위치

기본값은 Ti.UI.PORTRAIT이며 LANDSCAPE_LEFT와 LANDSCAPE_RIGHT는 홈버튼의 위치를

생각하면 쉽게 이해할 수 있습니다. 설정 값 이외에 실행 중에도 Ti.Gesture API 모듈을 이용해 쉽

게 회전시킬 수 있습니다.

[그림 4-19]는 속성값을 Ti.UI.UPSIDE_PORTRAIT로 변경한 후 실행한 결과입니다.

[그림 4-19] Device orientations 설정 화면

티타늄은 기본으로 제 공하는 API Module 외에 별도의 모듈을 사용할 수도 있습니다. Appcelerator

사이트에서 제공하는 상용 모듈도 있으며 오픈 소스로 공개된 모듈도 있습니다. 모듈 개발은 Xcode(

오브젝티브-C)로 이뤄집니다.


정리

이번 장에서는 모든 프로그래밍 입문서의 첫 관문이라고 할 수 있는 “Hello World!”를 출

력하는 프로젝트를 통해 가장 기초적이지만 꼭 이해하고 넘어가야 프로젝트의 생성, 실행,

구조를 다뤘습니다.

다음 장에서는 티타늄이 제공하는 UI 모듈과 이벤트 처리 방법 등을 알아보고 후반부에는 데이

터베이스, 다국어 지원, 구글맵, 미디어 등 다양한 기능을 살펴보겠습니다.