워치에 표현적인 디자인이 적용된다면

부록 : 워치 OS에 M3 Expressive를 적용하는 방법

모바일을 중심으로 설명된 가이드

지금까지 살펴본 M3 Expressive의 적용 사례는 대부분 모바일과 태블릿에 국한되어 있었습니다. 이 디바이스들은 물리적으로 사각형 형태를 가지므로 사각형의 컴포넌트와 조화를 이루기가 비교적 수월합니다.

그렇다면, 동그란 화면을 가진 워치에서는 이러한 컴포넌트들이 어떻게 구성될 수 있을까요? 이번 글에서는 M3 Expressive의 표현적 디자인이 워치 디바이스 환경에서 어떻게 최적화되어 적용되는지 알아보겠습니다.

---

물리적으로 동그란 스크린을 가진 워치 디바이스

워치에도 표현적인 디자인이 적용될 수 있을까?

M3 Expressive의 컴포넌트와 파운데이션 스타일들은 보다 표현적이고 역동적인 모습을 지니고 있습니다. 이러한 요소들이 작은 워치 디바이스에도 적용이 될 수 있을까요?

구글은 자사의 Wear OS에 Material 3 Expressive의 적용 원칙들을 소개하고 있습니다. 원칙 속에 담긴 Material 3 Expressive 사용 방법을 알아보도록 하겠습니다.

---

Wear OS의 Expressive 디자인 원칙

Material 3 Expressive는 가장 작은 화면인 스마트워치를 위한 최신 디자인 시스템입니다. 원형 폼 팩터에 최적화되어 있으며, 고급스러움과 더욱 풍부한 표현을 강조하는 디자인 업데이트를 제공합니다.

디바이스 형태에 맞게 둥글어진 버튼

원형 최적화

Material 3 Expressive는 원형 화면을 위한 형태 프레임워크를 새롭게 도입합니다. 화면 전체를 적극적으로 활용하여 빠른 인식성과 시각적 균형을 최적화합니다.

화면을 감싸는 형태의 컨테이너

Material 3 Expressive는 원형 화면에 밀착되도록 설계된 형태 컨테이너(edge-hugging containers)를 도입합니다. 이를 통해 둥근 폼 팩터 안의 공간을 최대한 활용하고, 시각적으로 조화로운 레이아웃을 구현할 수 있습니다.

원형 프레임의 모서리에 잘리는 일반적인 사각형의 버튼에 비해 더욱 깔끔한 인상을 줄 수 있어 보입니다.

형태가 적용된 디자인

Material 3 Expressive는 모서리 반경(corner radius)과 개성 있는 형태를 컨테이너에 적용해 더 감각적인 디자인을 구현합니다. 이는 로딩 애니메이션, 다채로운 레이아웃, 형태가 변하는 버튼(shape-morphing buttons), 적응형 버튼 그룹(adaptive button groups) 등으로 확장됩니다.

워치 디바이스에는 아무래도 적은 수의 컴포넌트가 한 화면에 들어가다보니, 인상적인 형태의 컨테이너만 적용해도 더욱 표현적인 느낌이 잘 드러나 보입니다.

---

더욱 부드러워진 터치 피드백과 트랜지션

고급스러운 모션과 스프링

Material 3 Expressive는 모든 화면 전환에 걸쳐 자연스럽고 고급스러우며 일관된 내비게이션 경험을 제공합니다. 모션은 이제 공간적으로 표면을 연결하며, 사용자 제스처에 더 정밀하게 반응해 직관적인 인터랙션을 가능하게 합니다.

공간에 맞게 동적으로 조정되는 컨테이너

컴포넌트 컨테이너는 플렉시블 레이아웃을 사용하여 가용 공간에 맞게 동적으로 조정됩니다. 버튼을 누를 때, 해당 버튼의 가로 크기가 늘어나며 양 옆의 요소가 그만큼 줄어들게 됩니다.

공간을 균등하게 분배해 대칭적인 구조를 만들거나, 시각적 위계를 세우고 중요한 콘텐츠를 강조하며, 모션 중심의 시각적 단서를 통해 사용자 상호작용을 유도할 수 있습니다.

적극적인 쉐입 몰핑

쉐입 몰핑

Material 3 Expressive는 리스트와 선택 버튼에 적용되는 쉐입 몰핑(shape morphing) 프레임워크를 도입해 더욱 고급스러운 느낌을 제공합니다.

소극적인 크기 변화나 딤 처리와 같은 피드백 대비, 더욱 적극적이고 표현적인 인상을 제공할 수 있을 것 같습니다. 다만 너무 그 표현이 과하면 위 이미지와 같은 입력 인터페이스에서는 피로감이 느껴질 수도 있어 보입니다.

---

세 번째 색상 추가

풍부한 색상

Material 3 Expressive의 색상 시스템은 더 깊이 있는 톤 팔레트와 확장된 토큰 세트를 포함하여 더욱 풍부해졌습니다. 세 번째 강조 색상(third accent color)이 추가되어, 디자인 시스템에 깊이와 다양성을 부여합니다.

컬러 테마 적용

새롭게 도입된 토큰은 디자인 시스템 전체 맥락에서 다양한 테마에 색상을 더 유연하게 적용할 수 있도록 해줍니다.

토큰 중에서도 톤온톤의 컬러 조합보다는 서브 컬러가 포함된 토큰이 좀 더 표현적이고 재밌어보이네요.

---

버튼을 누를 시, 순간적으로 가변 폰트 효과 적용

가변 폰트

