iOS 스토리보드 튜토리얼: 화면 전환과 데이터 전달까지 한 번에

스토리보드(Storyboard)는 iOS 5 출시와 함께 개발자들에게 처음 선보인 기능입니다. 스토리보드를 활용하면 각 화면의 인터페이스를 별도의 파일로 일일이 디자인해야 하는 번거로움을 크게 줄일 수 있습니다. 앱 전체의 구조와 화면 간 흐름을 한눈에 파악할 수 있으며, 세그웨이(Segue)를 사용하면 화면 간 전환 방식을 설정하고 데이터까지 손쉽게 전달할 수 있습니다. 이번 튜토리얼에서는 간단한 로그인 화면을 만들어 보며 스토리보드의 기본기를 익혀보겠습니다.

프로젝트 시작하기

가장 먼저 할 일은 새 프로젝트를 생성하는 것입니다. 언어는 Swift, 디바이스는 Universal로 설정한 새로운 Single View Application을 만들어 주세요. 스토리보드 파일로 이동하면 텅 빈 뷰 컨트롤러(View Controller) 씬이 하나 보일 것입니다. 뷰 컨트롤러 왼쪽에 있는 화살표는 해당 컨트롤러가 앱의 시작점인 루트 컨트롤러임을 나타냅니다.

사용자 이름·비밀번호 입력 필드 추가하기

사용자 이름과 비밀번호 입력란을 추가하려면 화면 오른쪽 하단의 라이브러리 영역에서 사각형 안에 원이 그려진 아이콘(Object)을 선택한 뒤, 두 개의 텍스트 필드를 드래그하여 뷰 위에 올려놓습니다. 사이드바의 인스펙터를 통해 다양한 속성을 지정할 수 있는데, 항목이 워낙 많아 모두 설명하기는 어렵지만 대부분 이름만 봐도 직관적으로 이해할 수 있습니다.

이 예제에서 특히 중요한 두 가지 설정은 플레이스홀더 텍스트(Placeholder)와 보안 텍스트 입력(Secure Text Entry) 체크박스입니다. 플레이스홀더는 사용자에게 어떤 정보를 입력해야 하는지 미리 알려주는 안내 문구 역할을 하고, 보안 입력 옵션은 비밀번호가 화면에 그대로 노출되지 않도록 점(•)으로 가려줍니다. 입력 필드 작업이 끝나면 세그웨이를 실행할 버튼도 필요합니다. 텍스트 필드를 추가했던 것과 같은 방식으로 버튼을 드래그해서 배치하면 됩니다. 버튼에 제목을 붙이고 객체들의 위치를 정돈하면 첫 화면이 아래와 같이 완성됩니다.

두 번째 화면 만들고 세그웨이 연결하기

앱의 첫 번째 화면이 완성되었으니, 이제 전환될 두 번째 화면을 만들어야 합니다. 새로운 뷰 컨트롤러를 하나 더 드래그하여 스토리보드에 추가하세요. 두 화면을 연결하려면 다음 두 가지 작업이 필요합니다.

첫째, Control 키를 누른 상태에서 버튼을 클릭한 채 새로 추가한 화면까지 드래그합니다.
둘째, 두 뷰 사이에 생성된 세그웨이(원형 아이콘)를 선택한 뒤 identifier를 지정합니다. 이 예제에서는 "nextScreen"이라는 이름을 사용하겠습니다.

아울렛(Outlet) 연결과 코드 작성

마지막으로 새 화면에 레이블을 하나 배치하면, 로그인한 사용자 이름이 제대로 전달되는지 눈으로 확인할 수 있습니다. 스토리보드의 UI 요소를 코드에서 조작하려면 해당 클래스에 아울렛(outlet)을 선언해야 합니다. 아래와 같이 코드를 작성해 주세요.

class FirstScreen: UIViewController {
    @IBOutlet weak var username: UITextField!

    @IBAction func loginButton(sender: AnyObject) {
        performSegueWithIdentifier("nextScreen", sender: self)
    }
}

class SecondScreen: UIViewController {
    var user: String!
    @IBOutlet weak var username: UILabel!

    override func viewDidLoad() {
        username.text = user
    }
}

코드 작성을 마쳤다면 각 화면의 커넥션 인스펙터(Connections Inspector)를 열어 스토리보드의 객체와 아울렛을 연결해야 합니다. 선언한 아울렛 목록이 표시되면 오른쪽의 빈 원을 클릭해 해당 UI 요소와 연결해 주세요.

마지막으로 구현할 함수는 첫 번째 화면 클래스의 prepareForSegue입니다. 이 함수를 사용하면 화면이 전환되기 직전에 다음 뷰로 데이터를 전달할 수 있습니다.

override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
    if segue.identifier == "nextScreen" {
        let destVC = segue.destinationViewController as UIViewController
        destVC.user = self.username.text
    }
}

이제 화면을 전환하고 화면 사이에 데이터를 주고받는 기본 원리를 이해하게 되었습니다. 여기까지 잘 따라오셨다면 실제로 동작하는 앱을 만들 준비가 된 것입니다. 즐거운 코딩 되세요!