이 가이드에서는 시계 화면 스튜디오(WFS)에 포함된 기본 도구와 창을 설명합니다.
그림 1. 기본 시계 화면 스튜디오 화면
도구
WFS에는 다음 도구가 포함되어 있습니다.
- 구성요소 추가: 시계 화면에 추가할 수 있는 구성요소 목록이 열립니다.
- 앞으로 및 뒤로: 선택한 구성요소를 앞으로 또는 뒤로 이동합니다.
- 그룹화 및 그룹화 해제: 여러 구성요소를 함께 그룹화하여 하나의 구성요소로 제어하거나 구성요소 그룹을 그룹화 해제할 수 있습니다.
- 마스크: 하단 레이어의 도형 윤곽선을 기반으로 다른 레이어의 전체 또는 일부를 가립니다.
- 빌드: 빌드 대화상자가 열립니다.
- 기기에서 실행: 기기에서 시계 화면을 미리 보는 대화상자가 열립니다.
구성요소
시계 화면에 원하는 대로 다양한 구성요소를 추가합니다. 구성요소에 맞춤설정된 디자인 소스를 사용할 수도 있습니다. 예를 들어 텍스트 구성요소로 심박수나 걸음 수 데이터를 표시하거나, 맞춤 이미지를 추가하여 앱을 실행할 수 있습니다.
구성요소 유형
지원되는 구성요소는 다음 섹션에서 설명합니다.
시계 화면 캔버스
시계 화면 하단 레이어의 캔버스 색상을 설정합니다.
텍스트
텍스트 필드는 기본적으로 일반 텍스트입니다. 일반 텍스트는 정적이며 변경되지 않습니다. 텍스트 필드의 속성 창에서 텍스트 필드를 일반 텍스트에서 데이터 텍스트로 변경할 수 있습니다. 데이터 텍스트는 변경되며 태그를 기반으로 채워집니다.
자세한 내용은 태그 표현식을 참고하세요.
곡선 텍스트 적용 옵션을 선택하여 시계 화면에 따라 곡선을 그리는 텍스트를 만듭니다.
너비(W)와 높이(H)를 설정하여 텍스트의 곡선을 결정합니다. W와 H를 변경하면 텍스트 구성요소의 크기가 자동으로 변경됩니다. 텍스트의 위치를 확인하려면 미리 설정된 범위 중 하나를 선택합니다. 시작 및 각거리를 지정하여 범위를 추가로 만들 수 있습니다. 텍스트 방향을 시계 방향(CW) 또는 시계 반대 방향(CCW)으로 설정합니다.
도형
타원형과 직사각형을 비롯한 다양한 도형을 추가합니다.
이미지
맞춤 이미지를 가져옵니다.
애니메이션
다음 단계에 설명된 대로 애니메이션의 이미지 시퀀스를 가져옵니다.
- 디자인 프로그램(예: Adobe Flash 또는 Adobe Premiere)을 사용하여 애니메이션 시퀀스를 만듭니다.
- 구성요소 추가 > 애니메이션을 클릭하여 시계 화면에 애니메이션 파일을 추가합니다.
- 파일 브라우저에서 이미지 시퀀스를 선택하고 업로드를 클릭합니다.
- 이미지 순서를 변경하거나 이미지를 삭제 또는 추가하여 애니메이션을 수정합니다.
트리거 값을 설정하여 애니메이션 재생 시점을 결정합니다.
트리거 값을 WatchFace on으로 설정하면 시계 화면이 표시되는 즉시 애니메이션이 시작됩니다. 다른 옵션으로는 탭, 매초, 매분, 매시간이 있습니다. 지연을 사용하고 시간(초)을 입력하여 시작을 지연시킬 수도 있습니다.
애니메이션의 추가 옵션은 다음과 같습니다.
- 자동 재생: 애니메이션이 완료되면 화면이 꺼지는 등 중단이 발생할 때까지 애니메이션을 즉시 반복합니다.
- 반복 지연: 반복되는 애니메이션 실행 사이에 지연을 설정합니다.
- 재생 다시 시작: 알림이나 전화 수신과 같은 중단으로 인해 재생이 중지될 때 애니메이션을 다시 시작할지 아니면 처음부터 시작할지 결정합니다.
- 재생 전에 숨기기: 재생이 트리거될 때까지 애니메이션을 숨길지 결정합니다.
- 완료 후 숨기기: 재생이 완료되면 애니메이션을 숨길지 결정합니다.
멀티미디어
AGIF 또는 Lottie, WEBP 파일과 같이 이미 애니메이션 처리된 이미지를 가져옵니다.
다음 단계에 따라 멀티미디어 이미지를 추가합니다.
- 구성요소 추가 > 멀티미디어를 클릭합니다.
- 파일 브라우저에서 파일을 선택하고 업로드를 클릭합니다.
- 트리거 값을 애니메이션의 시작 시간으로 설정합니다.
멀티미디어 이미지의 파일 크기, 해상도, 프레임 번호는 기기 성능과 배터리 소모에 영향을 미칠 수 있다는 점에 유의하세요. 멀티미디어 이미지는 작업 중에 비동기식으로 로드되며 재생될 때 사용자 시계의 기능과 이미지의 다양한 특성에 따라 지연이 발생할 수 있습니다.
아날로그 시곗바늘
다음과 같이 아날로그 시계의 시침, 분침, 초침을 추가하세요.
파일 브라우저를 열고 각 시곗바늘에 가져올 이미지 파일을 선택합니다.
아날로그 시곗바늘에는 Rotation 속성이 있습니다. 이 속성에는 다음 옵션이 포함됩니다.
- 동기화
- 시간대
- 회전
- 값
- 움직임 효과
동기화에는 다음 옵션이 있습니다.
- 1일 기준의 시
- 1시간 기준의 분
- 1분 기준의 초
- 일
- 월
- 요일
- 연중 날짜
- 달의 위상
1분 기준의 초 옵션은 끊김 없이 움직이는 효과에서만 작동합니다. 이 효과는 초침 구성요소를 추가할 때 자동으로 설정됩니다.
디지털시계
디지털시계 옵션에는 날짜와 시간이 포함됩니다.
날짜를 추가할 때는 날짜 태그를
사용하여 텍스트 구성요소를 추가합니다. 기본 날짜 표시는 DAY_WEEK_S MON_S DAY_1_31_Z입니다.
시간을 추가할 때는 디지털시계 태그를 사용하여 텍스트 구성요소를 추가합니다. 기본 디지털 시간 표시는 HOUR_1_12_Z:MIN_Z:SEC_Z입니다.
진행률 표시줄
시계 화면에 진행률 표시줄을 추가하여 다양한 활동을 추적하세요. 진행률 표시줄 구성요소 옵션에는 선형 및 원형 진행률 표시줄이 포함됩니다. 6가지의 미리 설정된 범위 중 하나를 선택하여 진행률 표시줄의 위치를 결정합니다. 시작 및 각거리를 지정하여 범위를 추가로 만들 수 있습니다. 진행률 표시줄의 방향을 시계 방향이나 시계 반대 방향으로 설정합니다.
구성요소 관리
WFS 도구를 사용해 구성요소를 관리하세요. 다음 섹션에 설명된 대로 시계 화면에서 구성요소를 추가, 그룹화, 그룹화 해제, 정렬할 수 있습니다.
구성요소 추가
+ 버튼을 사용하여 구성요소를 추가합니다.
구성요소를 추가하면 캔버스의 기본 위치에 구성요소가 배치됩니다. 구성요소는 자동으로 선택되므로 쉽게 수정할 수 있습니다.
구성요소 그룹화 또는 그룹화 해제
그룹은 구성요소가 하나 이상 모인 조합입니다. 모든 구성요소는 그룹화할 수 있습니다. 그룹은 그룹화 해제될 수 있습니다.
구성요소 마스크 또는 마스크 해제
마스크 그룹을 사용하면 맨 아래 레이어의 도형에 따라 마스크 그룹의 표시 영역이 결정됩니다. 그 위에 있는 레이어는 맨 아래 레이어의 도형 윤곽선을 통해서만 표시됩니다.
예를 들어 맨 아래 레이어에 삼각형 이미지를 배치하고 그 위 레이어에 이미지와 애니메이션을 배치하면 이미지와 애니메이션은 맨 아래 레이어의 삼각형 윤곽선을 통해서만 표시됩니다.
마스크 그룹을 만들려면 다음 단계를 따르세요.
- 그룹화할 레이어를 선택합니다.
- 핫키 영역에서 마스크를 선택하거나 레이어를 마우스 오른쪽 버튼으로 클릭하고 마스크를 선택합니다.
레이어 창에서 마스크 그룹을 해제하려면 다음 단계를 따르세요.
- 마스크 그룹을 선택합니다.
- 핫키 영역에서 마스크 해제를 선택하거나 레이어를 마우스 오른쪽 버튼으로 클릭하고 마스크 해제를 선택합니다.
미리보기 창
미리보기 창은 시계 화면을 설계할 때 주로 작업하는 영역입니다.
미리보기 창에 표시된 캔버스에 모든 시계 화면 요소를 추가합니다. 캔버스에서 요소를 위치로 드래그하여 요소의 크기를 조절하고 정렬하고 회전합니다.
레이어 창
레이어 창에는 미리보기 창에 표시된 구성요소 및 그룹 목록이 표시됩니다. 각 구성요소에는 기본적으로 자체 레이어가 있습니다.
레이어 창 내에서 다음과 같은 작업을 할 수 있습니다.
- 검색: 이름으로 레이어를 검색합니다.
- 표시/숨기기: 레이어를 표시하거나 숨깁니다. 숨겨진 레이어는 미리보기 창에 표시되지 않습니다.
- 테마 색상: 테마 색상을 사용 또는 사용 중지로 전환합니다.
- 이름 바꾸기: 이름 필드를 더블클릭하고 새 이름을 입력하여 레이어 이름을 변경합니다.
레이어를 마우스 오른쪽 버튼으로 클릭하면 다음과 같은 메뉴 옵션이 표시됩니다.
- 잠금/잠금 해제: 캔버스에서 이동하지 않도록 레이어를 잠급니다.
- 그룹화/그룹화 해제: 여러 구성요소를 함께 그룹화하여 하나의 구성요소로 제어하거나 구성요소 그룹을 그룹화 해제할 수 있습니다.
- 마스크/마스크 해제: 하단 레이어의 도형 윤곽선을 기반으로 다른 레이어의 전체 또는 일부를 가리거나 마스크 그룹에서 레이어를 삭제합니다.
- 이미지 교체: 이미지 파일을 한 레이어에서 다른 레이어로 이동합니다. 이미지에만 표시됩니다.
- 레이어 색상: 레이어에 색상 라벨을 추가하여 레이어를 구별합니다.
조건부 선
조건부 선을 사용하면 시계 화면에 구성요소를 표시하거나 숨기고 구성요소 동작을 제어할 수 있습니다. 조건부 선을 사용하여 시간이나 걸음 수, 배터리 또는 이벤트와 같은 특정 조건에 따라 시계 화면의 모양을 변경하세요.
구성요소를 추가하면 시간 조건이 기본적으로 설정됩니다. 이러한 조건을 조정하려면 원하는 레이어에서 조건 아이콘을 클릭합니다. 조건부가 반복되도록 설정하려면 프레임 영역을 마우스 오른쪽 버튼으로 클릭하고 루프를 선택합니다.
표시되지 않는 레이어는 성능을 저하시키거나 배터리 수명에 영향을 미치지 않습니다.
시계 화면을 시간이나 걸음 수, 배터리 상태, 이벤트에 응답하도록 설정할 수 있습니다(다음 섹션 참고).
시간
시계 화면은 시간 간격에 따라 동적으로 변경될 수 있습니다. 예를 들어 시계 화면은 낮에는 밝다가 일정 시간이 지나면 점차 어두워질 수 있습니다. 시간, 분, 초 단위로 측정되도록 시간을 설정할 수 있습니다.
다음 단계에 따라 시간 조건을 추가하세요.
- 레이어를 만듭니다.
- 기간을 설정하여 각 레이어의 표시 시점을 제어합니다. 시작 표시줄을 선택한 후 기간을 선택합니다.
- 시작 표시줄을 클릭하고 끝 표시줄로 드래그합니다.
- 2단계와 3단계를 반복하여 각 레이어의 기간을 설정합니다.
- 실행을 클릭하여 변경사항을 미리 봅니다.
사용자의 휴대전화에서 선택한 설정에 따라 12시간 설정 시계 화면과 24시간 설정 시계 화면을 다르게 표시하려면 다음을 실행하세요.
- 디지털시계 구성요소 2개(첫 번째 구성요소는 12시간 버전용, 두 번째 구성요소는 24시간 버전용)를 추가합니다.
- 두 구성요소를 같은 위치에 배치합니다.
- 구성요소의 조건부 선에 12시간 및 24시간 조건을 추가합니다.
- 첫 번째 12시간 레이어 디지털시계 구성요소를 12시간 형식으로 표시하고 24시간 레이어는 24시간 형식으로 표시하도록 기간을 설정합니다.
시간 제어
시간 제어 슬라이더를 사용하면 시계 화면이 어떻게 작동하는지 확인할 수 있습니다. 이를 통해 하루 동안 시계 화면이 어떻게 변경되는지 미리 볼 수 있습니다. 슬라이더를 특정 시간으로 드래그하거나, 재생 버튼과 빨리 감기 버튼을 사용하여 시계 화면 애니메이션을 봅니다.
걸음 수
시계 화면을 사용자의 걸음 수에 따라 동적으로 변경되도록 설계할 수 있습니다. 예를 들어 달성한 일일 걸음 수 목표의 비율에 따라 변경되는 시계 화면을 만들 수 있습니다.
배터리
시계 화면을 시계의 가용 배터리 수명 비율에 따라 동적으로 변경되도록 설계할 수 있습니다.
이벤트
시계 화면을 기기 상태에 따라(예: 배터리 부족 또는 읽지 않은 알림) 동적으로 변경되도록 설계할 수 있습니다. 이렇게 하려면 원하는 이벤트와 해당 이벤트 중에 표시할 이미지나 애니메이션을 선택합니다.
속성 창
각 구성요소에는 수정 가능한 속성이 다양하게 있습니다. 예를 들어 디지털시계의 숫자 색상을 변경하거나 시곗바늘이 시나 분, 초를 측정할지 선택할 수 있습니다.
작업 패널
속성 창 내 작업 패널을 사용하여 시계 화면과 상호작용할 수 있습니다. 예를 들어 사용자가 구성요소를 탭하여 이미지를 변경하거나 다른 앱을 열거나 심박수를 측정하도록 허용할 수 있습니다.
스타일
선택한 레이어의 스타일을 변경하려면 스타일 탭을 사용하세요. 이미지, 멀티미디어 이미지, 색인, 시곗바늘 구성요소의 스타일을 추가할 수 있습니다. 최대 30개의 테마 색상과 10개의 이미지를 추가할 수 있습니다.
맞춤설정 편집기를 사용하여 구성요소에 맞춤 스타일을 적용합니다.
맞춤설정 편집기 대화상자에서 각 구성요소, 레이어, 이름의 스타일을 맞춤설정할 수 있습니다. 이 대화상자에서 스타일을 재정렬하거나 병합할 수도 있습니다.
스타일 탭에는 테마 색상을 최대 30개까지 추가할 수 있습니다. 각 테마 색상에는 최대 3가지 색상 변형이 있을 수 있습니다.
레이어 또는 속성 탭에서 이러한 색상을 설정합니다. 레이어 탭에서 테마 색상 적용 아이콘을 최대 3회 전환하여 색상을 설정합니다.
속성 탭에서 테마 색상 적용 라디오 버튼을 선택하여 색상을 설정합니다.
색상
구성요소에 지정된 색상을 적용하거나 시계 화면의 테마 색상을 저장합니다. 정보 표시의 경우 초기 색상 테마는 그레이 스케일입니다.
이미지 모양
다음 설정을 사용하여 이미지의 모양을 수정하세요.
- 색조: 색상의 색조를 제어합니다.
- 채도: 이미지 색상의 선명도를 제어합니다.
- 밝기: 이미지 색상이 밝아집니다.
텍스트 모양
텍스트 모양 탭을 사용하여 텍스트 정렬 및 글꼴 스타일을 설정합니다. 프로젝트 설정에서 비트맵 글꼴 추가를 선택하여 텍스트를 장식합니다. 프로젝트에 추가된 비트맵 글꼴 중에서 기본 글꼴 크기를 사용하려면 기본 글꼴 크기 적용을 선택합니다.
실행
WFS 내 실행 패널에서 시계 화면을 실행할 수 있습니다. WFS 내에서 시간, 날짜, 기기 배터리 수준, 사용자 걸음 수, 사용자 심박수, 자이로 값을 조정하여 시계 화면이 다양한 상황에서 어떻게 표시되는지 테스트할 수 있습니다. 또한 맞춤설정 편집기에 설정된 다른 스타일(읽지 않은 알림 수, 태그 표현식, 조건부 선 등)을 조정할 수도 있습니다. 실행 미리보기는 활성 또는 상시 사용 설정으로 설정할 수 있습니다. 상시 사용 설정을 사용하면 WFS에는 현재 픽셀 비율 값과 분석 버튼이 표시됩니다.
기기에서 실행을 사용하여 기기에서 시계 화면을 테스트하세요.
자세한 내용은 시계 화면 테스트를 참고하세요.