달력

3

« 2024/3 »

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31




아이팟 터치 & 아이폰 개발 with 툴체인 2 아이폰 개발


툴체인 설치를 위해 고생한 분들과 마찬가지로 많은 삽질을 했더랬습니다.

http://date4u.tistory.com/tag/Toolchain 에서 많은 참고를 했었지만 ,

중간에 몇군데 막히는 부분이 있더군요.

따라서 그부분을 추가해서 다시한번 툴체인 설치에 관한 글을 써 볼까 합니다.

(설치한지 며칠 지나서 쓰려니 벌써 기억이 안나기 시작하네요 -_ㅜ)

 

## 혹시 잘 안되는 부분이나 글에 오류가 있으면 덧글 부탁드립니다.

## 며칠전에 했던거라 잘못 쓴 부분이 있을 수도 있기 때문입니다.

 

 

 툴체인 설치과정

 

1. 맥OS X 용 SDK 다운로드

2. 아이폰/아이팟터치용 root filesystem 다운로드

3. 아이폰용 크로스컴파일러가 설치된 cygwin 다운로드 및 설치

4. cygwin에 필요한 파일들 복사 및 설치

5. Hello, world 테스트

6. 이클립스 및 이클립스 CDT 설치 및 연동

7. 이클립스에서 컴파일 하기

 

 

 

 

 

맥OS X용 SDK 다운로드

Xcode 2.5 이미지를 다운로드 합니다.

로그인 후 다운로드가 가능한데, 어짜피 가입해두시는 편이 좋을듯 합니다.

다운받은 이미지는 dmg파일인데, PowerISO라는 프로그램을 통해 가상시디롬으로 만들어서 열어야 합니다.

 

나중에 cygwin을 설치하고 나서 필요한 파일들을 복사하도록 합니다.

 

 

 

아이폰/아이팟터치용 root filesystem 다운로드

아이폰이나 아이팟 터치에서 직접 다운로드 할 수도 있으나, 잘 안된다고 하더군요.

저도 직접 인터넷에서 다운로드 해서 설치했습니다. 일단 1.4용 firmware를 다운로드 합니다.

 

다운로드 후 확장자를 zip으로 변경해 주고 압축파일을 연 다음, 022-3894-4.dmg 파일을 압축해제 합니다.

 

이 글에 첨부된 

 

파일을 다운받아서, 

022-3894-4.dmg 파일과 같은 경로에 넣어준 후,

압축을 풀고 vfdecrypte.exe 파일 및 dll 파일 2개가 생성된것을 확인합니다.

 

cmd 명령으로 쉘을 쉴행시켜서 위 경로로 갑니다. 명령창에,

vfdecrypt.exe -i 022-3894-4.dmg -o trasyia114.dmg -k d0a0c0977bd4b6350b256d6650ec9eca419b6f961f593e74b7e5b93e010b698ca6cca1fe

라고 입력 해서 이미지를 디코딩 하면 trasyia114.dmg 파일이 생깁니다.

이 파일을 나중에 cygwin 설치 후 PowerISO로 열어서 필요한 파일을 꺼내올 겁니다.

 


 

 

 

 

아이폰용 크로스컴파일러가 설치된 cygwin 다운로드 및 설치

Cygwin setup 파일을 다운로드 받아서 실행합니다.

 

아래 그림과 같이 User URL을 http://www.iphonegameover.com/cygwin 으로 입력하고 Add버튼을 눌르면 소스리스트에 위 사이트가 추가되면서 크로스 컴파일러가 설치된 cygwin 패키지가 다운로드 될 준비가 됩니다.

 


 
























 

준비가 되면 아래 그림과 같은 화면이 나오는데, default로 설치 합니다.

(가끔 이화면이 안나오고 에러가 발생하면서 setup.exe가 종료되기도 하는데 이럴때는 다른 pc에서 파일을 로컬에 다운로드하고 복사해 와서 설치해도 됩니다.)

 


 

 

 

 

 

 

cygwin에 필요한 파일들 복사 및 설치

cygwin 설치후 최초로 실행하기 전에, Xcode를 설치 합니다.

위에서 받은 Xcode이미지를 PowerISO로 열어서 아래 경로의 Archive.pax.gz파일을 찾습니다

\Packages\Packages\MacOSX10.4.Universal.Pkg\Contents\Archive.pax.gz

이 파일을 cygwin설치 디렉토리의 home/username/ 아래에 복사해 넣습니다

(c:에 설치하셨다면, c:/cygwin/home/username/ 이 되겠습니다)

 

그리고 위에서 디코딩한 root filesystem 역시 PowerISO로 열어서

/user/local/arm-apple-darwin/filesystem/ 아래에 복사해 넣습니다.

 


 

 

이제 cygwin을 실행해 보면, 자동으로 Archive.pax.gz파일을 찾았다고 나오고 설치가 진행됩니다.

설치가 완료되면 Your tool chain installation is now complete! 라는 메시지가 나오고 설치가 완료됩니다.

 

 

 

 

 

Hello, world 테스트

 이제 Hello, world를 컴파일 해 볼 시간입니다.

이 글에 첨부된 


을 다운받아 압축을 풀고 cygwin에 helloWorld.app라는 디렉토리를 만든뒤 복사해 넣습니다.

컴파일은 make 명령으로 간단히 진행됩니다.

 


 

컴파일 되었으면 실행을 해 볼 차례입니다.

제 경우는 터치밖에 가지고 있지 않으므로, Touch Explorer로 터치의 /Applications 디렉토리에 넣고 실행해 보았습니다 (Jail-break 된 터치라야 업로드가 될겁니다). Auto-permition(권한을 자동으로 설정해주는 어플, 터치 Jail-break 후에 따로 설치해야 함)으로 권한 설정을 해주시면 섬머보드가 재 실행되면서 터치 화면에 추가된 hello, world를 보실 수 있습니다. 실행하면 아래와 같은 화면이 나옵니다.

 

 


 

 

 

 

 

이클립스 및 이클립스 CDT 설치 및 연동

이제 이클립스를 설치하기 위한 준비단계 입니다.

 

먼저 윈도우의 환경변수에서 path를 수정해 줘야 합니다.

cygwin에서 env | grep PATH 명령으로 path를 확인해 보면 아래와 같은데,

/usr/local/bin:/usr/bin:/bin:/usr/X11R6/bin: 라는 부분만 복사를 해서

윈도우의 환경변수중 Path에 추가해 줍니다.

 

당연히 경로는 c:\cygwin 아래 일 것이므로

c:\cygwin\usr\local\bin;c:\cygwin\usr\bin;c:\cygwin\bin;c:\cygwin\usr\X11R6\bin

의 형태로 추가를 해주시면 됩니다.

 

include경로 추가도 해줘야 하므로

윈도우의 환경변수에 include라는 변수이름을 추가하고 변수값에는

c:\cygwin\usr\local\arm-apple-darwin\include

를 추가해 줍니다.

 

이제 이클립스 for C, C++를 다운로드 합니다.

그리고 이클립스 CDT도 다운로드 합니다.

 

먼저 이클립스를 설치 한 후, 실행 합니다.

아래 그림처럼 Help > Software updates > Find and install 을 실행합니다

 


 

 

 

여기서 Search for new features to install을 선택하고

New Archived Site... 로 들어가서 아까 다운로드한 CDT zip파일을 선택한 후 설치합니다.

 


 

 

 

이제 자잘한 설정이 남았습니다.

 

이클립스를 닫은뒤 재실행 하시고, Window > Preference... 로 가셔서

C/C++ > NewCDT project wizard > Makefile Project 로 가셔서

아래 그림처럼 Elf Parser, Cygwin PE Parser, GNU ELF Parser 를 체크해 줍니다.

(만약 New CDT project wizard 항목이 없다면 CDT설치가 잘못된것입니다.)

 

그리고 Error Parsers 탭에서 모두 선택합니다.

 


 

 


 

 

 

자 이제 준비가 거의 끝났습니다.

다른 포스트에서 본 경우에는 이후 정상적으로 컴파일이 되었다고 하는데, 제 경우엔 잘 되지 않아서 이리저리 고민하다 알아낸 것이 추가적인 이클립스 내의 경로 설정입니다.

(혹시 컴파일 할때 Exec error: Launching failed 라는 메시지가 뜨신다면 이 방법으로 해결이 될겁니다)

 

Window > Preference... 로 가셔서 C, C++ > Environment로 갑니다.

New를 선택하고 Name에 PATH를 Value 에 윈도우의 환경변수 Path와 같은 내용을 써 줍니다.

 


 

 

 

 

 

 

이클립스에서 컴파일 하기

File > New... > C project 로 가서 새 프로젝트를 생성합니다.

모두 default로 합니다.

 


 

 

 

아까 cygwin에서 썼던 hello, World 소스를 import 합니다.

프로젝트 이름 우클릭 > import

 


 

 

 

General에서 file system을 고른후 hellow, Wolrd 파일들을 압축 풀어둔 디렉토리를 선택하면

아래처럼 파일들을 골라서 import할 수 있습니다.

 


 


 

 

이제 컴파일을 해 봅니다.

 

Project > Clean... 으로 컴파일을 하시면 아래와 같이 나와야 정상적으로 컴파일이 된 것입니다.

