Wear OS용 워치 페이스 빌드
컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

1. 시작하기 전에

Wear OS용 워치 페이스를 만들려면 개발자는 표현력이 뛰어나고 성능이 우수한 워치 페이스를 만들 수 있는 XML 기반 형식인 워치 페이스 형식을 사용해야 합니다.

이 Codelab은 XML을 사용하여 워치 페이스를 직접 제작하려는 사용자 또는 자체 디자인 도구를 빌드하는 데 도움이 되는 형식을 더 잘 이해하려는 사용자를 대상으로 합니다.

그래픽 도구를 사용하여 자체 워치 페이스를 만들려면 워치 페이스 스튜디오와 같은 기존 도구를 살펴보는 것이 좋습니다.

기본 요건

XML 사용 경험

실행할 작업

이 Codelab에서는 다음에 관해 알아봅니다.

WFF 워치 페이스 패키징 방식
대기 모드를 포함하여 워치 페이스를 만드는 방법
도형과 같은 요소 추가
워치 페이스에 데이터 소스 통합
워치 페이스 문제 해결 방법

선택할 수 있는 다양한 색상 테마와 내장된 걸음 수, 날짜 표시기가 있는 맞춤설정 가능한 워치 페이스를 빌드합니다.

필요한 항목

Android 스튜디오 Meerkat 이상: Android 스튜디오를 직접 사용할 필요는 없지만, 사용될 Android 빌드 도구 및 플랫폼 도구가 설치되어 있는지 확인하는 가장 쉬운 방법입니다.
개발자 옵션이 사용 설정된 Wear OS 에뮬레이터 또는 실제 Wear OS 시계

2. 워치 페이스 형식 프로젝트 구조 이해

Codelab 파일 다운로드

시작하려면 여기에서 Codelab 파일을 다운로드하세요.

$ git clone https://github.com/android/codelab-watch-face-format

또는 저장소를 ZIP 파일로 다운로드할 수 있습니다.

watch-face-format 디렉터리에는 start 및 finish라는 두 개의 프로젝트가 있습니다. start 프로젝트를 사용하게 되지만 완성된 Codelab이 포함된 finish 프로젝트를 언제든지 살펴볼 수 있습니다.

워치 페이스 형식 프로젝트의 기본 구조를 살펴보겠습니다. 원하는 편집기를 사용하거나 Android 스튜디오에서 File > Open...을 사용하고 start 디렉터리를 선택하여 start 프로젝트 자체를 열 수 있습니다.

start/watchface/src/main 디렉터리에는 다음과 같은 파일이 있습니다. 각 파일의 역할을 살펴보겠습니다.

파일	설명
`AndroidManifest.xml`	일반 Android 앱과 마찬가지로 이 파일에는 워치 페이스 및 이를 빌드하는 데 필요한 항목에 관한 필수 정보가 포함되어 있습니다.
`res/xml/watch_face_info.xml`	워치 페이스 정보 파일에는 미리보기 이미지를 찾는 방법, 워치 페이스를 맞춤설정할 수 있는지 여부와 같은 워치 페이스에 관한 메타데이터가 포함됩니다.
`res/raw/watchface.xml`	이 파일에는 워치 페이스 자체의 정의가 포함되어 있습니다. 정의가 두 개 이상 있을 수 있지만 이 파일이 기본적으로 사용됩니다.
`res/drawable/preview.png`	모든 워치 페이스에는 시스템에서 사용하는 미리보기 이미지가 필요합니다. 이 프로젝트를 빌드하려면 start/ 폴더에 빈 미리보기가 포함되어야 합니다. 나중에 업데이트할 예정입니다.
`res/drawable/hour.pngres/drawable/minute.pngres/drawable/second.png`	워치 페이스에 사용할 시계 바늘입니다.
`res/values/strings.xml`	Android 앱과 마찬가지로 워치 페이스에서 사용할 수 있는 문자열을 포함합니다.

코드는 어디에 있나요?

