WWDC23 - What’s new in UIKit

드디어 WWDC23의 막이 열렸습니다!

다들 VisionOS 와 Vision Pro 보셨나요??

너무너무 놀라워서 당장이라도 공부하고 싶은 마음이 컸지만..

스유와 ARKit을 모른다면 쉽게 접근할 수 없을 것 같더군요..! 😭

그래서 여유가 좀 생긴다면 천천히 하나씩 공부해보려고 합니다!

일단은 하던 UIKit에 집중해야죠!

그래서 올해 덥덥디씨 공부의 시작을 “What’s new in UIKit” 으로 시작해보려 합니다.

Architectural Enhancements

우선 Architectural Enhancements 입니다! (이거 한국어로 뭐라고 번역해야하나요..)

총 5가지의 파트로 나누어 설명되고 있습니다.

Xcode Previews

드디어 Preview를 UIKit 순정으로 사용할 수 있게 되었습니다! 👏👏

원래는 UIKit에서 앱의 프리뷰를 앱 빌드 없이 보려면 SwiftUI의 feature를 빌려와서 사용해야 했죠.. 😭

이제는 import SwiftUI 없이 순수 UIKit에서도 가능합니다!

바로 새롭게 등장한 Swift의 macro 기능을 사용하는데요..!

오오… #Preview까지만 입력을 했는데도 옆에 Preview 화면이 바로 뜨네요… 😮

#Preview("Home") {
  let vc = HomeViewController()
  vc.isBold = false
  return vc
}

이렇게 새로운 macro를 사용해서 SwiftUI와 같이 Preview를 사용할 수 있게 되었습니다.

vc.type = .edit과 같이 vc의 프로퍼티나 메서드를 바꿔가면서 작업할 수도 있어요!

이렇게요..!

근데요.. 문제가 하나 있습니다.

iOS 17부터거든요! 🥲 🥲 🥲

아무래도 실제로 사용하기엔 시간이 조금 걸릴 것 같죠..?

저는 일단은 Debug 타겟을 17.0으로 설정하니까 빌드는 되더라구요..

나중에 Release할 때는 별도의 작업을 해주어야겠지만 우선은 이렇게 진행해보겠습니다.

#Preview가 정말 편리한 점은 ViewController 뿐만 아니라 UIView 에서도 사용할 수 있다는 점입니다.

이렇게 다양한 크기의 컴포넌트로 시각화해주어서 혹시 모를 버그를 방지하는데도 큰 도움이 될 것 같네요.

ViewController Life Cycle

다음으로는 ViewController의 Life Cycle에 변경점이 있습니다.

새로운 콜백 함수가 추가되었는데요.. viewIsAppearing이라는 이름을 가지고 있습니다.

이 viewIsAppearing은 viewWillAppear와 viewDidAppear 사이에 호출된다고 하는데요..!

그냥 viewWillAppear를 사용하면 되는거 아니냐! 했지만..

viewIsAppearing이 호출되는 시점은 UI의 trait collection이 구성 되었고, 각 컴포넌트들이 UI 계층(hierarchy)에 추가되고 확정된 시점 이라고 합니다.

override func viewDidLoad() {
  super.viewDidLoad()
  self.view.addSubview(self.label)
  self.label.snp.makeConstraints { make in
    make.center.equalToSuperview()
  }
}

override func viewWillAppear(_ animated: Bool) {
  super.viewWillAppear(animated)
  print("View will Appear: \(self.label.frame)")
}

override func viewIsAppearing(_ animated: Bool) {
  super.viewIsAppearing(animated)
  print("View is Appearing: \(self.label.frame)")
}

override func viewDidAppear(_ animated: Bool) {
  super.viewDidAppear(animated)
  print("View did Appear: \(self.label.frame)")
}

자 그럼 이렇게 해두면 어떻게 출력되나 한 번 볼까요?

🤔 🤔 🤔 레이아웃이 안잡혀있는데요..?

뭥미..

라고 삽질을 하던 중 다음 화면에서 해답을 찾을 수 있었습니다.

viewIsAppearing은 LayoutSubviews들 보다는 앞에 콜백되거든요! 🫣

viewIsAppearing이 등장한 배경은 다음과 같습니다.