수고하셨습니다.

 


 

 

 

길고긴 포스팅이 드디어 끝이났네요.

다음 포스팅이 언제가 될지는 저도 모릅니다. 배워가면서 하는입장이라서요 ^^.

그럼 즐거운 개발들 되시기 바랍니다.

:
Posted by 라면스프


 아이팟 터치 & 아이폰 개발 with 툴체인 아이폰 개발

 아이팟 어플리케이션 개발을 시작하며

 

국내에 아이폰(iPhone)이 들어온다는 소식도 간간히 들려오고, 국내의 아이팟 터치(iPod Touch) 사용자도 늘어나면서 아이팟에 대한 관심이 어느때 보다 높은것 같다. 실제로 아이팟 터치를 해킹(락을 푸는 정도)해서 사용해 보면 그 무한한 가능성에 놀라움을 금치 못하게 된다. 본인도 아이팟 터치를 이리저리 가지고 놀던중 아이팟 터치용 어플리케이션을 만들어보는것이 재미있겠다는 생각이 들던 차에, 이번에 도전을 해보게 되었다. 그러나 이것은 결코 순탄치 않은 길이었다. 그간 겪을 일들을 앞으로 이 카테고리로 정리해 볼까 한다. 언제 귀차니즘으로 관둘지 모르지만 ^^

 

 

 

 

 

 

 가장 기본적으로 알아야 할것들

 

본 글은 기본적인 개발을 해보았고 한두가지 언어를 다룰 줄 알지만, 아이폰이나 맥OS(MacOS)에 대해 전혀 지식이 없다고 가정을 하고 쓰여질 것이다 (왜냐하면 본인이 그렇기 때문이다).  따라서 기본적으로 아이폰 어플리케이션 개발을 위해 알아야 할 지식들도 함께 소개를 할까 한다. 개발자가 아닌 분들도 애플 관련 지식을 쌓는데 도움이 되실 것이고, 개발자 분들도 코딩이 아닌 전반전 지식을 쌓는데 도움이 되셨으면 하는 바이다 (거창하게 말하지만 본인도 잘 모른다;).

 

아이폰용 어플리케이션을 개발 할 수 있는 방법 2가지

(1) 맥 에서 편하게 개발

(2) 툴체인을 통해 크로스컴파일

 

맥을 가지신 분들(정말 부럽다) 이라면 애플에서 공개한 펌웨어(firmware) 2.0 용의 SDK를 이용해 아주 좋은 개발환경을 구성할 수 있다. 그래피컬한 개발환경이나 편리한 템플릿(template)들을 제외 하더라도, 아이폰 에뮬레이터가 제공되어 개발중에 결과를 쉽게 확인할 수 있다는 점은 너무나도 매력적이다. 다만, SDK에서 개발한 아이폰 어플리케이션을 배포하기 위해서는 라이센스를 구입해야 한다는 점(10만원 정도였던걸로 기억한다) 때문에 개발자들의 원성을 사고 있다. 그렇다 하더라도 맥에서 개발한 코드를 크로스컴파일로러 컴파일 해주는 방법을 이용해도 될듯 하기 때문에, 맥을 가지고 개발한다는건 여전히 부러운 방법이다.

 

이 글은 기본적으로 툴체인을 구성하고 개발하는것에 목표를 두고 있고, 사실 툴체인을 통한 개발환경을 구성만 하면(그게 제일 문제지만), 그 후로는 맥에서 개발하는것과 큰 차이는 없으므로 (라고 스스로를 위로하자) 툴체인을 통해 개발해 배포할 수 있는 방법을 소개할 것이다.

 

툴체인이 뭐야?

툴체인(toolchain)은 간단히 말하면 서러운 셋방살이라고 할 수 있다. 위키피디아를 뒤져보면 다 나오는 얘기지만, 다른 플랫폼의 소프트웨어 개발을 위해서 사용되는 개발도구의 집합을 말한다. 이게 왜 셋방살이인가 하면, 컴파일러도 타겟 플랫폼에 맞는걸 써야하고, 라이브러리도 타겟 플랫폼의 것을 사용해야 하고, 컴파일 후에도 타겟 플랫폼에 실행파일을 업로드 해서 테스트를 해야하는 등등 번거로운 것들이 늘 함께 하기 때문이다.

 

그럼 툴체인을 어떻게 구성하는데?

툴체인을 구성하는 방법은 무궁무진 하지만, 기본적으로 크로스 컴파일러(Cross compiler)와 라이브러리들은 필수 요소이다. 아이폰용 개발 툴체인을 구성하는것도 여러 방법이 있지만 쉽게 생각해 볼 수 있는 방법은 리눅스(Linux)에서 개발하여 아이폰으로 테스트 하는방법과, 윈도우에서 이클립스(Eclipse)로 개발하여 Cygwin으로 컴파일 한뒤, 아이폰으로 테스트를 하는 방법등이 있다. 여기서는 이클립스를 이용하여 윈도우 환경에서 개발하는 방법을 추천한다. 즉 코딩(Eclipse)-컴파일(Cygwin gcc-arm cross complier)-테스트(아이팟터치) 의 순서가 될 것이다.

 

Cygwin 과 Cross Compiler

설마 이걸 모를까 싶지만, 의외로 모르는 분들도 많을것이다. Cygwin은 리눅스용 프로그램들을 윈도우용으로 포팅한 것이다. 따라서 Cygwin에서 ls명령을 쳤을때 실행되는건 리눅스에서 실행되는게 아니라 여전히 윈도우 커맨드라인에서 ls명령을 사용하는것과 다를바가 없는 것이다. 하지만 Cygwin은 상당히 잘 만들어 져 있기 때문에 웬만한 리눅스 사용환경을 잘 지원하고 있다.

 

크로스컴파일러는 어플리케이션을 컴파일 해서 머신코드를 생성 할 때, 타겟 머신에서 사용하는 코드를 생성할때 사용한다. 이말이 무슨 뜻인고 하니, 컴파일을 해서 CPU가 이해할 수 있는 어셈코드와 바이트코드(기계어)를 생성 할 때, 내 PC의 Intel CPU가 사용하는 언어로 번역을 하는것이 아니라, 타겟 머신인 아이팟의 ARM CPU가 사용하는 언어로 번역을 한다는 것이다. 따라서 이렇게 크로스컴파일 된 코드는 내 PC에서는 동작하지 않고 아이팟에서 동작 하는 것이다.

 

점심시간이 다가오므로 글을 여기서 마치고, 다음 포스트에서 툴체인 설치법과 이클립스와의 연동법을 써 보고자 한다.



다음글보기http://starplaying.tistory.com/114



:
Posted by 라면스프

출처 : http://cocoadev.co.kr/


iPhone 어플리케이션은 Xcode란 개발툴에서 코코아터치 프레임워크와 Objective-C 언어를 사용하여 개발합니다. 코코아 터치는 맥 OS X의 핵심 프레임워크인 코코아를 기본으로 아이폰/터치라는 모바일 기기의 특성에 맞추어진 iPhone 개발의 기본 API입니다.

그렇기 때문에 아이폰 어플리케이션 개발을 위해 기본적으로 알아야할 사항은 통합개발 환경인 Xcode와 인터페이스 빌더라는 툴의 사용법, Cocoa Touch 프레임워크, Objective-C 크게 세가지입니다. 이번에는 간단히 iPhone OS의 계층구조를 중심으로 iPhone 어플리케이션 제작을 위해 접근하는 방법에 대해서 알아 보겠습니다.

1. iPhone OS 계층 구조
아래의 그림은 애플에서 설명하는 아이폰 OS의 기술 계층입니다. 이에 대한 자세한 내용은 아이폰 개발자 센터iPhone OS Technology Overview란 문서에 잘 정리되어 있습니다.


가장 로우레벨의 Core OS부터 가장 상위단계인 코코아 터치까지의 계층구조입니다. 주로 하단은 API가 C로 제공되며 상위로 올라 오면서 Objective-C로 제공됩니다. 많이 사용되는 로우레벨의 API들은 상위단계에서 쉽고 편하게 사용할 수 있는 프레임워크로 제공됩니다. 간 계층의 간단한 설명은 아래와 같습니다.

1) Core OS
메모리/프로세서 관리, 파일 시스템, 네트워크, 각종 하드웨어 드라이버등, 운영체제 하단의 커널 레벨에서 제공하는 커널 API 입니다. 흔히 이야기하는 시스템 프로그래밍에 관련된 C를 기반으로 한 라이브러리를 제공합니다.

2) Core Services
Core Foundation, CFNetwork, SQLite, POSIX threads와 같은 파일입출력, 저수준 데이터 타입, 소켓등에 관련된 서비스입니다. Core OS 레벨에 비교적 쉽게 접근할 수 있는 API를 제공합며 대부분 C로된 프레임워크를 제공됩니다. 여기서 제공하는 많은 기능들은 상단 코코아터치의 Foundation Framework에서 Objective-C 프레임워크로 제공됩니다.

  • Core Foundation - 배열, 스트링, 날짜, URL, 로우레벨 데이터등 아이폰 어플리케이션을 위한 기본적인 C API를 제공합니다.
  • CFNetwork - BSD 소켓 및 HTTP, FTP 프로토콜등 네트워크에 쉽게 접근할 수 있는 API를 제공하는 프레임워크입니다.
  • Core Location - GPS, 주변검색등에 사용할 수 있는 사용자의 현재 위치(위도, 경도) 정보와 관련된 API를 제공하는 프레임워크입니다.
  • SQLite - 아이폰 어플리케이션에서 쉽게 사용할 수 있는 파일기반의 경량 데이터베이스 입니다. SQLite에 관련된 보다 자세한 내용은 이전 포스팅을 참조해 주세요.
  • XML - XML 파싱을 위한 libXML2 라이브러리를 제공합니다.