프로젝트에 실제로 코드가 없는 것을 확인할 수 있습니다. AndroidManifest.xml 파일을 제외한 프로젝트의 모든 파일은 리소스 디렉터리인 res/에 있습니다. 이는 워치 페이스 형식 워치 페이스에는 코드를 포함할 수 없기 때문입니다. 예를 들어 Kotlin 또는 Java 코드를 포함하려고 하면 Play 스토어에서 허용되지 않습니다.

Wear OS 시스템은 이러한 리소스를 읽고 워치 페이스를 빌드하고 실행합니다. 즉, 런타임이나 다른 로직이 필요하지 않으므로 개발 작업이 줄어듭니다.

3. 워치 페이스 빌드

작동하는 워치 페이스를 만들기 위해 위의 각 파일을 업데이트하겠습니다.

매니페스트 준비

패키지를 워치 페이스 형식 워치 페이스로 식별하려면 매니페스트에서 다음 두 가지를 선언해야 합니다.

프로젝트에 코드가 없습니다.
사용 중인 워치 페이스 형식 버전입니다.

먼저 <application> 요소를 업데이트하여 hasCode 속성을 추가합니다.

<application
    android:label="@string/watch_face_name"
    android:hasCode="false">

그런 다음, 이 워치 페이스에 사용되는 워치 페이스 형식 버전을 지정하는 <application> 요소에 <property>를 추가합니다.

<property
    android:name="com.google.wear.watchface.format.version"
    android:value="1" />

`watch_face_info` 파일 정의

watch_face_info.xml 파일에는 미리보기 이미지의 위치를 지정하는 필수 요구사항이 하나 있습니다. 이 프로젝트에서는 res/drawable/preview.png에 미리보기 이미지를 제공했습니다. 이 파일은 비어 있지만 나중에 완성된 워치 페이스의 실제 스크린샷으로 업데이트할 예정입니다.

이 Codelab에서는 워치 페이스를 맞춤설정할 수 있도록 할 것입니다. <Editable> 요소를 사용하여 watch_face_info.xml file에서도 이를 선언합니다.

다음 요소를 추가하도록 res/xml/watch_face_info.xml을 업데이트합니다.

<Preview value="@drawable/preview" />
<Editable value="true" />

워치 페이스 형식 XML 작성

실제 워치 페이스의 정의는 res/raw/watchface.xml에 포함되어 있습니다. 편집기에서 이 파일을 검사합니다. <WatchFace> 요소가 워치 페이스의 너비와 높이를 450x450으로 정의합니다. 이 좌표 공간은 파일의 나머지 부분에서 사용되고 워치 페이스가 실행되는 실제 픽셀 크기와 관계없이 사용되며 적절하게 크기를 조절합니다.

XML은 다음과 같습니다.

<?xml version="1.0"?>
<WatchFace width="450" height="450">
  <Scene>
    <PartText x="0" y="0" width="450" height="450">
      <Text>
        <Font family="SYNC_TO_DEVICE" size="48">Hello, World!</Font>
      </Text>
    </PartText>
  </Scene>
</WatchFace>

지금은 이 정의가 시계에 'Hello, World!'를 표시할 뿐입니다. 아직 시간은 없습니다. 하지만 이 문제는 나중에 해결합니다. 워치 페이스를 빌드하고 기기에 설치하는 방법을 살펴보겠습니다.

워치 페이스 빌드 및 배포

명령줄에서 start 디렉터리에 있는지 확인하고 다음 명령어를 실행합니다.

./gradlew installDebug

또는 Windows에서는 다음을 실행합니다.

gradlew.bat installDebug

이렇게 하면 워치 페이스가 빌드되고 기기에 설치됩니다. 워치 페이스 화면을 길게 누르고 Codelab 워치 페이스를 찾습니다. 또는 명령줄에서 워치 페이스를 설정하려면 다음을 사용합니다.

adb shell am broadcast -a com.google.android.wearable.app.DEBUG_SURFACE --es operation set-watchface --es watchFaceId com.example.codelab

이제 시계 또는 에뮬레이터에 워치 페이스가 표시됩니다. 축하합니다.

