블로그 이미지
'무른모'란 부드럽다라는 뜻을 가진 '무르다'라는 말과 도구, 연장을 뜻하는 '연모'라는 순 우리말의 합성어로 소프트웨어를 말합니다. seanhigher

카테고리

분류 전체보기 (161)
Blog srart (16)
Dev Center (94)
Real Life (13)
Mac life (21)
Naver life (17)
Total633,817
Today41
Yesterday88
내가 가지고 있는 정보를 어디론가 보낸다던지, 가지고 있는 파일을 삭제한다는 것은 간단해 보일 수도 있는 작업이다. 하지만, 그 정보가 나의 모든 재산을 누군가가 가로챌 수 있는 정보라면? 내가 꼭 기억해야 할 사실을 삭제되어야 한다면? 매우 중요한 사항을 결정하게 될때, 그것을 다시한번 확인하게 해주는 것은 불의의 사태를 막는 하나의 방법으로 사용될 수 있다.



액션시트와 경고창.
액션시트와 경고창은 그 근본이 크게 다르지 않다. 사용자로부터 지금 하고자 하는 사실이 확실한지를 확인해주는 역할을 하게 된다. 사용자의 입력을 받는 경우라면 버튼을 사용해도 되는데, 궂이 액션시트라는 것과, 경고창이 왜 필요할까? 그것은 선택을 받아야 하는 정보가 어플리케이션을 진행하는데 있어서 꼭 피요한 정보이기 때문이다. 만약 화장실을 가야 하는데 사용자가 남자인지, 여자인지 알려주지 않았다면 어디로 들어가야 할찌 모르고 고민을 하게 된다. 이럴땐, 액션시트를 열어서 '남자' 또는 '여자' 둘중에 선택할 수 있도록 만들어야 한다. 그리고 경고창은 매우 중요한 결정을 할 때 사용될 수 있다. 내가 내년까지 기억해야 할 정보를 깜빡하고 삭제하려고 한다면, 경고창을 보여주면서 그 기록에 대해 다시한번 확인시켜준다.


레이아웃 디자인하기.
새로운 프로젝트를 'alermTest' 란 이름으로 생성한다. 종류를 View-based Application 으로 선택한다. Resources 폴더 안에 있는 'alerm-TestViewController.xib' 파일을 더블클릭하면 인터페이스 빌더를 실행할 수 있다. 레이아웃은 매우 간단하다. 화면의 가운데에 'action' 이라는 버튼을 한개 가져다 놓고, 이름을 'action' 으로 바꾸어주면 끝이다. 인터페이스 빌더를 실행한 후, 라이브러리에서 버튼을 드래그 해서 뷰 영역으로 옮겨놓은 일은 어렵지 않을 것이다.


그림1. 인터페이스 디자인


아웃렛과 액션을 설정하는 간편한 방법.
아웃렛과 액션을 생성하기 위해서는 Xcode 창에서 각각의 소스코드를 입력해서 작성해 주어야 인터페이스 빌더의 화면에 나오게 되었다. 이렇게 직접 소스코드를 입력하는 것이 쉬운 방법일 수도 있겠지만, 더욱더 간단하게 마우스 클릭만으로도 아웃렛과 액션을 생성하는 것이 가능하다.


그림2. 인터페이스 빌더에서 액선, 아웃렛 선언.

라이브러리 윈도우를 보면 맨 위에 Library, Classes, Media 의 세가지 탭이 있는데 이중에 Classes 항목을 선택한다. 항목을 선택하면 바로 아래에 라이브러리들이 나오게 되는데 우리가 사용하게 될것은 ViewController 이므로 alermTestViewController 항목을 선택하도록 한다. 가장 아래부분에는 선택된 항목의 정보가 간단하게 나오게 된다. 먼저 액션을 추가하기 위해 가장 오른쪽의 'Actions' 항목을 선택한다. 아래의 '+' 버튼을 클릭하여 새로운 액션을 추가, 이름을 변경해준다. 아웃렛을 추가하기 위해서는 'Outlets' 항목으로 이동해야 한다. 액션을 추가할때와 마찬가지로 '+' 버튼을 클릭하여 새로운 아웃렛을 추가하고 이름을 변경하여 준다. 이것으로 새로운 액션과 아웃렛의 생성이 간단하게 마무리 되었다.


액션, 아웃렛 이어주기.
액션과 아웃렛을 선언만 한다고 해서 사용이 가능한 것은 아니다. 이것을 사용할 수 있도록 서로 연결해 주는 작업이 필요하다.


그림3. 아웃렛 연결.

'View' 윈도우에서 버튼을 선택한후, 'Connections' 윈도우를 연다. 아래쪽을 보면 'Referencing Outlet' 항목의 'New Referencing Outlet' 을 선택하여 아웃렛을 추가하도록 한다. 오른쪽에 있는 원에 마우스 커서를 가져가면 십자가 모양으로 변하게 되고, 그것을 끌어다가 메인 위도우의 File's Owner 아이콘으로 가져다 놓는다. 그러면 위의 그림과 같이 아웃렛으로 선택하 수 있는 항목이 나타나게 되는데, 이미 만들어 놓았던 아웃렛인 'actionButton'을 선택하도록 한다.


그림4. 액션 연결하기.

액션을 연결하는 방법도 아웃렛을 연결하는 것과 거의 동일하다. 단지 항목을 'New Referencing Outlet' 항목이 아닌, 'Events' 항목에서 선택을 한다는 것이 다르다. 버튼을 클릭하는 것이기 때문에 'Touch Up inside' 의 항목을 끌어다 File's Owner 아이콘에 가져다 놓는다. 그리고 선택할 수 있는 액션 항목이 나타나는데, 이전에 선언한 'actionsh' 액션을 선택하도록 한다.


인터페이스 빌더로 소스파일 생성.
아웃렛과 액션을 선언하고 연결하는 일을 마무리 지었다. 하지만, 이상태에서는 다시 Xcode 로 돌아가도 소스코드에는 변화가 없다. Xcode 의 내용이 인터페이스에 반영되기 위해서는 소스코드를 저장하기만 하면 바로 적용이 가능했지만, 반대로 인터페이스 빌더의 내용을 소스코드에 반영하기 위해서는 인터페이스 빌더가 소스코드를 작성하는 과정이 필요하다.


그림5. Write Class Files 작업.

alermTestViewController가 선택된 상태에서 맨 왼족 아래의 메뉴(톱니바퀴 모양) 버튼을 클릭하면 위와 같은 메뉴가 나오는것을 볼 수 있다. 윗부분의 'Write Updated Class Files' 버튼을 클릭하여 변경된 사항을 소스코드에 적용할 수 있다. 파일은 'alermTestViewContoller.m' 파일을 선택하고 'Replace' 버튼을 선택하여 새로운 내용으로 대체하도록 한다. 이제 소스코드를 보면 변경된 내용이 적용되어 있을 것을 볼 수 있다.


액션시트 델리게이트.
델리게이트는 다양한 객체와 클래스, 메소드들을 묶어서 다양한 행동을 확장해 주는 역할을 한다. 또, 액션시트와 경고창을 사용하기 위해서는 컨트롤러 클래스가 델리게이트를 사용해야 하는데, 'UIActionSheetDelegate' 라는 프로토콜을 따르도록 만들어 주어야 한다. 델리게이트를 선언해주기 위해서는 클래스명 다음에 '<UIActionSheetDelegate>' 를 추가해 주기만 하면 된다.

@interface alermTestViewController : UIViewController
<UIActionSheetDelegate> {
    IBOutlet id actionButton;
}



액션시트 추가하기.
액션을 통해서 무언가 실행이 되게 하기 위해서는 액션메서드를 구현하는 과정이 필요하다. 또한 액션시트가 닫힐때 이루어지는  액션 메소드도 필요하다.

@implementation alermTestViewController
- (IBAction)actionsh:(id)sender {
    UIActionSheet *actionSheet = [[UIActionSheet alloc]
                                  initWithTitle: @"Are you sure?"
                                  delegate: self
                                  cancelButtonTitle: @"No way!"
                                  destructiveButtonTitle: @"Yes, I' sure!"
                                  otherButtonTitles: @"second", @"third", nil];
    [actionSheet showInView: self.view];
    [actionSheet release];
}

