아이폰 프로그램에 사용되는 Object 활용법

필자소개 : 안경훈 linuxgood@gmail.com｜리눅스와 맥OS에 관심이 많으며, 모바일 디바이스에서 동작되는 사용자 중심의 프로그램을 개발하는 것에 흥미를 가지고 있다. 현재 삼성SDS에서 근무 중이다.

원문출처 : 월간 마이크로소프트웨어
http://www.imaso.co.kr/?doc=bbs/gnuboard.php&bo_table=article&wr_id=34435

 

지난 호에는 Objective-C 문법이라는 다소 딱딱한 주제로 연재를 진행했다. 지면 관계상 생략된 부분도 많이 있었고, 전체 영역을 커버하기가 어려운 부분도 있었다. 최근에는 번역이나 집필이 잘 된 아이폰 개발서들이 많이 있으므로 적당한 Obj-C 참고 서적을 한 권 구입하는 것도 좋을 것 같다. 개인적으로는 한글로 된 집필서를 추천해 주고 싶다.

이번에는 아이폰에서 자주 사용되는 Object들에 대해 알아보자. 윈도우 프로그램 개발용 툴에서도 UI 설계를 도와주기 위해 비주얼한 common control들을 제공해 주는 것이 보통이다. 아이폰에서도 이렇게 공통적으로 사용되는 컨트롤들이 있는데, 이것을 Object라고 부른다. Object들은 Interface Builder(IB)에서 드래그&드롭 방식으로 사용될 수 있다(<화면 1>참조).

IB에서는 Library라는 창에 <화면 1>처럼 <Objects>를 선택하고, Cocoa Touch에 네 가지 영역으로 구분해 놓은 것을 알 수 있다. 이 곳에 아이폰에서 사용되는 기본적인 버튼들이나 라벨, 텍스트 박스 등이 모두 들어있다. IB로 개발한다면 여기에 있는 Objects들을 활용해 UI를 구성하면 된다. 애플에서 미리 만들어 제공하는 Objects 이외에 개인적으로 만들어 추가하고 싶다는 생각이 있을 수 있다. 아이폰이 제한적인 자원을 사용하는 기기이기 때문에 앱스토어의 정책에 의해 개발한 애플리케이션이 리젝되는 사유가 될 수도 있다.

Object 용도와 사용법
이번 호에서는 Cocoa Touch 카테고리에 있는 Object들의 용도와 사용법을 알아보자. 화면에서 보이는 것처럼 각각의 Object들이 선택되면 간략한 설명이 나온다. 이들 Object들은 IB를 사용하는 동안 드래그&드롭 방식으로 View에 추가할 수 있다.

Controllers
이 Object들은 <화면 2>에서 볼 수 있는 것과 같이 아이콘들로 구성돼 있다. 이름에서 보여주듯이 주로 View에 해당하는 Object들로 구성돼 있다.

세부적으로 살펴보자.

View Controller
이것은 View를 하나 추가할 때 사용한다. Window-Based로 프로젝트를 시작했을 때나 View를 추가할 경우 사용하게 된다. 자체적으로 어떤 역할을 하기보다는 그 위에 toolbar, navigation bar 등이 추가됐을 경우에 주로 사용한다.

Navigation Controller
이 Object는 View에 네비게이션 컨트롤러가 추가된 형태로 사용할 경우 사용된다. <화면 4>처럼 View와 네비게이션 바가 추가된 형태의 템플릿이 추가된다.

옵션으로는 네비게이션 바가 보이도록 하는 <Shows Navi gation Bar>와 View의 아래쪽에 툴바가 보이도록 하는 <Shows Toolbar>가 있다.

사용자가 기본적으로 변경할 수 있는 항목으로는 세 가지가 있는데, 이들은 각각의 Object들에 공통적으로 적용될 수 있다.

1. Status Bar : 이것은 아이폰에서 배터리 표시 아이콘이 있는 바의 타입을 결정한다. <화면 5>와 같은 형식이 있다.