4. 시간 추가

워치 페이스 형식은 아날로그 및 디지털 시계 모두를 표시할 수 있습니다. 단일 워치 페이스에 둘 다 또는 여러 개를 표시할 수도 있습니다.

< AnalogClock> 요소를 사용하여 아날로그 시계를 추가하는 방법을 살펴보겠습니다. 먼저 watchface.xml 파일에서 전체 < PartText> 요소를 삭제하고 다음으로 대체합니다.

<AnalogClock x="0" y="0" width="450" height="450">
  <!-- TODO: Add shadows here later -->
  <HourHand resource="hour"
      x="215" y="50" width="20" height="190"
      pivotX="0.5" pivotY="0.921" >
  </HourHand>
  <MinuteHand resource="minute"
      x="217" y="25" width="16" height="220"
      pivotX="0.5" pivotY="0.9">
  </MinuteHand>
  <SecondHand resource="second"
      x="221" y="15" width="8" height="245"
      pivotX="0.5" pivotY="0.857">
    <Variant mode="AMBIENT" target="alpha" value="0" />
    <Sweep frequency="15" />
  </SecondHand>
</AnalogClock>

<AnalogClock> 요소의 높이와 너비는 450이므로 전체 화면을 차지합니다. 또한 < HourHand>, < MinuteHand>, < SecondHand>라는 세 가지 하위 요소가 있습니다. 이를 정의하는 방법에 관한 다음 사항에 유의하세요.

리소스: 이러한 각 하위 요소에는 드로어블 애셋에 해당하는 리소스 속성이 있습니다. 예를 들어 res/drawable에는 <HourHand> 요소에서 사용하는 hour.png 파일이 있습니다. @drawable을 지정할 필요가 없습니다.
피벗: 시침과 분침은 자동으로 회전하지만 pivotX 및 pivotY는 피벗이 발생해야 하는 위치를 지정합니다. 예를 들어 pivotY는 다음과 같이 계산됩니다.

변형: <SecondHand>에는 < Variant> 하위 요소가 포함되어 있습니다. 이렇게 하면 워치 페이스가 대기 모드일 때만 1분마다 업데이트되므로 초침이 숨겨집니다.

이제 다음을 실행하여 워치 페이스를 다시 빌드하고 기기 또는 에뮬레이터에 배포합니다.

./gradlew installDebug

이제 작동하는 시계가 생겼지만 아직 개선할 수 있는 부분이 많습니다.

5. 색상 및 테마 추가

워치 페이스의 재미는 맞춤설정하고 표현할 수 있다는 데 있습니다.

현재 워치 페이스는 흰색으로만 되어 있어 약간 단조롭습니다. 색상을 추가해 보겠습니다. 뿐만 아니라 색상 테마를 맞춤설정할 수 있도록 만들어 보겠습니다.

ColorConfiguration 만들기

먼저 워치 페이스에서 사용할 수 있는 색상 테마를 정의합니다. watchface.xml에서 텍스트 를 찾아 다음으로 바꿉니다.

<UserConfigurations>
  <ColorConfiguration id="themeColor" displayName="color_label" defaultValue="0">
    <ColorOption id="0" displayName="color_theme_0" colors="#ffbe0b #fb5607 #ff006e #8338ec #883c3c3c" />
    <ColorOption id="1" displayName="color_theme_1" colors="#8ecae6 #219ebc #ffb703 #fb8500 #883c3c3c" />
    <ColorOption id="2" displayName="color_theme_2" colors="#ff595e #ffca3a #8ac926 #1982c4 #883c3c3c" />
    <ColorOption id="3" displayName="color_theme_3" colors="#ff0000 #00ff00 #ff00ff #00ffff #883c3c3c" />
    <ColorOption id="4" displayName="color_theme_4" colors="#ff99c8 #fcf6bd #d0f4de #a9def9 #883c3c3c" />
    <ColorOption id="5" displayName="color_theme_5" colors="#1be7ff #6eeb83 #e4ff1a #ffb800 #883c3c3c" />
  </ColorConfiguration>
