iOS 개발 무작정 따라하기 - Address Book 2

지난번에는 개발환경과 프로젝트생성 그리고 iPhone Simulator에서 여러분이 만든 프로젝트파일을 실행시켜봤다.  오늘은 거기에 더해서 좀더 어플리케이션을 만들어보도록 한다.

프로젝트 생성하는 것을 잊고 있었다면, 다시 지난번 포스팅을 참고해서 생성하도록 하자.

iOS 개발 무작정 따라하기 - Address Book 1 다시보기

아무리 따라하기만 해도 완성되는 App을 작성하고 있지만, 그래도 어떤파일이 어떤 위치에 있어야하는지 정도는 알아야하지 않을까?  바로 상단 이미지를 보면 붉게 테두리 쳐져있는 부분을 확인할 수 있을 것이다.
이 붉은 테두리 내의 파일들이 바로 AddressBook App의 각종 클래스들이나 리소스들을 표시해주는 네비게이터정도라고 이해하면 쉽다.  뭐 Finder에서 해당 프로젝트내에 리소스를 추가하는 방법이야 여러분이 생각하는 바로 그 생각처럼 클릭&드래그&드랍 방식으로 붉은 테두리내에 File들을 떨어트려주면 된다.

◼ XIB만큼 쉽고 빠른거 있음 나와보라 그래!

그럼 계속 진행해보도록 하자. 
1편에서 iPhone Simulator에서 화면은 대체 어디있는지 궁금하지 않은가?

붉게 테두리안의 화면이 어디에 있을까? 

좌측 파일 네비게이터 중에 ViewController.xib 파일을 클릭해보자.

.xib 이라는 확장자를 기억하길 바란다.
XML로 되어있는 GUI기반의 확장자다.  기존에는 NIB라는 확장자를 사용했지만, (이게 아마 NextSTEP Interface Builder의 약어였던걸로 기억한다.)  Xcode 3.1이후에는 XIB라는 확장자로 바뀌었다. 

좀더 구체적으로 이 둘 사이의 차이점을 이야기하자면, 둘다 XML방식으로 내부구조가 만들어져있지만, XIB는 build후에 interface builder에서 열리지 않는다.  뭐 이정도까지만 알아두기로 하고 더 궁금하면 니네님들이 직접 알아봐~

우측의 붉은 테두리 안에는 XIB안에서 사용할 수 있는 여러가지 객체들(Objects)의 라이브러리라고 생각하면 된다.  우리는 우리가 원하는 속성의 객체를 클릭한 후에 가운데 View위에 드랍함으로써, 기본적인 UI를 구성할 수 있다.

그림으로 나열되어있기 때문에, 초보자들도 손쉽게 접해볼 수 있을 것이다.
일단 Label이라는 객체를 드롭한 후에, 'iMON's BLOG'라는 Text를 타이핑해 넣었다.

그럼 시뮬레이터(나중엔 Device가 되겠지만...)에서는 위의 완성품이 어떻게 보일까?

단축키 Command + R 혹은 상단의 화살표모양의 RUN버튼을 클릭하면, 지금까지 작업한(?) 결과물이 iPhone Simulator에 서 확인할 수 있다.  어떤가? 굉장히 손쉽지않은가?  우리는 마치 HTML을 이용해 웹사이트를 만들 당시의 드림위버 등처럼 이지윅방식으로 결과물을 눈에 보이는데로 만들어낼 수 있다.  직접적인 코딩을 하지 않고서도 말이다.

하지만 순수 코딩으로만 위의 객체(Object)들을 화면에 띄울 수도 있다.
일각에서는 각종 버그문제나 커스텀에 유리하도록 직접 코딩방식이 우월하다고 이야기하기도 하고 또 그 반대의 의견도 있다. 항상 이 문제는 iOS개발자들 사이에서 뜨거운 감자같은 이슈다.

하지만 내 생각은 둘중에 하나만 고수 할 수 없다는 것이다.
동적인 UI를 만들때나, 혹은 커스텀을 할때는 하드코딩방식으로 해야하기도 하고, 기본적인 화면구성이나 Rect를 신경쓰지않고 작업할 시에는 Interface Builder를 이용해서 작업하는 것이 더 손쉽기 때문이다. 

둘의 사용방법을 모두 알고 적절히 섞어서 사용하는 지혜가 필요하다. 
한가지만 고수할 이유도 그래야할 필요도 없다.

◼ 뭐부터 시작하지? (기본 UI의 골격을 만들어보자)

