본문 바로가기

개발/'사과'해

iOS14 Widget

애플이 9월 17일 iOS 14를 공식 release 했습니다. 이번 배포로 iOS 개발자들이 iOS14에서 발생하는 여러 문제들로 인해 적지 않게 당황한 것으로 보입니다. iOS 14에 추가된 주요 기능은 아래와 같죠.

 

홈 화면에서 만나는 위젯

앱 보관함

앱 클립

Picture in Picture

...

 

여기서 저는 홈 위젯을 다뤄보려 합니다.


 

홈 화면에서 만나는 위젯

 

말 그대로 홈에 위젯을 추가하는 것입니다. 먼저 애플 개발 문서를 통해 WidgetKit이 뭔지 간략하게 공부해볼게요.

 

 

홈 화면에 위젯을 제공하기 위해선 WidgetKit의 도움이 필요합니다. 위젯은 Small, Medium, Large 이렇게 3가지 사이즈가 있어요.

하나의 사이즈만 제공해도 되고 모든 사이즈를 다 제공해도 되지만, 각각 사이즈에 맞는 UI/UX를 제공하는 편이 좋겠죠.

그럼 WidgetKit에는 또 어떤 놈들이 우릴 기다리고 있는지 한번 살펴보겠습니다.

 

프로젝트에 들어가 보면 TARGETS 아래 + 버튼이 있습니다. 이 + 버튼을 눌러서 Widget Extension을 추가해주세요.

 

출처 - 애플 creating-a-widget-extension

 

추가하려고 보면 Include Configuration Intent라는 체크박스가 보입니다. 이 체크 박스는 위젯을 어떤 형태로 구성할지 초기값을 설정해주는 건데요. 어떤 구성이 있는지는 잠시 뒤에 공부해보겠습니다.

 

 

우선, 위젯은 딱 2가지만 알면 됩니다.

 

1. 시간의 흐름에 따라 사용자에게 UI를 보여줄 수 있다.

2. SwiftUI를 사용해서 UI를 보여준다. - SwiftUI를 좀 공부해둘걸 그랬습니다.

 

프로젝트를 만드니 눈에 띄는 놈들이 있습니다.

 

- TimelineProvider

- TimelineEntry

- View

- Widget

 

그럼 이 프토토콜들을 한번 살펴보겠습니다.

 

우선 딱 봐도 비슷하게 보이는, 왠지 모르게 서로가 서로에게 필요할 것 같은 느낌의 TimelineProvider,TimelineEntry 를 먼저 공부해볼게요.

 

위젯은 2가지만 알아두면 된다고 했습니다.

그렇습니다. TimelineProvider,TimelineEntry는 첫 번째인 시간의 흐름에 따라 사용자에게 UI를 보여주기 위한 녀석들입니다.

 

출처 - 애플 TimelineProvider

 

TimelineProvider는 공식문서만 봐도 WidgetKit한테 언제 업데이트할지 알려준다고 되어있습니다. 그럼 시간을 알려줘야합니다.

네, 시간 정보를 갖고 있는 녀석이 TimelineEntry 입니다.

 

TimelineProvider protocol에는 두 가지 메소드가 있습니다.

 

이 메소드는 위젯한테 언제 어떤 위젯 내용을 보여줄지 completion을 통해 전달합니다. 어떻게 사용하는지 보겠습니다.

 

애플이 default로 제공하는 샘플 예제를 조금 바꿨습니다.

 

현재 시간으로부터 0분이 지난 Date (현재를 의미하겠죠)와 현재 시간으로부터 1분을 더한 미래의 Date로 배열 하나를 만들고 있습니다. 그 배열을 이용해 Timeline이라는 구조체를 생성합니다. 이후 completion을 통해 widget에게 알려주죠.

이 코드로 확인해보니 1분에 한 번씩 getTimeline 메소드가 호출됩니다. 그 이유는 바로 Timeline을 생성할 때 같이 넘겨야 하는 policy라는 매개변수 때문입니다.

policy의 이름은 TimelineReloadPolicy니다. Timeline을 호출하기 위한 정책.. 같은 거죠. 이 정책은 3가지가 있습니다.

 

1. atEnd

처음 Timeline으로 제공된 TimelineEntry 중 마지막 entry가 끝날 때 자동으로 getTimeline을 호출합니다. 저 위에 코드가 1분에 한 번씩 호출되는 이유입니다.

 

2. never

말 그대로 never! 더 이상 호출하지 않겠단 policy입니다. 그래도 WidgetCenter라는 클래스를 통해 앱이 위젯에게 새 타임라인을 지시할 수 있습니다.

 

3. after(date: Date)

지정한 date가 지나면 Timeline을 업데이트하도록 합니다. 만약, 하루에 한 번씩 업데이트가 필요한 것이라면 이 policy를 사용하는 것이 좋아 보입니다.

 


이제 위젯을 구현하기 위해선 하나만 더 알면 됩니다. 바로 SwiftUI를 통한 UI 구성입니다. 이게 홈 위젯을 구현할 때 가장 큰 허들이지 않을까 싶습니다. 어렵다기보단 어색하기 때문이죠. 그래도 앞으로 사용해야 할 프레임워크임에는 분명하기에 홈 위젯 만들면서 맛보기라도 하려고 합니다.

 

 

우선 코드는 이렇게 생겼습니다. 위에서 부터 살펴보면 우선 @main이 보이네요. main annotation은 위젯의 entry point를 의미합니다.

body를 보게되면 WidgetConfiguration을 opaque type으로 return 하고있죠. opaque type은 다음에 설명하기로하고, 어쨋든 WidgetConfiguration을 반환 해주면 됩니다.

WidgetConfiguration에는 2가지 타입이 있습니다.

 

첫 번째 StaticConfiguration

StaticConfiguration은 단순하게 정보를 전달하는 용도로 사용됩니다.

 

두 번째 IntentConfiguration.

IntentConfiguration은 사용자에게 위젯의 내용을 구성할 수 있게 합니다. 예를 들어 사용자에게 어떤 정보를 입력받고 싶다면 이 방식을 사용하면 됩니다.

 

두 방식 모두 초기화하기 위해 몇 가지 정보가 필요합니다.

 

1. Kind: 위젯을 식별하는 식별자입니다. 여러개의 위젯을 사용할 때 위젯을 구분 짓기 위해 사용되는 것으로 보입니다.

2. Provider: 위에서 생성한 TimelineProvider를 전달해줍니다.

3. Content Closure: TimelineProvider로부터 전달받은 TimelineEntry를 사용하여 만들어진 뷰를 반환해야 하는 클로저입니다.

4. Custom Intent: 이 값은 IntentConfiguration을 초기화할 때 필요합니다.

 

결국 UI를 보여주는 것은 HomeWidgetEntryView라는 객체입니다.

 

 

간단하게 생겼습니다. TimelineEntry를 받고 entry가 갖고있는 시간을 위젯에 표시해주는 코드입니다.

이 코드를 실행하게되면 이제 우리는 홈 화면에서 위젯을 볼 수 있습니다.

 

 


 

간단하게 WidgetKit을 알아봤습니다. 안드로이드를 예전에 사용했을 때 홈 화면에 지하철 도착 예정 시간을 두고 잘 사용했던 것 같습니다.

"이쁜 안드로이드" 라는 별명도 생겼지만, 사용자에게 적절한 위젯을 제공하는 것은 편리성 측면에서 좋다고 생각합니다.

 

고맙습니다.

'개발 > '사과'해' 카테고리의 다른 글

Xcode Workspace로 프로젝트 관리하기  (0) 2019.10.22