2. Top Bar : 상단에 위치하는 타이틀 바의 타입을 변경할 수 있다. <화면 6>과 같은 타입이 있다. 이 항목들을 선택하면 IB에서 Top Bar의 형태를 실시간으로 확인할 수 있다. 

3. Bottom Bar : 하단에 위치하는 Bar의 타입을 결정할 수 있다. 하단에 위치할 Bar 타입은 탭바와 툴바 등의 형태가 있을 수 있다.

Tab Bar Controller

화면 하단에 <화면 8>의 상단 이미지와 같은 탭바를 가진 View를 만들 때 사용한다. Tab Bar의 아이템은 View controllers 항목에서 추가·삭제할 수 있다.

 

Table View Controller
여러 가지 형태의 테이블 View를 생성해 준다. 중요한 선택사항으로는 Style(<화면 9>처럼 Plain, Grouped 형태를 선택할 수 있다)과 테이블 View를 그리는 방식을 정의한 View Mode 등이 있다.

Image Picker Controller
이미지를 선택할 수 있도록 View를 생성해 준다. 아이폰에서는 사진을 찍었을 경우 DB에 사진과 관련된 여러 가지 메타데이터를 저장하게 되는데, 이 Controller가 이들 정보를 <화면 10>과 같이 Picker 형태로 가져오게 한다. IB에서 수정할 수 있는 타이틀 바의 형태는 View의 Mode 정도이다.

이상이 IB의 Library Controllers에서 개발할 때 사용할 수 있는 템플릿들이다. IB에서 기본적으로 제공되지 않는 부분은 개발하면서 직접 추가·수정해 줘야 한다.

Data Views
이제부터는 <Data Views> 항목에 해당되는 Object들을 살펴보자. 각각의 항목들은 View라는 이름의 아이콘 형태로 IB에서 제공된다. Controller 항목과 다른 점은 Controller View라는 일종의 폼은 생성하지 않고 이미 생성된 View에 Object를 배치한다는 점이다. 따라서  여러 가지 Object들을 하나의 View의 디자인 시점에 포함시킬 수 있다. 각각의 Object들은 Controllers에서 본 것과 Attribute나 모양은 유사하다.

사용 방법 자체는 Controllers에서 본 것과 유사한 Object들이 많다. 따라서 앞에서 언급하지 않은 항목들만을 알아보자.

Image View
이미지 뷰는 하나의 이미지나 배열을 사용해 이미지를 연속적으로 보여주는 애니메이션 등에서 사용할 수 있는 Object이다.   <화면 13>과 같이 사용할 수 있는데, Image View에서 사용할 이미지는 Xcode로 미리 복사해 줘야 한다. Attribute로 설정할 수 있는 항목으로는 View에 배치할 때 정렬을 담당하는 Mode와 투명도(Alpha), 배경 이미지의 색상(Background), 화면에 그려질 때 정의되는 여러 가지 속성(Drawing), 그림의 사이즈가 View의 사이즈보다 작을 때 어떤 사이즈로 확대할지 정의하는 속성(Stretching), 멀티 터치 등의 사용자 동작을 받아들일 것인지의 속성(Interaction) 등이 있다.

Web View 

웹 페이지를 읽어오는 역할을 하는 Object이다. Attribute는 <화면 14>와 같은 것들이 있다. 실제로 웹 페이지를 로드하기 위해서는 <리스트 1>과 같은 간단한 코드가 필요하다.

<리스트 1> 실제 웹 페이지 로드를 위한 코드 ObjectTestViewController.h --------------------------- #import <UIKit/UIKit.h> @interface ObjectTestViewController : UIViewController {    UIWebView *web; } @property (nonatomic, retain) IBOutlet UIWebView *web; @end ObjectTestViewController.m -------------------- - (void)viewDidLoad {   // View가 로드될 때 처음으로 로드되는 // 이동하길 원하는 웹페이지 NSString *urlAddress = @"http://www.linuxgood.com"; // 이동하려고 하는 웹 페이지의 주소 저장 NSURL *url = [NSURL URLWithString:urlAddress]; // 실제로 이동할 때 사용되는 URL Object를 저장 NSURLRequest *requestObj = [NSURLRequest requestWithURL:url]; //UIWebView에 표시한다. [web loadRequest:requestObj]; }

