iOSDC Japan 2020 : Storyboard를 자세히 이해해보자 (의역)

원제 : 詳解Storyboard

2019년 SwiftUI라고 불리는 새로운 UI 기술이 도입되었습니다.
SwiftUI에서는 선언형 Syntax를 도입해 Apple의 각 플랫폼에 대해서 심플한 UI 코드를 작성할 수 있게 되었습니다.
하지만, Swift에 없는 기술을 사용하고 싶고 서포트 중인 OS 버전의 문제로 SwiftUI을 도입할 수 없는 등의 다른 수단으로 UI를 만드는 일이 아직 있습니다.

다른 UI 구축 방법들 중의 하나인 Storyboard는 GUI 베이스의 UI 디자인툴로써 이미지를 가지고 계신 분이 많지만, UI 디자인 툴로써의 측면뿐만 아니라 여러 기능이 가득합니다.

- Restore 기능을 사용해서 Backgroud 상태에서 Kill된 원래의 상태를 되돌려서 UX를 망치지 않기
- FirstResponder를 사용해서 간단하게 Undo, Redo를 구현하기
- 언어뿐만이 아니고 지역을 기준으로 화면 이동방법을 설정
- 코드와 디자인을 분리해서 iPhone, iPad 등 여러 화면 사이즈나 tvOS 등의 플랫폼에서 코드를 공통화 시키기
- OS 버전별 UI를 디자인하기
- Object를 사용해서 ViewController에 코드를 Fat하게 작성하지 않고 ~~ViewController가 필요없는 앱을 만들기

등의 UI 작성뿐만이 아닌 당신의 코드 작성 시간을 비지니스 로직에 활용할 수 있는 Storyboard 활용법을 이야기합니다.

// 원문
2019年、SwiftUIという新しいUI記述方法が導入されました。
SwiftUIでは宣言型シンタックスを導入し、Appleの各プラットフォームに対し、シンプルなUIコードの記述ができるようになりました。
しかしながら、SwiftUIにない機能を使いたい、あるいはサポートするOSの関係でSwiftUIの導入ができないなど、他の手段でUIを構築することはまだあるかと思います。

そのUIの構築方法の一つであるStoryboardは、GUIベースでのUIデザインツールとしてのイメージを持たれている方が多いと思いますが、UIデザインツールとしての側面だけでなく、様々な機能が盛り込まれています。

- リストア機能を使って、バックグラウンド状態からKillされても元の状態に戻し、ユーザー体験を損なわない
- FirstResponderを使って、手軽にUndo、Redoなどを実装する
- 言語だけではない、ロケールごとの画面遷移方法の設定
- コードとデザインを分離し、iPhone、iPadなどの様々な画面サイズや、tvOSなどのプラットフォームでコードを共通化する
- OSバージョン別にUIをデザインする
- Objectを使って、ViewControllerにコードをFatに書かない、あるいはViewControllerを全く用意しないアプリを作る

など、UIの作成にとどまらない、あなたのコードライティング時間をより多くビジネスロジックに回せるようなStoryboardの活用法をお伝えします。


UIHostingController

  • 내부에 SwiftUI를 배치할 수 있는 ViewController = Storyboard에 SwiftUI에 배치 가능
  • IBSegueAciton : IBSection의 prepare method로 init이 가능하다.

Restoration

(SceneDelegate에서는 사용할 수 없다 ㅠㅠ)

init(coder:)
decoder ...

Restore ?
– App 이 죽고 다시 살아났을 때 특정한 화면으로 열거나 init을 실행시키는 것이 가능하다.

Localization

  • InterfaceStoryboard -> 언어별로 Storyboard를 설정하는 것이 가능하다.

First Responder

  • Undo/Redo의 동일한 기능을 하는 복수의 UIButton을 FirstResponder로 연결하면, 통일할 수 있다

특정 OS 버전 이상에서 사용할 수 있는 경우, 에러가 발생한다

  • Build 버전을 특정한다
  • OS 버전별로 Segue로 나눈다.

OutletCollection

  • 버튼의 탭으로 데이터통신이 끝났을 때 특정한 Delegate 메소드를 실행할 때 활용 !









답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중