iOS 2008. 5. 26. 14:05
사용자 삽입 이미지
어제 iPhone SDK를 다운로드 받고 설치를 해보았습니다. SDK는 애플의 다운로드 페이지에서 받으실 수 있습니다. 실행환경은 OS X 10.5.2 이상의 인텔맥에서만 사용할 수 있습니다. 최신 버젼은 2008년 5월 8일에 올라 왔으며 파일크기가 1GB가 조금 넘었습니다.

 Xcode 3과 레오퍼드의 개발툴들을 잘 몰라서 설치 후 무엇이 추가되고 변경되었는지는 잘 모르겠습니다. 다만 Xcode와 Dashcode에서 차이점을 발견할 수 있었습니다.

1. Xcode
그러고 보니 아직 Xcode 3에서 한번도 New Project를 실행해 본적이 없었습니다. 그렇지만 아래의 iPhone OS란 메뉴가 SDK 설치로 새로 생겼을 것으로 짐작은 됩니다.

사용자 삽입 이미지

이름을 보니까 아이폰 SDK에서 사용하는 Cocoa는 'Cocoa Touch'로 부르는 것 같습니다. 일단 'Cocoa Touch Application'을 선택하고 프로젝트를 만들어 보았습니다.

사용자 삽입 이미지
프로젝트 명을 'iPhoneSDK'로 하였더니 좌측과 같은 파일들이 기본적으로 생성되었습니다.
 
기존 Cocoa 프로젝트에서 볼 수 있었던 파일들도 보이고 iPhoneSDKAppDelegate 클래스와 MainWindow.xib와 몇개의 프레임워크등 새로 추가된 부분들도 보입니다.

NIB Files가 비어 있어 순간 인터페이스빌더를 지원하지 않는가 생각했는데 MainWindow.xib를 더블클릭하니 인터페이스 빌더를 볼 수 있었습니다. nib의 n이 NeXTSTEP을 의미하는 것으로 알고 있는데 xib의 x가 OS X를 의미하는지는 모르겠습니다. (나중에 OS X 어플리케이션으로 만들어 봐도 nib 파일 대신 xib가 생겼습니다. 이 부분은 Xcode 3에서 변경된 것 같습니다.)

사용자 삽입 이미지
   
우측에 생략된 전체 이름은 'I PhoneSDK App Delegate' 입니다. 

사용자 삽입 이미지
라이브러리 팔레트에서는 좌측과 같이 사용할 수 있는 오브젝트나 컨트롤들의 목록이 있습니다. 이전에 아이폰의 사진에서 보았던 버튼이나 UI들도 보입니다.

몇개 끌고 와서 윈도우에 배치를 해 보았습니다. 실제 구현은 아직 모르기 때문에 무조건 빌드를 하고 실행을 해 보았습니다.





사용자 삽입 이미지
특이하게 애플은 일반적으로 사용하는 에뮬레이터가 아니라 시뮬레이터라고 이름을 붙였습니다. 아이폰 시뮬레이터를 살펴 보는데 아직 베타 버젼이라 그런지 제가 잘 못 해서 그런지 실행된 어플리케이션의 입력란에 포커스가 갈 경우에는 시뮬레이터가 다운되었습니다. 


아래의  좌측은 인터페이스 빌더에서 작업한 모습이고 우측은 빌드 후에 아이폰 시뮬레이터에서 실행된 모습니다.

사용자 삽입 이미지

자동으로 생성된 코드들은 아래와 같습니다. main에 추가 된것은 UIApplicationMain에 대한 호출입니다. 실제 작업은 그 이름과 같이 AppDelegate 클래스에서 수행해야 하는 것 같습니다. 아마 UIKit이 아이폰의 핵심 프래임워크 같습니다.

main.m
#import <UIKit/UIKit.h>

int main(int argc, char *argv[]) {
   
    NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init];
    int retVal = UIApplicationMain(argc, argv, nil, nil);
    [pool release];
    return retVal;
}

iPhoneSDKAppDelegate.h
#import <UIKit/UIKit.h>