Map View

구글맵을 사용하는 애플리케이션을 제작할 때 사용하는 Object이다. 맵은 세 가지 방식으로 표현될 수 있는데, Type Attribute에서 지정할 수 있다. 지도(Map)와 위성(Satellite), 그리고 둘 다를 한 번에 표시하는 방식(Hybrid)이 그것이다.

Map View를 사용하려면 다른 Object들과 달리 MapKit. framework을 추가해야 한다. Xcode 통합 환경의 <Groups & Files> 트리에서 <화면 14>처럼 해당 Frameworks를 추가할 수 있다.

수정 가능한 속성에는 <화면 15>와 같은 것들이 있다. 주요 속성으로는 지도 애플리케이션이므로 확대와 이동이 가능하도록 하려면 Interaction 항목에서 Zoom과 Scroll이 가능하도록 체크를 해야 한다.

Map View Object를 활용해 지도를 보이게 하려면 <리스트 2>와 같은 코드를 추가해야 한다.

<리스트 2> Map View Object 활용해 지도 보이게 하는 코드 ObjectTestViewController.h ----------------------------------- #import <UIKit/UIKit.h> #import <MapKit/MapKit.h> //Map View를 헤더 파일을 import 한다. @interface ObjectTestViewController : UIViewController {    MKMapView* mapView;  } @end ObjectTestViewController.m ------------------------------------- - (void)viewDidLoad {    [super viewDidLoad];    mapView.showsUserLocation = YES;   // 지도를 보여주는 부분이다. }

이 코드를 적용해 빌드하면 <화면 16>과 같은 구글 지도를 볼 수 있다. 앞에서 Zoom과 Scroll 속성을 체크했으므로 원하는 위치까지 스크롤해서 상세하게 지도를 볼 수 있다.

Text View 

일반적인 텍스트 뷰어 역할을 하는 Object이다. 아이폰에서 텍스트 문서를 읽을 때 사용할 수 있다. 주요 속성으로는 <Text Input Traits>라는 그룹이 있는데, 문서를 읽을 때 키 이벤트를 어떠한 방식으로 처리할 것인지를 결정할 수 있다.

Picker View & Date Picker

회전하면서 원하는 항목을 선택할 수 있도록 할 때 사용하는 Object이다. 특정 항목을 선택하도록 할 때는 Picker View를 사용하고, 날짜와 같이 특정 형식이 있을 경우에는 Data Picker를 사용한다. Date Picker의 주요 속성은 날짜와 시간의 형식을 선택하는 Mode 속성과 시간 간격을 선택하는 Interval 속성이다   (<화면 18> 참조).

Inputs & Values
이 항목의 Object들은 주로 텍스트 필드나 슬라이드 바와 같이 특정값을 표시하거나 입력시키는 역할을 하는 것들이다.

Segmented Control

특정 기능을 하는 그룹을 모아놓고 그것을 선택하도록 할 때 주로 사용하는 Object이다. <화면 20>과 같은 형태가 있다. 주요 속성으로는 Segmented Control의 Style과 Title을 선택하는 부분이 있다.

<화면 21>은 여러 가지 Object들을 하나의 View 위에 모아본 것이다. 각각 Round Rect Button, Text Field, Switch, Slider, Progress View, Activity Indicator View, Page Control 등을 표시하고 있다.

Label 

읽기 전용의 Text View를 생성할 때 사용하는 것이 Label이다. Label은 <화면 22>처럼 제한된 속성을 갖게 된다. Label은 멀티라인으로 구성되지 않는 간단한 Text를 표현할 때 사용하기에 적당하다. 폰트나 Layout, Color 등을 설정할 수 있다.

Round Rect Button 

이것은 아이폰에서 사용되는 버튼들의 속성을 모두 갖고 있다.