이외에 보안, 주소록등에 관련된 서비스를 제공합니다.

3) Media
비디오, 오디오, 2D/3D 그래픽, 에니메이션을 구현할 수 있는 API를 제공합니다. Objective-C 또는 C로된 API를 제공합니다.

  • Quartz - OS X의 벡터를 기반으로 한 그래픽 엔진입니다. 선과 도형을 그리고 이미지, 비트맵, PDF를 출력하고 색상, 위치에 관련된 C로된 API를 Core Graphic 프레임워크를 통해 제공합니다.
  • Core Animation - 각종 에니메이션과 시각효과를 제공하는 Objective-C로된 프레임워크입니다.
  • OpenGL ES - 게임등과 같은 고성능의 2D/3D 그래픽 출력을 위한 OpenGL ES 1.1에 기반한 C 프레임워크입니다. OpenGL ES를 사용한 게임은 이를 지원하는 다양한 모바일 플랫폼에서의 포팅을 쉽게 할 수 있습니다. 자세한 내용은 공식 홈페이지를 참조하시기 바랍니다.
  • Core Audio - 마이크를 통해 녹음하고 음악파일을 출력하고 각종 음향효과를 제공하는 C로된 오디오 관련 프레임워크입니다.
  • OpenAL - OpenGL ES와 유사한 개념의 크로스 플랫폼을 지원하는 게임등을 위한 고성능 3D 오디오 라이브러리입니다. 자세한 내용은 공식 홈페이지를 참조 하시기 바랍니다.
  • 동영상 - mov, mp4, 3gp와 같은 각종 동영상 파일을 출력을 지원합니다. 이는 Objective-C를 기반으로 한 Media Player framework를 이용하여 손쉽게 접근할 수 있습니다.

4) Cocoa Touch
iPhone개발의 기본이 되는 계층으로 Objective-C를 기반으로 한 핵심적인 두개의 프레임워크를 가지고 있습니다. 사용자 인터페이스, 이벤트 처리등과 함께 위에서 언급한 로우레벨의 기술들을 보다 쉽게 사용할 수 있는 프레임워크를 제공합니다.

  • Foundation Framework - 배열, 스트링, 날짜 로우레벨 데이터등에 관련된 클래스를 제공하는 기본적인 프레임워크입니다. 위의 Core Foundation에서 제공하는 기본 API들의 Objective-C 레퍼 클래스를 제공합니다.
  • UIKit Framework -각종 컨트롤, 윈도우등의 UI, 이벤트 처리등 iPhone 어플리케이션의 사용자 인터페이스와 관련된 API를 제공하는 프레임워크입니다.


2. Mac or iPhone
Mac의 Cocoa와 iPhone의 Cocoa touch는 이름에서 부터 알 수 있듯이 매우 비슷합니다. 가장 큰 차이점은 역시 인터페이스에 관련된 부분으로 이와 관련하여 Mac에서는 AppKit이란 프레임워크를 iPhone에서는 UIKit이란 프레임워크를 제공합니다.

Foundation Framework는 거의 유사하지만 아이폰의 특성상 제거 또는 변경된 부분이 있습니다. 아이폰은 코코아 바인딩, Objective-C 2.0의 가비지 컬렉션, 애플스크립트, NSUndoManage등은 지원하지 않습니다.

개인적으론 시간이 충분하다면 맥에서 코코아 프로그래밍으로 시작한 후에 코코아 터치로 넘어가도 큰 어려움은 없을 것 같습니다.


3. C or Objective-C
대표적인 코코아 프로그래밍 서적인 Cocoa Programming for MAC OS X (번역본:코코아 프로그래밍)의 저자 아론 힐리가스는 그의 저서에서 아래와 같이 이야기 했습니다.

"C와 Java/C++같은 객체지향 언어를 알고 있다면 두시간이면 Objective-C를 마스터할 수 있다"

OOP와 프로그래밍 언어에 대한 개념만 있다면 Objective-C를 익히는 것은 쉽다라는 의미인 것 같습니다.

사실 어느 언어나 기본지식만 있으면 언어 자체를 익히는데는 그다지 어려움이 없습니다. 하지만 해당 플랫폼에 대한 지식과 핵심 라이브러리나 프레임워크를 배우는데 더욱 많은 시간을 소비해야 합니다. 아이폰도 Xcode, 인터페이스빌더의 사용법, OS X에서의 프로그래밍에대한 이해와 코코아 API를 배우는데 Objective-C 언어 자체를 배우는 것보다 더 많은 시간이 필요합니다.

1) C의 선행학습이 필요한가?
개발경험이 있으신 분들은 그동안의 경험을 바탕으로 어떻게 공부해야 할지 나름대로 방법이 있을 것입니다. 하지만 처음 시작하시는 분들은 Objective-C가 C를 기반으로 하고 있기 때문에, 반드시 C를 공부한 후에 Objective-C를 공부해야하는 지에 대해 질문을 하시는 분들이 있습니다.

이 부분은 아마 많은 분들이 차이가 있을 것 같습니다. 제 생각은 "반드시 필요하지는 않다" 입니다. Objective-C는 C에서 확장된 슈퍼셋이라고 하지만 Objective-C를 공부하기 위해 반드시 C를 먼저 공부해야 할 필요는 없을 것 같습니다.

C를 이해한 후에 Objective-C를 시작하는 것이 이론상으로도 맞고, 정상적인 방법일 것입니다. 하지만 대부분의 Objective-C 서적이나 메뉴얼에는 기본적인 문법에 대한 설명이 있고, 전문 C 서적보다는 범위가 작습니다. Objective-C를 사용할 수 있을 만큼 최소한의 문법만 알고 시작하는 것이 더 접근이 쉬울 것 같습니다.

아래는 iPhone 어플케이션의 샘플 소스중에 한부분입니다. 기존에 C/C++ 개발자들도 이런 Objective-C의 문법을 처음 보게되면, 이것이 C와 관련이 있고 C에서 확장되었다는 사실이 잘 이해가 가지 않을 것입니다.
 

처음 시작하시는 분이라면 차라리 이런 혼란을 피하고 코코아 어플리케이션을 바로 제작할 수 있는 Objective-C로 시작하는 것도 한 방법이라고 생각됩니다.

2) 접근방법
사실 가장 좋은 것은 아래와 같이 가장 로우레벨단계 부터 이해하고 올라 가는 것이 기초도 탄탄하고 가장 좋은 방법일 것입니다.

  1. 메모리/CPU등 컴퓨터 하드웨어에 대한 이해
  2. OS에 대한 이해
  3. 컴파일러에 대한 이해
  4. C언어
  5. 시스템 프로그래밍
  6. 자료구조/알고리즘
  7. Objective-C
  8. OOP, 디자인 패턴
  9. Cocoa API

위의 단계대로 차례로 지식과 실력을 쌓아서 접근하면 좋겠지만, 당장 아이폰 어플리케이션을 만들고 싶은데 지루하고 많은 시간을 필요로 합니다. 흥미를 잃지 않고 접근하는 방법은 위의 순서와 반대로 접근하는 것입니다.

Objective-C에 대한 메뉴얼을 대충(?) 한번 읽어 보고 바로 책, 웹사이트, 동영상등의 간단한 튜토리얼등을 따라해 보면서 실제 실행되는 모습을 보면 계속 흥미를 유지할 수 있습니다.

그후에 어느정도 감이 생기면 직접 만들고 싶은 어플리케이션을 목표로 잡습니다. 첫 목표는 과한 욕심은 버리고 간단하고 쉬운 어플리케이션 부터 시작합니다. 아무리 간단해도 따라해 보며 만들었던 것과는 달리 원하는 기능을 직접 구현하는 것은 매우 어렵습니다. 자료도 많이 찾아 보아야되고, 다른 샘플 소스에서 복사해 와야 하는 경우도 있고, 관련 커뮤니티를 통해 도움을 받을 수도 있습니다. 관련자료들은 이전의 iPhone 어플리케이션 개발을 위한 준비 - 3. 관련 자료 포스팅을 참고하시기 바랍니다.

우여곡절끝에 만들어 내면 부족한면이나 필요한 부분이 무엇인지 조금씩 보이게 될 것 입니다. 필요에 의해 공부를 하다보면 아마 위의 순서를 거슬러 올라 접근하게 되는 경우가 많을 것 같습니다. 그러면 차차 복잡하고 어려운 어플리케이션을 만들 수 있을 것입니다.

막상 처음 시작하게 되면 알아야 할 것은 많고 답답한 마음만 드실 것입니다. 하지만 안타깝게도 왕도는 없습니다. 흥미와 열정을 유지하면서 차근차근 해 나가다 보면 어느새 바라는 어플리케이션을 만들수 있는 날이 눈앞에 와있을 것 입니다.

