시계 화면 스튜디오로 시계 화면 만들기

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

다음 가이드에서는 시계 화면 스튜디오(WFS)에 포함된 기본 도구와 창을 설명합니다.

create-watchface

도구

WFS에는 다음 도구가 포함되어 있습니다.

  • 구성요소 추가: 시계 화면에 추가할 수 있는 구성요소 목록이 열립니다.
  • 앞으로 / 뒤로: 선택한 구성요소를 앞으로 또는 뒤로 이동합니다.
  • 그룹화/그룹화 해제: 여러 구성요소를 함께 그룹화하여 하나의 구성요소로 제어합니다.
  • 마스크: 맨 아래 레이어의 도형 윤곽선을 기반으로 다른 레이어의 전체 또는 일부를 가릴 수 있는 도구입니다.
  • 빌드: 빌드 대화상자가 열립니다.
  • 기기에서 실행: 기기에서 시계 화면을 미리 보는 대화상자가 열립니다.

핫키

구성요소

시계 화면에 원하는 대로 다양한 구성요소를 추가합니다. 구성요소에 맞춤설정된 디자인 소스를 사용할 수도 있습니다. 예를 들어 텍스트 구성요소로 심박수나 걸음 수 데이터를 표시하거나, 맞춤 이미지를 추가하여 특정 앱을 실행할 수 있습니다.

구성요소 유형

지원되는 구성요소는 다음 섹션에서 설명합니다.

시계 화면 캔버스

시계 화면 하단 레이어의 캔버스 색상을 설정합니다.

캔버스

텍스트

텍스트 필드는 기본적으로 일반 텍스트입니다. 일반 텍스트는 정적이며 변경되지 않습니다. 텍스트 필드의 속성 창에서 텍스트 필드를 일반 텍스트에서 데이터 텍스트로 변경할 수 있습니다. 데이터 텍스트는 변경되며 태그를 기반으로 채워집니다.

자세한 내용은 태그 표현식을 참고하세요.

곡선 텍스트 적용 옵션을 선택하여 시계 화면에 따라 곡선을 그리는 텍스트를 만듭니다.

너비(W)와 높이(H)를 설정하여 텍스트의 곡선을 결정합니다. W와 H를 변경하면 텍스트 구성요소의 크기가 자동으로 변경됩니다. 텍스트의 위치를 확인하려면 범위 미리 설정 중 하나를 선택합니다. 시작각거리를 지정하여 범위를 추가로 만들 수 있습니다. 텍스트 방향을 시계 방향 또는 시계 반대 방향으로 설정합니다.

curved-text

도형

타원형과 직사각형을 비롯한 다양한 도형을 추가합니다.

이미지

WFS는 맞춤 이미지 가져오기를 지원합니다.

애니메이션

애니메이션에 사용할 이미지 시퀀스를 가져옵니다.

애니메이션

다음 단계에 설명된 대로 애니메이션을 추가합니다.

  1. Adobe Flash 또는 Adobe Premiere와 같은 디자인 프로그램으로 자체 애니메이션 시퀀스를 만듭니다.
  2. 구성요소 추가 > 애니메이션을 클릭하여 시계 화면에 애니메이션 파일을 추가합니다.
  3. 파일 브라우저에서 이미지 시퀀스를 선택하고 업로드를 클릭합니다.
  4. 각 이미지의 순서를 변경하거나 이미지를 삭제하거나 추가하여 애니메이션을 수정합니다.
  5. 트리거 값을 설정하여 애니메이션 재생 시점을 결정합니다.

트리거 값을 WatchFace on으로 설정하면 시계 화면이 표시되는 즉시 애니메이션이 시작됩니다. 다른 옵션으로는 , 매초, 매분, 매시간이 있습니다. 지연을 사용하고 시간(초)을 입력하여 시작을 지연시킬 수도 있습니다.

