스마트워치 조사 : 안드로이드 wear OS
스마트워치 2편 - 안드로이드 wear OS, 컴포넌트 조사
1편에 이어서 안드로이드 Wear OS쪽 정리를 진행합니다
https://brunch.co.kr/@clay1987/253
안드로이드 관련 앱 찾기... 어렵다 ㅠ
안드로이드는 애플의 watch OS와는 상황이 많이 다릅니다. 개별 서비스를 찾기가 많이 힘들죠. 그래서 가장 좋은 방법은 개별 앱을 앱스토어서 검색해서 워치제공여부를 체크하고. 안드 기반 워치로 직접 검색을 해봐야합니다.
저도 예전에 워치쪽 앱 조사할때 iOS에선 워치앱 제공여부 확인 / 안드는 '있지않을까'같은 애매한 상황이 여럿있었는데. 여전히 안드로이드 플레이스토어 웹버전은 개선이안되어있는걸 확인했습니다. (2020년 8월)
모바일 앱스토어에서는 상황이 좀 나은데. 표기가 바로 되는건 아니고. 상세보기 (about this app) 에들어가면 하단에 google wear os 관련표기가 따로있습니다.
안드는 사실 좀 가이드를 주기가 애매한게. 제 3사 써드파티제조사의 자유대로 화면 형태를 사각 / 동그라미를 둘다쓸수있습니다. 그렇다보니 가이드가 좀 애매해지는데. 대부분인 동그라미로 기존 시계의 특성을 많이 따라가는 편입니다
공식 사이트에서도 wear os 기반의 워치가 여럿 소개되긴하는데. 사실 카테고리도 작게나오고. 개별 상품을 찾으려면 별도로 검색을 하는게 낫더군요.
https://wearos.google.com/#find-your-watch
하드웨어가 다양하니 앱 제작사들도 계속 뭐가 많이팔리나를 확인해야하고. 조작방식이 다를수있는 점을 감안해서 만들어야하니. 제대로 맞춤형 안드앱을 만드는 곳을 빼곤 최적화가좀 힘든편입니다.
https://www.techradar.com/news/best-wear-os-watch
테크레이더의 안드기반 베스트 스마트워치 시리즈를 보더라도 - 삼성이나 fitbit쪽은 제외하고도
1. Fossil
2. Tic watch
3. Misfit
4. 화웨이
네가지 제조사가 나옵니다. 심지어 구매목록엔 LG쪽도있네요. 그나마 다행스러운건 그나마 원형으로 형태가 정리가되고있다는거고.. . 제조사가 많고 물리기기자체의 버튼도 기능이 제각각이라. 통일되려면 아직 멀어보이네요 ㅠ
가이드라인 : 패턴
https://designguidelines.withgoogle.com/wearos/patterns/notifications.html
일단 wear os의 규격은 마테리얼 기반처럼 두가지 큰 카테고리를 보여주는데
1. Patterns
2. components
두가지입니다. 컴포넌트는 최소 요소의 작은 UI 조각들이고. 이걸 기본적으로 이용해서 '당연하게 사용되는 규격화면들의 연속 /혹은 UI 요소 뭉치가 패턴입니다.
패턴
알림입니다. 형식이좀 여러가지인데요. 안드가 항상 그렇듯이 시행착오가 좀 많아보이네요. 개선될 가능성이 있으니 지켜봅시다(...)
1-1. standard notification
기본 형식입니다. 이것도 두가지가있네요. 앱아이콘이 상단, 중단에 쓰인 두가지형태 + 텍스트가 좌측 정렬이야 중심정렬이냐도 좀 다릅니다.
1-1-a 옵션 : big text
텍스트를 길게 쓰고 bubble 형식의 avatar + 앱아이콘을 함꼐 배치한 타입과 standard의 내용에서 내용이 길어지고 버튼이 함께 등장한 내용이 나오네요. 다른 타입이라기보단 1-1.에서 텍스트가 길어질때 이렇게 쓸수있다. 는거로보입니다.
여기에 다시 사진을 포함시킬수도있다. 는건데. 흠... 이건 호불호가갈릴규격이군요
1-2. Media
정확히는 media control인거같은데. 전체화면으로 쓰일때 / 뮤직 플레이어를 스크롤 가능하게 넣어둘떄.같은 식인거같습니다. 저 작은 화면에 스크롤 + 뮤직 리스트까지 포함하는게 권장사항인가요. 구글...
1-3. media
역시나 겁나 깁니다. 전체내용을 다 보여주네요. 물론 펼침 / 액션에의한 추가내용 강제스크롤같은게 있긴하겠지만. 여전히 좀 불안불안하네요. 이건 사족으로 - 워치에서도 스마트폰처럼 길게 화면이 늘려지는 미래를 예상할 수 있는게. 이런 지점 때문이기도합니다. 실제 컨텐츠가 길어요.
1-4. Chronometer
타이머 / 카운트다운 / 스톱워치 관련 등의 내용도 기본 패턴입니다.
iOS에 비해서 항상 개발관련 문서가 자세한편이라. 훨씬 좋긴한데요. 디바이스가 여럿이라는거. 인터렉션이 복잡하다는 문제 등등에서 개발하기 / 설계하기 상당히 까다롭네요
패턴
권한설정에 관련된 패턴입니다.
앱사용시에도 요런 권한확인 관련 팝업이 나오고
(1) 취소, 확인만 있는 컨버세이션 팝업과
(2) 세개 버튼이 쓰이는 팝업.
이 두가지 케이스도 함께 확인기 가능합니다.
2-1. 모바일 폰에서 권한을 설정해서 가져와야하는 케이스입니다. 상당히 자세하네요
2-2. 역으로 폰에서 워치쪽 권한을 던져주는 형태도 있습니다.
패턴
인터렉션에의해 내용 / 색상이 바뀌는 등의 내용입니다. 사용자가 뭔가 행동을 했을떄 - 정확하게 그걸 알려주라는 의도 / 용도로 보이네요. 색상이바뀌거나. 정보표기방식이 바뀌거나. 개별 UI 요소만을 스위치 형태로 바꿔주거나. 하는 사례가있는데. 이것도 실제 케이스를 봐야 이해가 쉬울거같습니다.
패턴
요소가 정확히 눌리는앤지 아닌지. 정보요소인지. 스타일인지를 구분하기위해 지켜야하는 내용들을 담고있습니다.
컨테이너는 쓰는게 권장되지만 필수는 아니고 포지션에대한 지점만 확실하게해달라.쪽이군요 원형 -> 사각형 워치에서도 잘보여야되니 가이드를 저렇게 잡은거같습니다.
패턴
액티브 / 비활성 + 동작 두가지 상태를 확실하게 구분해달라.는 내용입니다. 굳이말하면 편집이 가능한 모드 / 단순 표기상태의 모드를 구분해달라는거로도 볼수있구요
메인 화면이 저랬으면 일관성키지고 레이아웃 바꾸지말라. 같은 do / dont 부분입니다
번인현상이있을수있으니 다크모드 / 선 사용을 권장이네요.
또한 애플워치와다르게 우측상단에 항상 시계가 표기되지않다보니 개발자가 따로 상단에 시간표기를 추가해줘야하는 형식을 권장합니다
심지어 QR코드도 선타입으로 바꿔서 보여주네요
패턴
Swipe를 통해 앱을 닫고 메인 워치페이스로 돌아가는 기능입니다. 이게 기본 동작패턴에 들어가있네요
손목을 바깥으로 돌리며 - focus out을 하거나. 반대로 focus in을 했을때/ 흔들때 등을 체크해서 개별 앱마다 기능동작을 할 수도 있습니다. 대부분은 앱이 잠든상태에서 active를 시키는데 사용하긴하겠죠
패턴
splash화면과 동일 개념입니다. 동작할때 좀더 빠른 느낌을 주기위해 쓸수도있고. 브랜드 아이콘을 보여줄수도있습니다.
패턴
앱 실행시 로그인권한을 요청해야할 경우입니다.
(1) 구글 간편 로그인 방식
(2) 별도 앱을 통해 인증 후 연결방식
(3) 그냥 폰으로 연동시키는방식
(4) 무식하게 직접 입력하는 방식
구글 간편 로그인 방식
별도 앱을 통해 인증 후 연결방식
그냥 폰으로 연동시키는방식
무식하게 워치에서 직접 입력하는 방식놀랍지만 삼성 워치 기반 사용시에 4번을 쓰는 케이스도 여럿 있었습니다. 끔찍했구요. 가능하면 1~3번 사용을 권장하는 내용입니다.
개별 서비스에 로그인을 해야할거라고 예상이되면. 관련 정보를 하단에 꼭 써주고. 별도 로그인없이 기능사용이 가능한지 아닌지에따라 대처방안이 다릅니다.
일단 내용을 보여주고 로그인시키는걸 단계별로하라. 들어오자마자 로그인하라고 하지말라..곤하는데 저런앱들 무조건있습니다-_-;
폰과 다르니 여러옵션을 제공하지말고 단순화해라/라는 지점과
pin 넘버 발행 등으로 로그인 방식을 간소화하라는 부분까지 짚어주네요. 이런 지점들은 설계 반영하기에도 좋은 친절한 정보들입니다. 구글답네요.
이외에도 로그인관련 인증 등 여러내용을 포함하기때문에 여기서 다 다루진않겠습니다. 궁금하신 분은 직접 내용을 확인하시는게 좋을거같습니다.
https://designguidelines.withgoogle.com/wearos/patterns/sign-in.html#sign-in-behavior
그리고 이제 또 하드웨어가 여럿이라 골떄리는게 몇가지있는데
패턴
하드웨어의 버튼타입이 크게 두가집니다. 한개짜리 / 세개짜리.
그리고 싱글프레스와 꾹 누르기가 나뉘구요. ms 기준으로 500이상이 홀드라고보네요
다기능 용도 버튼에 있는 기능과 실제 버튼을 연결시키는 기준점도있습니다.
"단번에 해당 기능을 완료할수있을것"
- 예시로 답장.버튼같은건 답장을 선택하는 추가 기능이 필요하니 이런건 버튼에연결하면안되고. 타이머 시작 멈춤같은 단순기능에 사용하라고 되있습니다.
또한 메인액션 말고 추가 액션의 경우 primary 버튼으로 처리가 가능한것 외에 기능을 넣어야하고...
기능이 없다면 비워두라네요
또한 위아래 두개버튼이 쓰이는 경우 액션이 스위치처럼 쓰일수있게 처리하는건 문제없고. 버튼이 하나거나. 90도를 넘어가는 각도에 버튼이 존재할경우. pair 버튼으로 등록하면안된다고 되있습니다. 실제로 손으로 동시에누르기가 힘들기때문으로 보입니다.
요것도 영상이 일부 표기되있어서 자세한건 직접 보시는게나을거같구요.
마테리얼 가이드에서도 그랬지만, 구글은 자사 가이드를 철저하게 지키는 편이 아닙니다. 워치 OS에서도 하지말래놓고 는것도 많을거고 대부분의 앱들이 저걸 다 지키고있진 않을겁니다. 그러니 권장사항정도로 보시면될거같네요
가이드라인 : 컴포넌트
컴포넌트
두가지타입이 있습니다. 하나는 하단에 인디케이터를 표기해 좌우로 움직이는 형태이고
다른 하나는 한 화면에 여러가지 내용이 동시에 표기되는 형태입니다.
이런식으로 끌어서 내릴수도있고 핸들처럼 살짝 튀어나오기도합니다.
컴포넌트
개별 액션을 '잘 진행됐다'고 보여주는 형식을 말합니다.
예 : 답장을 A로 보냄 -> 화면내에 그게 표기되면 별도 내용 필요없음
예 2 : 답장을 A로 보냄 -> 화면내에 그게 표기될 방안이없으면 '보내졌음!"을 보여줌
전송실패 케이스나 폰에서 열기 케이스도 마찬가지로 이 형식을쓸수있네요.
다만 패턴에비해서 세부 컴포넌트라고 하기엔 좀 규격이 커보입니다
컴포넌트
인디케이터입니다. 빙글빙글 도는 쪽을 사용하고있고 안드 마테리얼과 동일합니다. 직선 케이스가 있긴할텐데 공간때문에 둥글리는것만 권장을 하는 모양입니다
컴포넌트
모바일 디바이스 / 별도연동이다보니 연결끊김에 대한 부분도 컴포넌트로 잡아둔듯합니다.
Stand alone으로도 동작이 가능한 케이스와 그렇지 않은 케이스가 있다보니 더 이렇게 해둔듯하네요.
컴포넌트
텍스트 타이틀 영역의 헤더 . 서브헤더를 포함한 내용입니다.
서브헤더가 살짝 더 작네요
컴포넌트
권한 설정 확인 메시지입니다. 이건 사실 패턴쪽에서 더 자세하게 나왔었죠. 안드 컴포넌트는 개발자가 겪을수있는 다양한 케이스를 여럿 포함한다는게 장점이긴한데. 정작 요소 컴포넌트를 제대로 풀어서 얘기하진 않고있는듯하네요.
애플 워치 OS쪽이랑은 반대입니다. 거긴 자세한 내용은 거의 안해주거든요
컴포넌트
주요액션버튼입니다. 상단의 아이콘 + 라벨타입과. 아이콘만 있는 타입. 두가지가 있습니다.
컴포넌트
인라인 액션 버튼. 컨텐츠 하단에 있는 액션버튼을 말합니다. 상단의 메인액션과는 별도로 해당 컨텐츠의 맥락에 맞는별도 기능을 담고있습니다. 요것도 좀 응용하면 아이콘만있는 여러개타입 / 아이콘 + 라벨이 달려서 여러개가있는 타입이 있었죠
컴포넌트
설렉션컨트롤. 마테리얼 기반 컴포넌트와 거의 유사합니다. 다만 스위치 부분은 왜 저런 둥근형태가됐는지 잘 모르겠습니다. 좌우가 아니라 상하. 8방향으로 움직일 수 있을거 같은 규격이네요. 이 부분은 추후 수정이되지않을까싶습니다.
총정리
안드 / iOS 워치쪽 모두를 들여다봤는데 특징적인게.
워치에 대한 접근방식 자체가 완전히 달랐습니다.
애플워치의 경우
- 정보를 최소화. 거의 숫자만 남은 미니멀한 정보구조를 채택.
- UI 요소도 최소화
- 사진 이미지는 거의 쓰지않음
- watch face를 제외하면 대부분 상용화앱들은 규격이 매우 단순함
안드 Wear OS의 경우
- 정보량을 최소화하기보다 상하 스크롤을 통해 기존 앱 규격의 사용성을 억지로 가져가려하는 모습이 보임
- UI 요소도 물리버튼이 3개 / 1개타입으로 나뉘어 고려할 요소가 많음
- 디스플레이도 둥글거나 사각형. 여러타입이라 특정하기가 어려움
- 사진이미지를 많이 사용함. 심지어 avatar ui컴포넌트를 사용권장. 본문에 사진 이미지를 포함해 스크롤이 생김
저 작은 화면에서 앱화면을 그대로 우겨넣은듯한 상하 스크롤은 제정신인가 싶을 정도입니다 다만 안드가 항상 그랬듯이 차차 나아질거고. 미래지향적으로 보면 시계에서 -> 폰화면을 보여주겠다는 열망은 이루어지게될겁니다. 디바이스 - 디스플레이 기술의 한계가 해결이 되야겠지만요.
추가내용
이외에도 삼성은 갤럭시워치페이스 디자인 툴을 따로 배포해서 단순 데이터연결 / 페이스디자인 등이 일부 가능하긴합니다
https://www.youtube.com/watch?v=EVLf57stdJk
다만 애플이나 안드처럼 그냥 자체 레이아웃에서커스터마이징하는게 더 편하긴하구요
갤럭시 wearable / 안드 wear os 모두 자체 홈이있어서 관련 정보들을 커스텀하는게 가능합니다.
다만 모든게 가능한건 아니고 세부내용은 다시 시계쪽에서 체크를 해줘야하거나. 좀 귀찮은 과정들이 여럿 있었어요.
안드 wear os를 사용해본적은 없어서 갤럭시 기준으로. 너무 빠른 방전시간. 이렇다할 추가효용없음
전화 체크를 위한 진동 정도가 그나마 장점이었구요. 운동체크를 안하면 별로 쓸모가 없었습니다.
이게 워치들이 사실상 부딛히는 한계고.
http://underkg.co.kr/quick_review/2723688
언더kg에서 리뷰한 미밴드 5 입니다. 3만원짜리임에도 스마트밴드 / 워치 중간사이에서 가성비 기반으로 다 후려치는 제품이더군요. 사실상 워치의 빠른 미래는 여깁니다. 값싸고. 정보 많이 제공하고. 1주일정도로 오래가고. 그리고 커스텀과정이 간편한거까지 포함해야하구요. 아직까지 스마트워치는 가격대 면에서나 기능 면에서 많이 부족하지않은가 싶습니다.