@interface iPhoneSDKAppDelegate : NSObject <UIApplicationDelegate> {
    IBOutlet UIWindow *window;
}

@property (nonatomic, retain) UIWindow *window;

@end

iPhoneSDKAppDelegate.m
#import "iPhoneSDKAppDelegate.h"

@implementation iPhoneSDKAppDelegate
@synthesize window;

- (void)applicationDidFinishLaunching:(UIApplication *)application {   
    // Override point for customization after app launch
}

- (void)dealloc {
    [window release];
    [super dealloc];
}

@end


2. Dashcode
혹시나 하는 마음에 Dashcode도 실행해 보았습니다. 아래와 같이 New Project에서 Web Application이란 추가된 항목이 있었습니다.

사용자 삽입 이미지

이전 포스팅에서 한번 보았던 RSS를 선택하고 새 프로젝트를 만들었습니다. 이전과 동일하게 속성의 Feed URL에 올블로그 주소만 입력하고 실행해 보았습니다. 아래와 같이 시뮬레이터가 실행되었습니다.

사용자 삽입 이미지
아마 Dashcode로 만든 어플리케이션은 사파리내에서 실행되는 거 같습니다. 웹어플리케이션이니까 당연히 웹플랫폼에서 실행되겠지만 주소창이나 브라우져의 UI들은 안 보여 줄 것으로 생각했는데 아닌 것 같습니다.

아직 Xcode 3도 모르고 간만 본 상태에서 조금 이른 생각 같지만 iPhone에서의 개발은 기존의 다른 모바일 플랫폼 보다 쉬운 것 같습니다. 신경써야 될 폰이 아이폰 딱 하나인 것도 개발자 입장에선 편할 것 같고요. 개발자료들도 ADC에 충분한 것 같으니 많은 어플리케이션들이 나올 것 같습니다.
SDK와 툴들을 대충 둘러 보면서 느낀 첫번째 생각은 우리나라에 나오기만 하면 꼭 아이폰을 사야 겠다는 것이었습니다. 비록 에뮬 환경에서 일부분만 본 아이폰이지만 화면과 UI가 환상이었습니다. 에뮬레이터로 핸드폰 뽐뿌 받기는 처음이었습니다.
AND

이전에 올블로그 위젯을 올린 적이 있는데 RSS 리더기나 다른 좋은 관련 툴들이 많이 있어 업그레이드를 하지 않았습니다. 후에 Dashcode를 이용해 다시 만들어 볼려고 했는데 데모 사용기간이 지나 한동안 잊고 있다가 레오퍼드를 사용하면서 다시 Dashcode를 쓸 수 있게 되었습니다.
 
그래서 Dashcode를 사용하여 다시 만들어 볼려고 했는데, RSS 템플릿을 쓰니 다운로드 받고 설치하는 것 보다 그냥 만드는게 빠를 정도로 너무 쉽기 때문에 RSS 템플릿을 사용하여 위젯을 만든는 방법만 간단하게 설명할려고 합니다.

1. 프로젝트 생성
Dashcode를 처음 사용하시는 분들은 이전 관련 포스팅을 참조 하시면 도움이 되실 것 입니다. 먼저 Dashcode를 실행합니다. 아래와 같이 템플릿 선택화면이 나오면 'RSS 템플릿'을 선택하고 우측 하단의 'Choose' 버튼을 클릭합니다.

사용자 삽입 이미지


2. 기본 이미지/아이콘 변경
아래의 이미지를 다운로드 하여 사용하시거나 원하는 디자인으로 직접 배경과 아이콘 이미지를 사용하셔도 됩니다.

아래와 같이 좌측의 Default Image를 선택한 후에 배경파일(all.png)을 드래그 하여 가져다 놓습니다. 동일하게 하단의 Widget Icon을 선택한 후에 Icon.png 파일을 드래그 하여 놓습니다.

사용자 삽입 이미지


3. 전면(front) 설정
사용자 삽입 이미지

상단에서 front를 선택하면 좌측과 같이 front를 구성하고 있는 목록들을 볼 수 있습니다.