위의 소스틑 액션시트를 만들어 준다. 액션시트는 UIActionSheet 클래스로 선언되어진다. 액션시트가 가지게 되는 다양한 인자가 있는데 첫번째로 'initWithTitle' 는 액션시트의 제목의 내용을 나타낸다. delegate 항목은 시트에 있는 버튼이 눌려졌을때 알려주는 역할을 하게 된다. self를 선언함으로 자기 자신을 호출하게 된다. 액션시트에는 취소하는 항목을 기본적으로 가지게 되는데, 'cancelButtonTitle' 는 이것을 설명하는 문구를 정하게 된다. 이와 반대로 'destructiveButtonTitle' 는 실행 버튼을 생성해주며, 사용될 문구를 정할 수 있다. 마지막에 있는 'otherButtonTitles' 는 더 추가되는 버튼을 표현하게 되는데, 마지막을 의미하는 'nil' 이 나타나기 전까지 여려개를 늘릴 수 있다. 액션시트에 대한 정의를 마무리 짓고, 'actionSheet showInView' 를 통하여 액션시트가 화면에 보여지도록 한다. 버튼을 누르면 나타나는 액션시트를 구현한 것이다.


경고창 추가하기.
경고창은 액션시트와 거의 비슷하다. 인자의형태나, 구성 또한 비슷하다. 단지 'UIActionSheet' 대신에 'UIAlertView' 를 사용한다는 것이 다르다. 다음의 소스를 위의 소스 다음에 추가하도록 한다.

- (void)actionSheet: (UIActionSheet *)actionSheet didDismissWithButtonIndex: (NSInteger)buttonIndex {
    if (buttonIndex != [actionSheet cancelButtonIndex]) {
        NSString *msg = nil;
        msg = @"You went OK.";
        UIAlertView *alert = [[UIAlertView alloc]
                              initWithTitle: @"Something was done"
                              message: msg
                              delegate: self
                              cancelButtonTitle: @"Paw!"
                              otherButtonTitles: nil];
        [alert show];
        [alert release];
        [msg release];
    }
}

'actionSheet: didDismissWithButtonIndex' 는 UIActionSheetDelegate 메소드 중 하나이다. 위의 소스에서는 이 메소드를 컨트롤러 자체로 설정하였기 액션시트의 버튼이 눌려짐과 동시에 실행이 되는 메소드가 되는 셈이다. 액션시트의 다양한 버튼중에서 어떤 버튼이 눌려졌는지 알기 위해서는 buttionIndex 의 인자를 통해 접근이 가능하다. 이번에 작성한 소스에서는 취소 버튼 외에는 특별히 인자를 구별할 필요가 없다. 그렇기 때문에 '[actionSheet cancelButtonIndex]' 만 확인을 해주면 된다. 나머지 인자는 액션시트의 인자와 동일한 역할을 하게 된다. 'message' 는 제목 이외에 추가적인 설명을 더해준다. 경고창의 경우에는 'self.view' 대신에 'show' 만을 사용했는데, 이것은 액션시트의 경우는 부모뷰에 연결되어 있는 것이고, 경고창은 독립적으로 사용되기 때문이다.


시뮬레이션.
액션시트와 경고창에 대한 작업이 모두 완료되었다. 이제 'Build and Run' 버튼을 눌러서 실행을 해보도록 하자.


그림6. 시뮬레이션

가장 왼쪽에 있는 화면은 맨 처음 어플리케이션을 실행했을 경우에 나타나게 되는 화면이다. 가운데 있는 버튼을 누르면 가운데 화면과 같은 액션시트를 보게 될 것이다. 액션시트에서는 "No way!" 버튼만 취소 버튼으로 설정해 두었기 때문에 모두 동일한 결과를 보여주게 되는데, 'Yes I'm sure!', 'second', 'third' 버튼을 누를경우엔 가장 오른쪽의 화면과 같이 경고창을 보여주게 된다. 'No way!' 버튼을 눌렀을 경우에는 다시 원래의 화면으로 돌아가게 된다.

액션시트와 경고창은 사용자에게 어플리케이션을 사용하는데 있어서 조금의 강제성을 부여한다. 하지만, 이것은 조금더 원할한 상호작용을 위한 필수 요소라고 할 수 있다. 내가 말하지도 않은 사실을 상대방이 알고있을리 만무하다.

Posted by seanhigher

댓글을 달아 주세요

아이폰 개발을 하기 위해 필요한것은 개발 도구와, 개발한 애플리케이션을 실행해 볼 수 있는 아이폰이나, 아이팟 터치일 것이다. 하지만, 아이폰/아이팟 터치가 없다면?? 컴퓨터는 누구나가 다 가지고 있기 때문에 해킨토시를 하던, VMware를 통해 설치하는 등의 방법을 통해 설치 할 수 있지만, 없는것을 만들어 낼 수는 없는 노릇이다. 그리고 매번 동기화 시켜서 테스트 할 수도 없는것이고... 다른 개발 툴들도 마찬가지겠지만, 아이폰 SDK에는 실제 실행환경과 매우 유사한 iPhone simulator 가 준비되어 있다.




아이폰 시뮬레이터 실행하기.
Xcode 로 애플리케이션을 작성하고 'Run and Build' 버튼을 누르면 소스코드가 빌드되고, 자동으로 아이폰 시뮬레이터가 실행이 된다. 그리고 지금 개발중인 애플리케이션이 실행한 상태의 화면이 나타나게 된다. 애플리케이션은 실행하지 않은채로 아이폰 시뮬레이터만 실행해 보고 싶다면 HardDisk -> Developer -> Platforms -> iPhoneSimulator.platform -> Developer -> Applications 의 순서로 폴더를 따라가다 보면 'iPhone Simulator' 실행 파일을 만날 수 있다. 이 파일을 더블 클릭하면 아이폰 시뮬레이터가 실행된다.


손가락이 없다면 마우스로...
아이폰을 가장 잘 활용하기 위한 도구는 우리 모두가 가지고 있는 손가락이다. 하지만 아쉽게도 컴퓨터에는 손가락이 없다. 대신에 마우스라는 친근한 도구가 우리에게 있다. 마우스와 마우스의 버튼은 우리가 손가락으로 아이폰에 입력할 수 있는 대부분의 입력을 충분히 입력할 수 있도록 해준다.


그림1. 아이폰 시뮬레이터의 입력

Mouse Click : 마우스를 원하는 곳에 이동한 후 클릭하는 것을 손을 아이폰의 화면에 대는 것과 같다고 할 수 있다. 무엇인가를 선택할 때 사용되고, 버튼 형식의 객체를 컨트롤 할 수 있다.
Mouse double Click : 마우스를 더블클릭하는 것은 손가락으로 빠르게 두번을 탭하는 것과 같다. 취소를 하거나, 화면 전환을 할 때, 탭 이외의 추가적인 입력이 필요할 때 사용 할 수 있다.
Mouse Click & Drag : 마우스를 클릭한 상태에서 드래그를 하는 것은 손가락을 아이폰의 화면에 대고 끄는것과 같은 역할을 하게 된다. 매우 큰 화면을 볼 때 이리저리 움직일 때 사용하거나, 화면 전환에 유용하게 쓰이는 제스쳐이다.
'option' + Mouse Click & Drag : 'option' 키를 누른 상태에서 마우스를 클릭하면 위의 화면과 같이 두개의 원이 생기게 되는데 이것은 두개의 손가락을 의미한다. 이것을 드래그하면 손가락의 간격을 줄이거나 늘이거나 할 수 있는데, 화면을 확대하거나 축소할때 손쉽게 사용하는 제스쳐이다.


아이폰 흔들기.
아이폰의 주요 특징의 하나는 위치와 방향에 대한 감각이 뛰어나다는 것이다. 아이폰을 눞이거나 세우거나하는 방식으로 좀더 효율적인 애플리케이션 사용환경을 만들어 줄 수 있고, 좌우로 기울이면서 애플리케이션을 제어할 수 있다. 그리고 흔들기도 가능하다!


그림2. 아이폰을 옆으로 Rotate 상태.

아이폰을 오른쪽으로, 또는 왼쪽으로, 아니면 뒤집어 놓으려면 메뉴를 이용해야 한다. 아이폰을 움직이는 메뉴들은 Hardware 메뉴에서 볼 수 있다.


그림3. Hardware 메뉴

Hardware 메뉴에서 'Rotate Left' 를 선택하면 아이폰이 왼쪽으로 90도 회전한다. 반대로 'Rotate Right' 를 선택하면 아이폰이 오른쪽으로 90도 회전하게 된다. 아이폰을 뒤집어 놓고 싶다면 한쪽 방향으로 두번 회전을 하면 180도를 회전하여 뒤집어진 아이폰의 모습이 된다. 단축키로 '사과' + '->' 또는 '사과' + '<-' 키를 사용할 수도 있다. 그리고 그 아래에 있는 'Shake Gesture' 는 아이폰을 흔들어주는 기능이다. 실제 에니메이션으로 아이폰이 흔들어지지는 않지만, 그 효과가 아이폰에 그대로 적용된다. 아이폰 애플리케이션을 제작하면서 흔들기 제스쳐를 포함시켰다면, 위 메뉴를 사용하여 테스트 해 볼 수 있다. 하지만 한가지 아쉬운 것은 중력센서를 컨트롤 하는 것은 아직 지원하지 않는다는 것이다.


그림4. 아이폰이 'Lock' 된 상태

아이폰에 달려있는 여러가지 버튼들을 사용하기 위해 클릭을 해보면... 아무것도 일어나지 않는다. 단지 가운데 떡하니 자리잡고 있는 홈버튼만이 작동할 뿐이다. 아직 아이폰 시뮬레이터에서는 볼륨조절버튼, 전원버튼, 락버튼등 시뮬레이터에서 보이는 버튼들을 누르는것이 가능하지 않다. 한가지 'Lock' 버튼은 hardware 메뉴에서 선택하여 실행할 수는 있다.


아이폰 시뮬레이터 리셋하기.
맨 처음 'Hello world!' 출력하기 프로젝트 부터, 점점 진화하는 다양한 프로젝트를 개발하면서 공부를 하다보면, 벌써 수많은 어플리케이션이 나도모르는 사이에 아이폰 시뮬레이터에 설치되어 있는것을 볼 수 있다. 문제는 이미 삭제한 애플리케이션까지 설치되어 있다는 것이다.

그림5. 아이폰 시뮬레이터 리셋

아이폰 시뮬레이터는 Xcode 프로젝트에서 빌드하는 모든 애플리케이션을 설치하게 된다. 그렇게 많은 애플리케이션이 설치되면 나중에는 점점 시뮬레이터에 무리가 가게 된다. 결국엔 더이상 프로젝트를 생성할 수 없는 단계에 까지 이르게 되는 것이다. 하지만, 이럴때를 위해 준비된 것이 있다. 바로 리셋! 하드웨어를 포멧하는 것과 같은 작업을 아이폰 시뮬레이터에도 하는것이 가능하다. 메뉴의 iPhone Simulator -> Reset Content and Settings... 를 차례로 선택하면 아이폰 시뮬레이터를 정말로 리셋할것인 확인을 한후 리셋을 한다. 리셋을 하고 나면 다시 쌩쌩하고 깨끗한 아이폰 시뮬레이터 환경에서 애플리케이션을 제작할 수 있을 것이다.

Posted by seanhigher

댓글을 달아 주세요

스마트폰을 사용하는데 있어서 사용자의 의견을 텍스트의 형식으로 입력하는 기능은 필수적이라고 할 수 있다. 텍스트 필드는 사용자가 키보드를 사용하여 원하는 텍스트를 입력할 수 있는 효과적인 오브젝트이다.




Text Field Label - Displays a rounded rectangle that can contain editable text. When a user taps a text field, a keyboard appears; when a user taps Return in the keyboard, the keyboard disappears and the text field can handle the input in an application-specific way. UITextField supports overlay views to display additional information, such as a bookmarks icon. UITextField also provides a clear text control a user taps to erase the contents of the text field.


텍스트 필드 애트리뷰트의 항목.

▼ Text Field
Text : 화면에 표시될 텍스트를 입력한다. 보통은 View 화면에서 곧바로 입력하는것이 편하다.
Placeholder : 아무것도 입력하지 않은 상태일때 텍스트 필드 안에 표시되는 텍스트. 텍스트에 어떤 내용을 입력해야하는지 라벨을 사용할 공간이 부족할 경우 유용하게 사용할 수 있다.
Background : 배경 이미지를 선택할 수 있다. 'Resources' 폴더에 포함되어 있어야만 목록에서 선택이 가능하다.
Disable : Background 와 같이 텍스트의 배경 이미지를 선택한다. 차이점은 Background 가 텍스트 필드가 활성화 될때 나타나는 이미지이고, Disable 는 텍스트 필드가 활성화 되지 않은 일반적인 상황에서의 배경 이미지이다.
Alignment : 텍스트 필드에 쓰여지는 텍스트의 정렬 형태를 설정할 수 있다. 오른쪽의 네모는 컬러를 선택할 수 있다.
Border : 텍스트 필드의 표현 형식을 나타낸다. 일반적으로 가장 오른쪽에 있는 라운드 형태의 박스를 사용한다.
Clear Button : 텍스트를 입력할 때 삭제하는 버튼을 추가한다. Never appears 는 전혀 나타나지 않고. Appears while editing 는 텍스트를 입력하는 동안만, Appears unless editing 는 텍스트 입력을 마친 후에만 나타난다. Is always visible 는 입력할때, 입력한 후 계속 나타나있다. Clear When Editing Begins 의 항목을 체크면 텍스트 필드에 텍스트를 입력할 때마다 이전의 내용을 지우고, 새로 입력을 시작하게 된다.
Font : 텍스트의 서체와 크기를 설정한다.
Font Size : Adjust to fit 항목에 체크를 하고 라벨의 영역을 줄이면 Minimum 으로 정한 폰트 사이즈만큼 폰트의 크기가 줄어들게 된다. 체크를 하지 않을경우는 라벨의 영역을 줄여도 텍스트의 크기가 유지된다.
Text Input Traits : 텍스트를 입력할때의 모양과 키보드에 관한 설정을 하게 된다. Capitalize 는 대문자를 적용하는 방법을 설정한다. 단어별로, 문장별로, 모든 문자에 대문자를 적용할 수 있다. Correction은 자동 교정기능의 사용여부, Keyboard는 입력하고자 하는 내용에 따라 문자, 숫자, 특수문자 등 다양한 형식의 키보를 선택하여 나타나게 할 수 있다. Return Key 를 설정하면 'retun' 키 대신에 Go, google, jion 등 다른 문자가 나타나게 할 수 있다. 만약 비밀번호같이 누군가에게 감추고 싶은 정보라면 Secure 란에 체크를 하면 입력한 텍스트가 가려진다.

▼ Control
Content : 각 오브젝트들의 정렬방식을 정할 수 있다. 그림을 보면 이해할 수 있으므로 보고 알맞은 것으로 정렬을 하면 된다. Highlighted, Selected, Enabled 의 추가적인 선택 사항들이 있다. 어떤 오브젝트들을 선택하고, 정렬에 포함할 것인지에 대해 결정하게 된다.

▼ View
Mode : 뷰에서 상속을 받아 갖고 있는 속성이기 때문에 이미지 뷰의 속성의 특징을 갖지만, 텍스트에서는 크게 영향을 주지 않는다.
Alpha : 이미지의 투명도를 조절하여 뒤에 있는 화면이 보이도록 한다. 숫자가 1 이하일 경우 투명도를 위한 연산을 해야 하기 때문에 필요할 때 이외에는 사용을 자제하도록 한다.
Background : 텍스트 배경 영역의 배경색을 지정한다. 특별한 이유가 없다면 투명상태로 유지한다.
Tag : 개발자가 각 컨트롤러를 구분하기 위해 임의의 태그를 줄 수 있다. 이 항목에 있어서는 IB 나 Xcode 등 애플리케이션이 임의로 변경할 수 없기 때문에 절대적인 구분이 가능하다.
Drawing : opaque 체크박스는 불투명 상태를 설정하게 된다. 알파값과의 차이점은 텍스트가 아닌 뷰에 직접 적용된다는 것이다. Hidden 체크박스는 컨트롤를 숨기는 역할을 한다. Clear Context Before Drawing 체크박스는 실제 컨트롤을 그릴 영역을 깨끗히 지운 후에 새로운 뷰를 그리게 한다. Clip Subviews 체크박스는 하위뷰가 있을 경우 어떻게 표현하지에 대해 설정한다. 체크할 경우 보여지지 않는 부분을 삭제 한 후에 이미지를 보여주게 되는데, 이것은 아이폰 OS 의 입장에서 삭제를 하지 않고 보여주는 것보다 더 자원을 소모하는 것이기 때문에 체크를 하지 않는 것이 기본 설정이다. Autoresize Subviews 체크박스는 뷰의 크기가 변경될 경우 포함되어 있는 하위 뷰의 크기도 변경되도록 한다.
Stretching : 표현하고자 하는 영역이 뷰보다 작을 경우 어떻게 확대할 것인지에 대한 설정을 할 수 있다. 이역시 텍스트에서는 크게 작용하지 않는다.
Interaction : User Interaction Enabled 는 사용자가 객체와 어떤 액션을 할 수 있도록 허용해준다. 이미지와 라벨의 경우는 대게 일반적인 정보만을 보여주기 대문에 이 옵션을 해제해 놓는다. 하지만, 버튼과 같이 액션이 필요할 경우엔 체크를 해 주어야 한다. Multiple Touch 멀티터치 이벤트를 허용할 것인가 이다. 멀티터치를 사용하지 않는다면 해제해 놓도록 한다.

'Dev Center > iPhone Dev' 카테고리의 다른 글

델리게이트는 무엇일까?  (0) 2010.04.19
버튼 Attribute.  (0) 2010.04.18
텍스트 필드 Attribute.  (0) 2010.04.17
슬라이더로 표현하기.  (1) 2010.04.16
라벨 Attribute.  (0) 2010.04.15
이미지 뷰 Attribute.  (3) 2010.04.14
Posted by seanhigher

댓글을 달아 주세요

다양한 애플리케이션을 사용하는데 있어서 중요한 요소중의 하나는 어떠한 정보를 입력하느냐이다. 특히 스마트폰 같이 작은 크기 때문에 키보드 같은 물리적 입력도구를 갖지 못하는 경우에는 더욱 더 신중하게 다루어야 하는 요소이다. 아이폰에서는 몇가지 종류의 키보드를 제공하고 있다. 영어, 한글, 숫자, 특수문자등의 필요에 따라 원하는 키보드를 호출하여 사용이 가능하다.


New Project.
새로운 프로젝트를 시작한다. 'View-based Application' 을 선택하고 프로젝트 이름은 'keyBoard' 로 하였다. 이번에 만들게 될 애플리케이션에는 이미지와 여러개의 라벨, 키보드로 입력이 가능한 텍스트 필드 몇개가 있는 프로젝트이다. 여기서 설명하는데로 따라해도 괜찮지만, 각자 새로운 형태의 구성을 해보는 것도 괜찮다.


그림1. 애플리케이션 구상

그림과 같이 각 영역을 구분지어보고, 각 영역별로 어떤 기능을 담당하게 할 것인가에 대해서 생각해 보아야 한다. 처음에 있는 이미지 영역은 단순히 이미지를 나타내기만 한다. 오른쪽의 텍스트 영역 역시 별다른 수정이나 변화가 필요하지 않다. 이제 아래에 있는 영역들을 보면, 'Name : ' 와 'Anumber : ' 는  텍스트필드 영역에 어떤 내용이 들어가야 하는지에 대해서 설명을 해주기 때문에 별 다른 변화가 필요하지 않다. 오른쪽 아래의 텍스트 필드 영역은 실제적으로 이름과, 군번(Anumber) 가 들어가는 자리이다. 이 영역에는 뭔가 입력을 받고, 데이터를 저장하는 등의 상호작용을 위한 부분이 되는 것이다. 이렇게 구성을 확인해 보면, 아웃렛이나, 액션이 선언되어야 하는 부분이 확실해 질것이다.


아웃렛 선언하기.
아웃렛을 선언해야 하는 부분은 두개의 텍스트 필드 영역이다. 아웃렛을 선언하기 위해서는 뷰컨트롤러.h 파일에 @property를 선언하고, 뷰컨트롤러.m 파일에 @synthesize 를 선언해 주면 된다.


그림2. keyBoardViewController.h 파일 수정

아웃렛을 선언하려는 부분의 프로퍼티를 선언한다. 프로퍼티를 선언하는 것은 다음과 같이 형식을 취하여 선언하면 된다. (굵은 글씨의 부분을 추가)

@interface keyBoardViewController : UIViewController {
    UITextField *nameField;
    UITextField *AnumberField;
}
@property (nonatomic, retain) IBOutlet UITextField *nameField;
@property (nonatomic, retain) IBOutlet UITextField *AnumberField;
@end


그림3. keyBoardViewController.m 파일 수정

헤더파일에 아웃렛을 선언한 후에 뷰컨트롤.m 파일에 @synthesize 선언자를 통해 선언을 해 주어야 접근자 메소드와, 변경자 메소드가 생성된다.

@implementation keyBoardViewController
@synthesize nameField;
@synthesize AnumberField;

또한, 메모리에 관련한 부분도 잊어서는 안된다. 아이폰 처럼 매우 적은 메모리를 사용하는 기기일 수록 메모리가 낭비되는 일이 없도록 꼼꼼하게 프로그래밍을 해야 한다. retain 키워드를 사용해 선언한 변수들을 모두 release 해주어야 한다.

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


이미지 추가하기.
아이폰 프로그래밍에서 이미지를 사용하기 위해서는 'Groups&Files' 창의 'Resource' 폴더에 포함되어 있어야 한다. 아이폰에서 보여주고자 하는 작은 크기의 이미지로 작업을 해야 아이폰에서 이미지 크기를 변경하는 불필요한 연산을 줄일 수 있다. 사용하고자 하는 파일을 파인더에서 'Resource' 폴더로 끌로와서 포함을 시키거나, 'Resources' 폴더의 우클릭 메뉴에서 'Add' -> 'Existing Files...'을 해서 이미지 파일을 추가할 수 있다.


그림4. 이미지 파일 추가.


화면 디자인 하기.
'Resources' 폴더의 'keyBoardViewController.xib' 파일을 더블클릭하여 인터페이스 빌더를 실행한다. 먼저 이미지를 추가하기 위해서는 라이브러리 윈도우에서 'Image View' 를 드래그 해서 View 윈도우에 놓아야 한다.


그림5. 이미지 뷰 추가.

위의 화면과 같이 꽉 찬 화면의 이미지뷰가 뷰 윈도우에서 선택되어 진 것을 볼 수 있을 것이다. 하지만 우리가 넣고자 하는 이미지는 아직 들어가 있지 않다. 이미지뷰는 이미지의 영역을 구분하는 경계정도로 생각하면 된다.


그림6. 실제 이미지 표현

실제로 이미지가 나타나게 하기 위해서는 Attribute 윈도우의 'Image' 에 이미지 파일을 추가해 주어야 한다. 드롭다운 선택 메뉴가 나오는데, 여기에는 'Resource' 폴더에 포함된 이미지들만 나오게 된다. 여기서 원하는 이미지를 선택하면 위의 그림과 같이 이미지가 뷰에 표현되는 것을 볼 수가 있다. 간혹 실제 이미지를 표현하기 전에 이미지 영역이 뷰 영역의 뒤로 표현이 되서 선택을 못하는 경우가 발생하는데, 이럴 경우에는 main 윈도우의 View Mode 를 리스트 보기로 바꾸면 뷰영역안에 포함되어 있는 목록을 볼 수 있다. 여기에서 이미지 뷰 영역을 선택하면 뷰 윈도우에서도 똑같이 선택할 수 있다.


그림7. main 윈도우 리스트로 보기

이미지를 이미지 뷰 위에 올려놓은 후에는 이미지와, 이미지뷰의 크기를 똑같이 하는 작없이 필요하다. 이는 자원의 낭비를 줄이는 것도 되겠지만, 이미지 뷰 영역 자체가 하나의 영역으로 작용하기 때문에, 다른 영역과 겹칠 수 있는 가능성을 없애고, 이미지 외 별도의 효과를 주는 것을 피하기 위해서이다. 이미지 영역을 맞추기 위해서는 '사과키' + '=' 을 누르거나 메뉴에서 'Layout' -> 'Size to Fit' 을 선택하면 된다. 이미지에 대한 작업을 마치고, 라벨을 적당한 위치에 배치하고, 내용을 변경하여 구상했던 모양대로 인터페이스를 구성한다.


그림8. 라벨, 텍스트필드 인터페이스 디자인

이미지와 라벨, 텍스트 영역을 이리저리 움직이다보면 나타나는 가이드 라인을 이용하면 어색하지 않은 인터페이스를 구성할 수 있을 것이다. 각 라이브러리 별 인스펙터도 하나하나 변경해보며 어떤 기능들이 있는지 확인해 보는 것도 재밌는 경험이 될 것이다. 텍스트 필드의 애트리뷰트 중에서는 사용자의 입력의 편의를 위해서 몇가지 주의를 해야 할 항목들이 있다. 먼저 'Clear When Editing Begins' 의 체크박스는 사용자가 텍스트 필드를 선택할때 기존에 있던 내용을 지우고 새로 시작할 것인지를 설정하게 된다. 체크를 해 놓으면 기존의 있던 내용이 텍스트 필드를 선택할 때마다 지워지고, 체크를 해제하면 기존의 내요이 유지가 된다. 보통은 체크를 해제하여 사용하도록 한다. 'Adjust to Fit' 체크박스는 입력하고자 하는 내용이 텍스트 필드의 크기보다 커질 경우 글씨의 크기가 줄어드는데, 줄어드는 정도의 최소 크기를 정하는 것이다. 체크를 해 놓으면 정해진 만큼 이하로는 글씨의 크기가 작아지지 않는다. Keyboard 메뉴는 입력하고자 하는 내용에 맞는 적절한 키보드가 나타나도록 한다. Name 필드 같이 이름을 입력할 경우에는 텍스트로 되어 있기 때문에 일반적인 키보드를 불러내도 상관없지만, Anumber 필드 같이 숫자만 입력하는 필드 같은 경우는 문자대신 숫자로만 이루어진 키보드가 적절하다. 이럴땐 팝업 메뉴에서 'Number Pad' 를 선택하면 숫자로만 이루어진 키보드가 나타나게 된다.


아웃렛 연결하기.
인터페이스를 완성하였다면 아웃렛을 연결해 주어야 한다. main 윈도우의 'File's Owner' 아이콘에서 'ctrl' 키를 누른채 아웃렛이 선언되어 있는 텍스트필드로 끌어주면 아래와 같은 팝업메뉴가 나오고, 텍스트필드에 맞게 선택해 주면 된다.


그림9. 아웃렛 연결

아웃렛을 연결하는 작업까지 마무리 지었다면 모든 과정이 일단은 마무리 되었다. 빌드를 하고 실행을 해보고 멋들어진 애플리케이션의 모습을 보도록 하자.


그림10. 애플리케이션 시뮬레이터.

그림과 글씨가 보이고 뭔가 있어보이는 듯한 애플리케이션을 완성하였다. 텍스트 필드를 클릭하면 텍스트와 숫자를 입력할 수 있는 키보드도 나타나게 된다. 하지만... 뭔가 생각지 못했던 문제가 있다.


키보드 사라지게 하기.
텍스트 필드에 문자를 입력하고난 후 키보드가 사라지지 않는 것이다. 입력을 마쳐도 마쳤다는 신호를 보낼 수가 없다. 어떻게 사라지게 할 수 있을까? 상식적으로 생각을 해보면 된다. 우리가 모든 입력을 마친후 마침을 의미하는 'return' 키를 입력하게 되는데, 아이폰에서도 'return' 키를 입력하였을때 키보드가 사라지도록 만들면 된다. 키보드 화면에서 'return' 키를 입력하게 되면 'did end on exit' 이벤트가 생성되는데 이 이벤트가 발생함과 동시에 텍스트 필드에 대한 입력이 더이상 이루어지지 않도록 하면 된다. 컨트롤러에 액션 메소드를 추가하려면 'keyBoardViewController.h' 파일에 다음의 코드를 추가해 넣으면 된다.

@interface keyBoardViewController : UIViewController {
    UITextField *nameField;
    UITextField *AnumberField;
}
@property (nonatomic, retain) IBOutlet UITextField *nameField;
@property (nonatomic, retain) IBOutlet UITextField *AnumberField;
- (IBAction) textEndReturn: (id)sender;
@end

그리고 'keyBoardViewController.m' 파일에 '(IBAction)' 액션 메소드를 구현하는 코드를 추가한다.

@implementation keyBoardViewController
@synthesize nameField;
@synthesize AnumberField;

- (IBAction) textEndReturn: (id)sender {
    [sender resignFirstResponder];

}


메소드를 구현하는 코드는 특별히 정해진 위치는 없기 때문에 적당한 위치에 입력하도록 한다. 이 메소드는 퍼스트 리스폰더의 상태에서 물러나게 된다. 텍스트를 입력하기 위해 텍스트 필트를 선택하면 텍스트 필드가 현재 실행하고 상호작용하고 있는 컨트롤을 의미하는 '퍼스트 리스폰더'의 상태를 가지게 된다. 그리고 동시에 텍스트를 입력할 수 있는 키보드가 나타나게 된다. 이때 키보드의 'return' 키를 눌러 퍼스트리스폰더 상태에서 물러나게 되는 액션이 실행되면, 더이상 텍스트 필드를 선택한 상태에 머무르지 않게 되는 것이다.


키보드 사라지는 액션 연결하기.
액션을 정의한 후에는 실제적으로 작동을 할 수 있도록 인터페이스 빌더에서 연결을 해 주어야 한다.


그림11. 액션 연결.

액션을 연결하고자 하는 텍스트 필드를 선택하고 'TextField Connections' 윈도우를 보이도록 한다. 텍스트 필드의 키보드에서 'return' 키를 누르면 액션이 반응하도록 할 것이기 때문에 'Did End On Exit' 액션을 이용하도록 한다. 'Did End On Exit' 의 오른쪽 부분의 원에 커서를 가져가면 십자가 모양으로 바뀌는 것을 볼 수 있다. 이것을 끌어다가 main 윈도우의 'File's Owner' 아이콘으로 가져가면 Xcode 에서 퍼스트리스폰더를 포기하는 액션이 정의된 메소드의 이름이 나타나는 것을 볼 수 있다. 이것을 선택하여 액션이 연결되도록 한다.


'return' 키가 없는 숫자패드 사라지게 하기.
일반적인 키보드에는 'return' 키가 포함되어 있어서 입력이 완료되었음을 알려줄 수 있다. 하지만, 숫자로만 이루어진 키패드에는 숫자와 삭제버튼만 있을 뿐이다. 이런 키보드를 사라지게 하기 위해서는 어떻게 해야 할까? 이것 역시 간단하다. 키보드가 아닌 다른 곳을 터치할때 키보드가 사라지게 만들면 된다. 키보드가 아닌 다른곳을 터치할때는 어떤 컨트롤러에 액션을 연결해 주어야 할는걸까? 답은 뷰 컨트롤러에 연결하면 된다. 하지만, 라이브러리를 아무리 찾아보아도 뷰 컨트롤러는 찾을 수가 없다. 하지만, 찾지 않아도 된다. 이미 뷰 컨트롤러는 UIview 안에 포함되어 있기 때문이다. 프로젝트를 생성하면 기본적으로 만들어지는 view 는 여러 뷰 라이브러리를 담아두는 컨테이너의 역할을 한다. 모든 라이브러리가 UIview 의 하위클래스라는 것이다. 또 UIcontrol 역시 UIview 의 하위클래스이기 때문에 view는 control 의 역할까지 가질 수 있는 것이다.


그림12. view 클래스 변경

main 윈도우에서 view 아이콘을 선택하고, 'Control Identity' 윈도우를 띄운다. 위의 그림과 같이 class identity 를 변결할 수 있는 메뉴가 나오는데 view 의 클래스를 UIcontrol 로 변경하도록 한다. 이제 '뷰' 에도 액션을 추가할 수 있게 되었다. 배경을 터치하여 키보드가 사라지는 액션을 추가하는 방법은 이전의 방법과 동일하다. 먼저 'keyBoardViewController.h' 파일에 액션을 선언하는 코드를 추가한다.

- (IBAction) textEndReturn: (id)sender;
- (IBAction) backgroundTap: (id)sender;
@end

그리 고 'keyBoardViewController.m' 파일에 '(IBAction)' 액션 메소드를 구현하는 코드를 추가한다.

- (IBAction) backgroundTap: (id)sender {
    [nameField resignFirstResponder];

    [AnumberField resignFirstResponder];
}

위의 액션이 실행되면 nameField 와 AnumerField 객체가 가지고 있는 퍼스트 리스폰더를 모두 포기하게 된다. 만약 위에 있는 '[nameField resignFirstResponder];' 를 주석처리 한다면 AnumberField 만 퍼스트 리스폰더를 포기하게 되므로, AnumberField 에서만 액션이 작용하는것과 같은 결과가 나타나게 된다.


숫자패드 사라지는 액션 연결하기.
모든 코딩을 마무리 하였다면, 인터페이스 빌더로 이동하여 액션들을 이어주는 작업을 하도록 한다.


그림13. UIcontrol 액션 연결하기.

main 윈도우에서 Control 아이콘을 선택하고 'Control Connections' 윈도우를 띄운다. 이 'Control' 아이콘은 화면의 가장 배경을 나타내는 View 와 같은 것이라고 할 수 있다. View는 화면 전 영역을 나타내기 때문에 버튼에서 사용했던 'Touch up Inside' 액션이 아닌 'Touch Down' 액션을 사용하도록 한다. 'Touch Down' 의 오른쪽에 있는 원으로 커서를 이동시켜 십자가 모양으로 변경되면 이것을 끌어다가 main 윈도우의 File's Owner 아이콘으로 가져다 놓는다. 팝업 메뉴로 나오는 액션 메소드중 배경을 클릭하여 키보드를 사라지게하는 메소드인 'backgroundTap' 메소드를 선택한다. 지금까지의 작업들을 저장하고 Xcode로 돌아가 빌드하고 실행해보도록 한다. 텍스트필드에 키보드를 통하여 입력이 가능하고, 'return' 버튼을 누르거나 배경을 클릭하면 키보드가 사라지는 것을 볼 수 있을 것이다. 좀더 자세한 상호작용이 가능해진 것이다!

Posted by seanhigher

댓글을 달아 주세요

코코아 프로그래밍을 하기 위해서, 또는 아이폰 프로그래밍을 하기 위해서 필요한 것이 Xcode라고 불리는 애플리케이션 제작 툴이다. Xcode는 프로그래밍을 하는데 있어서 쉽고, 간결하게 할 수 있도록 다양한 방법으로 개발자들을 돕고 있다. 그리고 무엇보다도 보기에 좋다는 것!



Xcode project 만들기
맨 처음 Xcode를 실행하게 되면 개발자들을 환영하는 메세지를 볼 수 있다. 처음 나타나는 메세지에서는 새로운 프로젝트를 생성하거나, 이전에 작업하고 있던 프로젝트를 선택 할 수 있다. 그리고 처음 Xcode를 사용하는 사용자들을 위한 튜토리얼과 개발자들을 위한 웹페이지의 링크도 선택할 수 있기 때문에 한번즘 클릭해 보는것도 나쁘진 않을 것이다. 그리고 매번 시작할때 마다 환영 페이지를 보고 싶지 않다면 'Show this windows when Xcode launches'의 체크 박스를 해제하면 된다. 새로운 프로젝트를 생성하기 위해서 'Create a new Xcode project'를 선택한다.


그림1. New Project 선택 화면

그러면 위와 같은 새 프로젝트 선택 화면을 볼 수가 있을 것이다. OS X에서 실행이 되는 응용 애플리케이션을 개발하고자 한다면 왼쪽의 OS X 탭 아래의 메뉴에서 선택을 하면 되고, iPhone용 애플리케이션을 개발하고자 한다면 iPhone 탭 아래에서 적당한 메뉴를 선택하면 된다. 가장 기본이 되는 애플리케이션을 만들기 위해서는 iPhone -> Application -> View based Application 을 선택하도록 한다. 애플리케이션의 이름을 정하고, 저장할 위치를 묻는 화면이 나오는데, 기본으로 설정되어 있는 디렉토리를 사용해도 상관없지만, 다른 데이터와 혼동이 될 수 있으므로, iPhone 프로젝트만을 위한 디렉토리를 따로 생성하여 설정하기를 권한다.


Xcode 'Hello world' project 창 보기.
프로젝트를 생성할 장소까지 설정을 했다면 다음과 같은 프로젝트 화면을 볼 수가 있을 것이다.


그림2. 'Hello World' project

단지 프로젝트 이름만 지어줬을 뿐인데 이미 많은 파일들이 생성되어 있는 것을 볼 수가 있다. 이것들은 개발자의 편의를 위해서 Xcode가 자동으로 기본 템플릿을 가지고 생성해낸 파일들이다. 나중에는 세심하게 살펴 보겠지만, 처음에는 자동으로 파일들이 여러개 생성된다는 사실만으로도 충분하다. 왼쪽에 있는 'Group&Files'는 프로젝트안에 포함되는 다양한 파일들이 들어가 있다. 소스 파일이 포함될 수도 있고, 이미지나, 텍스트, 음성 데이터들이 포함될 수 있다. 각각의 폴더가 의미하는 바는 다음과 같다.

Classes : object-C 클래스 파일들이 모여 있는 곳이다. 개발자가 생성하는 파일들이 들어가는 곳이기도 하다.
Other Sources : object-C 클래스 파일이 아닌 소스코드 파일들이 포함된다. 그리고 맨 처음 프로젝트를 생성하게 되면 두가지의 파일이 자동으로 생성되게 된다. '프로젝트명_Prefix.pch'란 파일과 main.m 파일이다. Prefix.pch는 precompiled header의 약자로 일반적으로 프로젝트를 생성하는데 있어서 꼭 필요한 헤더 파일들을 컴파일 해 놓는 것이다. 기본적으로 사용하는 헤더 파일들을 미리 컴파일 해 놓으면 프로젝트를 빌드 할때 시간을 절약 할 수 있다. main.m 파일은 main() 메소드가 있는 곳으로 MVC 구조를 사용하는 오브젝티브-C의 특성상 수정할 경우가 많지 않다.
Resources : 애플리케이션에 사용되는 파일들이 포함되어 있는 곳이다. 프로그램을 구동하는데 필요한 코드가 아니라 아이콘, 이미지, 소리파일, 동영상등 프로그램을 실행하는데 있어서 필요할 만한 자원들을 보관하는 곳이다. 아이폰에서는 허가된 위치의 파일들 외에는 임의로 접근이 불가능 하기 때문에 실행에 필요한 파일들은 꼭 이 위치에 보관해야 한다. 이 폴더에는 다음의 세가지 파일이 자동으로 생성 된다. '프로젝트 명ViewController.xib', '프로젝트 명-Info.plist', 'MainWindow.xib'. 이 세가지 파일은 프로그램을 실행하는데 꼭 필요한 파일들이기도 하다.
Framework : 이 폴더는 코드, 이미지나, 소리데이터등의 자원들이 포함되어 있는 라이브러리이다. 이 폴더에 포함되는 프레임워크는 자동으로 프로젝트에 링크되어 사용할 수 있게 된다. 기본적으로 사용되는 프레임워크에 포함되지 않는 프레임워크를 사용하고자 할 경우 이 폴더에 포함시킨다.
Products : 프로젝트를 통해 생성된 애플리케이션이 저장되는 곳이다. '프로젝트 명.app'이 프로젝트의 결과물이 된다. 위 그림에서 보면 Hello World.app이 빨간색으로 되어 있는데, 이것은 아직 빌드를 한번도 실행하지 않았기 때문에 파일을 찾을 수 없다는 의미이다.

'Group&Files' 의 창에 표현되는 디렉토리 구조는 OS X 의 디렉토리 구조와 완벽하게 일치하지 않는다. 왜냐하면 'Group&Files'에서 보여주는 디렉토리의 구조는 프로젝트를 작성하는데 있어서 편리하도록 만들어낸 논리적 구조이기 때문이다. 파일을 그대로 복사해서 가져올 수도 있지만, 단지 링크만을 해 둘 수도 있다. 이것은 옵션으로 선택이 가능하다.


Interface Builder 둘러보기.
Xcode를 완성하는 또 하나의 창은 IB라고 하는 인터페이스 빌더이다. 프로젝트창이 보이지 않는 소스코드에 중점을 둔다면, 인터페이스빌더는 프로그램의 외형을 아름답게 꾸미는 일을 책임진다. 개발자가 만들고자 하는 프로그램에 버튼을 하나 추가하고 싶다면 버튼을 의미하는 소스코드를 입력해서 만들 수도 있지만, 인터페이스 빌더를 사용하면 마우스 클릭만으로 간단하게 버튼을 추가 할 수 있다. 이것은 MVC 패턴에 맞추어서 기능과 뷰를 분리하였기 때문에 가능하다. 또한 인터페이스를 만드는데 드는 시간을 줄 일 수 있으며, 좀더 직관적인 디자인이 가능하다는 이점이 있다. 생성한 프로젝트에서 IB의 화면을 보기 위해서는 IB를 책임지고 있는 파일을 선택하면 된다. Resources 폴더의 '프로젝트 명ViewController.xib'파일을 더블클릭한다.


그림3. Interface Builder 의 화면


처음 IB를 실행하게 되면 위와 같이 여러개의 창이 나타나는 것을 볼 수 있다. 이중에서 가장 메인이 되는 창은 가운데 위에 있는 '프로젝트 명ViewController.xib'라고 써 있는 창이다. 인터페이스를 책임지는 모든 xib 파일은 File's Owner와 First Responder 이라는 두개의 파일을 자동으로 포함하게 된다. File's Owner는 xib파일의 객체를 의미한다. 객체지향 프로그래밍에서는 어떠한 오브젝트를 사용하기 위해서 객체를 생성하는데, File's Owner가 첫번째 객체의 역할을 하는 것이다. First Responder는 현재 사용자와 프로그램이 상호작용을 하고 있는 객체를 의미한다. '1' ~ '9'로 표현되는 버튼을 생성하였다. 이 때 사용자가 '2'라는 버튼을 눌렀다면 '2'라는 버튼은 현재의 퍼스트 리스폰더이다. 퍼스트 리스폰더는 그 때에 작용하는 객체를 말하기 때문에, 사용자와 상호 작용을 하는데 있어서 매우 중요한 역할을 한다. 그리고 'View'라는 아이콘이 포함되어 있는 것을 볼 수 있는데, 이것은 화면에 나타나는 '뷰'를 의미한다. 지금 당장에는 하나의 뷰만을 가진 애플리케이션을 작성하기 때문에 하나밖에 없지만, 좀더 복잡한 애플리케이션을 작성하게 되면 여러개의 뷰가 생성 될 것이다.


