iOS Widget - Widget HumanGuideLine

위젯휴먼가이드라인에 있는 내용 중에 꼭 챙겨야 할 정보 몇개만 번역 돌려서 올려놨습니다.

이 외에도 몇개가 있는데 꼭 개발전에 확인하고 점검하신다음 개발을 시작하면 좋을것 같습니다.

 

요약
1. 앱만 실행하는 위젯으로 만들지 말기
2. 다크모드 지원하기
3. 글자는 SystemFont 를 사용하고, 11포인트 이상으로 쓰기

 

Avoid creating a widget that only launches your app. People appreciate widgets because they provide instant access to meaningful content. A widget that behaves like an app icon offers no additional value, which means people are likely to remove it from their screens.

앱만 실행하는 위젯을 만들지 마세요. 사람들은 의미 있는 콘텐츠에 대한 즉각적인 액세스를 제공하기 때문에 위젯을 높이 평가합니다. 앱 아이콘처럼 작동하는 위젯은 추가 가치를 제공하지 않으므로 사람들이 화면에서 위젯을 제거할 가능성이 높습니다.

 

Offer your widget in multiple sizes when doing so adds value. In general, avoid simply expanding a smaller widget’s content to fill a larger area. It’s more important to create one widget in the size that works best for the content you want to display than it is to provide the widget in all sizes.

가치를 더할 때 다양한 크기로 위젯을 제공하세요. 일반적으로 더 큰 영역을 채우기 위해 더 작은 위젯의 콘텐츠를 단순히 확장하지 마십시오. 위젯을 모든 크기로 제공하는 것보다 표시하려는 콘텐츠에 가장 적합한 크기로 하나의 위젯을 만드는 것이 더 중요합니다.

 

Prefer dynamic information that changes throughout the day. If a widget’s content never appears to change, people may not keep it in a prominent position. Although widgets don’t update from minute to minute, it’s important to find ways to keep their content fresh to invite frequent viewing.

하루 종일 변경되는 동적 정보를 선호합니다. 위젯의 콘텐츠가 절대 변경되지 않는 것처럼 보이면 사람들이 위젯을 눈에 잘 띄는 위치에 두지 않을 수 있습니다. 위젯이 매분 업데이트되지는 않지만 자주 볼 수 있도록 콘텐츠를 최신 상태로 유지하는 방법을 찾는 것이 중요합니다.

 

Consider carefully before displaying a logo, wordmark, or app icon in your widget. When you include brand-related design elements like colors and fonts, people seldom need your logo or app icon to help them recognize your widget. Also, the widget gallery displays your app name and icon when it lists the various types and sizes of widgets you offer. In some widgets — for example, those that display content from multiple sources — it may make sense to include a small logo in the top-right corner to subtly identify the app that provides the widget.

위젯에 로고, 워드마크 또는 앱 아이콘을 표시하기 전에 신중하게 고려하세요. 색상 및 글꼴과 같은 브랜드 관련 디자인 요소를 포함하면 사람들이 위젯을 인식하는 데 도움이 되는 로고나 앱 아이콘이 거의 필요하지 않습니다. 또한 위젯 갤러리는 제공하는 위젯의 다양한 유형과 크기를 나열할 때 앱 이름과 아이콘을 표시합니다. 예를 들어 여러 소스의 콘텐츠를 표시하는 위젯과 같은 일부 위젯에서는 위젯을 제공하는 앱을 미묘하게 식별하기 위해 오른쪽 상단 모서리에 작은 로고를 포함하는 것이 좋습니다.

 

Aim for a comfortable density of information. When content appears sparse, the widget can seem unnecessary; when content is too dense, the widget isn’t glanceable. If you have lots of information to include, avoid letting your widget become a collage of items that are difficult to parse. Seek ways to curate the content so that people can grasp the essential parts instantly and view relevant details at a longer look. You might also consider creating a larger widget and looking for places where you can replace text with graphics without losing clarity

편안한 정보 밀도를 목표로 합니다. 콘텐츠가 희박해 보이면 위젯이 불필요해 보일 수 있습니다. 콘텐츠가 너무 조밀하면 위젯을 한눈에 볼 수 없습니다. 포함할 정보가 많은 경우 위젯이 구문 분석하기 어려운 항목의 콜라주가 되지 않도록 하십시오. 사람들이 중요한 부분을 즉시 파악하고 관련 세부 정보를 더 길게 볼 수 있도록 콘텐츠를 큐레이팅하는 방법을 모색하십시오. 더 큰 위젯을 만들고 명확성을 잃지 않고 텍스트를 그래픽으로 바꿀 수 있는 위치를 찾는 것도 고려할 수 있습니다.

 

Use color judiciously. Beautiful colors draw the eye, but they’re best when they don’t prevent people from absorbing a widget’s information at a glance. Use color to enhance a widget’s appearance without competing with its content. In your asset catalog, you can also specify the colors you want the system to use as it generates your widget’s editing-mode user interface.

색상을 신중하게 사용하십시오. 아름다운 색상이 눈길을 끌지만 위젯의 정보를 한눈에 흡수하는 데 방해가 되지 않을 때 가장 좋습니다. 콘텐츠와 경쟁하지 않고 색상을 사용하여 위젯의 모양을 향상시킵니다. 자산 카탈로그에서 시스템이 위젯의 편집 모드 사용자 인터페이스를 생성할 때 사용할 색상을 지정할 수도 있습니다.

 

