손목 위에 있는 작은 화면의 디바이스라는 특성 탓에 스마트워치 앱은 최대한 간단하고 효과적으로 제작해야 합니다. 이를 위해 각 OS에서는 스마트워치 앱을 어떻게 구성해야 하는지 나름의 기준을 제시하고 있습니다.
 

안드로이드 웨어1)

 

androidWear_2dPicker

2D Picker의 세로형 탐색, 안드로이드 웨어

안드로이드 웨어는 2D Picker를 기본 구조로 하고 있습니다. 명칭 그대로 x축과 y축으로 이루어진 2차원 평면에서 가로 세로 방향으로 움직이면서 원하는 아이템을 선택하는 방식입니다.
가이드에 따르면, Context Card Stream을 탐색할 때와 마찬가지로 세로 방향을 메인 내비게이션으로 하며, 가로 방향의 아이템 탐색은 지양해야 합니다. Full Screen UI를 통해 화면을 자유롭게 구성할 수도 있지만, 이때에도 탐색 방향에 대한 규칙을 지켜야 다른 앱의 사용성과 일관된 경험을 유지할 수 있습니다.

애플 워치2)

 

페이지 형태의 가로형 탐색, 애플 워치

페이지 형태의 가로형 탐색, 애플 워치

애플 워치는 안드로이드 웨어와는 달리 가로형 내비게이션을 지향합니다. 우선 페이지 기반의 구조를 살펴보면, 동일한 레벨의 정보들을 가로 방향으로 나열하여 스와이프를 통해 탐색할 수 있습니다.
단계별 형태의 트리 구조, 애플 워치

단계별 형태의 트리 구조, 애플 워치

단계별 구조에서는 각각의 페이지들이 레벨에 따라 배치됩니다. 첫번째 레벨에서 특정 아이템을 선택하면 두번째 레벨로 이동할 수 있습니다. 이때에도 가로 방향성을 확인할 수 있습니다. 페이지 전환 시, 첫번째 레벨의 페이지가 좌측으로 사라지며 두번째 페이지가 떠오르는 트랜지션을 보여줍니다.
애플 워치 앱의 각 페이지는 스크롤을 제공할 수 있으며, 하단에 액션 버튼을 나열할 수도 있습니다. 만약 버튼을 가로로 배치한다면 한줄에 최대 2개까지 가능하며, 필요에 따라 3D 터치를 통해 추가 메뉴를 호출할 수 있습니다.

타이젠3)

 

세로형 구조, 타이젠

세로형 구조, 타이젠

타이젠은 크게 가로형, 세로형, 앵커형, 자유형 등, 총 4 종류의 구조를 제시하고 있습니다. 첫번째 가로형은 일반적인 스크롤 타입의 UI 구조입니다. 가로형에는 하위 페이지를 포함한 아이템 리스트 형태와 여러 장의 카드를 나열한 형태, 그리고 단일 카드 내에서 콘텐츠를 확인하는 형태 등이 있습니다.

 

가로형 구조, 타이젠

가로형 구조, 타이젠

가로형도 세로형과 마찬가지로 하위 페이지 포함 여부에 따라 그 형태가 세분화 됩니다. 여러 장의 카드가 가로 방향으로 나열된 페이지형과 한 장의 카드 내에서 스와이프로 콘텐츠를 탐색하는 연속형이 있습니다.

 

앵커형 구조, 타이젠

앵커형 구조, 타이젠

앵커형은 조금 특이한 타입입니다. 세로형이 y축, 가로형이 x축의 방향성을 가진다면, 앵커형의 stack은 z축의 방향성을 보여줍니다. 여러 장의 카드가 겹겹이 쌓여있고, 사용자의 선택 여부에 따라 뒤에 놓인 카드가 앞으로 올라오는 방식입니다.
앵커형의 두번째 형태인 다이얼형은 Gear S2처럼 원형 디스플레이를 적용한 제품에 특화된 형태입니다. 배젤을 따라 아이템이 원형으로 늘어서 있고, 중앙의 다이얼이 회전하면서 선택한 아이템의 세부 내용을 표시하는 방식입니다.

 

자유형 구조, 타이젠

자유형 구조, 타이젠

마지막으로 자유형은 말 그대로 자유롭게 구성이 가능한 형태입니다. 하지만 가이드에서는 지도처럼 큰 이미지를 줌인/아웃 하는 형태에 대해서 다루고 있습니다.

웨어러블 시대의 카드 UI

OS별 스마트워치 앱의 구조를 정리하다보니, 대부분의 UI가 카드 형태를 지향하고 있음을 확인할 수 있었습니다. 스마트워치는 화면이 작을 뿐만 아니라, 그 크기와 형태도 천차만별입니다. 그렇기 때문에 많은 정보를 빠르게 보여줄 수 있고, 다양한 변형이 가능한 카드를 이용하는 것은 어쩌면 당연한 선택인지도 모르겠습니다.4)
하지만 기존 모바일 디바이스와 달리 스마트워치에서의 카드 UI는 조금 더 많은 고민이 필요합니다. 앞서 타이젠의 앱 구조에서도 볼 수 있듯이, 원형 디스플레이를 적용한 스마트워치에서는 약간 변형된 형태의 카드가 더욱 어울리기도 합니다. 이는 단지 화면 구성 뿐만 아니라, 조작방식이나 트랜지션 효과 등에서도 마찬가지일 것입니다.
원형 디스플레이와 그에 따른 UX의 변화에 대해서는 추가 아티클을 통해 좀 더 자세히 정리하도록 하겠습니다.