1. viewWillAppear는 컴포넌트들이 계층에 추가되기 이전에 콜백되기 때문에 trait collection을 사용하거나 view의 사이즈와 위치에 따른 로직을 추가하기에는 너무 이릅니다.
2. viewDidAppear는 모든 애니메이션이 끝난 후에 콜백되기 때문에 업데이트할 요소들이 너무 늦게 업데이트 되고, 유저들은 이를 직접 보게 된다.
3. layoutSubviews들과 같은 시기에 콜백되는 함수가 필요하다…!

그러면 그냥 layoutSubviews에서 작업하면 되는거 아닌가요? 라는 질문이 생기던 찰나 바로 또 설명해주십니다.

layoutSubviews들은 transition이 있을 때, 혹은 view가 visible한 동안 몇 번이고 호출 될 수 있지만, viewIsAppearing은 transition당 딱 한 번 만 호출됩니다.

또한 레이아웃을 잡는 동작이 필요가 없을 때도 호출되기 때문에 유용한 상황도 있겠죠!

Trait System Enhancements

위 내용과 이어지는 내용인 것 같네요!

이건 근데 아직 제가 학습하지 못한 내용이라…

이런 내용이 있다는 것만 알아두고 넘어가겠습니다..

마침 세션 중에 관련 세션이 있는 것 같아 거기서부터 시작해볼 것 같네요!

원래는 프레임워크에서 제공하는 형태의 trait만 사용할 수 있었지만, 이제는 커스텀하여 만들 수 있다! 라는 것이 핵심인 것 같습니다.

Animated Symbol Images

애플은 아이콘을 SF Symbols를 통해 제공하고 있죠?

이 아이콘들을 사용하면 추가적인 노력 없이 앱 전반적으로 통일된 질감을 낼 수 있는 것이 큰 장점입니다.

이제 이 SF Symbols에 애니메이션이 추가된다고 하네요.

심지어 기본으로 제공되는 Symbol 외에도 커스텀 Symbol에도 적용할 수 있다고 합니다.

그래서 어떻게 하냐?.. 기본은 짱 쉽습니다.

self.imageView.addSymbolEffect(.bounce)

이렇게 .bounce 이펙트를 추가해주면 한 번 bounce 됩니다.

ㅋㅋㅋㅋㅋ 귀엽지 않나요..

self.imageView.addSymbolEffect(.variableColor.dimInactiveLayers)

self.imageView.removeSymbolEffect(ofType: .variableColor)

.bounce와는 다르게 .variableColor는 이펙트를 제거해줄 때까지 반복됩니다.

이렇게요!

이 외에도 여러가지 이펙트들이 있습니다.

이 내용 또한 별도의 세션으로 준비되어 있다고 하네요.

거기서 더 자세히 살펴보도록 합시다!

Empty States

생각치도 못한 기능이 UIKit에 추가되었습니다.

바로 비어있는 화면 Configuration!

근데 그 전에 이것 좀 봐주세요..

😆 😆 😆 너무 귀여우셔…

그래서 이렇게 귀엽게 소개하신 내용이 뭐냐면요..

이렇게 컨텐츠가 없는 비어있는 화면 입니다.

정말 순수하게 컨텐츠가 없거나 네트워크 오류로 인해 불러올 수 없는 등 화면에 아무것도 표시할 수 없는 경우 들이 있죠?

var config = UIContentUnavailableConfiguration.empty()

config.image = UIImage(systemName: "star.fill")
config.text = "No Favorites"
config.secondaryText = "Your favorite translations will appear here."

viewController.contentUnavailableConfiguration = config

그럴 때 이렇게 간단하게 비어있는 화면에 대한 핸들링을 해줄 수가 있게 되었습니다.

ViewController 내부에서 사용할 수 있는 방법은요?

updateContentUnavailableConfiguration(using state:) 메서드를 override해서 사용해주면 됩니다.

override func updateContentUnavailableConfiguration(
  using state: UIContentUnavailableConfigurationState
) {
  var config: UIContentUnavailableConfiguration?
  if self.searchResults.isEmpty {
    config = .search()
  }
  self.contentUnavailableConfiguration = config
}      

이렇게 contentUnavailableConfiguration을 교체해주는 로직들을 넣어주고, 변경이 필요한 곳에서

self.setNeedsUpdateContentUnavailableConfiguration()

를 호출해주면 됩니다.

아주 간단하죠!

Internationalization

