iOS 5 베타 SDK가 처음 배포 되었을 때 함께 배포된 Xcode 4.2를 실행시켜본 후 가장 눈에 띄였던 것이 스토리보드(Storyboard)였다. 하지만, 당시에는 아직 iOS 앱 개발에 대해서 잘 모르는 상황이었던데다가 이 기능에 대해서 자세히 소개된 글을 찾을 수 없었기 때문에, 한동안은 스토리보드에 대해서는 애써 무시하고 기존의 방식(XIB를 사용하는 방식)을 사용하여 iOS 앱 개발에 대해서 공부 해왔었다.

최근 회사 업무 일정 상, 본격적으로 iOS 기반의 앱을 기획하고 개발해야 하는 상황이 되어 버렸고, 그런 상황에서 당장 고민스러웠던 부분이 로그인 화면 처리였다. 즉, 최초 로그인 정보를 입력하고 그 정보를 저장하여 이후에는 로그인 절차 없이 바로 메인 화면으로 들어갈 수 있도록 처리해야 하는데, 그렇게 하기 위해서는 프로그램 상에서 다음 화면(로그인 화면으로 갈 것인지 아니면 메인 화면으로 갈 것인지)을 결정하고, 결정된 화면을 다음 화면으로 보여줄 수 있어야만 했다.

솔직히 이 글을 쓰는 지금의 내 지식으로는 이런 저런 샘플 코드를 참조 해야만 구현 가능한 상황이었다. 관련된 샘플 코드를 찾기 위해 구글링 해보고, 직접 테스트 코드 작성을 위해 Xcode를 띄우고 새 프로젝트를 생성하다가 다시 한 번 눈에 띈 스토리보드 사용 옵션을 체크하여 프로젝트를 생성하였다. 그리고 우연찮게 해본 짓(?)을 시작으로 스토리보드에 대해서 감을 잡기 시작했다.


그 짓(?)이 어떤 짓이었는지 이야기하기 전에, 스토리보드를 처음 접했을 때를 정리해 둘 필요가 있겠다.

처음 이 글을 시작하면서 이야기 했듯이, iOS 5 베타 1 SDK가 Xcode 4.2 개발자 프리뷰 버전과 함께 배포 되어 그것을 처음 설치한 후 Xcode에서 프로젝트를 생성하려고 할 때, 나의 눈을 사로잡은 옵션이 있었으니 바로 "Use Storyboard" 옵션이다.

참고로 위 스크린샷은 iOS 5 베타 7과 함께 배포된 Xcode 4.2 개발자 프리뷰 버전이다.
베타 1 때의 화면과 다를 수 있다 (다를 것 같다. 기억이 나지 않는다;;).

 
이 옵션을 선택하여 iOS 어플리케이션 프로젝트를 생성했을때, Project Navigator에서 또 다시 눈에 띈것이 있었으니, 그것은 바로 MainStoryboard.storyboard 파일이었다. 이 파일을 선택해 보니, 통상의 XIB 파일을 선택했을때 처럼 UI 디자인 화면이 표시되는 것을 볼 수 있었다. 다른 것이라면, 여러 개의 UI를 보여줬다는 것.

그리고 이 화면을 처음 보았을 때, 가장 먼저 눈에 띄고 궁금했던 것은 UI들 사이에 표시된 연결선들이었다. 예를 들어, Tabbed Application 템플릿으로 프로젝트를 생성하고 MainStoryboard.storyboard 파일을 선택해 보면 다음과 같은 디자인 화면을 볼 수 있다.


Tabbed Application 프로젝트 템플릿을 선택하고 스토리보드를 사용하도록 하여 생성된 프로젝트에서 MainStoryboard.storyboard를 선택 했을때 볼 수 있는 디자인 화면. 이 디자인 화면 내 UI들 사이의 연결선들은 당췌 무슨 역할을 하며, 어떻게 이렇게 표현될 수 있단 말인가?


당장 이 화면만 봐도 기존의 방식(개별적인 XIB를 넘나들며 디자인하고 코딩 해야했던 방식)보다는 뭔가 훨씬 효율적으로 UI 디자인 작업을 할 수 있겠다라는 느낌이 딱 왔다. 게다가 이름처럼 UI 스토리보드 작성하듯 UI들을 기획하고 디자인 할 수 있겠다 싶었다. 개발자와 디자이너간 협업도 이전보다는 훨씬 용이할 듯 싶고 ... 하지만, 도대체 어떻게, 무엇부터 시작해야 이 기능에 대해서 이해할 수 있을 지 알 수 없었다. 지금도 iOS 개발에 대한 지식과 경험이 많이 부족하지만, 그 때는 더 몰랐었으니까. 구글링을 해 봐도 마땅한 답을 찾을 수 없었다. 어쩌겠나? 일단 포기. 당장 해야할 것도 많았으니까.

