워치페이스 스튜디오 Watchface Studio く 애플리케이션 정보 개발 및 유통 Wear OS Powered by Samsung 다운로드(Wear OS 포함) API 28이상 |
[clearfix]
워치페이스 스튜디오는 Wear OS 스마트워치 에코시스템을 위한 워치페이스를 생성할 수 있는 그래픽 제작 도구입니다. 여기에는 Wear OS Powered by Samsung을 실행하는 Galaxy Watch4와 같은 시계가 포함됩니다. 이미지와 구성 요소를 추가하고 시계 무브먼트를 구성하는 간단하고 직관적인 방법을 제공합니다. 연결된 장치에서 시계 모드를 테스트할 수도 있습니다.
Watch Face Studio는 Galaxy Watch 4 및 Wear OS를 대상으로 API 레벨 28 이상을 실행하는 기타 시계 장치의 시계 모드를 지원합니다.
Samsung Developers
Watch Face Studio는 Galaxy Watch 4 및 Wear OS를 대상으로 API 레벨 28 이상을 실행하는 기타 시계 장치의 시계 모드를 지원합니다.
Samsung Developers
1. 개요
워치페이스 스튜디오(Watchface Studio)는 삼성전자의 Wear OS Powered by Samsung 워치페이스 디자인 툴이다.2. 상세
워치페이스 스튜디오는 삼성의 One UI Watch 워치페이스 제작 툴이다. Wear OS Powered by Samsung 으로 구동되는 갤럭시 워치 시리즈 기기들을 대상으로 만들어졌지만 통합 플렛폼을 사용하기 때문에 API 28 이상을 만족시키는 다른 Wear OS 워치에서도 자유롭게 사용이 가능하다. 전작인 기어 워치 디자이너와 비교했을때 상당한 최적화를 이뤄낸 것이 특징으로 딜레이나 오류 없이 복잡한 컴플리케이션도 만들 수 있다. 포토샵을 다룰 줄 안다면 텍스트 코딩 없이
처음부터 끝까지 워치페이스를 만들어낼 수 있다.
삼성 디벨로퍼스에서 다운로드 받아서 쓸 수 있다.
전작과 비교했을때 컴플리케이션 기능이 기본으로 탑재되어 프로그레스 바, 테마 등을 만드는데 필요한 노력이 확연히 줄어들었으며 스토어에 앱 형태로 업로드하지 않아도 워치페이스 파일만 장치에 직접 입력하는것도 가능하다.
Wear OS Powered by Samsung의 대표 워치페이스 제작 프로그램이지만 사실상 Wear OS 대표 워치페이스 제작 프로그램으로 삼성이 만들었음에도 불구하고 구글 공식 레퍼런스에서 밀어주고 있다.
3. 사용법
3.1. 갤럭시 워치 스튜디오 컨버터
갤럭시 워치 스튜디오로 만든 파일을 워치페이스 스튜디오 포멧으로 바꿀 수 있다.3.2. 시계화면 만들기
안드로이드 디벨로퍼 가이드라인3.2.1. 도구
WFS에는 다음 도구가 포함되어 있습니다.구성요소 추가: 시계 화면에 추가할 수 있는 구성요소 목록이 열립니다.
앞으로 / 뒤로: 선택한 구성요소를 앞으로 또는 뒤로 이동합니다.
그룹화/그룹화 해제: 여러 구성요소를 함께 그룹화하여 하나의 구성요소로 제어합니다.
마스크: 맨 아래 레이어의 도형 윤곽선을 기반으로 다른 레이어의 전체 또는 일부를 가릴 수 있는 도구입니다.
빌드: 빌드 대화상자가 열립니다.
기기에서 실행: 기기에서 시계 화면을 미리 보는 대화상자가 열립니다.
3.2.2. 구성요소
시계 화면에 원하는 대로 다양한 구성요소를 추가합니다. 구성요소에 맞춤설정된 디자인 소스를 사용할 수도 있습니다. 예를 들어 텍스트 구성요소로 심박수나 걸음 수 데이터를 표시하거나, 맞춤 이미지를 추가하여 특정 앱을 실행할 수 있습니다.3.2.2.1. 시계 화면 캔버스
시계 화면 하단 레이어의 캔버스 색상을 설정합니다.3.2.2.2. 텍스트
텍스트 필드는 기본적으로 일반 텍스트입니다. 일반 텍스트는 정적이며 변경되지 않습니다. 텍스트 필드의 속성 창에서 텍스트 필드를 일반 텍스트에서 데이터 텍스트로 변경할 수 있습니다. 데이터 텍스트는 변경되며 태그를 기반으로 채워집니다.곡선 텍스트 적용 옵션을 선택하여 시계 화면에 따라 곡선을 그리는 텍스트를 만듭니다.
너비(W)와 높이(H)를 설정하여 텍스트의 곡선을 결정합니다. W와 H를 변경하면 텍스트 구성요소의 크기가 자동으로 변경됩니다. 텍스트의 위치를 확인하려면 범위 미리 설정 중 하나를 선택합니다. 시작 및 각거리를 지정하여 범위를 추가로 만들 수 있습니다. 텍스트 방향을 시계 방향 또는 시계 반대 방향으로 설정합니다.
3.2.2.3. 도형
타원형과 직사각형을 비롯한 다양한 도형을 추가합니다.3.2.2.4. 이미지
WFS는 맞춤 이미지 가져오기를 지원합니다.3.2.2.5. 애니메이션
애니메이션에 사용할 이미지 시퀀스를 가져옵니다.1. Adobe Flash 또는 Adobe Premiere와 같은 디자인 프로그램으로 자체 애니메이션 시퀀스를 만듭니다.
구성요소 추가 > 애니메이션'을 클릭하여 시계 화면에 애니메이션 파일을 추가합니다.
2. 파일 브라우저에서 이미지 시퀀스를 선택하고 업로드를 클릭합니다.
3. 각 이미지의 순서를 변경하거나 이미지를 삭제하거나 추가하여 애니메이션을 수정합니다.
4. 트리거 값을 설정하여 애니메이션 재생 시점을 결정합니다.
5. 트리거 값을 WatchFace on으로 설정하면 시계 화면이 표시되는 즉시 애니메이션이 시작됩니다. 다른 옵션으로는 탭, 매초, 매분, 매시간이 있습니다. 지연을 사용하고 시간(초)을 입력하여 시작을 지연시킬 수도 있습니다.
자동 재생: 애니메이션이 완료되면 화면이 꺼지는 등 중단이 발생할 때까지 애니메이션을 즉시 반복합니다.
반복 지연: 반복되는 애니메이션 실행 사이에 지연을 설정합니다.
재생 다시 시작: 알림이나 전화 수신과 같은 중단으로 인해 재생이 중지될 때 애니메이션을 다시 시작할지 아니면 처음부터 시작할지 결정합니다.
재생 전에 숨기기: 재생이 트리거될 때까지 애니메이션을 숨길지 결정합니다.
완료 후 숨기기: 재생이 완료될 때 애니메이션을 숨길지 결정합니다.
3.2.2.6. 멀티미디어
AGIF 또는 Lottie, WebP 파일과 같이 이미 애니메이션 처리된 이미지를 가져옵니다.1. 구성요소 추가 > 멀티미디어를 클릭합니다.
2. 파일 브라우저에서 파일을 선택하고 업로드를 클릭합니다.
3. 트리거 값을 애니메이션의 시작 시간으로 설정합니다.
4. 멀티미디어 이미지의 파일 크기, 해상도, 프레임 번호는 기기 성능과 배터리 소모에 영향을 미칠 수 있다는 점에 유의하세요. 멀티미디어 이미지는 작동 중에 비동기식으로 로드되며 시계의 기능 및 이미지의 다양한 특성에 따라 재생될 때 지연이 발생할 수 있습니다.
3.2.2.7. 아날로그 시곗바늘
아날로그 시계 시침, 분침, 초침을 추가하세요. 파일 브라우저를 열고 각 시곗바늘에 가져올 이미지 파일을 선택합니다.3.2.2.8. 디지털시계
디지털시계 옵션에는 날짜와 시간이 포함됩니다. 날짜를 추가할 때는 날짜 태그를 사용하여 텍스트 구성요소를 추가합니다. 기본 날짜 표시는 DAY_WEEK_S MON_S DAY_1_31_Z입니다. 시간을 추가할 때는 디지털시계 태그를 사용하여 텍스트 구성요소를 추가합니다. 기본 디지털 시간 표시는 HOUR_1_12_Z:MIN_Z:SEC_Z입니다.3.2.2.9. 진행률 표시줄
시계 화면에 진행률 표시줄을 추가하여 다양한 활동을 추적하세요. 진행률 표시줄 구성요소 옵션에는 선형 및 원형 진행률 표시줄이 포함됩니다. 6가지 범위 미리 설정 중 하나를 선택하여 진행률 표시줄의 위치를 결정합니다. 시작 및 각거리를 지정하여 범위를 추가로 만들 수 있습니다. 진행률 표시줄의 방향을 시계 방향이나 시계 반대 방향으로 설정합니다.3.2.3. 구성요소 관리
WFS 도구를 사용해 구성요소를 관리하세요. 다음 섹션에 설명된 대로 시계 화면에서 구성요소를 추가, 그룹화, 그룹화 해제, 정렬할 수 있습니다.3.2.3.1. 구성요소 추가
구성요소를 추가하면 캔버스의 기본 위치에 구성요소가 배치됩니다. 구성요소는 자동으로 선택되므로 쉽게 수정할 수 있습니다.3.2.3.2. 구성요소 그룹화/그룹화 해제
그룹은 구성요소가 하나 이상 모인 조합입니다. 모든 구성요소는 그룹화할 수 있습니다. 그룹은 그룹화 해제될 수 있습니다.3.2.3.3. 구성요소 마스크/마스크 해제
맨 아래 레이어의 도형에 따라 마스크 그룹의 표시 영역이 달라집니다. 그 위에 있는 레이어는 맨 아래 레이어의 도형 윤곽선을 통해서만 표시됩니다. 예를 들어 맨 아래 레이어에 삼각형 이미지를 배치하고 그 위 레이어에 이미지와 애니메이션을 배치하면 이미지와 애니메이션은 맨 아래 레이어의 삼각형 윤곽선을 통해서만 표시됩니다.3.2.3.4. 그룹
마스크 그룹을 만들려면 다음 단계를 따르세요.1. 그룹화할 레이어를 선택합니다.
2. 핫키 영역에서 마스크를 선택하거나 레이어를 마우스 오른쪽 버튼으로 클릭하고 마스크를 선택합니다.
레이어 창에서 마스크 그룹을 해제하려면 다음 단계를 따르세요.
1. 마스크 그룹을 선택합니다.
2. 핫키 영역에서 마스크 해제를 선택하거나 레이어를 마우스 오른쪽 버튼으로 클릭하고 마스크 해제를 선택합니다.
- 참고: 마스크 그룹의 맨 아래 레이어가 삭제되면 마스크 그룹이 자동으로 해제됩니다.
3.2.4. 미리보기 창
미리보기 창은 시계 화면을 설계할 때 주로 작업하는 영역입니다. 미리보기 창에 표시된 캔버스에 모든 시계 화면 요소를 추가합니다. 캔버스에서 요소를 위치로 드래그하여 요소의 크기를 조절하고 정렬하고 회전합니다.3.2.5. 레이어 창
레이어 창에는 미리보기 창에 표시된 구성요소 및 그룹 목록이 표시됩니다. 각 구성요소에는 기본적으로 자체 레이어가 있습니다.검색: 이름으로 레이어를 검색합니다.
표시 / 숨기기: 레이어를 표시하거나 숨길 수 있습니다. 숨겨진 레이어는 미리보기 창에서 재생되지 않습니다.
테마 색상: 테마 색상을 사용 또는 사용 중지로 전환합니다.
이름 바꾸기: 이름 필드를 더블클릭하고 새 이름을 입력하여 레이어 이름을 변경합니다.
- 참고: 기본적으로 새 구성요소를 추가하면 새 레이어가 목록 상단에 배치됩니다. 그룹 내에 추가된 레이어는 그룹 상단에 배치됩니다.
레이어를 마우스 오른쪽 버튼으로 클릭하면 다음과 같은 메뉴 옵션이 표시됩니다.
잠금/잠금 해제: 캔버스에서 이동하지 않도록 레이어를 잠급니다.
그룹화/그룹화 해제: 여러 구성요소를 함께 그룹화하여 하나로 제어합니다.
마스크/마스크 해제: 맨 아래 레이어 위의 레이어가 맨 아래 레이어의 도형 윤곽선을 통해서만 표시되도록 합니다.
이미지 교체(이미지에만 해당): 한 레이어의 이미지 파일을 다른 레이어로 변경합니다.
레이어 색상: 레이어에 색상 라벨을 추가하여 레이어를 구별합니다.
3.2.5.1. 조건부 선
조건부 선을 사용하면 시계 화면에 구성요소를 표시하거나 숨기고 구성요소 동작을 제어할 수 있습니다. 조건부 선을 사용하여 시간이나 걸음 수, 배터리와 같은 특정 조건에 따라 시계 화면의 모양을 변경하세요. 프레임 영역을 마우스 오른쪽 버튼으로 클릭하고 루프를 선택하여 조건부가 반복되도록 설정합니다.표시되지 않는 레이어는 성능을 저하시키거나 배터리 수명에 영향을 미치지 않습니다.
다음 조건에 응답하도록 시계 화면을 설정할 수 있습니다.
3.2.5.1.1. 시간
시계 화면은 시간 간격에 따라 동적으로 변경될 수 있습니다. 예를 들어 시계 화면은 낮에는 밝다가 시간이 지나면서 점점 어두워질 수 있습니다. 시간, 분, 초 단위로 측정되도록 시간을 설정할 수 있습니다.다음 단계에 따라 시간 조건을 추가하세요.
1. 레이어를 만듭니다.
2. 기간을 설정하여 각 레이어의 표시 시점을 제어합니다. 시작 표시줄을 선택한 후 기간을 선택합니다.
3. 시작 표시줄을 클릭하고 끝 표시줄로 드래그합니다.
4. 2단계와 3단계를 반복하여 레이어마다 기간을 설정합니다.
5. 실행을 클릭하여 변경사항을 미리 봅니다.
3.2.5.1.2. 걸음 수
걸음 수에 따라 동적으로 변경되도록 시계 화면을 설계할 수 있습니다. 예를 들어 달성한 일일 걸음 수의 비율에 따라 변경되는 시계 화면을 만들 수 있습니다.- 참고: 각 레이어는 한 가지 유형의 조건에만 응답합니다. 따라서 레이어가 걸음 수에 따라 변경되도록 설정하면 다른 조건의 기존 모니터링이 중지됩니다.
3.2.6. 속성 창
각 구성요소에는 수정 가능한 속성이 다양하게 있습니다. 예를 들어 디지털 시계의 숫자 색상을 변경하거나 시곗바늘이 시나 분, 초를 측정할지 선택할 수 있습니다.3.2.6.1. 작업 패널
속성 창 내 작업 패널을 사용하여 시계 화면과 상호작용할 수 있습니다. 사용자는 구성요소를 탭하여 이미지를 변경하거나 다른 앱을 열거나 심박수를 측정할 수 있습니다.3.2.6.2. 스타일
스타일 탭을 사용하여, 선택한 레이어의 스타일을 변경하세요. 이미지, 멀티미디어 이미지, 색인, 시곗바늘 구성요소의 스타일을 추가할 수 있습니다. 최대 30개의 테마 색상과 10개의 이미지를 추가할 수 있습니다. 예를 들어 특정 시침, 분침, 초침 이미지를 시곗바늘 스타일로 추가할 수 있습니다.- 색상
구성요소에 지정된 색상을 적용하거나 시계 화면의 테마 색상을 저장합니다. 정보 표시의 경우 초기 색상 테마는 그레이 스케일입니다.
- 이미지 모양
다음 설정을 사용하여 이미지 모양을 수정합니다.
색조: 색상의 색조를 제어하는 슬라이더입니다.
채도: 이미지 색상의 선명도를 제어하는 슬라이더입니다.
밝기: 이미지 색상을 밝게 하는 슬라이더입니다. - 참고: 이러한 기능은 추가된 이미지의 픽셀을 대체하므로 테마 색상 적용과 같은 다른 색상 기능보다 먼저 처리됩니다.
- 텍스트 모양
텍스트 모양 탭을 사용하여 텍스트 정렬 및 글꼴 스타일을 설정합니다. 프로젝트 설정에서 비트맵 글꼴 추가를 선택하여 텍스트를 장식합니다. 프로젝트에 추가된 비트맵 글꼴 중에서 기본 글꼴 크기를 사용하려면 기본 글꼴 크기 적용 체크박스를 선택합니다.
3.2.7. 실행
WFS 내 실행 패널에서 시계 화면을 실행할 수도 있습니다. WFS 내에서 시간이나 날짜, 기기 배터리, 걸음 수, 심박수, GYRO 값을 조정하여 다양한 상황에서 시계 화면이 어떻게 표시되는지 테스트할 수 있습니다. 실행 미리보기는 활성 또는 상시 사용 설정으로 설정할 수 있습니다. 상시 사용 설정을 사용하면 현재 픽셀 비율 값과 분석 버튼도 표시됩니다.3.3. 태그 표현식
안드로이드 디벨로퍼 가이드태그 표현식을 사용하여 고유하고 동적인 시계 화면을 만들 수 있다. 태그 표현식은 태그 값(시계 데이터)을 기반으로 구성요소의 회전, 배치, 불투명도를 변경할 수 있는 조건이다(예: 날짜 및 시간, 배터리 상태 또는 걸음 수). 태그 값이 변경되면 시계 화면이 동적으로 변경된다.
구성요소의 회전, 배치, 불투명도 속성 입력란에 태그 표현식을 직접 입력해 사용한다. 이때 태그는 대괄호로 묶어야 한다. 태그 스크립팅 팝업을 열려면 태그 버튼을 클릭해야 한다. 스크립팅 팝업에 긴 태그 표현식을 입력하여 원하는 데이터를 쉽게 검색할 수 있다.
3.3.1. 시간
3.3.2. 설정 정보
3.3.3. 기기 정보
3.3.4. 센서 데이터
3.3.5. 건강 데이터
워치가 잠겨있으면 표시되지 않습니다.
3.3.6. 달의 위상
MOON_PO
- 0 ~ 0.5: 신월
- 0.5 ~ 6.5: 저녁 초승달
- 7: 상현
- 7.5 ~ 13.5: 상현망
- 14: 보름달
- 14.5 ~ 20.5: 하현망
- 21: 하현
- 21.5 ~ 27.5: 아침 초승달
- 27.5 ~ 28: 신월
MOON_TY
- 0: 신월
- 1: 저녁 초승달
- 2: 상현
- 3: 상현망
- 4: 보름달
- 5: 하현망
- 6: 하현
- 7: 아침 초승달
3.3.7. 함수
3.3.8. 연산자
- 산술연산자
- 관계연산자
- 논리연산자
논리 연산자는 둘 이상의 관계 연산의 결과를 결합하고 값 1(true) 또는 0(false)을 반환합니다. 태그 표현식은 두 가지 유형의 논리 연산(AND 및 OR)을 지원합니다.
AND – 별표(*)로 표시됩니다.
AND 논리 연산자가 값 1(true)을 반환하려면 두 관계 연산이 모두 true여야 합니다. 그렇지 않은 경우 반환 값은 0(false)입니다.
- 별표는 곱셈 산술 연산자와 AND 논리 연산자를 나타냅니다.
OR – 더하기 기호(+)로 표시됩니다.
OR 논리 연산자가 값 1(true)을 반환하려면 하나 이상의 관계 연산이 true여야 합니다. 두 관계 연산이 모두 false인 경우 반환 값은 0(false)입니다.
- 더하기 기호는 덧셈 산술 연산자와 OR 논리 연산자를 나타냅니다.
3.4. 업로드
3.4.1. 기기로 디버깅
안드로이드 디벨로퍼 가이드많은 경우 실제 시계 또는 페어링된 휴대기기에서 시계 화면을 테스트하는 것이 유용합니다. 다음 섹션에서는 실제 기기를 연결하여 시계 화면을 테스트하는 방법을 설명합니다.
기기 연결
휴대전화를 통해 연결하기 전에 시계와 휴대전화에서 모두 디버깅을 사용 설정합니다. 휴대전화에서 설정 > 개발자 옵션 > USB 디버깅으로 이동합니다. 자세한 내용은 시계에서 개발자 옵션 사용 설정을 참고하세요. 휴대전화와 시계가 컴퓨터와 동일한 Wi-Fi 네트워크에 연결되어 있는지 확인합니다.
참고: Galaxy 휴대기기에서 개발자 옵션을 표시하려면 설정 > 기기 정보 > 소프트웨어 정보로 이동하세요. 그런 다음 화면에 '개발자 옵션 사용 설정됨'이 표시될 때까지 빌드 번호를 탭합니다. 다음 단계에 따라 세 기기를 모두 연결합니다.
1. 블루투스를 사용하여 시계를 휴대전화에 페어링합니다.
2. 적절한 케이블을 사용하여 휴대전화를 컴퓨터에 연결합니다.
3. 휴대폰에서 블루투스를 통한 디버깅을 엽니다. 고급 설정에서 블루투스를 통한 디버깅을 사용 설정합니다.
1. 메뉴 바에서 프로젝트 > 기기에서 실행을 클릭합니다.
2. 기기 목록에서 페어링된 휴대전화를 선택합니다.
3. 기기 목록에서 페어링된 시계를 선택하고 WFS에 연결합니다.
- 시계가 기기 목록에 표시되지 않으면 검색을 클릭하고 컴퓨터에서 기기를 검색할 때까지 기다립니다. 기기를 찾지 못하면 IP 주소 입력을 클릭하고 수동으로 시계의 IP 주소를 입력한 후 다시 연결을 시도합니다.
3.4.2. 스토어에 업로드
안드로이드 디벨로퍼 가이드Play 스토어에 시계 화면을 업로드하려면 빌드를 구성하고 패키지 파일을 생성합니다. 패키지 파일과 시계 화면을 함께 Play 스토어에 업로드해야 합니다.
1. 빌드 팝업을 엽니다.
2. 프로젝트 > 빌드를 클릭합니다.
3. 키 비밀번호를 입력합니다.
4. 미리보기 이미지를 설정합니다. 512x512px 또는 360x360px(인치당 96픽셀)인 이미지를 사용하는 것이 좋습니다. 지원되는 파일 형식은 .PNG, .JPG, .JPEG, .GIF입니다.
5. 빌드를 클릭합니다.
인증서 생성
모든 시계 화면 디자이너는 인증서가 필요합니다. 인증서를 생성하려면 다음 단계를 완료하세요.
1. 프로젝트 > 빌드를 클릭합니다.
- 처음 사용하는 경우 새 키 만들기를 클릭합니다. 재사용자의 경우 키 저장소 경로에서 기존 키를 검색합니다.
3. 키 저장소 정보, 키 정보, 로그인 정보를 입력합니다.
4. 확인을 클릭합니다.
시계 화면 업로드
Play 스토어에 시계 화면을 업로드하려면 다음 단계를 완료하세요.
1. 메뉴 바에서 프로젝트 > 업로드를 클릭합니다.
2. Play 스토어 사이트에서 로그인을 생성합니다(아직 만들지 않은 경우).
3. 시계 화면에 관한 필수 정보를 작성하고 시계 화면 스크린샷을 포함합니다.
4. 업로드를 시작합니다.
4. 지원
4.1. 지원 기기
- Wear OS Powered by Samsung 을 탑재한 모든 갤럭시 워치 시리즈
- API 28 이상을 지원하는 모든 Wear OS 스마트워치
5. 기타
5.1. 공식 영상
| Watch Face Studio Introduction |