[iOS/UIKit] UIKit과 Storyboard에 대한 이해, 그리고 AutoLayout의 필요성

앞으로 포스팅을 이어나갈 📱UIKit이란..

 

iOS 애플리케이션의 사용자 인터페이스(User Interface, UI)를 생성(구현)하며,

발생되는 이벤트를 관리하는 하나의 프레임워크(Framework)입니다.

 

(프레임워크란 용어가 생소하시다면, 이곳 포스팅을 참고하시길 바랍니다)

 

 

그런데, 처음 UIKit을 접했을 때

'Storyboard', 'AutoLayout'와 같이 함께 언급되는 개념들이

다소 생소하기도 하고, 헷갈리기도 했는데 말입니다🫨

 

그래서, 첫 포스팅에서 해당 용어와 개념들을

간단 명료하게라도 짚고 넘어가는 시간을 가져볼까 합니다.

 

 

 

 

---

 

 

UIKit(User Interface Kit)이란?

화면구성, 이벤트 관리 등 다양한 Object Library가 한데 모아져 있는 뼈대(Frame)

 

UIKit(User Interface Kit)이란, 앞서 언급한 바와 같이

 

Cocoa Touch Framework 란 iOS앱 개발을 위한 통합 프레임워크 내

UI(User Interface), 앱의 '화면'과 사용자의 '이벤트'를 처리하는 내부 프레임워크입니다.

Cocoa Touch Framework 계층 내 위치한 UIKit Framework

 

 

역할 및 기능

• 애플리케이션의 화면을 구성하며, 관리하는 사용자 인터페이스(UI)를 생성합니다.
  • Object Library 혹은 UI Components 하위 클래스를 활용, 콘텐츠 생성합니다.
  • 각종 뷰(UIView)와 버튼(Button), 라벨(Label) 등의 클래스를 포함합니다.

• 더불어 사용자의 액션(Action)에 대하여 반응, 해당 이벤트를 처리하는 역할을 담당합니다.
  
  • Touch, Press, Gesture, Drag and Drop 등과 같은 액션을 처리합니다.
  • 이를 위해 UIResponser 객체는 변경사항(액션, 이벤트)을 추적, 인터페이스를 업데이트 합니다.

(UIResponser 객체에 대한 자세한 내용은 추후 포스팅을 통해 다루도록 하겠습니다)

 

 

---

 

 

Storyboard란?

사용자가 마주하는 인터페이스를 시각적으로 '확인'하고, '설정'하는 일종의 캔버스(Canvas)

 

UIKit이란 다양한 인터페이스 생성, 관리 도구들이 있다면,

이를 활용하여 UI, 사용자가 서비스를 이용할 수 있는 화면(View)를 구성할 수 있겠지요?  

 

마치 화가가 그림을 그리기 위해

하나의 캔버스(Canvas)와 물감, 붓등의 도구(Tool)이 필요하듯이

 

Storyboard는 UIKit이란 도구를 활용하여 그려내는 하나의 [캔버스]로 비유할 수 있겠습니다.



Storyboard와 Components 관계에 대한 비유, Project에서 살펴보는 Storyboard

 

 

UIView와 UIViewController

• Storyboard를 활용, 화면을 그리기에 앞서 크게 [2가지 구성요소]를 필요로 합니다.
  • 우선 [UIView]는 용어 그대로 화면(View)이자, 이를 구성하는 요소들의 기본 클래스 입니다.
    (여기서 '요소'란, Labe이나 Button과 같은 Components, 하위 클래스를 의미합니다)
  • [UIViewController]는 쉽게 말해 화면(View)을 관리하는 단위의 객체입니다.

UI 화면을 구성하는 기본요소, UIView

 

 

담당하는 UIView를 관리하는 객체, UIViewController

 

 

 

---

 

 

AutoLayout이란?

Apple 대부분의 플랫폼에서 활용하는 레이아웃 엔진 (Layout Engine)

 

앞서 살펴본 2가지 개념을 먼저 간단하게 요약하자면..

• UIKit : iOS 앱 개발을 위한 프레임워크 중, 화면과 이벤트를 처리하는 도구모음(Tools)
• Storyboard : UI를 구성하기 위해 시각적으로 확인하고 관리할 수 있는 캔버스(Canvas)

 

그렇다면, 마지막으로 자주 함께 언급되고 사용되는

AutoLayout에 대한 개념만 아-주 간단하게 짚고 넘어가도록 하겠습니다.

 

 

 

개념 및 필요성

• AutoLayout이란, '화면에 어떻게 보여질 것인가'에 대한 UI적 기법 중 하나입니다.
  • 화면을 구성하는 요소들의 크기와 위치에 대한 배치 방식이며, 이는 제약을 통해 결정됩니다.
  • 여기서 제약(Constraints)이란, 요소의 '속성(Attributes)'을 설정하는데서 시작됩니다.

• AutoLayout이 필요한 단편적인 이유는 디바이스 별 크기와 비율이 상이하기 때문입니다. 
  • 모든 디바이스 별로 요소들의 위치, 크기를 설정하는 것은 한계가 존재합니다.
  • 또한, 사용자의 액션에 따라 동적(Dynamic)으로 변경되는 요소가 존재하기에 반드시 필요합니다. 

디바이스 별로 'Hello' 라벨의 위치가 모두 제 각각이다😡

 

 

---

 

첫 번째 UIKit 포스팅을 완료하였습니다.

 

다음 포스팅부터는 다양한 컴포넌트, 도구들의 활용방법과 더불어

관련된 오류나 응용방법에 대해 꾸준히 다뤄보도록 하겠습니다.