다음 파트는 국제화입니다.

이 파트는 사실 접할 기회가 많진 않을 것 같아서 관심 있는 분야만 살펴볼게요..

Wrapping and Hyphenation

전 파트가 사실 아랍 문자와 관련된 내용이라 흠.. 하면서 보고 있었는데요.

이 파트로 넘어오며 한국어가 언급돼서 엇! 하면서 다시 집중해서 보게 되었습니다.

중국어, 독일어, 일본어, 그리고 한국어의 line-breaking 에 향상이 있다고 하네요.

대부분의 경우에는

let label = UILabel()
label.text = "안녕하세요!"
label.traitOverrides.typesettingLanguage = Locale.Language(identifier: "ko")     

이렇게 typesettingLanguage trait을 설정해주는 것 만으로도 line-height와 hyphenation rule을 설정해줄 수 있다고 하네요.

UIImage를 받아올 때도 Locale에 따라 다른 크기를 받아올 수 있다고 합니다.

UIImage의 font 크기가 UILabel의 크기와 맞지 않는 경우에 직접 값을 비교해가며 넣느라 고생한 경험이 있는데, 그 문제가 해결된 것 같습니다.

let locale = Locale(languageCode: .korean)

imageView.image = UIImage(
  systemName: "character.textbox",
  withConfiguration: UIImage.SymbolConfiguration(locale: locale)    
)

자동으로 되는 것은 아니고, 이렇게 locale을 configuration으로 제공해주는 것으로 적용이 가능합니다.

General Enhancements

아이패드 부분은 우선 쭉 넘어가고…

전반적인 향상 부분을 살펴보도록 하겠습니다.

CollectionView Improvements

CollectionView가 성능적으로 더! 향상되었다고 하네요..

대략 10000개의 아이템이 있을 때, iOS 16에 대비해서 두배정도 빠르다고 합니다.

10000개의 아이템까지 표현할 일이 있을까..? 싶긴 한데.. 아무튼 빨라서 안좋을 건 없으니까요?

이 최적화는 Snapshot을 사용하는 방법, batchUpdate를 사용하는 방법 모두에게 통용된다네요!

근데 어떻게 한 건지는 설명을 안해서.. 그냥 그렇다고 알고 넘어가라는 것 같습니다…

다음으로는 CompositionalLayout 의 향상점입니다.

제가 아주 사랑하는 CompositionalLayout.. 얼마나 발전했나 볼까요?

적용 예시로 애플이 가져온 아이패드의 건강 앱입니다.

두 Item 모두 .estimated 레이아웃 사이즈로 구현되었다고 하는데요.. 잘 보면 두 아이템의 높이가 다릅니다.

그러니까 Item 자체의 사이즈가 다르지만, 하나의 그룹으로 묶여있기 때문에 하단 영역이 남아있는 모습인 것이죠.

이를 해결하기 위해 새로운 layoutDimension이 소개되었습니다.

uniformAcrossSiblings 이라는 이름으로 등장했네요.

NSCollectionLayoutDimension.uniformAcrossSiblings(estimate:) 

하나의 그룹안에 있는 아이템들이 가장 큰 아이템의 크기에 맞춰지는 것 을 볼 수 있네요.

이렇게 끝 지점이 달라서 불편했던 레이아웃을

그룹 내의 가장 큰 아이템에 맞춰 높이를 통일 시킬 수 있게 되었습니다.

편안… 😌

Spring Animation Parameters

Spring Animation의 파라미터를 두 가지로 줄이는 향상이 있다고 합니다.

duration 과 bounce 이렇게 두 가지로요.

duration은 애니메이션 전체에 걸리는 시간이 아니라 변환 위치에 다다르는 시간입니다. bounce와는 완벽하게 독립적으로 동작한다고 하네요.

bounce는 말 그대로 튕기는 정도를 조절할 수 있는 파라미터 입니다.

이 두 파라미터는 UIView.animate에 바로 적용할 수 있습니다.

UIView.animate(springDuration: 0.5, bounce: 0.5) {
  self.circle.center.x += 100
}

이 두 파라미터는 Optional 파라미터라서

UIView.animate {
  self.circle.center.x += 100
}

이렇게 파라미터 없이 사용하게 되면 시스템이 정해둔 기본값으로 동작합니다.

Text Interactions

