스마트와치 UI 디자인 Android OS Wear

안드로이드 (Android OS)에 대한 학습 리뷰

스마트워치 프로젝트는 작년에 한번 했었고, 이번에 진행한다면 두번째 프로젝트이다. 다른점은 작년에는 기획/개발 영역에서 필요한 디자인 리소스를 전달하는 방식으로 진행했었고 Android Wear OS만 제작했지만, 이번에는 기획/디자인에서 Android/iOS 동시에 완성도를 높여야하는 부분이 있어, 직접 developers에 들어가서 공부를 해보았다. 참고 사이트

우선 스마트와치 디자인의 사례를 서치해보았는데, 정말 찾을 수 없을 정도로 분석하는게 힘들었다. 어디서부터 고민이었냐면, 애플워치의 사각형, 삼성 갤럭시 워치의 원형의 형태 차이부터, 어떤 사이즈로 정해야하는지 막막한 문제로 이 글 쓰기를 시작했다.

디자인 원칙 중요 포인트

1. 완전한 앱 환경보다는 한두 가지 작업에 집중.

2. 몇 초 내로 사용자가 시계에서 작업을 완료할 수 있도록 심플한 UI로 빠르게 액세스.

3. 시간, 장소, 활동과 같은 사용자 상황에 맞게 앱 콘텐츠를 업데이트하는 방법을 고려.

4. 운동, 출퇴근 등 연결이 느리거나 오프라인 사용 사례를 염두에 두고 디자인.

5. 실제 신체 연결(센서 및 움직임 감지 사용)을 통한 입력.

Problem 01. 

원형 및 정사각형, 직사각형 화면을 위한 설계

대부분의 Wear OS 기기는 화면이 원형이며 이는 정사각형 화면보다 UI 공간이 22% 적다고 한다. 

또한 원형 화면에는 텍스트를 쉽게 읽기 위해 더 큰 여백이 필요하다고 한다.

상단의 워치 그리드를 살펴보면 원형의 남은 부분은 보이지 않는 공간이 된다는 것이다. 즉 쉽게 사각형 형태의 레이아웃에서 작업을 진행하면 Android/iOS 둘다 적용이 가능.

Problem 02. 

앱 UI 적용 사례

Wear OS용 Material Design을 활용하면 매력적인 앱 환경을 설계할 수 있다. 아래 스크린샷은 이 가이드에 설명된 원칙을 따르는 Wear OS 앱의 몇 가지 예를 보여주는데 참고하여 제작하면 될것 같다.

피그마 Wear OS Material Design 경로 -> 바로가기

Problem 03. 

UI 형태/사이즈 및 디자인 고려 요소

Wear OS 생태계에 있는 대부분의 시계는 시계 화면의 형태(모양)가 다르다.... Wear OS용으로 디자인할 때는 앱의 노출 영역이 다양한 모양의 화면에 표시된다는 점에 유의해야 한다.

1. 우선해야하는 기본 디자인 사이즈

- 지원되는 가장 작은 원형 기기를 항상 우선으로 하여 디자인. 

- 필요한 경우 큰 기기와 정사각형 화면에 맞게 최적화합니다.

- 크게 4가지 사이즈로 지원되는 형태와 사이즈

2. 여백 조정을 감안하여 디자인

- 외부 여백을 절댓값이 아닌 백분율로 정의. 

- 원형 화면에서 여백이 비례하여 조정 되어야함.

직사각형과 정사각형 화면에서 모두 작동하는 동일한 레이아웃 사양의 예

3. 글꼴(폰트) 크기

서체 시스템은 함께 글꼴 크기를 형성하는 11개의 카테고리를 지원한다.

서체 속성은 서체 모음, 글꼴, 대소문자, 크기, 자간에 따라 맞춤설정할 수 있는 값으로 제어된다.

- Roboto는 Wear OS에서 사용되는 기본 글꼴.

- 텍스트 상자의 크기는 글꼴 크기가 클수록 증가. 

- 레이아웃에 따라 다른 요소를 화면에서 위 또는 아래로 푸시.

- 제목은 Medium, 본문은 Regular를 사용 (Android = Roboto, iOS = SF Pro)