다음을 통해 공유

iOS 10의 검색 및 홈 화면 위젯 향상

  • 아티클

이 문서에서는 Apple이 iOS 10의 위젯 시스템에 적용한 향상된 기능을 다룹니다.

Apple은 위젯이 새로운 iOS 10 잠금 화면에 존재하는 모든 배경에서 멋지게 보이도록 위젯 시스템에 몇 가지 향상된 기능을 도입했습니다. 또한 위젯에는 이제 개발자가 사용 가능한 콘텐츠의 양을 설명할 수 있는 NCWidgetDisplayMode 속성이 포함되어 사용자가 콘텐츠를 확장하고 축소할 수 있습니다.

위젯(Today Extensions라고도 함)은 소량의 유용한 정보를 표시하거나 앱별 기능을 적시에 노출하는 특수한 유형의 iOS 확장입니다. 예를 들어 뉴스 앱에는 상위 헤드라인을 표시하는 위젯이 있고 일정 앱은 오늘의 이벤트를 표시하는 위젯과 예정된 이벤트를 표시하는 두 가지 위젯을 제공합니다.

위젯은 사용자 지정이 가능하며 텍스트, 이미지, 단추 등과 같은 UI 요소를 포함할 수 있습니다. 또한 개발자는 위젯의 레이아웃을 추가로 사용자 지정할 수 있습니다.

위젯 예제

사용자가 앱의 위젯을 보고 상호 작용할 수 있는 두 가지 기본 위치가 있습니다.

  • 검색 화면 - 사용자가 검색 화면에 가장 유용한 위젯을 추가할 수 있습니다. 검색 화면은 홈 및 잠금 화면에서 모두 오른쪽으로 살짝 밀어 액세스할 수 있습니다.
  • 홈 화면 - 홈 화면에서 사용자는 3D Touch를 사용하여 앱 아이콘에 압력을 가하여 빠른 작업 목록을 열 수 있습니다. 앱의 위젯이 빠른 작업 목록 위에 표시됩니다. 자세한 내용은 3D Touch 소개 설명서를 참조하세요.

위젯 개발자 제안