Material 3 Expressive는 기존의 Roboto 대신 Roboto Flex를 도입했습니다. 타입 스케일은 스마트워치의 원형 화면에 맞춰 조정되고 최적화되어, 작은 화면에서도 더 읽기 쉬운 타이포그래피를 구현합니다. 또한 가변 폰트 축(variable font axis)을 활용하여 모션 피드백에 감각적인 표현을 더하고, 상호작용을 더욱 풍부하고 즐거운 경험으로 만듭니다.

폰트 굵기 변화(Dynamic font weight)

버튼을 누를 때 텍스트가 살짝 두꺼워지며 피드백을 제공

폰트 너비 변화(Dynamic font width)

화면 전환이나 강조 상황에서 글자의 가로폭이 변화

폰트 굵기 + 너비 동시 변화

한 동작 안에서 텍스트의 형태가 유연하게 변형되어 몰입도 강화

타입 역할(Type roles)

업데이트되고 최적화된 타입 스케일(type scale)과 함께, 웨어러블 환경에 특화된 새로운 타입 역할(type roles)이 도입되었습니다. 이 새로운 역할들은 스마트워치에 자주 사용되는 패턴을 효과적으로 지원합니다.

Arc Text

원형 화면의 곡면을 따라 배치되는 제목 텍스트

Proactive Content with Live Space

실시간 정보에 반응하는 콘텐츠(예: 실시간 운동량 표시)

Numerals 전용 타입 역할

현지화가 필요 없는 숫자에 한해 더 크고 스타일링 된 서체 적용 가능 (예: 타이머, 시계, 스톱워치 숫자)

---

웨어러블 기기를 위한 UX 디자인 원칙

Wear OS는 사용자가 더 몰입된 삶, 건강한 습관, 생산적인 활동을 누릴 수 있도록 돕는 웨어러블 플랫폼입니다. 스마트 워치를 빠르게 확인 가능한(glanceable) 독립형 디바이스로 만들어, 사용자가 휴대폰을 꺼내지 않고도 온라인에 연결되고 간편하게 작업을 수행할 수 있도록 합니다.

이를 위해 구글은 다음과 같은 UX 디자인 원칙을 제공하고 있습니다.

1. 핵심 작업에 집중하기

전체 앱 경험보다는 하나 또는 두 개의 주요 작업에 집중해야 합니다. 앞서 말했듯, 스마트 워치의 목적 중 하나는 빠르게 확인 가능한(glanceable) 것이기 때문에, 여러 작업이 있을 경우 핵심 작업에 집중하기 어려워집니다.

2. 손목에 최적화하기

사용자가 몇 초 안에 작업을 완료할 수 있도록 도와야 합니다. 오래 팔을 들어야 하는 불편함이나 피로를 줄이는 것이 중요합니다. 비주얼적으로는 표현적인 디자인을 사용하더라도, 경험적으로는 간결하고 쉬운 사용성을 제공해야 할 것입니다.

3. 빠르게 확인 가능한 화면 구성 (Glanceable surfaces)

Wear OS 앱은 사용자와의 상호작용 방식에 따라 다양한 화면에 표시됩니다. 특히 컴플리케이션(complications)과 타일(tiles)이 핵심입니다. 사용자의 시선이 잠깐 머물러도 원하는 정보를 빨리 확인할 수 있어야 한다는 뜻이겠지요.

여기서 컴플리케이션은 시계 화면에 시간 외에 표시되는 모든 기능을, 타일은 카드와 같은 UI를 말합니다. (본디 시계학에서는 시, 분, 초 표시 외에 시계의 모든 기능을 컴플리케이션이라고 한다고 합니다.)

4. 항상 관련성 있는 정보 제공하기

워치는 늘 사용자의 손목에 있습니다. 시간, 위치, 활동 등 사용자의 맥락에 맞게 콘텐츠를 업데이트하는 방식을 고민해야 합니다. 당연한 내용 같지만, 짧은 시간 보게되는 디바이스인 만큼 더욱 더 관련된 정보만을 제공해야 합니다.

5. 오프라인 환경도 고려하기

운동 중이나 통근 중처럼 네트워크가 느리거나 없는 상황에서도 앱이 잘 작동하도록 설계해야 합니다.

---

마치며

스크린의 크기가 작은 Wear OS에서는 다른 요소보다 쉐입에 대한 부분이 더욱 효과적으로 느껴지는 것 같습니다. 디바이스에 밀착되도록 설계된 Edge-hugging containers과 Expressive에서 새로 공개된 다양한 형태의 버튼들이 특히 흥미로웠습니다.

맥락에 따라 Expressive의 표현적인 디자인을 조절한 Wear OS

Material 3 Expressive는 감성적이고 풍부한 표현을 목표로 하지만, 그 표현은 항상 사용자의 맥락과 환경 위에서 조절되어야 합니다. Wear OS는 작고 제한된 화면, 짧은 상호작용 시간, 손목이라는 물리적 제약이 공존하는 플랫폼입니다. 이처럼 제한된 조건 속에서도 사용자 경험을 해치지 않기 위해, Expressive는 형태, 모션, 색상, 타이포그래피의 원칙을 최적화해 적용되었습니다.

이는 감각적인 표현과 실용적인 사용성을 동시에 성립시키기 위한 시도입니다. Expressive는 ‘더 많이 보여주는 디자인’이 아니라 ‘더 잘 느껴지는 경험’을 위한 디자인에 가깝다는 생각이 듭니다. Wear OS에 대한 자세한 내용은 아래에서 더 자세히 확인하실 수 있습니다.

Wear | UI 디자인 | Android Developers