🔒 잠금화면 위젯 만들기 - WidgetKit

WidgetKit | Apple Developer

🍎 WidgetKit 이란 ?
🎸 Live Activity 사용해 보기

이번 글에서는 iOS 16 버전부터 도입된 잠금 화면에서 보여지는 위젯을 만드는 방법에 대해서 알아보려고 한다.

잠금화면 위젯은 WidgetKit을 사용해서 만들 수 있고, 기능도 거의 동일하다고 보면된다.

이전에 WidgetKit에 대한 전반적인 내용은 다뤘었기 때문에 이 글에서는 중복된 내용은 다루지 않을 예정이니 WidgetKit에 대해 모르시거나 자세히 알고 싶은 분들은 위에 공유한 글을 참고하시길 바랍니다.

해당 글에서는 WidgetKit 관련 내용을 작성할 때에 다루지 않았던 잠금 화면 위젯에 대해서만 작성하도록 하겠다.

WidgetKit

WidgetKit은 iOS 14에서 도입된 새로운 환경으로 사용자가 홈 화면에서 앱의 컨텐츠를 빠르게 확인하고 상호작용할 수 있도록 추가된 기능이다.

WidgetKit에서는 iOS 16부터 잠금 화면에서 사용할 수 있는 새로운 위젯들을 추가하게 되었는데, 이 기능이 바로 이번 글에서 다루게 될 위젯들이다.

홈에서 사용하는 위젯과 잠금 화면에서 사용하는 위젯은 동일하게 구성되어 있기 때문에 사용 방법은 크게 다르지 않다.

Home Widget	Lock Screen Widget

WidgetKit의 핵심 구성 요소인 TimelineProvider, Entity, Timeline을 모두 공유하고 있기 때문에 사용 방법은 완전히 동일하다고 보면 된다.

Widget Extension을 추가할 때에 사용하는 StaticConfiguration, IntentConfiguration 설정은 홈 위젯에서만 기능이 다르게 되고 잠금 화면 위젯에서는 차이가 없다고 보면 된다.
잠금 화면 위젯은 편집이 불가능하기 때문이다.

WidgetKit의 종류 및 구성 요소에 대해서 확실히 이해를 하고 있어야 하기 때문에 이해가 안되신다면 위에 공유한 글을 읽어보시길 권장합니다.

Lock Screen Widget

이제 본격적으로 잠금 화면 위젯을 사용해 보자.

잠금 화면에서 사용할 수 있는 위젯은 accessoryInline, accessoryRectangular, accessoryCircular 이렇게 3가지 종류가 있고, 각각 화면에서 보여줄 수 있는 사이즈가 제한되어 있다.

accessoryInline	accessoryRectangular	accessoryCircular

Widget Extension을 추가하자.

File > Target

원하는 위젯의 이름을 정하고 만들어 주면 되는데 "include Configuration App Intent" 선택하고 생성하면 IntentConfiguration 위젯으로 생성되고 해제하게 되면 StaticConfiguration으로 생성이 된다.

Live Activity가 필요한 경우라면 체크해서 생성해주면 된다.

Families

이제 잠금 화면 위젯 사용을 위해 사용하고자 하는 위젯 타입들을 추가해보도록 하자.

만일 추가하지 않고 기본 상태로 둔다면 잠금 화면 위젯을 제외한 위젯들만 생성이 된다.

supportedFamilies를 사용해 원하는 위젯 타입들을 배열 형태로 넣어주면 된다.

필요한 잠금 화면 위젯들을 넣어주면 된다.

supportedFamilies([.accessoryInline, .accessoryCircular, .accessoryRectangular])

홈 위젯도 함께 사용하고 싶다면 홈 위젯의 사이즈도 추가해주면 된다.

supportedFamilies([.systemSmall, .systemMedium, .accessoryInline, .accessoryCircular, .accessoryRectangular])

현재 서비스가 iOS 16 이하를 타겟하게 되면 잠금화면 위젯을 사용할 수 없기 때문에 분기 처리를 해주어야 한다.