<화면 23>의 박스에 보이는 버튼들이 모두 Round Rect Button의 속성을 변경해서 만든 것이다. 속성 중 버튼의 Type을 변경해서 형태를 구성할 수 있다.

Switch
이것은 특정 속성의 상태값을 전달할 때 사용하는 Object이다. State 속성에 의해서 On·Off의 값을 전달할 수 있다.

Slider
특정 범위값을 전달할 때 사용되는 Object이다. 현재 값의 상태를 바 형태로 표시해 준다. 기본적으로 지정된 최소값은 0.0이고 최대값은 1.0이다. 값을 직접 입력해 변경할 수도 있고, 슬라이더로 변경할 수도 있도록 돼 있다.

Progress View
실시간으로 변경되는 값을 시각적으로 표현해 주는 Object이다. Style 속성을 변경해 바의 모양을 다르게 할 수 있다.

Activity Indicator View
현재 진행 중인 사용자 명령을 애니메이션 형태로 보여주는 Object이다. 주로 사용자의 입력에 대해 리턴되는 값을 기다려야 할 경우에 사용된다.

Page Control
현재 오픈된 페이지를 하단에 점으로 표시하는 Object이다. 여러 페이지의 아이폰 애플리케이션을 볼 수 있으며, 앱스토어의 애플리케이션 소개 화면에서 볼 수 있다.

Text Field
텍스트 필드는 사용자의 입력을 받아들일 때 주로 사용되는 Object이다. Text Field를 사용해 문자를 입력할 때 일반적으로 텍스트 필드에 포커스가 위치할 때는 가상 키보드가 하단에 나타나게 된다. 이 가상의 키보드는 포커스가 Text Field에서 다른 곳으로 갈 때 해제돼야 하는데, 가상 키보드의 <return> 키가 선택됐을 경우, 포커스를 다른 Object들로 이동하고자 할 때 활용할 수 있는 예제를 살펴보자.

- 먼저 IB에서 TextField Object를 선택해 <화면 24>와 같이 View 위에 배치한다.

- viewController.h 파일에 <리스트 3>과 같이 IB action 함수를 사용하겠다는 코드를 써주자. 그리고 TextField에 대한 IBAction 함수로 TextFieldShouldReturn를 만들어 놓자.

<리스트 3> IB action 함수를 사용하겠다는 코드 #import <UIKit/UIKit.h> @interface test01ViewController : UIViewController {    IBOutlet UITextField *myTextField01; } - (IBAction)TextFieldShouldReturn:(UITextField*)myTextField01; @end

- viewController.m에 <리스트 4>와 같은 함수를 만들어 두자. 이 함수가 동작해야 가상 키보드에서 <return> 키 입력이 들어왔을 경우 가상 키보드를 감출 수 있다.

<리스트 4> return 키 입력시 가상 키보드 감추는 함수 - (IBAction)TextFieldShouldReturn:(UITextField*)myTextField01 {    [myTextField01 resignFirstResponder];    return YES; }

- IB에서 Text Field object를 선택하고, <화면 25>와 같이 <Did End On Exit> 이벤트를 Inspector 창의 <File’s Owner> 항목으로 드래그한다. 이 때 마우스를 떼는 순간 나오는 작은 창에서 앞의 3번에서 만들어 둔 TextFieldShouldReturn 함수를 선택하도록 한다.

- 실행하면 TextField 위에서 가상 키보드로 문자를 입력하고 빠져나가려고 할 때 <return> 키를 누르면 ‘Did End On Exit’ 이벤트가 동작하면서 가상 키보드가 사라지게 된다.

Windows, Views & Bars
마지막으로 살펴볼 Objects 그룹은 별도의 Window나 View를 위한 템플릿과 상단과 하단에 포함될 수 있는 툴바와 탭바 아이템 등이 들어있다.

이번 호에서 살펴본 여러 가지 아이폰 Object들을 하나의 View에 모아 예제 프로그램을 만들어 봤다. 각각의 object들에 대한 실제 사용코드를 <이달의 디스켓>을 통해 제공하니 참고하길 바란다.