brunch

You can make anything
by writing

C.S.Lewis

by 리플러스 Aug 28. 2020

스마트워치 조사 : 애플워치 OS

스마트워치 1편 - 애플워치용 앱,  워치 OS 컴포넌트 조사



UI 디자인 연구소에서 질문받은 내용을 정리한 글입니다.



Q. 스마트워치, 애플워치가 궁금해요!





일단 이 조사도 전체 수치를 들여다보는. 넓은 범위부터 조사를 시작했습니다. 


1. 전 세계 기준 주요 회사는 어디이고, 또 어떤 회사들이 있는가.

2. 그리고 그중에 제일 강자는 누구이고

3. 실제 앱 생태계에서 제작 가이드는 어떻게 처리되고있는가.





다행히 2020년 8월 20일자 자료가있었고. 시장 상황은 


1위 : 애플

2위 : 가민 

3위 : 화웨이

4위 : 삼성


으로 2019년과 그림 판도가 많이 달라졌습니다. 일단 삼성이 내려가고있고, 중저가 시장에서 시작한 후속시장 주자들이 규모가 커지고있는거로 보입니다. 애플은 거의 압도적이구요







조사에 조금 어려움을 겪었던 지점은... 


1. 대부분의 리서치 유료서비스들은 개별 OS마다 패드, 아이폰정도까진 카테고리를 나눠주지만. 워치 위주로 묶어서 내용을 알려주지않는다


2. 대부분의 자료들도 출처와 기반을 알수없는 서비스 목록들을 'must have'라는 식으로 소개를 하고있고. 해당 내용은 개인 블로그 / IT관련 매체들도 비슷비슷한 내용이 대부분





게다가 해외 매체의 경우 공신력의 기준을 알기가어려워서. 다음과 같은 대체 방법을 사용했습니다.



1. 주요 키워드 검색시 simillar web을 통해 해당 사이트의 월 평균 접속자수를 확인.

2. 주요 접속국가와 카테고리를 체크하여 - 해당 글이 공신력이 있는 주요 매체인지 아닌지를 구분

3. 랭크 비교글중에서 다시 서비스 스크린샷이 깔끔하게 정리되있는지

4.디자인 완성도가 높거나 메이저한 서비스들을 많이 담고있는지


-


위와같은 기준을 통해 30여개 관련 글 중에서 두개의 글을 선정했어요.






1. Digital Trends - 미국 랭킹 1079위 / 카테고리 랭크 88위 / 월 발문자 3300만명 수준


https://www.digitaltrends.com/mobile/best-apple-watch-apps/





2. Tech Radar - 미국 랭킹 945위 / 카테고리 랭크 62위 / 월 평균 방문자 4600만명 수준

https://www.techradar.com/news/best-apple-watch-apps-2019





디지털 트렌드의 글에서는 총 40개 서비스를 소개하며. 총 열한가지 섹션을 구분하여 서비스를 소개


1. 금융 서비스

2. 수면 / 정신건강

3. 헬스 / 건강관리

4. 뉴스

5. 날씨

6. 음악, 엔터테인먼트

7. SNS

8. 여행

9. 생산성 도구

10. 게임

11. 리모트 기능


이중 게임 / 완성도가 낮은 일부 앱을 제외하면 약 36 개 정도의 서비스를 확인가능.





테크 레이더의 글에서는 글 여러개를 나누어 카테고리별로 내용을 소개하고있는데.


1. 피트니스 헬스 앱

2. 수면, 음악 앱

3. 사진, 비디오 앱

4. 생활편의 관련 앱

5. 이메일 ,메시지 앱

6. 교육, 엔터테인먼트 앱

7. 뉴스, 은행, 경제, 여행, 음식, 날씨 앱


개별 URL이 따로잡혀있으며. 개별 포스트마다 앱 소개숫자가 다름. 다만 - 타 서비스들과 달리 주요화면 세개를 서비스마다 보여줌. 개별 가격대도 체크해줘서 서비스 체크에 아주 유용함






1. 피트니스 헬스 앱

https://www.techradar.com/news/best-apple-watch-apps-2019




2. 수면, 음악 앱

https://www.techradar.com/news/best-apple-watch-apps-2019/2




3. 사진, 비디오 앱

https://www.techradar.com/news/best-apple-watch-apps-2019/3




4. 생활편의 관련 앱

https://www.techradar.com/news/best-apple-watch-apps-2019/4




5. 이메일 ,메시지 앱

https://www.techradar.com/news/best-apple-watch-apps-2019/5




6. 교육, 엔터테인먼트 앱

https://www.techradar.com/news/best-apple-watch-apps-2019/6





7. 뉴스, 은행, 경제, 여행, 음식, 날씨 앱

https://www.techradar.com/news/best-apple-watch-apps-2019/7






일단 관련 앱들을 조사해보면서 확인한 내용들은 다음과 같습니다.


1. 이 작은 화면속에서도 나름대로 다양한 정보규격을 담고, 기능연동이 가능하다

2. 다만 이 경우 OS별 가이드라인을 굳이 지키면서 만들어야하는지는 좀 의문.