프로젝트 창과 인터페이스 빌더는 iPhone 프로그래밍이나, 코코아 프로그래밍을 하는데 있어서 매우 중요한 요소이다. 그리고 개발자들이 가장 기본적으로 사용하게 되는 창이기도 하다. 이 두개의 화면에 익숙해진다면 아이폰 프로그래밍을 하는 것도 그렇게 어렵게 느껴지지 않을 것이다.

Posted by seanhigher

댓글을 달아 주세요

전세계적으로 아이폰의 열풍은 대단하다. 전화만 가능했던 단순한 피처폰에서 뭐든지 '다' 된다는 스마트폰으로의 세대변화를 이끈 주역이라고 할 수 있다. 그리고 이러한 아이폰을 더욱 더 강력하게 만드는 애플의 CEO인 스티브 잡스의 대중을 사로잡는 마력과, 10만개를 훌쩍 넘어버린 아이폰 앱 스토어의 풍부한 애플리케이션이 있었기 때문이다.


OS X
아이폰 개발을 하기위해서는 특별한 개발 환경이 필요하다. 바로 OS X 이다. 윈도우, 리눅스와는 다른 애플만의 직관적인 OS이다. 애플은 처음 애플 컴퓨터를 만들때 부터 하드웨어와 소프트웨어를 통일하여 만들어왔다. 유닉스 기반의 안정적이고 사용하기 편안 컴퓨터를 모토로 개발해 온 것이 지금의 iMac을 만들게 되었다. 그와 함께 발전하게 된것이 OS X 이다. 이전에는 모든 부품들을 애플에서 만들었지만, 2006년 인텔의 CPU를 사용하면서 좀더 경제적인 제품을 생산하게 되었고, 부트캠프의 사용과 함께 조금은 더 나아진 호완성을 가지게 되었다. 이때부터 애플은 아이맥이 널리 알려지게 되었고, 많은 사람들이 한번쯤은 가져보고 싶은 아이템이 되었다. 인텔칩을 사용하게 된 애플덕분에 일반 컴퓨터에서도 해킨토시라 하여 불법으로 개조된 OS X 가 인터넷 상에 돌아다니게 되었으며, 이것은 애플을 더욱 더 알리는 계기가 되었다.


Objective-C
유닉스 기반의 오에스 텐은 일반적인 C언어가 아닌 오브젝티브 C 언어를 사용하고 있다. 순차적인 C의 단점을 보완한 오브젝티브 C는 객체 지향적인 관점에서 좀더 편안한 프로그래밍을 제공해주며, 유연함과, 풍부한 라이브러리, M(model)-V(view)-C(control)의 프로그래밍 구조를 확고히 하였다. 개발자들이 창의적인 생각으로 개발을 할 수 있도록 여건을 만들어 주었다.


Xcode
엑스코드는 애플의 코코아(Objective-C)프로그래밍을 가능하도록 하는 통합개발도구이다. 너무나도 직관적인 인터페이스를 만들어주는 IB(InterfaceBulider)은 이미 많은 프로그래머로 하여금 Xcode와 코코아 프로그래밍에 빠져들게 만들었다. 코코아 터치를 사용하는 아이폰 프로그래밍은 Xcode 도구를 통해서 개발에 참여할 수 있다. 새롭긴 하지만, 조금만 해본다면 그 편리함에 놀라게 될 것이다.


Xcode for iPhone SDK 설치하기.
애플제품을 사용하는, 아니 애플 사이트에 등록한 사람이라면 누구나 Xcode를 다운로드 받을 수 있다. 물론 OS X에서만 설치할 수 있다는 단점이 있긴 하지만... 아이폰 SDK는 애플개발자센터에서 다운로드 받을 수 있다.


그림1. 애플 개발자 센터

애플 개발자 센터는 크게 세가지로 나뉘어 지는데, 맨 처음에 있는 'iPhone Dev Center'을 선택하도록 한다.


그림2. 로그인

SDK를 다운로드 받기 위해서는 로그인이 필요하다.


그림3. 아이폰 개발자 페이지

로그인을 하면 위와 같은 화면을 볼 수 있다. 맨 위의 다운로드를 선택하여 다운로드 페이지로 이동할 수 있다. 이미 Xcode가 설치되어 있는 사람이라도 다시 iPhone SDK를 다운로드 받아서 설치하면 된다. Leopard나 snow Leopard는 상관없지만, Tiger이전의 버전은 Xcode 2.x 버전을 다운로드 받아 설치해야 한다.


그림4. iPhone SDK 디스크 이미지 파일

'iPhone SDK and Tools for Snow Leopard' 패키지를 클릭하여 설치를 진행한다.


그림5. 설치 시작 화면


그림6. 설치 동의

설치를 하는데는 그리 어려운 부분들이 없다. 설치에 관한 동의를 몇번 하고, 설치 위치, 설치 항목들을 선택하고 나면 Xcode의 설치가 완료된다.


그림7. iTunes 종료 요청 메시지.

iPhone SDK를 설치하는 도중에 iTunes가 실행되고 있다면 위와 같이 종료하고 설치를 진행해 달라는 메시지가 나온다.


그림8. 설치 완료.

설치가 진행되고 위와 같이 설치가 완료되었다는 메시지를 볼 수 있다.


그림9. iPhone SDK의 실행파일 위치

iPhone SDK(Xcode)는 자신의 하드의 'Developer -> Applications' 디렉토리에서 Xcode라는 실행파일을 찾을 수 있다.


그림10. iPhone SDK 실행 화면.

Xcode를 실행하면 환영 메시지 후에, 위와 같은 화면을 볼 수 있을 것이다. 왼쪽에 보면 알 수 있듯이, 윗부분은 아이폰 애플리케이션을 위한 프로젝트가 있고, 아래쪽에는 OS X 애플리케이션을 위한 텝이 자리하고 있다. 이제부터 하나씩 아이폰 개발을 배워보도록 하자.



Posted by seanhigher

댓글을 달아 주세요

사람들이 mac을 사용하는 이유는 다양하다. 감탄사가 절로 나오는 멋진 외모 때문에, 윈도우를 벗어난 다른 OS를 경험하고 싶어서, 혹은 아이팟에 매료되어 맥북이 아이팟을 사용하는 하는데 유용하다고 하는 등... 하지만, 맥은 개발자들에게도 탐하고 싶은 아이템중의 하나이다. 맥은 개발자들이 더욱 편하고, 간단하게 개발에 몰 두 할 수 있게끔 만들어 주었다. 바로 Xcode라는 환상적인 개발도구를 통해서!


About Xcode.
애플은 개발자들이 개발에만 전념할 수 있도록 훌륭한 개발 도구를 준비했는데, 그것이 바로 Xcode이다. Xcode는 맥을 사용하는 사람이라면 누구나 사용할 수 있게 공개되어 있다. Xcode는 맥용 어플리케이션을 만드는 cocoa 프로그래밍을 하도록 만들어졌지만, Java, objective-C, C, C++, 파이썬, 루비등 거의 대부분의 프로그래밍이 가능하다. Xcode를 완성하는 인터페이스 빌더는 그 수려한 외모와 사용의 편리함 때문에 한번 Xcode를 사용하면 헤어나오지 못할 정도이다.


Xcode 다운로드.
Xcode는 애플 개발자 센터에서 다운로드 받을 수 있다. 맥을 사용하지 않는 사람이라고 해도 다운로드는 받을 수 있다. 물론 설치를 하는 것은 어렵겠지만... 애플 개발자 센터의 웹 주소는 다음과 같다. developer.apple.com


그림1. 애플 개발자 센터

애플 개발자 센터에는 iPhone, Mac, Safari의 세가지 개발 센터를 가지고 있다. 일반적인 Xcode를 다운로드 받기 위해서는 Mac Dev Center를 선택한다.


그림2. Mac Dev Center

누구나 개발도구를 다운로드 받을 수 있지만, 한가지 조건이 있다. 웹 사이트에 가입이 되어 있어야 한다는 것이다. 애플 아이디가 있다면 그것으로 가능하다.


그림3. 로그인 화면


그림4. Xcode 다운로드 페이지.

이제 Xcode를 다운로드 받을 수 있다. 하지만, 3.x버전은 Lopard(10.5)버전 부터 가능하다. 만약 Tiger(10.4)이하의 버전을 가지고 있다면
2.x버전의 Xcode를 다운로드 받아야 한다.


Xcode 설치하기.
다운로드 받은 dmg 파일을 열어보면 PDF파일과 Xcode 설치 패키지가 들어있는것을 볼 수 있다. 패키지 파일을 더블클릭하면 Xcode 설치가 시작된다.


그림5. Xcode.dmg


그림6. Xcode 소개


그림7. 사용권 계약


그림8. 설치 옵션


그림9. 설치 위치

설치를 하는 것은 그리 어렵지 않다. 설치 옵션을 선택하고, 설치 위치를 정하면 어렵지 않게 설치를 진행 할 수 있다.


그림10. 설치 완료

설치가 완료되었다. 하지만, 응용프로그램 폴더에는 Xcode실행 파일이 보이질 않는다. 실행파일은 HD -> Developer -> Application에서 찾을 수 있다.


그림11. Xcode 실행 파일

비쥬얼한 개발 환경으로 개발자들을 사로잡는 Xcode를 사용한다면, 여러분들의 개발이 즐거워질 것이다.

Posted by seanhigher

댓글을 달아 주세요

  1. 2011.02.07 15:17 해랑  댓글주소  수정/삭제  댓글쓰기

    넘 감사드려요^^ 마지막에 어떻게 실행하는지 몰라서 난감해하고 있었거든요 ㅎㅎ

  2. 2011.07.22 02:57 ㄱㅅ  댓글주소  수정/삭제  댓글쓰기

    헤매고 있었는데ㅜㅜ 정말 감사해요!!!

  3. 2013.01.20 23:10 신고 History+Young  댓글주소  수정/삭제  댓글쓰기

    애플개발자 오늘 등록해서 다운로드 받았습니다. 마운틴 라이언 이후에는 App Store에서 바로 다운로드 설치되는군요.

맨 처음 프로그래밍을 하게되면 "Hello world"라는 문장을 출력하는 것에서부터 시작한다. 처음에는 내가 작성한 문장이 화면에 출력되게 만들었다는 것만으로도 굉장히 흥분되고, 실행된다는 사실이 경이롭기까지 하다. 조금씩 더 많은 프로그래밍의 기술을 익히게 되면서 프로그램의 길이도 길어지게 된다. 많은 명령어들을 타이핑해야 하고, 반복해야한다. 또한 프로그램에 잘못된 점은 없는지 디버깅을 해야 한다. 그래도 오래된 프로그래머들은 전문적인 툴을 사용하게 된다.


 
프로그램 개발 환경.
프로그램을 개발하기 위해서는 우선 준비되어야 할 것들이 많이 있다. 프로그램을 실행하기 위한 환경이 필요하고, 프로그램 코드를 작성하기 위한 개발 툴이 필요하다. 특히 개발 툴은 개발자에게 있어서 매우 중요하게 여겨진다. 개발자의 특성에 따라 편하게 사용될 수도 있고, 매우 불편하게 개발을 하게되는 불상사가 일어날 수도 있다. 이전의 개발 도구는 컴파일러, 텍스트 편집기, 디버거를 모두 따로 설정하고, 실행해야 했다. 하지만, 지금은 이 모든 기능을 IDE(Integrated Development Environment)라고 하는 통합개발환경으로 묶어서 개발자들에게 제공되고 있다. 더욱이 커맨드라인이나, 텍스트 형식에 그치는 것이 아닌 GUI(Graphic User Interface)의 모습으로 개발자들의 인터페이스 디자인을 해야하는 수고를 굉장히 덜어주고 있다. 대표적인 통합개발도구에는 윈도우에서 사용하는  visual Studio와 OS X 에서는 Xcode가 있으며, 자바 개발자들이 가장 선호하는 Eclipse등이 있다.


Eclipse.
이클립스는 Eclipse Foundation에서 제공되고 있는, Equinox OSGi 런타임에 기반한 오픈소스 프로젝트의 집합이다. 처음에는 Java IDE를 개발하기 위해서 시작되었는데, 시간이 지나면서 그 유용성과 확장성으로 인해 자바뿐만 아니라 enterprise, mobile, embedded등 거의 대부분의 개발환경을 지원하게 되었다. 특히 Eclipse Platform은 그 자체가 다양한 기능을 지원하는 플러그인 형식으로 구성되어 있다. 이것은 개발자 스스로가 자신이 원하는 기능을 플러그인으로 추가하여 사용할 수 있다는 것이다. 이러한 이클립스의 유연함은 많은 개발자들이 이클립스를 사용하게끔 만들었고, 개발자들이 원하는 방향으로 수많은 플러그인이 개발됨으로써, 더욱 개발자들이 원하는 통합개발환경이 되어가고 있다. 무엇보다도 이 환상적인 개발도구가 OS에 상관없이 무료로 사용할 수 있다는 점은 큰 매력이 아닐 수 없다.


Eclipse IDE 설치하기.
이클립스틑 이클립스 재단에서 자발적인 개발자들에 의해서 개발되고 있다. 이클립스 개발도구를 설치하기 위해서는 이클립스 재단의 홈페이지에 접속을 한다. eclipse.org. 메인 화면에는 다양한 버전의 개발환경과, 다운로드 페이지, 공지등을 전하고 있다.


그림1. eclipse.org 홈페이지

오른쪽을 보면 다운로드 페이지를 어렵지 않게 찾을 수 있을 것이다. eclipse IDE를 다운받기 위해 다운로드 페이지로 이동한다.


그림2. eclipse 다운로드 페이지

이클립스는 다양한 버전의 IDE환경을 제공한다. 각자의 필요에 따라 알맞는 버전을 선택하면 된다. C/C++, Java, PHP등이 있으며 웹 프로그램을 하기위해서는 Java EE를 선택하도록 한다. 각 버전의 차이는 단지 어떠한 플러그인이 포함되어 있느냐의 차이에 불과하기 때문에 아무것이나 상관은 없다. 하지만, 따로 플러그인을 설치해 주어야 하는 단점이 따르게 된다. IDE버전과 OS를 선택한후 Torrent나 http를 통해서 다운로드 받도록 한다. (Intel Mac의 경우는 대부분 Cocoa 버전을 다운받으면 무리없이 사용할 수 있을 것이다.)


그림3. Eclipse 디렉토리

Eclipse IDE 파일을 다운로드 받아서 압축을 풀게 되면 Eclipse 디렉토리를 볼 수 있다. 이클립스는 따로 설치 환경을 필요로 하지 않는다. 단지 압축을 푼 디렉토리를 사용하고자 하는 곳으로 이동을 하여 실행파일을 실행해주면 되는 것이다. OS의 환경에 전혀 영향을 주지 않는다. Application 디렉토리나 원하는 디렉토리에 Eclipse를 옮겨놓고 실행파일을 실행한다.


그림4. Eclipse GALILEO


그림5. workspace 설정.

처음 이클립스를 실행하게 되면 워크스페이스를 설정하는 화면이 나온다. 위크스페이스는 이클립스를 통해서 개발되는 소스등의 프로그램들이 저장될 위치를 말해준다. 매번 실행할때마다 다른곳을 설정할 수도 있고, 'Use this as the default and do not ask again' 에 체크를 하면 현재의 디렉토리가 기본 workspace로 설정이 된다. 이것은 나중에 환경설정에서 바꿀 수 있다.


그림6. eclipse welcome 화면

처음 eclipse를 실행하면 위와 같은 화면을 볼 수 있다. welcome 화면에서는 처음 이클립스를 사용하는 사람들을 위하여 샘플코드와, 튜토리얼을 실행해 볼 수 있다. 이미 이전 버전을 사용해본 사람이라면 자신이 원하는 프로젝트를 바로 선택할 수도 있고, 오른쪽 위에 있는 workbench로 이동하여 프로젝트를 진행할 수도 있다.


그림7. Java EE perspective

워크벤치로 이동을 하게 되면 위와 같은 화면을 볼 수 있을 것이다. 우리는 Java EE를 설치 했기 때문에 Java EE 퍼스펙티브가 기본으로 설정되어 있다. 퍼스펙티브는 개발환경의 편의를 위해 각종 뷰들을 구성해 놓은 것을 말한다. 만약 사용자가 다른 퍼스펙티브를 선택하게 된다면 위와는 다른 화면을 보게 될 것이다. 또한 위의 기본 퍼스펙티브를 자신이 자주 사용하고, 편리하게 사용하는 모양으로 바꾸어 나타나게 할 수도 있다.

이클립스는 여러분이 프로그램을 개발하는데 있어서 가장 경제적이고, 기능적인 개발 환경을 제공해 줄 것이다.
Posted by seanhigher

댓글을 달아 주세요

최근에 달린 댓글

글 보관함