</UserConfigurations>

이렇게 하면 각 테마에 5가지 색상이 포함된 6가지 색상 테마가 정의됩니다. 각 테마는 colors 속성에 표시된 대로 공백으로 구분된 색상 목록입니다.

각 테마에는 사람이 읽을 수 있는 이름이 필요하므로 res/values/strings.xml 파일에 다음 정의를 추가합니다.

<string name="color_label">Color Theme</string>
<string name="color_theme_0">Bold</string>
<string name="color_theme_1">Magic</string>
<string name="color_theme_2">Breeze</string>
<string name="color_theme_3">Daytime</string>
<string name="color_theme_4">Relaxed</string>
<string name="color_theme_5">Smart</string>

ColorConfiguration 사용

색상 테마를 정의한 후 각 테마에 tintColor 속성을 추가하여 시곗바늘에 이를 적용합니다. 다음과 같이 watchface.xml을 수정합니다.

<HourHand ... tintColor="[CONFIGURATION.themeColor.0]">
...
<MinuteHand ... tintColor="[CONFIGURATION.themeColor.1]">
...
<SecondHand ... tintColor="[CONFIGURATION.themeColor.2]">

<HourHand>는 선택한 테마의 첫 번째 색상을 참조하고 <MinuteHand>는 두 번째 색상을 참조하며 <SecondHand>는 세 번째 색상을 참조합니다.

이전과 같이 워치 페이스를 다시 빌드하고 배포하면 이제 색상이 적용되어 있습니다.

뿐만 아니라 워치 페이스를 길게 누른 다음 설정 버튼을 탭하면 6가지 색상 테마 중에서 선택할 수 있습니다.

6. 배경 색상 추가

이 워치 페이스를 더 눈에 띄게 만들기 위해 몇 가지 작업을 더 할 수 있습니다. 대담한 배경 디자인을 추가해 보겠습니다. 배경은 주로 검은색으로 유지되지만 이러한 색상 추가로 디자인이 한층 고급스러워집니다.

선, 직사각형, 타원, 원호와 같은 기본 도형을 그리기 위한 레이어를 만들 수 있는 워치 페이스 형식 < PartDraw> 요소를 사용합니다.  텍스트를 다음으로 바꿉니다.

<Group x="100" y="100" width="250" height="250" name="background" alpha="127">
  <Variant mode="AMBIENT" target="alpha" value="0" />
  <PartDraw x="0" y="0" width="250" height="250">
    <Ellipse x="0" y="0" width="250" height="250">
      <Fill color="[CONFIGURATION.themeColor.3]" />
    </Ellipse>
    <Ellipse x="50" y="50" width="150" height="150">
      <Fill color="#000000" />
    </Ellipse>
  </PartDraw>
</Group>

<Variant> 요소가 다시 사용됩니다. 이렇게 하면 대기 모드에서 배경 링이 삭제되어 켜진 픽셀 수가 최소화됩니다.

또한 색상 테마를 다시 사용하여 링의 색상을 선택하므로 워치 페이스의 모든 요소에서 스타일을 유지할 수 있습니다.

7. 워치 페이스 유효성 검사

워치 페이스를 더 개선하기 전에 워치 페이스 형식 검사기를 사용하여 개발 프로세스를 간소화하는 방법을 살펴보겠습니다.

검사기는 XML의 정확성을 확인하는 도구로, 워치 페이스를 빌드하고 배포하는 데 드는 시간을 절약할 수 있습니다.

GitHub 저장소에서 검사기 JAR 파일을 다운로드합니다.
watchface.xml 파일에 대해 검사기를 실행합니다.

java -jar wff-validator.jar 1 watchface/src/main/res/raw/watchface.xml

워치 페이스 XML이 유효하면 확인 메시지가 표시되지만 오류가 발견되면 오류 세부정보와 위치가 표시됩니다. 예를 들면 다음과 같습니다.

SEVERE: [Line 18:Column 49]: cvc-complex-type.2.4.a: Invalid content was found starting with element 'PartDrw'