간혹 주위에 개발경험이 전혀 없는 분들로 부터 "무엇부터 시작해야 아이폰 어플리케이션을 만들 수 있냐?"는 질문을 들으면서 이와 관련해서 간단히 포스팅을 해보아야 겠다고 생각했습니다.

정리는 해보았는데 역시 어렵네요. 제가 봐도 이상한 용어들만 난무하고 설명도 중구난방이고, 개발을 처음 하시는 분들이 보면 잘 이해가 안가실 것 같다는 생각이 듭니다.

* 관련링크
iPhone 어플리케이션 개발을 위한 준비 - 1. 하드웨어
iPhone 어플리케이션 개발을 위한 준비 - 2. 소프트웨어
iPhone 어플리케이션 개발을 위한 준비 - 3. 관련 자료
iPhone 어플리케이션 개발을 위한 준비 - 4. 시작하기
저작자 표시 비영리 변경 금지

실버라이트는 그동안은 런타임조차 설치를 안했을 정도로 관심이 없었고, 그저 플랙스 비슷한 것이 있나 보다 하고 생각하고 있었습니다.

그러다가 갑자기 호기심이 생겨 이제서야 실버라이트 개발환경을 만들어 보고 잠깐 살펴보았습니다. 실버라이트2는 MS에서 나온 RIA(Rich Internet Application)로, 자세한 설명은 MSDN의 실버라이트 한글문서에 잘 나와 있습니다.

* 참조 사이트
아래의 사이트들에서 개발에 필요한 메뉴얼과 샘플을 얻을 수 있습니다.

  • Silverlight Lean - 실버라이트 공식홈페이지로 다양한 문서들과 동영상 강좌, 튜토리얼등이 있습니다.  
  • MSDN Silverlight - MSDN의 실버라이트 색션입니다. 원하는 항목을 쉽게 찾을 수 있고, 항목별로 간단한 샘플등을 확인할 수 있씁니다.

관련 사이트외에도 CHM버젼의 SDK 도움말도 다운로드 받아 사용하실 수 있습니다.


1. 개발환경 설치
설치는 실버라이트의 공식 홈페이지에서 Get Started 문서를 참조하였습니다. 해당 페이지에는 아래와 같이 관련링크와 함께 간단한 설명이 되어 있어 쉽게 설치를 할 수 있습니다. 



1) Silverlight Tools for Visual Studio 2008 SP1
실버라이트 툴즈를 설치하기 위해서는 먼저 Visual Studio 2008 SP1과 Visual Web Developer Express with SP1가 설치되어 있어야 합니다. 이 패키지는 SDK와 개발 런타임, Visual Studio에 관련 기능과 C#/Visual Basic에서 사용할 수 있는 템플릿들을 설치합니다.

저는 일단 권장하는데로 모두 설치를 하였지만 막상 사용을 해보니, 이 패키지 하나만 설치를 하면 기본적인 실버라이트의 개발은 가능할 것 같습니다.

2) Microsft Expression Blend 2 + SP1
60일 트라이얼 버젼을 설치하여 잠시 실행해 보았습니다. UI를 디자인하고 타임라인등의 용어가 있는 것으로 보아 애니메이션을 제작하는 툴 같습니다. 아마 어도비의 플래쉬와 비슷한 개념의 툴인 것 같습니다.


3) Deep Zoom Composer
이미지 관련툴인 것 같은데 사용해보지는 않았습니다.

4) Silverlight Toolkit
실버라이트 어플리케이션에서 사용할 수 있는 콘트롤, 컴퍼넌트, 유틸리티등이 있다고 하는데 역시 사용해 보지는 않았습니다.

2. 테스트 드라이브
1) 동영상 플레이어
동영상을 플레이, 일시중지, 중지를 할 수 있는 간단한 어플리케이션을 만들어 보았습니다. 이런 개발툴에서는 기본기능의 동영상 플레이어는 간단하게 만들어 볼 수 있기 때문입니다.


2) 프로젝트 생성
VS의 New Project에서 프로젝트 템플릿을 아래와 같이 C# / Silverlight / Siverlight Application으로 선택합니다.
 

그런데 프로젝트를 생성하지 못하고 오류가 발생하였습니다. 검색을하여 보니 관련 내용이 있어  아래와 같이 명령 프롬프트에서 실행하고 해결하였습니다.

C:\Program Files\Microsoft Visual Studio 9.0\Common7\IDE\devenv.com /resetskippkgs  

3) 소스코드 수정
레이아웃을 지정하는 xaml과 동작을 실행하는 C# 소스파일에 아래와 같이 내용을 추가합니다.

* Page.xaml
<UserControl x:Class="SilverlightMovieTest.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="330">
    <Canvas x:Name="LayoutRoot" Background="White">
<MediaElement AutoPlay="False" x:Name="mediaPlayer"
Source="[동영상 URL]"
Width="400" Height="300"></MediaElement>

<Button x:Name="btnPlay" Canvas.Top="310" Content="Play"
Width="60" Height="20"/>

<Button x:Name="btnStop" Canvas.Top="310" Canvas.Left="64"
Content="Stop" Width="60" Height="20"/>

</Canvas
</UserControl>
[동영상 URL] 부분에 해당 동영상의 URL을 입력합니다.

* Page.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightMovieTest
{
    public partial class Page : UserControl
    {
        bool isPlay = false;

        public Page()
        {
            InitializeComponent();

            /* 버튼 이벤트 핸들러 설정 */
            btnPlay.Click += new RoutedEventHandler(PlayButtonClicked);
            btnStop.Click += new RoutedEventHandler(StopButtonClicked);
           
            btnStop.IsEnabled = false;
        }

        /** Play 버튼 클릭 시 */
        void PlayButtonClicked(object sender, RoutedEventArgs e)
        {
            if (isPlay == false)
            {
                mediaPlayer.Play();

                btnPlay.Content = "Pause";
                btnStop.IsEnabled = true;
                isPlay = true;
            }
            else
            {
                mediaPlayer.Pause();

                btnPlay.Content = "Play";
                btnStop.IsEnabled = false;
                isPlay = false;
            }
        }

        /** Stop 버튼 클릭 시 */
        void StopButtonClicked(object sender, RoutedEventArgs e)
        {
            if (mediaPlayer.CurrentState == MediaElementState.Playing)
            {
                mediaPlayer.Stop();
                               
                btnPlay.Content = "Play";
                btnStop.IsEnabled = false;
                isPlay = false;
            }
        }
    }
}


실행을 해보면 아래와 같이 인터넷 익스플로어에서 구동되는 모습을 확인할 수 있습니다.



3. 배포
빌드를 하면 프로젝트명.xap 파일이 생성됩니다. 확장자명을 보면 IIS에서만 실행될 것 같은 느낌이 들지만, 플래쉬의 swf와 같이 로컬의 런타임에서 실행되기 때문에 웹서버와는 상관이 없습니다.

웹사이트에서 실버라이트를 실행하기 위해서는 아래와 같이 HTML을 작성합니다. 자세한 내용은 MSN의 Add Silverlight to Web Page by Using HTML 문서에 잘 나와있습니다. 

<object width="400" height="300" data="data:application/x-silverlight-2," type="application/x-silverlight-2">
    <param name="source" value="./SilverlightMovieTest.xap"/>
 
    <!-- Display installation image. -->
    <a href="http://go.microsoft.com/fwlink/?LinkID=124807"
        style="text-decoration: none;">
        <img src="http://go.microsoft.com/fwlink/?LinkId=108181"
            alt="Get Microsoft Silverlight"
            style="border-style: none"/>
    </a>
</object>  

<!-- Display installation image. --> 아래 있는 HTML은 실버라이트 런타임이 설치되지 않았을 경우에는 우측과 같은 이미지와 링크를 제공합니다.


사실 간단히 맛만 봐서 '실버라이트2 맛보기'란 제목으로 넣고 싶었는데, 맛보기란 제목이 들어가면 제 의도와는 다른 검색어로 들어 오는 분들이 많으셔서 그냥 둘러 보기로 했습니다.

그동안 몇몇 다른 개발툴들에 대해서 '맛보기' 형식으로 쓴 적이 있는데, MS의 개발툴에 관련된 내용은 처음으로 올리는 것 같습니다. 아무래도 블로그 제목대로 맥을 기반으로한 프로그래밍에 관해 다루어야 한다는 생각이 있었던 것 같은데, 이제부터 관심있는 부분은 가리지 않고 올려 볼려고 합니다.

저작자 표시 비영리 변경 금지

'개발 툴' 카테고리의 다른 글

실버라이트2 둘러보기  (10) 2008/12/16
프로젝트 관리 도구 OpenProj  (2) 2008/03/21
적당히 참견하는 Xcode  (4) 2008/02/25
OS X의 파이썬  (0) 2008/02/20
Java 교육용 프로그램 Greenfoot  (0) 2007/12/23
Xcode에서 Flex - Hello World 작성  (0) 2007/12/12

