이 페이지에서는 워치 페이스 디자이너의 고급 사용 사례를 설명합니다. 여기에는 서브 다이얼, 정보 표시, 색상 테마 지원을 추가하는 방법이 포함됩니다. 시작에 대해 자세히 알아보려면 기본사항 가이드를 참고하세요.
서브 다이얼
실제 손목시계의 서브 다이얼처럼 시계 화면의 하위 섹션 내에서 회전하는 아날로그 시곗바늘을 만들 수 있습니다.
그러려면 다음 단계를 완료하세요.
디자인에서 보조 다이얼을 배치한 영역을 덮는 빈 프레임을 만듭니다.
그림 1: 다이얼 슬롯을 덮는 빈 프레임 이 프레임 안에 초침을 디자인합니다.
그림 2: 포함 프레임에 있는 초침 디자인 초침이 포함된 서브 다이얼 프레임을 선택합니다. 그런 다음 시계 화면 디자이너에서 회전 기준을 '레이어 중심'으로 설정합니다.
그림 3: 포함 프레임을 선택한 후 (왼쪽) 초침 회전 동작을 선택합니다(오른쪽).
정보 표시
정보 표시 슬롯을 추가하려면 시계 화면에 프레임을 추가하세요. 이 프레임 내에서 빈 상태일 때 위젯 슬롯이 어떻게 표시될지 디자인합니다. 이는 아이콘, 텍스트와 같은 다른 유형의 정보 표시의 기본 디자인을 형성합니다.
다양한 종류의 시계 화면이 있습니다. 워치 페이스는 각 유형의 템플릿을 제공하며, 사용자의 워치에 있는 앱은 사용할 템플릿과 자체적으로 제공할 데이터를 결정합니다. 사용자는 어떤 앱이 어떤 정보 표시 슬롯에 들어갈지 선택합니다.
컴플리케이션 슬롯의 디자인이 포함된 프레임을 선택합니다. 그런 다음 시계 화면 디자이너에서 동작을 '컴플리케이션 슬롯'으로 변경합니다. 이 프로세스는 변형이 하나 (빈 디자인)인 구성요소를 만듭니다.
정보 표시 자리 유형 적용
'empty' 유형만 지원하는 정보 표시 슬롯을 포함하는 것은 유용하지 않으므로 다른 유형을 추가합니다. 시계 화면 디자이너 창에서 + 새 유형 지원을 누르고 '짧은 텍스트'를 선택합니다. 짧은 텍스트는 대부분의 앱에서 지원하는 정보 유형으로, 아이콘과 함께 두 개의 작은 라벨을 표시합니다.
이 단계에서는 이 시계 화면 유형의 디자인을 나타내는 다른 변형을 만듭니다. '짧은 텍스트' 행을 선택하여 해당 행으로 이동합니다.
다이얼 템플릿 내에서 레이어를 수정하면 '동작' 옵션이 표시됩니다. 이 옵션은 워치 배경화면의 옵션과 비슷하지만 여기에서는 수정 중인 정보 표시 유형에 맞는 동작을 선택할 수 있습니다.
이 예에서 짧은 텍스트 시계 화면 내의 레이어는 앱의 제목, 텍스트 또는 단색 아이콘일 수 있습니다. 단색은 아이콘이 Figma에서 설정한 색상을 상속받는다는 의미입니다.
시계 화면에 앱 아이콘이 표시될 위치에 직사각형을 만든 후 시계 화면 디자이너 창으로 이동하여 동작을 '단색 아이콘'으로 설정합니다.
다음으로 텍스트 레이어 두 개를 만듭니다. 이러한 레이어는 제목용과 텍스트용의 두 가지 '짧은 텍스트' 슬롯을 추가로 나타냅니다.
미리보기에는 정보 표시가 어떻게 구성되는지 표시됩니다. 이 예에서는 캘린더 앱이 이 슬롯에 할당된 경우 시계 화면이 어떻게 표시되는지 보여줍니다.
다음 이미지와 같이 텍스트를 모두 대문자로 표시하려면 Figma의 서체 메뉴에서 텍스트 대소문자 기능을 사용하세요.
디지털 시간과 달리, 시계 화면 텍스트에는 임의의 글꼴 내보내기가 없습니다. 정보 표시는 항상 Wear OS 기기의 시스템 글꼴을 사용하여 그려지며, 이는 다를 수 있지만 일반적으로 Roboto입니다.
추가 유형의 정보 표시를 지원하거나 기본 앱, 시계가 대기 모드일 때 슬롯이 표시되는지 여부와 같은 관련 설정을 맞춤설정하려면 시계 화면 내에서 정보 표시 슬롯을 선택하세요.
색상 테마
워치 화면 내에 색상 테마 옵션을 여러 개 포함할 수 있습니다. 그러면 사용자가 시계의 시계 화면 선택기를 사용하여 원하는 테마를 선택할 수 있습니다.
워치 페이스 디자이너에는 Figma 스타일을 사용하는 색상 테마 지원이 포함되어 있습니다.
다음 시계 화면이 주어졌을 때 사용자가 시계 바늘과 다이얼의 색상을 맞춤설정하도록 하려는 경우를 생각해 보세요.
첫 번째 스타일 만들기
시계에서 맞춤설정할 수 있는 색상 스타일을 만들려면 새 스타일을 만드세요.
- 캔버스에서 모든 항목을 선택 해제합니다.
- 오른쪽 사이드바의 스타일 옆에 있는 + 버튼을 선택합니다.
다음과 같은 특정 방식으로 이름을 지정해야 합니다.
Watch Face Name/Element Family Name/Descriptive Color Name/Specific Element Name
이 경우 샘플 시계 화면의 이름은 Bauhaus이므로 색상은 이 이름으로 시작하고 사용자가 맞춤설정할 수 있는 요소인 Hands이 뒤에 옵니다.
그런 다음 Charcoal와 같은 설명이 포함된 색상 이름을 지정하고 색상을 변경해야 하는 특정 요소(예: 시계 바늘)를 지정합니다.
이를 모두 합치면 최종 이름은 Bauhaus/Hands/Charcoal/Hours입니다.
분침의 맞춤 색상 테마를 만들려면 비슷한 과정을 따르세요.
마지막으로 이러한 색상을 워치 페이스에 표시되는 실제 시계 바늘에 할당합니다.
Bauhaus/Hands/Charcoal/Minutes 테마 할당다른 스타일 추가
스타일의 Theme Name 부분을 변경하여 새 스타일을 만듭니다. 다음 예에서는 Rust (Bauhaus/Hands/Rust/Hours)라는 새 스타일을 추가합니다.
그러면 사용자가 기기에서 '차콜'과 '러스트' 색상 테마 간에 전환할 수 있으며 시계 화면의 시침과 분침이 그에 따라 다시 색칠됩니다.
다른 요소에 적용
유사한 단계를 따라 시계 화면의 다른 요소를 테마로 지정할 수 있습니다. 이러한 테마는 혼합하여 사용할 수 있으며 원하는 수의 색상 스타일을 사용하여 복잡한 교체 가능한 테마를 만들 수 있습니다.
위 스타일 집합을 사용하면 시계 바늘에 Rust 및 Charcoal의 두 가지 옵션을 제공하고 다이얼에 Light, Dark, Duotone의 세 가지 옵션을 제공합니다.