자 이제는 다시 본격적인 Address Book을 시작해보자. 
Address Book의 UI구조는 기본 Group화면이 출력되고, 사용자가 Group을 추가할 수도 있고, Group안에 Person 들을 추가할 수도 있다.  동적으로 Group을 추가/삭제/편집하며 Group을 터치하면 Person List가 출력되는 방식이다.

기본적으로 Apple에서 제공하는 기본 UI등을 사용해서 만들어갈 것이다.
일단 기본적으로 UINavigationController를 이용해서 Push를 이용해서 Sub View들로 이동할 것이다.

그러려면 기본 템플릿으로 제공된 소스를 조금 수정해야한다.

일단 좌측 네이게이터에서 AppDelegate.h 라는 파일을 수정해보도록 하자.

기존이 ViewController *viewController를 삭제한 후에,
UINavigationController *navigationController로 대체하도록 한다.  물론 상단에 위치했던 @class ViewController; 또한 삭제한다.  이제부터 스크린샷 위주로 진행하며, 간단한 코드에 대한 해석을 덧붙히는 식으로 진행되니 스크린샷을 꼼꼼히 봐주길 바란다.

Head(AppDelegate.h)파일을 수정했으면 이제는 .m 파일을 수정해보자.
바로 아래에 있는 AppDelegate.m 파일을 클릭하면 상단이미지대로 코드가 삽입되어있을 것이다.
하단이미지를 참조해서 코드를 조금 수정해보도록 하자.

붉게 테두리되어있는 부분을 수정했다.
일단 _viewController release부분을 _navigationController release로 수정했고, 그 아래에는 좀 길게 수정했다.  App이 실행되면 가장 먼저 호출되는 메서드가 바로 이부분이다. 간단히 해석한다면, ViewController를 생성하고 NIB파일은 ViewController.xib로 초기화한 후에, navigationController에 UINavigationController 속성으로 대입하고, window (화면)의 첫뷰로 설정한다는 것이다.

잘 이해가 되지 않는다고? 이해를 바라지 않는다. 그냥 따라해보는 거다. 

그리고는 다시금 Run을 실행한다 (단축키 Command + R)

처음 실행했던 화면과는 다른 결과물이 도출될 것이다.
상단에 왠 Bar가 하나 생겼다.  이것이 NavigationBar다.
UINavigationController로 View를 붙히면, 기본적으로 Navigation Bar가 저렇게 최상단에 붙어있다. 
ViewController와 NavigationController 혹은 그 밖의 컨트롤로들과의 상관관계는 나중에 천천히 돌아보기로 하자.

그런데 NavigationController는 왜 만든거야?
기존이랑 달라진건 상단에 Bar하나 올라간거 밖에 없잖아? 라고 생각이 들 수 있을 것이다.

자 그럼 NavigationController를 이용해서 계속 진행해보도록 하자.

이번에 수정할 클래스는 ViewController.m 파일이다.
상단 이미지를 참고해서 찾아보도록 하자. 붉게 테두리된 파일을 클릭하면 된다.

상단 이미지를 참고해서 코드를 삽입해보자.
navigationItem의 rightBarButtonItem을 추가하는 코드다.  마지막쯤에 있는 addGroup을 주목하자.  @selector안에 들어있는 addGroup은, 해당 버튼을 터치했을때 어떤 메서드가 호출되는지를 정의하는 부분이다.

현재는 addGroup이라는 메서드는 호출했지만, 구현이나 정의는 되어있지 않다. 일단 addGroup메서드를 선언하고 구현해보자.

이번에 수정해야할 파일은 ViewController.h 이다.
- (void)addGroup; 이라는 메서드를 헤더파일에 선언한다.

이번엔 다시 ViewController.m 구현파일에 해당 선언한 메서드를 구현한다. 상단 이미지를 참고하여 동일한 코드를 작성하길 바란다. 여기까지 되었으면, 저 구현부내부에 NSLog(@"Touch add Group"); 은 대체 뭐야? 라고 생각할 수 있을 것이다. 일단 지금까지 작성한 프로그램을 실행해보도록 하자.

Command + R(단축키)를 눌러서 실행을 시켜보자.

짠!  아까까지만 해도 상단의 바에 아무것도 없었는데, 지금은 + 그림이 있는 버튼이 하나 생겼다.

새로 올린 버튼이니 한번 터치해볼까?

터치를 해보면 상단의 이미지처럼 하단 콘솔창에 Touch add Group이라는 텍스트가 출력됐다.
NSLog가 뭔지 이제 감이 올 것이다.  바로 콘솔창에 Log를 출력하는 명령어라는 것을...

오늘의 포스팅은 여기까지하고 마치도록 하자.
다음 연재는 여기서부터 다시금 이어가도록 하겠다. 다음 강좌가 기대된다면??

리플을 달아줘!!!!