Xcode를 사용하면서 도움말을 잘 이용하시면 많은 궁금증과 의문점을 쉽게 해소할 수 있습니다. 모르는 것에 대해서 도움말 보다는 구글에서의 검색과 관련 커뮤니티에 질문을 올리는 것은 쉽고 편한 방법일 수는 있어도 장기적으로는 바람직하지  않습니다. 먼저 도움말을 찾아 보고 그래도 답을 찾을 수 없을 때에 비로소 후자의 방법을 택해야 합니다.

다소 늦고 귀찮은 것 같더라도 도움말을 이용하면 원칙에 가까운 답을 얻어 낼 수 있고, 검색하거나 다른 중요한 사항들도 알아낼 수 있습니다. 도움말은 영문으로 되어 있지만 대부분 코드와 간단한 문장이기 때문에 저같이 영어를 잘 몰라도 대부분 쉽게 이해할 수 있습니다.
 
Xcode를 처음 사용하시거나 프로그래밍을 처음 하시는 분들을 위해서 간단하게 도움말을 이용하는 방법을 알아 보겠습니다.

1. Documentation
Xcode의 Help메뉴에서 Document를 클릭하거나 단축키(Shift+Command+Option+?)를 입력하면 아래와 같이 도큐먼트 창이 오픈됩니다.


1) 도움말 다운로드
Xcode의 도움말은 해당항목들을 다운로드 받으신 후에 사용할 수 있습니다. 원하시는 도움말 항목에서 SUBSCRIBE나 GET 버튼을 클릭하여 로컬로 다운로드 받아야 해당 도움말이 활성화 되고 사용할 수 있습니다.

2) 검색어


검색을 위해서는 우측 상단의 Starts With에 검색할 키워드를 입력합니다. 검색어는 &(AND), !(NOT), |(OR) 연산을 지원합니다.

(string | value)  & !format
위와 같은 입력은 string 또는 value를 포함하고 format을 포함하지 않는 항목을 검색합니다.

4) 검색 대상


  • API - 심볼명(클래스, 메소드등)에서 검색합니다.
  • Title - 문서의 제목에서 검색합니다.
  • Full-Text - 문서의 전체 내용에서 검색합니다.

5) 문서 범위


All Doc Sets는 전체문서에서 검색을 하며 우측에는 DOC SETS에서 현재 검색 범위를 표시합니다.

6) 언어 선택


All Languages는 전체 언어(Objective-C, C/C++, Java, Javascript)에서 검색을 합니다. 우측에는 현재 선택된 언어들이 표시되어 있습니다.

전체언어 다음에 선택될 언어들은 위의 API Options 버튼을 클릭하여 선택할 수 있습니다.


7) 검색 조건


검색창에 입력한 문장이 검색될 조건을 지정합니다.

  • Starts With - 입력된 검색어로 부터 시작되는 항목을 출력합니다.
  • Contains - 입력된 검색어가 포함된 항목을 출력합니다.
  • Exact - 입력된 검색어가 일치된 경우만 출력합니다.

2. Research Assistant
Xcode의 Help메뉴에서 Show Research Assistant를 클릭하거나 단축키(Shift+Control+Command+?)를 입력하면 아래와 같이 Research Assistant가 오픈됩니다.


Research Assistant가 오픈되어 있으면 Xcode의 에디터에서 커서가 위치한 곳에 해당항목에 대한 도움말이 있으면 자동으로 위와 같이 간단한 도움말과 관련 API, 문서, 샘플등을 표시해주는 아주 유용한 툴입니다. 듀얼 모니터를 사용하시는 분들은 Xcode 사용시 다른 모니터에 뛰워 놓으시면 편리하게 확인하실 수 있습니다.

3. 기타
1) 도움말 바로가기 (Option + 마우스 더블클릭)
Xcode의 에디터에서 옵션키를 누른 상태에서 레퍼런스 내용을 확인할 단어에다 마우스로 더블클릭을 하면 해당내용이 도큐멘테이션에서 바로 출력이 됩니다.

2) 선언 보기 (Command + 마우스 더블클릭)
Xcode의 에디터에서 커멘드키를 누른 상태에서 변수나 메소드등의 심볼을 클릭하면 해당 변수/메소드가 선언(또는 구현)된 소스파일로 이동합니다.

이외에 Xcode와 도움말에 대한 자세한 내용은 ADCXcode Workspace Guide 문서를 참조하시기 바랍니다.

:
Posted by 라면스프
2008. 12. 24. 01:07

아이팟터치 어플 참고 사이트 Enjoy/사과2008. 12. 24. 01:07


아이팟터치 어플 참고 사이트

http://ipodandtouch.blogspot.com/search/label/Jailbreak
아이팟 터치 무료 어플 게시판 부터 여러가지 볼거리 공부거리가 많은 사이트입니다.


아이프리 정보가 있는 곳입니다.


부랴부랴 회사에서 링크만 걸어두고 이제야 글을 쓰네요
위 사이트 구경하면서 많은 공부 하고 있습니다. 
감사합니다.
:
Posted by 라면스프

출처 : http://www.ibm.com/developerworks/kr/library/os-eclipse-iphone/index.html


이클립스를 사용해 아이폰 웹 애플리케이션 개발하기 (한글)

Aptana의 아이폰 개발 플러그인과 iUi 프레임워크를 사용해 아이폰 웹 애플리케이션 만들기

 

 

 

 




난이도 : 중급

Adam Houghton, 선임 소프트웨어 개발자, SAS Institute, Inc.

2008 년 3 월 04 일

이클립스, Aptana의 플러그인 그리고 iUi 프레임워크를 사용해 아이폰 웹 사이트를 만드는 방법을 배웁니다. 아이폰에서 사용할 수 있는 Javadoc 뷰어 개발 과정을 통해 사용자 인터페이스 디자인를 위한 팁을 살펴보고 아이폰 개발의 미래에 들어보겠습니다.

애플(Apple)의 아이폰(iPhone) 플랫폼은 개발자들에게 흥미로운 기회를 제공하고 있다. 소형 데스크톱과 터치스크린으로 아이폰과 아이팟 터치(iPod Touch)는 짧은 기간에 100만 명이 넘는 사용자들을 가지게 되었다. 하지만 이런 고품격 디자인과 사유화된(proprietary) 플랫폼은 애플리케이션 개발자들에게 새로운 종류의 도전을 만들어 내고 있다. 애플이 소프트웨어 개발 키트(SDK)를 배포할 때까지는, 아이폰 플랫폼을 목표로 하는 개발자들은 아이폰의 룩앤필(look and feel)을 따르는 웹 애플리케이션을 만들어야만 한다.

운이 좋게도 그 일을 쉽게 할 수 있는 새로운 오픈 소스 도구들을 사용할 수 있다. Aptana의 이클립스용 아이폰 개발 플러그인은 아이폰에 특화된 프로젝트를 생성하고 회전시켜 볼 수 있는 미리 보기 화면을 제공한다. Joe Hewitt의 iUi는 CSS와 자바스크립트 프레임워크인데 아이폰 스타일의 위젯과 페이지를 가지고 있다.

본 기사에서는, Apatana와 iUi를 사용해 새로운 애플리케이션을 만들 것이다. 바로 아이폰에서 사용할 수 있는 간단한 자바독(Javadoc) 뷰어다. 먼저 아이폰에서 자바독을 브라우징할 수 있는 사용자 인터페이스(UI)를 만들겠다. 그런 다음 소스 코드에서 자바독 페이지를 만들어 내는 커스텀 doclet을 만든다. 그 뒤를 이어 아이폰을 목표로 했을 때 생기는 UI 문제를 살펴보고 이 오픈 소스 도구들을 사용해 개발과 디버깅을 간단하게 할 수 있는지, 그리고 앞으로의 아이폰 개발 방향에 대해 설명하겠다.

도구 빠르게 살펴보기

Aptana를 설치하고 iUi를 다운로드하는 것부터 시작한다.

  1. 이클립스 V3.2에서 다음을 선택한다. Help > Software Updates > Find and Install.
  2. Search for new features to install을 선택한다. 이 창에서는 여러분이 다운로드한 플러그인과 이클립스가 미리 정의해둔 플러그인 사이트의 목록을 보여준다.
  3. New Remote Site를 클릭해 Aptana를 추가하고 URL을 다음과 같이 설정한다. http://update.aptana.com/update/3.2/.
  4. 목록에서 새로 추가한 Aptana를 선택하고 Next를 클릭해 이용할 수 있는 모든 기능을 선택한다. 창을 닫고 기본 Aptana 편집기로 돌아온다.
  5. 이클립스를 재시작한다.
  6. Window > Open Perspective > Other를 선택하고 Aptana를 창에서 클릭한다. 툴바에 새로운 아이콘이 나타날 것이다.
  7. Home 아이콘을 클릭한다. Aptana 기능에 대한 소개 페이지가 보일 것이다.
  8. Apple iPhone Development에서 Download and Install을 선택한다.
  9. 기능들을 설치하고, 창을 닫고 아이폰에 특화된 기능들을 Aptana에 설정한다.
  10. 이클립스를 다시 시작한다.
  11. 최신 버전의 iUi를 다운로드한다(참고자료 참조).

모든 준비가 끝났다면, 이클립스를 사용해 그림 1에 보이는 것처럼 iDoc이라는 새로운 아이폰 프로젝트를 생성한다.


