다음 네 개의 장에서는 iPhone의 UIKit과 Cocoa Touch를 이해하는 데 필수적인 내용에 대해 다루지만, 아마 당장이라도 프로그램을 만들 준비가 되었을 것이라 여겨지기 때문에 먼저 간단한 iPhone 애플리케이션을 작성해 보겠다. 이 예제를 통해 IBOutlet과 IBAction의 사용법 그리고 Xcode 및 인터페이스 빌더와 친숙해질 것이다.

 

[Note]
이 책에서 소개하는 거의 모든 따라하기 예제는 이 책의 공식 블로그(
http://blog.naver.com/ipgipg)에서 동영상 서비스되고 있으며, 정보문화사 홈페이지(http://www.infopub.co.kr)의 자료실에서 다운로드 받을 수 있다. 첫 번째 동영상-지금 보여줄 따라하기 예제 애플리케이션-은 단계별로 음성 설명을 포함하고 있으나, 나머지 동영상은 음성 없이 화면만 나온다. 그러나 이번 예제 동영상에서 설명하는 과정을 잘 익혀놓으면 나머지 동영상도 어려움 없이 따라올 수 있을 것이다.


1. Xcode를 실행한 다음, 메뉴에서 [File]-[New Project]를 선택하면 New Project 창이 나타난다([그림 1-5]).
 

 

[그림 1-5] New Project 창

 

2. View-based Application을 선택하여 클릭한다. Save As 창이 나타나면 애플리케이션 이름으로 QuickStart라고 입력한다([그림 1-6]).

 

[그림 1-6] Save As 창

 

3. Xcode가 새 프로젝트를 생성하면 [그림 1-7]과 같이 왼쪽의 Groups & Files 목록에서 Classes와 Resources 폴더를 각각 아래로 펼친다.
 

[그림 1-7] Xcode에서 Classes와 Resources 폴더를 펼친 상태의 화면

 

4. Resources 폴더에 있는 QuickStartViewController.xib를 더블 클릭하여 인터페이스 빌더를 불러온다.

 

5. [그림 1-8]과 같은 캔버스(canvas)가 나타나지 않는다면 [그림 1-9]와 같이 도큐먼트 창에서 View를 더블 클릭한다.
 

[그림 1-8] 인터페이스 빌더 상의 뷰 캔버스

 

 

[그림 1-9] 도큐먼트 창

 

6. 인터페이스 빌더의 메인 메뉴에서 [Tool]-[Library]를 선택하면 라이브러리 창을 나타낼 수 있다. 라이브러리 창의 상단에서 모든 Cocoa Touch 클래스를 보여준다. Library를 아래로 펼친 후 Cocoa Touch를 클릭한다([그림 1-10]).
 

[그림 1-10] 라이브러리 창

 

7. 라이브러리 창 중앙 부분의 내용을 아래로 스크롤하면 Round Rect Button이 나오는데 Round Rect Button을 그대로 뷰 캔버스로 드래그 앤 드롭한다([그림 1-11]).
 

[그림 1-11] 버튼 추가

 

8. 뷰 캔버스 상의 버튼을 더블 클릭하여 Click Me라고 입력한다.

 

9. 7과 마찬가지로 Label을 만든다([그림 1-12]).

[그림 1-12] 레이블 추가

 

10. 저장한 다음 인터페이스 빌더를 종료한다.

 

11. 다시 원래 프로젝트 창으로 돌아와 Groups & Files 목록의 Classes 폴더 안에 있는 QuickStart ViewController.m을 선택하면 오른쪽의 편집 창에 소스 코드가 나타난다([그림 1-13]).

 

[그림 1-13] QuickStartViewController.m 화면

 

12. QuickStartViewController.m 소스 내용을 [소스 코드 1-1]과 같이 수정한다.

 

[소스 코드 1-1] QuickStartViewController.m
#import "QuickStartViewController.h"
@implementation QuickStartViewController
@synthesize myLabel;
- (IBAction) sayHello: (id) sender {
 NSLog(@"Hello....");
 self.myLabel.text = @"Hello";
}
- (void) dealloc {
 [super dealloc];
 [myLabel release];
}
@end

 

13. 마찬가지로 QuickStartViewController.h 파일을 열어 [소스 코드 1-2]와 같이 수정한다.

 

[소스 코드 1-2] QuickStartViewController.h
#import <UIKit/UIKit.h>
@interface QuickStartViewController : UIViewController {
 IBOutlet UILabel * myLabel;
}
@property (nonatomic, retain) IBOutlet UILabel * myLabel;
- (IBAction) sayHello: (id) sender;
@end

 

14. Xcode 메인 메뉴에서 [Build]-[Build]를 클릭하여 방금 작성한 프로젝트를 빌드한다.

 

15. QuickStartViewController.xib를 더블 클릭하여 인터페이스 빌더로 불러온다.

 

16. 뷰 캔버스에서 버튼을 선택한 후 인터페이스 빌더 메인 메뉴에서 [Tool]-[Inspector]를 선택하여 인스펙터 창을 띄운다([그림 1-14]). 인스펙터 창이 뜨면 두 번째 탭을 클릭하여 버튼 인스펙터를 띄운다([그림 1-15]).

 

[그림 1-14] 인스펙터 창

 

 

[그림 1-15] 버튼 인스펙터 창

 

17. 이벤트 목록에서 Touch Up Inside로 마우스 포인터를 옮긴 후 오른쪽의 동그라미를 도큐먼트 창의 File’s Owner로 드래그 앤 드롭한다. 이때 나타나는 팝업 창에서 sayHello:를 선택한다([그림 1-16]).
 
 

[그림 1-16] 버튼과 IBAction 연결하기

 

18. 뷰 캔버스의 레이블을 클릭하면 인스펙터 창의 내용이 레이블에 맞게 변경된다. 마찬가지 방식으로 New Referencing Outlet을 도큐먼트 창의 File’s Owner로 드래그 앤 드롭한 후 팝업 창에서 myLabel을 선택한다. 팝업 창에서 view를 선택하지 않도록 주의한다.

 

19. 저장하고 인터페이스 빌더를 종료한다.

 

20. Xcode 상에서는 현재 사용 중인 SDK로 iPhone Simulator 3.0과 Debug가 선택되어 있을 것이다([그림 1-17]).

 
[그림 1-17] 사용 중인 SDK로 iPhone Simulator 3.0과 Debug가 선택된 화면

 

21. Xcode 메인 메뉴에서 [Build]-[Build And Run]을 선택하면 방금 작성한 예제 애플리케이션이 iPhone 시뮬레이터에 설치된 후 동작한다([그림 1-18]).
 


[그림 1-18] iPhone 시뮬레이터에서 동작하는 예제 애플리케이션

 

22. Xcode 메인 메뉴에서 [Run]-[Console]을 선택하여 디버거 콘솔창을 띄운다.

 

23. 버튼을 클릭하면 레이블의 내용이 Hello로 바뀌며 디버거 콘솔창에 로그가 기록되는 것을 확인할 수 있다([그림 1-19]).
 


[그림 1-19] 버튼을 클릭한 후의 예제 애플리케이션 모습

 

 

 

예제로 배우는 핵심 패턴 아이폰 프로그래밍

제임스 브래넌 | 정기훈 옮김

정보문화사 2010.04.28



출처 : http://blog.naver.com/PostView.nhn?blogId=infopub&logNo=100108505592
Posted by 오늘마감

댓글을 달아 주세요