다시 현재로 돌아와서 그 짓(?)에 대한 이야기를 계속 하자면, 스토리보드에 화면을 하나 더 추가해 보고 싶어졌다. 그래서 한 짓이 바보같이 Object Library에서 View를 드래그 앤 드롭. 그런데 추가가 안 되더라. 당연히 안 되지. 이미 추가되어 있는 UI들은 모두 뷰 컨트롤러들이잖나? 그리고 완전한 하나의 UI는 뷰 컨트롤러와 서브 뷰들의 컬렉션 아닌가? 그래서 이번에는 Object Library에서 View Controller를 드래그앤 드롭. 역시, 이번에는 추가가 되었다.

스토리보드에 새로운 UI를 추가하기 위해서는 View Controller
(UIViewController에서 상속 받은 컨트롤러들)를 추가하면 된다.
 


새로운 UI는 추가 되었고, 이제 이 추가된 UI에도 스토리보드 상의 다른 UI들 처럼 화살표를 연결하고 싶은데, 그건 또 어떻게 해야하나? 하는 궁금증에 연결선들을 클릭하여도 보고 더블 클릭도 해 보았지만 별다른 반응이 없었다. 그러다가 메인 화면에 해당하는 UI(위 스크린샷에서 Tab Bar Controller UI)의 좌측에 위치한 화살표를 클릭하여 드래그 해 보니 움직였다. 혹시 하는 마음에 새로 추가된 UI로 드래그 앤 드롭했더니 ...

Tab Bar Controller UI의 왼편에 있던 화살표를 새로 추가된 UI로 드래그 앤 드롭한 결과. 이 상태에서    빌드하고 실행하면 새로 추가된 UI가 메인 화면(즉, 시작 화면)으로 뜨는 것을 확인 할 수 있다. 


화살표가 위 그림처럼 새로 추가된 UI에 달라 붙었다. 이게 어떤 의미일까? "시작 화면"이 아닐까? 이런 생각에 당장 빌드하여 실행시켜 보았다. 처음 상태 그대로, Tab Bar Controller에 화살표가 있는 상태에서 빌드 및 실행을 하면, 그 결과는 아래 그림과 같다.


처음 프로젝트가 생성된 상태에서 빌드 및 실행한 화면. 스토리보드 상의 디자인 그대로 Tab Bar Controller를 시작 화면으로 하여 실행된 것을 볼 수 있다. 


새로 추가 된, 빈 화면의 UI에 화살표를 드래그 앤 드롭한 후 빌드하여 실행하면, 그 결과는 아래 그림과 같다.

화살표를 새로 추가된 UI로 옮겨 놓은 후, 빌드 및 실행한 화면.
새로 추가된 화면이 시작 화면으로 설정 되었음을 알 수 있다.


이 특별한 화살표는 시작 화면을 지정할 수 있도록 해 준다는 것을 알 수 있었다. 그렇다면, Tab Bar Controller의 우측에 있는 선들은 어떻게 만들어진 것일까? 추측컨데, 현재 화면에서 어떤 이벤트(버튼 클릭 같은)를 통해 이 화면이나 저 화면으로 이동하는 것을 지정하는 것 같다. 어떤 속성을 설정해야 지정할 수 있을까? 어떤 클래스의 어떤 메서드를 활용해야 할까?

하나씩 알아내는 재미와 새로운 기능에 대한 호기심은 건드릴 수록 커졌다. Identity Inspector, Attributes Inspector, 그리고 Connections Inspector들을 본격적으로 뒤져 보았고, 그리고 발견한 것이 Tab Bar Controller를 선택한 상태에서 Connections Inspector를 선택했을때 나타나는 Storyboard Segues 설정이었다.

Segue는 "세그웨"라고 발음 한다. 위 그림에서 Relationship - viewControllers가 First View Controller와 Second View Controller에 연결된 것을 알 수 있다.


Custom, Modal, Push, 그리고 Relationship - viewControllers 커넥션들이 있는데, Tab Bar Controller의 Storyboard Segues 커넥션들 중 Relationship - viewControllers 커넥션의 경우, 위 그림에서 처럼 First View Controller와 Second View Controller에 연결되어 있음을 볼 수 있었다. 그러나 First View Controller나 Second View Controller에는 Relationship 커넥션이 존재하지 않았다. 아마도 Tab Bar Controller 특성상 탭에 추가되는 UI들의 연결을 위해 존재하는 특별한 커넥션이 아닐까 싶었다.

그럼, 일반적인 UI들은 어떻게 서로 연결을 할 수 있는 것일까? 나머지 Custom, Modal, Push 커넥션들은 무엇을 위한 것들일까? 이것들이 연결선과 관련 있지 않을까? 

First View Controller의 Storyboard Segues 커넥션들 중 Modal 커넥션을 선택하여(Custom은 내가 뭔가 더 추가적인 작업을 해 주어야 할 듯 싶어서 일단 제외), 새로 추가된 UI로 연결을 시도 해 보았다.

First View Controller를 선택하고 Storyboard Segues의 Modal 커넥션을 선택하여
새로 추가했던 UI에 연결 시도.


