본문 바로가기
💻 개발/iOS

[iOS] 스토리보드 개념 및 용어정리

by angrxxeon 2022. 9. 24.

스토리보드란?

스토리보드Storyboard란 앱의 흐름을 나타내며, 시각적으로 화면을 구성하는 곳.

 

단축키 : command + shift + L

 

Label

: 텍스트를 포함할 수 있고, 텍스트의 글꼴, 색상, 강조표시, 음영 등 속성을 바꿔줄 수 있음.

 

Button

: 텍스트, 이미지 등 모양 속성을 정의.

버튼의 상태에 따라 다른 모양을 지정 가능.

 

Segmented Control

: 단일 또는 다중 선택 또는 명령 목록을 나타낼 수 있다.

각 세그먼트는 텍스트나 이미지를 표시할 수 있지만 둘다 표시할 수는 없음.

 

Text Field

: 편집 가능한 텍스트 오브젝트이며, 응용 프로그램별 방식으로 입력을 처리할 수 있다. (Edit Text)

사용자가 Text Field를 터치하면 키보드가 올라온다.

 

Slider

: 연속된 범위의 값으로 부터 단일 값을 선택해서 값을 불러오는 제어 오브젝트, 말 그대로 슬라이더

사용자는 트랙을 따라 엄지 손가락을 밀어 값을 선택

 

Switch

: On/Off 같은 두 가지 옵션을 제공하는 컨트롤

 

Activity Indicator View

: 일이 진행중임을 보여주는 View

완료율을 알 수없는 작업에 대한 처리를 나타내는 데 사용

 

Progress View

: 시간에 따른 작업의 진행을 묘사하는 뷰 오브젝트

긴 작업이 진행 중임을 나타내며 완료된 작업의 백분율을 나타냄

 

Page Control

: 수평의 연속되는 점으로 표시되는 제어 오브젝트

열려있는 각 페이지에 대해 점을 표시하여 응용 프로그램에서 열려있는 페이지 수를 나타냄. 현재 본 페이지에 해당하는 점이 강조 표시

 

Stepper

: 값을 증가하거나 감소시키는 제어 오브젝트

레이블 또는 텍스트 필드와 결합

 

Horizontal Stack View

:View들을 가로로 일정한 간격으로 배치하기 위해 사용( Axis: Horizontal )

 

Vertical Stack View

: View들을 세로로 일정한 간격으로 배치하기 위해 사용( Axis: Vertical )

 

Table View

: 테이블 타입으로 데이터를 표시할 수 있는 뷰 오브젝트

 

Table View Cell

: 테이블 뷰에서 셀의 특성 및 동작을 정의

테이블 셀의 선택한 상태 모양을 설정하고, 편집 기능을 지원.

 

Image View

:UIView를 상속받음

단일 이미지 또는 일련의 애니메이션 이미지를 인터페이스에 표시하는 View

 

Collection View

: 데이터 원본과 위임하여 스크롤 가능한 셀 컬렉션을 표시

스크롤 가능한 셀 컬렉션을 표시하도록 데이터 원본 및 위임과 조정

 

Collection View Cell

: 컬렉션 뷰에서 하나의 셀을 나타내는 단일 View

모양을 제공하려면 Label 및 Image View 와 같은 하위 View로 채움

 

Collection Reusable View

: Collection View 안에서 재사용 가능한 뷰의 속성이나 행동을 정의하는 오브젝트 ( 헤더나 푸터 )

 

Text View

: 사용자가 텍스트 보기를 탭하면 키보드가 나타나는 오브젝트

 

Scroll View

: 애플리케이션 창의 크기보다 큰 콘츠를 표시하는 메커니즘 제공, 스와이프 등을 활용해서 스크롤 할 수 있는 오브젝트

 

Date Picker

: 날짜와 시간을 선택할 수 있도록 여러개의 회전 바퀴를 사용하는 오브젝트

 

View

: 뷰 계층 구조에서 부모의 사각형 영역 내에서 그리기, 하위 뷰 레이아웃 및 이벤트 처리를 위한 구조를 제공하는 오브젝트

 

Container View

: 하위 뷰 컨트롤러를 호스팅하기 위해 뷰 컨트롤러의 뷰 계층 구조 내에서 영역을 정의하는 오브젝트

 

Navigation Bar

: 상태 표시줄 바로 아래에 탐색 표시줄을 표시하는 메커니즘을 제공하는 오브젝트

 

Navigation Item