8. 데이터 소스 사용

워치 페이스 형식은 다양한 데이터 소스를 활용하여 워치 페이스를 더 유용하게 만들 수 있습니다.

워치 페이스의 유용성을 높이는 데 도움이 되는 두 가지 일반적으로 사용되는 데이터 소스, 즉 현재 날짜(전날 날짜를 잊어버린 적이 없는 사람이 있을까요?)와 일일 걸음 수를 추가해 보겠습니다.

이러한 각 요소는 텍스트 작업을 실행하는 레이어인 < PartText> 컨테이너에 배치됩니다.

날짜 추가

 텍스트를 다음으로 바꿉니다.

<PartText x="225" y="225" width="225" height="225">
  <Variant mode="AMBIENT" target="alpha" value="0" />
  <TextCircular centerX="0" centerY="0" width="415" height="415" startAngle="180" endAngle="90" align="CENTER" direction="COUNTER_CLOCKWISE">
    <Font family="SYNC_TO_DEVICE" size="28" color="[CONFIGURATION.themeColor.0]">
      <Template>
        <![CDATA[%d %s]]>
        <Parameter expression="[DAY]"/>
        <Parameter expression="[MONTH_S]"/>
      </Template>
    </Font>
  </TextCircular>
</PartText>

위 스니펫에서는 < Template>을 사용하여 두 개의 데이터 소스를 문자열 형식으로 지정합니다. DAY는 1~31 사이의 정수이고 MONTH_S는 이미 문자열이므로 형식 지정 표현식 %d %s를 사용하여 정수와 문자열을 함께 배치합니다.

CDATA 요소로 이를 묶는 것이 좋습니다. 이렇게 하면 공백이 실수로 렌더링에 통합되어 위치 지정 및 정렬에 영향을 미치는 것을 방지할 수 있습니다.

마지막으로, 워치 페이스에 새로 추가된 항목이 기존 테마를 유지하도록 색상 테마를 다시 사용한 방법을 유의해서 살펴보세요.

걸음 수 추가

 텍스트를 다음으로 바꿉니다.

<PartText x="0" y="0" width="225" height="225">
  <Variant mode="AMBIENT" target="alpha" value="0" />
  <TextCircular centerX="225" centerY="225" width="415" height="415" startAngle="270" endAngle="360" align="CENTER" direction="CLOCKWISE">
    <Font family="SYNC_TO_DEVICE" size="28" color="[CONFIGURATION.themeColor.2]">
      <Template>
        <![CDATA[%05d]]>
        <Parameter expression="[STEP_COUNT]"/>
      </Template>
    </Font>
  </TextCircular>
</PartText>

워치 페이스 형식은 다양한 데이터 소스를 지원하며, 걸음 수는 워치 페이스에 추가하여 사용자가 일일 활동과 운동을 추적할 수 있는 유용한 정보입니다.

워치 페이스를 빌드하고 배포하여 다음과 같은 최신 추가 기능을 확인하세요.

9. 마무리 단계 및 미리보기

워치 페이스는 세부적인 부분이 매우 중요하므로 몇 가지 최종적인 마무리 작업을 추가해 보겠습니다.

워치 페이스에 그림자 추가

워치 페이스의 시곗바늘은 다양한 색상으로 잘 어울리지만 워치 페이스에 비해 약간 밋밋해 보입니다. 시곗바늘 뒤에 그림자를 추가하려면 를 다음으로 바꿉니다.

<HourHand resource="hour" x="220" y="55" width="20" height="190"
    pivotX="0.5" pivotY="0.921" tintColor="[CONFIGURATION.themeColor.4]">
  <Variant mode="AMBIENT" target="alpha" value="0" />
</HourHand>
<MinuteHand resource="minute" x="222" y="30" width="16" height="220"
    pivotX="0.5" pivotY="0.9" tintColor="[CONFIGURATION.themeColor.4]">
  <Variant mode="AMBIENT" target="alpha" value="0" />