텍스트 입력 커서와 테스트 선택에 새로운 API들이 제공됩니다.

이제 UITextInteraction을 통째로 가져와 적용하는 대신, 선택한 텍스트에 대한 UI만 사용할 수 있다고 합니다.

새로운 API들은 UITextViewDelegate를 채택하면서 사용할 수 있으며, link와 text attachments를 더 자유자재로 사용할 수 있도록 한다고 합니다.

추가로 link가 아닌 텍스트에 대해서도 인터랙션 액션을 추가할 수 있는 API도 추가되었다고 하네요!

다만 이 부분은 제가 적용해본 적이 없어서 제대로 이해한 것인지 모르겠네요..

Default StatusBar Style

이런 경우 아주 많을 겁니다.

이 경우 라이트 모드라서 검정색의 StatusBar가 사용되고 있습니다.

하지만 컨텐츠를 위로 스크롤하면..?

쨔잔.. 이렇게 컨텐츠와 StatusBar가 겹쳐보이면서 원래라면 검정색의 StatusBar가 안보이게 됐겠지만,

override var preferredStatusBarStyle: UIStatusBarStyle {
  return .default
}

이렇게 .default로 설정해두면 알아서 뒤에 배치된 컨텐츠에 따라 색상을 바꾼다고 하네요.

심지어 이 변화는 양쪽이 별개로 작동합니다.

아주 굿! 👍

Drag and Drop Enhancements

이 부분은 직접 보는게 빠를 것 같아요!

이제 드래그 & 드롭이 가능한 컨텐츠는 컨텐츠의 종류에 따라 앱 아이콘에 드롭하는 것 만으로도 특정 액션을 할 수 있습니다.

Info.plist 의 CFBundleDocumentTypes에 해당 파일의 형식이 지원하는 지를 설정해주면 바로 사용할 수 있습니다.

이렇게 설정된 형식의 파일은 UIScene delegate 콜백에 의해 처리된다고 하네요!

ISO HDR Image Support

UIKit에서 이제 UIImageView나 UIGraphicsImageRenderer에서 ISO HDR 이미지를 쉽게 사용할 수 있습니다.

이 부분도 관련 세션에서 자세하게 다룬다고 합니다..

PageControl

UIPageControl은 자동 전환되는 배너로 많이 쓰이고 있죠.

그 쓰임새를 강화할 수 있도록 UIPageControl에 타이머 가 추가되었습니다.

단순히 점만 있던 것을 넘어 이제 현재 페이지가 얼마나 진행되었는지 를 시각적으로 제공하네요.

let timerProgress = UIPageControlTimerProgress(preferredDuration: 10)
pageControl.progress = timerProgress

timerProgress.resumeTimer()

UIPageControl의 새로운 progress 프로퍼티를 활용해서 쉽게 사용할 수 있습니다.

그리고 무려… 빌트인 타이머 가 생겼다고 해요..

타이머가 될 때마다 다음 페이지로 알아서 넘어가는 것은 물론이고,

myTimer.addPeriodicTimeObserver { timer in
  progress.currentProgress = Float(timer.seconds / timer.duration)
  // ..
}

이렇게 직접 progress를 설정해줄 수도 있어요!

이제 자동 무한 스크롤 배너를 아주 쉽게 구현할 수 있겠네요.

Palette Menus

아니 진짜 이분 왜 이렇게 귀여우신 건데요..

아무튼..

이런 색상을 선택하는 메뉴가 지금도 이곳저곳에 있었죠..?

이제 Palette 메뉴를 기본적으로 제공한다고 합니다.

UIMenu(options: [ .displayInline, .displayAsPalette ], children: [ ... ])   

이렇게 UIMenu에 넣어주는 것으로 간편하게 사용할 수 있습니다.

색상 뿐만 아니라

UIAction(image: UIImage(systemName: "heart.fill"), state: .on) { ... }

이렇게 이미지도 넣어줄 수 있네요.

이미지의 경우 .on 상태일 때 tintColor로 하이라이트 된다고 합니다.

여기까지가 “What’s new in UIKit” 세션의 내용이였습니다.

Preview와 StatusBar, Progress가 접목된 PageControl..

마음에 드는 내용들이 잔뜩 있었네요. 👍

다른 세션도 얼른 공부하러 출동!

References

WWDC23 - What’s new in UIKit