Support Dark Mode. Ideally, a widget looks great in both the light and dark appearances. In general, avoid displaying dark text on a light background for the dark appearance, or light text on a dark background for the light appearance. When you use the semantic system colors for text and backgrounds, the colors dynamically adapt to the current appearance. You can also support different appearances by putting color variants in your asset catalog. For guidance, see Dark Mode; see Asset management and Supporting Dark Mode in your interface.

다크 모드를 지원합니다. 이상적으로는 위젯이 밝은 곳과 어두운 곳 모두에서 멋지게 보입니다. 일반적으로 어두운 모양을 위해 밝은 배경에 어두운 텍스트를 표시하거나 밝은 모양을 위해 어두운 배경에 밝은 텍스트를 표시하지 마십시오. 텍스트 및 배경에 시맨틱 시스템 색상을 사용하면 색상이 현재 모양에 맞게 동적으로 조정됩니다. 자산 카탈로그에 색상 변형을 추가하여 다양한 모양을 지원할 수도 있습니다. 지침은 다크 모드를 참조하십시오 . 인터페이스에서 자산 관리 및 다크 모드 지원을 참조하십시오 .

 

Consider using the system font and SF Symbols.
Using the system font helps your widget look at home on any platform, while making it easier for you to display great-looking text in a variety of weights, styles, and sizes. Use SF Symbols to align and scale symbols with text that uses the system font. If you need to use a custom font, consider using it sparingly, and be sure it’s easy for people to read at a glance. It often works well to use a custom font for the large text in a widget and SF Pro for the smaller text. For guidance, see Typography and SF Symbols.

시스템 글꼴 및 SF 기호 사용을 고려하십시오. 시스템 글꼴을 사용하면 다양한 두께, 스타일 및 크기로 멋진 텍스트를 쉽게 표시할 수 있는 동시에 모든 플랫폼에서 위젯이 집처럼 보일 수 있습니다. SF 기호를 사용하여 시스템 글꼴을 사용하는 텍스트로 기호를 정렬하고 크기를 조정합니다. 사용자 지정 글꼴을 사용해야 하는 경우에는 사용을 자제하고 사람들이 한 눈에 쉽게 읽을 수 있도록 해야 합니다. 위젯의 큰 텍스트에는 사용자 지정 글꼴을 사용하고 작은 텍스트에는 SF Pro를 사용하는 것이 좋은 경우가 많습니다. 지침은 타이포그래피 및 SF 기호를 참조하십시오 .

 

Avoid using very small font sizes.
In general, display text using fonts at 11 points or larger. Text in a font that’s smaller than 11 points can be too small for most people to read at a glance.

매우 작은 글꼴 크기를 사용하지 마십시오. 일반적으로 11포인트 이상의 글꼴을 사용하여 텍스트를 표시합니다. 11포인트보다 작은 글꼴의 텍스트는 대부분의 사람들이 한 눈에 읽기에는 너무 작을 수 있습니다.

 

Avoid mirroring your widget’s appearance within your app.
If your app displays an element that looks like your widget but doesn’t behave like it, people can be confused when the element responds differently when they interact with it. Also, people may be less likely to try other ways to interact with such an element in your app because they expect it to behave like a widget.

앱 내에서 위젯의 모양을 미러링하지 마십시오. 앱이 위젯처럼 보이지만 작동하지 않는 요소를 표시하는 경우 상호작용할 때 요소가 다르게 반응하면 사람들이 혼란스러워할 수 있습니다. 또한 사람들은 위젯처럼 작동할 것으로 기대하기 때문에 앱에서 이러한 요소와 상호작용하는 다른 방법을 시도할 가능성이 적을 수 있습니다.

 

Write a succinct description of your widget.
The widget gallery displays descriptions that help people understand what each widget does. It generally works well to begin a description with an action verb — for example, “See the current weather conditions and forecast for a location” or “Keep track of your upcoming events and meetings.” Avoid including unnecessary phrases that reference the widget itself, like “This widget shows...,” “Use this widget to...,” or “Add this widget.” Use approachable language and sentence-style capitalization.

위젯에 대한 간결한 설명을 작성합니다. 위젯 갤러리에는 사람들이 각 위젯의 기능을 이해하는 데 도움이 되는 설명이 표시됩니다. 일반적으로 동작 동사로 설명을 시작하는 것이 좋습니다. "이 위젯은...을 표시합니다.", "이 위젯을 사용하여..." 또는 "이 위젯을 추가합니다."와 같이 위젯 자체를 참조하는 불필요한 문구를 포함하지 마십시오. 접근하기 쉬운 언어와 문장 스타일의 대문자를 사용합니다 .

 

Group your widget’s sizes together, and provide a single description.
If your widget is available in multiple sizes, group the sizes together so people don’t think each size is a different widget. Provide a single description of your widget — regardless of how many sizes you offer — to avoid repetition and to help people understand how each size provides a slightly different perspective on the same content and functionality.

위젯의 크기를 함께 그룹화하고 단일 설명을 제공하십시오. 위젯을 여러 크기로 사용할 수 있는 경우 사람들이 각 크기가 다른 위젯이라고 생각하지 않도록 크기를 함께 그룹화합니다. 제공하는 크기에 관계없이 위젯에 대한 단일 설명을 제공하여 반복을 피하고 각 크기가 동일한 콘텐츠 및 기능에 대해 어떻게 약간 다른 관점을 제공하는지 사람들이 이해하도록 돕습니다.

 

Best practices (모범 사례)

 

사이즈

보통 제플린에 올라오는 사이즈가 375x812 or 375x667로 기준사이즈를 잡는거로 알고있습니다.
이 둘을 기준으로 삼아서 보시면 될 것 같습니다.
다르다면 다른 사이즈에 기준 맞춰서 작업하시면 될것 같습니다. 😉