private let supportedFamilies: [WidgetFamily] = {
	if #available(iOS 16.0, *) {
		return [.systemSmall, .accessoryCircular, .accessoryInline, .accessoryRectangular]
	} else {
		return [.systemSmall]
	}
}()

View를 분리해 줄 필요가 있는데, 홈 화면에서 사용할 위젯과 잠금 화면의 위젯들의 사이즈의 차이가 많기 때문에 UI 구성을 별도로 해주는 것이 좋다.

환경 변수로 widgetFamily를 사용해 사이즈를 가져올 수 있다.

struct LockScreenWidgetEntryView : View {
    
    @Environment(\.widgetFamily) private var widgetFamily
    
    var entry: Provider.Entry
    
    var body: some View {
        switch widgetFamily {
        case .accessoryInline:
            InlineView()
        case .accessoryCircular:
            CircularView()
        case .accessoryRectangular:
            RectangularView()
        case .systemSmall:
            SmallView()
        default:
            EmptyView()
        }
    }
}

AccessoryWidgetBackground

위젯의 UI 중에 어떤 위젯은 백그라운드 영역이 있고, 어떤 위젯은 백그라운드 영역이 보여지지 않을 것이다.

잠금 화면 위젯에서만 사용하는 AccessoryWidgetBackground 객체를 사용해 백그라운드 영역을 추가할 수 있다.

ZStack을 사용해서 백그라운드를 추가해주면 된다.

struct CircularView : View {
    var body: some View {
        ZStack {
            AccessoryWidgetBackground()
            Text("Sample")
        }
    }
}

accessoryCircular 타입은 원형이기 때문에 백그라운드를 추가해도 레디우스를 별도로 설정할 필요가 없지만 accessoryRectangular 타입에 백그라운드 영역을 추가하고 싶다면 레디우스에 대한 값도 추가로 지정해 주어야 한다.

cornerRadius를 사용해 원하는 레디우스를 설정할 수 있다.

AccessoryWidgetBackground().cornerRadius(12)

Content Truncation

이번에는 디바이스 사이즈에 의해 원하는 위젯이 잘리는 문제를 해결하는 방법에 대해서 알아보도록 하겠다.

보여주고자 했던 UI 보다 디바이스 사이즈가 작아 줄임표 표시가될 수도 있는 문제가 있다.

전체 UI가 화면에 보여지지 않고 잘리는 경우를 대비하여 대체 위젯을 미리 추가하여 디바이스가 보여줄 수 있는 영역에 맞는 사이즈의 위젯을 자동으로 노출 시키도록 지원하고 있다.

15 Pro Max	15 Pro

위에 15 Pro Max와 15 Pro의 사이즈 차이로 인하여 accessoryInline에 노출되는 문자가 다른 것을 확인할 수 있다.

ViewThatFits를 사용해 미리 대체 위젯들을 추가해 두면 모든 디바이스 사이즈에 적절한 UI를 보여줄 수 있게 된다.

struct InlineView : View {
    var body: some View {
        ViewThatFits {
            Text("Lock screen widget test 🌈")
            Text("Lock screen test 🔥")
            Text("Lock screen 🚀")
        }
    }
}

Refresh

위젯의 데이터를 리프레시하는 방법에 대해서는 이전에 작성한 WidgetKit의 사용 방법과 동일하니 해당 글 참고하셔서 TimelineProvider, Timeline, Entry로 구성된 요소를 사용하시면 되고, WidgetCenter를 사용한 즉시 업데이트에 대해서도 확인할 수 있다.

여기에는 별도로 사용 방법에 대해서는 작성하지 않도록 하겠다.

마무리

WidgetKit을 사용해 잠금 화면 위젯을 만드는 방법에 대해서 간단하게 알아보았다.

궁금하신 사항 있거나 잘 못 작성된 내용이 있다면 댓글 남겨주세요 !

감사합니다.