이중에서 fontImg, topRectangleShape, bottomRectangleShape, feedTitle을 선택한 후에 delete 키를 눌러 삭제합니다.

 







다시 배경 이미지 파일을 마우스로 드래그 해서 아래와 같이 위치 시킵니다.
사용자 삽입 이미지


4. RSS URL 설정
사용자 삽입 이미지
이제는 RSS를 가져올 주소를 설정해 보겠습니다. 위의 과정은 생략하시고 이 부분만 설정하시면 3초만에 자신만의 RSS 리더기를 만들 수 있습니다.

설정을 위해서 좌측과 같이 Provide RSS feed에서 RSS Properties 앞의 삼각형 버튼을 클릭합니다.



화면에서 Properties 하단의 Feed URL 입력 부분에 아래와 같이 올블로그의 '가장 많이 추천 받은 글'의 RSS주소를 입력합니다.
사용자 삽입 이미지


5. 실행
메뉴에서 'File/Save'를 클릭하여 프로젝트를 저장하고 'File/DeployWidget to Dashboard'를 클릭하여 제작한 위젯을 대쉬보드로 보냅니다. 이제 대쉬보드에서 아래와 같이 올블로그 위젯을 보실 수 있습니다.
사용자 삽입 이미지

사용자 삽입 이미지
하단의 설정버튼(i)을 클릭하면 좌측과 같이 출력될 내용의 길이를 설정 할 수 있습니다.

AND

이번 장에서는 제가 어렸을 적에 자주 하던 숫자 야구게임을 만들어 보겠습니다. 게임 규칙은 다음과 같습니다. 시작되면 컴퓨터는 임의의 세자리 숫자를 설정합니다. 플레이어는 연속하여 세개의 숫자를 입력합니다. 플레이어가 입력한 숫자중에 컴퓨터에 설정한 숫자와 일치하는 수가 있으면 그 갯수만큼 strike로 판정됩니다. 숫자에 따른 각각의 결과를 보고 컴퓨터가 설장한 세개의 숫자를 유추해 내어 모두 알아 맞추면 3 Stike가 되어 게임이 종료됩니다.

사용자 삽입 이미지

예를 들면 컴퓨터가 '379'를 설정하였다면, 사용자 입력에 따라 결과는 아래와 같습니다.

  • 126 - 3 ball (일치하는 숫자 없슴)
  • 589 - 1 strike 2 ball ('9' 1개 일치)
  • 389 - 2 strike 1 ball ('3', '9' 2개 일치)
  • 379 - 3 strike (3개 모두 일치, game over)

1. 변수 생성

이번 장에서는 생성하는 변수가 많습니다. 아래의 변수들을 위의 변수들을 Variables에서 [Make a variable]을 클릭하여 생성합니다. 각 변수의 사용 용도는 다음과 같습니다.
 
* inputCount : 사용자가 숫자를 입력할 때 마다 1씩 증가합니다. 3개의 숫자를 입력 받기 때문에 3까지 증가 한 후 다시 0으로 설정 됩니다.

* inputNumber: 사용자가 현재 입력한 숫자 입니다.

* number1: 컴퓨터가 설정한 첫번째 숫자 입니다.
* number2: 컴퓨터가 설정한 두번째 숫자 입니다.
* number3: 컴퓨터가 설정한 세번째 숫자 입니다.

* user1: 사용자가 입력한 첫번째 숫자 입니다.
* user2: 사용자가 입력한 두번째 숫자 입니다.
* user3: 사용자가 입력한 세번째 숫자 입니다.

* strike: 컴퓨터와 사용자 숫자의 일치하는 갯수입니다.
* try: 현재 사용자가 시도하는 횟수 입니다.

사용자 삽입 이미지
try, user1, user2, user3만 사용자에게 보여 줍니다. 위 변수들의 출력에 체크를 합니다. 캔버스에서 변수들을 더블 클릭하여 좌측과 같이 모양을 변경합니다. try 밑의 변수들은 좌측 부터 각각 [user1][user2][user3] 입니다. 


2. 스크립트 작성


1) 사용자 입력 처리
사용자 삽입 이미지