이상적으로 개발자는 항상 사용자가 검색 화면에 추가할 위젯을 시도하고 디자인해야 합니다. 이를 위해 Apple에는 다음과 같은 제안이 있습니다.

  • 뛰어난 눈에 띄는 환경 만들기 - 사용자가 원하는 위젯은 상태 업데이트에 대한 짧고 눈에 띄는 정보를 제공하거나 간단한 작업을 신속하게 수행할 수 있도록 합니다. 따라서 적절한 양의 정보와 대화형 작업을 제공하는 것이 필수적입니다. 가능하면 사용자가 한 번의 탭으로 지정된 작업을 수행할 수 있도록 허용합니다. 또한 위젯은 이동 또는 스크롤을 지원하지 않으므로 위젯의 디자인에서 고려해야 합니다.
  • 빠르게 콘텐츠 표시 - 위젯은 눈에 갖도록 설계되었으므로 위젯이 표시되면 사용자가 콘텐츠가 로드될 때까지 기다릴 필요가 없습니다. 위젯은 새 콘텐츠가 백그라운드에서 로드되는 동안 최근 콘텐츠를 표시할 수 있도록 콘텐츠를 로컬로 캐시해야 합니다.
  • 적절한 안쪽 여백 및 여백 제공 - 위젯은 혼잡해 보이지 않아야 하므로 위젯 보기의 가장자리까지 콘텐츠를 확장하지 마세요. 가장자리와 콘텐츠 사이에는 항상 몇 픽셀 너비의 여백이 있어야 합니다. Apple은 또한 위젯의 맨 위에 표시된 앱의 아이콘을 맞춤 가이드로 사용할 것을 제안합니다. 위젯이 그리드 레이아웃을 표시하는 경우 그리드의 항목 사이에 적절한 안쪽 여백이 있는지 확인하고 항목 수를 최대 4개로 제한합니다.
  • 적응형 레이아웃 사용 - 위젯의 너비는 실행 중인 디바이스 및 디바이스의 방향에 따라 달라집니다. 위젯의 높이도 축소됨(기본값) 또는 확장됨(모든 위젯에서 지원되지 않음) 상태로 표시되는지 여부에 따라 달라질 수 있습니다. 축소된 위젯의 높이는 약 2개 반의 표준 iOS 테이블 행입니다. 개발자는 확장된 위젯의 크기를 요청할 수 있지만 화면 높이보다 작아야 합니다. 축소된 상태에서 위젯은 필수 독립 실행형 정보만 표시해야 합니다. 확장되면 위젯은 축소됨 상태로 표시되는 기본 콘텐츠를 향상시키는 추가 정보를 표시해야 합니다. 빠른 작업 목록에 표시된 위젯은 축소된 상태일 뿐입니다.
  • 위젯의 배경을 사용자 지정하지 마세요. 위젯은 시스템에서 제공하는 밝고 흐릿한 배경에 표시됩니다. 위젯 간의 일관성을 높이고 콘텐츠의 가독성을 개선하기 위해 수행됩니다. 사용자의 잠금 및 홈 화면 배경 화면과 충돌할 수 있으므로 이미지를 위젯 배경으로 사용하지 마세요.
  • 시스템 글꼴을 검은색 또는 진한 회색 으로 사용 - 위젯에 텍스트를 표시할 때 시스템 글꼴이 가장 잘 작동합니다. 글꼴은 검은색 또는 진한 회색으로 표시되어야 하며 흐린 위젯 배경에서 눈에 띄어야 합니다.
  • 적절한 경우 앱 액세스 제공 - 위젯은 항상 앱과 별도로 작동해야 하지만, 더 심층적인 기능이 필요한 경우 위젯은 앱을 시작하여 특정 정보를 보거나 편집할 수 있어야 합니다. "앱 열기" 단추를 포함하지 말고 사용자가 콘텐츠 자체를 탭하고 타사 앱을 열 수 없도록 허용합니다.
  • 명확하고 간결한 위젯 이름을 선택합니다. 앱의 아이콘과 위젯의 이름은 항상 위젯의 콘텐츠 위에 표시됩니다. 애플은 기본 위젯에 앱의 이름과 제공하는 다른 사람에 대한 명확하고 간결한 이름을 사용하는 것이 좋습니다. 사용자 지정 위젯 제목을 제공할 때 앱 이름(예: 지도 주변, 지도 음식점 등)을 접두사로 지정해야 합니다.
  • 인증에 값 이 추가되는 경우 알림 - 사용자가 인증되고 로그온된 경우에만 추가 기능 또는 정보를 사용할 수 있는 경우 사용자에게 이를 제공합니다. 예를 들어 라이드 공유 앱은 "로그인하여 라이드 예약"을 말할 수 있습니다.
  • 빠른 작업 목록 위젯 선택 - 앱에서 둘 이상의 위젯을 제공하는 경우 개발자는 사용자가 3D Touch를 사용하여 앱의 아이콘에 압력을 가하여 빠른 작업 목록을 표시할 때 표시할 위젯을 선택해야 합니다.

위젯 작업에 대한 자세한 내용은 확장 소개, 3D Touch 설명서 소개 및 Apple 앱 확장 프로그래밍 가이드를 참조하세요.

Vibrancy 작업

Vibrancy는 위젯의 가볍고 흐릿한 배경(시스템에서 제공)에 표시될 때 위젯의 텍스트가 읽을 수 있도록 합니다. iOS 10 이전에는 개발자가 위젯의 진동에 NotificationCenterVibrancyEffect를 사용합니다. 예시:

// DEPRECATED: Get Widget Vibrancy Effect
var vibrancy = UIVibrancyEffect.CreateForNotificationCenter ();

iOS 10에서는 더 이상 사용되지 않으며 WidgetPrimaryVibrancyEffect 또는 WidgetSecondaryVibrancyEffect로 대체해야 합니다. 예시:

// Get Primary Widget Vibrancy Effect
var vibrancy = UIVibrancyEffect.CreatePrimaryVibrancyEffectForNotificationCenter ();

// Get Secondary Widget Vibrancy Effect
var vibrancy2 = UIVibrancyEffect.CreateSecondaryVibrancyEffectForNotificationCenter ();

축소 및 확장된 위젯 작업

iOS 10의 새로운 기능인 위젯에는 이제 개발자가 사용 가능한 콘텐츠의 양을 설명할 수 있는 NCWidgetDisplayMode 속성이 포함되어 사용자가 콘텐츠를 확장하고 축소할 수 있습니다.

위젯이 처음 표시되면 축소된 상태입니다. 축소된 위젯의 높이는 약 2개 반의 표준 iOS 테이블 행입니다. 개발자는 확장된 위젯의 크기를 요청할 수 있지만 화면 높이보다 작아야 합니다.

축소된 상태에서 위젯은 필수 독립 실행형 정보만 표시해야 합니다. 확장되면 위젯은 축소됨 상태로 표시되는 기본 콘텐츠를 향상시키는 추가 정보를 표시해야 합니다. 예를 들어, 날씨 앱은 축소될 때 현재 기상 조건을 표시하고 확장될 때 시간별 예측을 추가합니다.

