PhoneGap + jQuery Mobile 모바일앱 개발하기 (2) – PhoneGap iOS 개발 환경 설정

안드로이드용 PhoneGap 개발환경 설정에 이어 이번에는 iOS(iPhone/iPad/iPod Touch)를 위해 xCode 개발환경을 설정해보자.

iOS 개발 환경 설정은 설정에 필요한 실행 파일을 제공하기 때문에 안드로이드 설정에 비하면 백만배정도 쉽다. 역시 PhoneGap 홈페이지의 iOS(Xcode 4)용 개발 환경 설정 페이지를 참고하기 바란다. 내 PC에 Xcode 4가 설치되어 있는 관계로 그 이전 버전에 대해서는 iOS 개발 환경 설정 페이지를 참고하기 바란다.

iOS용 개발 환경 설정

Xcode에 개발 환경을 설정하기 위한 요구 사항은 다음과 같다.

1. iOS  개발환경 필수 요구 사항

  • Mac OS X Snow Leopard (10.6) 이상 –  Intel CPU
  • iOS 디바이스 (iPhone, iPad 또는 iPod Touch)
  • iOS 개발자 계정

2. Xcode 설치

  • Apple developer center의 iOS Dev Center에서 Xcode를 다운받아 설치한다
  • Xcode를 다운받기 위해서는 개발자 프로그램에 가입해야하고 디바이스에서 실행하기 위해서는 유료 가입이 필요하다.

3. PhoneGap 설치

  • PhoneGap  홈페이지에서 다운받은 phonegap 파일의 압축을 푼 후 iOS 폴더에 있는 PhoneGap-1.0.0.dmg 파일을 더블 클릭하여 실행한다.

  •  위 화면과 같이  나오면 PhoneGap-1.0.0.pkg를 더블클릭하여 실행한다.
  • 설치 과정이 끝날때 까지 진행한다.
대쯔잇!! 설정 다 끝났다. 안드로이드에 비하면 이건 뭐 그냥 너무 거저 먹기다. 왜 안드로이드용 개발 환경 설정은 이렇게 안만들어주냐 이거다…
이제 또 helloworld  앱을 만들어 보자.

4. PhoneGap용 프로젝트 만들기

  • Xcode를 실행한다.
  • File > New > New Project… 를 선택하다.

  • 위와 같이 Choose a template for your new project: 화면에서 PhoneGap-based Application을 선택한다.
  • 위와 같이 Choose options for your new project:에서 새로 만들 프로젝트의 이름을 Product Name에 입력한다.
  • Company identifier도 입력한다.  (이 설명을 읽고 com.truemobile 이라고 쓰지 마시길.. 이건 마치 동사무소에서 이름란에 “홍길동”이라고 베껴 쓰는거랑 똑같은 거다.)
  • Next를 눌러 저장할 폴더를 지정하면 해당 폴더 아래에 Product Name에 입력한 이름과 동일한 폴더가 생기고 그 밑에 관련 파일들이 생성된다.
  • 프로젝트 생성이 완료되면 다음과 같이 프로젝트 화면이 나온다.
  • 이제 좌측 상단에 있는 Run 버튼을 눌러 바로 실행시켜보자.
  • 시뮬레이터가 실행되면서 다음과 같은 화면이 나올 것이다.
  • 아직 index.html 파일을 만들지 않았다는 얘기다.
  • www 폴더를 프로젝트에 복사해야 하는데 위에서 나온 프로젝트 정보 화면의 왼쪽 창에서 프로젝트명 (예: helloworld) 에 마우스를 위치시키고 오른쪽 버튼을 클릭하여 “show in finder”를 선택한다.
  • Finder 화면이 뜨면 바로 www  폴더가 있는 것을 볼 수 있을 것이다.
  • (중요!!!) 이 www 폴더를 콕 집어서 Xcode  프로젝트 정보 화면의 프로젝트 이름 부분 (예: 위의 화면에서 helloworld 1 target, iOS SDK 5 라고 표시된 부분)에 떨군다.
  •  다음과 같은 화면이 나올 것이다.
  • 여기서 “Create folder references for any added folders”를 반드시 체크한 후 Finish를 눌러 완료한다.
  • 이제 www 폴더가 프로젝트 정보 화면에 나타난다.
  • 이 상태에서 바로 Run을 실행해 보라. 다음과 같은 화면이 나오면 성공한 것이다.
  • 앗.. 실행해 보니 helloworld가 아니다. 미안하다. 그래도 PhoneGap이 잘 돌고 있다고 한다.
이제 여러분이 원하는 것들은 index.html로부터 수정하고 만들면 된다. helloworld는 직접 찍어보시라.
실제 iOS 디바이스에 이 실행 파일을 올리고 실행하기 위해서는 앞서 말한 바와 같이 유료 개발자 계정 가입과 Build 옵션 설정등이 필요하다. 가입 절차와 설정 절차가 꽤 까다로운 편이지만 앱스토어에 앱을 올릴 생각이라면 꼭 가입하고 설정해야 하는 과정이니 다른 정보들을 참고하기 바란다.
Advertisements

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중