위와 같이 사용자 숫자 입력에 대응하는 모든 스프라이트들을 생성합니다. 각각의 숫자가 클릭되면 [set inputNumber to (num)]으로 현재 입력된 숫자를 inputNumber 변수에 저장합니다. 그런 후에 다른 스크립트에서 처리하기 위해 input 메시지를 보냅니다.

2) 시작 시 처리
게임이 시작될 때 각 변수들을 초기화하는 스크립트 입니다.
사용자 삽입 이미지

a. 숫자 설정
[pick random(start) to (end)] 는 start부터 end 사이에서 임의의 한 수를 생성합니다. 사용자가 맞추어야 하는 number1, number2, number3에 임의의 세개의 수를 생성하여 할당합니다.

b. 변수 초기화
사용하는 변수들을 0으로 초기화 합니다. 시도 횟수인 try만 1로 선택합니다. 초기화가 완료되면 사용자가 수를 입력 하도록 캐릭터가 "input number"를 출력합니다.

3) input 메시지 처리
위에 사용자가 숫자를 입력하였을 때 실행되는 [when [num] key pressed]에서 보내는 메시지를 처리하는 스크립트입니다.

사용자 삽입 이미지

a. 초기화
[if <(inputCount) > (2)>] 사용자가 3개의 숫자의 입력을 완료하고 다음 입력을 하는 지를 검사하고, 다음 시도이면 필요한 변수들을 0으로 초기화 합니다. 사용자의 시도 횟수를 알려주는 try만 1 증가시켜 줍니다.

b. strike 판별
[change inputCount by (1)] 먼저 현재 입력 카운트(inputCount)를 1 증가시킵니다. 위의 스크립트중 잘려진 if블럭의 전체 모습은 아래와 같습니다.

사용자 삽입 이미지

현재 입력된 inputNumber가 컴퓨터가 저장하고 있는 number1, number2, number3중 하나와 일치할 경우에는 [change strike by (1)] 로 strike를 1 증가시킵니다.

c. 입력횟수에 따른 처리
inputCount에 따라 사용자에게 보여 줄 user1, user2, user3를 설정합니다. 3번째 입력이 되어 완료되었을 경우에는 검사를 위해 [broadcast [check] and wait] 명령으로 check 메시지를 발송합니다.

4) check 메시지 처리
사용자가 세개의 숫자를 입력하였을 때 결과의 처리를 위해 실행되는 스크립트 입니다.

사용자 삽입 이미지
a) strike가 0일 경우
사용자가 입력한 세개의 숫자중에 일치하는 숫자가 하나도 없을 경우입니다. 캐릭터가 "Oops! 3ball"이란 메시지를 출력합니다.

b) strike가 1일 경우
"1 strike 2 ball"이란 메시지를 출력합니다.

c) strike가 2일 경우
"2 strike 1 ball"이란 메시지를 출력합니다.

d) strike가 3일 경우
사용자가 입력한 숫자가 모두 일치한 경우 입니다. 캐릭터가 "3 strike"를 1초간 출력 한 후에 "You Win!!!" 이란 메시지를 출력하고 게임을 종료 합니다.

[stop all ( )]는 사용자가 Stop 버튼을 클릭한 것과 동일하게 스크립트 실행을 중단합니다.



이제 완료되었습니다. 시작버튼을 클릭하여 테스트 해 봅니다. 세개의 숫자를 입력하면 결과가 나옵니다. 결과를 확인하고 컴퓨터가 설정한 세개의 숫자를 유추하여 다시 숫자를 입력하는 것을 반복합니다. 세 숫자를 모두 맞추면 게임이 종료 됩니다. 

'프로그래밍 강좌 > 스크래치' 카테고리의 다른 글

4.7 [중급] 묵찌빠 게임  (0) 2008.06.16
4.6 [중급] 카드 맞추기  (0) 2008.06.11
4.4 [중급] 영단어 퀴즈 게임  (0) 2008.05.19
4.3 [중급] 피아노 만들기  (6) 2008.05.18
4.2 [중급] 핑퐁 게임  (2) 2008.05.14
AND