iOS) 잠금화면 위젯 이미지 에셋 적용기

iOS) Lock Screen Widget 만들기

위 글의 마지막 부분에서 다음의 트러블 슈팅 과정을 거치면서 의도에 맞는 새로운 이미지 에셋을 요청하였습니다.

🚨트러블 슈팅 - vibrant 렌더링을 위해서 사용해야 하는 이미지

이때, 에셋에 서로 다른 밝기의 요소들이 존재해서 계층 구조가 만들어진 듯하게 구현된 것을 볼 수 있었습니다.

---

디자이너님은 계층이 없는 결과를 원하셨고 다음과 같이 에셋을 전달 받을 수 있었습니다.

이 글은 다음의 이미지 에셋을 적용한 결과를 작성한 것입니다.

들어가기 전

HIG Widget 문서에서 잠금화면 위젯의 이미지 에셋에 대한 내용을 다시 한번 확인해보겠습니다.

잠금 화면용 에셋을 만들 때 이미지, 숫자 또는 텍스트와 같은 콘텐츠를 full opacity 로 렌더링 합니다.

픽셀의 밝기는 잠금 화면에서 픽셀이 얼마나 vibrant 하게 표시되는지 결정합니다. 밝은 회색 값은 더 많은 대비를 제공하고, 어두운 값은 더 적은 대비를 제공합니다. 계층 구조를 설정하려면, 가장 눈에 띄는 콘텐츠에는 white 또는 light gray 를 사용하고 보조 요소에는 darker grayscale 값을 사용합니다.

vibrant rendering mode 에서 이미지가 멋지게 보이도록 하기 위해서 :

• 이미지 콘텐츠의 grayscale 대비가 충분한지 확인합니다.
• 최고의 vibrant material effect 를 얻기위해서 white opacities 보다 opaque grayscale 값을 사용합니다.

Always-On display 를 지원하는 기기는 밝기가 감소된 잠금 화면에서 위젯을 렌더링합니다. 이때 충분한 대비를 제공하는 gray 레벨을 사용하고 콘텐츠를 읽을 수 있는지 확인해야 합니다.

출처:

Widgets

적용

• 첫 번째 검정색의 경우입니다. 검정색으로 된 이미지는 렌더링을 거쳐서 보이지 않게 되었습니다. Always-On display 에서는 순간적으로 보여지는 것을 확인할 수 있었습니다.
• HIG 문서에서 확인했듯이 어두운 밝기의 픽셀은 더 적은 대비를 제공하기 때문에 이와 같은 결과가 적용된 것같습니다.

• 두 번째 흰색의 경우입니다. 렌더링시에 밝은 값의 픽셀이 많은 대비를 보여줌으로써 뚜렷하게 이미지가 보이는 것을 확인할 수 있었습니다. 또한, 색을 통일했기 때문에 계층 구조는 사라진 것을 확인할 수 있었습니다.

• 코드에서도 변경사항이 있었습니다. 배경이 없는 이미지 에셋을 받았기 때문에 배경을 두기 위해 AccessoryWidgetBackground() 를 사용하였습니다.

struct QRCodeEntryView : View {
    var entry: QRCodeProvider.Entry
    @Environment(\.widgetFamily) var widgetFamily
    
    var body: some View {
        switch widgetFamily {
        case .accessoryCircular:
            ZStack {
                AccessoryWidgetBackground()
                Image("widgetQrLockscreenWhite")
                    .resizable()
                    .widgetURL(URL(string: "openQRCode"))
            }
        @unknown default:
            Image("widgetQr")
                .resizable()
                .scaledToFill()
                .widgetURL(URL(string: "openQRCode"))
        }
    }
}