그림 1. 새로운 아이폰 프로젝트 만들기
새 아이폰 프로젝트 만들기

그림 2는 간단한 아이폰 애플리케이션을 담고 있는 프로젝트를 보여준다.


그림 2. 이클립스에 생성된 아이폰 프로젝트
이클립스에 생성된 아이폰 프로젝트

HTML, CSS, 그리고 자바스크립트를 지원하는 Aptana의 기본 편집기가 제공하는 문법 하이라이팅을 확인할 수 있다.

아이폰 미리보기 모드와 애플리케이션 서버

텍스트 편집기 아래 부분에 Source, iPhone Preview, 그리고 시스템에 설치된 각종 브라우저(예를 들어 Safari Preview, Firefox Preview) 탭들을 볼 수 있다. iPhone Preview를 클릭하여 아이폰에서 보이는 샘플 애플리케이션을 보자. 폰을 돌리려면 브라우저의 바깥을 클릭하고, 네비게이션 막대를 숨기려면 폰 제목을 클릭하라. 가로로 보는 아이폰 미리보기 모드는 아래와 같다.


그림 3. 아이폰 미리보기 모드에서 가로 보기
아이폰 미리보기 모드에서 가로 보기

아이폰 미리보기 모드는 시간을 매우 많이 절약할 수 있게 하는 장치다. 새로운 디자인 아이디어를 빠르게 테스트할 수 있고 컴퓨터에서 벗어나지 않고도 점진적으로 개발할 수 있다. 애플리케이션을 실제 아이폰에서 테스트해야 할 때가 오면, Aptana에 내장된 애플리케이션 서버가 매우 유용할 것이다. 이클립스 툴바에 있는 Run 아이콘을 클릭하여 서버를 실행한다. 그림 4는 이클립스에서 동작하는 애플리케이션 서버를 보여준다.


그림 4. Aptana의 아이폰 애플리케이션 서버가 페이지를 호스트하고 그 URL을 가지고 있는 email을 생성한다.
Aptana의 아이폰 애플리케이션 서버가 페이지를 호스트하고 그 URL을 가지고 있는 email을 생성한다.

만약 아이폰이 와이파이(WiFi) 연결을 통해 로컬 네트워크에 연결되어 있다면, 서버 창에 보이는 URL에 접속할 수 있다. E-mail this url을 클릭하여 한 단계를 생략하고 여러분 아이폰에 있는 이메일 계정으로 메시지를 보낼 수 있다. 이메일에 있는 링크를 탭(화면을 툭 치는 것)하면, 아이폰의 웹 브라우저에서 애플리케이션을 실행한다.

iUi 데모: 극장 목록 웹 애플리케이션

Aptana의 기본 애플리케이션이 아이폰에 특화된 HTML과 CSS를 포함하고 있더라도 그 기능은 매우 제한적이다. 좀 더 나은 대안책은 iUi 프레임워크다. iUi는 다양한 아이폰 인터페이스 스타일의 커스텀 위젯과 자바스크립트 효과를 가지고 있다.

다운로드한 iUi 파일 iui-0.13.tar의 압축을 풀고, 파일을 이클립스에 있는 iDoc 프로젝트로 복사한다. 그림 5는 iUi를 가지고 있는 프로젝트를 보여준다.


그림 5. iUi 프레임워크와 예제 프로젝트가 들어 있는 iDoc 프로젝트
iUi 프레임워크와 예제 프로젝트가 들어 있는 iDoc 프로젝트

iUi를 사용한 데모 웹 애플리케이션은 위에서 펼쳐진 샘플 폴더에서 찾을 수 있다. 음악 브라우저, 극장 목록 그리고 Digg와 비슷한 사이트를 포함하고 있다. Aptana의 아이폰 미리보기 모드를 사용해 이클립스에서 그것들을 확인할 수 있다. 그림 6은 극장 목록 웹 애플리케이션(samples/theaters/index.html)의 검색 페이지를 보여준다.


그림 6. iUi의 예제 극장 목록 웹 애플리케이션
iUi의 예제 극장 목록 웹 애플리케이션

진짜 아이폰의 룩앤필과 얼마나 비슷한지 보기 바란다. 이렇게 미리 만들어둔 위젯은 아이폰 웹 애플리케이션을 빠르게 개발할 수 있도록 해준다.




위로


UI 디자인하기

이번 예제에서는 iDoc이라는 자바독 뷰어를 만들 것이다. 썬(Sun Microsystems)의 표준 자바독 생성기에 의해 만들어진 방대한 양의 HTML 문서들을 데스크톱에서는 잘 볼 수 있다. 하지만 아이폰에서 읽고 네비게이션하기에는 불편하다. iDoc은 아이폰에 적합한 자바독을 생성한다. — 지하철이나 짝 프로그래밍 팀에서 관찰자가 도움을 줄 수 있도록 하기에 완벽한 브라우징 애플리케이션 프로그램 인터페이스(API)를 제공할 것이다.

아이폰 휴먼 인터페이스 가이드라인

iDoc에 필요한 UI를 디자인하기 전에 아이폰 개발과 일반적인 웹 애플리케이션의 다른 점을 이해하는 것이 중요하다. 애플의 iPhone Dev Center(참고자료 참조)에서 인용한 그림 7을 보면 이를 매우 멋지게 요약했다. 손가락은 마우스가 아니다. 데스크톱에서 볼 수 있는 픽셀 선택을 없애고 그 대신 탭(툭 치는 것), 플릭(화면을 가볍고 빠르게 휙 스치는 모션) 그리고 핀치(두 손가락으로 화면을 꼬집는 듯한 모션)와 같은 풍부한 사용자 상호작용 모델을 사용했다. 게다가 아이폰은 사용자가 들고 다니면서 시급한 상황에서 자주 쓰기 때문에 애플리케이션에서 원하는 정보를 빠르고 쉽게 제공할 필요가 있다.


그림 7. 손가락은 마우스가 아니다.
손가락은 마우스가 아니다.

애플의 iPhone Human Interface Guidelines(참고자료 참조)는 아이폰 웹 컨텐츠의 세 가지 타입을 정의하고 있다.

아이폰에 있는 사파리(Safari)와 호환
비록 페이지의 일부분이 어도비 플래시(Adobe Flash)나 Java™ 애플릿처럼 지원되지 않는 플러그인에 의존하더라도 정확하게 보여줄 수 있는 모든 타입의 웹 페이지
아이폰에 있는 사파리에 최적화
아이폰에 맞게 내용의 크기를 조정했으며, 지원되지 않는 플러그인에 의존하지 않는 웹 페이지
아이폰 애플리케이션
웹 페이지가 아이폰의 룩앤필을 따르는 애플리케이션처럼 보이고, 가능하다면 전화, 이메일, 구글맵과 같은 아이폰의 서비스와 연동된다.

표준 자바독 페이지는 첫 번째 범주에 해당된다. 아이폰에 있는 사파리와 호환되는 형태다. 정확하게 보이긴 하지만 관련된 정보를 찾으려면 핀칭과 플릭을 매우 잘 해야 한다. iDoc은 완전한 아이폰 애플리케이션을 목표로 하고 있다. 비록 다른 서비스와 연동할 일은 없지만 iDoc의 인터페이스는 마치 아이폰 애플리케이션처럼 느껴질 것이다.

iDoc UI

아이폰을 목표로 할 때는 포커스를 유지하는 것이 중요하다. 애플리케이션은 특정 작업을 빠르게 수행해야 한다. 모든 가용한 기능을 포함시키려고 하면 안 된다. iDoc에서 사용자들은 클래스 이름, 메서드 이름, 메서드 시그너처 그리고 주석 등과 같은 자바 클래스에 대한 기본 정보를 찾아내야 한다. 이런 정보를 목적지인 구체적인 페이지로 안내하는 세 개로 나눈 네비게이션을 통해 제공할 것이다.

패키지 네비게이션
최상위 패키지
클래스 네비게이션
패키지 안에 있는 클래스, 인터페이스, 예외와 에러
자세한 클래스 네비게이션
클래스 안에 있는 설명, 필드, 상수, 그리고 메서드
세부 페이지
주석, 시그너처 그리고 매개변수

iDoc을 산만하지 않고 태스크에 집중된 상태로 유지하기 위해 기존의 자바독 기능을 몇 가지 제거했다. 예를 들어 패지키 설명 주석은 보여주지 않는다. 이것들은 대개 정보가 유익하지 않거나(예를 들어 acme.client에는 클라이언트 코드가 들어 있다.) 보통 존재하지 않으므로 그것들을 iDoc에서 빼고 인터페이스를 간단하게 만드는 것이 더 나은 선택이다.

세 부분으로 나눈 네비게이션을 위해 edge-to-edge 리스트를 사용한다. 이것은 전형적인 아이폰 애플리케이션에 익숙한 구조로 연락처, 이메일 그리고 음악을 브라우징할 때 사용된다. Edge-to-edge 리스트는 아이템을 44픽셀 높이의 같은 크기로 보여준다. 그리고 많은 양의 정보를 스크롤할 때 유용하다. 애플의 iPhone Human Interface Guidelines는 글꼴, 글자 크기 그리고 경계선 공간 수치를 제공한다. iUi 프레임워크는 CSS와 자바스크립트 언어로 이러한 수치에 맞게 구현해두었다. 따라서 아이폰 컴포넌트처럼 보이는 HTML 목록을 간단하게 만들 수 있다.

