Storyboard 기반의 iOS 개발 - 2편
1. Segue 개요
지난번 포스팅에서 봤었던 스토리보드 편집 화면에서부터 다시 시작해 보도록 하죠.
이렇게 생겼었죠.
보기가 불편하시다면 확대 축소 가능합니다. 모눈종이 안쪽의 우측 하단 보시면 확대 축소 버튼이 있고요. 트랙패드를 사용하실 경우에는 트랙패드의 확대/축소 제스쳐가 동작합니다. 단, 단계별 확대 축소만 되기 때문에 일정 이상 확대/축소를 하셔야만 합니다.
어쨌거나, 모눈종이 안에 있는 것을 보시면 각 화면을 상징하는 커다란 박스 2개와, 그 화면을 잇는 화살표를 보실 수 있습니다. 여기서 이번에 다룰 것은 저 화살표에 해당하는 부분입니다.
저 화살표는 각각의 화면을 구성하는 뷰 컨트롤러간의 관계 및 흐름을 표시하는 역할을 수행합니다. 지금 스크린샷의 화면을 보면, 처음 시작해서 내비게이션 컨트롤러를 거쳐, 테이블 뷰 컨트롤러로 흘러가는 것을 표시하고 있죠.
이런 화살표에 해당하는 것을 Segue 라고 합니다. 발음이 좀 의외더군요 한글로 비슷하게 쓰면 '세그웨이' 정도? 어떻게 저 글자에서 발음이 저렇게 나는지는 잘 모르겠지만 -_-; 의미는 대충 자연스럽게 어디론가 넘어가다 이런 정도더군요. 역할에 잘 맞는 의미인 거 같긴 합니다.
이 Segue 는 각 화면이 어떤 흐름으로 나타나게 될 지를 인터페이스 빌더 상에서 보여줄 뿐만 아니라, 실제 구동상에서도 화면이 어떻게 다음 화면으로 넘어갈 지를 지정해 주는 역할을 수행합니다. 단일 화면 디자인에서 끝났던 기존 버전과 가장 차별화되는 요소죠.
그럼 한번 살펴봅시다.
2. 진입점 설정
요건 시작 지점을 표시하는 화살표입니다. 왼쪽 끝이 다른 아무 곳에도 이어져 있지 않고, 페이드아웃되어 사라지는 형태로 나타나 있죠. 사실 요건 Segue 라고 보기는 뭐하고, 시작 지점을 표시하는 역할 정도만 수행하죠. 자 그게 어떻게 되느냐 하면,
우선 모눈종이 안에 있는 NavigationController 를 선택해 봅니다. 그리고,
우측 분할 윈도에 나타나는 화면 중에서 네 번째를 눌러 다음과 같은 화면이 나타나게 합니다. 위에 빨간 사각형 쳐진 부분을 누르시면 되죠.
View Controllers 라는 부분을 보시면 다음과 같이 되어 있습니다. 이 중, Is Initial View Controller 에 해당하는 체크박스가 바로 이것입니다.
이 체크 박스는 현재 스토리보드에서 오직 하나의 뷰 컨트롤러, 즉 하나의 화면만 활성화가 가능하도록 되어 있습니다. 다른 곳에서 이 체크를 설정하게 되면, 이미 체크된 쪽에서는 자동으로 해제되도록 되어 있죠.
그럼 이걸 간단히 테스트 해 볼까요?
모눈종이 안에 있는 테이블 뷰 컨트롤러를 선택해 봅니다.
요거 선택할 때 주의하실 점. 한복판을 눌러 선택하지 마시고, 위의 내비게이션 바 쪽을 누르시거나, 아니면 좌측의 뷰 컨트롤러 리스트에서 직접 해당 항목을 선택하시기 바랍니다. 왜냐구요? 그럼 한복판을 한번 눌러보죠.
뭔가 좀 다르죠? 파란색 선택 테두리도 보이지 않구요.
좌측의 뷰 컨트롤러 목록에서 보면 바로 그 이유를 알 수 있습니다. NavigationController 와는 달리, 실질적인 화면 표시용의 View 를 가진 TableViewController 는 화면 한복판을 누르면 뷰 컨트롤러가 아닌 TableView 가 선택됩니다. 그렇기 때문에 우측의 특성창에서도 TableViewController 항목이 아닌 TableView 에 대한 항목이 나타나게 되죠.
따라서 선택하실 때 좌측의 리스트 창을 보고 제대로 선택되었는지 꼭 확인하시기 바랍니다.
그럼, 이제 TableViewController 를 선택 후, Is Intitial View Controller 체크박스를 체크해 봅시다.
NavigationController 에 붙어있던 시작 화살표가 TableViewController 쪽으로 가서 붙었군요. NavigationController 로부터 오는 화살표도 남아 있다 보니 미묘한 형태로 배치가 되었습니다. 그럼 실행하면 어떻게 나오게 될까요?
요렇게 됩니다. 이전에 실행했던 것과 비교하면 어플리케이션 화면 상단에 위치했던 Navigation Bar 부분 (이전에 스크린샷에 보면 RootViewController 라고 써진 부분입니다) 이 사라졌죠. 자 왜 사라졌을까요?
이전의 경우 NavigationController 가 먼저 적재되고, 이후 TableViewController 를 적재하는 순서로 처리되었기 떄문에 NavigaitonController 가 적재되면서 나타나는 Navigation Bar 가 존재했지만, 이제는 바로 TableViewController 로 시작되었기 떄문에 NavigationController 자체가 존재하지 않아 Navigation Bar 가 나타나지 않는 것입니다.
그냥 간단히 말씀드리면, 이전에는 NavigationController 부터 시작했고, 이제는 TableViewController 로부터 시작되어서 그런 거죠.
그럼 다시 Xcode 로 돌아가서, NavigationController 의 속성을 확인해 봅시다.
아까 말씀드린 대로, Is Initial View Controller 체크 항목이 해제되어 있는 것을 볼 수 있습니다. TableViewController 에 체크했으니 뺏긴 셈?
3. Segue 를 통한 화면간의 관계 설정하기 - Relationshop Segue
일단 위의 화면에서, 다시 NavigationController 쪽의 Is Initial View Controller 속성을 체크해 두도록 합시다. 다시 NavigationController 항목에서 살펴볼 것이 있거든요. 그리고 화면을 좀 축소시켜 둡니다. 이제 새로운 ViewController 를 하나 더 만들려고 하니까 저렇게 보긴 좀 불편하죠.
적당히 축소되었다면, 우측 하단의 개체 목록에서 View Controller를 선택하여 모눈종이 쪽으로 끌어 놓습니다.
잘 만들어졌네요.
간단히 이 화면이 뭔지를 표시해 두도록 하죠. 그냥 빈 화면이면 제대로 동작하는 지 아닌지 확인하기가 어려우니까요. 우선, 좌측에서 지금 생성한 ViewController 항목을 찾아보신 후, 좌측에 작게 나 있는 접힘 삼각형을 눌러서 하부 항목을 살펴봅니다.
아래에 보면 View 가 존재하는 게 보이죠. 이걸 선택하면 자동적으로 해당 ViewController 쪽의 화면으로 확대가 일어납니다.
이렇게 View 를 선택하는 이유는, 기본적인 ViewController 자체만 선택된 상태에서는 다른 하부 컨트롤들, 즉 텍스트박스라든가 레이블, 스크롤 뷰, 이미지 등을 끌어놓을 수 없기 떄문입니다.
Label 을 드래그 해서 놓습니다. 상단과 좌측에 선이 그려지는데 지금은 신경쓰지 맙시다. 이건 신규 레이아웃과 함꼐 설명해야 하는 커다란 챕터 하나 분량 내용이거든요.
레이블의 길이도 좀 조정해 주고, 안의 글도 손을 봅니다.
이제 다시 NavigationController 로 돌아가 봅시다.
우선 이렇게 NavigationController 를 선택해 줍니다. 그 다음 Control 키를 누른 상태로 ViewController 방향으로 드래그하면,
이렇게 선이 그어지게 됩니다. 그 상태로 Drop 을 시키면,
요렇게 팝업이 나타납니다.
여기서 2가지 종류로 분리된 4개의 항목을 볼 수 있죠. Manual Segue 와 Relationship Segue.
Manual Segue 는 사용자의 특정 행동 등의 외부적인 요인에 의해서 수동적으로 동작하게 되는 Segue 를 말합니다. 차후에 정식으로 설명드리겠지만, Storyboard 내에서는 특정 버튼의 동작을 연결할 수도 있고, 테이블 내의 특정 Cell 혹은 종류별 Cell 등을 선택했을 때 맞물려 동작하게 할 수 있으며, ID 를 할당하여 Segue 를 코드 내에서 호출하게 하여 동작시킬수도 있습니다.
Relationship Segue 는 이름 그대로 관계를 맺어주기 위한 Segue 인데요. 주로 이것은 특정 뷰 컨트롤러와 컨트롤러간의 관계를 연결하는 용도로 사용됩니다. 대표적인 것이 지금 작업을 수행할 것으로 NavigationController 의 root view controller 를 설정하는 것이죠.
자 여기서 NavigationController 의 root view controller 가 뭐냐 하면,
이전부터 계속 말씀드렸듯이 NavigationController 는 각 화면을 담당하는 역할을 수행하는 ViewController 들의 적층 구조를 제어하는 역할을 수행합니다. 하지만 그렇기 때문에 자기 자신은 어떤 특정 화면을 가지고 있지 않죠. 그렇다면 화면에 뭔가라도 나오기 위해서는 가장 기본적으로 깔려 있어야 할 화면이 필요할 겁니다. 그게 root view controller 죠.
즉 여기서 이제 하게 될 작업은, NavigationController 의 가장 기본적인 화면으로, 조금 전 새로 만든 ViewController 를 설정하겠다는 것입니다. 이건 특정 동작에 의해 이루어지는 것이 아니라 NavigationController 가 나온 시점에서 이미 그 관계가 설정되어 있어야 하므로 위에서 설명드린 Manual Segue 와는 그 분류가 달라지죠.
이미 어느 정도 iOS 개발에 숙달되신 분들을 위해 부가 설명을 드리면,
실제 코딩 상황에서는 Manual Segue 는 Segue 를 호출하는 함수인 performSegue 등의 함수를 호출하는 형태로 동작하지만, Relationship Segue 는 Segue 를 호출하는 게 아니라 그냥 해당 프로퍼티에 세팅하는 형태가 됩니다. 위의 root view controller 만 하더라도, 해당 NavigationController 인스턴스의 rootViewController 프로퍼티에 새로 생성한 ViewController 를 할당하는 것 뿐이죠. 그렇기 때문에 '관계' 즉 relationship 이라는 용어를 쓴 것입니다. 프로퍼티를 통한 참조는 관계의 가장 일반적인 방식 중 하나니까요.
자 그럼 연결해 봅시다. Relationship Segue 의 root view controller 를 선택해 주세요.
NavigationController -> TableViewController 쪽에 있던 화살표가 ViewController 로 이전되어 있는 것을 알 수 있습니다. 실행해 보면 이렇게 되죠.
예. 새로 생성한 ViewController 가 바로 나타나게 됩니다.
이번에는 여기까지 하도록 하겠습니다. 원래는 2번까지만 하려고 했는데, 분량이 좀 적다고 여기까지 해버렸네요. 내용상으로는 이번 3번은 다음편에 묶이는데 말이죠 ㅜㅜ. 나중에 어느 정도 진행되고 나면 정리를 좀 해봐야겠네요.