</MinuteHand>
<SecondHand resource="second" x="226" y="20" width="8" height="245"
    pivotX="0.5" pivotY="0.857" tintColor="[CONFIGURATION.themeColor.4]">
  <Variant mode="AMBIENT" target="alpha" value="0" />
  <Sweep frequency="15" />
</SecondHand>

재미있는 로고 추가

유명한 시계 제조업체마다 워치 페이스에 로고가 있으므로 우리 로고도 추가해 보겠습니다. 당연히 Android 로고를 사용합니다.

하지만 이것은 스마트시계이므로 다른 방식으로 시도해 보겠습니다. 착용자의 손목 각도에 따라 움직일 수 있는 로고를 추가해 보겠습니다.

이렇게 하려면 이미지를 < Group> 요소 내에 배치한 다음 < Transform> 요소를 사용하여 손목의 각도에 따라 <Group> 요소에 회전을 적용합니다. 구조는 다음과 같습니다.

요소의 기본 피벗 지점은 가운데에 있으므로 <Group>의 pivotX 및 pivotY를 조정할 필요가 없습니다. <Group>에 <Transform>을 적용하면 중앙 피벗 지점을 중심으로 <PartImage>가 회전합니다.

<Transform>에서는 X 및 Y 방향의 각도 합계를 나타내는 [ ACCELEROMETER_ANGLE_XY] 데이터 소스를 사용합니다.

를 다음 스니펫으로 바꿉니다.

<Group x="92" y="92" width="266" height="266" name="logo_container">
  <Variant mode="AMBIENT" target="alpha" value="0" />
  <Transform target="angle" mode="BY" value="0.1 * [ACCELEROMETER_ANGLE_XY]" />
  <PartImage x="97" y="0" width="72" height="72"
    tintColor="[CONFIGURATION.themeColor.2]">
    <Image resource="android"/>
  </PartImage>
</Group>

워치 페이스를 다시 배포합니다. 실제 기기를 사용하는 경우 기기를 착용하고 손목을 움직여 Android 로고가 움직이는 것을 확인해 보세요. 에뮬레이터를 사용하는 경우 확장된 에뮬레이터 컨트롤을 열고 가상 센서에서 X 및 Y 각도를 조작합니다.

미리보기 업데이트

Codelab 시작 부분에서는 시스템에서 워치 페이스의 미리보기를 표시하는 데 사용되는 preview.png 파일이 있다고 확인했습니다. 이제 완성된 워치 페이스를 더 잘 반영하도록 이를 업데이트해 보겠습니다.

스크린샷을 생성하는 가장 쉬운 방법은 에뮬레이터를 사용하는 것입니다. 워치 페이스가 실행 중일 때 스크린샷 버튼을 클릭합니다.

캡처가 디스플레이 도형으로 설정되어 있는지 확인합니다.

이미지를 저장하고 res/drawable/preview.png 파일을 이 새 이미지로 바꿉니다. 이전과 같이 워치 페이스를 다시 빌드하고 배포합니다.

10. 축하합니다

축하합니다. 워치 페이스 형식으로 워치 페이스를 만드는 방법에 관한 기본사항을 알아봤습니다.

Codelab 솔루션

GitHub에서 이 Codelab의 솔루션 코드를 다운로드할 수 있습니다.

$ git clone https://github.com/android/codelab-watch-face-format

또는 저장소를 ZIP 파일로 다운로드할 수도 있습니다.

다음 단계

워치 페이스 형식으로 할 수 있는 작업은 훨씬 더 많습니다. 다음 단계로 넘어가는 몇 가지 제안사항은 다음과 같습니다.

워치 페이스 개선

정보 표시를 추가하여 워치 페이스에 추가 데이터를 가져옵니다.
아날로그 워치 페이스 대신 디지털 워치 페이스를 사용합니다.
형식의 기타 기능을 살펴봅니다.

게시 준비

메모리 사용량 도구를 살펴보세요. 이 도구는 워치 페이스의 메모리 사용량을 분석하며 워치 페이스를 Google Play에 업로드하기 전에 사용해야 하는 필수 도구입니다.