Listing 1은 페이지 헤더와 java.applet과 java.rmi 패키지의 첫 번째 2단계 네비게이션을 보여준다.


Listing 1. 페이지 헤더와 첫 번째 2단계 네비게이션 HTML 문서
                
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>iDoc</title>
<meta name="viewport" content="width=320; initial-scale=1.0;
   maximum-scale=1.0;
   user-scalable=0;"/>
<style type="text/css" media="screen">@import
   "iui/iui.css";</style>
<style type="text/css" media="screen">@import
   "iDoc.css";</style>
<script type="application/x-javascript"
   src="iui/iui.js"></script>
</head>

<body onclick="console.log('Hello', event.target);">
   <div class="toolbar">
     <h1 id="pageTitle"></h1>
     <a id="backButton" class="button"
        href="#"></a>
   </div>
  <ul id="home" title="Packages" selected="true">
      <li><a href="#java.applet">java.applet</a></li>
      <!-- more packages...-->
      <li><a href="#java.rmi">java.rmi</a></li>
  </ul>
  <ul id="java.applet" title="java.applet">
      <li class="group">Interfaces</li>
      <li><a href="java.applet.AppletContext.html">
         AppletContext</a></li>
      <li><a href="java.applet.AppletStub.html">
         AppletStub</a></li>
      <li><a href="java.applet.AudioClip.html">
         AudioClip</a></li>
      <li class="group">Classes</li>
      <li><a href="java.applet.Applet.html">Applet
         </a></li>
      <li><a href="java.applet.Applet.AccessibleApplet.html">
         AccessibleApplet</a></li>
  </ul>
  <ul id="java.rmi" title="java.rmi">
      <li class="group">Interfaces</li>
      <li><a href="java.rmi.Remote.html">
         Remote</a></li>
      <li class="group">Classes</li>
      <li><a href="java.rmi.MarshalledObject.html">
         MarshalledObject</a></li>
      <li><a href="java.rmi.Naming.html">
         Naming</a></li>
      <li><a href="java.rmi.RMISecurityManager.html">
         RMISecurityManager</a></li>
      <li class="group">Exceptions</li>
      <li><a href="java.rmi.AccessException.html">
         AccessException</a></li>
      <li><a href="java.rmi.AlreadyBoundException.html">
         AlreadyBoundException</a></li>
      <li><a href="java.rmi.ConnectException.html">
         ConnectException</a></li>
      <li><a href="java.rmi.ConnectIOException.html">
         ConnectIOException</a></li>
      <li><a href="java.rmi.MarshalException.html">
         MarshalException</a></li>
      <li><a href="java.rmi.NoSuchObjectException.html">
         NoSuchObjectException</a></li>
      <li><a href="java.rmi.NotBoundException.html">
         NotBoundException</a></li>
      <li><a href="java.rmi.RemoteException.html">
         RemoteException</a></li>
      <li><a href="java.rmi.RMISecurityException.html">
         RMISecurityException</a></li>
      <li><a href="java.rmi.ServerError.html">
         ServerError</a></li>
      <li><a href="java.rmi.ServerException.html">
         ServerException</a></li>
      <li><a href="java.rmi.ServerRuntimeException.html">
         ServerRuntimeException</a></li>
      <li><a href="java.rmi.StubNotFoundException.html">
         StubNotFoundException</a></li>
      <li><a href="java.rmi.UnexpectedException.html">
         UnexpectedException</a></li>
      <li><a href="java.rmi.UnknownHostException.html">
         UnknownHostException</a></li>
      <li><a href="java.rmi.UnmarshalException.html">
         UnmarshalException</a></li>
  </ul>
				

그림 8은 edge-to-edge 리스트를 사용하여 패키지를 선택할 수 있는 최상위 레벨 네비게이션을 보여준다.


그림 8. 진짜 아이폰 애플리케이션처럼 자바독 패지키 네비게이션하기
진짜 아이폰 애플리케이션처럼 자바독 패지키 네비게이션하기

그림 9는 아이폰 미리보기 모드로 java.rmi 패지키의 결과를 보여준다.


그림 9. Java.rmi 패키지에 있는 인터페이스, 클래스, 예외 네비게이션하기
Java.rmi 패키지에 있는 인터페이스, 클래스, 예외 네비게이션하기

iDoc의 세부 페이지에서는 아이폰의 또 다른 구조를 사용한다. 바로 둥근 사각형 리스트다. 이 리스트는 정보를 그룹핑할 때 유용한데 아이폰의 설정 창에서 볼 수 있다. 둥근 사각형 리스트를 사용해 메서드 시그너처와 매개변수 목록 그리고 예외를 구분할 것이다. V0.13에서 iUi는 둥근 사각형 리스트를 오직 폼 입력 용도로만 사용하도록 지원하고 있다. 따라서 정적인 텍스트를 출력할 때 이들 엘리먼트를 그냥 사용하면 틀에 맞지 않은 블록을 만들어 낸다. 그것들의 CSS를 확장하여 (Listing 2에 보이는) iDoc.css 파일을 만들고 정적인 텍스트를 둥근 사각형 리스트로 보여줄 textRow 엘리먼트를 추가한다.


Listing 2. 정적인 텍스트를 정확하게 보여주기 위한 커스텀 textRow CSS 확장
                
/* Adding a new row CSS style to iUi for displaying blocks of text */
.textRow  {
    position: relative;
    border-bottom: 1px solid #999999;
    -webkit-border-radius: 0;
    text-align: right;
}

.textRow > p {
    text-align: left;
    margin: 5px 8px 5px 10px;
    padding: 0px 0px 0px 0px;
}


fieldset > .textRow:last-child {
    border-bottom: none !important;
}
				

Listing 3은 java.math.BigDecimal의 생성자 중 하나를 보여준다.


Listing 3. textRow 엘리먼트를 사용한 세부 페이지 HTML
                
<div id="java.math.BigDecimal(long,java.math.MathContext)" title="BigDecimal"
        class="panel">
    <fieldset>
        <div class="textRow"><p><b>
           public BigDecimal(long, MathContext)</b></p></div>
        <div class="textRow"><p>Translates a
           <code>long</code> into a
        <code>BigDecimal</code>, with rounding according to the context settings.
        The scale of the <code>BigDecimal</code>, before any rounding, is zero.
      </p></div>
    </fieldset>
    <h2>Parameters</h2>
    <fieldset>
        <div class="textRow"><p><b>long val
           </b>: <code>long</code> value to be converted
         to <code>BigDecimal</code>.</p></div>
        <div class="textRow"><p><b>MathContext mc
           </b>: the context to use.</p></div>
    </fieldset>
    <h2>Throws</h2>
    <fieldset>
        <div class="textRow"><p><b>ArithmeticException
           </b>: if the result is inexact but
    the rounding mode is <code>UNNECESSARY</code>.</p></div>
    </fieldset>
</div>
				

<fieldset> 태그에 있는 모든 것들이 textRow <div>를 사용해 둥근 사각형 안으로 들어갔다. <h2> 헤드 태그는 목록 위에서 그룹 제목을 보여준다. 그림 10은 결과 페이지를 보여준다.


그림 10. java.math.BigDecimal의 생성자 자세히 보기 화면
java.math.BigDecimal의 생성자 자세히 보기 화면

3단계 네비게이션과 세부 페이지 UI를 모두 끝냈다. iDoc은 사용자들이 특정 작업에 집중할 수 있게 해준다. iUi 프레임워크의 도움과 약간의 커스텀 CSS를 사용해 마치 진짜 아이폰 애플리케이션처럼 보이게 만들었다.




위로


iDoc 개발하기

자, UI 디자인을 만들었고 이제 HTML 파일을 생성하는 코드를 만들어야 한다. 썬의 javadoc 명령어를 끼워 넣은 간단한 Doclet를 만들어보자. 이 예제는 자바 표준 java.* 패키지를 사용하지만 iDoc은 어떤 소스 코드로부터든지 자바독을 생성할 수 있다. OpenJDK(참고자료 참조)라, 공개적으로 사용 가능하며 GPL V2 라이선스를 사용하는 소스 코드를 사용해 자바독을 만들고 배포할 수 있다.

iDoc은 간단하게 패키지와 클래스를 순회하며 위에서 만든 형식대로 정적인 HTML 페이지를 출력하기 위한 메서드를 호출한다. Listing 4는 최종 세부 페이지를 출력하기 위한 메서드다.


Listing 4. 세부 페이지를 출력하기 위한 Doclet 코드
                
private void printDetail(PrintStream p, ProgramElementDoc doc,
    String id, String name) {
    divHeader(p, id, name, "panel");
    textHeader(p, null);
    textRow(p, getSignature(doc));
    textRow(p, getCommentText(doc.commentText()));
    textFooter(p);
    if (doc instanceof ExecutableMemberDoc) {
        printMethodDetail(p, (ExecutableMemberDoc) doc);
    }
    divFooter(p);
}

