A complication displays timely, relevant information on the watch face, where people can view it each time they raise their wrist.
컴플리케이션은 사람들이 손목을 들 때마다 볼 수 있는 알맞은 시간에 관련 정보를 워치 페이스에 표시합니다.
People often prefer apps that provide multiple, powerful complications, because it gives them quick ways to view the data they care about, even when they don’t open the app.
사람들은 종종 여러 개의 강력한 컴플리케이션을 제공하는 앱을 선호하는데, 이는 앱을 열지 않을 때에도 자신이 관심 있는 데이터를 빠르게 볼 수 있는 방법을 제공하기 때문입니다.
Most watch faces can display at least one complication; some can display four or more.
대부분의 워치 페이스는 적어도 하나의 컴플리케이션을 표시할 수 있으며, 일부는 4개 이상을 표시할 수 있습니다.
Starting in watchOS 9, the system organizes complications (also known as accessories) into several families — like circular and inline — and defines some recommended layouts you can use to display your complication data. A watch face can specify the family it supports in each complication slot. Complications that work in earlier versions of watchOS can use the legacy templates, which define nongraphic complication styles that don’t take on a wearer’s selected color.
이 시스템은 watchOS 9에서 시작하여 circular 및 inline 과 같은 여러 패밀리로 컴플리케이션(Accessories로 불리는)을 구성하고 컴플리케이션 데이터를 표시하는 데 사용할 수 있는 몇 가지 권장 레이아웃을 정의합니다. 워치 페이스는 각 컴플리케이션 슬롯에서 지원하는 패밀리를 지정할 수 있습니다. 이전 버전의 watchOS에서 작동하는 문제는 착용자가 선택한 색상을 선택하지 않는 비그래픽 문제 스타일을 정의하는 legacy template를 사용할 수 있습니다.
* 패밀리(family) : 디자인 스타일 구성 모음 (제품군)
Developer note
Prefer using WidgetKit to develop complications for watchOS 9 and later. For guidance, see Migrating ClockKit complications to WidgetKit. To support earlier versions of watchOS, continue to implement the ClockKit complication data source protocol (see CLKComplicationDataSource).
watchOS 9 이상에 대한 문제를 해결하려면 WidgetKit을 사용하는 것이 좋습니다. 자세한 내용은 Migrating ClockKit complications to WidgetKit을 참조하세요. 이전 버전의 Watch OS를 지원하려면 ClockKit 문제 해결 데이터 소스 프로토콜을 구현해야 합니다. (CLKComplicationDataSource 참조).
Identify essential, dynamic content that people want to view at a glance. Although people can use a complication to quickly launch an app, the complication behavior they appreciate more is the display of relevant information that always feels up to date. A static complication that doesn’t display meaningful data may be less likely to remain in a prominent position on the watch face.
사람들이 보고 싶어하는 필수적이고 동적인 콘텐츠를 한 눈에 식별할 수 있도록 하세요. 사람들이 컴플리케이션을 이용해 앱을 빠르게 실행할 수 있지만, 그들이 더 높이 평가하는 컴플리케이션의 역할은 항상 최신의 것으로 느껴지는 관련 정보의 표시입니다. 의미 있는 데이터를 표시하지 않는 정적인 컴플리케이션은 시계 화면의 두드러진 위치에 머무를 가능성이 적을 수 있습니다.
→ 사용자는 컴플리케이션에서 유의미하고 동적인 정보를 확인하는 것을 기대한다.
Support all complication families when possible. Supporting more families means that your complications are available on more watch faces. If you can’t display useful information for a particular complication family, provide an image that represents your app — like your app icon — that still lets people launch your app from the watch face.
가능하면 모든 컴플리케이션 패밀리를 지원하세요. 더 많은 패밀리를 지원한다는 것은 당신의 컴플리케이션이 많은 워치 페이스에서 사용 가능하다는 것을 의미합니다. 만약 특정한 컴플리케이션 패밀리를 통해 유용한 정보를 보여줄 수 없다면, 여전히 사람들이 워치 페이스에서 앱을 실행할 수 있도록 해주는 앱 아이콘과 같은 앱을 나타내는 이미지를 제공하세요.
→ 많은 컴플리케이션 패밀리를 지원하면 다양한 워치페이스 환경에서 지원이 가능하고, 데이터 표시가 불가능 할 때는 앱 아이콘과 같은 이미지를 제공하여라.
Consider creating multiple complications for each family. Supporting multiple complications helps you take advantage of shareable watch faces and lets people configure a watch face that’s centered on an app they love. For example, an app that helps people train for triathlons could offer three circular complications — one for each segment of the race — each of which deep-links to the segment-specific area in the app. This app could also offer a shareable watch face that’s preconfigured to include its swimming, biking, and running complications and to use its custom images and colors. When people choose this watch face, they don’t have to do any configuration before they can start using it. For guidance, see Watch faces.
각 패밀리마다 여러 가지 컴플리케이션을 만드는 것을 고려해 보세요. 여러 가지 컴플리케이션을 지원하는 것은 공유 가능한 워치 페이스의 이점을 활용하는 데 도움이 되며, 사람들이 좋아하는 앱을 중심으로 워치 페이스를 구성할 수 있습니다. 예를 들어, 철인삼종경기 훈련을 하는 데 도움이 되는 앱은 3가지 원형 컴플리케이션(각각의 경기 부분마다 하나씩)을 제공할 수 있으며, 이들은 앱의 세그먼트별 영역에 딥링크됩니다. 이 앱은 또한 수영, 자전거 및 달리기 컴플리케이션을 포함하고 사용자 정의 이미지와 색상을 사용하도록 미리 구성된 공유 가능한 워치 페이스를 제공할 수 있습니다. 사람들이 이 워치 페이스를 선택할 때, 사용을 시작하기 전에 어떤 설정도 수행할 필요가 없습니다. 안내는 Watch faces를 참조하세요.
→ 한 스타일에 여러가지 정보를 담을 수 있도록 구현하는 것이 좋다.
* 공유 가능한 워치 페이스 : 사용자가 구성한 워치페이스를 다른 사용자에게 공유할 수 있음
Define a different deep link for each complication you support. It works well when each complication opens your app to the most relevant area. If all the complications you support open the same area in your app, they can seem less useful.
지원하는 각 컴플리케이션에 대해 서로 다른 딥링크를 정의합니다. 각 컴플리케이션이 가장 관련성이 높은 영역으로 앱을 열 때 효과가 좋습니다. 지원하는 모든 컴플리케이션이 앱에서 동일한 영역을 열 경우, 덜 유용해 보일 수 있습니다.
→ 컴플리케이션을 통해 앱으로 연결될 때, 관련성이 높은 화면을 보여줄 수 있도록 해야 한다.
Keep privacy in mind. With the Always-On Retina display, information on the watch face might be visible to people other than the wearer. Make sure you help people prevent potentially sensitive information from being visible to others. For guidance, see Always On.
개인정보 보호를 항상 생각하세요. Always-On Retina 디스플레이를 사용하면 착용자가 아닌 다른 사람이 시계 화면에 대한 정보를 볼 수 있습니다. 사람들이 잠재적으로 민감한 정보를 다른 사람에게 볼 수 없도록 해야 합니다. 안내는 Always On을 참조하세요.
→ AOD를 고려하여 사용자가 민감한 정보는 표시되지 않도록 고려해야 한다.
Carefully consider when to update data. You provide a complication’s data in the form of a timeline where each entry has a value that specifies the time at which to display your data on the watch face. Different data sets might require different time values. For example, a meeting app might display information about an upcoming meeting an hour before the meeting starts, but a weather app might display forecast information at the time those conditions are expected to occur. You can update the timeline a limited number of times each day, and the system stores a limited number of timeline entries for each app, so you need to choose times that enhance the usefulness of your data. For developer guidance, see Migrating ClockKit complications to WidgetKit.
데이터를 업데이트 할 시간을 주의 깊게 고려하세요. 각 항목에 워치 페이스에 데이터를 표시하는 시간을 지정하는 값이 있는 타임라인 형태로 컴플리케이션의 데이터를 제공합니다. 데이터 세트마다 다른 시간 값이 필요할 수 있습니다. 예를 들어 미팅 앱은 미팅 시작 시간 전에 미팅 정보를 표시할 수 있지만, 기상 앱은 해당 조건이 발생할 것으로 예상되는 시간에 예보 정보를 표시할 수 있습니다. 매일 제한된 횟수로 타임라인을 업데이트할 수 있으며, 시스템은 앱마다 제한된 횟수의 타임라인 항목을 저장하므로 데이터의 유용성을 높이는 시간을 선택해야 합니다. 개발자 지침은 Migrating ClockKit complications to WidgetKit를 참조하세요.
역자 첨언
Choose a ring or gauge style based on the data you need to display. Many families support a ring or gauge layout that provides consistent ways to represent numerical values that can change over time. For example:
표시해야 할 데이터를 기준으로 링 또는 게이지 스타일을 선택하세요. 많은 패밀리들은 시간에 따라 변경될 수 있는 수치를 일관적으로 나타내는 링 또는 게이지 레이아웃을 지원합니다. 예를 들어 다음과 같습니다:
•
The closed style can convey a value that’s a percentage of a whole, such as for a battery gauge.
•
Closed Style은 배터리 게이지와 같은 전체 비율의 값을 전달하는데 적합합니다.
•
The open style works well when the minimum and maximum values are arbitrary — or don’t represent a percentage of the whole — like for a speed indicator.
•
Open Style은 속도 표시기처럼 최소값과 최대값이 임의이거나 전체의 백분율을 나타내지 않을 때 잘 작동합니다.
•
Similar to the open style, the segmented style also displays values within an app-defined range, and can convey rapid value changes, such as in the Noise complication.
•
Open Style과 유사하게 Segmented Style은 앱 정의 범위 내의 값도 표시하며 노이즈 컴플리케이션과 같은 빠른 값 변경을 전달할 수 있습니다.
역자 첨언
Make sure images look good in tinted mode. In tinted mode, the system applies a solid color to a complication’s text, gauges, and images, and desaturates full-color images unless you provide tinted versions of them. For developer guidance, see WidgetRenderingMode. (If you’re using legacy templates, tinted mode applies only to graphic complications.) To help your complications perform well in tinted mode:
이미지가 틴티드 모드에서 잘 보이도록 합니다. 틴티드 모드에서 시스템은 문제의 텍스트, 게이지 및 이미지에 솔리드 색상을 적용하고 틴티드 버전을 제공하지 않는 한 풀 컬러 이미지를 비활성화합니다. 개발자 안내는WidgetRenderingMode를 참조하십시오. (기존 템플릿을 사용하는 경우 틴티드 모드는 그래픽 컴플리케이션에만 적용됩니다.) 문제가 틴티드 모드에서 잘 수행되도록 하려면 다음 설명을 참조하세요:
* Tinted Mode : 사용자가 강조하고자 지정한 색 배합에 어울리도록 Complication을 설정하는 모드
역자 첨언
•
Avoid using color as the only way to communicate important information. You want people to get the same information in tinted mode as they do in nontinted mode.
•
중요한 정보를 전달하는 유일한 방법으로 색상만 사용하는 것을 피하세요. 당신은 사람들이 틴티드 모드에서 그들이 논틴티드 모드에서 얻는 것과 같은 정보를 얻기를 원합니다.
•
When necessary, provide an alternative tinted-mode version of a full-color image. If your full-color image doesn’t look good when it’s desaturated, you can supply a different version of the image for the system to use in tinted mode.
•
필요한 경우 풀 컬러 이미지의 대체 틴티드 모드 버전을 제공하십시오. 풀 컬러 이미지의 낮은 명도(Desaturated)가 보기 좋지 않으면 시스템이 틴티드 모드에서 사용할 수 있도록 다른 버전의 이미지를 제공할 수 있습니다.
역자 첨언
Recognize that people might prefer to use tinted mode for complications, instead of viewing them in full color. When people choose tinted mode, the system automatically desaturates your complication, converting it to grayscale and tinting its images, gauges, and text using a single color that’s based on the wearer’s selected color.
사람들이 컴플리케이션을 풀 컬러로 보는 대신 틴티드 모드를 사용하는 것을 선호할 수 있다는 것을 인식하세요. 사람들이 틴티드 모드를 선택하면, 시스템은 자동적으로 당신의 컴플리케이션을 낮은 명도로 변경시키며, 그것을 그레이스케일로 변환시키고 착용자의 선택된 색상에 기초한 단일 색상을 사용하여 이미지, 게이지, 텍스트에 색상을 입힙니다.
→ Tinted Mode를 고려한 컴플리케이션을 제작할 수 있도록 해야한다.
When creating complication content, generally use line widths of two points or greater. Thinner lines can be difficult to see at a glance, especially when the wearer is in motion. Use line weights that suit the size and complexity of the image.
컴플리케이션의 내용을 만들 때는 일반적으로 2pt 이상의 선 굵기를 사용합니다. 특히 착용자가 움직일 때 선 굵기가 얇아 한 눈에 보기 어려울 수 있습니다. 이미지의 크기와 컴플리케이션에 맞는 선 굵기를 사용합니다.
Provide a set of static placeholder images for each complication you support. The system uses placeholder images when there’s no other content to display for your complication’s data. For example, when people first install your app, the system can display a static placeholder while it checks to see if your app can generate a localized placeholder to use instead. Placeholder images can also appear in the carousel from which people select complications. Note that complication image sizes vary per layout (and per legacy template) and the size of a placeholder image may not match the size of the actual image you supply for that complication. For developer guidance, see placeholder(in:).
지원하는 각 컴플리케이션에 대한 정적 자리 표시자 이미지 집합을 제공합니다. 시스템은 컴플리케이션의 데이터에 대해 표시할 다른 내용이 없을 때 플레이스 홀더(Placeholder) 이미지를 사용합니다. 예를 들어, 사람들이 처음 앱을 설치할 때 시스템이 정적인 플레이스 홀더를 표시하는 동안 앱이 대신 사용할 로컬라이징된 자리 표시자를 생성할 수 있는지 확인할 수 있습니다. 플레이스 홀더 이미지는 사람들이 컴플리케이션을 선택하는 선택 화면(Carousel)에 나타날 수도 있습니다. 컴플리케이션의 이미지 크기는 레이아웃(및 레거시 템플릿)에 따라 다르며 플레이스 홀더 이미지의 크기가 해당 컴플리케이션에 대해 제공하는 실제 이미지의 크기와 일치하지 않을 수도 있습니다. 개발자 지침은 placeholder(in:)를 참조하세요.
Circular layouts can include text, gauges, and full-color images in circular areas on the Infograph and Infograph Modular watch faces. The circular family also defines extra-large layouts for displaying content on the X-Large watch face.
원형(Circular) 레이아웃은 인포그래프(Infograph) 및 인포그래프 모듈러(Infograph Modular) 시계 화면의 원형 영역에 텍스트, 게이지 및 풀 컬러 이미지를 포함할 수 있습니다. 원형(Circular) 패밀리 또한 X-Large 시계 화면에 콘텐츠를 표시하기 위한 X-Large 레이아웃을 정의합니다.
Closed gauge image
Closed gauge text
Open gauge image
Open gauge text
Open gauge range
Image
Stack image
Stack text
You can also add text to accompany a regular-size circular image, using a design that curves the text along the bezel of some watch faces, like Infograph. The text can fill nearly 180 degrees of the bezel before truncating.
인포그래프와 같은 일부 워치 페이스의 베젤을 따라 텍스트를 곡선으로 그리는 디자인을 사용하여 일반 크기의 원형(Circular) 이미지에 텍스트를 추가할 수도 있습니다. 텍스트는 잘리기 전에 베젤의 거의 180도를 채울 수 있습니다.
Closed gauge image
As you design images for a regular-size circular complication, use the following values for guidance.
반원형 컴플리케이션에 대한 이미지를 디자인할 때 다음 값을 사용하여 지침을 제공합니다.
Image | 40mm | 41mm | 44mm | 45mm/49mm |
Image | 42x42 pt (84x84 px @2x) | 44.5x44.5 pt (89x89 px @2x) | 47x47 pt (94x94 px @2x) | 50x50 pt (100x100 px @2x) |
Closed gauge | 27x27 pt (54x54 px @2x) | 28.5x28.5 pt (57x57 px @2x) | 31x31 pt (62x62 px @2x) | 32x32 pt (64x64 px @2x) |
Open gauge | 11x11 pt (22x22 px @2x) | 11.5x11.5 pt (23x23 px @2x) | 12x12 pt (24x24 px @2x) | 13x13 pt (26x26 px @2x) |
Stack (not text) | 28x14 pt (56x28 px @2x) | 29.5x15 pt (59X30 px @2x) | 31x16 pt (62x32px @ 2x) | 33.5x16.5 pt (67x33 px @2x) |
Note
The system applies a circular mask to each image.
시스템은 각 이미지에 원형 마스크를 적용합니다.
A SwiftUI view that implements a regular-size circular complication uses the following default text values:
정규 크기의 원형(Circular) 컴플리케이션을 구현하는 SwiftUI 뷰는 다음과 같은 기본 텍스트 값을 사용합니다:
•
Style: Rounded
•
Weight: Medium
•
Text size: 12 pt (40mm), 12.5 pt (41mm), 13 pt (44mm), 14.5 pt (45mm/49mm)
If you want to design an oversized treatment of important information that can appear on the X-Large watch face — for example, the Contacts complication, which features a contact photo — use the extra-large versions of the circular family’s layouts. The following layouts let you display full-color images, text, and gauges in a large circular region that fills most of the X-Large watch face. Some of the text fields can support multicolor text.
X-Large 시계 화면에 나타날 수 있는 중요한 정보(예: 연락처 사진이 포함된 연락처 복잡성)의 과도한 처리를 디자인하려면 원형(Circular) 패밀리 레이아웃의 초대형 버전을 사용합니다. 다음 레이아웃에서는 X-Large 워치 페이스의 대부분을 채우는 큰 원형(Circular) 영역에 전체 색상 이미지, 텍스트 및 게이지를 표시할 수 있습니다. 텍스트 필드 중 일부는 다양한 색상의 텍스트를 지원할 수 있습니다.
Closed gauge image
Closed gauge text
Open gauge image
Open gauge text
Open gauge range
Image
Stack image
Stack text
Use the following values for guidance as you create images for an extra-large circular complication.
X-Large 원형(Circular) 컴플리케이션에 대한 이미지 생성할 때 다음 값을 사용하여 지침을 제공합니다.
Image | 40mm | 41mm | 44mm | 45mm/49mm |
Image | 120x120 pt (240x240 px @2x) | 127x127 pt (254x254 px @2x) | 132x132 pt (264x264 px @2x) | 143x143 pt (286x286 px @2x) |
Open gauge | 31x31 pt (62x62 px @2x) | 33x33 pt (66x66 px @2x) | 33x33 pt (66x66 px @2x) | 37x37 pt (74x74 px @2x) |
Closed gauge | 77x77 pt (154x154 px @2x) | 81.5x81.5 (163x163 px @2x) | 87x87 pt (174x174 px @2x) | 91.5x91.5 (183x183 px @2x) |
Stack | 80x40 pt (160x80 px @2x) | 85x42 (170x84 px @2x) | 87x44 pt (174x88 px @2x) | 95x48 pt (190x96 px @2x ) |
Note
The system applies a circular mask to the circular, open-gauge, and closed-gauge images.
시스템은 원형, 개방 게이지 및 폐쇄 게이지 이미지에 원형(Circular) 마스크를 적용합니다.
Use the following values to create no-content placeholder images for your circular-family complications.
다음 값을 사용하여 원형(Circular) 패밀리 컴플리케이션에 대한 내용 없는 플레이스 홀더 이미지를 만드세요.
Layout | 38mm | 40mm/42mm | 41mm | 44mm | 45mm/49mm |
Circular | – | 42x42 pt (84x84 px @2x) | 44.5x44.5 pt (89x89 px @2x) | 47x47 pt (94x94 px @2x) | 50x50 pt (100x100 px @2x) |
Bezel | – | 42x42 pt (84x84 px @2x) | 44.5x44.5 pt (89x89 px @2x) | 47x47 pt (94x94 px @2x) | 50x50 pt (100x100 px @2x) |
Extra Large | – | 120x120 pt (240x240 px @2x) | 127x127 pt (254x254 px @2x) | 132x132 pt (264x264 px @2x) | 143x143 pt (286x286 px @2x) |
A SwiftUI view that implements an extra-large circular layout uses the following default text values:
X-Large 원형(Circular) 레이아웃을 구현하는 SwiftUI 뷰는 다음과 같은 기본 텍스트 값을 사용합니다:
•
Style: Rounded
•
Weight: Medium
•
Text size: 34.5 pt (40mm), 36.5 pt (41mm), 36.5 pt (44mm), 41 pt (45mm/49mm)
Corner layouts let you display full-color images, text, and gauges in the corners of the watch face, like Infograph. Some of the templates also support multicolor text.
모서리(Corner) 레이아웃을 사용하면 인포그래프와 같이 워치 페이스의 모서리에 풀 컬러 이미지, 텍스트 및 게이지를 표시할 수 있습니다. 템플릿 중 일부는 다양한 색상의 텍스트를 지원하기도 합니다.
Circular image
Gauge image
Gauge text
Stack text
Text image
As you design images for a corner complication, use the following values for guidance.
모서리(Corner) 컴플리케이션에 대한 이미지를 디자인할 때 다음 지침을 참고하여 값을 사용하세요.
Image | 40mm | 41mm | 44mm | 45mm/49mm |
Circular | 32x32 pt (64x64 px @2x) | 34x34 pt (68x68 px @2x) | 36x36 pt (72x72 px @2x) | 38x38 pt (76x76 px @2x ) |
Gauge | 20x20 pt (40x40 px @2x) | 21x21 pt (42x42 px @2x) | 22x22 pt (44x44 px @2x) | 24x24 pt (48x48 px @2x) |
Text | 20x20 pt (40x40 px @2x) | 21x21 pt (42x42 px @2x) | 22x22 pt (44x44 px @2x) | 24x24 pt (48x48 px @2x) |
Note
The system applies a circular mask to each image.
시스템은 각 이미지에 원형(Circular) 마스크를 적용합니다.
Use the following values to create no-content placeholder images for your corner-family complications.
다음 값을 사용하여 모서리(Corner) 패밀리의 컴플리케이션에 대해 내용이 없는 플레이스 홀더 이미지를 만듭니다.
38mm | 40mm/42mm | 41mm | 44mm | 45mm/49mm |
– | 20x20 pt (40x40 px @2x) | 21x21 pt (42x42 px @2x) | 22x22 pt (44x44 px @2x) | 24x24 pt (48x48 px @2x) |
A SwiftUI view that implements a corner layout uses the following default text values:
모서리(Corner) 레이아웃을 구현하는 SwiftUI 뷰는 다음과 같은 기본 텍스트 값을 사용합니다:
•
Style: Rounded
•
Weight: Semibold
•
Text size: 10 pt (40mm), 10.5 pt (41mm), 11 pt (44mm), 12 pt (45mm/49mm)
Inline layouts include utilitarian small and large layouts.
인라인 레이아웃에는 실용적인 소형 및 대형 레이아웃이 포함됩니다.
Utilitarian small layouts are intended to occupy a rectangular area in the corner of a watch face, such as the Chronograph and Simple watch faces. The content can include an image, interface icon, or a circular graph.
유틸리티형 작은 레이아웃은 크로노그래프 및 Simple watch face와 같은 시계 면의 모서리에 있는 직사각형 영역을 차지하기 위한 것입니다. 내용은 이미지, 인터페이스 아이콘 또는 원형 그래프를 포함할 수 있습니다.
Flat
Ring image
Ring text
Square
As you design images for a utilitarian small layout, use the following values for guidance.
유틸리티형 작은 레이아웃을 위해 이미지를 설계할 때 다음 지침을 통해 값을 사용하세요.
Content | 38mm | 40mm/42mm | 41mm | 44mm | 45mm/49mm |
Flat | 9-21x9 pt (18-42x18 px @2x) | 10-22x10 pt (20-44x20 px @2x) | 10.5-23.5x21 pt (21-47x21 @2x) | N/A | 12-26x12 pt (24-52x24 px @2x) |
Ring | 14x14 pt (28x28 px @2x) | 14x14 pt (28x28 px @2x) | 15x15 pt (30x30 px @2x) | 16x16 pt (32x32 px @2x) | 16.5x16.5 pt (33x33 px @2x) |
Square | 20x20 pt (40x40 px @2x) | 22x22 pt (44x44 px @2x) | 23.5x23.5 pt (47x47 px @2x) | 25x25 pt (50x50 px @2x) | 26x26 pt (52x52 px @2x) |
The utilitarian large layout is primarily text-based, but also supports an interface icon placed on the leading side of the text. This layout spans the bottom of a watch face, like the Utility or Motion watch faces.
유틸리티형 대형 레이아웃은 주로 텍스트 기반이지만 텍스트의 앞쪽에 배치된 인터페이스 아이콘도 지원합니다. 이 레이아웃은 Utility 또는 Motion 시계면과 같이 시계면 하단에 걸쳐 있습니다.
Large flat
As you design images for a utilitarian large layout, use the following values for guidance.
유틸리티형 대형 레이아웃을 위해 이미지를 디자인할 때 다음 지침을 참고하여 값을 사용하세요.
Content | 38mm | 40mm/42mm | 41mm | 44mm | 45mm/49mm |
Flat | 9-21x9 pt (18-42x18 px @2x) | 10-22x10 pt (20-44x20 px @2x) | 10.5-23.5x10.5 pt (21-47x21 px @2x) | N/A | 12-26x12 pt (24-52x24 px @2x) |
Rectangular layouts can display full-color images, text, a gauge, and an optional title in a large rectangular region. Some of the text fields can support multicolor text.
직사각형 레이아웃은 전체 색상의 이미지, 텍스트, 게이지 및 선택적 제목을 큰 직사각형 영역에 표시할 수 있습니다. 텍스트 필드 중 일부는 다양한 색상의 텍스트를 지원할 수 있습니다.
The large rectangular region works well for showing details about a value or process that changes over time, because it provides room for information-rich charts, graphs, and diagrams. For example, the Heart Rate complication displays a graph of heart-rate values within a 24-hour period. The graph uses high-contrast white and red for the primary content and a lower-contrast gray for the graph lines and labels, making the data easy to understand at a glance.
큰 직사각형 영역은 정보가 풍부한 차트, 그래프 및 도표를 위한 공간을 제공하기 때문에 시간에 따라 변화하는 값 또는 프로세스에 대한 세부 정보를 표시하는 데 유용합니다. 예를 들어, 심박수 컴플리케이션은 24시간 주기 내의 심박수 값 그래프를 표시합니다. 그래프는 주요 내용에 대해 대비가 높은 흰색과 빨간색을 사용하고 그래프 선과 레이블에 대해 대비가 낮은 회색을 사용하여 데이터를 한 눈에 쉽게 이해할 수 있습니다.
→ 직사각형 컴플리케이션 디자인을 사용할 때, 중요한 정보에 대비가 높은 색상을 사용하여라.
Starting with watchOS 10, if you have created a rectangular layout for your watchOS app, the system may display it in the Smart Stack. You can optimize this presentation in a few ways:
watchOS 10부터 watchOS 앱을 위해 직사각형 레이아웃을 만든 경우, 시스템이 Smart Stack에 이 레이아웃을 표시할 수 있습니다. 이 프레젠테이션은 다음 몇 가지 방법으로 최적화할 수 있습니다:
•
By supplying background color or content that communicates information or aids in recognition
•
정보를 전달하거나 인식에 도움이 되는 배경색이나 콘텐츠를 제공하세요.
•
By using intents to specify relevancy, and help ensure that your widget is displayed in the Smart Stack at times that are most appropriate and useful to people
•
intents를 사용하여 관련성을 지정하고 사용자에게 가장 적합하고 유용한 시기에 위젯이 Smart Stack에 표시되도록 지원합니다.
•
By creating a custom layout of your information that is optimized for the Smart Stack
•
스마트 스택에 최적화된 사용자 정의 정보 레이아웃을 생성하세요.
For developer guidance, see WidgetFamily.accessoryRectangular. See Widgets for additional guidance on designing widgets for the Smart Stack.
Standard body
Text gauge
Large image
Use the following values for guidance as you create images for a rectangular layout.
직사각형 레이아웃에 대한 이미지를 작성할 때는 다음 값을 사용하여 지침을 제공합니다.
Content | 40mm | 41mm | 44mm | 45mm/49mm |
Large image with title * | 150x47 pt (300x94 px @2x) | 159x50 pt (318x100 px @2x) | 171x54 pt (342x108 px @2x) | 178.5x56 pt (357x112 px @2x) |
Large image without title * | 162x69 pt (324x138 px @2x) | 171.5x73 pt (343x146 px @2x) | 184x78 pt (368x156 px @2x) | 193x82 pt (386x164 px @2x) |
Standard body | 12x12 pt (24x24 px @2x) | 12.5x12.5 pt (25x25 px @2x) | 13.5x13.5 pt (27x27 px @2x) | 14.5x14.5 pt (29x29 px @2x) |
Text gauge | 12x12 pt (24x24 px @2x) | 12.5x12.5 pt (25x25 px @2x) | 13.5x13.5 pt (27x27 px @2x) | 14.5x14.5 pt (29x29 px @2x) |
Note
Both large-image layouts automatically include a four-point corner radius.
두 대형 이미지 레이아웃 모두 4점 모서리 반경이 자동으로 포함됩니다.
직사각형 레이아웃을 구현하는 SwiftUI 뷰는 다음과 같은 기본 텍스트 값을 사용합니다:
•
Style: Rounded
•
Weight: Medium
•
Text size: 16.5 pt (40mm), 17.5 pt (41mm), 18 pt (44mm), 19.5 pt (45mm/49mm)
Circular small templates display a small image or a few characters of text. They appear in the corner of the watch face (for example, in the Color watch face).
원형의 작은 템플릿은 작은 이미지 또는 몇 글자의 텍스트를 표시합니다. 이 템플릿은 시계 화면의 모서리(예를 들어 색상 시계 화면)에 나타납니다.
Ring image
Ring text
Simple image
Simple text
Stack image
Stack text
As you design images for a circular small complication, use the following values for guidance.
원형 작은 컴플리케이션에 대한 이미지를 디자인할 때 다음 지침을 참고하여 값을 사용하세요.
Image | 38mm | 40mm/42mm | 41mm | 44mm | 45mm/49mm |
Ring | 20x20 pt (40x40 px @2x) | 22x22 pt (44x44 px @2x) | 23.5x23.5 pt (47x47 px @2x) | 24x24 pt (48x48 px @2x) | 26x26 pt (52x52 px @2x) |
Simple | 16x16 pt (32x32 px @2x) | 18x18 pt (36x36 px @2x) | 19x19 pt (38x38 px @2x) | 20x20 pt (40x40 px @2x) | 21.5x21.5 pt (43x43 px @2x) |
Stack | 16x7 pt (32x14 px @2x) | 17x8 pt (34x16 px @2x) | 18x8.5 pt (36x17 px @2x) | 19x9 pt (38x18 px @2x) | 19x9.5 pt (38x19 px @2x) |
Placeholder | 16x16 pt (32x32 px @2x) | 18x18x pt (36x36 px @2x) | 19x19 pt (38x38 px @2x) | 20x20 pt (40x40 px @2x) | 21.5x21.5 pt (43x43 px @2x) |
Note
In each stack measurement, the width value represents the maximum size.
각 스택 지표에서 너비 값은 최대 크기를 나타냅니다.
Modular small templates display two stacked rows consisting of an icon and content, a circular graph, or a single larger item (for example, the bottom row of complications on the Modular watch face).
모듈식 소형 템플릿은 아이콘과 내용, 원형 그래프 또는 더 큰 단일 항목(예: 모듈식 워치 페이스에 있는 컴플리케이션의 하단 행)으로 구성된 두 개의 스택 행을 표시합니다.
Columns text
Ring image
Ring text
Simple image
Simple text
Stack image
Stack text
As you design icons and images for a modular small complication, use the following values for guidance.
모듈식 작은 컴플리케이션에 대한 아이콘과 이미지를 설계할 때 다음 지침을 참고하여 값을 사용하세요.
Image | 38mm | 40mm/42mm | 41mm | 44mm | 45mm/49mm |
Ring | 18x18 pt (36x36 px @2x) | 19x19 pt (38x38 px @2x) | 20x20 pt (40x40 px @2x) | 21x21 pt (42x42 px @2x) | 22.5x22.5 pt (45x45 px @2x) |
Simple | 26x26 pt (52x52 px @2x) | 29x29 pt (58x58 px @2x) | 30.5x30.5 pt (61x61 px @2x) | 32x32 pt (64x64 px @2x) | 34.5x34.5 pt (69x69 px @2x) |
Stack | 26x14 pt (52x28 px @2x) | 29x15 pt (58x30 px @2x) | 30.5x16 pt (61x32 px @2x) | 32x17 pt (64x34 px @2x) | 34.5x18 pt (69x36 px @2x) |
Placeholder | 26x26 pt (52x52 px @2x) | 29x29 pt (58x58 px @2x) | 30.5x30.5 pt (61x61 px @2x) | 32x32 pt (64x64 px @2x) | 34.5x34.5 pt (69x69 px @2x) |
Note
In each stack measurement, the width value represents the maximum size.
각 스택 지표에서 너비 값은 최대 크기를 나타냅니다.
Modular large templates offer a large canvas for displaying up to three rows of content (for example, in the center of the Modular watch face).
모듈식 대형 템플릿은 최대 세 줄의 콘텐츠를 표시할 수 있는 대형 캔버스(예: 모듈식 워치 페이스 중앙)를 제공합니다.
Columns
Standard body
Table
Tall body
As you design icons and images for a modular large complication, use the following values for guidance.
모듈식 큰 컴플리케이션에 대한 아이콘 및 이미지를 설계할 때 다음 값을 사용하여 지침을 제공합니다.
Content | 38mm | 40mm/42mm | 41mm | 44mm | 45mm/49mm |
Columns | 11-32x11 pt (22-64x22 px @2x) | 12-37x12 pt (24-74x24 px @2x) | 12.5-39x12.5 pt (25-78x25 px @2x) | 14-42x14 pt (28-84x28 px @2x) | 14.5-44x14.5 pt (29-88x29 px @2x) |
Standard body | 11-32x11 pt (22-64x22 px @2x) | 12-37x12 pt (24-74x24 px @2x) | 12.5-39x12.5 pt (25-78x25 px @2x) | 14-42x14 pt (28-84x28 px @2x) | 14.5-44x14.5 pt (29-88x29 px @2x) |
Table | 11-32x11 pt (22-64x22 px @2x) | 12-37x12 pt (24-74x24 px @2x) | 12.5-39x12.5 pt (25-78x25 px @2x) | 14-42x14 pt (28-84x28 px @2x) | 14.5-44x14.5 pt (29-88x29 px @2x) |
Extra large templates display larger text and images (for example, on the X-Large watch faces).
Extra Large 템플릿은 X-Large 워치페이스에 더 큰 텍스트와 이미지를 표시합니다.
Ring image
Ring text
Simple image
Simple text
Stack image
Stack text
As you design icons and images for an extra large complication, use the following values for guidance.
아이콘과 이미지를 디자인할 때는 다음과 같은 값을 사용하여 컴플리케이션를 디자인 하세요.
Image | 38mm | 40mm/42mm | 41mm | 44mm | 45mm/49mm |
Ring | 63x63 pt (126x126 px @2x) | 66.5x66.5 pt (133x133 px @2x) | 70.5x70.5 pt (141x141 px @2x) | 73x73 pt (146x146 px @2x) | 79x79 pt (158x158 px @2x) |
Simple | 91x91 pt (182x182 px @2x) | 101.5x101.5 pt (203x203 px @2x) | 107.5x107.5 pt (215x215 px @2x) | 112x112 pt (224x224 px @2x) | 121x121 pt (242x242 px @2x ) |
Stack | 78x42 pt (156x84 px @2x) | 87x45 pt (174x90 px @2x) | 92x47.5 pt (184x95 px @2x) | 96x51 pt (192x102 px @2x) | 103.5x53.5 pt (207x107 px @2x) |
Placeholder | 91x91 pt (182x182 px @2x) | 101.5x101.5 pt (203x203 px @2x) | 107.5x107.5 pt (215x215 px @2x) | 112x112 pt (224x224 px @2x) | 121x121 pt (242x242 px @2x) |
Note
In each stack measurement, the width value represents the maximum size.
각 스택 지표에서 너비 값은 최대 크기를 나타냅니다.
Not supported in iOS, iPadOS, macOS, tvOS, or visionOS.
Change Log
작성 날짜 | 작성자 | 수정사항 |
2023/11/30 | 규니 | 초기 번역 |
2023/12/22 | 규니 | 배포 |