애니메이션의 추가 옵션은 다음과 같습니다.

  • 자동 재생: 애니메이션이 완료되면 화면이 꺼지는 등 중단이 발생할 때까지 애니메이션을 즉시 반복합니다.
  • 반복 지연: 반복되는 애니메이션 실행 사이에 지연을 설정합니다.
  • 재생 다시 시작: 알림이나 전화 수신과 같은 중단으로 인해 재생이 중지될 때 애니메이션을 다시 시작할지 아니면 처음부터 시작할지 결정합니다.
  • 재생 전에 숨기기: 재생이 트리거될 때까지 애니메이션을 숨길지 결정합니다.
  • 완료 후 숨기기: 재생이 완료될 때 애니메이션을 숨길지 결정합니다.

애니메이션

멀티미디어

AGIF 또는 Lottie, WebP 파일과 같이 이미 애니메이션 처리된 이미지를 가져옵니다.

다음 단계에 따라 멀티미디어 이미지를 추가합니다.

  1. 구성요소 추가 > 멀티미디어를 클릭합니다.
  2. 파일 브라우저에서 파일을 선택하고 업로드를 클릭합니다.
  3. 트리거 값을 애니메이션의 시작 시간으로 설정합니다.

멀티미디어 이미지의 파일 크기, 해상도, 프레임 번호는 기기 성능과 배터리 소모에 영향을 미칠 수 있다는 점에 유의하세요. 멀티미디어 이미지는 작동 중에 비동기식으로 로드되며 시계의 기능 및 이미지의 다양한 특성에 따라 재생될 때 지연이 발생할 수 있습니다.

아날로그 시곗바늘

아날로그 시계 시침, 분침, 초침을 추가하세요. 파일 브라우저를 열고 각 시곗바늘에 가져올 이미지 파일을 선택합니다.

아날로그 시곗바늘

디지털시계

디지털시계 옵션에는 날짜와 시간이 포함됩니다. 날짜를 추가할 때는 날짜 태그를 사용하여 텍스트 구성요소를 추가합니다. 기본 날짜 표시는 DAY_WEEK_S MON_S DAY_1_31_Z입니다. 시간을 추가할 때는 디지털시계 태그를 사용하여 텍스트 구성요소를 추가합니다. 기본 디지털 시간 표시는 HOUR_1_12_Z:MIN_Z:SEC_Z입니다.

digital-clock

진행률 표시줄

시계 화면에 진행률 표시줄을 추가하여 다양한 활동을 추적하세요. 진행률 표시줄 구성요소 옵션에는 선형 및 원형 진행률 표시줄이 포함됩니다. 6가지 범위 미리 설정 중 하나를 선택하여 진행률 표시줄의 위치를 결정합니다. 시작각거리를 지정하여 범위를 추가로 만들 수 있습니다. 진행률 표시줄의 방향을 시계 방향이나 시계 반대 방향으로 설정합니다.

구성요소 관리

WFS 도구를 사용해 구성요소를 관리하세요. 다음 섹션에 설명된 대로 시계 화면에서 구성요소를 추가, 그룹화, 그룹화 해제, 정렬할 수 있습니다.

구성요소 추가

구성요소를 추가하면 캔버스의 기본 위치에 구성요소가 배치됩니다. 구성요소는 자동으로 선택되므로 쉽게 수정할 수 있습니다.

preview-window

구성요소 그룹화/그룹화 해제

그룹은 구성요소가 하나 이상 모인 조합입니다. 모든 구성요소는 그룹화할 수 있습니다. 그룹은 그룹화 해제될 수 있습니다.

그룹

구성요소 마스크/마스크 해제

맨 아래 레이어의 도형에 따라 마스크 그룹의 표시 영역이 달라집니다. 그 위에 있는 레이어는 맨 아래 레이어의 도형 윤곽선을 통해서만 표시됩니다. 예를 들어 맨 아래 레이어에 삼각형 이미지를 배치하고 그 위 레이어에 이미지와 애니메이션을 배치하면 이미지와 애니메이션은 맨 아래 레이어의 삼각형 윤곽선을 통해서만 표시됩니다.

그룹