빠른 작업 목록에 표시된 위젯은 축소된 상태일 뿐입니다. 앱이 둘 이상의 위젯을 제공하는 경우 개발자는 사용자가 3D Touch를 사용하여 앱의 아이콘에 압력을 가하여 빠른 작업 목록을 표시할 때 표시할 위젯을 선택해야 합니다.

다음 예제는 축소 및 확장된 상태를 처리하는 간단한 오늘 확장(위젯)입니다.

using System;
using NotificationCenter;
using Foundation;
using UIKit;
using CoreGraphics;

namespace MonkeyAbout
{
    public partial class TodayViewController : UIViewController, INCWidgetProviding
    {
        protected TodayViewController (IntPtr handle) : base (handle)
        {
            // Note: this .ctor should not contain any initialization logic.
        }

        public override void ViewDidLoad ()
        {
            base.ViewDidLoad ();

            // Tell widget it can be expanded
            ExtensionContext.SetWidgetLargestAvailableDisplayMode (NCWidgetDisplayMode.Expanded);

            // Get the maximum size
            var maxSize = ExtensionContext.GetWidgetMaximumSize (NCWidgetDisplayMode.Expanded);
        }

        [Export ("widgetPerformUpdateWithCompletionHandler:")]
        public void WidgetPerformUpdate (Action<NCUpdateResult> completionHandler)
        {
            // Take action based on the display mode
            switch (ExtensionContext.GetWidgetActiveDisplayMode()) {
            case NCWidgetDisplayMode.Compact:
                Content.Text = "Let's Monkey About!";
                break;
            case NCWidgetDisplayMode.Expanded:
                Content.Text = "Gorilla!!!!";
                break;
            }

            // Report results
            // If an error is encoutered, use NCUpdateResultFailed
            // If there's no update required, use NCUpdateResultNoData
            // If there's an update, use NCUpdateResultNewData
            completionHandler (NCUpdateResult.NewData);
        }

        [Export ("widgetActiveDisplayModeDidChange:withMaximumSize:")]
        public void WidgetActiveDisplayModeDidChange (NCWidgetDisplayMode activeDisplayMode, CGSize maxSize)
        {
            // Take action based on the display mode
            switch (activeDisplayMode) {
            case NCWidgetDisplayMode.Compact:
                PreferredContentSize = maxSize;
                Content.Text = "Let's Monkey About!";
                break;
            case NCWidgetDisplayMode.Expanded:
                PreferredContentSize = new CGSize (0, 200);
                Content.Text = "Gorilla!!!!";
                break;
            }
        }

    }
}

위젯 표시 모드 특정 코드를 자세히 살펴보세요. 이 위젯이 확장된 상태를 지원한다는 것을 시스템에 알리기 위해 다음을 사용합니다.

// Tell widget it can be expanded
ExtensionContext.SetWidgetLargestAvailableDisplayMode (NCWidgetDisplayMode.Expanded);

위젯의 현재 표시 모드를 가져오기 위해 다음을 사용합니다.

ExtensionContext.GetWidgetActiveDisplayMode()

Collapsed 또는 Expanded 상태의 최대 크기를 가져오기 위해 다음을 사용합니다.

// Get the maximum size
var maxSize = ExtensionContext.GetWidgetMaximumSize (NCWidgetDisplayMode.Expanded);

또한 상태(표시 모드) 변경을 처리하기 위해 다음을 사용합니다.

[Export ("widgetActiveDisplayModeDidChange:withMaximumSize:")]
public void WidgetActiveDisplayModeDidChange (NCWidgetDisplayMode activeDisplayMode, CGSize maxSize)
{
    // Take action based on the display mode
    switch (activeDisplayMode) {
    case NCWidgetDisplayMode.Compact:
        PreferredContentSize = maxSize;
        Content.Text = "Let's Monkey About!";
        break;
    case NCWidgetDisplayMode.Expanded:
        PreferredContentSize = new CGSize (0, 200);
        Content.Text = "Gorilla!!!!";
        break;
    }
}

각 상태(축소 또는 확장됨)에 대해 요청된 크기를 설정하는 것 외에도 표시되는 콘텐츠를 새 크기와 일치하도록 업데이트합니다.

요약

이 문서에서는 Apple이 iOS 10의 위젯 시스템에 적용한 향상된 기능을 다루며 Xamarin.iOS에서 구현하는 방법을 보여 줍니다.