private void printMethodDetail(PrintStream p, ExecutableMemberDoc field) {
    if (field.parameters().length > 0) {
        textHeader(p, "Parameters");
        for (int i=0; i<field.paramTags().length; i++) {
            textRow(p, "<b>" + field.parameters()[i].typeName() + " "
                    + field.paramTags()[i].parameterName()
                    + "</b>: "
            + getCommentText(field.paramTags()[i].parameterComment()));
        }
        textFooter(p);
    }
    if (field.throwsTags().length > 0) {
        textHeader(p, "Throws");
        for (int i=0; i<field.throwsTags().length; i++) {
            textRow(p, "<b>" +  field.throwsTags()[i].exceptionName()
                    + "</b>: "
            + getCommentText(field.throwsTags()[i].exceptionComment()));
        }
        textFooter(p);
    }
}
				

이 코드는 일반화된 메서드인데 printDetail()는 클래스 설명, 필드, 생성자 그리고 메서드를 출력한다. 나머지 두 개의 타입은 ExecutableMemberDoc의 서브 클래스로 그것들의 매개변수와 던지는 예외에 대한 정보를 추가로 출력한다.

성능 이슈

GZIP 압축

간단하지만 효율적인 성능 팁을 소개하겠다. 바로 웹 서버에서 GZIP 압축을 가능케 하는 것이다. 현재 쓰이는 웹 서버는 대부분 이 옵션을 제공하며, 이를 사용하는 클라이언트로 보내기 전에 페이지를 압축한다. 아이폰의 사파리도 그런 클라이언트 중 하나다. GZIP 압축을 자동으로 지원한다. 간단하게 GZIP 압축을 자신의 웹 서버에서 쓸 수 있게 하면, 아이폰 사용자들은 좀더 빠른 다운로드 시간을 경험하게 될 것이다.

Aptana의 아이폰 미리보기 모드는 결과 파일에 대한 디버깅에 도움을 준다. 각 주기마다 빠른 클릭을 통해 설계했던 인터페이스와의 불일치를 찾아낼 수 있다. 하지만 미리보기 모드를 사용하는 것은 성능 문제를 일으킬지도 모른다. 대부분의 컴퓨터들은 아이폰의 620MHz ARM 프로세서보다 세 배 내지 다섯 배 정도 빠르다. 또한 사용자들은 느린 휴대폰 네트워크를 통해 페이지를 다운로드할 것이다. 따라서 자신의 애플리케이션을 실제 아이폰에서 동작시켜 보는 것이 중요하다.

아이폰에서 iDoc을 시험해본 결과 매우 덩치 큰 HTML 파일을 출력할 때 흔들리는 듯한 화면과 성능 저하를 발견했다. 이것을 수정하기 위해 패키지와 클래스 이름을 네비게이션하는 메인 파일을 하나 만들고 별도의 파일로 각각의 클래스의 주석, 메서드에 대한 자세한 정보를 보여주는 페이지들을 만들었다(Listing 5). 비록 이런 과정을 통해 여러 개의 파일을 만들어 내게 되었지만, 각각의 파일 크기가 작기 때문에 애플리케이션이 매우 부드럽게 동작하게 되었다.


Listing 5. 각각의 패키지를 순회하는 Doclet 코드와 각각의 클래스마다 별도의 파일 만들기
                
out = new FileOutputStream(index);
p = new PrintStream(out);
printHeader(p);

PackageDoc[] packages = root.specifiedPackages();
Arrays.sort(packages);

printPackages(p, packages);

for (int i=0; i<packages.length; i++) {
    printPackageDetail(p, packages[i]);
}
for (int i=0; i<packages.length; i++) {
    ClassDoc[] classes = packages[i].allClasses();
    Arrays.sort(classes);
    for (int j=0; j<classes.length; j++) {
        // Creating a separate file for each class.
        PrintStream p2 = new PrintStream(new FileOutputStream(getFilename(classes[j])));
        printClassDetail(p2, classes[j]);
        p2.close();
    }
}
printFooter(p);
p.close();
				

iDoc 사용하기

성능 향상을 통해 iDoc은 이제 출시될 준비가 끝났다. OpenJDK에 있는 java.*와 javax.*에 있는 51개 패키지와 1304개 클래스에 대한 자바독을 만들, 모든 것을 웹 서버로 업로드한다. 16MB가 넘는 크기의 파일이지만 주요 네비게이션 페이지는 단지 112KB에 불과하며 각각의 클래스 자세히 보기 페이지는 평균적으로 13KB다. EDGE 네트워크를 사용하더라도 애플리케이션은 매우 잘 응답한다. 아이폰이 있다면 iDoc 사이트(참고자료 참조)에 접속해 보거나 iDoc을 다운로드하여 아이폰을 위한 자바독을 생성할 수 있다. 그림 11은 최종 애플리케이션을 보여준다.


그림 11. 아이폰을 위해 준비된 51개의 패키지 자바독
아이폰을 위해 준비된 51개의 패키지 자바독

iDoc의 잠재적인 확장기능으로는 자바 5 제네릭과 자바독 주석에 포함된 페이지 사이의 링크를 위한 태그를 더 잘 파악하는 것이다. iDoc의 기능 추가에 관심이 있다면 모든 소스 코드는 온라인에서 받을 수 있다(참고자료 참조).




위로


아이폰 개발의 미래

2007년 10월 Steve Jobs는 애플이 아이폰 SDK를 2008년 2월에 공개할 것을 발표했다. 글을 쓰고 있는 시점이 2007년 12월이기 때문에 아직 구체적인 것은 미지수이지만 SDK를 통해 사파리의 도움 없이 아이폰 바로 위에서 동작하는 애플리케이션을 작성할 수 있게 될 것이다. 아이폰 아키텍처 기반을 얻는 것은 Mac OS X과 비슷하게 개발 플랫폼이 코코아(Cocoa)와 오브젝티브-C가 된다는 것이다. 최근 소식에 의하면 애플의 한 중역은 서드파티 애플리케이션이 몇 가지 인증 절차를 거치도록 하는 것을 제안하기도 했다.

발전된 애니메이션, 그래픽 그리고 네트워크 접속을 사용하는 애플리케이션이 네이티브로 동작할 수 있는 이점을 얻을 것이다. 하지만 SDK가 배포되더라도 아이폰을 위한 웹 개발은 여전히 매력적인 위치에 있을 것이다. 웹 애플리케이션은 쉽게 만들고 간단하게 배포할 수 있다. Aptana와 iUi 같은 도구는 개발을 간편하게 해주며 웹 애플리케이션을 빨리 만들 수 있도록 해준다. iDoc을 통해 보았듯이 SDK를 기다릴 필요도 없다. 오늘 배운 도구를 사용해 아이폰 기능을 완전히 사용하며 진짜 같은 룩앤필을 가진 웹 애플리케이션을 만들 수 있다.



참고자료

교육
  • iPhone Dev Center에는 Apple Developer Center에 있는 아이폰 웹 개발과 관련된 유용한 참조 문서들이 있다.

  • iPhone Human Interface Guidelines 는 UI 개발 기준과 가이드라인 모음이다.

  • OpenJDK는 썬의 오픈 소스 자바 개발 키트다.

  • iDoc 시연 —OpenJDK Javadoc—를 여러분의 아이폰에서 참조하라.

  • "Eclipse 추천 도서 리스트 (한글)"를 확인하라.

  • developerWorks의 모든 이클립스 기사를 확인하라.

  • 이클립스가 처음이라면 developerWorks의 기사 "Eclipse Platform 시작하기 (한글)"를 읽고 이클립스의 탄생과 아키텍처 그리고 플러그인을 사용하여 어떻게 이클립스를 확장할 수 있는지 공부하라.

  • IBM developerWorks의 Eclipse 프로젝트 리소스를 참조하고 여러분의 이클립스 기술을 확장하라.

  • 소프트웨어 개발에 관한 흥미로운 인터뷰와 논의 소식을 듣기 원한다면 developerWorks 포드캐스트를 확인하라.

  • developerWorks의 기술 행사와 웹 캐스트에서 최신 정보를 접하라.

  • developerWorks On demand demos에서 IBM과 오픈 소스 기술 그리고 제품에 대한 정보를 무료로 보고 익힐 수 있다.

  • IBM 오픈 소스 개발과 관련하여 앞으로 개최될 컨퍼런스, 트레이드 쇼, 웹 캐스트 그리고 다른 행사들을 확인하라.

  • 한국 developerWorks 오픈 소스 존을 방문하여 방대한 how-to 정보, 도구, 프로젝트 업데이트를 확인하여 오픈 소스 기술을 활용한 개발에 도움을 얻고 IBM의 제품들을 활용하라.


제품 및 기술 얻기

토론
  • 이클립스에 대한 질문이 있다면 Eclipse Platform newsgroups를 제일 먼저 방문하라(이것을 선택하면 여러분의 기본 유즈넷 뉴스 리더 애플리케이션이 동작하고 eclipse.platform을 연다).

  • Eclipse newsgroups는 이클립스 확장과 사용에 관해 많은 자료를 가지고 있다.

  • developerWorks 블로그에 참여하고 developerWorks 커뮤니티에서 활동하라.



필자소개

Adam Houghton은 SAS Advanced Computing Lab에서 선임 소프트웨어 개발자로 있으며 자바와 관련된 모든 것을 전문으로 하고 있다.

:
Posted by 라면스프