마스크 그룹을 만들려면 다음 단계를 따르세요.

  1. 그룹화할 레이어를 선택합니다.
  2. 핫키 영역에서 마스크를 선택하거나 레이어를 마우스 오른쪽 버튼으로 클릭하고 마스크를 선택합니다.

레이어 창에서 마스크 그룹을 해제하려면 다음 단계를 따르세요.

  1. 마스크 그룹을 선택합니다.
  2. 핫키 영역에서 마스크 해제를 선택하거나 레이어를 마우스 오른쪽 버튼으로 클릭하고 마스크 해제를 선택합니다.

미리보기 창

미리보기 창은 시계 화면을 설계할 때 주로 작업하는 영역입니다.

미리보기 창에 표시된 캔버스에 모든 시계 화면 요소를 추가합니다. 캔버스에서 요소를 위치로 드래그하여 요소의 크기를 조절하고 정렬하고 회전합니다.

preview-window

레이어 창

레이어 창에는 미리보기 창에 표시된 구성요소 및 그룹 목록이 표시됩니다. 각 구성요소에는 기본적으로 자체 레이어가 있습니다.

레이어

레이어 창 내에서 다음과 같은 작업을 할 수 있습니다.

  • 검색: 이름으로 레이어를 검색합니다.
  • 표시 / 숨기기: 레이어를 표시하거나 숨길 수 있습니다. 숨겨진 레이어는 미리보기 창에서 재생되지 않습니다.
  • 테마 색상: 테마 색상을 사용 또는 사용 중지로 전환합니다.
  • 이름 바꾸기: 이름 필드를 더블클릭하고 새 이름을 입력하여 레이어 이름을 변경합니다.

레이어를 마우스 오른쪽 버튼으로 클릭하면 다음과 같은 메뉴 옵션이 표시됩니다.

  • 잠금/잠금 해제: 캔버스에서 이동하지 않도록 레이어를 잠급니다.
  • 그룹화/그룹화 해제: 여러 구성요소를 함께 그룹화하여 하나로 제어합니다.
  • 마스크/마스크 해제: 맨 아래 레이어 위의 레이어가 맨 아래 레이어의 도형 윤곽선을 통해서만 표시되도록 합니다.
  • 이미지 교체(이미지에만 해당): 한 레이어의 이미지 파일을 다른 레이어로 변경합니다.
  • 레이어 색상: 레이어에 색상 라벨을 추가하여 레이어를 구별합니다.

조건부 선

조건부 선을 사용하면 시계 화면에 구성요소를 표시하거나 숨기고 구성요소 동작을 제어할 수 있습니다. 조건부 선을 사용하여 시간이나 걸음 수, 배터리와 같은 특정 조건에 따라 시계 화면의 모양을 변경하세요. 프레임 영역을 마우스 오른쪽 버튼으로 클릭하고 루프를 선택하여 조건부가 반복되도록 설정합니다.

표시되지 않는 레이어는 성능을 저하시키거나 배터리 수명에 영향을 미치지 않습니다.

조건부 조건부

다음 조건에 응답하도록 시계 화면을 설정할 수 있습니다.

시간

시계 화면은 시간 간격에 따라 동적으로 변경될 수 있습니다. 예를 들어 시계 화면은 낮에는 밝다가 시간이 지나면서 점점 어두워질 수 있습니다. 시간, 분, 초 단위로 측정되도록 시간을 설정할 수 있습니다.

다음 단계에 따라 시간 조건을 추가하세요.

  1. 레이어를 만듭니다.
  2. 기간을 설정하여 각 레이어의 표시 시점을 제어합니다. 시작 표시줄을 선택한 후 기간을 선택합니다.
  3. 시작 표시줄을 클릭하고 끝 표시줄로 드래그합니다.
  4. 2단계와 3단계를 반복하여 레이어마다 기간을 설정합니다.
  5. 실행을 클릭하여 변경사항을 미리 봅니다.