그랬더니, 아래 그림과 같이 연결이 되었고, 더욱 놀라운 사실은 ...

일반적인 커넥션 연결 작업처럼 First View Controller의 Modal 커넥션이 새로 추가된 UI에 연결 되었다.


아래 그림처럼 드디어 연결선을 볼 수 있었던 것이다.

드디어 연결선이 만들어졌다. First View Controller에서 어떻게 해 주기만 하면,
다음 화면인 새로 추가된 UI가 표시될 것이다.


이제 연결선을 어떻게 만들어 낼 수 있는지 알았다. 게다가 이 연결선을 Segue라고 부르는 것 같다. 그럼, 실제로 First View Controller에서 새로 추가한 UI로 화면 이동을 하려면 어떻게 해야 할까? 일반적인 패턴을 따른다고 하면, 어떤 액션이 취해지면 화면 이동이 될 것이다. 그렇다면, 뭔가 메서드 같은 것이 존재하지 않을까?

"segue"를 키워드로 하여, 개발자 문서를 검색해 보기로 하였다. 관련된 클래스나 메서드 같은 것들이 나오지 않을까 해서였다. 베타 버전의 SDK 이므로 온라인 문서에는 나오지 않을 수도 있을테니, Orginizer에서 검색해야만 제대로 나올 듯 싶었다. 검색 결과는 아래 그림과 같았다.

"segue"를 키워드로 해서 개발자 문서를 검색한 결과. 정말 뭐가 있긴 있었다!


제일 먼저 등장한 녀석은 UIViewController 클래스에서 제공하는 performSegueWithIdentifier: sender: 메서드였다. identifier는 스토리보드 상의 Segue를 나타내는 문자열로 Interface Builder의 Inspector를 사용하여 설정할 수 있다고 하고, sender는 Segue를 개시하는 객체를 지정하는 것이란다. 다시 Xcode로 돌아가 Segue의 식별 문자열을 지정할 수 있는 속성을 찾아보았다. 일단 새로 만들어진 Seque를 선택하고 Inspector를 뒤져 보았다. 그리고 Attributes Inspector에서 발견한 것이 아래 그림과 같은 설정이었다.

Segue를 선택하고 Attributes Inspector를 선택했을 때 표시되는 설정들. "Identifier"가 보인다.


Identifier에 "MySegue"라고 입력했다. 어차피 식별을 위한 문자열이니, 뭐라고 정하건 내 마음대로 해도 상관 없겠다 싶었다. 이제 본격적인 테스트를 위해 First View Controller에 버튼을 하나 추가했다. 버튼을 클릭하면 새로 추가된 UI로 화면 전환되도록 하기 위함이었다. 이 버튼의 Touch Up Inside 이벤트 핸들러 내에서, 아까 개발자 문서에서 찾은 메서드를 사용하면 될 것이라!

FirstViewController.h

#import <UIKit/UIKit.h>
 
@interface FirstViewController : UIViewController
- (IBAction)buttonClicked:(id)sender;
@end


FirstViewController.m

#import "FirstViewController.h"

@implementation FirstViewController

// 다른 메서드들은 생략

- (IBAction)buttonClicked:(id)sender {
    [self performSegueWithIdentifier:@"MySegue" sender:self];
}

@end 

First View Controller에 Round Rect Button을 하나 추가하고, 새로 추가된 UI로 화면 전환 시키기 위해 Touch Up Inside 이벤트 핸들러에 추가된 코드.


그리고, 새로 추가된 UI가 너무 허전해서 일단 배경 색만 변경해 두었다. 이로써 모든 준비는 끝. 떨리는 마음으로 빌드하고 실행.

드디어 성공이다!!!
Cover Vertical 모드로 화면 전환이 되어, 새로 추가된 UI가 화면 아래에서 위로 올라오고 있는 중에
화면을 캡쳐 하였다.


드디어 화면 전환 성공! 메서드 호출 한 번으로 이렇게 멋들어지게 화면이 전환 되다니, iOS 개발은 러닝 커브가 초반엔 급하다가 어느 순간 완만해 진다더니, 이런 기능들이 제공되어서 그런가 보다 ... 라며 감격에 겨워있던 순간, 다시 드는 궁금증 한 가지. 다시 이전 화면으로 가려면? 아까 그 메서드를 전환된 화면에서 다시 호출해야 하는 건가? 아니면 다른 메서드가 제공되나? 새로운 궁금증을 풀기위해 UIViewController 클래스에 대한 개발자 문서를 뒤지기 시작했다.

1부 끝. 

저작자 표시 비영리 변경 금지
신고
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by Busy Days ... pinkyroman

블로그 이미지
머릿속의 생각들을 마구마구 쏟아 내는 곳. 주워갈만 한 건 아마 없을껄요 ... ?
pinkyroman

공지사항

티스토리 모바일 블로그
Yesterday5
Today0
Total32,426

달력

 « |  » 2017.04
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30            

최근에 달린 댓글

최근에 받은 트랙백

글 보관함


티스토리 툴바