나의 첫번째 iPhone 어플리케이션 개발하기

아이폰 개발이라는 카테고리를 떡하니 만들어 놓고 지금까지 계속 Object-C만을 글쓰고 있었네요.

하지만 역시 기본이 중요하긴 중요합니다. 지금까지 정도의 Object-C를 이해하고 계신다면 이제부터 진짜로 나오는 아이폰 개발은 별로 어려움 없을꺼라 생각합니다.

XCode 사용법한번 정리해 본적 없으니 이번 글은 XCode를 살짝 이해하는 과정이 되지 않을까 생각해 봅니다.

XCode를 실행하여 File -> New Project를 하여 View-Based Application을 선택하여 프로젝트를 만들어 봅시다.

저는 FirstProject라는 이름으로 하였습니다.

사용자 삽입 이미지새로운 프로젝트를 생성하고 나면 다음과 같은 화면을 볼 수 있습니다.
사용자 삽입 이미지이 화면이 아이폰을 개발하며 가장 많이 보게 될 IDE(Integrated Development Environment)화면입니다.

우선 알아두실것은 A의 클래스들과 B의 리소스들입니다. C++의 MFC개발을 많이 해보셨다면 이미 짐작하셨을것입니다.

Classes에는 앞으로 사용할/추가할 모든 클래스들을 모아두는 곳입니다. Resources에는 뷰와 프로젝트 설정파일인 Info.plist 파일을 넣어두는 공간이 되겠습니다.

Resources안의 FirstProjectViewController.xib파일을 더블클릭하여 Interface Builder를 띄워 봅시다.
사용자 삽입 이미지위와 같은 화면들을 만날 수 있습니다. 왼쪽은 Inspector입니다. 만약에 없다면 Tools -> Inspector를 선택해 주면 보실 수 있습니다.

Inspector의 하위 메뉴로 있는 4가지는 각각 Attributes, Connections, Size, Identity입니다.

오른쪽은 Dock 윈도우 입니다. 눈에 보이지 않는 리소스들이 이곳에 나오게 됩니다. 앞으로 실제 클래스들과 매핑하는등의 연결을 하는데 이용됩니다.
사용자 삽입 이미지그리고 너무 길어 부담스럽지만 위의 화면은 Library 윈도우 입니다.

설명을 안해도 이미 아시겠지만 모든 컨트롤 라이브러리들이 이곳에 등록되어있습니다.

실제 개발할 뷰에 끌어다 놓는것만으로 컨트롤을 추가 할 수 있습니다.

이제 예제 개발을 위해 라벨과 버튼을 View에 추가해 보겠습니다.
사용자 삽입 이미지각 컨트롤러의 값은 더블클릭하여 문자를 변경할 수 있습니다.

라벨의 경우 으로 버튼의 경우 Click!으로 값을 변경해 놓았습니다.

위에서 사용된 컴포넌트 라이브러리들은 Library – Cocoa Touch Plugin – Inputs&Values안에 들어있습니다.

라벨의 문자열 중앙정렬은 Inpector윈도우의 속성(Attributes)에 보시면 Layout이라고 있습니다.

이제부터 XCode개발의 묘미라고 해야 할까요 적응 안되는 변화라고 해야 할까요.

신기한 방법으로 개발하는 방법을 경험해 보도록 하겠습니다.


Dock 윈도우의 File’s Owner를 선택하고 Inpector 윈도우의 Identity탭을 선택하여 봅시다.


사용자 삽입 이미지Class에 보니 FirseProjectViewController라고 되어있군요. 저 File’s Owner는 이 클래스와 매핑되어있다고 생각하시면 됩니다.

XCode에 돌아가서 위에서 나온 FirstProjectViewController 클래스에 몇가지를 추가해 봅시다.
[code]// FirstProjectViewController.h
#import <UIKit/UIKit.h>

@interface FirstProjectViewController : UIViewController {
    IBOutlet UILabel *label;
}
– (IBAction)buttonClick:(id)sender;
@end[/code]
[code]// FirstProjectViewController.m
// 다음의 구현을 추가
– (IBAction)buttonClick:(id)sender {
    [label setText:@”Hello My First Project!”];
}[/code]


아웃렛(Outlet)은 우리나라에서 부르는 콘센트와 같이 무언가를 연결하는 플러그를 뜻합니다.

IBOutlet은 저 label이 어딘가와 연결되는 창구임을 뜻하는 것이라고 생각하시면 될 것 같습니다.

위의 코드는 buttonClick이 호출되면 label에 “Hello My First Project”를 값으로 정한다고 보시면 됩니다.

그리고 저 label이 아까 우리가 View에 추가한 라벨에 연결시키면 되는 것이죠.

연결을 해보겠습니다. 밑에 보이는 저 사각형이 곧 클래스라는 것이죠.
사용자 삽입 이미지컨트롤키를 누른상태로 버튼을 드래그 하여 File’s Owner 객체로 끌어다 놓습니다.
사용자 삽입 이미지위와 같이 미리 구현해 두었던 buttonClick이라는 메서드가 나옵니다. 선택해 줍시다.
사용자 삽입 이미지buttonClick과 연결이 완료되었습니다. 오른편의 동그란 부분에 흰색으로 칠해져 있죠. 연결이 된것을 알 수 있습니다.
사용자 삽입 이미지반대로 컨트롤 키를 누르고 라벨이라는 변수를 끌어다가 라벨 위에 올려놓습니다.
사용자 삽입 이미지마찬가지로 흰색으로 칠해지며 연결이 완료 되었음을 알 수 있습니다.

위와 같은 연결로 버튼을 클릭하면 buttonClick이 호출될 것이고 label의 Text속성을 변경하면 바로 눈에 보이는 라벨의 값이 변경되게 됩니다.

Build&Go로 시뮬레이터를 실행하여 실행할 수 있습니다.
사용자 삽입 이미지

Click버튼을 누르면 잘 되는 것을 알 수 있습니다.

  • 혹시 마지막 사진에서 Click 눌러보신분? ^^;;;

    • 아이

      허걱~! 그걸 눌러보시다니~ㅎㅎ

  • gawaguci

    ㅋㅋ저~ 눌러봤어요~ㅜㅜ

  • gyodeok

    와~ 방금 해봤습니다. ^^
    맥북 처음사서 해본 첫 프로젝트.. 이제 시작이군요.
    the eye님 감사합니다!!

  • bluechap

    왠지 ‘Click!’ 보면 누르고 싶다는… 암거나 막 누르면 않되는데 ㅡ.ㅡ

  • 좋은글 너무감사

    좋은 강좌 정말로 감사합니다.
    책보다 하두 안되서 검색하다가 이런 블로그를 발견하다니..
    글쓴이님 감사합니다~~