이 가이드에서는 워치 페이스를 만들고, 시간 기반 요소를 추가하고, 다중 사진 갤러리를 비롯한 사용자 선택 사진 지원을 포함하는 방법을 설명합니다. 추가 기능은 고급 가이드를 참고하세요.
시계 화면 만들기
시계 모드를 만들려면 Figma에서 프레임을 그린 후 다음과 같이 구성합니다.
크기를 너비 450단위, 높이 450단위로 설정합니다.
그림 1: 450x450 시계 화면을 보여주는 Figma의 프레임 레이아웃 패널 다른 크기도 사용할 수 있지만 Wear OS 시계 화면에는 450x450이 권장되며 시계 화면 스튜디오로 내보내려면 이 크기여야 합니다.
배터리 효율적인 시계 화면의 경우 프레임의 채우기 색상을 검은색으로 설정합니다.
그림 2: 검은색 채우기 색상이 표시된 프레임 채우기 패널 프레임의 이름을 시계 화면의 이름으로 설정합니다. 이 텍스트는 사용자의 시계에 표시됩니다.
프레임을 만들고 구성한 후 시계 화면 디자이너 플러그인을 열고 방금 만든 프레임을 선택합니다. 워치 페이스 디자이너 창에 실시간 미리보기가 표시됩니다.
시계 화면에 요소 추가
사용자가 시간을 알 수 있도록 시계 화면에 요소를 추가합니다.
아날로그 시간
직사각형을 그립니다. 이 직사각형은 시계의 초침 역할을 합니다.
새 분의 시작을 표시할 때 직사각형이 가로로 중앙에 배치되고 하단 가장자리가 실제 시계 바늘처럼 시계 화면의 중앙에 위치하는지 확인합니다. 기본적으로 Figma에서는 기하학에 맞추기가 사용 설정되어 있으며, 이 직사각형 정렬에 도움이 되는 빨간색 가이드라인이 표시됩니다.
다음으로 이 레이어가 장식용이 아님을 워치 페이스 디자이너에 알립니다. 이전 단계에서 그린 직사각형을 선택한 다음 워치 배경화면 디자이너 창으로 이동하여 동작을 '정적'에서 '초침'으로 변경합니다.
시계 초침처럼 매초 움직이기 시작하는 것을 확인할 수 있습니다. 원하는 경우 회전 방식을 조정할 수 있으며, 이 시계와 마찬가지로 분침과 시침을 만들 수 있습니다.
서브 다이얼에 관한 조언은 고급 사용 가이드를 참고하세요.
디지털 시간
디지털 형식을 사용하여 시간을 표시할 수도 있습니다. 이렇게 하려면 Figma에서 텍스트 레이어를 만드세요. 지금은 레이어의 텍스트 콘텐츠로 Hh:Mm:Ss을 입력합니다.
시계 화면 디자이너 창에서 텍스트의 동작을 '정적'에서 '디지털 시간'으로 변경합니다. 미리보기는 실제 기기에서 어떻게 표시되는지 보여줍니다.
사용할 수 있는 문자 집합에 대해 알아보려면 워치 페이스 디자이너 창의 사이드바에 표시된 템플릿 가이드를 따르세요. 예를 들어 a는 현재 시간이 'AM'인지 'PM'인지를 나타내며, 이를 '시간 형식'과 함께 사용하여 12시간을 표시할 수 있습니다.
Wear OS에서 사용할 수 없는 글꼴을 포함하여 Figma에서 글꼴을 선택하면 자동으로 내보내져 시계 화면에 번들로 묶입니다. 각 글꼴에는 재배포에 관한 자체 라이선스 약관이 있습니다.
다양한 시간 미리보기
시간대별로 시계 화면을 확인하려면 시계 화면 디자이너 창 하단의 슬라이더를 드래그하여 미리보기가 표시되는 시간을 조정하면 됩니다.
다양한 시간을 미리 본 후 왼쪽 하단에 있는 재설정 버튼을 선택하여 시간을 현재 시간으로 재설정할 수 있습니다.
사용자 제공 사진 포함
시계 화면에 맞춤 사진 슬롯을 포함할 수 있습니다. 이를 통해 사용자는 개인 사진을 배경으로 추가하면서도 시간과 디자인에 포함된 다른 요소를 계속 표시할 수 있습니다.
맞춤 사진을 지원하려면 시계 화면에 레이어를 추가하고 동작을 '사용자 제공 사진'으로 설정하세요. 이 예에서는 이 레이어의 기본 이미지로 꽃의 샘플 사진을 사용합니다. 이 이미지는 사용자가 자신의 사진을 할당하기 전이나 사용자가 자신의 사진을 사용하지 않기로 선택한 경우 대체 이미지로 사용됩니다.
사진의 다중 선택 지원
시계 모드에서 사진을 여러 개 선택할 수 있습니다. 워치 페이스 디자이너에서는 이를 갤러리라고 합니다.
사진 선택이 '갤러리'로 설정된 경우 사용자는 이 슬롯에 여러 사진을 선택할 수 있으며, '사진 변경'에서 선택한 내용에 따라 시계가 여러 지점에서 사진을 순환합니다.
- '탭 시'를 선택하면 사용자가 레이어를 탭할 때 사진이 변경됩니다.
- '손목을 들 때'를 선택하면 사용자가 손목을 들 때마다 세 번에 한 번씩 변경됩니다. 현재 시계 화면 디자이너를 사용하여 조정할 수 없습니다.
changeAfterEvery속성을 사용하여 워치 페이스 형식이 더 고급 지원을 제공하는 방법을 자세히 알아보세요.
자세히 알아보기
실제 기기에서 시계 화면을 미리 보려면 내보내기 가이드를 참고하세요.
더 많은 옵션과 기능은 고급 사용 가이드를 참고하세요.