다음 예는 사용자의 휴대전화에서 선택한 설정에 따라 12시간 설정과 24시간 설정에 서로 다른 시계 화면을 표시하는 방법을 보여줍니다.

  1. 디지털시계 구성요소를 두 개 추가합니다. 첫 번째 구성요소는 12시간 버전을 표시하고 두 번째 구성요소는 24시간 버전을 표시합니다.
  2. 두 구성요소를 같은 위치에 배치합니다.
  3. 조건부 선에 12시간 및 24시간 조건을 추가합니다.
  4. 첫 번째 12시간 레이어 디지털시계를 12시간 형식으로 표시하고 24시간 레이어는 24시간 형식으로 표시하도록 기간을 설정합니다.

시간 제어

시간 제어 슬라이더를 사용하면 시계 화면이 어떻게 작동하는지 확인할 수 있습니다. 이 슬라이더를 사용하면 미리보기 창에서 시계 화면이 하루 동안 어떻게 변경되는지 미리 볼 수 있습니다. 특정 시간으로 드래그하는 데도 이 슬라이더를 사용하며, 재생 및 빨리 감기 버튼으로 시계 화면 애니메이션을 확인합니다.

time-control

걸음 수

걸음 수에 따라 동적으로 변경되도록 시계 화면을 설계할 수 있습니다. 예를 들어 달성한 일일 걸음 수의 비율에 따라 변경되는 시계 화면을 만들 수 있습니다.

속성 창

각 구성요소에는 수정 가능한 속성이 다양하게 있습니다. 예를 들어 디지털 시계의 숫자 색상을 변경하거나 시곗바늘이 시나 분, 초를 측정할지 선택할 수 있습니다.

속성

작업 패널

속성 창 내 작업 패널을 사용하여 시계 화면과 상호작용할 수 있습니다. 사용자는 구성요소를 탭하여 이미지를 변경하거나 다른 앱을 열거나 심박수를 측정할 수 있습니다.

action-panel

스타일

스타일 탭을 사용하여, 선택한 레이어의 스타일을 변경하세요. 이미지, 멀티미디어 이미지, 색인, 시곗바늘 구성요소의 스타일을 추가할 수 있습니다. 최대 30개의 테마 색상과 10개의 이미지를 추가할 수 있습니다. 예를 들어 특정 시침, 분침, 초침 이미지를 시곗바늘 스타일로 추가할 수 있습니다.

스타일 스타일 스타일

다음 이미지와 같이 '테마 적용' 아이콘을 선택하여 테마 색상과 스타일을 선택한 레이어에 적용합니다.

스타일

색상

구성요소에 지정된 색상을 적용하거나 시계 화면의 테마 색상을 저장합니다. 정보 표시의 경우 초기 색상 테마는 그레이 스케일입니다.

이미지 모양

다음 설정을 사용하여 이미지 모양을 수정합니다.

  • 색조: 색상의 색조를 제어하는 슬라이더입니다.
  • 채도: 이미지 색상의 선명도를 제어하는 슬라이더입니다.
  • 밝기: 이미지 색상을 밝게 하는 슬라이더입니다.

텍스트 모양

텍스트 모양 탭을 사용하여 텍스트 정렬 및 글꼴 스타일을 설정합니다. 프로젝트 설정에서 비트맵 글꼴 추가를 선택하여 텍스트를 장식합니다. 프로젝트에 추가된 비트맵 글꼴 중에서 기본 글꼴 크기를 사용하려면 기본 글꼴 크기 적용 체크박스를 선택합니다.

text-style

실행

WFS 내 실행 패널에서 시계 화면을 실행할 수도 있습니다. WFS 내에서 시간이나 날짜, 기기 배터리, 걸음 수, 심박수, GYRO 값을 조정하여 다양한 상황에서 시계 화면이 어떻게 표시되는지 테스트할 수 있습니다. 실행 미리보기는 활성 또는 상시 사용 설정으로 설정할 수 있습니다. 상시 사용 설정을 사용하면 현재 픽셀 비율 값과 분석 버튼도 표시됩니다.

실행 run-always-on

기기에서 실행을 사용하여 시계 화면을 테스트하세요.

자세한 내용은 시계 화면 테스트를 참고하세요.