Storyboard와 UIKit
Storyboard
시각적으로 애플리케이션의 UI를 구축하도록 도와주는 Xcode 내장 디자인 UI 툴이다. 화면의 레이아웃을 드래그 앤 드롭 방식으로 쉽게 디자인 할 수 있다는 장점이 있다.
UIKit
UI를 구축하기 위한 프레임워크로, 버튼, 라벨, 뷰 등의 UI 컴포넌트를 포함한다. 이들의 이벤트 처리, 애니메이션을 담당하기도 한다. UIKit을 사용하여 Objective-C 또는 Swift 코드를 사용해 애플리케이션 UI를 프로그래밍하는 방식으로 구축하고 조작할 수 있다.
Storyboard와 UIKit의 관계
Storyboard는 UIKit의 UI 요소들을 시각적으로 배치하고 구성하기 위한 툴이며, 개발자는 Storyboard에서 디자인한 UI 컴포넌트에 대해 UIKit을 사용하여 코드 레벨에서 상세한 동작을 구현할 수 있다. 아래 설명할 키워드들을 통해 이를 실현할 수 있다.
IBOutlet, IBAction
여기서 IB는 Interface Builder의 약자로, 위 키워드들은 인터페이스 빌더와 코드 간의 연결을 생성하도록 도와준다.
Storyboard의 UI Component를 Control 버튼으로 끌어서 View Controller 코드에 붙이면, 아래 이미지처럼
IBAction,IBOutlet,IBOutlet Collection을 Insert 할 수 있다.
1. IBOutlet
IBOutlet은 스토리보드의 UI 컴포넌트와 코드의 프로퍼티를 연결할 때 사용한다.
ViewController Class 안으로 드래그하면 이렇게 창이 뜨는데, Name을 지정하여 코드에 UI 요소를 연결할 수 있다.
@IBOutlet weak var nameLabel: UILabel!IBOutlet의 구조로, 코드를 먼저 쓴 후에 UI 요소를 컨트롤로 연결해도 된다.
2. IBAction
IBAction은 IBOutlet에서 옮겨온 요소의 이벤트(버튼 탭, 스위치 토글 등)를 처리하기 위한 메서드와 연결할 때 사용된다.
Event 탭에서 원하는 이벤트 처리 결과를 선택할 수 있다.
@IBAction func buttonTapped(_ sender: UIButton) {
nameLabel.text = "버튼이 눌렸습니다!"
}Action의 기본 구조로, 코드를 먼저 쓴 후에 적절한 UI요소를 컨트롤로 연결해도 된다. 단, 사용하려는 모든 요소가 IBOutlet으로 선언되어 있어야 한다.