: 항목이 스택의 맨 위에 있을 때 탐색 모음에 표시되는 내용과 뒤로 항목 일 때 표시되는 방법을 포함하여 UINavigationBar 개체 스택의 탐색 항목에 대한 정보를 캡슐화

 

Toolbar

: 화면 하단에 도구 모음을 표시하는 메커니즘을 제공하는 오브젝트

 

Bar Button Item

: 각 막대 버튼 항목은 버튼과 유사하게 작동하는 오브젝트

 

Fixed Space Bar Button Item

: 인접한 도구 모음 항목을 고정 된 공간으로 분리하는 오브젝트

 

Flexible Space Bar Button Item

: 인접한 도구 모음 항목을 유연한 공간으로 분리하는 오브젝트

 

Tab Bar

: 여러 섹션을 가지는 앱에서 각 섹션을 선택해 해당 View로 이동할 수 있도록 밑에 하나 이상의 Button를 표시하는 컨트롤

Tab Bar Item

: Tab Bar의 항목을 설명하는 객체

 

Search Bar

: 사용자로부터 검색과 관련 정보를 받게 하기 위한 View

Menu Command (UICommand)

: 가지고 있는 액션을 셀렉터에서 수행하는 메뉴 요소

 

Main Menu

: 기본 메뉴

 

Sub Menu

: 하위 항목들을 보여주는 메뉴

 

Inline Section Menu

: 하위 항목을 구분자와 함께 인라인으로 표시하는 메뉴

 

View Controller

 : 하나의 View를 관리하는 객체

 

Storyboard Reference

: 나뉜 스토리보드를 연결해주는 메타데이터

 

Navigation Controller

: 뷰 컨트롤러의 스택과 내비게이션바를 관리할 수 있는 오브젝트

 

Table View Controller

:  UITableView를 관리하고 올바른 치수와 크기 조정 mask를 사용하여 인스턴스를 자동으로 생성하고, 테이블 뷰의 위임자 및 데이터 원본으로 작동. 

 

Collection View Controller

: UICollectionView를 관리하며, 올바른 치수와 크기 조정 mask를 사용하여 인스턴스를 자동으로 생성하고, Collection View의 위임자 및 데이터 원본으로 작동

 

Tab Bar Controller

: 각각 탭 표시줄 항목을 나타내는 뷰 컨트롤러 세트를 관리하는 오브젝트

 

Split View Controller

: 마스터 View 컨트롤러에 디테일 인터페이스를 사용할 때 주로 사용하는 오브젝트.

 

Page View Controller

: 데이터 소스와 델리게이트를 통해 뷰 컨트롤러 시퀀스를 페이지로 표시하는 오브젝트

 

Object

: 사용자 정의 클래스 Inspector를 사용하여이 객체를 특정 클래스의 인스턴스로 변환하는 오브젝트

 

Tap Gesture Recognizer

: 사용자가 탭하면 작업 메시지를 보낸다.

 

Pinch gesture recognizer

: 두 번의 터치를 포함하는 pinch gesture를 해석하는 gesture recognizer

 

Rotation gesture recognizer

: 2개의 손가락으로 회전하는 제스처를 해석하는 gesture recognizer

 

Swipe gesture recognizer

: 하나 이상의 방향에 대하여 스와이프 제스처를 해석하는 gesture recognizer

 

Pan gesture recognizer

: 드래그를 해석하는 gesture recognizer

 

Screen edge pan gesture recognizer

: 스크린의 가장자리 근처에서 드래그를 해석하는 gesture recognizer

 

Long pressure gesture recognizer

: 길게 누르는 입력을 해석하는 gesture recognizer

 

Custom gesture recognizer

: 커스텀 제스처를 해석하는 gesture recognizer


AutoLayout

: AutoLayout은 뷰에 주어진 제약조건에 따라 뷰의 크기와 위치를 동적으로 계산해 배치하는것으로,
외부 또는 내부의 변화에 동적으로 반응하여 유저 인터페이스 구성

크게 pin으로 설정하는 방법과, ctrl+드래그앤드랍으로 설정 가능

 

오토 레이아웃은 뷰의 크기와 위치를 동적으로 계산한다.(즉, 인터페이스에 절대적인 좌표가 아닌 상대적인 좌표가 필요할 때 유용)

 

안전 영역(Safe Area)

: 앱이 상태바, 네비게이션바, 툴바, 탭바를 가리는 것을 방지하는 영역.

표준 시스템이 제공하는 뷰들은 모두 안전 영역을 준수하고 있다.