[Swift] iOS 앱 개발 준비하기 - (2) 스토리보드 구성 요소

Storyboard의 주요 구성 요소 (UIKit 기반)

Storyboard는 iOS 앱의 사용자 인터페이스(UI)를 시각적으로 설계하는 파일입니다. 이는 Apple의 UIKit 프레임워크를 기반으로 하며, 앱의 화면 흐름과 UI 요소 배치를 한눈에 보여주는 도면과 같습니다.

Storyboard의 주요 구성 요소는 크게 세 가지로 나눌 수 있습니다.

---

 

1. 뷰 컨트롤러 (View Controllers)

Storyboard에서 가장 핵심적인 구성 요소입니다. 앱의 각 화면을 대표하며, 해당 화면의 UI를 관리하고 로직을 처리하는 Swift 코드(ViewController.swift)와 연결됩니다.

• View Controller Scene: Storyboard 내에서 하나의 독립된 화면을 나타내는 사각형 블록입니다.
• View: 뷰 컨트롤러 Scene 안에 있는 가장 큰 흰색 영역으로, 실제로 사용자에게 보여지는 모든 UI 요소(버튼, 레이블 등)를 담는 컨테이너 역할을 합니다.
• Initial View Controller: 앱이 시작될 때 가장 먼저 로드되는 뷰 컨트롤러입니다. Storyboard에서 화살표(Entry Point)로 표시됩니다.

바로 이 Is Initial View Controller 이 체크박스를 체크해야, 앱이 처음 실행되었을 때, 이 뷰 컨트롤러를 첫 번째 보여줘야할 컨트롤러임을 명시할 수 있습니다. 

 

2. UI 요소 객체 (UI Objects)

사용자가 보고 상호작용하는 모든 시각적 요소입니다. Xcode의 객체 라이브러리(Object Library)에서 뷰 컨트롤러 Scene 안으로 끌어다 놓아 배치합니다.

Text를 작성하고 싶다면 Label 객체를, Button을 넣고 싶다면 Button을 객체를 선택하여 View Controller 화면 내부에 끌어다 놓으면 됩니다. 

분류	객체 예시	설명
콘텐츠 표시	UILabel, UIImageView, UITextView	텍스트, 이미지 등 정적인 정보를 표시합니다.
사용자 입력	UIButton, UITextField, UISwitch	사용자의 탭, 텍스트 입력, 상태 변경 등의 상호작용을 처리합니다.
컨테이너	UITableView, UICollectionView, UIScrollView	여러 항목을 리스트나 그리드 형태로 표시하거나, 화면보다 큰 콘텐츠를 스크롤 할 수 있게 담는 뷰입니다.
컨트롤	UISlider, UISegmentedControl	특정 값을 선택하거나 옵션을 전환하는 데 사용됩니다.

 

 

3. 화면 간 연결 및 흐름 (Segues and Connections)

Storyboard는 단지 화면을 디자인하는 것뿐만 아니라, 화면 간의 이동 경로도 시각적으로 정의합니다.

• Segue (세그): 한 뷰 컨트롤러에서 다른 뷰 컨트롤러로 화면을 전환하는 통로입니다. 보통 버튼 탭과 같은 특정 이벤트에 의해 작동하며, 화살표 모양으로 표시됩니다.
  • Show (Push): 새로운 화면을 스택에 추가하여 전환하며, 뒤로가기 버튼이 자동으로 생깁니다. (주로 UINavigationController 내에서 사용)
  • Present Modally: 현재 화면 위에 새로운 화면을 띄웁니다.
• Connection (연결): Storyboard의 UI 요소와 실제 Swift 코드를 연결하는 방법입니다.
  • IBOutlet (Interface Builder Outlet): UI 요소를 코드에서 참조하고 속성을 변경할 수 있도록 변수로 연결합니다. (예: 레이블의 텍스트 변경)
  • IBAction (Interface Builder Action): UI 요소에서 발생하는 이벤트를 코드의 함수로 연결합니다. (예: 버튼이 탭 되었을 때 실행할 동작)

Storyboard를 사용할 때는 이 세 가지 구성 요소를 이해하고, Interface Builder라는 Xcode의 도구를 통해 UI를 배치하고 속성 검사기(Attributes Inspector)를 사용하여 각 요소의 속성을 설정하게 됩니다.

 

이 Attribute Inspector의 가장 마지막 영역인 Connections Inspector에서 확인 할 수 있습니다. 


다음 글에서는  스토리 보드를 구성하는 UI 요소에 액션을 넣는 아울렛 변수와 액션 함수에 대해서 정리해보도록 하겠습니다.