상단의 Window에서 SimpleDraw로의 변경은 이전 장에서 해본 것과 같이 윈도우의 인스펙터를 불러내어 Window Title 항목을 변경합니다.
3) 버튼 생성 및 속성 설정
이제 버튼을 배치합니다. 아래와 같이 팔레트에서 버튼을 불러와 버튼을 복사/붙여넣기 하여 네개의 버튼을 만든 후 MyView 하단에 배치 합니다.
좌측과 같이 네개의 버튼의 제목을 각각 사각형, 원, 선, 문자로 변경합니다.
자세히 보면 버튼의 모양이 기본 버튼과 다른데, 이는 아래에서 설명하겠습니다.
사각형 버튼에서 인스펙터를 열어 보면, Tag에 1로 되어 있습니다. 이는 각각의 버튼이 클릭되었을 때, MyView의 DrawItem 메소드에서 구별하기 위해 설정 합니다.
사각형은 1, 원은 2, 선은 3, 문자는 4로 Tag 값을 각각 설정 합니다.
위의 버튼 모양은 Type 항목에서 Round Textured Button을 선택한 모양 입니다.
이제 버튼 클릭시 동작을 연결합니다. 이전 장과 같이 사각형 버튼을 control키를 누른 상태에서 드래그 하여 MyView에 가져다 놓습니다. 아래와 같이 인스펙터 창이 나타나면 Target/Actiond에서 drawItem을 선택하고 하단의 Connect 버튼을 클릭합니다.
위의 작업을 원, 선, 문자 버튼에서도 똑같이 drawItem에 연결 하여 줍니다.
1.5.3 소스코드 작성
1) 헤더파일 수정
이제 Xcode로 돌아 와서 소스코드를 수정합니다. 우선 MyView.h를 에디터에서 오픈합니다.
- (void)dealloc { [txt_message release]; [txt_attributes release]; [super dealloc]; } dealloc은 오브젝트 사용이 끝나고 메모리에서 해제될 때 호출됩니다. alloc으로 메모리를 할당한 오브젝트들(txt_message, txt_attributes)을, release로 메모리를 해제해 줍니다.
4) 그리기
drawRect는 NSView가 그려져야 할 때, 자동으로 호출됩니다. 그리는 작업을 이곳에서 하면 됩니다.
const int ITEM_WIDTH = 50; const int ITEM_HEIGHT = 50; 그려질 도형들의 크기를 설정합니다.
NSRect itemRect; NSBezierPath *path; itemRect.origin.x = (rect.size.width/2) - (ITEM_WIDTH/2); itemRect.origin.y = (rect.size.height/2) - (ITEM_HEIGHT/2); itemRect.size.width = ITEM_WIDTH; itemRect.size.height = ITEM_HEIGHT;
그려질 도형들의 위치와 크기를 설정합니다. 인자로 넘어온 rect는 그려져야 할 영역인데 NSView의 크기로 보시면 됩니다. NSView의 중앙에 오도록 계산하여 x, y를 설정 합니다.
switch (itemType) { case 1: path = [NSBezierPath bezierPathWithRect:itemRect]; [path fill]; break; case 2: path = [NSBezierPath bezierPathWithOvalInRect:itemRect]; [path fill]; break; case 3: path = [NSBezierPath bezierPath]; [path moveToPoint:itemRect.origin]; [path lineToPoint:(NSPoint) { itemRect.origin.x + itemRect.size.width, itemRect.origin.y + itemRect.size.height }]; [path setLineCapStyle: NSButtLineCapStyle]; [path setLineWidth: 3]; [path stroke]; break; case 4: [txt_message drawAtPoint:(NSPoint) { 20, 20 } withAttributes:txt_attributes]; break; default: break; } itemType에 따라 NSBezierPath를 사용하여 사각형, 원, 직선과 문자를 출력합니다. 상세한 설명은 튜토리알 이 후에 다시 하겠습니다. 용도는 오브젝트, 변수, 메소드 명을 보시면 대충 짐작하실 수 있습니다.
다만 [txt_message drawAtPoint:(NSPoint) { 20, 20 } withAttributes:txt_attributes];
를 보시면 x, y 20, 20으로 출력하는데 생각과는 달리 좌측 상단에 나오지 않고 좌측 하단에 출력 됩니다. 이는 기본 좌표 체계가 좌측 하단을 기준으로 시작하기 때문입니다.
5) 사용자 입력 처리
- (IBAction)drawItem:(id)sender { NSLog(@"%d", [sender tag]); itemType = [sender tag]; [self setNeedsDisplay:YES]; } 버튼이 클릭될 때, 호출되는 메소드 입니다. 네개의 버튼이 연결되어 잇지만 [sender tag]로 현재 어느 버튼이 클릭되었는지 알 수 있습니다.
[self setNeedsDisplay:YES]; NSView가 다시 그려져야 됨을 알립니다. drawRect가 호출됩니다.
6) 마무리
이제 빌드 후 실행하고 테스트 해 봅니다. 오류가 나거나 정상적으로 동작하지 않으면 위의 내용을 확인해 보시기 바랍니다.
완전한 이해를 위해서는 Object-c의 문법과 메소드 기타 상세한 설명이 필요 하지만, 단순히 따라 해보는 튜토리알에 의미를 두었습니다. 추후 튜토리알과 다른 항목에서 설명하도록 할려고 합니다.
또한 결정적인 이유는 송구스럽게도 저도 대충 이해하고 구현에 중점을 두고 해보기 때문입니다.
이제 처음으로 Xcode를 이용해서 간단하게 Hello를 표시하는 윈도우를 만들어 보겠습니다.
1.2.1 프로젝트 생성
Xcode를 실행 시키고 좌측과 같이 메뉴의 File을 클릭한 후 New Project를 선택합니다.
보이는 바와 같이 단축키 [Shift + Command + N]을 클릭하셔도 됩니다.
1) 프로젝트를 종류를 선택합니다.
위와 같이 Application 분류 에서 Cocoa Application을 선택하고 하단의 [Next] 버튼을 클릭합니다.
2) 프로젝트명과 폴더를 선택합니다.
프로젝트 이름을 Hello로 입력하고 프로젝트 폴더를 선택합니다. 참고로 ~/ 는 사용자의 루트폴더를 의미하며, 기본으로 이곳 하위에 프로젝트명으로 폴더를 생성하게 됩니다. project, devel, test, exam등의 폴더를 만드시고 이곳에 프로젝트들을 모아 놓는 것이 관리하기 쉬울 것입니다.
위와 같이 Project Name과 Project Directory를 입력 하신 후, [Finish] 버튼을 클릭하여 완료 합니다.
1.2.2 Xcode 둘러 보기
이젠 위와 같이 Xcode를 처음 만나 보게 됩니다. 복잡한 구성과 메뉴와 알듯 모를 듯한 영어들이 있지만 어려워 보이지만, 자주 보게 되면 친근하게 느껴 집니다. 좌측의 트리메뉴는 프로젝트에 포함된 소스파일들과 오브젝트, 리소스등에 쉽게 접근하게 해주는 메뉴이며, 우측은 좌측에서 선택된 내용들을 보여주는 창입니다.
툴바를 잠깐 살펴 보면 (이해할 수 없는 용어는 그냥 넘어 가면 됩니다.)
첫 윈도우 모양 아이콘은 프로젝트 기본 창입니다. 두번째 도구 모양 아이콘은 빌드 결과와 실행시 로그를 확인 할 수 있는 창입니다. 세번째 에프킬라 아이콘은 디버깅을 위한 창입니다.
Build 명령으로 컴파일되어 만들어질 목표를 설정합니다.
Release 또는 Debug로 Build될지 선택합니다. Debug 선택 시에는 디버깅 정보를 포함하고 있기 때문에 Release 보다 실행파일이 크고 느립니다. 개발시 편의를 위해 Debug 모드로 제작을 하고 최종 배포시 Release 모드로 Build해서 배포 하시면 됩니다.
자주 사용하는 명령어들과 설정들을 바로 실행할 수 있습니다.
Build는 실행파일을 만들기 위해 컴파일을 합니다. Build And Go 는 Build 후에 실행을 합니다. Tasks는 Build 또는 실행을 중지 합니다.
Info는 현재 선택된 목록에 대한 정보를 보여 줍니다. ([Command + i]) Editor는 좌측 메뉴에서 선택된 소스파일들을 편집할 수 있도록 에디터를 같은 창에서 실행 합니다. Editor 버튼 대신 소스를 더블클릭하면 새창에서 열립니다.
1.2.3 인터페이스 빌더 둘러 보기
위와 같이 Xcode의 좌측 메뉴에서 NIB Files를 열고, MainMenu.nib를 더블클릭 하여 인터페이스 빌더(Interface Builder)를 엽니다. 인터페이스 빌더가 열리면 몇 개의 윈도우가 같이 열립니다. 간단하게 살펴보면,
좌측이 인터페이스 빌더 메인윈도우 이며, 오브젝트 선택, 메뉴, 콘트롤, 서브클래스/인스턴스 생성, 아울렛/엑션 바인딩, 속성 변경 등의 다양한 작업을 할 수 있습니다. (지금은 무시하세요)
좌측이 어플리케이션 기본윈도우이며, 실행 시 전면에 나오는 윈도우 입니다.
좌측은 팔레트라 불리우며, 각종 콘트롤과 오브젝트들을 윈도우에 추가할 수 있습니다.
좌측은 메인 메뉴로 어플리케이션의 메뉴와 관련된 작업을 하는 윈도우 입니다. 이번에는 사용하지 않습니다.
1.2.4 Nib 파일 변경
1) 윈도우에 텍스트 필드 삽입
아래의 좌측 이미지와 같이 팔레트의 세번째 항목 Text를 선택하고 System Font Text를 클릭한 후, 윈도우로 드래그해서 놓습니다. 결과는 우측과 같습니다.
드래그 한 System Font Text를 더블클릭 하면, 입력할 수 있는 창이 나타납니다.
이곳에 Hello World (또는 다른 텍스트)를 입력합니다.
윈도우에 Hello World를 출력하는 것은 여기가 끝이지만, 간단하게 텍스트 필드를 꾸며보고 인스펙터를 구경하고 마치도록 하겠습니다.
인스펙터는 각 오브젝트들의 속성과 행동을 설정 할 수 있는 툴로, 여기서는 버튼의 모양과 정열을 바꾸어 보겠습니다.Alignment 항목에서 두번째 가운데 정열을 선택하고, Text Border 항목에서 세번째를 선택하고, Options에서 Rounded를 선택합니다.
이번엔 윈도우에서 Hello Word 텍스트필드 이외의 부분을 클릭하고, 인스펙트 상단에 NSWindow Inspector이 나오게 합니다. Window Title을 MyFirst Cocoa App. 또는 원하는 문자로 변경합니다.
아래가 완료된 윈도우 입니다. Xcode에서 Build and Go 버튼(또는 [command+R])을 클릭하면 결과를 확인할 수 있습니다.
실행파일은 Hello.app로 생성되며 [프로젝트 폴더]/build/Debug/에 위치합니다. 이곳에서 더블클릭 하여도 같은 윈도우를 실행할 수 있습니다. 만약 Xcode 툴바에서 Active Build Configuration이 Release로 지정되어 있을 때는 [프로젝트 폴더]/build/Release/에 위치합니다.
이전에도 간단한 계산기를 만들어 보았지만, 이번에는 연속계산이 가능하고, 키보드 입력과 몇 가지 출력을 추가한 업그레이드 된 계산기를 만들어 보겠습니다.
Classes에서 AppController를 우클릭 한 후, 메뉴에서 Instantiate AppController를 클릭하여 인스턴스를 만듭니다.
팔레트에서 텍스트 필드 세개와 버튼 하나를 윈도우에 가져다 놓고 좌측과 같이 배치합니다. 
첫번째 텍스트필드를 선택하고 인스펙터를 엽니다. 좌측과 같이 정렬을 우측으로 설정합니다. 인스펙터는 해당 오브젝트를 클릭 후에 메뉴 에서 선택 또는 shitf + commad(사과 키) + i를 동시에 누릅니다. 
위의 세 텍스트필드 모두, 옵션을 좌측과 같이 모두 체크를 해제 합니다. 키보드 입력을 윈도우가 모두 받기 위함입니다.
버튼을 클릭한 후, 쉬프트 + 옵션 + 마우스를 클릭한 상태에서, 버튼 우측 하단의 원을 클릭하면 좌측과 같이 하나의 원만 남습니다.
숫자를 제외한 +, -, X, /, =, C 기호들은 아래와 같이 Tag 값을 입력해 줍니다.
좌측과 같이 NSMatrix를 AppController의 processCommand에 연결 시킵니다.
MainMenu.nib파일의 Classes 윈도우에서 NSWindow의 서브클래스를 생성합니다.
NSWindow의 서브클래스 MyWindow를 우클릭하여 나오는 메뉴에서 Create Files for MyWindow를 선택하여, MyWindow.h와 MyWindow.m 파일을 생성합니다.
Window의 인스펙터를 오픈한 후, Custome Class에서 위에서 만든 MyWindow를 선택합니다.
왼쪽과 같이 윈도우 타이틀을 MyCalculator로 변경합니다. 
MainMenu를 클릭하여 좌측과 같이 메뉴 부분에서 New Application으로 되어 있는 부분을
