인터페이스 빌더와 Xcode로 애플리케이션 만들기 Hands on
OSXDEV
[편집] Hands on
이게 뭐 대수냐고 말 할 수 있다. 자, 이제부터 간단한 예제를 하나 만들어 보면서 왜 입에 침이 마르도록 칭찬을 하는지 한번 지켜보도록 하자.
[편집] 3.1 Enjoy Interface Builder
먼저 인터페이스 빌더에서 다음 그림과 같이 한번 배치해보자. 세개의 텍스트 필드와 세개의 버튼이다. 위의 두개의 텍스트 필드는 값을 입력받을 컨트롤이고 아래 텍스트 필드는 값을 출력할 컨트롤이다. Clear버튼은 모든 텍스트 필드를 초기화 시킬 버튼이며 Merge버튼은 위의 두 텍스트 필드의 내용을 연결해서 아래쪽의 텍스트 필드에 나오게 할 버튼이다. 마지막으로 Close는 프로그램을 종료시키게 할 것이다. 이 배치작업만으로도 충분히 즐거운 경험이 될것이라고 생각한다. 직관적이고 매킨토시 휴먼인터페이스 가이드라인에 충실한 가이드 기능이야 말로 인터페이스 빌더의 백미라고 말해도 아깝지 않다.
<그림 5> 인터페이스 빌더를 이용해서 만든 윈도우
클래스탭으로 가서 NSObject를 선택한 다음 메뉴의 Classes항목에서 Subclass NSObject를 선택해보자. 그러면 클래스탭이 있는 쪽에 NSObject를 상속받은 MyObject라는 것이 생길 것이다. 이것의 이름을 AppController로 바꾸어보자. 이제 클래스를 하나 만든 것이다. 이 컨트롤러라고 이름 붙은 클래스는 MVC모델에서 Controller에 해당할 부분으로 버튼의 이벤트들을 받고 또 텍스트필드에 적당한 값을 찍어주는 역할을 하게 될 것이다. 자, AppController를 선택한 상태에서 메뉴의 Classes항목에서 Instantiate AppController를 선택해보자. 그러면 Instances탭에 새로운 인스턴스가 생성된 것이 보일 것이다.
메뉴의 Tools항목에서 Show Info를 선택하면 다음과 같은 창을 볼 수 있을 것이다. 이 창은 레이아웃 잡을때도 유용하지만 아웃렛을 만들고 Target/Action을 정의할때는 반드시 필요하다.
<그림 6> AppController Class Info
Classes탭에 놓고 메뉴에서 Classes항목에서 'Add Outlet to AppController'를 선택하면 Info윈도우의 Attribute항목에서 다음과 같은 내용을 볼 수 있는데 아웃렛 이름을 display, 타입을 NSTextField로 설정해주자. 그 다음이 중요한데 컨트롤 키를 누른채로 AppController를 클릭해서 원하는 텍스트 필드로 드래그 하면 <그림 7>에서 처럼 연결선이 나오는 것을 볼 수 있다. 그 다음 Info윈도우에 나와있는 "Connect"버튼을 눌러주면 된다.
<그림 7> 컨트롤러의 아웃렛과 텍스트 필드의 연결
이 과정을 하게되면 AppController의 변수인 display라는 아웃렛이 실제 텍스트 필드와 연결 된 것이다. 즉 display는 객체의 포인터인데 이제 실제 객체가 연결된 것이다. 같은 방법으로 firstTextField와 secondTextField라는 것도 만들어서 위에 있는 두 텍스트 필드와 연결한다.
자, 이제는 액션을 정의해보자. 같은 방법으로 하지만 이번엔 Outlet탭이 아니라 Target/Action탭에서 <그림 8>과 같이 만든다.
<그림 8> Actions
<그림 9> 컨트롤과 액션의 연결
이번엔 반대로 버튼에서 컨트롤 키를 누른채 AppController로 드래그 앤 드랍하면 선이 <그림 9> 처럼 나타난다. 그 다음 Info윈도우의 Target/Action탭에서 원하는 액션을 선택하고 "Connect"버튼을 누른다. pushClear:는 실제로 AppController의 메소드로 버튼을 이렇게 연결해두면 그 버튼이 눌러졌을 때 연결된 메소드가 불리게 된다.
같은 방법으로 Merge와 Close버튼을 연결한다.
자, 여기까지 끝났으면 Classes 탭에서 AppController를 선택한 다음 Classes 메뉴에서 "Create Files for AppController" 항목을 선택하자. 그러면 소스코드를 생성해준다. 여기까지가 인터페이스 빌더의 역할이다.
[편집] 3.2 Coding
Xcode로 돌아와보면 해당 파일이 생성된 것이 보인다.
#import <Cocoa/Cocoa.h>
@interface AppController : NSObject
{
IBOutlet NSTextField *display;
IBOutlet NSTextField *firstTextField;
IBOutlet NSTextField *secondTextField;
}
- (IBAction)puchClear:(id)sender;
- (IBAction)pushClose:(id)sender;
- (IBAction)pushMerge:(id)sender;
<리스트 1> AppController.h
@implementation AppController
- (IBAction)puchClear:(id)sender
{
}
- (IBAction)pushClose:(id)sender
{
}
- (IBAction)pushMerge:(id)sender
{
}
<리스트 2> AppController.m
리스트 1, 2는 생성된 코드이다. IBOutlet은 아무것도 아닌 매크로이다. 컴파일러는 이것을 무시하지만 인터페이스 빌더의 파서에게 힌트를 주기 위한 용도로 사용된다. IBAction은 void와 같으며 이것 역시 인터페이스 빌더의 파서에게 힌트를 주기 위해서 사용되는 것이다.
이제 pushClear, pushClose, pushMerge 각각을 수정해주기만 하면 애플리케이션 작성이 끝난다.
@implementation AppController
- (IBAction)puchClear:(id)sender
{
[display setStringValue:@""];
[firstTextField setStringValue:@""];
[secondTextField setStringValue:@""];
}
- (IBAction)pushClose:(id)sender
{
[NSApp terminate:sender];
}
- (IBAction)pushMerge:(id)sender
{
NSString *firstString = [firstTextField stringValue];
NSString *secondString = [secondTextField stringValue];
NSMutableString *displayString = [NSMutableString stringWithString:firstString];
[displayString appendString:secondString];
[display setStringValue:displayString];
}
<리스트 3> AppController.m
<리스트 3>은 수정된 AppController.m이다. 각 버튼이 눌러졌을 때 어떻게 할것인지를 코드로 써주면 된다.
여기 코드가 잘 이해되지 않는다면 NSString, NSMutableString, NSTextField의 레퍼런스를 읽어보면될 것이다.
이상 간단하게 Xcode와 Interface Builder에 대해서 알아보았다. 필자가 봐도 상당히 어설픈 설명인것 같다. 특히 인터페이스 빌더는 솔찍히 글이나 말로 설명하기엔 너무 제한이 많은것 같다. 일단 기본적인 사용법과 기능에 대한 설명은 된것 같은데 익숙해지기 위해서는 독자들이 직접 손으로 다뤄보는 수 밖에 없을것 같다.
시작하기 전에도 말했지만 인터페이스 빌더는 단순히 리소스 편집이 아니라 그 자체가 일종의 코딩이다. 여기서 소개되지 않은 많은 또 다른 중요한 부분들이 있다. 차츰 익혀나가면 될 것이라 생각한다.
필자가 처음 코코아를 공부하기 시작했을 때 가장 난감했던 부분이 인터페이스 빌더의 사용이었던 점을 생각해보면 익숙치 않으면 상당히 고전할만한 내용인것 같다. 이것은 책으로 배울 수 있는것도 아니고 계속 써서 익숙해지는 것 외에는 방법이 없는것 같다.