3. 화면도 작고 기존 앱과의 통일성을 지키지 않아야 최대의 편의성을 제공할 수 있으니. 개별 OS가이드. 컴포넌트 단위를 체크하는건 사실상 무의미하지않은가? 



답 : 사실 그렇진 않음. 개별 요소는 결국 개발자가 떼다가 써야하고. 커스텀을 만들기보단 위젯식으로 주요 컴포넌트를 떼어다 변형하는게 개발 /유지보수가 편리함. 안정적인 디자인 설계시에도 도움이 됨.


그래서 관련 자료를 좀더 들여다보기로했습니다.





애플워치 OS 가이드라인

https://developer.apple.com/design/human-interface-guidelines/watchos/overview/getting-started/





Element (Component)


1. acvtivity ring

둥근 링 형태의 그래프 (화면이 작으니 그래프를 둥글려둠) 를 acvtivity ring이라고 부르고. 스케일링이 가능








2. Alerts and Action sheets 

스마트폰 팝업창 생각하시면 편한 내용. 버튼타입이 몇개인지에 따라 내용이 좀 바뀜. 하단은 기존 화면에 어두운 오버레이형식.






3. button 

좌우로 넓게 쓴 고정형식 / 스크롤 가능형식이 서로 스타일이 다름. (사각형이 스크롤) 박스형태로 여러개를 쌓을수도있으나 3개이상넣기엔 크기가 누르기힘들어질듯










4. Date / timer labels

날짜, 시간라벨. 날짜, 시간 표기법은 24시/ AM PM / 시분초 등 조금씩 달라질수있음.








5. watch face

개별 UI 요소들을 모아 만들어진 Watch face - 메인화면 + 위젯 + 배경화면 등 여러 요소가 한데 모여있는 형태








6. 이미지

주로 아이콘 을 말하며. 아이폰과 달리 2x 해상도까지만 지원하면됨







7. Lists / Tables 

여기가 좀 애매한 부분인데. 좌측이 테이블이고 우측이 리스트랍니다. 



특이사항이있는데 리스트, 테이블에서 - 일반 스마트폰처럼 > 화살표 표기를 하지말라는 내용이있습니다.어차피 대부분의 리스트, 테이블은 다 클릭가능이니, 추가로 화살표를 쓰지말라는거로 보이네요.  일반 스마트폰과 문법상 차이가 있는 지점입니다.


좌측 상단 서브헤더가있고없고의차이인지. 아니면 체크박스가있고 없고의 차이인지 확실치는 않습니다.

최대 20줄까지만 제공할수있고 보통 10개 이하가 더 적당합니다.






8. menu

요건 OS 기본 메뉴를 앱 내에서 열수있게할거냐 말거냐로 보이는군요. 스킵해도될거같습니다






9. Modal sheet

좌측상단에 cancel 버튼이 떠있는 기본팝업입니다. 헷갈리게하지않으려고 back / title 을 쓰지않고 취소.로만 고정하라는내용이네요 가능하면 자주사용하지않는게 낫긴합니다.








10. navigation bar 

헷갈리실수있는데 흰색부분이아니라 상단의 상태창 / 백버튼이 등장하는 지점을 말합니다. 특징이 시계 부분이 무조건 표기되니까. 디자인시 주의하라는데. 세부 팝업창에서만 나오지않는 형태네요





11. pickers 

피커.인데 사실 저 자료만 갖고는 실제 인터렉션이 어떻게되는지 알긴 힘드네요. 첫번째 이미지는 상단의 인디케이터를 이야기하는건지.  아니면 워치 크라운 돌렸을때 내용이 스크롤 + 다른게나오는건지. 좀 헷갈렸는데. 후자가 맞는듯합니다. 




stack picker는 자세히 안보면 이해가어려운데. 기존 사파리 앱의 창 정리. 탭정리를 보여주는식인거같구요






12. slider 

슬라이더입니다. A / B 사이를 왔다갔다하는 형태로. 버튼을 손으로 누르면 움직이는건데. 11번. 피커 세번째 이미지와 다른점은 '초록색으로 요소를 포커스하는것'과 실제 리스트의 버튼을 누르는것.의 차이인거같습니다.  좀더 직관적으로 정리를 해줬으면하는데. 아쉽네요 




13. text and labels

텍스트 / 라벨 입니다. 요건 주요 앱들을 참고해서 어떤 비례를 쓰는지 체크가 필요하겠네요






14. Toggle / Switches

마지막으로 토글, 스위치입니다. 워낙 유명하니 따로 언급할 필요는 없겠죠?








이외에 iOS쪽에서 볼만한건 레이아웃쪽입니다. 다른 앱아이콘이나, 오디오, 비디오. 색상 등은 이미 타 앱들이 해둔 케이스들이 많으니까 레이아웃 / 개별 컴포넌트만 인식하고 주요 앱들을 분석해보면 금방 체크가 될거같습니다.


컴포넌트 숫자가 많지않아서. 약간 임의의 변형도 가능할거같네요



https://developer.apple.com/design/human-interface-guidelines/watchos/visual/layout/





iOS 워치 앱 지원여부 확인방법 

앱스토어에서 애플워치 스크린샷 탭이 있다면 지원이 되는 앱입니다.



브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari