스위프트 UIKit

UIKit 기초 개념

UI 와 UX 의 차이

UI (User Interface)

 

Interface는 상호작용을 할 수 있는 창구, 상호작용할 수 있는 매개체를 의미한다.

ex) TV와 상호작용 하려면 리모콘 버튼들(인터페이스)가 필요하다.

ex) 전자레인지의 작동 버튼들(인터페이스)

 

UI는 앱에서 유저와 상호작용을하는 구성 요소(창구)들이다.

ex) 타이틀, 배터리 잔량, 텍스트 입력창, 이미지 뷰, 스위치 버튼 등..

 

앱을 구성하는 모든 시각적 요소들은 UI가 될 수 있다.

UX (User Experience)

 

User Experience는 유저의 경험을 의미한다.

앱을 개발하는데, 버튼1과 버튼2를 유저가 순서대로 눌러야 하는 상황이 연출된다고 가정을 하면 좌/우 예시중 좌측 예시가 유저의 손가락을 덜 움직이게 하기 때문에 유저 경험에 더 좋다.

이럴 때 UX 가 더 좋다 라고 표현한다. 그리고 앱을 서비스하는 회사에서 이 사소한 차이가 매출의 차이를 낼 수 있기 때문에 UX도 상당히 중요하다.

 

 

 

 

UIKit 개념

UIKit은 iOS 앱에서 필요한 UI 요소들을 제공하는 프레임워크로 애플이 직접 제공해준다. UIKit은 앞서 설명한 예시의 UI 구성요소를 다 제공하고 있다. 

• UIButton : 버튼
• UILabel : 제목 표시
• UITextView : 텍스트 입력창
• UIScroolView : 스크롤 뷰
• UIImageView : 이미지 뷰

등 수많은 구성요소들이 존재한다.

 

⊙ 프레임 워크(Framework)

UIKit 이 UI 프레임워크라고 자연스럽게 지나갔지만, 프레임 워크란 직역해보면 Frame = 틀, work = 작업 으로 즉 작업을 하는 틀(뼈대)을 의미한다.

"이러 이러한 맥락 안에서 개발을 해라" 라는 틀을 제공해주고, 그걸 사용하는 개발자는 그 틀 안에서 개발을 하게된다. 쉽게 말하자면 UIKit 은 iOS 개발자가 Swift 로 UI를 개발할 수 있는 틀을 제공하는 도구 라고 할 수 있다.

 

UIKit VS SwiftUI

 

SwiftUI는 UIKit 과 같은 UI 개발 프레임워크로 iOS 13버전 이상에서는 SwiftUI로 개발이 가능하다. 즉 UIKit이 먼저 나오고, SwiftUI는 그 이후에 나온 프레임워크이다. 

SwiftUI는 선언적 프로그래밍을 사용하고, UIKit은 명령적 프로그래밍을 통해 사용한다.

• 선언적 프로그래밍 : UI의 상태에 대해 선언하고, 상태가 변경되면 자동으로 UI를 업데이트 한다.
• 명령적 프로그래밍 : UI의 상태를 명령으로 정의하고, 변화에 따른 업데이트를 직접 처리한다.

SwiftUI는 아래 사진처럼 Preview를 보면서 개발이 가능하다.

 

SwiftUI 보다 UIKit을 먼저 공부하는 이유

SwiftUI는 iOS 13 버전 이후부터 지원이 시작된 비교적 최근에 나온 프레임워크이다. 따라서 SwiftUI 보다 UIKit이 개발자게에 사용된 기간이 길기 때문에 시중 자료 중 UIKit 으로 작성된 코드가 SwiftUI 로 작성된 코드보다 훨씬 많다. 따라서 공부를 하기에는 많은 자료가 존재하는 UIKit 으로 공부를 하는것이 더 낫다.

또한 현재 서비스 중인 앱들은 iOS 13 버전보다 낮은 버전을 지원하는 앱이 굉장히 많기 때문에 모든 iOS 기기에서 사용이 가능한 UIKit을 사용한다.

SwiftUI로 개발한 앱은 사용할 수 있는 유저 풀이 UIKit 보다 현격히 적기 때문에 이는 서비스를 운영하는 회사 입장에서 주의 깊게 고려할 요소이다. 

또한 아직도 취업시장에서 원하는 기술 스택이 UIKit 의 비율이 더 높기 때문에 UIKit을 우선적으로 공부한다.

Cocoa Framework

 

Cocoa Framework

iOS 공부를 하다 보면 Cocoa 라는 단어를 많이 보게된다.

Cocoa Framework는 애플에서 iOS, macOS등의 애플 운영체제용 어플리케이션을 제작할 때 사용되는 프레임워크를 말한다.

 

Cocoa Framework 중 iOS를 위한 프레임워크를 Cocoa Touch 라고 한다.

 

UIKit, Foundation 이 Cocoa Touch 안에 포함된다.

 

 

 

 

import Foundation VS import UIKit

NewFile 로 새로운 파일을 생성할 때, Swift File / Cocoa Touch Class 를 선택해서 생성할 수 있다. 우선 Swift File 로 파일을 생성하면 import Foundation이 되어 있는 상태로 생성되고, Cocoa Touch Class 를 선택해서 생성하면 import UIKit 이 되어 있는 상태로 생성된다. 앞서 공부했듯, UIKit 은 UI 를 위한 프레임워크이다.

하지만 Swift로 반드시 UI 관련 코드만 작성하는 것이 아니라, UI와 무관한 코드를 작성할 수 있다. 그런 경우 import UIKit 을 하는것보다는 import Foundation을 사용해 코드를 작성한다.

Foundation은 Swift를 위한 기초 프레임워크이지만, UI 관련 프레임워크가 생략된 것이다.

파일의 맨 처음에 import Foundation 이 되어있는지, import UIKit 이 되어있는지에 따라 파일에 작성된 코드의 의도와 범위를 유츄해볼 수 있게 된다.

 

Safe Area

 

아이폰에는 Safe Area라는 보이지 않는 영역이 존재한다. Safe Area는 앱의 컨텐츠가 안정적으로 보이기 위한 영역으로 아이폰 기기마다 모습이 조금씩 다르기 때문에 Safe Area가 필요하다.

예를 들어 노치가 있는 기기도 있고, 없는 기기도 있다면 이런 기기 특성과 무관하게 안정적으로 앱의 컨텐츠를 노출시켜주기 위한 가이드 영역이 존재해야 하는데 그게 Safe Area이다.

 

 

 

 

 

AutoLayout & Constraint

AutoLayout

AutoLayout 이란 기기 사이즈에 맞춰 자동으로 사이즈를 맞춰주는것을 말한다. AutoLayout 을 사용하지 않을 경우, iPhone 15에서 노출된 사진의 위치와 iPad에서 노출된 사진의 위치가 의도와 맞지 않게 다르게 된다. 마지막 사진은 AutoLayout을 적용시킨 사진이다.

Constraint

Constraint는 뷰와 뷰 사이의 제약조건을 의미한다.

left / right / top / bottom 각각 좌 / 우 / 위 / 아래 제약조건을 의미한다.

Leading / trailing 은 직역하면 앞 / 뒤 제약 조건인데, 지역화된 조건이기 때문에 왼족에서 오른쪽으로 읽는 게 자연스러운 지역 조건의 기기에서는 leading = left, trailing = right 로 대응되고, 반대의 경우에는 leading = right, trailing = left 로 대응된다.

 

위 고양이 사진에서 기기의 leading / trailing / top / bottom Constraint를 지정해두었기 때문에 기기가 달라지더라도 원하는 레이아웃으로 조정된다.

 

Margin, Padding

 

margin은 Border 바깥쪽을 차지하고, 주변 요소와 거리를 두기 위한 영역이다.

 

padding은 Content와 Border 사이의 여백을 나타내는 영역으로, Content 영역이 배경색이나 배경 이미지를 가질 때, 이 Padding 영역까지도 영향을 미친다.

 

 

스토리보드에서 cmd + shift + L을 누르면 UIKit의 구성요소들을 사용할 수 있다. 혹은 툴 바 영역의 플러스버튼(+)을 눌러도 같은 동작을 할 수 있다.

 

Label 을 사용하고 싶다 --> Label 을 드래그해서 스토리보드로 옮김 --> 스토리보드에 Label 생성

 

UIKit 에서 자주 활용되는 기본 클래스

UILabel

UIButton

UIImageView

UIView

UIStackView

UIScrollView

 

다양한 UIKit 의 클래스들

UITableView

 

UITableView 는 테이블 형태의 뷰를 말하며 각 테이블 항목은 UITableViewCell 이라고 한다.

 

UICollectionView

 

UICollectionView 는 UITableView 보다 복잡한 구성을 할 수 있는 뷰를 말하며 각 컬렉션 뷰의 항목은 UICollectionViewCell 이라고 한다.

 

UIAlertController

 

UIAlertController 는 알럿을 띄우는 뷰를 말하며 앱을 맨 처음 설치하고 위치 정보, 사진 접근 등 권한을 물을 때도 알럿을 사용한다.

 

UITextView

 

UITextView 는 텍스트를 입력하는 뷰를 말하며 검색 창이나, 아이디 입력 창에 많이 사용한다.

 

UIPageViewController

 

UIPageViewController 는 페이지를 넘길 수 있는 뷰를 말하며 인스타그램에서도 페이지를 넘기는 듯한 페이지 뷰를 사용하고 있다.